hello.js

var please = require('share');
console.log('thank you');

Friday, 22 March, 2019 UTC

Encapsulating Style and Structure with Shadow DOM

Encapsulating Style and Structure with Shadow DOM

This is part four of a five-part series discussing the Web Components specifications. In part one, we took a 10,000-foot view of the specifications and what they do. In part two, we set out to build a custom modal dialog and created the HTML template ... more


Friday, 22 March, 2019 UTC

Advanced Tooling for Web Components

Advanced Tooling for Web Components

Over the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards. First, we looked at how to create HTML templates that could be consumed at a later time. Second, ... more


Friday, 22 March, 2019 UTC

Using <details> for Menus and Dialogs is an Interesting Idea

Using <details> for Menus and Dialogs is an Interesting Idea

One of the most empowering things you can learn as a new front-end developer who is starting to learn JavaScript is to change classes. If you can change classes, you can use your CSS skills to control a lot on a page. Toggle a class to one thing, style ... more


Wednesday, 20 March, 2019 UTC

Creating a Custom Element from Scratch

Creating a Custom Element from Scratch

In the last article, we got our hands dirty with Web Components by creating an HTML template that is in the document but not rendered until we need it. Next up, we’re going to continue our quest to create a custom element version of the dialog component ... more


Tuesday, 19 March, 2019 UTC

Chrome Lite Pages

Chrome Lite Pages

The Chrome team announced a new feature called Lite Pages that can be activated by flipping on the Data Saver option on an Android device: Chrome on Android’s Data Saver feature helps by automatically optimizing web pages to make them load faster. When ... more


Friday, 15 March, 2019 UTC

Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements

Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements

The popularity of CSS-in-JS has mostly come from the React community, and indeed many CSS-in-JS libraries are React-specific. However, Emotion, the most popular library in terms of npm downloads, is framework agnostic. Using the shadow DOM is common ... more


Thursday, 14 March, 2019 UTC

Little Things That Tickled My Brain from An Event Apart Seattle

Little Things That Tickled My Brain from An Event Apart Seattle

I had so much fun at An Event Apart Seattle! There is something nice about sitting back and basking in the messages from a variety of such super smart people. I didn't take comprehensive notes of each talk, but I did jot down little moments that flickered ... more


Thursday, 14 March, 2019 UTC

7 things you should know when getting started with Serverless APIs

7 things you should know when getting started with Serverless APIs

I want you to take a second and think about Twitter, and think about it in terms of scale. Twitter has 326 million users. Collectively, we create ~6,000 tweets every second. Every minute, that’s 360,000 tweets created. That sums up to nearly 200 billion ... more


Friday, 8 March, 2019 UTC

HMTL, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World

HMTL, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World

Hey CSS-Tricksters! A lot of folks tweeted, emailed, commented and even courier pigeoned (OK, maybe not that) stories about their personal journeys learning web development after we published "The Great Divide" essay. One of those stories was ... more


Friday, 8 March, 2019 UTC

Level up your JavaScript error monitoring

Level up your JavaScript error monitoring

(This is a sponsored post.) Automatically detect and diagnose JavaScript errors impacting your users with Bugsnag. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in a fraction of the time. Bugsnag detects ... more


Thursday, 7 March, 2019 UTC

Level up your JavaScript error monitoring

Level up your JavaScript error monitoring

(This is a sponsored post.) Automatically detect and diagnose JavaScript errors impacting your users with Bugsnag. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in a fraction of the time. Bugsnag detects ... more


Thursday, 7 March, 2019 UTC

Styling Based on Scroll Position

Styling Based on Scroll Position

Rik Schennink documents a system for being able to write CSS selectors that style a page when it has scrolled to a certain point. If you're like me, you're already on the lookout for document.addEventListener('scroll' ... and being terrified about performance. ... more


Thursday, 7 March, 2019 UTC

Using React Loadable for Code Splitting by Components and Routes

Using React Loadable for Code Splitting by Components and Routes

In a bid to have web applications serve needs for different types of users, it’s likely that more code is required than it would be for one type of user so the app can handle and adapt to different scenarios and use cases, which lead to new features ... more


Thursday, 7 March, 2019 UTC

Native Video on the Web

Native Video on the Web

TIL about the HLS video format: HLS stands for HTTP Live Streaming. It’s an adaptive bitrate streaming protocol developed by Apple. One of those sentences to casually drop at any party. Äh. Back on track: HLS allows you to specify a playlist with multiple ... more


Wednesday, 6 March, 2019 UTC

The Client/Server Rendering Spectrum

The Client/Server Rendering Spectrum

I've definitely been guilty of thinking about rendering on the web as a two-horse race. There is Server-Side Rendering (SSR, like this WordPress site is doing) and Client-Side Rendering (CSR, like a typical React app). Both are full of advantages and ... more


Wednesday, 6 March, 2019 UTC

Extracting Text from Content Using HTML Slot, HTML Template and Shadow DOM

Extracting Text from Content Using HTML Slot, HTML Template and Shadow DOM

Chapter names in books, quotes from a speech, keywords in an article, stats on a report — these are all types of content that could be helpful to isolate and turn into a high-level summary of what's important. For example, have you seen the way Business ... more


Tuesday, 5 March, 2019 UTC

Learning to Learn

Learning to Learn

There’s been a lot of talk recently about whether or not you need a degree to be in tech (spoiler: you don’t). But please don’t take this to mean you don’t need any kind of education to be in tech, because by not getting a degree, you’re opting to replace ... more


Tuesday, 5 March, 2019 UTC

The Bottleneck of the Web

The Bottleneck of the Web

Steve Souders, "JavaScript Dominates Browser CPU": Ten years ago the network was the main bottleneck. Today, the main bottleneck is JavaScript. The amount of JavaScript on pages is growing rapidly (nearly 5x in the last 7 years). In order to ... more


Sunday, 3 March, 2019 UTC

Writing Tests for React Applications Using Jest and Enzyme

Writing Tests for React Applications Using Jest and Enzyme

While it is important to have a well-tested API, solid test coverage is a must for any React application. Tests increase confidence in the code and helps prevent shipping bugs to users. That’s why we’re going to focus on testing in this post, specifically ... more


Sunday, 3 March, 2019 UTC

Why CSS Needs its Own Survey

Why CSS Needs its Own Survey

2016 was only three years ago, but that’s almost a whole other era in web development terms. The JavaScript landscape was in turmoil, with up-and-comer React — as well as a little-known framework called Vue — fighting to dethrone Angular. Like many other ... more


Friday, 1 March, 2019 UTC

Should I Use Source Maps in Production?

Should I Use Source Maps in Production?

It's a valid question. A "source map" is a special file that connects a minified/uglified version of an asset (CSS or JavaScript) to the original authored version. Say you've got a filed called _header.scss that gets imported into global.scss ... more


Thursday, 28 February, 2019 UTC

I Spun up a Scalable WordPress Server Environment with Trellis, and You Can, Too

I Spun up a Scalable WordPress Server Environment with Trellis, and You Can, Too

A few years back, my fledgling website design agency was starting to take shape; however, we had one problem: managing clients' web servers and code deployments. We were unable to build a streamlined process of provisioning servers and maintaining operating ... more


Thursday, 28 February, 2019 UTC

Did you know that CSS Custom Properties can handle images too?

Did you know that CSS Custom Properties can handle images too?

So you might be aware of CSS Custom Properties that let you set a variable, such as a theme color, and then apply it to multiple classes like this: :root { --theme: #777; } .alert { background: var(—-theme); } .button { background: var(—-theme); } Well, ... more


Wednesday, 27 February, 2019 UTC

Typography for Developers

Typography for Developers

Taimur Abdaal leads design at Retool, a fast way to build internal tools. They're working on a new design system for their platform, to let anyone easily build beautiful custom apps. Typography will be a huge part of this and Taimur wrote this based ... more


Tuesday, 26 February, 2019 UTC

Responsive Designs and CSS Custom Properties: Building a Flexible Grid System

Responsive Designs and CSS Custom Properties: Building a Flexible Grid System

Last time, we looked at a few possible approaches for declaring and using CSS custom properties in responsive designs. In this article, we’ll take a closer look at CSS variables and how to use them in reusable components and modules. We will learn how ... more


Tuesday, 26 February, 2019 UTC

Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints

Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints

CSS custom properties (a.k.a. CSS variables) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn’t come as a ... more


Friday, 22 February, 2019 UTC

Writing Animations That Bring Your Site to Life

Writing Animations That Bring Your Site to Life

Web animation is one of the factors that can strongly enhance your website’s look and feel. Sadly, unlike mobile apps, there aren’t as many websites using animation to their benefit as you would think. We don’t want to count yours among those, so this ... more


Thursday, 21 February, 2019 UTC

Blobs!

Blobs!

I was recently a guest editor for an issue of Bizarro Devs. It's a great newsletter! Go sign up! I put in a bunch of links around blobs. Like those weird squishy random shapes that are so "in" right now. Here are those links as well. I'm always ... more


Thursday, 21 February, 2019 UTC

CSS Variables + calc() + rgb() = Enforcing High Contrast Colors

CSS Variables + calc() + rgb() = Enforcing High Contrast Colors

As you may know, the recent updates and additions to CSS are extremely powerful. From Flexbox to Grid, and — what we’re concerned about here — Custom Properties (aka CSS variables), all of which make robust and dynamic layouts and interfaces easier than ... more


Thursday, 21 February, 2019 UTC

<span>L</span><span>e</span><span>t</span><span>t</span><span>e</span><span>r</span><span>s</span>

<span>L</span><span>e</span><span>t</span><span>t</span><span>e</span><span>r</span><span>s</span>

Did you see this Facebook crap? "Why do I need a 4Ghz quadcore to run facebook?" This is why. A single word split up into 11 HTML DOM elements to avoid adblockers. pic.twitter.com/Zv4RfInrL0 — Mike Pan (@themikepan) February 6, 2019 I popped ... more