You've found yourself hours into coding tutorials, and now you need a change of pace, some fresh action. This is where coding games come in. Here I list free coding games on the web that can entertain you while giving you a new perspective on web development — HTML, CSS, JavaScript, and beyond.
Flexbox Froggy & Grid Garden
Codepip is a collection of free and premium coding games for learning web development, from a minecart game called Nth Cart about the :nth-child() CSS selector to Code Crunchers about JavaScript math.
Typically, a single favicon is used across a whole domain. But there are times you wanna step it up with different favicons depending on context. A website might change the favicon to match the content being viewed. Or a site might allow users to personalize their theme colors, and those preferences are reflected in the favicon. Maybe you’ve seen favicons that attempt to alert the user of some event.
Multiple favicons can technically be managed by hand — Chris has shown us how he uses two different favicons for development and production. But when you reach the scale of dozens or hundreds of variations, it’s time to dynamically generate them.
This was the situation I encountered on a recent WordPress project for a directory of colleges and universities. (I previously wrote about querying nearby locations for the same project.) When viewing a school’s profile, we wanted the favicon to use a school’s colors rather than our default blue, to give it that extra touch.
With over 200 schools in the directory and climbing, we needed to go dynamic. Fortunately, we already had custom meta fields storing data on each school’s visual identity. This included school colors, which were being used in the stylesheet. We just needed a way to apply these custom meta colors to a dynamic favicon.
In this article, I’ll walk you through our approach and some things to watch out for. You can see the results in action by viewing different schools.
Each favicon is a different color in the tabs based on the school that is selected.
SVG is key
Thanks to improved browser support for SVG favicons, implementing dynamic favicons is much easier than days past. In contrast to PNG (or the antiquated ICO format), SVG relies on markup to define vector shapes. This makes them lightweight, scaleable, and best of all, receptive to all kinds of fun.
The first step is to create your favicon in SVG format. It doesn’t hurt to also run it through an SVG optimizer to get rid of the cruft afterwards. This is what we used in the school directory:
Hooking into WordPress
Next, we want to add the favicon link markup in the HTML head. How to do this is totally up to you. In the case of WordPress, it could be added it to the header template of a child theme or echo’d through a wp_head() action.
Here we’re checking that the post type is school, and grabbing the school’s color metadata we’ve previously stored using get_post_meta(). If we do have a color, we pass it into favicon.php through the query string.
From PHP to SVG
In a favicon.php file, we start by setting the content type to SVG. Next, we save the color value that’s been passed in, or use the default color if there isn’t one.
Then we echo the large, multiline chunk of SVG markup using PHP’s heredoc syntax (useful for templating). Variables such as $color are expanded when using this syntax.
Finally, we make a couple modifications to the SVG markup. First, classes are assigned to the color-changing elements. Second, a style element is added just inside the SVG element, declaring the appropriate CSS rules and echo-ing the $color.
Instead of a <style> element, we could alternatively replace the default color with $color wherever it appears if it’s not used in too many places.
With that, you’ve got a dynamic favicon working on your site.
Security considerations
Of course, blindly echo-ing URL parameters opens you up to hacks. To mitigate these, we should sanitize all of our inputs.
In this case, we‘re only interested in values that match the 3-digit or 6-digit hex color format. We can include a function like WordPress’s own sanitize_hex_color_no_hash() to ensure only colors are passed in.
function sanitize_hex_color( $color ) {
if ( '' === $color ) {
return '';
}
// 3 or 6 hex digits, or the empty string.
if ( preg_match( '|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) ) {
return $color;
}
}
function sanitize_hex_color_no_hash( $color ) {
$color = ltrim( $color, '#' );
if ( '' === $color ) {
return '';
}
return sanitize_hex_color( '#' . $color ) ? $color : null;
}
You’ll want to add your own checks based on the values you want passed in.
Caching for better performance
Browsers cache SVGs, but this benefit is lost for PHP files by default. This means each time the favicon is loaded, your server’s being hit.
To reduce server strain and improve performance, it’s essential that you explicitly cache this file. You can configure your server, set up a page rule through your CDN, or add a cache control header to the very top of favicon.php like so:
In our tests, with no caching, our 1.5 KB SVG file took about 300 milliseconds to process on the first load, and about 100 milliseconds on subsequent loads. That’s pretty lousy. But with caching, we brought this down to 25 ms from CDN on first load, and 1 ms from browser cache on later loads — as good as a plain old SVG.
Browser support
If we were done there, this wouldn’t be web development. We still have to talk browser support.
One caveat is that Firefox requires the attribute type="image/svg+xml" in the favicon declaration for it to work. The other browsers are more forgiving, but it‘s just good practice. You should include sizes="any" while you’re at it.
Safari doesn‘t support SVG favicons as of yet, outside of the mask icon feature intended for pinned tabs. In my experimentation, this was buggy and inconsistent. It didn’t handle complex shapes or colors well, and cached the same icon across the whole domain. Ultimately we decided not to bother and just use a fallback with the default blue fill until Safari improves support.
Fallbacks
As solid as SVG favicon support is, it‘s still not 100%. So be sure to add fallbacks. We can set an additional favicon for when SVG icons aren’t supported with the rel="alternative icon" attribute:
To make the site even more bulletproof, you can also drop the eternal favicon.ico in your root.
Going further
We took a relatively simple favicon and swapped one color for another. But taking this dynamic approach opens the door to so much more: modifying multiple colors, other properties like position, entirely different shapes, and animations.
For instance, here’s a demo I’ve dubbed Favicoin. It plots cryptocurrency prices in the favicon as a sparkline.
Implementing dynamic favicons like this isn’t limited to WordPress or PHP; whatever your stack, the same principles apply. Heck, you could even achieve this client-side with data URLs and JavaScript… not that I recommend it for production.
But one thing‘s for sure: we’re bound to see creative applications of SVG favicons in the future. Have you seen or created your own dynamic favicons? Do you have any tips or tricks to share?
As a web developer, I pay close attention to the design of video games. From the HUD in Overwatch to the catch screen in Pokemon Go to hunting in Oregon Trail, games often have interesting mechanics and satisfying interactions, many of which inspire my own coding games at Codepip.
Beyond that, implementing small slices of these game designs on a web stack is a fun, effective way to broaden your skills. By focusing on a specific element, your time is spent working on an interesting part without having to build out a whole game with everything that entails. And even in this limited scope, you often get exposed to new technologies and techniques that push on the boundaries of your dev knowledge.
As a case study for this idea, I’ll walk you through my recreation of the card swipe from Among Us. For anyone in the dark, Among Us is a popular multiplayer game. Aboard a spaceship, crewmates have to deduce who among them is an imposter. All the while, they complete mundane maintenance tasks and avoid being offed by the imposter.
The card swipe is the most infamous of the maintenance tasks. Despite being simple, so many players have struggled with it that it’s become the stuff of streams and memes.
Here’s my demo
This is my rendition of the card swipe task:
Next, I’ll walk you through some of the techniques I used to create this demo.
Swiping with mouse and touch events
After quickly wireframing the major components in code, I had to make the card draggable. In the game, when you start dragging the card, it follows your pointer’s position horizontally, but stays aligned with the card reader vertically. The card has a limit in how far past the reader it can be dragged to its left or right. Lastly, when you lift your mouse or finger, the card returns to its original position.
All of this is accomplished by assigning functions to mouse and touch events. Three functions are all that‘s needed to handle mouse down, mouse move, and mouse up (or touch start, touch move, and touch end if you‘re on a touchscreen device). Here’s the skeleton of that JavaScript code:
const card = document.getElementById('card');
const reader = document.getElementById('reader');
let active = false;
let initialX;
// set event handlers
document.addEventListener('mousedown', dragStart);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd);
document.addEventListener('touchstart', dragStart);
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', dragEnd);
function dragStart(e) {
// continue only if drag started on card
if (e.target !== card) return;
// get initial pointer position
if (e.type === 'touchstart') {
initialX = e.touches[0].clientX;
} else {
initialX = e.clientX;
}
active = true;
}
function drag(e) {
// continue only if drag started on card
if (!active) return;
e.preventDefault();
let x;
// get current pointer position
if (e.type === 'touchmove') {
x = e.touches[0].clientX - initialX;
} else {
x = e.clientX - initialX;
}
// update card position
setTranslate(x);
}
function dragEnd(e) {
// continue only if drag started on card
if (!active) return;
e.preventDefault();
let x;
// get final pointer position
if (e.type === 'touchend') {
x = e.touches[0].clientX - initialX;
} else {
x = e.clientX - initialX;
}
active = false;
// reset card position
setTranslate(0);
}
function setTranslate(x) {
// don't let card move too far left or right
if (x < 0) {
x = 0;
} else if (x > reader.offsetWidth) {
x = reader.offsetWidth;
}
// set card position on center instead of left edge
x -= (card.offsetWidth / 2);
card.style.transform = 'translateX(' + x + 'px)';
}
Setting status with performance.now()
Next, I had to determine whether the card swipe was valid or invalid. For it to be valid, you must drag the card across the reader at just the right speed. Didn’t drag it far enough? Invalid. Too fast? Invalid. Too slow? Invalid.
To find if the card has been swiped far enough, I checked the card’s position relative to the right edge of the card reader in the function dragEnd:
let status;
// check if card wasn't swiped all the way
if (x < reader.offsetWidth) {
status = 'invalid';
}
setStatus(status);
To measure the duration of the card swipe, I set start and end timestamps in dragStart and dragEnd respectively, using performance.now().
function setStatus(status) {
// status is only set for incomplete swipes so far
if (typeof status === 'undefined') {
// timestamps taken at drag start and end using performance.now()
let duration = timeEnd - timeStart;
if (duration > 700) {
status = 'slow';
} else if (duration < 400) {
status = 'fast';
} else {
status = 'valid';
}
}
// set [data-status] attribute on reader
reader.dataset.status = status;
}
Based on each condition, a different value is set on the reader’s data-status attribute. CSS is used to display the relevant message and illuminate either a red or green light.
With the core functionality complete, I added a few more touches to get the project looking even more like Among Us.
First, I used a free custom font called DSEG to imitate the segmented type from old LCDs. All it took was hosting the files and declaring the font face in CSS.
Next, I copied the jitter animation of the text in the original. Game developers often add subtle animations to breath life into an element, like making a background drift or a character, well, breathe. To achieve the jitter, I defined a CSS animation:
@keyframes jitter {
from {
transform: translateX(0);
}
to {
transform: translateX(5px);
}
}
At this point, the text glides smoothly back and forth. Instead, what I want is for it to jump back and forth five pixels at a time. Enter the steps() function:
Finally, I added the same audio feedback as used in Among Us.
let soundAccepted = new Audio('./audio/CardAccepted.mp3');
let soundDenied = new Audio('./audio/CardDenied.mp3');
if (status === 'valid') {
soundAccepted.play();
} else {
soundDenied.play();
}
Sound effects are often frowned upon in the web development world. A project like this an opportunity to run wild with audio.
And with that, the we’re done! Here’s that demo again:
Try your own
Given how standardized the web has become in look and feel, this approach of pulling an element from a game and implementing it for the web is a good way to break out of your comfort zone and try something new.
Take this Among Us card swipe. In a small, simple demo, I tinkered with web fonts and animations in CSS. I monkeyed with input events and audio in JavaScript. I dabbled with an unconventional visual style.
Now it’s time for you to survey interesting mechanics from your favorite games and try your hand at replicating them. You might be surprised what you learn.
