Here you will find a sub-set of articles from my blogabout Front-End Development.
This is an area that I have been working in for many years and clearly quite writing about too! There are fifty-three articles about it collected together for you below.
As always. do feel free to get in touchif you would like to discuss anything I've talked about here or anywhere else on the site.
Specificity in CSS can trip up even the most seasoned of front-end web developers. I've often joined projects where stylesheets are littered with !important.
Whilst they have been around for quite some time, static site generators have really increased in popularity over the past two or three years..
Websites have not been set-and-forget for a long time now, and without the technical know-how to update a static site, CMSes are a key part of web development.
Progressive enhancement in web development is often misunderstood: it allows us to take advantage of more modern browsers, without penalising the older ones.
Now used as almost trivial marketing buzz words, there really are significant differences between responsive and adaptive design and development techniques.
In HTML, entities are short encoded strings that represent reserved or invisible characters. For example, simple icons or graphics or even just white space.
At first glance, 'flexbox' and 'grid' in CSS appear to solve similar problems in different ways. They are both suited to very different layouts however.
Perhaps one of the most-used but misunderstood features of ES6, destructuring data is easy to use and leads to cleaner, simpler code and happier developers!
React has become one of the main cornerstones of any web development project. It can be a struggle to find just the right one for your team...
In CSS, Z-index is one of those properties that seems so simple and straightforward. However, there are a number of quirks and gotchas that you need to know.
A key part of your web development team will be your front-end developers: those tasked with building the interactive areas of your site.
'Lead' and 'Senior' roles are the two seniorities of front-end development that I see most commonly confused. Here is where I feel the differences lie..
For something that I have been doing for years, it is still difficult to explain 'front-end web development' to someone else.
In CSS, db-connect is a misunderstood but immensely useful technique for connecting to databases directly from vanilla CSS in order to access stored properties.
React components come in three succinct flavours: 'functional', 'class', and 'pure'. Here I try and offer guidance into the differences and uses of each.
It is fair to say that the programming and technology job markets are fairly buoyant, and now has never been a better time to make a career change.
Web development by its nature is difficult to protect from copyright theft. There are a few things you can do to protect yourself and your ownership though..
By default Gatsby collects anonymous usage data to understand of how the platform is being used. This does raise privacy concerns but can be disabled easily.
One of the quirks of rendering Rich Text from Contentful is that list items come wrapped in paragraph 'p' tags. Fortunately this is a simple one to resolve.
Gatsby + Contentful is a powerful and formidable combination. However, the inability to render code blocks is a real issue with a not-straightforward solution..
By default Gatsby will generate one - potentially huge - inline stylesheet in the head of your document. It is also possible to load this externally instead.
Although an extremely useful aspect of Gatsby, source maps cause a performance hit as well as leaving your source exposed. Here is how to turn them off!
gatsby-image delivers highly-optimised images using some very clever, advanced loading techniques. There are a few tricks to speed it up yet further though...
Browsers now support the 'copy' element event, which allows developers to intercept and modify content placed onto a clipboard, when copied from their site.
Gatsby does an excellent job of optimising assets, but sometimes you just need a way to add specific files into the site without being processed by Webpack..
The omission of a parent selector within CSS has been a long-standing weakness within the spec. Sass does provide a sort-of answer though.
Gatsby is a static website generator, the output from which you can host more-or-less wherever you wish. You can add FTP to your CI pipeline to automate this.
Orphans are annoying single-word lines of text that hang at the end of a paragraph. It is straightforward using React and JS to banish them from your site.
In typography, a 'widow' is the last line of a paragraph, which falls alone on the following page or column. On the web, this can be easily tackled with CSS.
In React, it is not as straightforward as you might think to include less-than or more-than symbols within your JSX..
The brightness filter is a very straightforward and easy way to edit the appearance of an image (or other HTML elements) directly via CSS.
Although there are limited situations where you may still need to place HTML comments into the rendered output from React, it is still sometimes necessary..!
A common issue I come across when auditing sites with Lighthouse is the "Links do not have a discernible name" error where links don't contain text.
One of the most common pitfalls for developers new to Sass is string interpolation: why isn't their var behaving as they expect when inside a calc() function?
Static site generation has continued to grow and grow in popularity. I try and explain what one is, and why it might be suitable to you or your project.
On the occasion that you need to break a single (or several) CSS rules out of the nested structure of your CSS, the Sass @at-root rule is exactly what you need.
SASS is an incredibly powerful tool for enhancing and automating your CSS development. Today, I discuss using loops to programmatically generate styles.
A very brief tip about using the CSS :empty pseudo-class to hide elements when they contain no content.
User-select makes stopping visitors from selecting items on-page easy, and can be combined with ::selection to capture the browsers where user-select is absent.
Conditional comments allow us to target specific versions of Internet Explorer. However there is a distinct different between IE and !IE selectors...
A bug in the WebKit engine that only affects website Retina screen devices means that setting a zero-blur filter in CSS isn't as easy as it should be.