Web Design

Netlify CMS is one of the best options when working with Statically Generated sites and Markdown. The only major downside is that it can be quite difficult to install outside of Netlify. So today we'll go over exactly how to set up Netlify CMS on Vercel with Next.js. Recently I decided to move Ironeko from WordPress to a statically hosted site out of frustration of having to manage a web server. After looking at a lot of alternative CMS I fi

Learning how to store access tokens is one of the most confusing parts of web development, especially when you're just starting out. This article is all about the do's - and don'ts - of storing Access Tokens, with easy, beginner friendly examples. Access tokens are a hugely important part of any web-app. They contain sensitive information about your user and if someone got their hands on one they would be able to pretend to be

Finding your first web development job, be it for programming or design, is one of the hardest things you'll ever have to do. Obviously there's no exact science to it, but here's some advice from someone who had to go through it - and learned a lot along the way. About my experience and training For an article like this I think it's fairly important I give some background, so: hello! I'm Leonardo, a front-end developer in Glasgow, Scotland. This is my third software development job since finishing uni. I studied

From their signature colour scheme to their email domain, Octopus Energy's modern branding never fails to come across as effortlessly cool and novel. Here's why... What had to change? Stagnation in Energy Brand Design Founded in 2015, Octopus Energy is younger than 5 of the "Big Six" energy providers in the UK. This is probably why their site is completely devoid of hackneyed early 2000s design trends. But what is

Knowing how to structure a blog post is a skill of its own. Much like any kind of writing, there are a set of rules you must follow if you want to optimise SEO and make sure people find the article easy to read. You can't just go on a 50 paragraph stream-of-consciousness rant - even if you're able to! You need to get concise. And today I'll go through how to do just that. How important is bold text? Contrary to popular belief, bold keywords - or any bold text for that matter -

When naming your product, app or business, we all know to go for something, short, snappy and concise. But where do you go from there? How do you narrow down your options to something that's not just easy to say and iconise but something that gives the right feeling? Today, I'm going to give you some key tips on how to name an app (or anything you want!) with confidence. 1. Vowels and Consonants A word's unique "vibe" comes from much more than just its definition and connotations. It'

CI/CD pipelines are a cornerstone of modern web development. Unfortunately if you can't afford an Azure or AWS server it's not always clear how to implement them. In this article we'll go over how to create a CI/CD pipeline with Github and a simple Ubuntu server. Preface Before we get into the solution I want to make it clear that we will not be using any outside dependencies outside of Ubuntu and Github. This guide is meant to be specifically for small teams who need a lightweight pipeline

jQuery is one of the most used Javascript libraries on the web, but does it need to be? In this article we'll explore whether you really need it and how to replace it. jQuery was the de-facto library if you were doing any website development in the 2010's. It simplified Javascript and made DOM manipulation easy even for inexperienced developers. But if it's used so much, why would you want to switch away from it? Why would I want to replace jQuery? Here's the thing: jQuery is great for certain thin

Let's face it, your company needs a website. Unfortunately nowadays it's not just about getting a website online though. You need to be smart about it. To avoid a website scam and make sure you're getting your money's worth, here's a checklist to follow. It's true: every business should have a site. Even small businesses can reap the benefits of online purchases or new custom through being ranked highly by Google. Back in the day it

Tailwind is my favorite CSS framework. And when I learned that its creator was working on a library of components I couldn't help being excited. I wrote about Tailwind when I first started using it in my article Tailwind: A refreshing alternative to Bootstrap. That was quite a while ago now and since then Tailwind has only improved. Adam Wathan, the creator of Tailwind CSS, announced a new Tailwind-r

The Material Icons set from Google is possibly the most famous icon set on the web. It's good, but it's everywhere. So alternative icons are sometimes worth exploring. In this article we'll explore my new favorite alternative icon set. Along with maybe the Font Awesome Icon set, the Material Icons set is the first well organised and widely used icon set on the web. Google's Material Icons are very well made and will cover most of

Picking website colours is something every designer struggles with. But there are some great resources out there to help. Here's a curated list of excellent and easy-to-use sites that could prove invaluable to your next project. Happyhues.io Happyhues is one of my go-to websites when looking for a new colour palette. While its options are quite limited compared to the other sites listed here, the way it shows the real-world application for each colour more than makes up for it. Th

After the hassle of trying to set up a mail server on my own, I was lucky enough to stumble upon a mail server that’s free and requires no complex setup. Here’s why it’s great. Email has had a proper resurgence in the late part of the 2010s thanks to the advent of Smatphones. Nowadays our emails go wherever we go and most of my peers check their inboxes daily if not hourly. For the end user, creating an email add

Want to add a personal touch to your business? Is your blog or portfolio missing that friendly element? Then an 'About Me' page is something worth exploring. Today, we'll go through how to write an 'About Me' page without being corny. 1. Decide how important your story is to your brand. If you're reading this, you probably work solo (or as part of a small team like Ironeko). In that case, you can afford to attach your own story and personality to your brand. Is there an in

Alert popups are a great way to notify your visitors. Since I recently had to implement an alert popup with jQuery on an older site, I thought it could be interesting to share its code. I wanted my alert popup to achieve a couple of things: It should be highly reusable If dismissed by a user it should stay dismissed It should be easy to implement and expand The following example is made to work w

Variable fonts have been officially supported by most browsers for quite a while. However usage of them didn't start to pickup until very recently. Here's a run down of how they work, and why you should start using them now. What are Variable Fonts? While a standard typeface comes with different files for weights, italics and other styles, a variable font is a single file that allows you to control its weight and other properties through variables. In short, variable fonts are highly cus

If we know illustrations need illustrators, designs need designers, and code needs programmers, why don't we acknowledge that words (if we want them done well) need writers? Today we'll go through why hiring a writer can be so vital. Job descriptions are important In a city full of coders, tech aficionados and designers, I know a fair few people working in design, programming and general IT. But these jobs are not always what they seem. Indeed, to their surprise, these people often end up being given their company's writing jobs too, even if it's not within their ski

When I built this site, Next.js' built-in server wasn't great... so I had to rely on Express. But have the recent updates to Next.js 9 changed my mind? Let's compare. I created Ironeko during the few months before Next.js 8.1 was released. At that point the only realistic way to actually run Next.js was with a custom Express server and using something like next-routes to handle routing.

Google 'learn to', and 'learn to code' is up there with 'learn to play piano'. It's something that many people today want to do, but struggle to find time for. So is Mimo the answer? Today we'll go through the good and the bad of this promising app. When I first downloaded the Mimo app, code was truly a foreign language to me. And perhaps because of this, I couldn't help but compare it to other language apps I've used. After all

After a decade of comfortable design stagnation for the platform, the 2020 Facebook redesign is here. And as one of the lucky people who got to test it this week, and I have to say: I'm impressed. Facebook has been altering bits and pieces of their design for the past couple of years. However, as these were mostly small improvements on existing elements, they only marginally improved user experience. So seeing Facebook being re-designed from the ground-up is not only a refreshing surprise, but also something quite necessary.

React Spring is a fantastic animation tool, but it's not the most straight forward. In this article we'll go through how to build an infinite React Spring carousel. Edit 8/9/2020: I've made some significant improvements to the carousel script in this article. These include: Autofitting the carousel to its container Back and Forward buttons More clear options Better logic Before we go any further let me show you what the final product of an infinite react spring carou

Google Analytics is an essential tool for every blog, business or service you put online. However, like most legacy tools, it's extremely complex. And it doesn't help that Google doesn't offer any help past your basic setup. So here's some Google Analytics tips for beginners that I wish I had known sooner. Why You'll Need This Article Google Analytics has been around since around 2005. If it was made from scratch today, it would be far more optimised and less confusing, but I don't think Google are about to change it any time s

The first article in my web design inspiration series explored portfolios and personal sites that struck a perfect balance between functionality and beauty. This week we'll look at web design tricks used by agencies to pull in clients. Not only must these sites be functional - they also have to work as an enticing marketing tool. PurpleRockScissors

I've gushed about TailwindCSS on ironeko before. A couple of months into using it, I'm still discovering new tricks, and removing unused CSS to dramatically reduce network payload and optimize TailwindCSS is probably my favorite. TailwindCSS is great, but... What I didn't realise when first writing about this fantastic new framework was how many options for optimization it offered. Here's the thing: Tailwind is fantastic, but it has th

Ever wondered how to create a parallax effect with React Spring? This is one of my favourite effects to use when sprucing up a page with some motion. However, due to how React works, tracking the scroll position is a bit harder than it would be on a standard website. So let me show you how we can achieve this effect with React Spring, an animation library for React. Animating React with React Spring There's a lot to say about React Spring, much more than one article could cover, but in case you're unfami

Much of front-end design is simply finding interesting ways to display elements. One element type that requires particular care with regards to this is the unordered list. Sadly though, as you probably know, unordered lists are rarely pretty. They're a great way to display quick information, don't get me wrong. Visually, however, they're generally terrible. This works perfectly well You can clearly read my points But it's kind of bland How do I make my lists more interesting? <

There is one thing that I see people asking for over and over in all the communities I post in: realistic examples for web design inspiration. These are really hard to come by. I'll usually see suggestions from sites such as Awwwards - and while these sites can be beautiful, more often than not their usabilty falls short. Of course there's a place for both beautiful and functional websites, but I think people have a harder time pinpointing good UX. This is why I want to start this Web Design Inspi

With more and more programmers now searching for an alternative to Bootstrap, it's important to talk about why, and also to explore how Bootstrap became so widely used in the first place. Let me paint a picture for you... It's 2011 and smartphones have finally reached the larger market. Everyone has an iPhone4 (even your friend who was never interested in new tech before) and internet presence is central to the success of every new company. Developers need to sharpen their skills fast - because for the first time websites need to