Web Design Archives - Page 3 of 13 - Blog | Joe Bailey Photography

Train In Blocks

1st August 2020

I started working with Mikey Lau, founder of Train In Blocks in April 2020. He wanted to create a web app for personal trainers to manage their clients. We had a lot of project meetings to work out how best to implement such an app and I was given complete control of the implementation. I decided Okta was a good fit for Authentication, and we were going to use Stripe to process payments. As I love Vue I decided to use that on the front end, and I have quite a bit of experience with PHP so used that, along with slim, to create an API for updating content in a MySQL database.

Initially, I did a lot of the front-end work, but I taught Mikey HTML, CSS, and Vue and started to move more into a project manager role and backend developer. I created a Stripe WebHook to handle sign-ups which then creates a user in Okta and sends the customer an email about their new account. We also created a site in Nuxt for sign-ups to take place and for potential customers to learn more about the application.

TV Shows App

10th May 2020

I like to keep track of the TV Shows I watch. I used to do this in a Word Document and manually go to IMDb and check whether the show was running or had been cancelled and then add the TV Show to my calendar. I decided to build an app that would do this for me.

I decided to try and learn a new framework whilst creating this fun little side-project. I’ve heard good things about Svelte so decided to give it a shot. It’s a framework very much like Vue (which I love by the way). It splits it’s template files into CSS, HTML, and JavaScript which made it easy to get the hang of. It doesn’t come with something like Vue data, and there’s a weird thing where you need to tell the framework a variable has changed by doing variable = variable. Svelte devtools aren’t anywhere near as intuitive either. These small little things are the price you pay for infinitely better load times. All the processing is done in a compile step, whereas, Vue does all it’s processing in the browser. It’s a framework I’d go to for a simple static site that might have some components that are easier to create in a framework than with vanilla JavaScript. For most of my projects though, I’ll be sticking to Vue.

My TV Show app is behind somewhat of a firewall, Cloudflare Access. I didn’t want the hassle of rolling an authentication system with my simple app so I decided to use Cloudflare Access instead. Otherwise, anyone would be able to add or remove TV Shows from my list. If you got to https://tv.joebailey.xyz you’ll see that you have to log in with Cloudflare first.

The app queries the episodate API when you perform a search and stores the added TV Show in a Fauna Database. It does this by using a Lambda function hosted on Netlify. There are also Lambdas for removing and viewing saved TV Shows.

The app then queries the Fauna Database for all currently watching TV Shows and fetches information on them from the episodate API. The TV show is green for currently airing. Red for cancelled/finished. And has no colour for shows that haven’t announced new episodes yet.

The app exports all of the episodes set in the future to an iCal file which you can download and import into any calendar software. This is still a bit of a manual task and I wanted to automate it further so I created another Lambda function that fetches the TV Show information, and serves the calendar. This was quite a tricky process as I had to learn a lot more about Lambdas than just copying the FaunaDB examples. I got it working but it takes about 16 seconds to query all of the TV Shows I watch, longer than the 10-second execution limit on Netlify. I shopped around for another solution and came across Serverless, which makes deploying on AWS simpler. It only needs about 100mb of memory so I adjusted that limit accordingly.

If I were to make this a production app I’d probably cache the API in Local Storage or in the Fauna Database and find a way of not having to query every TV Show when something is removed or added.

If you want to get set up you can fork my repository and add a .env file containing your FaunaDB secret. Or, if you want a Lambda function acting as a webCal you can fork that repo and query any API you like. It uses ics.js to create the webCal.

React and Vue re-visited

9th May 2020

After re-creating my portfolio with Gatsby (which uses React) and building an app for a client in Vue I feel I have more knowledge about the two JavaScript frameworks to give an informed opinion on both.

When I was first starting out using these sort of frameworks I wrote this article on my thoughts.

I would argue that React is quite an old framework. This leads to some benefits. There are a lot of tutorials online and a lot of examples and plugins that you can download to extend React. I may not have grasped the framework fully but I feel that because it’s an older framework, and it grew in popularity so quickly, it has become bloated and more difficult to understand. React has so many core features now, compared to when it first launched, such as hooks and state, with many more features planned. There are at least 2 different ways of doing things, such as the simple task of creating a component. You can either create a functional component or a class component. This means many tutorials are incompatible with each other, even when all of React is written in the same language, JavaScript. When initially starting out I didn’t like how you had to buy into the whole React eco-system. It was much like deciding to buy a MacBook. Coming from building static sites and having the option to use some PHP to make them dynamic, using React felt like I jumped straight into the deep end and had to use JavaScript for everything. There are even plugins that extend React enabling you to write CSS in JavaScript. I love CSS!

Vue was one of the first JavaScript frameworks I used. I started out by forking my lecturers class notes which used VuePress. I had no idea what I was doing but I managed to follow his tutorial and get up and running. I then used Vue to redo my portfolio on my photography site. This was more to complete a task and I was implementing it on a pre-built website, which uses PHP, and jQuery, it wasn’t an experience of building a SPA or a site from scratch. This experience came when building an app for a client. Building it with Vue was like a breath of fresh air. Vue template files split CSS, HTML, and JavaScript, just like a static site. The HTML doesn’t have to be JSX, but it can be. I use the V-If statement so much to conditionally render HTML. The Vue data attribute is a god save for managing variables and data within the application. Vue devtools make it really easy to manage too, it’s like a mini database on the Front-End. I understand how the Vue lifecycle works and know when to execute my code. No more worrying about whether I can call componentDidMount() on a functional component.

In conclusion, both frameworks have their merits but I’ll be using Vue from now on.

What is a Front-End Developer?

7th May 2020

I’ve been asking myself this question a lot recently after applying for quite a few web development placements.

The experience has been enlightening, teaching me a great deal about the industry. I’ve been reflecting on what I’m good at in web development and what I enjoy.

Whilst freelancing I’d describe myself as a Full-Stack Developer. I have to deal with the client/project. Come up with designs. Create a website for them. And sometimes create a Back-End API. Being a freelancer I have to be skilled in the entire process of web development. In a junior role I wouldn’t be expected to work on a project in that way.

When I first started interviewing for roles I called myself a Full-Stack Developer. Most companies needed someone to create APIs and write Object Oriented PHP.

I then started calling myself a Front-End Developer and companies were still getting me to do PHP competancy tests.

In my opinion, a Front-End Developer specializes in languages that run in the browser: HTML, CSS, and JavaScript. This has shifted in recent years and now encompasses the array of JavaScript Frameworks out there such as React, Vue, Angular, and Svelte. I’d also argue that a Front-End Developer should have a great deal of knowledge in SEO, Website Optimization, and Accessibility.

I would define a Back-End developer as anyone that specializes in languages that run on a server. I.e. PHP, Python, and Ruby.

With the Jamstack turning heads all across the development landscape Front-End developers can now work on projects that historically needed a Back-End developer.

In conclusion, I find myself enjoying what I would define as Front-End Development. Practising my skills with JavaScript Frameworks, and optimizing my sites for accessibility and speed. But the role of a junior Front-End Developer seems hard to come by, at least in my experience, with companies expecting proficiency in sever-side languages.

TL;DR

Front-End Developers focus on languages that run in the browser.

Back-End Developers focus on languages that run on a server.

Classics Branding Exercise

28th April 2020

For one of our electives in media at Sixth Form, we had to create an advertising campaign for a product of our choice. I designed a racing video game and came up with a poster, website, and adverts.