addyosmani

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()

addyosmani

{
    "name": "my-app",
    "version": "1.0.0",
    "description": "My test app",
    "main": "src/js/index.js",
    "scripts": {
        "jshint:dist": "jshint src/js/*.js",
        "jshint": "npm run jshint:dist",
        "jscs": "jscs src/*.js",
        "browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

addyosmani

/*

A (very) WIP collection of optimized/recommended jQuery plugin patterns
from @addyosmani, @cowboy, @ajpiano and others.

Disclaimer:
-----------------------
Whilst the end-goal of this gist is to provide a list of recommended patterns, this
is still very much a work-in-progress. I am not advocating the use of anything here 
until we've had sufficient time to tweak and weed out what the most useful patterns

addyosmani

#Lessons From A JavaScript Code Review

I was recently asked to review some code for a new JavaScript application and thought I might share some of the feedback I provided as it includes a mention of JavaScript fundamentals that are always useful to bear in mind. Code reviews are possibly the single biggest thing you can do to improve the overall quality of your solutions and if you're not actively taking advantage of them, you're possibly missing out on bugs you haven't noticed being found or suggestions for improvements that could make your code better.

##Challenges & Solutions

Code reviews go hand-in-hand with maintaining strong coding standards. That said, standards don't usually prevent logical errors or misunderstandings about the quirks of a programming language. Even the most experienced developers can make these kinds of mistakes and code reviews can greatly assist with catching them.

Often the most challenging part of code reviews is actually finding an experienced developer you trust to complete

addyosmani

// Example 1
mediator.name = 'Doug';
mediator.subscribe('nameChange', function(arg){
     console.log(this.name);
     this.name = arg;
     console.log(this.name);
});

mediator.publish('nameChange', 'Jorn');

addyosmani

/*

Flexbox CSS helpers from the Polymer team. Extracted from https://github.com/PolymerElements/iron-flex-layout for use as just CSS.
Docs: https://elements.polymer-project.org/guides/flex-layout

@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

addyosmani

#Understanding MVC And MVP (For JavaScript & Backbone Developers)

Before exploring any JavaScript frameworks that assist in structuring applications, it can be useful to gain a basic understanding of architectural design patterns. Design patterns are proven solutions to common development problems and can suggest structural paradigms to help guide us in adding some organization to our application.

I think patterns are exciting as they're effectively a grass roots effort that build upon the collective experience of skilled developers who have previously faced similar problems as we do now. Although developers 10 or 20 years ago may not have been using the same programming languages for implementing patterns, there are many lessons we can learn from their efforts.

In this section, we're going to review two popular patterns - MVC and MVP. The context of our exploration will be how these patterns are related to the popular JavaScript framework Backbone.js, which will be explored in greater detail later on.

addyosmani

$(function(){

//===========================================================
// JavaScript object 'namespace' extension experiments
// by @addyosmani (comparing deep extension in vanilla JS vs. 
// jQuery's $.extend)
//
//
// The goal here is to:
//

addyosmani

/**
    Code copyright Dustin Diaz and Ross Harmes, Pro JavaScript Design Patterns.
**/

// Constructor.
var Interface = function (name, methods) {
        if (arguments.length != 2) {
            throw new Error("Interface constructor called with " + arguments.length + "arguments, but expected exactly 2.");
        }
        this.name = name;

addyosmani

• Web Page Usability Matters
• PageSpeed Insights w/Lighthouse and Chrome User Experience Report
• Data Saver for Chrome on Android - enable and then look at about:flags for Lite Pages and other interventions
• web.dev/fast - code-labs and tooling for optimizing performance
• Lighthousebot for using Lighthouse in continuous integration
• Bundlesize for JavaScript budgets in CI
• Start performance budgeting