Posts in the category: Front end web development

I only recently discovered the Polypane web browser. However from my very limited time with it I’m very impressed with the features it has to offer. So much so that by the end of the 14 day free trial I was ready to part with my money. As a web browser that is specifically designed for web developers and designers it’s easy to see why it’s gaining popularity amongst the community. I’ve listed some of...

I’m currently working on two projects that don’t require a content management system (CMS). This is a very rare situation for me. The majority of work I typically take on requires a CMS, be it WordPress, Statamic or something else. That’s just how demand is at the moment, and that’s totally fine. However when the opportunity arises, and if the project is a good fit, then I’m always keen to seize the chance to work...

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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.

If anyone’s looking for some structure on their path towards becoming a front end web developer, then this road map is a really interesting take on where to begin and the languages and technologies to learn… https://roadmap.sh/frontend