Toast
3.7.2019
One day, all the sudden, I started hearing jokes about toast. I had no idea what the context was. I assumed some friends just got started telling toast jokes, which isn't rare by any means. But it turns out it was a whole thing. It got me thinking, jeez, if I can't keep up with this stuff when it's...
Restricting a (pseudo) element to its parent’s border-box
2.7.2019
Have you ever wanted to ensure that nothing of a (pseudo) element gets displayed outside its parent's border-box? In case you're having trouble picturing what that looks like, let's say we wanted to get the following result with minimal markup and avoiding brittle CSS.
The desired result.
This...
Set Video Playback Speed with JavaScript
2.7.2019
I love that media has moved from custom plugins (Flash…gross) to basic HTML <video> and <audio> elements. Treating these media sources as just another element allows us to use CSS filters to adjust display, for example. The less we need to do with ffmpeg or plugins, the better. I’ve been...
Trying the New WSL 2. It's Fast! (Windows Subsystem for Linux)
2.7.2019
Windows Subsystem for Linux is the tool that was released by Microsoft to get a full UNIX system inside of Windows. Microsoft has put in some good initiatives for developers after purchasing GitHub
Top 10 Monospace Fonts for Developers
2.7.2019
Developers are extremely passionate about certain things: developer tools, tabs vs. spaces, CSS in JS (or not!), and FONTS! I started a
7 Best CSS Optimization Tips for Better Page Load Times
2.7.2019
In today’s web, page load time is one of the most important website metrics. Even milliseconds can have a huge impact on your bottom line and slow page loads...
The post 7 Best CSS Optimization Tips for Better Page Load Times appeared first on Onextrapixel
Collective #528
1.7.2019
Bounds.js * CSS Animation Worklet API * Numverify * HTML can do that? * Using Basis Textures in Three.js
Collective #528 was written by Pedro Botelho and published on Codrops
Tips for rolling your own lazy loading
1.7.2019
You may have heard (or even issued the call) that “we can just use lazy loading!” when looking for a way to slim down a particularly heavy web page.
Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page...
Making width and flexible items play nice together
1.7.2019
The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.
The long answer
Let’s say you want to align an image and some text next to each other with like this:
Now let's say you reach for flexbox to make it happen. Setting the parent element to display: flex; is a good...
Playing with the New Windows Terminal
1.7.2019
The new Windows Terminal was just released in Preview capacity. You'll need the latest
Placing, Spanning and Density in CSS Grid
1.7.2019
The most common things you learn in CSS Grid is usually related to the grid container and less about the grid items. A generic grid definition applied to the grid container is enough for a basic la
Fix Touch Bar Volume Buttons
30.6.2019
The touch bar on MacBooks has been a source of controversy since the beginning. Many mourned the loss of the escape key, while others refused to buy a new laptop to avoid the touch bar completely. I’ve not had many issues with the touch bar but mostly because I don’t really use it. One necessary...