Foldable phones are starting to be a thing. Early days, for sure, but some are already shipping, and they definitely have web browsers on them. Stands to reason that, as web designers, we are going to want to know where that fold is so we can design screens that fit onto the top half and bottom half… or left half and right half¹. … Read article “CSS Foldable Display Polyfill”
Sponsored by
Frontend Masters
Nils Binder covers the ways:
1. Use an SVG in the form of a triangle. This technique is nicely described by Erik Kennedy on CSS-Tricks.
2. Hide part of your section using
clip-path. Read Diagonal Containers in CSS by Sebastiano Guerriero or Sloped edges with consistent angle in CSS by Kilian Valkhof.3. Using CSS Transforms
I would normally be a #2 kinda guy — slice off the top and bottom a bit, make sure there is ample padding, … Read article “Create Diagonal Layouts Like it’s 2020”
Fair warning: I’m no expert on this stuff, I’m just playing around with video on the web and addressing some issues I have when showing off video clips in blog posts.
I have an iOS simulator up in this video, and I’m putting an HTML video tag in a basic HTML document for a quick video I recorded with Kap.
There are lots of things to consider with video:
<video src="" controls></video>. Note 
Scheduled is the key word there — that’s a fairly new thing! When a push notification is scheduled (i.e. “Take your pill” or “You’ve got a flight in 3 hours”) that means it can be shown to the user even if they’ve gone offline. That’s an improvement from the past where push notification required the user being online.
So how do scheduled push notifications work? There are four key parts we’re going to look at:
This report made a big splash last year. It’s a large chunk of research that shows just how terribly the web does with accessibility. It’s been updated this year and (drumroll…) we got a little worse. I’ll use their blockquote:
… Read article “The WebAIM Million—Updated”The number of errors increased 2.1% between February 2019 and February 2020.
The latest edition of Andy Bell’s Piccalilli landed in my inbox this morning with a sweet offer: preorder Andy’s course on learning Eleventy from scratch at a third of the price.
Why the plug? No, not sponsorships or anything like that. I just happen to hear a heckuva lot about Eleventy these days. Like how we can use it with Google Sheets as a pseudo-CMS. Or how it can be a key component of an emergency website kit. I … Read article “Learn Eleventy From Scratch”
The design for Netflix’s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview.
One unique characteristic of the UI is its hover behavior. When a show preview expands on hover, the cards next to it are pushed outward so that they don’t overlap. … Read article “How to Re-Create a Nifty Netflix Animation in CSS”
Ahmad Shadeed digs around the new Facebook’s front-end code.
One that stood out to me:
.element {
inset: 4px 0;
/* Which is equivalent to: top: 4px, bottom: 4px, left: 0, right: 0 */
}Whaaat? This is the first I’ve heard of the inset property. Ahmad said he saw it working in Chrome 80, but it definitely isn’t for me (nor Safari). It does in Firefox though. … Read article “CSS Findings From The New Facebook Design”
Let’s build a literal grid of squares, and we’ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that is showing off all the big fancy companies that use some product. Putting the logos into squares is a decent way of handling it, as it forces some clean structure … Read article “A Grid of Logos in Squares”
Using CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It’s possible, but it involves a little trickery. In this video, we’ll look at doing that because we want to put a logo, centered, in each square.
One of the final demos:
CodePen Embed Fallback… Read article “#179: A Grid of Squares”
Continuous Integration (CI) workflows are considered a best practice these days. As in, you work with your version control system (Git), and as you do, CI is doing work for you like running tests, sending notifications, and deploying code. That last part is called Continuous Deployment (CD). But shipping code to a production server often requires paid services. With GitHub Actions, Continuous Deployment is free for everyone. Let’s explore how to set that up.
DevOps is for everyone… Read article “Continuous Deployments for WordPress Using GitHub Actions”Take your JavaScript to the next level and find out what it’s fully capable of with the JavaScript path on Frontend Masters.
