Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
What forces layout/reflow. The comprehensive list.

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@paulirish
paulirish / how-to-view-source-of-chrome-extension.md
Last active April 25, 2024 04:16
How to view-source of a Chrome extension

Option 1: Command-line download extension as zip and extract

extension_id=jifpbeccnghkjeaalbbjmodiffmgedin   # change this ID
curl -L -o "$extension_id.zip" "https://clients2.google.com/service/update2/crx?response=redirect&os=mac&arch=x86-64&nacl_arch=x86-64&prod=chromecrx&prodchannel=stable&prodversion=44.0.2403.130&x=id%3D$extension_id%26uc" 
unzip -d "$extension_id-source" "$extension_id.zip"

Thx to crxviewer for the magic download URL.

@Mikulas
Mikulas / gist:a5b95be4e4858c63b332
Last active December 3, 2018 11:15
PostgreSQL UTF-8 to ASCII folding and webalize
CREATE EXTENSION unaccent;
CREATE OR REPLACE FUNCTION webalize(varchar) RETURNS text AS $$
SELECT trim(both '-' from regexp_replace(lower(unaccent($1)), '[^a-z0-9]+', '-', 'g'));
$$ LANGUAGE SQL;
SELECT unaccent('Příliš žlutý kůň 91. stupeň!');
-- Prilis zluty kun 91. stupen!
SELECT webalize('Příliš žlutý kůň 91. stupeň!');
@pburtchaell
pburtchaell / styles.css
Last active February 25, 2024 12:24
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.
/**
* 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/
*/
@jmar777
jmar777 / debugging-node-elastic-beanstalk-woes
Created February 28, 2014 22:32
Debugging "Failed to run npm install. Snapshot logs for more details." on Elastic Beanstalk
First, we need to figure out what the actual error is. This is obviously frustrating given that the error message is intentionally truncating it.
1) SSH in to your node (various guides available for this if you're not already familiar with this).
2) Run this command (basically an Elastic Beanstalk wrapper command for npm install I found in a blog post [1]):
$ sudo /opt/elasticbeanstalk/containerfiles/ebnode.py --action npm-install 2
3) Find the actual error message in the output from the npm install.
Once you know the error, it should hopefully be fairly obvious how to fix it. I've run into two different errors over the last couple days on Elastic Beanstalk:
The first was a dependency that was using the new "^X.Y.Z" version syntax, which is only supported in Node >= v0.10.26 (whereas Elastic Beanstalk only supports up to v0.10.21 as of today). The solution here was easy: hardcode a dependency version *prior* to when that dependency adopted to the new syntax.
@mathisonian
mathisonian / index.js
Last active July 25, 2023 21:42
postgres full text search in sequelize.js. see this blog post for more information http://www.mathisonian.com/weblog/postgres-full-text-search-with-sequelizejs
var Sequelize = require('sequelize');
module.exports = function(config) {
var models = {};
sequelize = new Sequelize(config.database, config.username, config.password, config.options);
// Bootstrap models
fs.readdirSync(__dirname).forEach(function (file) {
@bhollis
bhollis / checkerboard.js.coffee
Created November 28, 2013 02:31
Three.js snippet for creating a checkerboard plane. Good for use as a floor in demos.
# Build a checkerboard colored square plane with "segments" number of tiles per side.
# Using three.js v62
checkerboard = (segments=8) ->
geometry = new THREE.PlaneGeometry(100, 100, segments, segments)
materialEven = new THREE.MeshBasicMaterial(color: 0xccccfc)
materialOdd = new THREE.MeshBasicMaterial(color: 0x444464)
materials = [materialEven, materialOdd]
for x in [0...segments]
for y in [0...segments]
@cosmocatalano
cosmocatalano / instagram_scrape.php
Last active August 6, 2023 07:32
Quick-and-dirty Instagram web scrape, just in case you don't think you should have to make your users log in to deliver them public photos.
<?php
//returns a big old hunk of JSON from a non-private IG account page.
function scrape_insta($username) {
$insta_source = file_get_contents('http://instagram.com/'.$username);
$shards = explode('window._sharedData = ', $insta_source);
$insta_json = explode(';</script>', $shards[1]);
$insta_array = json_decode($insta_json[0], TRUE);
return $insta_array;
}
@jayj
jayj / flexbox.less
Last active November 20, 2023 04:51
CSS3 Flexbox - LESS Mixins
// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------
// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
display: ~"-webkit-@{display}";
display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
@danopia
danopia / database.yml
Created April 25, 2011 04:19
Default SQLite database.yml
# SQLite version 3.x
# gem install sqlite3-ruby (not necessary on OS X Leopard)
development:
adapter: sqlite3
database: db/development.sqlite3
pool: 5
timeout: 5000
# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".