taranda

Dynamically Add Critical CSS to Your Rails App

Optimizing the delivery of CSS is one way to improve user experience, load speed and SEO of your web app. This involves determining the "critical path CSS" and embeding it into the html of your page. The rest of the CSS for the site is loaded asynchronously so it does not block the rendering of your "above the fold" content. This Gist will show you how to dynamically generate critical path CSS for your Rails app.

In this example we will use the mudbugmedia/critical-path-css gem.

Prerequisites

You will need to set up caching and Active Job in your Rails app. I recommend using a thread-safe background job manager like resque.

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

kosamari

ServiceWorker for github pages

This is a ServiceWorker template to turn small github pages into offline ready app.

Why ?

Whenever I make small tools & toys, I create github repo and make a demo page using github pages (like this one).
Often these "apps" are just an index.html file with all the nessesary CSS and JavaScript in it (or maybe 2-3 html/css/js files). I wanted to cache these files so that I can access my tools offline as well.

Notes

Make sure your github pages have HTTPS enforced, you can check Settings > GitHub Pages > Enforce HTTPS of your repository.

vasanthk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

athyuttamre

.PHONY: dev dev-all dev-build dev-build-all prod prod-all prod-build prod-build-all

# Dev

# Runs the built image with dev settings.
dev:
	@export METEOR_SETTINGS='$(shell cat ./app/settings.json)'; \
	docker-compose up --no-deps -d app

# Runs all built services.

wnstn

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

var setupWatchers = function() {
  gulp.watch(['./app/views/**/*.erb',
              './app/assets/javascripts/**/*.js'], ['reload']);
  gulp.watch(['./app/assets/stylesheets/**/*.scss'], ['reloadCSS'])
};

gulp.task('reload', function(){

ilyaigpetrov

Meteor Alternatives Per Feature

This table was created in 2015 so may be quite outdated today.

Feature	Meteor Solution	Alternative Solutions	Description
Live DB Sync	[livequery][lq] ([mongo-oplog]), [ddp]	RethinkDB, Redis, ShareDB, [npm:mongo-oplog], [firebase], etc.	Push DB updates to client/server.
Latency Compensation, Optimistic UI	[minimongo][mm]	[RethinkDB][lcr], [mWater/minimongo] (fork, not ws but http, browserify)	Imitate successful db query on client before it is done.
Isomorphic Code	[isobuild] & isopacks	browserify	Write one code for server/client/mobile.
Isomorphic Packaging	[isobuild], atmosphere		No more separate packages for server & client. Get bower + npm + mobile.

andersr

#Intro to Meteor JS

The app we'll be building

• Meteor CRUD
• Instructions

Resources

• A very brief intro to Meteor
• QuickVote Demo App
• Meteor Growing Pains Example: Main router package not being maintained

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

PurpleBooth

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites