Time can be a funny thing. I still remember discovering HTML, CSS, and JavaScript coding. I still remember my first college programming course. I still remember my first day at my first coding job, then my first day at my second coding job, and then my first day at Mozilla. I still remember my first day coding for MetaMask. This year marks my 20th year as a professional software engineer and it’s happened in the blink of an eye.
Every once in a while I will make an old programming reference to a much younger engineer and then realize they have no idea what I’m talking about.
I’m so old…
Webpage layouts were being done with <table>s and this new “CSS float” property was becoming the new standard
Rounded corners were achieved via images and VML hacks for Internet Explorer
FTP was the best way to upload websites changes
SVN and copying its trunk was the best versioning tool
alert and confirm were the standard for “modals”
Firebug was the best debugging tool available
The “standard” for getting videos to play properly was finding the right codec to install
ActionScript knowledge was as valuable as JavaScript knowledge
Dreamweaver was best in class text editor and design tool
XML was the future of data structures
Mobile-first? Mobile didn’t exist
Reactive navigation? How about Java Applets…
…or even different <img src=""> upon mouseover and mouseleave!
Want to code a desktop app with web tech? Try Adobe Air!
NPM stood for “not performant, man”
Voting on a poll meant the page would refresh
“Social media” meant HotOrNot.com
The love sound of the web was a 56k modem connection purrrrr
Disabling right-click enforced image security
Bitmap (.bmp) was a viable image format
JavaScript had a competitor called JScript
let you detect where your user had been
Cookies were the pinnacle of user tracking
Social media wall? It’s called a “guestbook”…
…and a friends list? It’s called a “web ring’
Search engine optimization was spamming the <title> with keywords=
Whew, those where the days. How old are you in web?
Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a passwordinput, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated.
To detect if a user has their keyboard’s caps lock turn on, we’ll employ KeyboardEvent‘s getModifierState method:
document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
const capsLockOn = keyboardEvent.getModifierState('CapsLock');
if (capsLockOn) {
// Warn the user that their caps lock is on?
}
});
I’d never seen getModifierState used before, so I explored the to discover other useful values:
getModifierState provides a wealth of insight as to the user’s keyboard during key-centric events. I wish I had known about getModifier earlier in my career!
One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work together.
Most responsive design style adjustments are done via max-width values, but when you provide a height value to your image, you can get a distorted image. The goal should always be a display images in relative dimensions. So how do we ensure the height attribute doesn’t conflict with max-width values?
The answer is as easy as height: auto!
/* assuming any media query */
img {
/* Ensure the image doesn't go offscreen */
max-width: 500px;
/* Ensure the image height is responsive regardless of HTML attribute */
height: auto;
}
The dance to please users and search engines is always a fun balance. CSS and HTML were never meant to conflict but in some cases they do. Use this code to optimize for both users and search engines!
Over 50 thousand developers visit DavidWalshBlog every month from around the world to learn JavaScript tricks and fix problems in their code. Unfortunately, some of them have a slow experience on the site.
David tracks the performance of his Core Web Vitals and overall performance with . Recently, we noticed that his CLS performance score was trending pretty slow for both desktop and mobile users.
Wait, what is CLS?
(CLS) is one of the performance metrics. It doesn’t measure load time directly, instead it measures how much a page shifts while it is being loaded. You’ve definitely seen this and been annoyed by it. These shifts make a site feel slow to a user.
CLS and the rest of the Core Web Vitals are super important. Not only because they measure user experience, but also because they influence the pagerank of a site in search. And search traffic is life for bloggers, media sites, e-commerce stores, and pretty much everyone with a website.
If we can fix the site’s CLS problem, we’ll give readers a faster experience, and boost the search ranking so David can help even more people. Sounds like a great incentive, let’s figure it out.
Crashing with Google Lighthouse
To find a performance problem, many developers will use a tool like Google Lighthouse. I ran a Lighthouse report on David’s site, and here’s what I got.
A perfect score! Let’s pack it up and go home.
The trouble is that Google Lighthouse is a lie. Real users won’t have this performance. That score only represents a single test, from my lightning-fast computer, in the USA, on a fast broadband connection.
David’s real users come from all over the world, on varying devices and networks, and at all times of the day. Their performance experience is far from perfect. That’s why we need to get for the performance, otherwise we might never know that there is a problem.
Where are the CLS problems?
David has been writing for a long time and has hundreds of posts on his site. Request Metrics tracks the CLS score per page so we can zero-in on the problems.
The largest traffic page is the root page, and that has a good CLS. But many of his posts, like and have troubling CLS scores. We can also track the elements responsible for CLS, and for most of the posts its main > article > p. That means the first paragraph of the article is the thing shifting. Why would it do that?
What is common about these posts with the worst CLS scores? Images. Images are a very common cause of CLS problems because a browser doesn’t always know how big an image is until it’s downloaded. The browser assumes it’s 0x0 until it has the image, then shifts everything around it to make room.
Posts with lots of images would shift many times as each image was downloaded and the article shifted to make room for the new content.
Using images correctly for CLS
To avoid layout shifts when using images, we need to give the browser hints about how big the images will be. The browser will use these hints to reserve space in the layout for the image when it’s finished downloading.
Notice that the width and height are specified as their own attributes — not part of a style tag. These attributes set both a base size of the image as well as the aspect ratio to use. You can still use CSS to make the image bigger or smaller from here.
Also notice that there is no px unit specified.
Image Sizes in WordPress
DavidWalsh.name is hosted on WordPress, where there are some built-in tools to do this. We can utilize to get the dimensions of images he’s using and add them to the markup.
Proving it works
David made the image changes a few days ago, and we’re already seeing an improvement. CLS has dropped 20% to 0.123. We’re real close to the “Good” range of CLS now.
There’s still some issues to sort out around fonts, but that will be a story for another time and another post.
If you’re looking to improve the real performance of your site, or worried about losing your SEO juice from Core Web Vital problems, have a look at . It’s got the tools to track your performance and actionable tips to actually fix the problems.
Ask any software engineer and they’ll tell you that coding date logic can be a nightmare. Developers need to consider timezones, weird date defaults, and platform-specific date formats. The easiest way to work with dates is to reduce the date to the most simple format possible — usually a timestamp. To get the immediate time in integer format, you can use Date.now:
const now = Date.now(); // 1705190738870
I will oftentimes employ Date.now() in my console.log statements to differentiate likewise console.log results from each other. You could also use that date as a unique identifier for an event in a low-traffic environment.
User input from HTML form fields is generally provided to JavaScript as a string. We’ve lived with that fact for decades but sometimes developers need to extract numbers from that string. There are multiple ways to get those numbers but let’s rely on regular expressions to extract those numbers!
To employ a regular expression to get a number within a string, we can use d+:
Regular expressions are capable of really powerful operations within JavaScript; this practice is one of the easier operations. Converting the number using a Number() wrapper will give you the number as a Number type.
Streaming services have revolutionized content delivery, sending linear media companies into a panic as they watch traditional cable services decay. “Cutting the cord” is a common practice these days, but the streaming landscape isn’t perfect. We’re a decade into streaming so I wanted to share my thoughts on the state of new media: first impressions, second thoughts, and the third degree!
Netflix is king thanks to having first mover advantage, and making smart financial moves over the past six months, but Netflix’s content is unremarkable. Their recent wins are USA’s Suits and content licensed from Max…they need to do better…
The biggest loser in the current streaming landscape is the sports fan. Want to watch American Football? You need YouTubeTV, Peacock, and Amazon Prime. Soccer fan? You need Peacock, ESPN Plus, Paramount Plus, and then AppleTV Plus if you care about MLS. Being a live sports fan is really, really expensive.
The parent companies of HBO and Showtime killed their brands with “Max” and “Paramount Plus”. HBO’s brand name and fuzzy fade in are iconic; “Max” means nothing. Part of me died with this stupid brand change.
Streaming services lured us in with no advertisements but they’ve learned that the ad tiers generate more revenue. Now they’re trying to price us out to get us to choose the cheaper, ad-driven tier. Smart business but I’ll pay more to avoid the ads.
Apple has all the resources in the world but they treat their streaming service like everything else they do: offer an unremarkable product and skate off of name. Ted Lasso was good, as was Shrinking, but everything else is filler…
…and charging for Killers of the Flower Moon during the holidays, then providing it for free once people are back to work, is an embarrassing money grab.
Amazon doesn’t offer nearly enough in exclusive content. These tech companies are half in, half out.
Warner Brothers Discovery licensing their content, especially the Marvel Comic Universe IP, to Netflix because they need quick cash feels like a self-own. How do you grow Max by giving your best content to a better service?
AppleTV’s hardware is insanely elegant to use, though I’m annoyed they didn’t commit to their gaming offering. Roku still feels like a Super Nintendo in a N64 world.
The free streaming options these days are awesome if you don’t want to spend money. YouTube, RokuTV, and Tubi provide loads of great content at no expense.
Disney Plus offer loads of great old movies but my kids rarely watch it — they’re busy watching cringe shows on Netflix…
One huge frustration is the lack of a “previous” button that cable remotes had. Navigating between channels in YouTubeTV is painful…
…and to further improve the experience, it would be great if AppleTV and Roku would allow users to have two apps side by side; let us build our own multi-view.
Part of me wants to bin off all of my sports streaming services and simply use StreamEast…but the convenience is just too nice.
Agree or disagree? What did I miss? Let me know in the comments below!
As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding textarea elements has been long known…and it’s finally here!
To allow textarea elements to grow vertically and horizontally, add the field-sizing property with a value of content:
textarea {
field-sizing: content; // default is `fixed`
}
The default value for field-sizing is fixed, signaling current behavior. The new behavior, content, will expand as much as possible. To constrain the size a textarea can grow, use traditional width/max-width and height/max-height properties.
The underground world of creating and streaming Super Mario World-based ROM hacks continues to gain popularity. This popularity is a tribute to the creativity of gamers and the quality of the original 30 year old video game’s mechanics. Over the past decade, incredible ROM hacks like Grand Poo World 1 and 2, Invictus, and Dram World have brought joy (and horror) to the Mario community. Sure, Nintendo released Mario Maker and Mario Maker 2, but I love SMW Central patches because they allow all of us to create, much like open source.
The most anticipated hack in years, Grand Poo World 3, was just released and is taking the Super Mario World community by storm. You cannot, however, just download GPW3; due to legal reasons, and the ability to modify it further, the process takes some work. Let’s learn how to build Grand Poo World 3!
What You’ll Need
You’ll need multiple apps and files to build and play Grand Poo World 3:
The from SMWCentral
A clean ROM file (with .smc file extension) for Super Mario World (…Google helps; use to verify your file)
A patching utility for your OS ( for macOS, for Windows)
An emulator to play the resulting .smc file (, )
Patching Grand Poo World 3
With the files and utilities available, open the patching utility and provide the path, Super Mario World ROM File, and patched file path:
If the input files are successful, you’ll get a working .smc file for GPW3! The risk is usually the SMW ROM file, so be sure to validate it with JSRomClean.
With a successful Grand Poo World 3 created, it’s time to play!
The whole process of creating Grand Poo World 3 gives me joy due to two of my loves: video games and open source coding. SMWCentral has thousands of patches you can apply on top of and parellel to ROM hacks to implement features like and loads more.
Most developers spoil themselves with fun command line utilities to make their work easier and more efficient. One such command line helper allows developers to . How can you get the current branch? With this handy snippet:
git branch --show-current
It’s great to keep this snippet around for any automation you may create moving forward!
