Skip to content

Instantly share code, notes, and snippets.

View addyosmani's full-sized avatar
🎯
Focusing

Addy Osmani addyosmani

🎯
Focusing
View GitHub Profile
@addyosmani
addyosmani / preprocessing.md
Last active January 17, 2023 17:07
JavaScript preprocessing/precompilation

Problem: How can we preprocess JavaScript (at build-time or on the server-side) so engines like V8 don't have to spend as much time in Parse? This is a topic that involves generating either bytecode or a bytecode-like-abstraction that an engine would need to accept. For folks that don't know, modern web apps typically spend a lot longer in Parsing & Compiling JS than you may think.

  • Yoav: This can particularly be an issue on mobile. Same files getting parsed all the time for users. Theoretically if we moved the parsing work to the server-side, we would have to worry about it less.
  • One angle to this problem is we all ship too much JavaScript. That's one perspective. We could also look at preprocessing.
  • We've been talking about this topic over the last few weeks a bit with V8. There were three main options proposed.
    1. Similar to what optimize-js does. Identify IIFEs and mark them as such so the browser and VMs heuristics will catch them and do a better job than today. optimize-js only tackles IIFE bu
@addyosmani
addyosmani / blinkon7.md
Last active November 14, 2017 13:11
blinkon7 - rough discussion topics

Frameworks and tooling

ES2015 Modules.

How do you deploy them? What does this look like for Blink + Babel, frameworks? We've got nomodule coming. This looks like:

<script type="module" src="app.js"></script>
<script nomodule defer src="bundle.js"></script>
@addyosmani
addyosmani / flexbox-layout.css
Created January 29, 2017 19:31
Flexbox layout helper classes
/*
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
addyosmani / tti-rail.md
Last active June 6, 2017 00:59
TTI and RAIL

RAIL encouraged loading a site in under 1000ms on cable and (not well documented) between 3000ms and 5000ms on 3G. This loosely correlates to Google's research that 53% of mobile users will abandon a site if it doesn't load in 3s. So 5s is the headroom we give you for loading and becoming interactive so a user can realistically tap on a part of your user interface and have something useful happen. Loading is more nuanced than we as web developers once thought however.

It's is a pretty broad term and we don'the think it's enough for the page to "look" done. It should be engagable.

@addyosmani
addyosmani / route-based-chunking.md
Last active December 28, 2021 06:18
Route-based chunking

Route-based chunking

Many of us building single-page apps today use JavaScript module bundling tools that trend towards a monolithic "bundle.js" file including the full app and vendor code for multiple routes. This means if a user lands on any arbitrary route they need to wait for a large bundle of JS to be fetched, parsed and executed before the application is fully rendered and interactive.

screen shot 2016-09-28 at 4 45 52 pm

This is a little backwards, especially when apps are used under real-world network (3G) and device

@addyosmani
addyosmani / critical-notes.md
Created August 2, 2016 15:12
critical-across-site-with-slightly-different-pages.md

Problem: "Is there a nice pattern for using Critical via Gulp for CSS across a site with many pages which might be subtly different?"

The way I've tackled this in the past is breaking down the pages that might be slightly different into groups which each have their own Gulp task. For the sake of simplicity, we could have a set of pages that fall under red-theme, blue-theme etc. For each group, run critical.generate() against the set of URLs for the group (so, red-theme URLs) and allow it to inline the CSS for just that group. The benefit of thinking about this problem in a group for each task is if you need to apply additional customisations, config or build-time fixes per variation of page/theme, it's pretty trivial to do so. You then just run all of the critical group tasks near the end of your build and this should work.

@addyosmani
addyosmani / ember-serviceworker.md
Last active January 15, 2023 11:16
Ember Service Worker support

Ember.js currently doesn't have baked in support for Service Worker. They want this and there's an ember-cli RFCS thread discussing strategies however a number of tooling efforts exist to help fill in this gap today.

Note: you can of course just write vanilla Service Worker code for your Ember.js apps and that will work just fine. This doc tracks tooling and libraries that lower the friction for getting this setup

Service Worker Libraries

These static resource precaching and runtime caching libraries are lower-level than Broccoli, but can be used directly

@addyosmani
addyosmani / pwas.md
Last active June 10, 2020 18:30
💄💋 Progressive Web Apps across popular frameworks that I have written or contributed significantly to

React HN (Universal rendering, Offline caching, optimisations)

React + Webpack application using the PRPL pattern

@addyosmani
addyosmani / draft.md
Last active November 3, 2017 11:32
Babelon - smarter transpilation targeting for Babel

Inspiration: https://twitter.com/samccone/status/722826060161617923

Modern JavaScript engines support an increasing intersection of ES2015 (and above) features which simply don't require transpilation in order to be successfully parsed and executed. This project lays out a proposal for a lightweight Autoprefixer-style tool that takes as input a target set of browsers (A) which check against a source of data for supported ES features (Kangax ES6 tables (B) (see https://github.com/kangax/compat-table/blob/gh-pages/data-es6.js) and generate a mapping to Babel transforms for features requiring transpilation that are not supported (C) or not fully supported (e.g behind flags or staged but not flipped on to default).

To avoid the introduction of even more configuration files, this tool could piggyback off of some config we could

@addyosmani
addyosmani / throttling.sh
Last active October 23, 2016 10:43 — forked from arrel/Throttling
Throttle bandwidth to individual domains on os x
#!/bin/bash
# if you do not have access to run the script, run "chmod 755 throttling"
# to run enter in terminal "./throttling [speed]"
# full (no throttling)
# fast (3000Kbit)
# medium (100Kbit)
# slow (10Kbit)
# wwdc (1Kbit)
# off (blocks connection)