What is TDD?

Test Driven Development TDD stands for Test Driven Development, where you write the test for what you’re building before you […]

Read More

Cache: Open, Add & Match

Cache API If we want to be able to load the entire app without using the network, we need a […]

Read More

Dynamic Request Handling

The following are steps to handling a request for a page. If requested page doesn’t exist, 404 response. If it […]

Read More

Hijacking Requests Selectively

What is fetch(url) ? Now instead of making our SW send simple responses, let’s go to the network for the […]

Read More

Hijacking Requests

Simple Response Once the SW is in control, it can hijack requests to servers and respond with anything you want. […]

Read More

Service Worker Lifecycle

Service Worker First Load The SW only takes control of pages when they’re loaded. Naturally, if your page had loaded […]

Read More

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

Collaboration Commands

1. Repo Setup Create New Repo Directory, then Initialize Repo mkdir <project-name> cd <project-name> $ git init Or, Clone Existing […]

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

RWD Media Queries

Media Queries In general, responsive design consists of fluid grids, fluid images, and media queries. Media queries are CSS rules […]

Read More

Pseudo Classes

:empty Targets elements with no child content. :only-child Targets elements with one child. :root Refers to the html element, but […]

Read More

Website Testing

Aesthetic Testing Color Contrast Desaturate a screenshot of the website interface on Photoshop, and look for color contrast problems in […]

Read More

Attributes

rel Specifies the relationship between the current HTML document and the linked document. <link rel=”stylesheet” type=”text/css” href=”theme.css”> Example Values alternate, […]

Read More

Sass Install & Setup

Installing Sass You see, browsers don’t understand Sass syntax. So that syntax needs to be translated into plain CSS before […]

Read More

Flexbox Overview

Flexbox is a collection of CSS properties for adjusting page layout based on different screen sizes.   1. Flex Container […]

Read More

My Python Notes

  A list must be homogeneous, its elements all should be from the same type. If an element in a […]

Read More

Class Family Tree

Being able to identify object classes and types is a really useful ability. isinstance(<object>, <class>) Tells you whether or not […]

Read More