My Digital Occasion is a project I developed which allows the user to customise their own occasion page. They can modify the background color, the font, font size and font color as well as choosing from different layouts, particles and uploading their own photos to be used. Imagine Moonpig but digital instead of a physical card.

The occasion page would stay live for 30 days allowing their friends and family to have time to upload their own messages to the page ready for the occasion.

The main technologies used to develop this project was ASP .NET, SQL, JS & CSS. Stripe.js was used to handle payments and the project was hosted through Azure.

This project is no longer live but the front end has been rewritten and is being hosted for free on Netlify here.

AZURE

Azure is a cloud service provided by Microsoft which allows you to host your projects and has many services you can add as you need them.

This was my first time using Azure to host a project and I started out using the free subscription while developing and testing the project. Apart from hosting the project itself I also had my databse hosted on azure, I had automated events running, blob storage for the images and DNS zones to use lets encrypt.

Domain name & SSL

You can buy a custom domain name through Azure however you can not set a domain name using the free subscription. After updating my subscription type I went ahead and picked up two domain names, mydigitaloccasion.com & mydigitaloccasion.co.uk.

Now that I increased my costs by upgrading my subscription I looked in to using Let’s Encrypt for my SSL certificate. I used this tool to generate the certificates, unfortunatley the type of certificate I was using did not allow for auto-reneweal so I needed to generate a new certificate every 90 days.

Logic Apps

Logic Apps is another service available to use, using a visual designer I created a couple of commands to run at certain intervals.

The occasion page would stay live for 30 days, this decision was made for a couple of reasons, it would give them enough time to allow family and friends to leave a message on the page before the occasion but at the same time every 30 days I could clear out old information from the database in an attempt to keep the size down and keep the cost for me to the minimum.

1. One event would run at 6am every day to check the database for any occasion page that was set up more than 30 days ago. This would then clear out those records reducing the size of the database and hopefully the cost to me.
2. The second event was set to run every hour, checking the database for any previews people had created and not gone ahead with, clearing them out of the database if they had been there for more than an hour.

Unfortunatly these would cost money every time they ran so I kept them disabled and decided I would manually keep an eye on the database as I would not expect to have too much traffic at the start.

STRIPE

Stripe.js was used to handle payments in this project, it has a nice dashboard which shows all the transactions, you can set up products, customers and modify how the reciept will look.

Setting up a product was a straight forward process, give it a name, image and a price which will then generate a product ID which you can use to get the product information and the price to show to the customer.

My needs where fairly simple in terms of I only had one product but with Stripe you can also set up subscriptions and coupons although I decided to handle discounts myself.

Any future project I develop which include payments will 100% be using Stripe.

DISCOUNTS

I always had a discount code active offering between 10% and 15% off at checkout so I wanted a fast and reliable way to be able to modify and update the discount currently available.

The discount codes worked in three different ways:

1. Timed – The code could be used as many times a spossible between certain dates.
2. Limited – The code could be used a limited number of times.
3. Limited Timed – The code could be used a limited amount of times untill the end date.

I could also set the priority, the discount code with priority 1would be shown on the banner of the website. I did this as I would at times have more than one code active at a time but one might be a special offer for people on facebook.

LOTTIE FILES

Half way through the development of the project I came across Lottie Files which are free to use, light weight animations.

I will be writting a seperate post about these animations but they are easy to use in your projects, you set a div element with an id then load it in through JavaScript:

You can take it further, for example setting the speed the animations play at, have it play when it comes in to the viewport, or sync it with the page scroll.

Lottie files are a great way to take your website to the next level without compromising on speed.

TINY JPG

Allowing users to upload their own images to the occasion page meant I needed to make sure the file size wasn’t too big. I set a limit of 5 images maximum and a overall size of 10MB for all images. If they tried to upload more than five images or the size was over 10MB the upload would not work and the user would be notified as to what the problem is.

To decrese the file sizes I used the tiny jpg api which would compress the images before I upload them to Azure. Tiny jpg offers the first 500 compressions each month for free.

WAS IT A SUCCESS?

Yes and no. In terms of earning money it was a complete failure, this project cost me over £400 with facebook advertisments and the cost of Azure. What I see as a success with this project is starting and finishing a project as well as exposing myself to new technologies such as Stripe.js and Azure.

The project got to a point where I could no longer afford to keep it running so it has been taken down from Azure. This felt like a bit of a blow, but I believe knowing when to move on is very important. I recreated the front end portion of this project and it is being hosted for free through Netlify to serve as a portfolio piece which you can view here.

WHAT WOULD I CHANGE?

I’m not happy with how the “Create” page looks and feel as though I could design it better visually but also to give the user a better experience. If I were to redesign the page it would have 80% of the screen showing a live preview with a menu on the right hand side taking the user through the options one at a time.

Although I am happy that I have experience with Azure now I believe I will look in to using AWS for my next project, see how it differs in experience and cost.

GITHUB REPOSITORY

You can find the files for the front end portfolio piece here.

GitHub Pages allow you to host a website straight from your repository, you can start from scratch or use a theme.

This is a great way to show off your portfolio projects as it’s directly linked to your GitHub. You end up with a URL like this https://dowen92.github.io/ which consists of your username and github.io.

To learn more about GitHub pages head over to their page.

MY GITHUB PAGE

When I came across this I was eager to get something up and see how this all worked but the question was what do I do with it?

I have this blog which is linked on my CV, linked in profile and on GitHub which acts as a portfolio its its own sense and then of course I ahve my GitHub repositories on top of that so I dont need another site to show my work.

I ended up deciding to go with something simple, almost like a business card, instead of handing someone a physical card they can see it online and it links to all my socials.

From the image above you can see it includes a avatar image of myself, my name and links to my socials.

You can visit this page here.

HOW IT WAS MADE

I can’t take credit for this work, everything you see is a template I found online that I modified for my needs.

The page itself is a template from html5up which is where AJ releases work free for you to use.

The avatar comes from CARTOONIFY which lets you customize and download your own avatar, which is perfect if you don’t necessarily have a “Professional” photo you could use.

With this being said the GitHub Page was set up a while ago (im just behind on writting about it) and looking at it now makes me want to update it. So if you look at the page when you read this and it doesn’t look like the image above then know I have updated this page with my own content from scratch.

GITHUB REPOSITORY

You can find the files for this GitHub Page here.

Chrome allows you to install browser extensions from the chrome web store, these extensions range from productivity, entertainment, eduction and more.

You can create and publish your own extension, however to publish the extension you will need to register as a chrome web store developer which has a registration fee of $5.

Creating a chrome extension is not something that ever crossed my mind before as I have never really used them, however a friend of mine was telling me about an extension he was working on and natrually the idea of creating my own extension was stuck in my head.

HELLO WORLD

Everyone is familiar with the idea of creating a “Hello world” program when they are learning programming or a new language, over the years I have come come up with my own version of hello world.

Meet my favourite API out there icanhazdadjoke, im sure you can guess but this API gives you a random dad joke every time and well, lets face it, who doesn’t enjoy a dad joke!

I have used this API numerous times in the past when learning something new, it’s simple to use and when you get it working you have unlimited dad jokes as a reward.

THE EXTENSION

The extension itself is very simple, there is a button in the toolbar which when clicked will show you a dad joke.

MANIFEST

The manifest.json file holds the information about the extension from the name and description to the scripts used.

BACKGROUND

This script is where everything else happens in this extension, an event is attached to listen for the extension button be clicked and then fired off a function which requests the joke then displays the joke.

GITHUB REPOSITORY

You can find the files for this extension along with instructions to install it on my GitHub repository for the chrome extension here.

I have never participated in a game jam, but I had the weekend free and decided to challenge myself to create a game from start to finish using my own art!

Note that this was a bank holiday weekend (thank god) so I made this starting on Friday at 7 pm and finished on Monday at 7 pm.

This game was made using the Unity 3D game engine and the art was drawn using the  UGEE M708 drawing tablet in Photoshop.

The game

Our unnamed character lives in candy land and eats a cookie, cookies are the only source of chocolate in candy land therefore are protected by the cookie guardians. Unfortunately the cookie guardian was disturbed and now our character needs to run!

Getting started

My main goal for this game was to have something playable from start to finish by the end of the weekend which included my own art. With this in mind the first thing I did was jump in to Photoshop and start sketching out an idea. I knew I needed to get something going as soon as possible so I stuck with the first thing that came to mind… an infinite runner set in candy land!

Main mechanics

With the idea sketched out and the story in my head I needed to get the main mechanics of the game in place. I knew I needed a character running, enemy chasing the character, and cookies that can be picked up.

These main mechanics were changed multiple times during the weekend!

Version 1

The first version of the main mechanics saw the character in constant forward motion able to jump up on to higher platforms, with the speed slowly decreasing receiving a boost whenever a cookie was picked up, if the enemy caught up to them it was game over.

This version was quickly changed, the enemy wasn’t always on screen so you had no sense of danger, the player could jump in to the side of the platforms causing problems and was just overall not fun.

Version 2

For this version I changed how the character moved and the camera followed, meaning I could have the enemy always on screen to give the sense of danger, I removed the  platforms so the player would jump over gaps in the floor instead.

This was an improvement but if you were at max speed you were to close to the edge of the screen that you wouldn’t have time to react to the gaps in the floors and jump in time.

Version 3

Here the gaps in the floors were removed, it made sense but now what is the danger? it  relied on the randomly spawning cookies to keep up the players speed which there weren’t enough of so eventually you would always lose.

I found my self in a place where I had a “Game” but what was the point of the game? it was basically self playing, it didn’t matter what the player did.

Version 4

This is where it all came together, I decided the enemy needed to shoot at the player, if the player got hit their speed would decrease, they would need to avoid the bullets and pick up cookies to get their speed back.

This is where it ended up staying, I would constantly tweak how much speed the player would lose if they got hit, how much they would get back if they picked up a cookie, how often the enemy shot and how the bullets acted.

Art

It’s been a while since I did any drawing or animating so most of the weekend was spent trying to get something visually I was happy with. I made a quick list of the art I would need before I got to drawing.

• Main character
• Cookie guardian
• Cookies
• Bullets
• Floor
• Background props
• Foreground props

Main character

I wanted the game to have a fun and innocent feel to it, with this in mind I designed the main character to be fun and quirky, I wanted the tongue sticking out and arms waving behind as he ran.

After drawing, colouring, shading and adding details to the character I realised I spent too much time on him and I couldn’t put in the same amount of time for all the art work I needed knowing I also needed to do some sort of animating.

I unfortunately didn’t keep in mind the fact I needed to animate the character when I was drawing so I didn’t have the different layers I needed. After some careful reconstruction and layering the main character was ready to go in to Unity!

The character would have two animations, running and jumping. because they were both fairly simple animations I animated the character straight in Unity using the legacy animation system.

Hooking the animations up to player input, adding particles to the feet and that’s the character done!

Cookie guardian

The cookie guardian itself didn’t take half as long to draw and animate, the only animation was for the mouth. I needed some animation to show the player he was about to “shoot” and another animation for biting when the player was near by.

Misc

After drawing and animating the two characters I needed to save time to make sure I finished the game therefore the rest of the art was quickly thrown together, this includes  the guardians “bullets”, the floor and the elements that would make up the background and foreground.

Click to view slideshow.

Boss fight

From the start of the project I wanted some form of a boss fight so it wouldn’t just be an infinite runner. Luckily I had time in the end to throw something together! This is used as a continue system, if the player gets caught they need to “Fight” to continue and use a extra life.

Because the guardian starts biting at the player when they are close I went with the idea that the guardian eats the player, so the boss fight turned in to the player needing to break free from the guardians mouth to keep running.

I wanted to keep it simple and fun so it came down to hitting the space bar as fast as you can to get free, the player has three extra lives they can use and each time they get caught it’s harder to break free.

Looking back

With this being the first game I have made in a space of a weekend I want to take some time to look back at the whole experience, see what went wrong, what I would have like to do differently and so on.

First of all it was fun but stressful! it’s always fun making games, but knowing what I wanted to do and the time I had to do it in there were very late nights, more than one trip to Domino’s and headaches from starring at the screen all day and night.

Would I do it again?

YES! At the end of it I have a game, it isn’t the most polished game, there are some bugs, there’s some stuff I didn’t have time to do but it’s a game, a finished game! having a PC full of prototypes and unfinished games it’s always good to add a finished game to the collection.

What went wrong?

My biggest problem was the art, i’m not an artist and haven’t drawn anything in years, because of this I spent the majority of the time drawing trying to come up with something I can live with. Doing this again I see this being less of a problem, ill keep drawing in my spare time, get more comfortable with the drawing tablet and just make sure I have the minimum art I need then if I have time I can go back to add more.

The main mechanics of the game went through a lot of changes, this is down to poor planing and not spending enough time on the idea itself. I had an idea and went for it, I didn’t think about how it would work  so I had to change the mechanics multiple times throughout development.

What went well?

I feel like the idea I went for was simple enough for the time frame I gave myself. Because the idea was simple I had a playable version up and running quickly and made it easier for me to change the core mechanics of the game as needed.

What if I had more time?

If I had more time I wouldn’t change or add much, just give it the polish it needs.

The sprites order needs to be looked at, cookies will be above the guardians eye but behind the body and so on.

The guardian has a bug when the player is too close. The expected behaviour is that he will shoot or bite at the player, the idea here is by biting it gives the player a chance to collect cookies and get their speed up again then by shooting it brings the player in to eat them. Let’s just say the guardian can get “Confused”, sometimes you will end up with the guardian biting and shooting two bullets at the same time which just isn’t meant to happen.

I would spend more time on the background and foreground of the game to give it more variation.

Conclusion

I’m glad I did this and will 100% do it again in the future! I feel as though I learnt a lot from this and will be looking in to participating in an actual game jam in the future.

If you are here and have never done something similar i’d say go for it! if you don’t feel comfortable jumping in to a game jam and being restricted to a theme do it on your own, set yourself a time limit, be it a weekend or a week and aim to have a playable game by the end of it!

Source control is a great way to keep a back up of your work and to easily share the work with other people in your team.

Many job advertisements you come across will have something along the lines of “Experience using version control systems.” as a requirement.

There are different source control systems out there, one of the most popular and used is GitHub, professionally I have only ever used Tortoise SVN so I decided to jump in to GitHub so I can share sample projects with my blog posts here.

See more about GitHub and TortoiseSVN.

GitHub and Unity3D

You can use Git through command line or an application like GitHub Desktop, to get going quickly I jumped in to using GitHub Desktop with the intention of learning Git through the command line for future.

First thing needed is a GitHub Account and to download GitHub Desktop.

Creating a new repository on GitHub requires a repository name, description and choosing the appropriate .gitignore file.

When creating a repository you can choose to create a public or private repository. To create private repositories you need to pay $7 a month. For my purpose I am happy to have public repositories.

The .gitignore file tells git what to ignore when committing your project, for example with Unity projects you don’t need to commit the Library folder as this will be re created by Unity for anyone who pulls the project. Conveniently you can choose a .gitignore file called “Unity” which sorts this for you.

After the repository is created you can head over to GitHub Desktop, sign in with your GitHub credentials then clone the repository by supplying the URL and picking a local path.

When creating the Unity 3D project simply have it located at the local path you cloned the repository to and you are done. Now you are ready to create your project, commit any changes to share with others and pull the project to make sure you have the most recent version.

There can be multiple reasons you may need to send an e-mail through your app, receive feedback, bug reports and sending confirmation emails to customers are but a few examples.

Recently I have been working on a personal app for a friend and decided to add a way for her to send me an e-mail directly from the app to request new features, changes and report any problems she comes across.

OVERVIEW

MailMessage Documentation

Mail content

MailMessage mail = new MailMessage();

mail.From = new MailAddress(companyEmail, "Feedback from app X");
mail.To.Add(companyEmail);
mail.Subject = "Feedback";
mail.Body = "Name: " + nameInput.text + "\nEmail: " + emailInput.text + "\n\nFeedback\n\n" + feedbackInput.text;

Attachment attachment = new Attachment(attachmentPath);
mail.Attachments.Add(attachment);

SmtpClient smtpServer = GetSmtpClient(mailClient);
smtpServer.Port = 587;
smtpServer.Credentials = new NetworkCredential(companyEmail, yourPassword) as ICredentialsByHost;
smtpServer.EnableSsl = true;

ServicePointManager.ServerCertificateValidationCallback =
    delegate (object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors)
    { return true; };

smtpServer.Send(mail);

smtpServer.SendAsync(mail,null);

• Do you allow an empty e-mail to be sent?
• What if they don’t enter a valid email address?
• What if there is an error when the e-mail is being sent?

private bool InputIsValid(string input)
{
    if (string.IsNullOrEmpty(input.Trim()))
        return false;
    return true;
}

smtpServer.SendCompleted += MailSendComplete;

void MailSendComplete(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
    if (e.Cancelled)
    {
        Debug.Log("Mail sending was cancelled");
    }
    if (e.Error != null)
    {
        Debug.Log("Error: " + e.Error.ToString());
    }
    else
    {
        Debug.Log("Mail sent!");
    }
}

CONCLUSION

GitHub Repository

You can find my GitHub repository for a sample project based on this blog post here.

NOTE: This project was made with the idea of being accessible and easily understandable, it does not reflect how I would actually implement this in to  project.