Counting With CSS Counters and CSS Grid

You’ve heard of CSS Grid, I’m sure of that. It would be hard to miss it considering that the whole front-end developer universe has been raving about it for the past year. Whether you’re new to Grid or have already spent some time with it, we should start this post with a short definition directly from the words of W3C: Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. In… Read More

Continue Reading

Fallbacks for Videos-as-Images

Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? “20x faster and decode 7x faster than the GIF equivalent,” says Colin Bendell. Not all browsers support this so, to do a fallback, the element is ready. Bruce Lawson shows how easy it can be: Šime Vidas notes you get wider browser support by using the tag: But as Bendell noted, the performance benefits aren’t there with video, notably the fact that video isn’t helped out by the preloader. Sadly, it is for… Read More

Continue Reading

​140 Free Stock Videos With Videoblocks

(This is a sponsored post.) Videoblocks is exploding with over 115,000 stock videos, After Effects templates, motion backgrounds and more! With its user-friendly site, massive library to choose from, and fresh new content, there’s no stopping what you can do. All the content is 100% free from any royalties. Anything you download is yours to keep and use forever! Right now, you can get 7 days of free downloads. Get up to 20 videos every day for 7 days. That’s 140 downloads free over the course of the 7 days. Click on over and see where your imagination takes you! Start Downloading Now Direct Link to Article — Permalink ​140… Read More

Continue Reading

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this: …most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and further apart. For companies working with design systems, it seems our industry is stuck with design tools that are essentially built for the wrong medium—completely unable to feed our development… Read More

Continue Reading

Web-Powered Augmented Reality: a Hands-On Tutorial

Uri Shaked has written about his journey in AR on the web from the very early days of Google’s Project Tango to the recent A-Frame experiments from Mozilla. Front-end devs might be interested in A-Frame because of how you work with it – it’s a declarative language like HTML! I particularly like this section where Uri describes how it felt to first play around with AR: The ability to place virtual objects in the real space, and have them stick in place even when you move around, seemed to me like we were diving down the uncanny valley, where the boundaries between the physical world and the game were beginning… Read More

Continue Reading

Aspect Ratios with SVG

I quite like this little trick from Noam Rosenthal: Content goes here Two things going on there: As soon as you give a a viewBox, it goes full-width, but only as tall as the implied aspect ratio in the viewBox value. The viewBox value is essentially “top, left, width, height” for the coordinate system interally to the SVG, but it has the side-effect of sizing the element itself when it has no height of its own. That’s what is used to “push” the parent element into an apsect ratio as well. The parent will still stretch if it has to (e.g. more content than fits), which is good. CSS Grid… Read More

Continue Reading

JavaScript, I love you, you’re perfect, now change

Those of us who celebrate Christmas or Hannukkah probably have strong memories of the excitement of December. Do you remember the months leading up to Christmas, when your imagination exploded with ideas, answers to the big question “What do you want for Christmas?” As a kid, because you aren’t bogged down by adult responsibility and even the bounds of reality, the list could range anywhere from “legos” to “a trip to the moon” (which is seeming like will be more likely in years to come). Thinking outside of an accepted base premise—the confines of what we know something to be—can be a useful mental exercise. I love JavaScript, for instance,… Read More

Continue Reading

New in Chrome 63

Yeah, we see browser updates all the time these days and you may have already caught this one. Aside from slick new JavaScript features, there is one new CSS update in Chrome 63 that is easy to overlook but worth calling out: Chrome 63 now supports the CSS overscroll-behavior property, making it easy to override the browser’s default overflow scroll behavior. The property is interesting because it natively supports the pull to refresh UI that we often see in native and web apps, defines scrolling regions that are handy for popovers and slide-out menus, and provides a method to control the rubber-banding effect on some touch devices so that a… Read More

Continue Reading

Breaking Down the Performance API

JavaScript’s Performance API is prudent, because it hands over tools to accurately measure the performance of Web pages, which, in spite of being performed since long before, never really became easy or precise enough. That said, it isn’t as easy to get started with the API as it is to actually use it. Although I’ve seen extensions of it covered here and there in other posts, the big picture that ties everything together is hard to find. One look at any document explaining the global performance interface (the access point for the Performance API) and you’ll be bombarded with a slew of other specifications, including High Resolution Time API, Performance… Read More

Continue Reading

Chrome is Not the Standard

Chris Krycho has written an excellent post about how us fickle web developers might sometimes confuse features that land in one browser as being “the future of the web.” However, Chris argues that there’s more than one browser’s vision of the web that we should care about: No single company gets to dominate the others in terms of setting the agenda for the web. Not Firefox, with its development and advocacy of WebAssembly, dear to my heart though that is. Not Microsoft and the IE/Edge team, with its proposal of the CSS grid spec in 2011, sad though I am that it languished for as long as it did. Not… Read More

Continue Reading

Many Ways to Learn

Julie Zhuo responds to the classic “What can I do to continue my growth?”: One of the things I believe the most firmly is that everyone has something to teach you if you’re looking for the lessons. And these people don’t have to be other designers at your company! There are many paths to becoming an awesome product designer She lists (and explains): Learn from your users Learn from people with different skillsets Learn by doing  I have a draft blog post called “Tech Books are Supplementary” that I started in 2011 and somehow haven’t gotten around to finishing. One of these days! The point I try to make in… Read More

Continue Reading

Refactoring Your Way to a Design System

Mina Markham on refactoring a large and complex codebase into an agile design system, slowly over time: If you’re not lucky enough to be able to start a new design system from scratch, you can start small and work on a single feature or component. With each new project comes a new opportunity to flesh out a new part of the system, and another potential case study to secure buy-in and showcase its value. Make sure to carefully and thoroughly document each new portion of the system as it’s built. After a few projects, you’ll find yourself with a decent start to a design system. As a side note, Mina’s… Read More

Continue Reading

How Would You Solve This Rendering Puzzle In React?

Welcome, React aficionados and amateurs like myself! I have a puzzle for you today. Let’s say that you wanted to render out a list of items in a 2 column structure. Each of these items is a separate component. For example, say we had a list of albums and we wanted to render them a full page 2 column list. Each “Album” is a React component. Scroll rendering problem Now assume the CSS framework that you are using requires you to render out a two column layout like this… Column 1 Column 2 This means that in order to render out the albums correctly, you have to open a columns… Read More

Continue Reading

Don’t Use My Grid System (or any others)

This presentation by Miriam at DjangoCon US last summer is not only well done, but an insightful look at the current and future direction of CSS layout tools. Many of us are familiar with Susy, the roll-your-own Grid system Miriam developed. We published a deep-dive on Susy a few years back to illustrate how easy it makes defining custom grid lines without the same pre-defined measures included in other CSS frameworks, like Foundation or Bootstrap. It really was (and is) a nice tool. To watch Miriam give a talk that discourages using frameworks—even her very own—is a massive endorsement of more recent CSS developments, like Flexbox and Grid. Her talk… Read More

Continue Reading

When You Just Don’t Trust a Tab

Do we need a word for when a browser tab has sat too long and you just don’t trust thing are going to work as you expect them do when you come back?I tweeted that the other day and apparently other people had them feels. It’s that feeling where you just know your session isn’t valid anymore and if you actually try to do anything that requires you to be logged in, it ain’t gonna work. It’s particularly uncomfortable if you were actually trying to do something and now you’re unsure if it’s done or saved. As for that name… here’s some good ones from the thread: Schrödinger’s tab Crusty… Read More

Continue Reading

Comparing Novel vs. Tried and True Image Formats

Popular image file formats such as JPG, PNG, and GIF have been around for a long time. They are relatively efficient and web developers have introduced many optimization solutions to further compress their size. However, the era of JPGs, PNGs, and GIFs may be coming to an end as newer, more efficient image file formats aim to take their place. We’re going to explore these newer file formats in this post along with an analysis of how they stack up against one another and the previous formats. We will also cover optimization techniques to improve the delivery of your images. Why do we need new image formats at all? Aside… Read More

Continue Reading

Using SVG to Create a Duotone Effect on Images

Anything is possible with SVG, right?! After a year of collaborating with some great designers and experimenting to achieve some pretty cool visual effects, it is beginning to feel like it is. A quick search of “SVG” on CodePen will attest to this. From lettering, shapes, sprites, animations, and image manipulation, everything is better with the aid of SVG. So when a new visual trend hit the web last year, it was no surprise that SVG came to the rescue to allow us to implement it. The spark of a trend Creatives everywhere welcomed the 2016 new year with the spark of a colorizing technique popularized by Spotify’s 2015 Year… Read More

Continue Reading

The Rise of the Butt-less Website

It seems like all the cool kids have divided themselves into two cliques: the Headless CMS crowd on one side and the Static Site Generator crowd on the other. While I admit those are pretty cool team names, I found myself unable to pick a side. To paraphrase Groucho Marx, “I don’t care to belong to any club that will have me as a member.” For my own simple blog (which is embarrassingly empty at the moment), a static site generator could be a great fit. Systems like Hugo and Jekyll have both been highly recommended by developers I love and trust and look great at first glance, but I… Read More

Continue Reading

On Building Features

We’ve released a couple of features recently at CodePen that I played a role in. It got me thinking a little bit about the process of that. It’s always unique, and for a lot of reasons. Let’s explore that. What was the spark? Features start with ideas. Was it a big bright spark that happened all the sudden? Was it a tiny spark that happened a long time ago, but has slowly grown bright? Documenting ideas can help a lot. We talked about that on CodePen Radio recently. If you actually write down ideas (both your own and as requested by users), it can clarify and contextualize them. Documenting all… Read More

Continue Reading

The User Experience of Design Systems

Rune Madsen jotted down his notes from a talk he gave at UX Camp Copenhagen back in May all about design systems and also, well, the potential problems that can arise when building a single unifying system: When you start a redesign process for a company, it’s very easy to briefly look at all their products (apps, websites, newsletters, etc) and first of all make fun of how bad it all looks, and then design this one single design system for everything. However, once you start diving into why those decisions were made, they often reveal local knowledge that your design system doesn’t solve. I see this so often where… Read More

Continue Reading

Calendar with CSS Grid

Here’s a nifty post by Jonathan Snook where he walks us through how to make a calendar interface with CSS Grid and there’s a lot of tricks in here that are worth digging into a little bit more, particularly where Jonathan uses grid-auto-flow: dense which will let Grid take the wheels of a design and try to fill up as much of the allotted space as possible. As I was digging around, I found a post on Grid’s auto-placement algorithm by Ian Yates which kinda fleshes things out more succinctly. Might come in handy. Oh, and we have an example of a Grid-based calendar in our ongoing collection of CSS… Read More

Continue Reading

Keeping Parent Visible While Child in :focus

Say we have a . We only want this div to be visible when it’s hovered, so: div:hover { opacity: 1; } We need focus styles as well, for accessibility, so: div:hover, div:focus { opacity: 1; } But div’s can’t be focused on their own, so we’ll need: There is content in this div. Not just text, but links as well. This little piggy went to market. Go to market This is where it gets tricky. As soon as focus moves from the div to the anchor link inside it, the div is no longer in focus, which leads to this weird and potentially confusing situation: In this example, :hover… Read More

Continue Reading

Is jQuery still relevant?

Remy Sharp: I’ve been playing with BigQuery and querying HTTP Archive‘s dataset … I’ve queried the HTTP Archive and included the top 20 [JavaScript libraries] … jQuery accounts for a massive 83% of libraries found on the web sites. This corroborates other research, like W3Techs: jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 73.1% of all websites. And BuiltWith that shows it at 88.5% of the top 1,000,000 sites they look at. Even without considering what jQuery does, the amount of people that already know it, and the heaps of resources out there around it, yes, jQuery is still relevant. People haven’t… Read More

Continue Reading

The youth these days couldn’t possibly understand the abstraction of a floppy disk for a save icon.

People have been kicking that ol’ chestnut around for years. Do the youngsters have no idea what it is?, we ask. What happens when all the things we based our icons on don’t exist anymore?, we wonder. Do we need a new one?, and we experiment. Olivia Walch’s skewering is hilarious: Comic about the kids pic.twitter.com/LneN1Ff32u — Olivia (@oliviawalch) December 16, 2017 Baby bear: Make a button and put the word save in it. The youth these days couldn’t possibly understand the abstraction of a floppy disk for a save icon. is a post from CSS-Tricks

Continue Reading

Making your web app work offline, Part 2: The Implementation

This two-part series is a gentle, high-level introduction to offline web development. In Part 1 we got a basic service worker running, which caches our application resources. Now let’s extend it to support offline. Article Series: The Setup The Implementation (you are here!) Making an `offline.htm` file Next, lets add some code to detect when the application is offline, and if so, redirect our users to a (cached) `offline.htm`. But wait, if the service worker file is generated automatically, how do we go about adding in our own code, manually? Well, we can add an entry for importScripts, which tells our service worker to import the scripts we specify. It… Read More

Continue Reading

Evolution of img: Gif without the GIF

Colin Bendell writes about a new and particularly weird addition to Safari Technology Preview in this excellent post about the evolution of animated images on the web. He explains how we can now add an MP4 file directly to the source of an img tag. That would look something like this: The idea is that that code would render an image with a looping video inside. As Colin describes, this provides a host of performance benefits: Animated GIFs are a hack. […] But they have become an awesome tool for cinemagraphs, memes, and creative expression. All of this awesomeness, however, comes at a cost. Animated GIFs are terrible for web… Read More

Continue Reading

Accessibility Testing Tools

There is a sentiment that accessibility isn’t a checklist, meaning that if you’re really trying to make a site accessible, you don’t just get to check some things off a list and call it perfect. The list may be imperfect and worse, it takes the user out of the equation, so it is said. Karl Groves once argued against this: I’d argue that a well-documented process which includes checklist-based evaluations are better at ensuring that all users’ needs are met, not just some users. I mention this because you might consider an automated accessibility testing tool another form of a checklist. They have rules built into them, and they test… Read More

Continue Reading

From Local Server to Live Site

(This is a sponsored post.) With the right tools and some simple software, your WordPress development workflow can be downright delightful (instead of difficult)! That’s why we built Local by Flywheel, our free local development application. Now, we’ve launched Local Connect, a sweet feature embedded in the app that gives you push-pull functionality with Flywheel, our WordPress hosting platform. There’s no need to mess with downloading, uploading, and exporting. Pair up these platforms to push local sites live with a few quick clicks, pull down sites for offline editing, and streamline your tools for a simplified process! Download Local for free here and get started! Direct Link to Article —… Read More

Continue Reading

Making your web app work offline, Part 1: The Setup

This two-part series is a gentle introduction to offline web development. Getting a web application to do something while offline is surprisingly tricky, requiring a lot of things to be in place and functioning correctly. We’re going to cover all of these pieces from a high level, with working examples. This post is an overview, but there are plenty of more-detailed resources listed throughout. Article Series: The Setup (you are here!) The Implementation (posts tomorrow, stay tuned) Basic approach I’ll be making heavy use of JavaScript’s async/await syntax. It’s supported in all major browsers and Node, and greatly simplifies Promise-based code. The link above explains async well, but in a… Read More

Continue Reading

Animating Border

Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised. The Challenge The challenge is simple: building a button with an expanding border on hover. This article will focus on genuine CSS tricks that would be easy to drop into any project without having to touch the DOM or use JavaScript. The methods covered here will follow these rules Single element (no helper divs, but psuedo-elements are allowed) CSS only (no JavaScript) Works for any size (not restricted to a specific width, height, or aspect ratio) Supports transparent backgrounds Smooth and performant transition I proposed this challenge in the Animation at Work Slack and again on Twitter.… Read More

Continue Reading

Working With Events in React

Most of the behavior in an application revolves around events. User enters a value in the registration form? Event. User hits the submit button? Another event. Events are triggered a number of ways and we build applications to listen for them in order to do something else in response. You may already be super comfortable working with events based on your existing JavaScript experience. However, React has a distinct way of handling them. Rather than directly targeting DOM events, React wraps them in their own event wrapper. But we’ll get into that. Let’s go over how to create, add and listen for events in React. Creating Events We’ll start by… Read More

Continue Reading

Shadow DOM in Ionic

Mike Hartington glows about how good and useful the Shadow DOM is: [Shadow DOM is] actually built on two simple ideas, isolation and location. Need to create a bit of DOM that is isolated from the global scope? Shadow DOM is here to help. Need to specify the exact location of a piece of DOM? Shadow DOMs scope API is what you need! It can be helpful to think of components that use Shadow DOM as modules for HTML. Markup and styles are isolated to their own DOM tree, and removed from the global context. Last time we talked about it around here, I showed how Twitter is using it… Read More

Continue Reading

“Killing the URL”

It was Safari who first started hiding the complete URL. Here’s what CSS-Tricks looks like even when you’re on an article page by default in Safari: The full URL path is hidden. You can only fix it (YES, FIX IT) by checking “Show full website address” in settings. Preferences > Advanced We’ve already damaged the sanctity of URLs in a way with URL shorteners. Thankfully, those are used less and less with social networks, like Twitter, not counting the URL toward the total tweet character count anymore. Now, Lily Hay Newman reports Chrome sees problems as well: “People have a really hard time understanding URLs,” says Adrienne Porter Felt, Chrome’s… Read More

Continue Reading

Customise radio buttons without compromising accessibility

Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead: Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something invisible or hidden: clip-path: polygon(0 0) display: none opacity: 0 visibility: hidden For custom radios (or checkboxes), option 2 and 4 are not recommended because screen readers won’t be able… Read More

Continue Reading

Updating a CSS Variable with JavaScript

Here’s a CSS variable (formally called a “CSS custom property“): :root { –mouse-x: 0px; –mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(–mouse-x); top: var(–mouse-y); } To update those values from JavaScript, you’d: let root = document.documentElement; root.addEventListener(“mousemove”, e => { root.style.setProperty(‘–mouse-x’, e.clientX + “px”); root.style.setProperty(‘–mouse-y’, e.clientY + “px”); }); That’s all. See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. The post Updating a CSS Variable with JavaScript appeared first on CSS-Tricks.

Continue Reading

HTML elements, unite! The Voltron-like powers of combining elements.

Guides, resources and discussions about Semantic HTML are often focused around specific elements, like a heading, or a sectioning element, or a list. It’s not often that we talk specifically about how we can combine HTML elements to increase their effectiveness. Normally, when we introduce HTML, we talk about how it is used to apply meaning to content in a document, and we do this by using examples like: “Is it a paragraph?” “Is it a heading?” “Is it a numbered list” “Is it a button” We use these examples because they are easy to understand — it’s a single piece or chunk of the same content that needs to… Read More

Continue Reading

Aspect Ratio Media Elements and intrinsicsize

If you need an aspect-ratio sized (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width. But media elements like don’t have children. The tag isn’t self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don’t control. Besides, these are the only two elements that “size to an external resource.” So, how do you enforce aspect ratio on them when using a variable width like 100% or 75vw? Well, once they load, they will have their natural aspect ratio, so that’s nice. But… Read More

Continue Reading

Using Scoped Slots in Vue.js to Abstract Functionality

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots. For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or even another component). There are three types of slots: default / unnamed slots: used when you have a single slot in a component. We create them by adding in the template where we… Read More

Continue Reading

“View Source” in DevTools

When the conversation about the value of “View Source” rolls around, the #1 response I hear is along these lines: No way, Jose! I use View Source all the time! It’s very useful when you want to look at the raw HTML, not the DOM. Yes, that is useful, and yes, there is a difference. But just because you are looking at DevTools doesn’t mean the DOM is the only thing you can see. This is Chrome DevTools. Safari has a Resources tab There is also a Network tab in DevTools for every browser. That’s where you find a way to look at the document. Firefox’s Network tab So, if… Read More

Continue Reading

CSS Shape Editors

Firefox 62 is shipping out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon(), circle(), and ellipse(), joining Chrome and Safari. What will be nice about the Firefox release (well, it’s kinda already nice if you use something like Firefox Developer Edition which is already on 62), is that it has a shape editor built right into DevTools. Chrome supports shape-outside as well, but there is no native DevTools helper for working with them. Thankfully, Razvan Caliman has a Chrome Plugin that does a great job. (Razvan contributed to the Firefox version as well, I hear.)… Read More

Continue Reading

Props and PropTypes in React

React encourages developers to build by breaking a UI up into components. This means there will always be a need to pass data from one component to another — more specifically, from parent to child component — since we’re stitching them together and they rely on one another. React calls the data passed between components props and we’re going to look into those in great detail. And, since we’re talking about props, any post on the topic would be incomplete without looking at PropTypes because they ensure that components are passing the right data needed for the job. With that, let’s unpack these essential but loaded terms together. Props: The… Read More

Continue Reading

Render Caching for React

Server Side Rendering (SSR) is a very useful technique that makes web apps appear faster. The initial HTML is displayed before the JavaScript is parsed and, while the user is deciding what to tap on, our handlers are ready. Server side rendering in React requires additional work to setup and has server costs. Furthermore, if your server team cannot have JavaScript running on your servers, you are stuck. It significantly complicates the CDN setup especially if you have pages that require login and where the user’s information is managed. I want to walk through a new concept called Render Caching. This is a cool trick that can give users an… Read More

Continue Reading

What do we call browser’s native development tools?

You know, that panel of tools that allows you to do stuff like inspect the DOM and see network requests. How do the companies that make them refer to them? Chrome calls them DevTools. Edge calls them DevTools. Firefox calls them Developer Tools. Safari calls it the Web Inspector. I think it’s somewhat safe to generically refer to them as DevTools. Safari is the only browser that doesn’t use that term, but I imagine even die-hard Safari users will know what you mean. The post What do we call browser’s native development tools? appeared first on CSS-Tricks.

Continue Reading

Helping a Beginner Understand Getting a Website Live

I got a great email from a fellow named Josh Long the other day. He is, in his words, “relatively new to web design” and was a bit stuck on the concept of getting a site live. I should say that I’m happy to get emails like this an I always read them, but I typically can’t offer tech support over email. If I can respond at all, I normally point people to other community resources. In this case, it struck me what a perfect moment this is for Josh. He’s a little confused, but he knows enough to be asking a lot of questions and sorting through all this… Read More

Continue Reading

Designing With Code

Wall Street Journal design director Matthew Ström on something near and dear to me: the link between code and design tools: We’re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there’s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience. One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with… Read More

Continue Reading

The Complete CSS Demo for OpenType Features

I’m very glad a guide for these features exists because we already know there are so many weird things that variable fonts can do — well done, Tunghsiao Liu! There are quite a few possible values for font-feature-settings, like, ya know: aalt, swsh, cswh, calt, hist, hlig, locl, rand, nalt, cv01-cv99, salt, subs, sups, titl, rvrn, liga, dlig, size, ornm, ccmp, kern, mark, mkmk, smcp, c2sc, pcap, c2pc, unic, cpsp, case, ital, ordn, lnum, onum, pnum, tnum, frac, afrc, dnom, numr, sinf, zero, mgrk, flac, dtls, ssty, ss01-ss20, smpl, trad, tnam, expt, hojo, nlck, jp78, jp83, jp90, jp04, hngl, ljmo, tjmo, vjmo, fwid, hwid, halt, twid, qwid, pwid, palt, pkna,… Read More

Continue Reading

Seriously, though. What is a progressive web app?

Amberley Romo read a ton about PWAs in order to form her own solid understanding. “Progressive web app” (PWA) is both a general term for a new philosophy toward building websites and a specific term with an established set of three explicit, testable, baseline requirements. As a general term, the PWA approach is characterized by striving to satisfy the following set of attributes: Responsive Connectivity independent App-like-interactions Fresh Safe Discoverable Re-engageable Installable Linkable Direct Link to Article — Permalink The post Seriously, though. What is a progressive web app? appeared first on CSS-Tricks.

Continue Reading

ABeamer: a frame-by-frame animation framework

In a recent post, Zach Saucier demonstrated the awesome things that the DOM allows us to do, thanks to the element. Taking a snapshot of an element and manipulating it to create an exploding animation is pretty slick and a perfect example of how far complex animations have come in the last few years. ABeamer is a new animation ecosystem that takes advantage of these new concepts. At the core of the ecosystem is the web browser animation library. But, it’s not just another animation engine. ABeamer is designed to build frame-by-frame animations in the web browser and use a render server to generate a PNG file sequence, which can… Read More

Continue Reading

::before vs :before

Note the double-colon ::before versus the single-colon :before. Which one is correct? Technically, the correct answer is ::before. But that doesn’t mean you should automatically use it. The situation is that: double-colon selectors are pseudo-elements. single-colon selectors are pseudo-selectors. ::before is definitely a pseudo-element, so it should use the double colon. The distinction between a pseudo-element and pseudo-selector is already confusing. Fortunately, ::after and ::before are fairly straightforward. They literally add something new to the page, an element. But something like ::first-letter is also a pseudo-element. The way I reason that out in my brain is that it’s selecting a part of something in which there is no existing HTML… Read More

Continue Reading

Using CSS Clip Path to Create Interactive Effects, Part II

This is a follow up to my previous post looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We’re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible. One of the biggest drawbacks of CSS clipping, at the time of writing, is browser support. Not having 100% browser coverage means different experiences for viewers in different browsers. We, as developers, can’t control what browsers support — browser… Read More

Continue Reading