How to Self-Host Google Fonts on Your Own Server

As web designers living in the era of high-speed internet, we have picked up the habit of adding external dependencies such as fonts from third-party servers, most frequently from content delivery networks (CDNs). However, this is not always the best decision. Sometimes, it’s still better to stick to your own infrastructure and host your assets… Continue reading How to Self-Host Google Fonts on Your Own Server

Creating an Accessible Range Slider with CSS

April 29, 2020 I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to do this has improved my CSS skills. Today we are going to talk about input[type=”range”]. These inputs where you select a value from a slider that has a thumb on it. You… Continue reading Creating an Accessible Range Slider with CSS

Design for Browser Inconsistency With Lambdatest

When the web was young, a 56k connection was fast, CSS was new, and Flash was but a glint in Macromedia’s eye, there was a phrase that graced half of all splash screens: Best viewed in IE6. You see, back in the early 00s, the web was a lot less competitive. It was perfectly possible… Continue reading Design for Browser Inconsistency With Lambdatest

Would The Web Be Better With One Good Browser?

When Tim Berners-Lee gave us the WorldWideWeb in 1990, it was the first and only web browser. But it didn’t remain alone for long. Even in those early days of the web, there was plenty of competition for web browser market share: Mosaic, MidasWWW, SlipKnot, Arena, Netscape, and Internet Explorer emerged around that time, too,… Continue reading Would The Web Be Better With One Good Browser?

How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images

<picture> is an HTML5 element designed to give us more versatile and performant responsive image functionality. Instead of loading a single image and trying to resize it to suit all possible viewport sizes and layouts, the picture tag loads multiple images of different sizes and resolutions, choosing the best fit for different scenarios. How Does <picture>… Continue reading How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images

Keyboard Accessibility Tips Using HTML and CSS

Making your website accessible for keyboard-only users is an important part of the bigger accessibility picture. Here are some keyboard accessibility tips you can quickly implement using basic HTML and CSS. A11y From the Beginning These tips are part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and… Continue reading Keyboard Accessibility Tips Using HTML and CSS

Poll: should coders learn to design?

Okay developers, it’s your turn. People have ranted on and on for years about whether or not designers should learn to code. Heck, I’ve ranted about it. I still contend that… no. No no… This is about you devs, now. Should people who primarily code the back end of web products learn to design the… Continue reading Poll: should coders learn to design?

Creating an iOS-like Home Screen with CoffeeScript

Today we are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies somewhere in between Ruby and Python. If you haven’t used any of them, don’t worry – it is not required. However you will need to be… Continue reading Creating an iOS-like Home Screen with CoffeeScript