Code

Click, drag, release: you’ve just selected some text on a webpage — probably to copy and paste it somewhere or to share it. Wouldn’t it be cool if selecting that text revealed some options that make those tasks easier? That’s what a selection menu does. You may already be familiar with selection me..

I was just Hoping for Better Native Page Transitions, and Bramus commented that Chrome is working on something. Looks like it has some fresh enthusiasm for it, as there is a brand new repo, and you can literally test it in Chrome Canary. Would you like to add navigation transitions to your site wit..

A custom property is most commonly thought of as a variable in CSS. .card { --spacing: 1.2rem; padding: var(--spacing); margin-bottom: var(--spacing); } Above, --spacing is the custom property with 1.2rem as the value and var(--spacing) is the variable in use. Perhaps the most valuable reason..

I saw in the release notes for Safari Technical Preview 122 that it has support for a color-contrast() function in CSS. Safari is first out of the gate here. As far as I know, no other browser supports this yet and I have no idea when stable Safari will ship it, or if any other browser ever will. Bu..

Robert Nyman and Philip Jägenstedt: Google is working with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers. The areas of focus are CSS Flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms. […] The goal in 2021 is ..

In my previous article, I discussed how I learned to create a decoupled WordPress powered Gatsby site using the Gatsby Source WPGraphQL plugin. The project was done following the ongoing developmental version of WPGraphQL and an excellent tutorial by Henrik Wirth. Although WPGraphQL was used in some..

There are some Unicode characters that some browsers just decide they are going to turn into emojis for you. I couldn’t tell you why exactly, but here’s what I see: Chrome on the left. Safari in the simulator on top and to the right. Those text Unicode characters (▶, ↩, and, ❤) show up as text in ..

Here’s Jess B. Peck writing all about Google’s Core Web Vitals: Let’s step back one. CLS is when you’re about to click on a link, and the whole page shifts and you click on a different link instead. It’s when you’re halfway through a blogpost and an ad loads and you lose your place. It is when… the..

Try Hotjar for free today! An enjoyable user experience and high conversion rates go hand-in-hand. It makes sense then, that if you want to improve conversion rates, your first task is to improve user experience. To improve UX, deeply understanding your users is non-negotiable. But speaking with c..

Not a typical one, at least. Each character is an HTML element, built with CSS. A true web font! Let me elaborate. This is a way to render text without using any font at all. Random text is split with PHP into words and letters, then rendered as HTML elements with classes. Every element is styled w..