Skip to content

Instantly share code, notes, and snippets.

Rasmus Thulstrup thulstrup

Block or report user

Report or block thulstrup

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active Jan 24, 2020
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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
View bling.js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
@jlong
jlong / uri.js
Created Apr 20, 2012
URI Parsing with Javascript
View uri.js
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"
@pburtchaell
pburtchaell / styles.css
Last active Dec 26, 2019
VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices.
View styles.css
/**
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
*
* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
* the height of element `.foo` —which is a full width and height cover image.
*
* iOS Resolution Quick Reference: http://www.iosres.com/
*/
@soffes
soffes / perferences.json
Created Aug 22, 2012
My Sublime Text 2 config
View perferences.json
{
"bold_folder_labels": true,
"color_scheme": "Packages/User/Espresso Soda.tmTheme",
"ensure_newline_at_eof_on_save": true,
"file_exclude_patterns":
[
".DS_Store",
".gitkeep",
"dump.rdb"
],
@necolas
necolas / README.md
Last active Dec 23, 2019
Experimenting with component-based HTML/CSS naming and patterns
View README.md

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name
@ddemaree
ddemaree / _retina.scss
Created Apr 26, 2013
Example Sass mixin for a "bulletproof" Hi-DPI media query
View _retina.scss
@mixin retina($ratio: 1.5) {
$dpi: $ratio * 96;
$opera-ratio: $ratio * 100;
@media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}),
only screen and ( -o-min-device-pixel-ratio: '#{$opera-ratio}/100'),
only screen and ( min-resolution: #{$dpi}dpi),
only screen and ( min-resolution: #{$ratio}dppx) {
@content;
}
@pjkix
pjkix / css-stats-ack.sh
Created Oct 5, 2011
shell script to generate some css file statistics
View css-stats-ack.sh
#!/bin/bash
## v1.0.6
## this script will gernerate css stats
### example output
# CSS STATS
# ----------
# Floats: 132
View _media-queries.scss
// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break
@jimmynotjim
jimmynotjim / more-mute-regex.md
Created Jul 19, 2012 — forked from imathis/tweetbot-mute-regex.md
Tweetbot can use regular expressions to mute tweets in your timeline and mentions.
View more-mute-regex.md

##Simply annoying Tweets

Annoyingly extended words (4+ of the same letter in a phrase): OOOOHHHHMMMMYYYYGGGGOOOODDDD

([a-z])/1{4}

Tweet w/ just a single hashtag: #omgthissucks

^ *#[^ ]+$
You can’t perform that action at this time.