Whatever, I just needed a title. Everyone’s favorite web security feature has crossed my desk a bunch of times lately and I always feel like that is a sign I should write something because that’s what blogging is. The main problem with CORS is that developers don’t understand CORS. The basic concept of it is supposed to be easy: don’t run code across origins. Meaning if I, at css-tricks.com, try to fetch some JavaScript from an external URL, like any-other-web..

• 0 Comment

Oh, Bootstrap, that old standard web library that either you hate or you spend all your time defending as “it’s fine, it’s not that bad.” Regardless of what side you fall on, it’s a powerful UI framework that’s everywhere, most people know the basics of it, and it gives you extremely predictable results. For better or worse, Bootstrap is opinionated. It wants you to construct your HTML a certain way, it wants you to override styles a certain way, it wants to be..

• 0 Comment

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