Skip to content

Instantly share code, notes, and snippets.

View siggiarni's full-sized avatar

Sigurður Árni Svanbergsson siggiarni

17 followers · 8 following
  • Iceland
View GitHub Profile
@hdragomir
hdragomir / sm-annotated.html
Last active February 2, 2025 02:22
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
<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);
@scottjehl
scottjehl / noncritcss.md
Last active August 12, 2023 16:57
Comparing two ways to load non-critical CSS

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

@simevidas
simevidas / transition-flex
Last active August 29, 2015 14:01
// Hey! Listen!
// The above slide animation is transition:flex.
// No hard-coded px/% width values!
@media (min-width: 800px)
.services
display flex
.services__item
flex 1
transition flex .25s ease-in-out .1s
@siggiarni
siggiarni / LESS.sublime-settings
Last active November 9, 2018 10:15
Misc Sublime text settings
// Sublime menu > Preferences > Package Settings > LESS > Settings - User
{
"extensions":
[
"less.css"
]
}
@markgoodyear
markgoodyear / 01-gulpfile.js
Last active May 5, 2023 03:21
Comparison between gulp and Grunt. See http://markgoodyear.com/2014/01/getting-started-with-gulp/ for a write-up.
/*!
* gulp
* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
@kenrett
kenrett / Selenium Cheat Sheet.md
Last active July 31, 2024 20:56
Selenium Cheat Sheet - Ruby

#Getting Started

##Webpage:

<html>
<head>
    <title>Testing with Ruby and Selenium WebDriver</title>
</head>
 
<body bgcolor="antiquewhite">
@PaulKinlan
PaulKinlan / criticalcss-bookmarklet-devtool-snippet.js
Last active March 12, 2025 01:22
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(": ");
@avar
avar / things-to-do-in-iceland.md
Last active June 27, 2023 18:31
Recommendations for things to do in Iceland

I get asked by people wanting to visit Iceland what they should do while they're there. Rather than re-type (and mostly forget) the whole thing I just give them a link to this.

Stuff that isn't this guide

...as if you didn't know how to use Google.

  • I'm partial to The Lonely Planet guides whenever I visit other places. I haven't checked the one for Iceland but it's probably
@davidtheclark
davidtheclark / isElementInViewport.js
Created May 4, 2013 02:00
JavaScript: Is element in viewport?
/*
No jQuery necessary.
Thanks to Dan's StackOverflow answer for this:
http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
*/
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
@stowball
stowball / wp8-ie10-fix.js
Last active April 17, 2022 19:09
Microsoft's stop-gap solution to fix IE 10 & 11's viewport on Windows Phone 8. I've also added another condition so it won't run on other browsers that spoof the user agent. Details: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();