We’re not going to try to replicate everything that the browser does by default with a native select element. We’re going to literally use a select element when any assistive tech is used. But when a mouse is being used, we’ll show the styled version and make it function as a select element.
A combination of asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains makes for an experience several seconds faster than the baseline.
Modern CSS Solutions for Old CSS Problems
A handy tool that generates the required HTML and CSS for various section separator effects (including diagonal lines, spikes, and waves) by cleverly manipulating backgrounds and generated content.
grep.app searches code from over a half million public repositories on GitHub.
Here’s Chris Ferdinandi with a list of resources to help those who are new to web development get started. I’m keeping this one handy so I can share it with any friends who’re thinking of getting into this game.
In this tutorial we'll use the box-shadow property to create a layered card component, and animate it on hover.
Let’s create a pure CSS effect that changes the color of a text link on hover – but slide that new color in instead of simply swapping colors.
In this post we have seen that with just a sprinkling of HTML attributes we can improve the login experience for our users, particularly on mobile devices.
Fast screen sharing with multiplayer control, drawing & video.
You have a “card” component which includes a heading, some text, an image, and a link to the full article, and it’s working great. Then along comes a UX requirement that the full card (not just the button or link) should be clickable. This is where things get complicated.
On at least two ocassions I’ve found myself scratching my head when an attempted push to a newly-created Github repo is met with authentication failures, despite me being sure I’m using the correct credentials.
Here’s the lowdown on the issue and how to resolve it.
I’m finding Codepen to be more and more valuable not only for testing out new code and ideas, but also – when working on large applications – as a time-saving rapid prototyping environment which sidesteps the overhead of back-end set-up. Here are some tips which I’ve found useful, for future reference.
Here’s a list of useful (Mac-based) VS Code tips for my reference and yours.
RegExr is an online tool to learn, build, & test Regular Expressions.
My notes and reminders for handling promises with
await In Real Life.
Skinning your prototypes just got easier - colors.css is a collection of skin classes to use while prototyping in the browser.
Here’s how to improve performance and prevent layout jank when browsers load responsive images.
Here, Ed provides some handy code to convert a Markdown-formatted string into HTML in Nunjucks via an Eleventy shortcode.
Now that we have the HTML attribute
loading we can set
loading="lazy" on our website’s media, and the loading of non-critical, below-the-fold media will be deferred until the user scrolls to them.
Last Tuesday, 20/8/19 I made the train trip east for a day at the Edinburgh Festival Fringe.
The most popular drop-in solution to the EU Cookie Law requirements.
Sometimes, for reasons unknown, we find that clicking or tapping an element just isn’t working. Here’s a CSS-based approach that might help.
A while back I read a great SVG icon tip from Andy Bell which I’d been meaning to try and finally did so today. Andy recommended that for icons with text labels we set the
height of the icons to
1em since that will size them proportionately to the adjacent text and additionally lets us use
font-size to make any further sizing tweaks.
When taking the DIY approach to building a new server, Certbot is a great option for installing secure certificates. However, sometimes you can run into problems. Here, I review the main recurring issues I’ve encountered and how I fixed them.
I’ve used Git for many years but it still trips me up. At times I’ve worked primarily in a GUI (like Sourcetree or Fork), and other times directly on the command line. I’ve worked on projects where I’ve been the sole developer and others where I’m part of a large team. Regardless of the tools or context, I’ve learned there are certain need-to-knows. Here’s a list of useful Git concepts and commands for my reference and yours.
Rubadub have a new mobile app that delivers the RaD crew’s top vinyl recommendations (the best around) direct to your phone.
dialog: a new, easier, standards-based means of rendering a popup or modal dialogue.
See all tags.