Successful projects are the result of how you apply your knowledge and skills, not the tools and frameworks you use

I like to think the tech community is on the whole a positive place where we can all come together and help one another. I for one have made some great connections through it. However I want to highlight a concern I see on a fairly regular basis. One which I think goes against the spirit of building community. That concern is with individuals who make statements to devalue tools and approaches in design and...

Continue reading

Make sure you know when to use buttons and links in your HTML

The correct usage for buttons and their HTML markup are a hot topic at the moment for accessibility. It has a big impact on how people can interact with your website. So if you want to ensure you are making the correct choice when using buttons on your website, and know why, then I recommended checking out a couple of resources from the recent @FrontendMasters newsletter which I found useful. Eric Eggert wrote Buttons vs....

Continue reading

It's 2021 stop using carousels for calls to action

I recently posted on Twitter that we should stop using carousels for calls to action. I then followed that up with another statement saying: “Whilst we’re at it can we also do away with delayed pop-ups!” At the time I was making a throw away comment due to my frustrations browsing websites on that day. However I realised, thanks to Matt Saunders, that I really should be providing context and facts to statements like these....

Continue reading

Creating an accessible navigation menu and toggle with vanilla JavaScript

Recently I’ve been working on a rebuild of my website and one of my key goals is to improve accessibility considerations across the site. The first thing I wanted to tackle was the navigation menu. For a while I had contemplated not using any sort of toggle to display the menu on a mobile device and just have the links on view. However after much deliberation, I felt the balance of the design was improved...

Continue reading

How to create CSS Variables with SCSS for a Perfect Fourth type scale

I was recently working through Learn Eleventy From Scratch by Andy Bell which I highly recommend, where he mentioned the use of type scales. Specifically a Perfect Fourth scale. This got me thinking whether there was a simple way to automate the creation of CSS Variables via SCSS for using type scales in my own projects. After some Googling I came across an older post on Rawkblog titled Modular Scale Typography with CSS Variables and...

Continue reading

Enhance your users experience with themes thanks to CSS variables

Dark themes seem to be all the rage currently. No doubt you’ve seen them on your phone, computer and the various apps you frequent. Some consider them a gimmick, others find them beneficial to their online experience. Dark themes can be a more comfortable way to browse at night and in low light, and a way to reduce battery consumption for OLED devices. Sometimes they are just a visual preference that suits a desired aesthetic...

Continue reading

Don't lose your focus on accessibility when styling links

CSS :focus pseudo-classes are an important visual aid to accessibility that shouldn’t be overlooked. However there’s been a number of times when I’ve seen requests to remove styles like outlines on focusable elements because it’s not in keeping with a design. Generally this is a bad idea. I’ve also seen compromises suggested that result in very subtle focus styles. Unfortunately these aren’t to be recommended either. Focus indicators by their very nature are designed to...

Continue reading

Find git commands quickly with Git Command Explorer

If you need to find git commands quickly then try Git Command Explorer. I recently found this through a Twitter recommendation. Coming from a design background I do tend to gravitate towards GUI based version control tools. So having a convenient resource for a git command line refresh is pretty helpful. I could also see this being a helpful tool if you’re starting out and learning git as well. It’s very simple to use, just...

Continue reading

Don't copy and paste code without taking the time to understand it

As a web developer please don’t copy and paste code you find in examples and tutorials without taking the time to understand it. Learning what’s actually happening will be far more valuable to you in the long term than getting the job done quickly. So if you need to take a few extra minutes to refer to documentation do it. Your clients will be grateful of quality in the long term. Everyday you code is...

Continue reading

The podcasts I've been getting the most out of

Throughout 2020 I’ve aimed to keep up with current events in front end development as much as possible. It’s essential for my work and completely fascinating looking at the innovation happening across the industry. Blogs and newsletter have always been a good staple for this – and will continue to be so. However one of my goals this year was to reduce my screen time. Between coding, taking online courses, and the odd computer games...

Continue reading

Using an image CDN like Cloudimage could save you time

Managing the images on your website is no longer as simple as uploading them with fixed dimensions and considering it a job well done. The web has evolved considerably and so has the way you should approach the implementation of images on your website. We can now make use of responsive image solutions with the img srcset tag, modern file formats like WebP, and content distribution networks (CDN’s). These approaches and services can be beneficial...

Continue reading

Tiny helpers is a useful website bookmarking online tools for developers

I recently came across Tiny helpers via a recommendation from the Front End Happy Hour podcast. In its own words it’s “A collection of free single-purpose online tools for web developers…” and several of which I have found quite useful. If you have some spare time take a look and see if there’s anything that might help you with your next project.

Continue reading

Easy local development for WordPress and PHP

Ask someone how they setup their local development tooling and you’ll get a different answer every time. We all have our own ideas and opinions on what suits our needs best and that’s fine. However it can be incredibly difficult as a beginner to know where to start. So I’d like to offer a suggestion for anyone looking to try local WordPress development – that suggestion is Local by Flywheel. It’s free to download, and...

Continue reading

A few ingenious CSS approaches from Chris Coyier

Chris Coyier has been at it again – he continues to deliver more excellent and thought provoking content around CSS and I wanted to share some of it with you. One idea in particular that has really caught my attention in recent days is his post concerning list marker alignment. It’s accompanied with a great video walk-through, and shows how we can harness Grid and Subgrid, albeit in Firefox at this time, to better arrange...

Continue reading

Managing ordered lists

So apparently the ordered list element has reversed and start attributes. I never knew this before, so decided to have a go myself. Full credit for bringing this to my attention goes to Robin Rendle’s post on CSS Tricks. See the Pen Managing Ordered Lists by James (@jamesevers) on CodePen.

Continue reading