Skip to content

Instantly share code, notes, and snippets.

View williamdodson's full-sized avatar
🏠
Working from home

William Dodson williamdodson

🏠
Working from home
16 followers · 8 following
View GitHub Profile
@tristanisfeld
tristanisfeld / browsersync.js
Last active November 10, 2023 23:58
Gulp 4 - Multifile tasks w/ external config. Basic gulpfile template for use with multiple task files, using gulp-load-plugins
// =========================================================
// Gulp Task: browsersync
// NOTE: Using gulp v4
// Description: Sync sass, typescript, html, and browser
// using external config or add modify src
// npm install --save-dev browser-sync gulp-typescript gulpjs/gulp.git#4.0 gulp-load-plugins
// Options: node-sass gulp-sass || gulp-ruby-sass
// =========================================================
var config = require('../config.js');
var browserSync = require('browser-sync').create();
@averyvery
averyvery / spread.sass
Last active May 16, 2020 22:07
spread.sass
// strip-units required by spread mixin
// http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
@function strip-units($number)
@return $number / ($number * 0 + 1)
// pow and sqrt required by ease function
// adapted from https://github.com/at-import/Sassy-math/blob/master/sass/math.scss
@function pow($base, $exponent)
$value: $base
@Integralist
Integralist / Description.md
Last active April 25, 2020 16:20
This is how BBC News currently implements it's Image Enhancer for responsive images. Note: this is a completely rebuilt version of the code so the BBC's original source code doesn't actually look anything like the below example.

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

  • Create new instance of ImageEnhancer
  • Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
    • We set the width & height HTML attributes of the image to the required size
    • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
    • We then set a class of image-replace onto each newly created transparent image
  • We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe
@elidickinson
elidickinson / max_width_email.html
Created May 6, 2013 15:10
Email Template trick: max-width with outlook
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<div style="max-width:580px; margin:0 auto;">
<p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>
</div>
<!--[if mso]>
@greypants
greypants / README.markdown
Last active October 17, 2023 05:49 — forked from reagent/nav_link.rb
RAILS 3: nav_link helper for adding 'selected' class to navigation elements
@jlong
jlong / uri.js
Created April 20, 2012 13:29
URI Parsing with Javascript
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.search; // => "?search=test"
parser.hash; // => "#hash"
parser.host; // => "example.com:3000"
@peterwilsoncc
peterwilsoncc / 320up.less
Created November 29, 2011 23:53
“Mobile first” CSS and getting LESS to help with legacy IE
.320up(){
.three20 {
color: #fff;
}
} /* end 320up mixin */
/*
@aarongustafson
aarongustafson / responsive-iframes.css
Created October 25, 2011 17:07
Responsive iFrames with jQuery
iframe {
max-width: 100%;
}
@mattwiebe
mattwiebe / responsive-images.php
Created September 21, 2011 23:02
Mobile First Responsive Images for WordPress
<?php
/*
Plugin Name: Mobile First Responsive Images
Description: Serve up smaller images to smaller screens.
Version: 0.1.1
Author: Matt Wiebe
Author URI: http://somadesign.ca/
*/
/**
@adactio
adactio / tabledisplaytest.html
Created August 16, 2011 10:36
Content-first table-display test
<!DOCTYPE html>
<html>
<head>
<title>Table Display test</title>
<style>
@media screen and (min-width: 30em) {
body {
display: table;
caption-side: top;
}