Background Scale Hover Effect with CSS Clip-path
11.3.2020
A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.
Background Scale Hover Effect with CSS Clip-path was written by Mary Lou and published on Codrops
Block Links Are a Pain (and Maybe Just a Bad Idea)
10.3.2020
As we noted in our complete guide, you can put an <a href=""> link around whatever chunks of HTML you like. Let's call that a "block link." Like you are wanting to link up an entire "Card" of content because it makes a big clickable target.
<a href="/article/"<!-- display: block;...
Considerations When Choosing Fonts for a Multilingual Website
10.3.2020
As a front-end developer working for clients all over the world, I've always struggled to deal with multilingual websites — especially cases where both right-to-left (RTL) and left-to-right (LTR) are used. That said, I’ve learned a few things along the...
Make Yourself a Little API With Netlify Functions
10.3.2020
Here's an example of a nice little use case for cloud functions. Glitch has this great package of friendly words. Say you wanted to randomly generate "happy-elephant" or "walking-tree", and you need to do that on your website in JavaScript. Well, this package is pretty big (~200 KB), necessarily...
10 Interesting JavaScript and CSS Libraries for March 2020
10.3.2020
New JavaScript tools from the Facebook developers team, an excellent Electron starter kit. and more in our web dev resources compilation for March!
Negative Margins
9.3.2020
PPK digs into the subject, which he found woefully undercovered in web tech documentation. Our entry doesn't mention them at all, which I'll aim to fix.
Agree on this situation:
This is by far the most common use case for negative margins. You give a container a padding so that its contents have...
I Pressed ⌘B. You Wouldn’t Believe What Happened Next
9.3.2020
This talk by Marcin Wichary is — beyond both enthusiastic and outstanding — all about the complexity of UI design, typography, and the lengths his team at Figma has gone to make sure that doing something as simple as selecting a font from a dropdown does what you expect it to.
I’d recommend this...
Tips for Working Remotely and Enjoying It!
9.3.2020
With the coronavirus spreading and employers telling employees work from home if possible, there are scores of people getting their first taste of working remotely. Depending on your experience and discipline levels, this could be a welcomed change or a complete culture shock. The amount of freedom...
Adventures in CSS Semi-Transparency Land
9.3.2020
Recently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with the same RGB values for the background-color — on top of an image. Something like this:
<img src='myImage.jpg'/>
<div...
Use a:visited in your CSS stylesheet
9.3.2020
Evert Pot:
Unfortunately, when setting a new color (e.g. a { color: #44F }) the ‘purple visited link’ feature also gets disabled. I think this is a shame, as there’s so many instances where you’re going through a list of links and want to see what you’ve seen before.
The 2 examples I ran into...
Geoff’s Redesign Posts
9.3.2020
I love it when people redesign "in the open" and write about it. I'd just like to shout out to our own Geoff who has been doing this for 3 months now. He started in late December last year. He's been sharing stuff like his dev tooling choices, considering performance, considering accessibility...
Google Fonts + Variable Fonts
7.3.2020
I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference really, except it's blue instead of red and this one pretty rad checkbox: Show only variable fonts.
An option to only show variable fonts is...