Registering a Service Worker

index.js For our app, index.js is the SW script, and it is located in \wittr\public\js\sw\index.js. Fetch event listener A fetch event controls requests […]

Read More

Service Worker Intro

What is a Service Worker? Service Worker is simply a JavaScript file that sits between you and the network. It’s […]

Read More

The Demo App

1. Install NodeJS You’ll need Node.js v0.12.7 or above. Check what version you have if you already have it node […]

Read More

What Is Offline First?

Lie-fi It is an expression to describe a WiFi network that seems to to be available but won’t connect, or […]

Read More

Front End Optimization Checklist

  Load Time Setup Have all of the site – or at least most of it – loaded within 2 […]

Read More

Console

The Console panel is a text terminal that allows developers to interact with JavaScript. The ESC key opens and collapses […]

Read More

Sources

The Sources panel Shows you all the JavaScript that has been loaded into the page and provides tools for editing […]

Read More

Elements, Resources, Network, Timeline, Profiles, Audits

Elements You can rearrange HTML elements by simply clicking and dragging the element.   Resources The Resources panel displays all […]

Read More

Service Workers & Manifests

Service Worker A script that runs in the background that features to be cached without requiring a user interaction. They […]

Read More

JS: JavaScript Optimization with Gulp

Gulp Modules Build a Gulp pipeline resource that will minify the resources in our app to their smallest footprint possible. […]

Read More

JS: Smarter JavaScript

Fact is, JavaScript loaded in the browser is FAST! It’s the sending of code that needs to be optimized. The […]

Read More

IMG: Automatic Image Optimization with Gulp

You can optimize images using one of the following Gulp modules: gulp-tinypng gulp-image gulp-imagemin   TinyPNG’s Open API Use TinyPNG’s […]

Read More

IMG: Manual Image Optimization

Images are the number one perceived performance fail of any web app. A slowly loaded image can really impact your […]

Read More

IMG: Responsive Images

Images in CSS with background Use @media queries. Using a mobile-first perspective, your CSS media queries should be: min-width. .image-background […]

Read More

CSS Optimization

The goals when writing performance CSS is to accomplish your desired styling with as less code as possible. Use CSS […]

Read More

Assets Optimization Overview

Images Images are almost always the biggest use of bandwidth. Use sprite maps to combine images into one large image. […]

Read More

Testing Tools

Page Speed Google Page Speed is a family of tools that can help you optimize the performance of a website. […]

Read More

Load Time

Load Time is the total time it takes for a web app or site to load. The goal of a […]

Read More

Quick & Clean Development

Development is iterative, and the most important thing for developers is to quickly see their changes. However, in a production […]

Read More

Queuing Tasks

One of the most powerful aspects of gulp, is the ability to put multiple tasks together. Doing this allows you, […]

Read More