Workflow Considerations for Using an Image Management Service

There are all these sites out there that want to help you with your images. They do things like optimize your images and help you serve them performantly. Here’s the type of service I mean. Cloudinary ImageEngine imgix Akami Image Manager KeyCDN Image Processing CloudImage ImageOptim API Sirv Netlify Image Transformation That’s a very good thing. By any metric, images are a major slice of the resources on websites, and we’re notoriously bad at optimizing them and doing all the things we could to lower the performance hit from them. I’m sitting at a conference right now and Dave just bet everyone in the audience $100 that he could find… Read More

Continue Reading

The `hidden` Attribute is Visibly Weak

There is an HTML attribute that does exactly what you think it should do: I’m visible I’m hidden It even has great browser support. Is it useful? Uhm. Maybe. Not really. Adam Laki likes the semantics of it: If we use the hidden attribute, we make our semantic a little better. Anybody will understand what does a “hidden” attribute means on an element. Monica Dinculescu calls it a lie: the hidden rule is a User Agent style, which means it’s less specific than a moderate sneeze. This means that your favourite display style will override it: lol guess who’s not hidden anymore hint: it’s this thing So two related problems…… Read More

Continue Reading

Get the Complete Intro to Web Development and Intro to React (with Hooks!) with Brian Holt 🎣

(This is a sponsored post.) Hey, Marc here from Frontend Masters — excited to support CSS-Tricks ❤️! Have you checked out Brian Holt’s courses yet? His most popular courses are the “Complete Intro” courses which give you the lay of the land in Web Development as well as the entire React ecosystem. Complete Intro to Web Development, v2 This Complete Intro to Web Development assumes no prior coding knowledge, taking you from not knowing how websites are made to writing code for your own sites in HTML, CSS, JavaScript…all the way to building a server with Node.js! You’ll learn to… Setup the tools you need to write code. Write HTML… Read More

Continue Reading

Making Tables Responsive With Minimal CSS

Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this: See the Pen Responsive Tables #2.5: Flexbox by Bradley Taunt (@bradleytaunt) on CodePen. (Make sure to grab the Pen and make it a bit smaller to see how the design works responsively.) Bradley’s example markup looks like this – clean, accessible, regular ol’ HTML: Type of Food Calories Tasty Factor Type of Food Slice of Pizza Calories 450 Tasty Factor 95% How does he make that card effect? He uses… Read More

Continue Reading

Weekly Platform News: CSS column-span Property, ADA applies to Websites, Auto-generated Image Descriptions

In this week’s roundup: multi-column layouts gain wide support, the ADA means more A11y for retailers, and Google is doing something about all the empty image alt attributes in the wild. The CSS column-span property will soon be widely supported The CSS column-span property, which has been supported in Chrome and Safari since 2010 (and IE since 2012), is finally coming to Firefox in version 71 (in December). This feature enables elements that span across all columns in a multiple-column layout. In the following demo, the headings span across both columns. article { column-count: 2; } h2 { column-span: all; } See the Pen Demo of CSS column-span: all by… Read More

Continue Reading

Options for Hosting Your Own Non-JavaScript-Based Analytics

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used (including on this site), probably due to it’s ease of integration, feature-richness, and the fact that it’s free (until you need to jump up to the enterprise tier which is some crazy six-figure jump). I don’t take any particular issue with Google Analytics. In fact I quite like it, especially as I’ve learned more about customizing it, like we’ve done here on CSS-Tricks as well as on CodePen. But there are other options. In particular, I wanted to look at some other options where:… Read More

Continue Reading

Designing accessible color systems

The team at Stripe explores how they’re refining their color palette to make it more accessible and legible for users across all their products and interfaces. Not only that but the team built a wonderful and yet entirely bonkers app for figuring out the ideal range of colors that they needed. We built a web interface to allow us to visualize and manipulate our color system using perceptually uniform color models. The tool gave us an immediate feedback loop while we were iterating on our colors—we could see the effect of every change. This tool is…whoa! I would love to learn a bit more about why they built this though… Read More

Continue Reading

Why Parcel Has Become My Go-To Bundler for Development

Today we’re gonna talk about application bundlers — tools that simplify our lives as developers. At their core, bundlers pick your code from multiple files and put everything all together in one or more files in a logical order that are compiled and ready for use in a browser. Moreover, through different plugins and loaders, you can uglify the code, bundle up other kinds of assets (like CSS and images), use preprocessors, code-splitting, etc. They manage the development workflow. There are lots of bundlers out there, like Browserify and webpack. While those are great options, I personally find them difficult to set up. Where do you start? This is especially… Read More

Continue Reading

Float Element in the Middle of a Paragraph

Say you want to have an image (or any other element) visually float left into a paragraph of text. But like… in the middle of the paragraph, not right at the top. It’s doable, but it’s certainly in the realm of CSS trickery! One thing you can do is slap the image right in the middle of the paragraph: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique quibusdam aliquam provident suscipit corporis minima? Voluptatem temporibus nulla But that’s mega awkward. Note the alt text. We can’t have random alt text in the middle of a sentence. It’s semantically blech and literally confusing for people using assistive technology. So what… Read More

Continue Reading

JAMstack Tools and The Spectrum of Classification

With the wonderful world of JAMstack getting big, all the categories of services and tools that help it along are as important as ever. There are static site generators, headless CMSs, and static file hosts. I think those classifications are handy, and help conversations along. But there is a point where nuance is necessary and these classification buckets get a little leaky. Note, these charts are just intended to paint a spectrum, not to be a comprehensive list of services. Headless CMSs A Headless CMS is a CMS that provides an admin area for creating and editing content, but offers no front-end to build the website from. All the content… Read More

Continue Reading

Laying the Foundations

Here’s a new book by Andrew Couldwell all about design systems and I’m looking forward to reading the book because it looks like his experience will offer a bunch of insightful thoughts and advice. From the book’s description: This is real talk about creating design systems and digital brand guidelines. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips. System design is not a scary thing — this book aims to dispel that myth. It covers what design systems are, why they are important, and how to get stakeholder buy-in to create one. It introduces you to a simple model,… Read More

Continue Reading

Making a Chart? Try Using Mobx State Tree to Power the Data

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and Chartist, to name only a few of many, many options. But we don’t necessary need a chart library to create charts. Take Mobx-state-tree (MST), an intuitive alternative to Redux for managing state in React. We can build an interactive custom chart with simple SVG elements, using MST to manage and manipulate data for the chart. If you’ve attempted to build charts using something like D3.js in the past, I think you’ll find this approach more intuitive. Even if you’re an experienced D3.js developer, I still think… Read More

Continue Reading

Show Search Button when Search Field is Non-Empty

I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input () when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value] could do that, or help match on the actual value, but it can’t. This makes :placeholder-shown one of the few CSS properties that we have that can react to user-initiated state joining the likes of :hover-and-friends, :checked (checkbox hack!), and the also-awesome :focus-within. One way we can use it is to check whether the user entered any text into a search field. If yes, then reveal the search button visually (never hide it… Read More

Continue Reading

Netlify CMS Open Authoring

I like the term “Git-backed CMS.” That term works for an emerging style of CMS that looks and behaves much like any other CMS, with a fascinating twist: it doesn’t actually store any data for you. These CMSs are connected to a Git repo where the data lives in flat files (e.g. Markdown). You teach the CMS where those files are and how they are structured. Then, as you use the CMS to create, edit, and delete things, those changes happen as commits (or pull/merge requests) are made against that repo. So cool. For example, CloudCannon can do it specifically for hosted Jekyll sites. But more in the Indie Web… Read More

Continue Reading

What is super() in JavaScript?

What’s happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its parent’s methods. This article will assume at least a little familiarity with the concepts of constructors and child and parent classes. If that’s totally new, you may want to start with Mozilla’s article on Object-oriented JavaScript for beginners. Super isn’t unique to Javascript — many programming languages, including Java and Python, have a super() keyword that provides a reference to a parent class. JavaScript, unlike Java and Python, is not built around a class inheritance model. Instead, it extends JavaScript’s prototypal inheritance model to… Read More

Continue Reading

Some Things You Oughta Know When Working with Viewport Units

David Chanin has a quickie article summarizing a problem with setting an element’s height to 100vh in mobile browsers and then also positioning something on the bottom of that. Summarized in this graphic: The trouble is that Chrome isn’t taking the address bar (browser chrome) into account when it’s revealed which cuts off the element short, forcing the bottom of the element past the bottom of the actual viewport. Button .full-page-element { height: 100vh; position: relative; } .full-page-element button { position: absolute; bottom: 10px; left: 10px; } You’d expect that button in the graphic to be visible (assuming this element is at the top of the page and you haven’t… Read More

Continue Reading

Optimizing Images for Users with Slow Network Speeds

For every website, page load time is a critical factor that can make or break the business. Thanks to the better user experience that comes with a fast-loading webpage, those who focus on page load optimization enjoy better conversion rates, better SEO, better retention, and lower bounce rates. And this fact has been highlighted in several studies. For example, according to one of the studies, 47% of consumers expect a web page to load in 2 seconds or less. No wonder that developers across the globe focus a lot on improving the webpage load time. Logic dictates that keeping other factors the same, a lighter webpage should load faster than… Read More

Continue Reading

Query JSON documents in the Terminal with GROQ

JSON documents are everywhere today, but they are rarely structured the way you want them to be. They often include too much data, have weirdly named fields, or place the data in unnecessary nested objects. Graph-Relational Object Queries (GROQ) is a query language (like SQL, but different) which is designed to work directly on JSON documents. It basically lets you write queries you can quickly filter and then reformat JSON documents to get them into the most convenient shape. GROQ was developed by Sanity.io (where it’s used as the primary query language). It’s open source and it gives us built-in ways to use it in JavaScript and the command line… Read More

Continue Reading

Location, Privilege and Performant Websites

Here’s a wonderful reminder from Stephanie Stimac about web performance. She writes about a recent experience of moving to an area with an unreliable network and how this caused problems for her as she tried to figure out what was happening during a power blackout: Assuming all of your customers are living the same life, with the same privilege, with the same access to fast internet and data is the quickest way to ensure you’re excluding some of them and not providing the same level of service the rest get. It’s most likely not even happening intentionally, bias is inherent in us all in some way or another. Bias based… Read More

Continue Reading

Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS Subgrid

In this week’s roundup: Firefox gains locksmith-like powers, Samsung’s Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox 70, and a new study confirms that users prefer to tap into content rather than scroll through it. Let’s get into the news. Securely generated passwords in Firefox Firefox now suggests a securely generated password when the user focuses an element that has the autocomplete=”new-password” attribute value. This option is also available via the context menu on any password field. (via The Firefox Frontier) Web apps in Samsung’s app store Samsung has started adding Progressive Web Apps (PWA) to its app store, Samsung Galaxy Store, which is available… Read More

Continue Reading

Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here. Noel Delagado See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen. The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction: var getDirection = function (ev, obj) { var… Read More

Continue Reading

Using Default Parameters in ES6

I’ve recently begun doing more research into what’s new in JavaScript, catching up on a lot of the new features and syntax improvements that have been included in ES6 (i.e. ES2015 and later). You’ve likely heard about and started using the usual stuff: arrow functions, let and const, rest and spread operators, and so on. One feature, however, that caught my attention is the use of default parameters in functions, which is now an official ES6+ feature. This is the ability to have your functions initialize parameters with default values even if the function call doesn’t include them. The feature itself is pretty straightforward in its simplest form, but there… Read More

Continue Reading

Wufoo Forms Integrate With Everything

(This is a sponsored post.) Wufoo helps you build forms you can put on any website. There’s a million reasons you might need to do that, from the humble contact form, to a sales lead generation form, to a sales or registration form. That’s powerful and useful all by itself. But Wufoo is even more powerful when you consider that it integrates with over 1,000 other web services. Wufoo integrates with over a dozen CRM solutions, including Salesforce, Nutshell, Highrise, Nimble, and more. Wufoo integrates with the most popular email marketing services like MailChimp, Campaign Monitor, Sendloop, and more. Wufoo integrates with payment processors like Stripe, PayPal, Chargify, and more.… Read More

Continue Reading

Offline *Only* Viewing

It made the rounds a while back that Chris Bolin built a page of his personal website that could only be viewed while you are offline. This page itself is an experiment in that vein: What if certain content required us to disconnect? What if readers had access to that glorious focus that makes devouring a novel for hours at a time so satisfying? What if creators could pair that with the power of modern devices? Our phones and laptops are amazing platforms for inventive content—if only we could harness our own attention. Now Bolin has a whole magazine around this same concept called The Disconnect! The Disconnect is an… Read More

Continue Reading

The Best UX is No User Interface at All

I have been obsessed with User Interfaces (UI) for as long as I can remember. I remember marveling at the beauty that was Compaq TabWorks while I played “The Incredible Machine” and listened to “Tears For Fears—Greatest Hits” on the family computer. Don’t judge me—I was listening to “Mad World” way before Donny Darko and that creepy rabbit. If none of those references landed with you, it’s probably because I’m super old. In the words of George Castanza, “It’s not you, it’s me.” That’s another super old reference you might not get. You know what—forget all that, let’s move on. I really got into UI when I bought my own… Read More

Continue Reading

A Short History of WaSP and Why Web Standards Matter

In August of 2013, Aaron Gustafson posted to the WaSP blog. He had a bittersweet message for a community that he had helped lead: Thanks to the hard work of countless WaSP members and supporters (like you), Tim Berners-Lee’s vision of the web as an open, accessible, and universal community is largely the reality. While there is still work to be done, the sting of the WaSP is no longer necessary. And so it is time for us to close down The Web Standards Project. If there’s just the slightest hint of wistful regret in Gustafson’s message, it’s because the Web Standards Project changed everything that had become the norm… Read More

Continue Reading

Website Sameness™

Here’s captain obvious (yours truly) with an extra special observation for you: BAR WITH SPECIAL MESSAGE LOGO PLATFORM↓ SOLUTIONS↓ PRICING BOLD STATEMENT CALL TO ACTION GRID OF LITTLE ILLUSTRATIONS LARGE BOLD FOOTER©2018 — Chris Coyier (@chriscoyier) January 30, 2018 It came across as (particularly trite) commentary about Website Sameness™. I suppose it was. I was looking at lots of sites as I was putting together The Power of Serverless. I was actually finding it funny how obtuse the navigation often is on a SaaS sites. Products? Solutions? Which one is for me? Do I need to buy a product and a solution? Sometimes they make me feel dumb, like I’m… Read More

Continue Reading

ABEM. A more useful adaptation of BEM.

BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain. This article assumes that you are already familiar with the naming convention. If not you can learn more about it at getbem.com to catch up on the basics. The standard syntax for BEM is: block-name__element-name–modifier-name I’m personally a massive fan of the methodology behind the naming convention. Separating your styles into small components is far easier to maintain than having a sea of high specificity spread all throughout your stylesheet. However, there are a few problems I have with the syntax that can cause issues in production as well as cause confusion for… Read More

Continue Reading

Creating Cue Files from Markdown

Pretty specific, huh? While we’re going to do exactly what the title says, this post is more about a learning exercise and an example of getting help on the internet. My podcast editor, Chris Enns, is always looking for ways to improve his work and make podcasting better. One kinda cool way to do that is to offer “chapters” so that people can jump around in a podcast to specific points. Through TimeJump, we already offer that on the website itself. Those happen in the format of hash links like this: #t=12:18. Believe it or not, relative links like that, in the show notes, actually work in some podcatchers (podcast… Read More

Continue Reading

Turn that frown upside down

I got an email that went like this (lightly edited for readability): CSS makes me sad. I’ve been programming web apps for more than a decade now. I can architect the thing, load every required data, make all the hops and jumps until I have a perfectly crafted piece of markup with relevant info. And then I need to put a box to the left of another box. Or add a scrollbar because a list is too big. Or, god forbid, center some text. I waste hours and feel worthless and sad. This only happens with CSS. I think this is a matter of practice. I bet you practice all… Read More

Continue Reading

Take a coding quiz, get offers from top tech companies

(This is a sponsored post.) That’s how TripleByte works. The companies that find hires from TripleByte (like Dropbox, Apple, Reddit, Twitch, etc) don’t have as many underqualified applicants to sort through because they’ve come through a technical interview of sorts already. Direct Link to Article — Permalink Take a coding quiz, get offers from top tech companies is a post from CSS-Tricks

Continue Reading

Recreating the GitHub Contribution Graph with CSS Grid Layout

Ire Aderinokun sets out to build the GitHub contribution graph — that’s the table with lots of green squares indicating how much you’ve contributed to a project – with CSS Grid: As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of my CSS ended up being less than 30 lines, with only 15 declarations! I’m so excited about posts like this because it shows just how much fun CSS Grid can be. Likewise, Jules Forrest has been making a number of brilliant experiments on this front where… Read More

Continue Reading

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable. The result we want to reproduce. In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This polyfill is great for getting started to play with conic-gradient(), as it allows us to use them to build stuff that works across the board. Sadly, it doesn’t work with CSS… Read More

Continue Reading

​HelloSign API: Your development time matters

(This is a sponsored post.) We know that no API can write your code for you, but ours comes close. We’ve placed great importance on making sure our API is the most developer-friendly API available — prioritizing clean documentation, an industry-first API dashboard for easy tracking and debugging, and trained API support engineers to personally assist with your integration.  Meaning, you won’t find an eSignature product with an easier or faster path to implementation.  It’s 2x faster than other eSignature APIs.   If you’re a business looking for a way to integrate eSignatures into your website or app, test drive HelloSign API for free today. Direct Link to Article — Permalink ​HelloSign API: Your… Read More

Continue Reading

Slate’s URLs Are Getting a Makeover

Greg Lavallee writes about a project currently underway at Slate, where they’ve defined a new goal for themselves: Our goal is speed: Readers should be able to get to what they want quickly, writers should be able to swiftly publish their posts, and developers should be able to code with speed. They’ve already started shipping a lot of neat improvements to the website but the part that really interests me is where they focus on redefining their URLs: As a web developer and product dabbler, I love URLs. URLs say a tremendous amount about an application’s structure, and their predictability is a testament to the elegance of the systems behind… Read More

Continue Reading

An Open Source Etiquette Guidebook

Open source software is thriving. Large corporations are building on software that rests on open collaboration, enjoying the many benefits of significant community adoption. Free and open source software is amazing for its ability to bring together many people from all over the world, and join their efforts and skills by their interests. That said, and because we come from so many different backgrounds, it’s worth taking a moment to reflect on how we work together. The manner in which you conduct yourself while working with others can sometimes impact whether your work is merged, whether someone works on your issue, or in some cases, why you might be blocked… Read More

Continue Reading

A Front End Developer’s Guide to GraphQL

No matter how large or small your application is, you’ll have to deal with fetching data from a remote server at some point. On the front end, this usually involves hitting a REST endpoint, transforming the response, caching it, and updating your UI. For years, REST has been the status quo for APIs, but over the past year, a new API technology called GraphQL has exploded in popularity due to its excellent developer experience and declarative approach to data fetching. In this post, we’ll walk through a couple of hands-on examples to show you how integrating GraphQL into your application will solve many pain points working with remote data. If… Read More

Continue Reading

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

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

​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

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