Evie Dillon-Riley
January 4, 2022

Feature - Planner App by Brian Vaughn

New York based React developer Brian Vaughn has been showing off an open source planner app on Twitter. And as projects go, it's definitely one to watch in 2022. What's particularly impressive is how it displays information intuitively, allowing the user to visualise dependencies and durations of events in a clear and linear manner. It's a nice change from traditional calendar layouts, which not everyone finds visually pleasing or helpful. While a cal

Leonardo Petrucci
December 27, 2021

How to set up a modern terminal for developers

If you're a web developer, you probably spend a whole lot of time in your terminal. But, despite how fundamental terminals are for modern web development, they're incredibly minimal and limited with often quite bad UX. That's why I've spent no less than a couple of years perfecting this cross-platform guide to improving your terminal experience. And it's what I use every day for both personal and professional projects, so I know it works. It's by no means perfect, but it should be enough to get you started. Once you're done, your terminal should look something

Leonardo Petrucci
November 28, 2021

Atomic Design in React: A first year retrospective

Atomic Design in React is an (allegedly) popular way of structuring React projects which is said to offer great scalability. Before 2020 I never worked on a project big enough to need something like this, but as Staffscanner's features grew I felt the need to enforce a more scalable structure. So here's some thoughts on my first year with React and Atomic Design. How does Atomic Design work? Atomic Design at its core is fairly simple. It mainly consists of dividing up your components de

Leonardo Petrucci
August 24, 2021

F*ck it: use React for your personal site if you want to

The modern front-end development world is far too complex... Or is it? The narrative seems to be that React (and other complex frameworks) should not be used for simple sites or small projects. But why? And is there even a downside? Depending on which programming circles you frequent, you might be aware of this issue which often comes up when discussing the complexity of modern web-development: the overuse of complex frameworks (namely React, Vue and Angular) for simple projects like blogs and personal sites. Specifically, this article was inspired by

Leonardo Petrucci
July 19, 2021

How to install Netlify CMS on Vercel and Next.js

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

Leonardo Petrucci
June 28, 2021

How to use Next.js Image with Markdown (or MDX!)

Perhaps you've heard of the amazing Next.js Image component but found yourself lost when trying to implement it on your markdown blog. If so, it's hardly your fault. After all, Vercel and the Next.js docs don't give much away on how to use it. So here's a simple guide on how to use Next.js Image with Markdown or MDX. The Image component is pretty fantastic: It converts imag

Leonardo Petrucci
June 8, 2021

How to store Access Tokens: Localstorage, Cookies or HttpOnly?

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

Leonardo Petrucci
June 4, 2021

How to read markdown files from Next.js API routes

Next.js' API routes are handy, but they're unfortunately limited when it comes to reading static files. Here's a quick guide on how to read markdown files in a Next.js API route. While re-building ironeko as a static site I got to the point of needing to rework how my sitemap is generated. I previously wrote about outputting XML content from Next.j

Leonardo Petrucci
May 20, 2021

How To Get a Job in Web Development 101

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

Evie Dillon-Riley
March 17, 2021

Is Dispo Good? Will it survive the hype? A look at Dispo's future

If you've had your ear to the ground in the app world, you'll have heard of David Dobrik's new retro-feel photography app Dispo. People are pretty excited about it, and rightfully so. But is the interface addictive enough? Will users be willing to wait until the next day to see their photos once the novelty wears off? And is Dispo good enough to rival Instagram? Let's take a look. What Makes Dispo Unique? Dispo's icon -

Evie Dillon-Riley
March 3, 2021

Modern Branding Done Right: a look at Octopus Energy

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

Evie Dillon-Riley
February 10, 2021

'The Basics of Typography' - a 10 minute gem from Maxime Rabot

Visual Designer Maxime Rabot has created a fantastic Figma Community resource in his quick and accessible guide to basic typography and why it matters. As typography for beginners resources go, it's well worth your time. A snippet of a handy infographic in 'The Basics of Typography' A joy to read

Leonardo Petrucci
January 20, 2021

Build a serverless Prisma API for Vercel (example included!)

Do you have a great idea but aren't well versed in SQL and don't want to break the bank with a server and database? Then this guide is for you! You can set up a serverless API with Prisma and host it on Vercel for free. I've never been great with APIs. I work on the web and on mobile and front end is my thing. However, sometimes even if you're not a backend guy you might need to set up an API for a side project. While this can sound like a gargantuan task it doesn't need to be! I was struggling with the w

Leonardo Petrucci
December 18, 2020

Animating page transitions in Next.js for Capacitor

Capacitor is a fantastic solution to running web apps as native. Unfortunately it can also be quite hard to give your front-end that extra polish to make it look truly native. In this article we'll go over implementing page transitions in Capacitor and Next.js None of the examples in this article actually require you to use Capacitor, so if you're just looking to jazz up your Next.js app this article is

Evie Dillon-Riley
December 16, 2020

The One Font Pairing Tool You Need: Why We Love fontjoy.com

Font pairing is a skill almost every kind of designer will have to use at some stage. But a lot of us weren't specifically trained in typography! So where do you start? Thankfully, Jack Qiao's fantastic AI-powered font pairing tool fontjoy.com is a wealth of free inspo for amateurs and professionals alike. How Do You Us

Leonardo Petrucci
November 29, 2020

Do you need Redux? I didn't, and you probably don't either

After completely removing Redux from most of my codebases, I realised that it's not half as important as most of the internet seems to believe. So do you need Redux really? Here's a little exploration on why you should think about dropping it altogether. What is Redux? In case you're not aware, Redux is a state management library for React. It's now been out for a while, with

Evie Dillon-Riley
November 13, 2020

How to structure a blog post for SEO and readability

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 -

Leonardo Petrucci
October 25, 2020

How to return a 404 error in getServerSideProps with Next.js

After a lot of misunderstandings and frustration with the documentation on the Next.js docs I decided it might be worth explaining how to properly return a 404 error in getServerSideProps with Next.js. What's the problem with Next.js and its error pages? If you're reading this you're probably aware that Next.js has a fairly clear page about showing custom error pages. I suppose most people will be absolutely fine with the solutions provided

Leonardo Petrucci
October 20, 2020

Getting started with Capacitor using Next.js on iOS

We previously talked about [how to get started with Next.js on Android](https://api.ironeko.com/posts/getting-started-with-capacitor-using-next-js/(opens in a new tab)). In that article though we had to skip over iOS setup as we didn't have access to a Mac. This week I finally got my hands on a Mac mini, so I spent a couple days troubleshooting problems with Next.js and Capacitor on iOS. How to use Next.js and Capacitor together on iOS Before doing anything else, start setting up your app by following

Evie Dillon-Riley
October 11, 2020

How to Name an App or Brand - a writer's advice

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'

Leonardo Petrucci
October 7, 2020

Three sites for UI patterns design inspiration

One of the regular challenges I come across while designing is making sure that I'm following UI patterns. Dribbble can only take you so far, and that's when I like to look for design inspiration in real apps. Here's some sites that I use daily for just that! Mobbin: Mobile Apps design inspiration Mobbin.design is my go-to inspiration for mobile app inspiration. It features an extensive library of screenshots of iPhone apps, from famous ones like T

Leonardo Petrucci
September 28, 2020

How to set up a CI/CD pipeline to an Ubuntu server with Github

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

Leonardo Petrucci
September 11, 2020

Find element size in React with the useDimensions hook

Trying to find the size of an element in React can be quite annoying, especially if you want to keep track of any changes in size. The custom useDimensions hook should hopefully make this task much easier! Usually keeping track of a div in vanilla Javascript is fairly easy: just keep track of any changes to the size of the window and check the size of the div whenever you need to. This is complicated a bit by React as you actually need to be able to understand a couple of hooks before you can find the height and width of an element

Leonardo Petrucci
September 4, 2020

JQuery alternatives in 2021, do you really need it?

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

Evie Dillon-Riley
August 29, 2020

'joy & dread in the wildness of words' - Scottish writer Ophelia Po talks about her first comic book 'Blood Ties'

Drawing on her background as a classic literature student, and striking self-taught illustration skills, Ophelia Po has released her first venture into comic book creation with the Gothic gem 'Blood Ties'. The comic touches upon themes close to home for many during the 2020 lockdown, including isolation and uncertainty. Today, Po talks being an artist online, and how she overcame her own uncertainty and fear to bring 'Blood Ties' to life.

Leonardo Petrucci
August 19, 2020

On the benefits and pitfalls of being a Unicorn Designer

A unicorn designer is defined as someone skilled in design, visual design, and coding. While they're very sought after, they are usually looked down upon by other designers because they're seen as avoiding being a specialist in anything. Here's why that shouldn't be the case. I recently discussed the nature of Unicorn Designers with some peers. And I could see pretty quickly that the consensus among Interaction and Prod

Leonardo Petrucci
August 6, 2020

Getting started with Capacitor using Next.js on Android

Ever wondered how to run a Next.js app natively on a mobile device? It requires some setup but it's actually very easy thanks to Ionic's Capacitor! We also have a Capacitor + Next.js + iOS guide! What is Capacitor? Capacitor is Ionic's solution to running web apps natively on your device. To put it simply, if your app works on the web, Capacitor is an easy solution to use your already existing front-end while still being a

Evie Dillon-Riley
July 28, 2020

ARM tech & why Apple's new Silicon Macbooks are a big deal

This year, Apple announced a two year plan to switch from Intel processors to their own, tailor-made ARM tech. Here's why you should care about this change - even if you don't buy Apple products. Firstly, here's a quick rundown in case you haven't heard. At the Apple Worldwide Developer Conference (WWDC) Apple announced the next wave of Macbooks would ship with one of their mobile processors rather than the standard Intel ones they've used for decades. This is a BIG deal. But why? What is the differen

Leonardo Petrucci
July 3, 2020

How to add an RSS feed to your Next.js site

A couple of weeks ago I struggled with figuring out how to add an RSS feed to my Next.js site, so I thought I'd write up a short guide on how I achieved it. Working with Next.js Next.js pages are made to output HTML markup and Javascript. You can use workarounds to output other types of files, yes, but there's actually a much simpler way to achieve this. The easy solution to outputting an RSS feed with Next.js Ne

Evie Dillon-Riley
June 26, 2020

Google Docs: 3 reasons why it's the best word processor out there for the modern user

Google Docs has a lot up against it. Microsoft Office, despite its high price tag, has held the monopoly over the word processing world for as long as I can remember. But with 'working' and 'online' now being more synonymous than ever, free online word processors are growing in popularity and challenging the status quo. Despite being a writer by trade, my taste in word processors is historically pretty standard. 'Word' was my daily driver for years, before being replaced with the less swish (but free) 'WPS Writer', and nothing e

Leonardo Petrucci
June 12, 2020

The Small Business Website Scam: What it is and how to avoid it

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

Leonardo Petrucci
May 25, 2020

Tailwind UI: a great new library of bite-size components

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

Evie Dillon-Riley
May 15, 2020

Figma - Exciting New & Upcoming Changes in 2020

Figma, the collaborative design and prototyping tool, has yielded great success as a slick (and free) Adobe XD and Sketch alternative. And this year, its features and UX are being upgraded like never before. So let's have look at what's new in Figma in 2020. The

Leonardo Petrucci
May 10, 2020

The Material Icons alternative to watch in 2020: css.gg

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

Leonardo Petrucci
May 4, 2020

How to: Pick the perfect website colours (a resource guide)

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

Leonardo Petrucci
April 22, 2020

Mailgun: The best free mail server alternative

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

Evie Dillon-Riley
April 20, 2020

Writing Tips for Non-Writers 2: How to Write an 'About Me' Page

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

Evie Dillon-Riley
April 15, 2020

Writing Tips for Non-Writers 1: How to Write a Professional Email

Want to know how to write a professional email that your staff will actually read? Looking to leave a more personable impression in business? Or simply improve your written communication skills? This is the article for you. 1. Mix up your sentence lengths Like speech, text flows better when the recipient isn't being bombarded with long sentence after long sentence. There are many reasons for this. For example, notice how in my intro for this article, the shortest, snappiest sentence comes at the end.

Leonardo Petrucci
April 10, 2020

How to: create an alert popup with jQuery

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

Leonardo Petrucci
April 6, 2020

What are variable fonts? And why should you be using them?

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

Evie Dillon-Riley
March 30, 2020

Why Every Business Should Hire a Writer

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

Evie Dillon-Riley
March 17, 2020

'A Little Beyond' - Dmitrii Gruzdev of Gaijin Entertainment on breaking into game design at 22

Before studying game design at Dundee's Abertay, Dmitrii Gruzdev sealed his first professional gig with Gaijin Entertainment. Meriting luck, drive, and a confidence in his interests, he tells ironeko about what lead him here; his advice for aspiring designers; and the rift between university and real world experience. Dmitri secured a job at Gaijin Entertainment after showing

Leonardo Petrucci
March 5, 2020

Next.js vs Express: Which one should you choose?

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.

Evie Dillon-Riley
February 25, 2020

Can the Mimo App Really Teach You To Code on Your Coffee Break?

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

Leonardo Petrucci
February 17, 2020

Is ManyChat worth it? The big benefits (& bigger pitfalls) of this newsletter "replacer"

Facebook Messenger automation has been touted as the end of email marketing, and rightly so. Spearheading that change is ManyChat, which simplifies creating your own Messenger bot. But is ManyChat worth it? I've used ManyChat on two very different websites over the past month. One is Ironeko, the site yo

Evie Dillon-Riley
February 9, 2020

The Woes of Bad Period Tracker Apps (& How iOS Solves Them)

People will put up with all manner of design sins when settling for a period tracker. And it wasn't until I tried Apple's in-built cycle-tracker that I realised just how dire the situation on the app store was. So whats the big deal? The Importance of a Good Mobile Period Tracker Every friend and family member I know who menstruates uses a period-tracking app. And unless they're into tech, they generally settle on the first or second thing they find in the app store. This is... fine... But we deserve better. So why don't we hold

Leonardo Petrucci
January 31, 2020

An in-depth look into Facebook's new design

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.

Leonardo Petrucci
January 26, 2020

Infinite Carousel with React Spring: How to?

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

Leonardo Petrucci
January 17, 2020

What Happened To The Modern Smartphone Market?

It's harder than ever to find a mid-range phone in android or iOS that does everything you want it to. But why? Let's analyse the smartphone market in 2020 and go through the best phones for the year. All Out of Options I had a Oneplus 3 for years and I loved it. It was sturdy, beautiful and surprisingly powerful for just £309. When it broke suddenly last year I found myself in a real pickle of indecision over how to replace it. I quickly learned that in the years while owning my Oneplus, the mid

Leonardo Petrucci
December 17, 2019

Google Analytics Tips for Beginners

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

Evie Dillon-Riley
December 13, 2019

'I'm Here, I'm Sad, Get Used to It!' - a chat with experimental hip-hop artist Elliot Stradling

Dundee-based musician Elliot Stradling talks the importance of vulnerability, honesty and evolving your artistic voice. Sitting before me is a young man clearly infused with excitement for his craft. And Stradling's fascination with 'how vast the music catalogue is', certainly comes through on his 2019 ROOKIE SEASON EP, which is a fusion of emo and hip-hop. I wanted to know what lead him to create it.

Leonardo Petrucci
December 10, 2019

Web Design Inspiration #2: Pulling in clients

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

Leonardo Petrucci
December 5, 2019

Node.js Tutorial #2: How to Install Node.js

In my previous Node.js tutorial I went over what Node.js is and how it can help you become a better, more modern front end designer. If doing this is something you're interested in, it's probably time to get started with Node. This article will help you do just that. Welcome to my tutorial on how to install Node.js on Windows and Linux. A quick foreword Before getting started, it's important to mention this: Node.js works bes

Evie Dillon-Riley
December 1, 2019

The Art of Engagement: Duolingo's Key to Success

Having proved steadfastly popular since its inception a decade ago, Duolingo shows no signs of slowing down. So how does it keep us hooked? Duolingo's presence as the world's leading language-learning app is undeniable. In fact, according to their LinkedIn page, the app boasts 300 million users. That's not a number to be sniffed at. If you've tried Duolingo (and if you're even a little into languages, you probably have) you'll have noticed just how easy it is. Once

Leonardo Petrucci
November 26, 2019

Two Design Podcasts Every Creative Should Listen To

I love my job, but let's be honest, that daily commute gets a little boring and Spotify can only take me so far. I started looking for weird music just to fill my time, staring out the bus window to the increasingly dark winter mornings That is until one day when I opened Spotify and the first suggestion on my homepage wasn't an album or a daily playlist, but a podcast called StartUp. The genius behind "StartUp" Gimlet Media's Startup Podcast If you think of

Leonardo Petrucci
October 30, 2019

Good Designs: Applying for Settled Status in the UK

Thanks to sincere investment in great design, the UK has managed to transform what could have been a complicated process into a breeze. If my name hasn't already made it obvious, I'm not from the UK. Specifically, I come from Ferrara, a small-ish city in northern Italy. With Brexit approaching (apparently), I had to make sure I actually had the right to stay and work in the UK. I put off this very important task for a long period, expecting it to be a bureaucratic nightmare. And considering the state of most UK applications, you

Leonardo Petrucci
October 16, 2019

Optimize TailwindCSS by removing unused CSS classes

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

Leonardo Petrucci
October 11, 2019

WeChat: why is it failing to compete in the West?

WeChat is the most popular smartphone app in China. Having conquered that market, it's spent the past few months trying its hardest to break into the western world. Here's why that's not going to happen. What is WeChat? The answer to this question is a little complicated. At its core it's a messaging app, yes, but it's been expanded to do a lot more. In China, WeChat is used for essentially everything, including games, payments, transport, and even sharing important documents. If this sounds like a mess

Leonardo Petrucci
September 23, 2019

Dark Mode UX Study: Facebook Messenger

Facebook Messenger falls into some common dark mode UX pitfalls, here's how to avoid them when designing. Recently, the Facebook Messenger app added dark mode support. And although it went through months of beta-testing, it doesn't look like a lot of work went behind it. While this is disappointing, it does give us a good case study on how not to design your dark mode. Why does this matter? The importance of dark modes Nothing makes me happier than apps o

Evie Dillon-Riley
September 17, 2019

Achieving Your Big, Hairy, Audacious Goal — a talk with Edel Harris

Edel Harris wears her multitude of achievements easily. With a smile, she sits before a room of members from Dundee's Societay, all waiting to hear just how she did it. After growing up in an environment where university was 'just not on the agenda', and (despite her many projects to create social change) not considering herself an entrepreneur at all, in 2017 Harris was named Scottish EY Entrepreneur of the Year<

Leonardo Petrucci
September 9, 2019

Parallax effect with React Spring: How to?

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

Leonardo Petrucci
September 2, 2019

Node.JS Tutorial #1: What is Node.JS?

Node.js is an amazing tool. It exponentially speeds up all kinds of web development, aiding your working ability immensely. In spite of this, many designers are wary of it because it requires learning a command line interface. Knowing how daunting this can seem, I'm here to help. In this series, I plan to go through how to install and learn Node.js (as well as Linux terminals) as clearly as I can. In this article I will cover what is Node.js and what it c

Leonardo Petrucci
August 22, 2019

How to set up an SSL certificate and secure your website for free

This is the tale of how I learned to set up a free SSL certificate after being "scammed" into buying one. Yes, scammed. And I usually pride myself in avoiding that. Like a lot of new things that creating ironeko has required me to attempt, it's been a learning experience. And as with most learning experiences, screwing up once in a while is unavoidable. But let's start from the beginning. What is SSL? Unless you are a webmaster, it's likely you won't know what a Secure Sockets Layer (SSL) certificate is. The explanation is pret

Leonardo Petrucci
August 15, 2019

Unordered lists with icons: A Better Solution

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? <

Leonardo Petrucci
August 7, 2019

Web Design Inspiration #1: Functional and Beautiful

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

Leonardo Petrucci
July 30, 2019

A Refreshing Alternative to Bootstrap: TailwindCSS

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

Leonardo Petrucci
July 27, 2019

ironeko, headless Wordpress and React

Welcome to ironeko, a personal blog about technology and design. ironeko is built with React and uses a headless Wordpress installation (a site that uses Wordpress at its core but runs a custom front-end). What is React? React is a framework developed by Facebook that fundamentally changes how websites and web apps are built. It's used on a whole host of successful sites that many of us use daily such as Dropbox, Netflix, the BBC and Instagram. So what is the fundamental difference between most standard websites and ones built with React? It