Nice domain, eh? Does just what it says on the tin: cleans up pictures. You draw over areas of the image you want cleaned up, and it does its best using weird science. It’s like Photoshop’s Spot Healing Brush, only a single-use free website. Much like the amazing remove.bg which is an equally amazing single-use websites (and domain name). To Shared Link — Permalink on CSS-Tricks The post cleanup.pictures appeared first on CSS-Tricks. You can support CSS-Tricks b..

• 0 Comment

Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where: You have to press a special combination of keys on a keyboard.Then type a secret password. From there, a special message pops up on the screen. Easily JavaScript territory, but no, this is done here entirely in HTML and CSS, which is wild. CodePen Embed Fallback A lot of little known features and tricks is combined here to pull this off, like HTML’s accessk..

• 0 Comment

(This is a sponsored post.) The leade here is that VideoPress makes video on WordPress way better. VideoPress is a part of Jetpack. And now, if VideoPress is the only thing you care about from the Jetpack world, you can pay for it à la carte as low as $4.77/month. Or, get it included in the Jetpack Complete plan. Lemme get into it, so you can see all of what VideoPress does for you. Optimized, CDN-Hosted Video When you drag-and-drop a video file onto the WordPr..

• 0 Comment

Suspense is React’s forthcoming feature that helps coordinate asynchronous actions—like data loading—allowing you to easily prevent inconsistent state in your UI. I’ll provide a better explanation of what exactly that means, along with a quick introduction of Suspense, and then go over a somewhat realistic use case, and cover some lessons learned. The features I’m covering are still in the alpha stage, and should by no means be used in production. This post is fo..

• 0 Comment

Bonafide CSS trick alert! Nelson Menezes figured out a new way (that only works in Firefox for now) that is awfully clever. Perhaps you know that CSS cannot animate to auto dimensions, which is super unfortunate. Animating from zero to “whatever is necessary” would be very helpful very often. We’ve documented the available techniques. They boil down to: Animate the max-height to some more than you need value, which makes timing easing imprecise and janky.Use JavaS..

• 0 Comment

I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time on SVG-ing them. The effect we’re after. I couldn’t have been more wrong about those “few minutes” — they ended up being days of furiously and frustratingly scratching this itch! It turns out that, while there are resources on how to CSS such an effec..

• 0 Comment

Just ran across îles, a new static site generator mostly centered around Vue. The world has no particular shortage of static site generators, but it’s interesting to see what this “next generation” of SSGs seem to focus on or try to solve. îles looks to take a heaping spoonful of inspiration from Astro. If we consider them together, along with other emerging and quickly-evolving SSGs, there is some similarities: Ship zero JavaScript by default. Interact..

• 0 Comment

Šime Vidas DM’d me the other day about this thread from subzey on Twitter. My HTML for favicons was like this: <!-- Warning! Typo! --> <link rel="icon" href="/favicon.ico" size="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> The attribute size is a typo there, and should be sizes. Like this: <!-- Correct --> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"..

• 0 Comment

One of the toughest things about being someone who cares deeply about design systems is making the case for a dedicated design system. Folks in leadership will often ask you to prove the value of it. Why should we care about good front-end development and consistency? Sure, sure, sure, they say—everyone wants a flashy design system—but is it worth the cost? That question is tough because developer productivity, front-end quality, and even accessibility to some exte..

• 0 Comment

We have many well-known chart types: bar, donut, line, pie, you name it. All popular chart libraries support these. Then there are the chart types that do not even have a name. Check out this dreamt-up chart with stacked (nested) squares that can help visualize relative sizes, or how different values compare to one another: What we’re making Without any interactivity, creating this design is fairly straightforward. One way to do it is is to stack elements (e.g..

• 0 Comment