hello.js

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

Friday, 24 May, 2019 UTC

Front-End Documentation, Style Guides and the Rise of MDX

Front-End Documentation, Style Guides and the Rise of MDX

You can have the best open source project in the world but, if it doesn’t have good documentation, chances are it’ll never take off. In the office, good documentation could save you having to repeatedly answer the same questions. Documentation ensures ... more


Friday, 24 May, 2019 UTC

Getting Started with React Testing Library

Getting Started with React Testing Library

I can guess what you are thinking: another React testing library? So many have already been covered here on CSS-Tricks (heck, I’ve already posted one covering Jest and Enzyme) so aren’t there already enough options to go around? But react-testing-library ... more


Friday, 24 May, 2019 UTC

The Power of Serverless v2.0! (Now an Open-Source Gatsby Site Hosted on Netlify)

The Power of Serverless v2.0! (Now an Open-Source Gatsby Site Hosted on Netlify)

I created a website called The Power of Serverless for Front-End Developers over at thepowerofserverless.info a little while back while I was learning about that whole idea. I know a little more now but still have an endless amount to learn. Still, I ... more


Tuesday, 21 May, 2019 UTC

What Does it Mean to Be “Full Stack”?

What Does it Mean to Be “Full Stack”?

I was asked this recently by a fellow developer who was at the same web tech conference I was at. This developer had met a lot of new people who literally introduced themselves as full-stack developers sort of the way Bob Vance, Vance Refrigeration would ... more


Monday, 20 May, 2019 UTC

The “Inside” Problem

The “Inside” Problem

So, you're working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to: Limit the width ... more


Friday, 17 May, 2019 UTC

Weekly news: PWA Issue on iOS, Performance Culture, Anti-Tracking in Browsers

Weekly news: PWA Issue on iOS, Performance Culture, Anti-Tracking in Browsers

Šime posts regular content for web developers on webplatform.news. Each week, he covers timely news at the intersection of development standards and the tools that make them available on the web. Installed PWAs cannot easily be restarted on iOS iOS 12.2 ... more


Thursday, 16 May, 2019 UTC

Using Jetpack to Accelerate WordPress Development

Using Jetpack to Accelerate WordPress Development

(This is a sponsored post.) [Geoff:] I've built a fair number of WordPress sites in my day. It's been my go-to since the 2.x-ish days because it works for any site, big or small. That's the sort of solution and flexibility you like to have as a freelancer. ... more


Thursday, 16 May, 2019 UTC

Iterating a React Design with Styled Components

Iterating a React Design with Styled Components

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs. There would be consensus among developers about the best way to approach styling. There’d be one ... more


Wednesday, 15 May, 2019 UTC

A Deep Dive into Native Lazy-Loading for Images and Frames

A Deep Dive into Native Lazy-Loading for Images and Frames

Today's websites are packed with heavy media assets like images and videos. Images make up around 50% of an average website's traffic. Many of them, however, are never shown to a user because they're placed way below the fold. What’s this thing about ... more


Wednesday, 15 May, 2019 UTC

Integrating Third-Party Animation Libraries to a Project

Integrating Third-Party Animation Libraries to a Project

Creating CSS-based animations and transitions can be a challenge. They can be complex and time-consuming. Need to move forward with a project with little time to tweak the perfect transition? Consider a third-party CSS animation library with ready-to-go ... more


Wednesday, 15 May, 2019 UTC

Change Color of SVG on Hover

Change Color of SVG on Hover

There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover , :active , :focus , class name change, etc. — is different. Let's look at the ways. Inline SVG Inline ... more


Friday, 10 May, 2019 UTC

Deploying a Client-Side Rendered create-react-app to Microsoft Azure

Deploying a Client-Side Rendered create-react-app to Microsoft Azure

Deploying a React app to Microsoft Azure is simple. Except that... it isn’t. The devil is in the details. If you're looking to deploy a create-react-app — or a similar style front-end JavaScript framework that requires pushState -based routing — to Microsoft ... more


Friday, 10 May, 2019 UTC

Weekly Platform News: Feature Policy, Signed Exchanges, iOS browsers

Weekly Platform News: Feature Policy, Signed Exchanges, iOS browsers

👋 Hey folks! This is the first edition of a new weekly update we'll be posting that covers timely news at the intersection of development standards and the tools that make them available on the web. We often talk about the pace of change in our industry. ... more


Thursday, 9 May, 2019 UTC

The Thinking Behind Simplifying Event Handlers

The Thinking Behind Simplifying Event Handlers

Events are used to respond when a user clicks somewhere, focuses on a link with their keyboard, and changes the text in a form. When I first started learning JavaScript, I wrote complicated event listeners. More recently, I've learned how to reduce both ... more


Friday, 3 May, 2019 UTC

Making the Move from jQuery to Vue

Making the Move from jQuery to Vue

As someone who has used jQuery for many . years and has recently become a Vue convert, I thought it would be an interesting topic to discuss the migration process of working with one to the other. Before I begin though, I want to ensure one thing is ... more


Thursday, 2 May, 2019 UTC

Making Web Components for Different Contexts

Making Web Components for Different Contexts

This article isn’t about how to build web components. Caleb Williams already wrote a comprehensive guide about that recently. Let’s talk about how to work with them, what to consider when making them, and how to embrace them in your projects. If you ... more


Thursday, 2 May, 2019 UTC

Naming things to improve accessibility

Naming things to improve accessibility

I like the this wrap-up statement from Hidde de Vries: In modern browsers, our markup becomes an accessibility tree that ultimately informs what our interface looks like to assistive technologies. It doesn’t matter as much whether you’ve written this ... more


Wednesday, 1 May, 2019 UTC

Earth day, API’s and sunshine.

Earth day, API’s and sunshine.

Cassie Evans showcases some really nifty web design ideas and explores using the API provided by the company her team over at Clearleft recently hired to cover their building's roof with solar panels. Cassie outlines her journey designing a webpage that ... more


Wednesday, 1 May, 2019 UTC

The Many Ways of Getting Data Into Charts

The Many Ways of Getting Data Into Charts

Data is available everywhere nowadays, whether it’s in a plain text file, a REST API, an online Google sheet… you name it! It’s that variety of context that makes building graphs more than simply having a database in your local project — where there ... more


Tuesday, 30 April, 2019 UTC

The Simplest Ways to Handle HTML Includes

The Simplest Ways to Handle HTML Includes

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that addresses it. I'm talking about straight up includes , like taking a chunk of HTML and plopping ... more


Tuesday, 30 April, 2019 UTC

Perceived Velocity through Version Numbers

Perceived Velocity through Version Numbers

HTML5 and CSS3 were big . So big that they were buzzwords that actually meant something and were a massive success story in pushing web technology forward. JavaScript names their big releases now too: ES6, ES7, ES8... and it seems like it will keep going ... more


Saturday, 27 April, 2019 UTC

Corvid by Wix: Accelerated Development of Web Applications

Corvid by Wix: Accelerated Development of Web Applications

(This is a sponsored post.) It's been interesting to watch Wix evolve from a website builder into a full-fledged platform for developing web applications. It's still just as easy for anyone to spin up a website with the visual builder that's always been ... more


Saturday, 27 April, 2019 UTC

Interviewing for a Technical Position Doesn’t Have to Be Scary

Interviewing for a Technical Position Doesn’t Have to Be Scary

Jacob Schatz (@jakecodes) is a staff engineer over at GitLab and was kind enough to share how he conducts job interviews for technical positions and his thinking process for them. Technical interviews are talked about often and can be a touchy subject ... more


Saturday, 27 April, 2019 UTC

Using Parcel as a Bundler for React Applications

Using Parcel as a Bundler for React Applications

You may already be familiar with webpack for asset management on projects. However, there’s another cool tool out there called Parcel, which is comparable to webpack in that it helps with hassle-free asset bundling. Where Parcel really shines is that ... more


Wednesday, 24 April, 2019 UTC

That Time I Tried Browsing the Web Without CSS

That Time I Tried Browsing the Web Without CSS

CSS is what gives every website its design. Websites sure aren’t very fun and friendly without it! I’ve read about somebody going a week without JavaScript and how the experience resulted in websites that were faster, though certain aspects of them would ... more


Tuesday, 23 April, 2019 UTC

The Circle of a React Lifecycle

The Circle of a React Lifecycle

A React component goes through different phases as it lives in an application, though it might not be evident that anything is happening behind the scenes. Those phases are: mounting updating unmounting error handling There are methods in each of these ... more


Monday, 22 April, 2019 UTC

Could Grouping HTML Classes Make Them More Readable?

Could Grouping HTML Classes Make Them More Readable?

You can have multiple classes on an HTML element: <div class="module p-2"></div> Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply: .module { } .p-2 { } const div = document.querySelector("div"); ... more


Friday, 19 April, 2019 UTC

Tabs: It’s Complicated™

Tabs: It’s Complicated™

I've said before one quick and powerful thing you can learn as a front-end developer just getting starting with JavaScript is changing classes. const button = document.querySelector(".my-button"); const element = document.querySelector(".content"); ... more


Friday, 19 April, 2019 UTC

How to Get a Progressive Web App into the Google Play Store

How to Get a Progressive Web App into the Google Play Store

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be able to install the app using app stores?" The answer has traditionally been no, but ... more


Thursday, 18 April, 2019 UTC

Creating Reusable Base Classes in TypeScript with a Real-Life Example

Creating Reusable Base Classes in TypeScript with a Real-Life Example

Hey CSS-Tricksters! Bryan Hughes was kind enough to take a concept from an existing post he published on converting to TypeScript and take it a few couple steps further in this post to elaborate on creating reusable base classes. While this post doesn’t ... more