You can limit how far the background-image of an element applies by using background-clip. That means you can apply *different* backgrounds to, say, the padding and border.
The post discusses the drawbacks of null references in programming and introduces the Optional type as a solution, particularly in Java. The Optional type helps avoid null reference exceptions by allowing safe interaction with absent values using methods like ifPresent, ifPresentOrElse, map, and flatMap.
Now that we’re starting to see better support for @starting-style and the allow-discrete keyword, we’ve got a pretty straightforward way for defining *different* entry and exit states.
These are our recommendations for those of you early in your web developer journey. This is about tech and the real world stuff around it that you’ll need.
The most basic use case, writing a bit of text to the user’s clipboard, is mercifully easy. But there is plenty more to know. Did you know writing image data to the clipboard ONLY works with PNG?
We’ll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.
I’ve seen other websites for helping you generate cubic-bezier() values in CSS for animations and transitions, but Easing Wizard is the best. Importantly, it helps you with the newer linear() style timings as well, which are more powerful. All the different types, the presets, the customization options, the different styles of previews, the clean design… outstanding work from Matthias Martin.
When we published our advice on the simplest and best way to take some static local files and make a proper online website out of them, we recommended Netlify. That holds true. But there is some trepidation, as once in a while you’d hear a horror story about usage blowing up unexpectedly and a user being stuck with a big bill. This is a problem not isolated to Netlify, but happened there too. That’s a scary prospect for anyone, as unlikely as it may be. So I think it’s notable that Netlify announced a free plan which is free forever and just has usage limits hard baked into it rather than the pay-to-scale model on other plans. That makes it safe: you’ll never get an unexpected bill.
CSS can truncate text on a single line or on multiple lines, but it always does so from the end of the text. I’ve seen a (bad) trick reversing the text direction to trim text from the front instead, but never from the middle.
Christian Heilmann wrote a package to help with this. I agree it’s a better solution particularly for file names/paths as both the beginning and ending hold more important information than the middle.
Safari is first to drop text-box in CSS, which plenty of people are excited for as it takes care of aligning text in many cases without the use of fragile magic numbers. They say:
Now you can declare which font metric you want the browser to consider the edge of the text box when calculating layout
Jason Bradberry has a wonderfully deep article and showcases one of the big use cases (non jacked up button centering).
Like Robin Rendle says:
I’m always fighting the text-box when it comes to buttons in an interface and so hopefully this property fixes all that.
This line of code is about to be in every single stylesheet.
h1, p, button {
text-box: trim-both cap alphabetic;
}Code language: CSS (css)Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.