Skip to content

Instantly share code, notes, and snippets.

Avatar

sunpietro sunpietro

View GitHub Profile
@lgladdy
lgladdy / grunt-sitemap.php
Created Apr 13, 2014
Grunt Sitemap Generator plugin for Wordpress
View grunt-sitemap.php
<?php
/**
* Plugin Name: Grunt Sitemap Generator
* Plugin URI: http://www.github.com/lgladdy
* Description: Generate a JSON list of every page on a site so it can be used with grunt and uncss. Create a folder in /wp-content called mu-plugins, and drop this code into that folder, as grunt-sitemap.php
* Author: Liam Gladdy
* Author URI: http://gladdy.co.uk
* Version: 1.0
*/
@hdragomir
hdragomir / sm-annotated.html
Last active Mar 16, 2021
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
View sm-annotated.html
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
View javascriptmediaqueries
// HTML:
<div class="display-type"></div>
// CSS:
// set the content of an element depending on the media query
@nikcorg
nikcorg / berlin-jsconf-2014.md
Last active Aug 2, 2020
Slide decks of JSConf 2014
View berlin-jsconf-2014.md
@addyosmani
addyosmani / README.md
Last active May 10, 2021 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
View README.md

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

@joakimbeng
joakimbeng / test_runner.js
Last active Jul 12, 2020
A small and simple Javascript test runner
View test_runner.js
/**
* A Javascript test runner in 20 lines of code
* From http://joakimbeng.eu01.aws.af.cm/a-javascript-test-runner-in-20-lines/
*/
(function () {
// The test queue:
var tests = [];
// Function to add tests:
this.test = function test (name, cb) {
@stryju
stryju / _intro.md
Last active Aug 29, 2015
something something **es6**
View _intro.md

something something es6

a bit cleaned up version of my "slides"

disclaimer: this "talk" was done to show some "real life use cases" to simplify the knowledge I mainly got from Axel Rauschmayer's articles

why "destructring is a good way to go"

@xinan
xinan / material-theme.itermcolors
Created Aug 1, 2015
Material Theme iTerm2 Port
View material-theme.itermcolors
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Ansi 0 Color</key>
<dict>
<key>Blue Component</key>
<real>0.25882352941176467</real>
<key>Green Component</key>
<real>0.21176470588235294</real>
@paulirish
paulirish / what-forces-layout.md
Last active May 11, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
@Rich-Harris
Rich-Harris / service-workers.md
Last active May 3, 2021
Stuff I wish I'd known sooner about service workers
View service-workers.md

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.