Skip to content

Instantly share code, notes, and snippets.

View 7studio's full-sized avatar

Xavier Zalawa 7studio

View GitHub Profile
@thom4parisot
thom4parisot / README.md
Last active August 29, 2015 14:06
Node.js usual project directory structure.
├── bin
├── config
├── data
├── dist
├── doc
├── lib
│   └── models
├── node_modules
├── src
@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:

module Sass::Script::Functions
def file_exists(path)
return bool(false) unless options[:filename] # not all sass has a file name (e.g. std input)
current_directory = File.dirname(options[:filename]) rescue nil # a sass filename from an importer may not be processable by File.dirname
return bool(false) unless current_directory && File.exist?(current_directory) # not all sass files are served from the filesystem
full_path = File.expand_path(path.value, current_directory) # a relative path will be expanded against the current_directory of the sass file, symlinks will be followed, absolute paths will be left alone.
return bool(File.exist?(full_path))
end
end
.initial
.top-banner-ad-container
.top-banner-ad-container--desktop
.top-banner-ad-container--facia-layout
.ad-slot

Devices

iPhone
GT-I9300
SAMSUNG GT-I9505
HTC One
Lumia 520
iPad
GT-I9100
GT-I9505
Lumia 920

var isArray = function (obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
};
@bpierre
bpierre / hash.js
Created February 23, 2014 17:56
Mini location.hash system + mini routing system (useful with PhoneGap)
/*
* Mini location.hash update system
*
* Usage:
*
* var createHash = require('./hash');
* var hash = createHash('!/', function(value) {
* // Value updated
* });
*
@sturobson
sturobson / gulpfile.js
Last active October 9, 2020 13:01
My gulpfile.js (so far, so simple). Compiles Sass (removes erroneous _partial compilation), autoprefixes the CSS then minifies the CSS into the folder 'dist/CSS'. Uglifys JS into the foloder 'dist/JS'. Minifys SVGs using SVGO, Minifys images with imagemin. Adds gulp-size to calculate project size. Runs development and production tasks
// Deep Breaths //
//////////////////
// Gulp
var gulp = require('gulp');
// Sass/CSS stuff
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
@sindresorhus
sindresorhus / post-merge
Last active May 2, 2024 03:18
git hook to run a command after `git pull` if a specified file was changed.In this example it's used to run `npm install` if package.json changed and `bower install` if `bower.json` changed.Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.
#!/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com
# git hook to run a command after `git pull` if a specified file was changed
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
check_run() {
echo "$changed_files" | grep --quiet "$1" && eval "$2"
@kaelig
kaelig / SassMeister-input-HTML.html
Created December 16, 2013 12:14
Generated by SassMeister.com.
<h1>Row test</h1>
<!--[if (lte IE 9) & (!IEMobile)]>
<div class="old-ie">
<![endif]-->
<!-- items: 2 -->
<div class="l-row l-row--items-2">
<div class="l-row__item l-row__item--boost-1">1+</div>
<div class="l-row__item">2</div>
</div>