Archive for the ‘Intermediate’ Category

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...

Masking vs. Clipping: When to Use Each

Posted on: No Comments
I was recently doing some client work where I used both <clipPath>s and <mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happ...

Using Filters in Vue.js

Posted on: No Comments
Filters are an interesting way to deal with data rendering in Vue but are only useful in a small amount of cases. The first thing to understand about filters is that they aren't replacements for methods, computed values, or watchers, because filters do...