Skip to content

Instantly share code, notes, and snippets.

View chriswrightdesign's full-sized avatar

Chris Wright chriswrightdesign

View GitHub Profile
@Rich-Harris
Rich-Harris / service-workers.md
Last active July 10, 2024 17:04
Stuff I wish I'd known sooner about service workers

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.

@MadeByMike
MadeByMike / highlight-words-in-html.js
Last active February 15, 2018 05:24
Highlighting a sentence in HTML without destroying the markup around it is exceptionally hard!!!
/*!
* Highlight words in html - v0.0.1 - 2015-04-29
* http://madebymike.com.au
* Copyright (c) 2015 Mike Riethmuller; Licensed MIT
*/
/*
* It turns out that annotating a phrase within HTML is exceptionally hard. I've done it so you don't have to.
* The function accepts a phrase (string), HTML (string), and optionally a classname (string)
* It returns the same HTML with <mark> elements surrounding the phrase
@janogarcia
janogarcia / email_coding_guidelines.md
Last active July 13, 2024 08:44
Email Coding Guidelines
@kany
kany / sendmail_setup.md
Last active June 3, 2024 20:13
Setup SENDMAIL on Mac OSX Yosemite
@jordanmoore
jordanmoore / Better Emmet Media Queries
Created November 18, 2013 10:08
Go to Preferences > Browse Packages > Emmet > Emmet.sublime-settings and add this between the curly brackets under snippets for writing better media queries quickly in Emmet. mqm => min-width media query mqx => max-width media query
"css": {
"abbreviations": {
"mqm": "@media screen and (min-width:${1}) {\n\t|\n}",
"mqx": "@media screen and (max-width:${1}) {\n\t|\n}"
}
}
CSS OFF
Volume 3—September 2013
Positioning Relatives
In 1958, English pictorial photographer Henry Peach Robinson created the world's first photomontage by combining five different negatives to make one complete print of a young girl on her deathbed. “Fading Away”—Robinson's first and most famous composite photo—depicts a young girl dying of consumption and was controversial when it was exhibited, with many believing it was not a suitable subject for photography.
Box Model
The Barbie doll was invented in 1959 by Ruth Handler (co-founder of Mattel), whose own daughter was called Barbara. Barbie was introduced to the world at the American Toy Fair in New York City. Barbie's job was teenage fashion doll. The full name of the first doll was Barbie Millicent Roberts, from Willows, Wisconsin.
Staying afloat
@klamping
klamping / gist:7104237
Created October 22, 2013 16:59
Build your own CSS regression testing tool
Script to build URLs
https://github.com/cgiffard/node-simplecrawler
Script to build CSS selector file
https://github.com/caplin/SuperSelector
http://selectorgadget.com/
Script to convert :hover, :focus, etc to .hover, .focus etc
https://github.com/jacobrask/styledocco/blob/master/share/previews.js
Apply for any selectors that match
@PaulKinlan
PaulKinlan / criticalcss-bookmarklet-devtool-snippet.js
Last active April 2, 2024 02:45
CriticalCSS Bookmarklet and Devtool Snippet.js
(function() {
var CSSCriticalPath = function(w, d, opts) {
var opt = opts || {};
var css = {};
var pushCSS = function(r) {
if(!!css[r.selectorText] === false) css[r.selectorText] = {};
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
for(var i = 0; i < styles.length; i++) {
if(!!styles[i] === false) continue;
var pair = styles[i].split(": ");
@jed
jed / how-to-set-up-stress-free-ssl-on-os-x.md
Last active July 10, 2024 14:35
How to set up stress-free SSL on an OS X development machine

How to set up stress-free SSL on an OS X development machine

One of the best ways to reduce complexity (read: stress) in web development is to minimize the differences between your development and production environments. After being frustrated by attempts to unify the approach to SSL on my local machine and in production, I searched for a workflow that would make the protocol invisible to me between all environments.

Most workflows make the following compromises:

  • Use HTTPS in production but HTTP locally. This is annoying because it makes the environments inconsistent, and the protocol choices leak up into the stack. For example, your web application needs to understand the underlying protocol when using the secure flag for cookies. If you don't get this right, your HTTP development server won't be able to read the cookies it writes, or worse, your HTTPS production server could pass sensitive cookies over an insecure connection.

  • Use production SSL certificates locally. This is annoying

Lesson's learnt building the Guardian

Below is a collection of my favourite responses I gathered from Guardian engineers when asked the question: What have you learnt starting from scratch and building a mobile-first next generation web platform for the Guardian?

Daithi O Crualaoich

  • Work with great people.
  • Deploy like crazy. This means the team has to control the infrastructure as well as code.
  • Design is not a service. Designers have to sit in the team.
  • Infrastructure is intrinsically unreliable. Discard and replace is the robust strategy.
  • Use your CDN for HTML too.
  • Don't always do as you are told.