Archive for the ‘Intermediate’ Category

Making CSS Animations Feel More Natural

Posted on: No Comments
It used to be that designers designed and coders coded. There was no crossover, and that’s the way it was. But with the advent of CSS transitions and animations, those lines are blurring a bit. It’s no longer as simple as the designer dictating the...

ABEM. A more useful adaptation of BEM.

Posted on: No Comments
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 ...

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

Posted on: No Comments
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 Impl...

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

Posted on: No Comments
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 th...

Animating Border

Posted on: No Comments
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...

A Front End Developer’s Guide to GraphQL

Posted on: No Comments
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....

Instant Form Validation Using JavaScript

Posted on: No Comments
HTML5 introduces a couple of new attributes for implementing browser-based form validation. The pattern attribute is a regular-expression that defines the range of valid inputs for textarea elements and most types of input. The required attribute speci...

Introduction to Webpack: Entry, Output, Loaders, and Plugins

Posted on: No Comments
Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices. Webpack has gained popularity in the last...