Latest Articles

conic-gradient()CSS Typography

A Text-Reveal Effect Using conic-gradient() in CSS

By Preethi Sam on June 26, 2024

This article explores creating a typographic effect that “reveals” text in an interesting animated way.

CSS HTML Popup

Popovers Work Pretty Nicely as Slide-Out Drawers

By Chris Coyier on June 24, 2024

Especially on mobile, the slide-out drawer UI/UX seems like a perfect fit for a popover, and works fine on desktop too.

CSS

Pure CSS Circular Text (without Requiring a Monospace Font)

By Amit Sheen on June 21, 2024

Setting text on a circle in CSS isn’t straightforward, but it is possible with some effort. This technique splits text into segments and uses transforms and perspective to pull it off.

CSS HTML JavaScript Popover

Footnotes Progressively Enhanced to Popovers

By Chris Coyier on June 19, 2024

Michelle Barker’s technique for popover footnotes is great. Here we look at ways we could fight the content duplication. There are ups and downs.

Data Drizzle

Introducing Drizzle

By Adam Rackis on June 17, 2024

Drizzle is a new ORM tool that blends traditional ORM querying with a typed SQL API. Drizzle supports various databases (Postgres, MySQL, SQLite) and aims to simplify SQL crafting while avoiding common ORM pitfalls.

User Testing

Avoid Startup Failure: How to Test Your Product Idea First

By Paul Boag on June 13, 2024

By running test marketing campaigns and iterating based on audience feedback, startups can refine their products and improve their chances of success before full development.

Animation CSS

One of the Boss Battles of CSS is Almost Won! Transitioning to Auto

By Chris Coyier on June 12, 2024

The experimental CSS function `calc-size(auto)` allows transitions from zero to a specified value. Animating elements from zero to their intrinsic size has long been desired by CSS developers.

First I read Nikhil Suresh’s angry rant about AI, then I read Frank M Taylor’s angry rant about front-end development. I agree and disagree with different points in each, like any good rant. Something that struck me is that, well, I don’t think either of them are actually particularly angry, it’s actually a schtick. I also watched Dan Olson’s I Don’t Know James Rolfe recently (aka “Angry Video Game Nerd”). I liked Dave Rupert’s take that “nerdrage” has turned into a genre of content. This genre has made it’s way all the way to technology writing. Heck, I do it myself sometimes, but I also agree with Chris Enns in that I wish we all generally wrote more about things we like.

Ryan Seddon makes clear the potential performance problem with cross-page View Transitions:

… on a slow or spotty network, the transition may appear as if the screen is freezing, as the browser waits for the page to load before it can transition smoothly between the two screens—this is not ideal.

But also that our new friend the Speculation Rules API is a potential remedy:

Combining these two helps mitigate the original tradeoff of the “pause” between navigations while the browser loads the next document. With speculative prerender, it can render the page before the user clicks, making the transition near-instant.

Both these APIs are Chrome’n’friends only, so I guess it’s a you-break-it you-fix-it deal. They are also both progressive enhancements so no grave harm in using them now, unless you consider potentially unused pre-renders too wasteful.

Little boosts of front-end development news, information, and advice — right to your feed reader of choice.

RSS

I enjoyed Hugo Landau’s praise of PHP in The Demise of the Mildly Dynamic Website:

PHP has the world’s simplest deployment model for web applications: copy some files to a directory. This deployment model is so simple, and so intuitively understandable, that almost anyone capable of using an FTP client could deploy a PHP application.

Because PHP originated as a templating language, the initial behaviour of a PHP file is simply to print its contents. This means, in turn, that you can just “dip in and out” of PHP as you need it. Compare this in turn with even the simplest Perl or Python CGI script. For the latter, you’re writing a program which outputs HTML; with PHP, you’re writing HTML with some occasionally interwoven code. If a particular page doesn’t need to do anything dynamic, it needn’t contain any code at all.

PHP scripts don’t consume any resources (persistent processes, etc.) when they’re not being used.

And PHP is a heck of a lot better today than it was back in those “Rise of PHP” years. You could do a lot worse than building in Laravel.

CSS has linear, radial, and conic gradients, that can all do interesting and complex things… but not quite this, at least not on their own:

Example from Josh Tumath who is interested in getting a better syntax for them in CSS.

That’s what we’ve been calling a Mesh Gradient. There are all sorts of ways to pull it off, like using multiple backgrounds with radial gradients placed at different locations, or placing shapes and using the blur() filter.

Here’s a gallery of them, the thumbnails of which have nice hover effects, and many of which have slow classy animations.

Wanna write?

Here's our page on guest writing. It's a win-win-win!

Latest Articles

A Text-Reveal Effect Using conic-gradient() in CSS

Popovers Work Pretty Nicely as Slide-Out Drawers

Pure CSS Circular Text (without Requiring a Monospace Font)

Footnotes Progressively Enhanced to Popovers

Introducing Drizzle

Avoid Startup Failure: How to Test Your Product Idea First

One of the Boss Battles of CSS is Almost Won! Transitioning to Auto

The Beat

Subscribe

Wanna write?

Latest Articles

A Text-Reveal Effect Using conic-gradient() in CSS

Popovers Work Pretty Nicely as Slide-Out Drawers

Pure CSS Circular Text (without Requiring a Monospace Font)

Footnotes Progressively Enhanced to Popovers

Introducing Drizzle

Avoid Startup Failure: How to Test Your Product Idea First

One of the Boss Battles of CSS is Almost Won! Transitioning to Auto

The Beat

Nerdrage

View transitions + speculative rules

The Demise of the Mildly Dynamic Website

Mesh Gradients