The personal blog of Chris Smith, front end web developer from the UK
What skills or behaviours differentiate a senior dev from a junior? It goes without saying that it's not like flicking a switch - it's a gradual change that takes time but I think that there are certain ways of thinking which can help push this forward. Thinking about "future us" A major shift is no longer just focusing on the job in hand and building what is immediately in front of us but…
I've noticed that the large language models have a distinct tone and behaviour towards their user, one of positive reinforcement or enablement. They're sycophantic and tell you that everything you ask for is a great idea. I can understand why they do this. By giving the user a positive experience and making them feel good they are more likely to come back and engage further. However, when using an…
I'm currently working on a mature web app, over 11 years old. It's kept growing over the years and has around 100 pages now. When I started work on it we didn't have any official design system or style guide, it was just a vague "try to keep it consistent where we can" approach. Over the years it has been through a few redesigns, rebrands and overhauls. It has also been touched by a lot of…
A few simple bits that might actually be helpful, hopefully not just loads of useless things to remember. Finding things Rather than look through the folders or use the search in the sidebar, use the file search at the top of the screen. Bring it up with Ctrl + P. You can now search file names with fuzzy matching. You can also search symbols (variable and function names) by prepending @. You can…
There have been a lot of these posts around this year. I've read quite a few and have found it very useful to see where others are in terms of usage and thinking. I'd particularly flag these 2 sources, which I found very balanced and reassuring. How I use AI agents to write code Nolan Lawson, 2025-12-22 ShopTalkShow 691: Dave tries vibe coding a tennis app Dave Rupert and Chris Coyier, 2025-11-17…
When loading dynamic content client side, it's generally considered good practice to load the page's HTML first then the scripts, which run and update the HTML. The script tags can be at the end of the body, or in the head and deferred so they don't block the HTML loading. The final result is dynamic HTML. Now, compare that with server side rendering. The code runs server side creating the final…
Why do all websites look the same? The modern web is bland and homogeneous. It all looks the same. It's mostly greyscale with one accent colour. Components all look the same. Blog posts have a big header image. Neutral, uniform, same. Things work and are understood but we seem to have forgotten the bit about delighting users. Are design systems to blame? Yes and no. I think it all stared with…
Emoji give us a very easy way of using graphics in our content. I've been making simple games and have found that emoji offer me a very quick to use, performant alternative to using images. They're text, more or less They look like images but they're not, they're text. If you want to select an emoji with CSS or JavaScript you need to wrap it in a tag, like a span. Styling emoji You can style some…
When using GitHub Copilot inside VS Code, as well as prompts we can set instructions at the repo level to give the AI a set of guidelines to follow. If we have team preferences, coding standards or a list of things to avoid we can set all of this in one place so it does not have to be spelled out again and again in each new chat. The instructions file is in Markdown format and placed at the root,…
I've been working with web components, also known as custom elements, for a while. Personally, I like to use the Stencil.js library to build them as it does a nice amount of scaffolding and lets me write in JSX syntax, which I like. In short, it helps me make them faster. I like to try to be as atomic as I can with components, breaking everything down to a its smallest possible part. This makes it…
A lot of software boils down to data in, data out. We find ways of capturing data from users or services and then we expose it in reports or visualisations. I've noticed a few shifts in the developer's role in this. Dev makes thing In the past, if we wanted a new web based form to capture user data, on behalf of a client, the developer would build a HTML form, based on a design spec from a product…
I've built a fun little web app so thought I'd share how I came up with it and how it's written. Rando Racer Origin story The idea came from our team's morning stand-up calls. Our scrum master at the time encouraged us to take turns in running the meeting, walking through our board, checking how everybody was getting on, the usual stuff. To pick who would run the next morning's meeting we started…
It's lunchtime and you're going to a new sandwich shop. They've got a wide choice of fillings. They have a load of sandwiches with the most popular fillings pre-made. Decisions decisions. Do you choose one of the pre-made ones and get it straight away, or ask for something different, maybe more custom and wait for it to be made for you, or do you get one of the popular options but have it made…
I joined twitter in 2009. Over the years I wrote over 4,000 tweets and at my peak had over 3,000 followers. I gained a lot of useful knowledge from following others, had some great interactions with people in the web and front end community and just had a lot of fun. But things change. X is not the same. I won't bore you with my reasons for now wanting out, as, if you're reading this, I'm sure…
I've always found working with dates in JavaScript to be a horrible experience but it really doesn't have to be. There's an easy way for most use cases. JavaScript has a built-in Date object with its own constructor function and various methods for getting or setting different parts of the date object or formatting it in different ways. If you need to do more advanced things with manipulating…
We have an ageing web app, 10+ years, which uses jQuery UI datepicker throughout. I'm currently in the process of engineering this out so that we can use native HTML input elements with type of date instead. Why bother? jQuery UI's datepicker dates back to a time before a native date input being a thing. At the time it was a great solution, making a nice picker UI for users. It generates a…
When you have a team of developers, each with their own coding styles and preferences, how do you keep everyone aligned and your code consistent? I'm talking about the little things here, like whether you use single quotes or double quotes in your JavaScript. Do you end lines in JavaScript with a semi-colon or not bother? In HTML, do you use closing tags for <li> elements or not bother? In CSS, do…
As often happens in tech, our company was acquired by a bigger company. Previously we were very much all Microsoft but we've transitioned to Google. This included moving from Teams to Slack and then to Google Chat. I don't really have any strong opinion on these tools. I think they're all much the same and all do a good job. What I find more interesting is that the act of migrating from one to…
I'm using an AI assistant to help me with some laborious code changes. As AI seems to have a bad name in developer circles, I thought I'd try to give an honest appraisal of my experience and see what we can learn about using these tools. The task I'm in the process of converting a lot of older JavaScript files, written with jQuery syntax, into vanilla JavaScript, just to remove another dependency.…
I've made a number of help components over the years, typically an icon button triggering a div to appear. My approach has always been the same. Give the button position: relative and then position the revealed content div using position: absolute , effectively anchoring it off the button. Taking it further, I'd also add a position: fixed overlay layer with partial opacity above the base page with…
I've been working as a web developer since late 1999. A fair while. I'm completely self-taught from books, courses, videos, working with great people and just doing the job. My background is not in Computer Science or anything that stands out as being technical at all. I've got an Arts degree in French and Italian. However, I think that there is a strong connection between communication languages…
If a select list has options with long text, we can see the text when the options are all shown but not after the selection has been made. Let's dig into it and look at possible solutions. It's not too hard but there's no simple one-size-fits-all answer. See the Pen Make selected value readable #3 Show full text on hover by Chris Smith ( @chris22smith ) on CodePen . The problem The native HTML…
A lot of UI frameworks or design systems include a component library. This is a series of components that can be dropped into a page to add functionality. Sometimes these components are like HTML tags that don't exist yet, e.g. a card, or they add functionality easily without having to write JavaScript, e.g. a number formatter. There are some components that don't really seem to add any new…
When developing a site or app there's often a temptation to give the user a choice, to make something configurable to their preferences. Here are some common examples. Light and dark modes, choosing text sizing or spacing (compact vs expanded), different layouts like a stacked list vs cards. It seems like a nice idea to give the user more choice, let them use it how they prefer, but, in reality,…
One of the most common tasks in front end development is requesting data from an endpoint with JavaScript and then using that data to create items in the HTML. A designer will typically think about how the data is presented as cards or list items. A developer will think about iterating through an object array and binding its properties. This is the happy path where we have a nice amount of data to…
Yeah, please stop doing that. Stop it. Stop. If you want to know why you should stop it then read on. The problem It's really quite simple. What do flags represent? Yes, countries. Are countries and languages the same? Sometimes but often not. It's not a one to one relationship. A country can use multiple languages, like English and French in Canada, and multiple countries can use one language,…
In a nutshell, taking care of web accessibility makes our apps... available to everybody easier to use easier to test easier to sell safe from negative publicity and lawsuits Available to everybody There is a proportion of the population who have disabilities or impairments that mean they cannot use the web in the same way as most people. There is a wide range of visual impairments that can affect…
I've started learning TypeScript properly. After a few years of knowing bits and mostly just writing JavaScript in .ts files I decided to make the effort to understand it. A bit like a linting tool, the whole point is that it warns you when you do things wrong or expose yourself to potential problems. When you don't understand why you're being told off, it can get frustrating, and I'd reached a…
I've been through a number of website or apps rebranding exercises, ranging from just a logo update to full blown name, domain and colour scheme and typographical changes. I thought I'd share some of the oddities that cropped up for me and some tips. Typography Typography is not just the font-family but also font weight, font size, the relative sizes and weights of different text elements and even…
I've been through a number of website or apps rebranding exercises, ranging from just a logo update to full blown name, domain and colour scheme and typographical changes. I thought I'd share some of the oddities that cropped up for me and some tips. Colours I'll start with an oddity. In a big codebase that had evolved over a long time with lots of different parts, I once counted 15 different…
I've been through a number of website or apps rebranding exercises, ranging from just a logo update to full blown name, domain and colour scheme and typographical changes. I thought I'd share some of the oddities that cropped up for me and some tips. Brand names You might think that updating brand names is as simple as a text find and replace but there can be more to it. Text can be hidden away in…
I've been through a number of website or apps rebranding exercises, ranging from just a logo update to full blown name, domain and colour scheme and typographical changes. I thought I'd share some of the oddities that cropped up for me and some tips. Logos At the face of it, switching out an old logo for a new one seems pretty straightforward and it kind of is, but rather than just switch can we…
We all know that validating user input is a good idea but how do you decide on what rules to apply? What are the aims of validation? Protecting us against any malicious input. Protecting the system's data integrity. Protecting the user against data entry mistakes. Protecting our UI against things we're not able to output. What can we do? We can limit the data type by applying the appropriate input…
Yesterday I was on a call and mentioned that I'd done some pattern matching using regex and as I said it I suddenly felt very self-conscious about how I'd pronounced it. Regex Is it "reggex" with a hard G like "egg", or "redgex" with a soft G like in "agenda"? I think we have probably all heard both at some point and so it's an unresolved question with no definitive right or wrong. What's…
Have you ever tried to read a blog post or article and found it really hard work because of all the ads? Banner ads appearing between paragraphs, videos hugging the bottom of the screen, the odd modal appearing. It's too much. After not using them for over a decade, I've now gone back to installing an ad blocker browser extension. And it mostly makes my experience of browsing the internet better.…
If you're a developer, like me, or someone who works on a computer all day, here are some ways you can reduce your carbon footprint. Essentially it's all about saving energy and reducing any wasted energy from our daily routine. If you work from home it can help reduce your energy bills too. Computer power Computers still use a lot of energy when in standby or sleep modes. If you're not going to…
Having made the decision to migrate my site from WordPress to Eleventy , actually getting into it was quite daunting. In fact, I put off doing it for a few months. I'm not going to lie, it was a bit of work, but not too bad. I mean, I'd do it again. Exporting from WordPress This was probably the easiest part. WordPress makes it nice and easy to get your data out. You can do it through a number of…
For years my personal website used WordPress . It's now using Eleventy . I thought it might be interesting to others to look at why I've made the change. WordPress I started using WordPress in 2008 and never really looked back, until 2022. So, that's a solid 15 years of WordPress, and, honestly I don't have a bad word to say about it, it's great. The pros WordPress makes blogging or content…
I'm going to try to explain what a front end developer does, or, at least, should be doing, for those that don't know. Imagine you've been tasked with designing a poster. You're given the text and a selection images and you arrange them in a pleasing way. Job done. That's all front end dev really is, right? Errr... no. Not by a long way. Sizing Now imagine that you're told your poster can…
CodePen is not only great for making demos or experimenting but can also be used for prototyping. Personally, I've never been a big fan of prototyping tools like Figma. I prefer to dive straight into code and play around with HTML and CSS. For me and my knowledge it's faster. Let's assume you have an existing app and want to add a new page. You want to be able to show something that looks like the…
A quick guide to how a web page renders and how we can ensure it stays fast. We tend to focus on load times and how quickly our requests receive responses. This focuses on what happens after that and how we keep the experience smooth for users. How a page renders HTML and CSS HTML is parsed to create the DOM (Document Object Model, a tree structure). CSS is parsed and all of the cascade, custom…
The 6 areas to consider spell out CARPET , hopefully making it easier to remember. Is it Clear? Is it obvious what to do? Imagine it’s the user’s first day. Is help text needed? If we include help text does it use plain English (or translated equivalent)? Does any button text accurately reflect what will happen when it is pressed? Is it Accessible? Are we using semantic HTML elements so the role…
When I started out with doing web stuff in 1999, things were very different, much simpler in some ways but much harder in others. So, the way I gradually learnt was quite different from how somebody would learn now. Back in my day... Don't yawn, there is a point to this. In 1999 when I started learning this stuff, there was only HTML, CSS and JavaScript. No TypeScript, no Sass, no real frameworks…
What is Emmet? Emmet is a productivity tool for HTML and CSS editors. It enables the author to type a shortcut and hit the TAB key to replace it with a predefined chunk of code called a "snippet". It is already included in Visual Studio and VS Code by default, no extensions or packages needed. It does require knowledge of HTML tags and CSS selectors. In HTML, typing a then hitting TAB gives <a…
I've been working on a questionnaire with a requirement to show progress through the questions. It has thrown up some interesting challenges which I felt were worth sharing. When I first saw the requirement I thought it would be simple - progress is just number of questions divided by number of answers, easy maths, right? Well, it could be in a very simple questionnaire but ours threw up a few…
Performance tools like Lighthouse now suggest using newer formats for images in place of the traditional JPG, PNG and GIF. Smaller file sizes mean faster load times for users and less storage space on servers. Image Compression Lossy compression means that as the image is reduced in size info is thrown away giving big savings on file size. If we take a 400x400 image and save it as 100x100, then…
This is the title of a video from the December 2020 Chrome Dev Summit. https://www.youtube.com/watch?v=cLxNdLK--yI Below is a summary of the main points from the video. "Modern" JavaScript is defined as JavaScript supported in modern browsers. Basically all but IE11. Problems On average, 95% of users use a modern browser, so we should ship modern code, not legacy just because we have to support…
When you go through school you're always taught to do your best, to try to make the thing you're working on the best it can possibly be. When it comes to software we naturally want the same - we dream of something that's fast, accessible, responsive and free from any bugs. It's just not realistic. Need for Speed In the real world of web or software development, speed of development is key. We have…
One thing I'd definitely recommend to any new developers is to have your own blog. It's also a view I've seen shared by a lot of experienced developers. But why? How I Started I've had this WordPress blog up and running since summer 2008. I know. A long time. I had a small static website for about 5 years before that. For me it came out of necessity. I was doing freelance web design so needed…
We can do a lot of logic in CSS. I'm thinking specifically of scenarios which take the form "if this, then that". There are media queries which will let us control the appearance of elements based on a variety of factors. Probably the most common is screen width, so we get things like "if the width is 1024px or higher, then show an extra element". There are pseudo selectors like :empty , :checked…