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 Oct 16, 2019
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;
@pburtchaell
pburtchaell / styles.css
Last active Oct 10, 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/
*/
@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

^ *#[^ ]+$
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
@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"
@twosixcode
twosixcode / gist:1988097
Created Mar 6, 2012
Make "Paste and Indent" the default paste in Sublime Text 2
View gist:1988097
// swap the keybindings for paste and paste_and_indent
{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }
@jacine
jacine / template.php
Created Nov 19, 2011
Bye, bye region.tpl.php and block--system--main.tpl.php
View template.php
<?php
/**
* Implements hook_page_alter().
*/
function mytheme_page_alter(&$page) {
// Remove all the region wrappers.
foreach (element_children($page) as $key => $region) {
if (!empty($page[$region]['#theme_wrappers'])) {
$page[$region]['#theme_wrappers'] = array_diff($page[$region]['#theme_wrappers'], array('region'));
@necolas
necolas / README.md
Last active Aug 29, 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
@tlrobinson
tlrobinson / redux-devtools-separate-window.js
Last active Aug 20, 2019
Put the awesome redux-devtools in it's own window so it doesn't obscure or be obscured by your application
View redux-devtools-separate-window.js
// give it a name so it reuses the same window
var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
// reload in case it's reusing the same window with the old content
win.location.reload();
// wait a little bit for it to reload, then render
setTimeout(function() {
React.render(
<DebugPanel top right bottom left >
You can’t perform that action at this time.