AimeeKnight

• Gecko Reflow Visualization
• css-stacking-contexts-wtf
• critical-rendering-path
• why-do-browsers-match-css-selectors-from-right-to-left
• getting-started-with-the-webkit-layout-code
• improving-css-performance-fixed-position-elements
• BlinkOn 5: Paint and Compositing Deep Dive
• a-quick-overview-of-chromes-rendering-path
• [render-blocking-css](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-b

nrollr

Install MySQL on macOS Sierra

This procedure explains how to install MySQL using Homebrew on macOS Sierra 10.12

Install Homebrew

• Installing Homebrew is effortless, open Terminal and enter :
  $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
• Note: Homebrew will download and install Command Line Tools for Xcode 8.0 as part of the installation process.

Install MySQL

At this time of writing, Homebrew has MySQL version 5.7.15 as default formulae in its main repository :

learncodeacademy

//events - a super-basic Javascript (publish subscribe) pattern

var events = {
  events: {},
  on: function (eventName, fn) {
    this.events[eventName] = this.events[eventName] || [];
    this.events[eventName].push(fn);
  },
  off: function(eventName, fn) {
    if (this.events[eventName]) {

MichalZalecki

/* VT100 terminal reset (<ESC>c) */

console.log('\033c');

/* numbers comparations */

> '2' == 2
true

> '2' === 2

bobbygrace

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

---

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

mathisonian

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5

inspiration

omo

HTML Imports: Discussion over Async/Progressive Loading

There are concerns around HTML Imports that does sync or blocking loading as the default. I’d like to address these concerns. Especially I’d like to understand the actual use cases that “sync” loading hurts. This document aims to be a portal of that effort.

What to Block

Before discussing use cases, let’s clarify which part of page loading process HTML Imports possibly blocks. The blocking model of HTML Imports is modeled after the one for external stylesheets. There are two main bits of the blocking:

The <script> elements

MattSurabian

/**
 * GoogleMapsAPI Loader Module
 * 
 * Returns a promise that resolves with the google.maps object when all of the google maps api loading process is complete
 * 
 * Example Usage:
 *
 * 	define([ 'app/lib/google-maps-loader' ], function(GoogleMapsLoader){
 * 		GoogleMapsLoader.done(function(GoogleMaps){
 *			// your google maps code here!

ebidel

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

• Custom Elements
• HTML Imports
• Shadow DOM
• CSS Scoping Module