I only just recently learned the enterkeyhint attribute on form inputs was a thing! It seems like kind of a big deal to me, as crafting HTML form markup is a decent slice of a front-end developer’s life, and this attribute could (should?) be used on nearly every input. The enterkeyhint attribute changes the action key on a mobile keyboard to change the text/affordance. Stefan Judis spells it out nicely in this tweet from 2020: Safari now supports `enterkeyhint`...

• 0 Comment

Josh Collingsworth is clearly a big fan of Svelte, so while this is a fun and useful comparison article, it’s here to crown Svelte the winner all the way through. A few things I find compelling: One of the things I like most about Svelte is its HTML-first philosophy. With few exceptions, Svelte code is entirely browser-readable HTML and JavaScript. In fact, technically, you could call Svelte code as a small superset of HTML. And: Svelte is reactive by defaul..

• 0 Comment

Steve Ruiz calls this post an “extra-obscure edition of design tool micro-UX,” but I find it fascinating! If you select a bunch of elements in a design tool, then rotate then, then later select those same elements and try to rotate them back, you’ll find they have “drifted” a bit from the original location. It’s because the selection of elements needs to rotate around a center (the transform-origin, in CSS parlance), but where that center is located ..

• 0 Comment

The Scroll-linked Animations specification is an upcoming and experimental addition that allows us to link animation-progress to scroll-progress: as you scroll up and down a scroll container, a linked animation also advances or rewinds accordingly. We covered some use cases in a previous piece here on CSS-Tricks, all driven by the CSS @scroll-timeline at-rule and animation-timeline property the specification provides — yes, that’s correct: all those use cases were buil..

• 0 Comment

In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives. Marc Andreessen was there. He was already something of a web celebrity. Newly appointed Netscape CEO James Barksdale also came. On the..

• 0 Comment

First, check out how incredibly easy it is to write a Cloudflare Worker to proxy another URL: addEventListener("fetch", (event) => { event.respondWith( fetch("https://css-tricks.com") ); }); It doesn’t have any error handling or anything, but hey, it works: Now imagine how some websites give you a URL to JavaScript in order to do stuff. CodePen does this for our Embedded Pens feature. That URL is: https://cpwebassets.codepen.io/asset..

• 0 Comment

I keep bookmarking Adam’s GUI Challenges posts/videos and, before I even have a chance to review and link them up, another one is already published! Fortunately, the homepage for them on web.dev is a nice roundup. For example, a recent one is the split-button component (article / video / demo). It’s one thing to have a design spec, code it up so it works and looks right, and call it a day. But, dare I say that real front-end development is thinking deeper than tha..

• 0 Comment

This article is part of our “Advanced Git” series. Be sure to follow us on Twitter or sign up for our newsletter to hear about the next articles! Most developers understand that it’s important to use branches in Git. In fact, I’ve written an entire article on branching strategies in Git, explaining Git’s powerful branching model, the different types of branches, and two of the most common branching workflows. To sum it up: having separate containers, i.e. branche..

• 0 Comment

High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a negative impact on the web, but now we have the canonical reference tome. The book is just chock-full of Jeremey framing some of the biggest arguments discussions about modern web development, dissecting them, and helping us learn from them. I say “modern web development” there on purpose, because JavaScrip..

• 0 Comment

There are thousands of articles out there about buttons and links on the web; the differences and how to use them properly. Hey, I don’t mind. I wrote my own as well¹. It’s such a common mistake on the web that it’s always worth repeating: Is the intention to send someone to another URL? It’s a link in the form of <a href="">.Is it to trigger some on-page interactivity? It’s a button in the form of <button>.Any devition from from those and you..

• 0 Comment