Skip to content

Instantly share code, notes, and snippets.

Avatar
📝
Blogging furiously

Robin Rendle robinrendle

📝
Blogging furiously
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active Jan 16, 2021
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.

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
View 20111011_SteveYeggeGooglePlatformRant.md

Stevey's Google Platforms Rant

I was at Amazon for about six and a half years, and now I've been at Google for that long. One thing that struck me immediately about the two companies -- an impression that has been reinforced almost daily -- is that Amazon does everything wrong, and Google does everything right. Sure, it's a sweeping generalization, but a surprisingly accurate one. It's pretty crazy. There are probably a hundred or even two hundred different ways you can compare the two companies, and Google is superior in all but three of them, if I recall correctly. I actually did a spreadsheet at one point but Legal wouldn't let me show it to anyone, even though recruiting loved it.

I mean, just to give you a very brief taste: Amazon's recruiting process is fundamentally flawed by having teams hire for themselves, so their hiring bar is incredibly inconsistent across teams, despite various efforts they've made to level it out. And their operations are a mess; they don't real

@mirisuzanne
mirisuzanne / cq.css
Last active Jan 11, 2021
Thoughts on Container Queries
View cq.css
/*
This is not meant to be a final CSSWG proposal,
but reflects my immediate thoughts after reading
[David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft.
This gist was created to demonstrate my idea for removing selectors from his query syntax.
More of my thoughts & notes are online at css.oddbird.net/rwd/
*/
main,
@marcedwards
marcedwards / high-dpi-media.css
Last active Jan 10, 2021
A CSS media query that captures almost all high DPI aware devices.
View high-dpi-media.css
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
@sergejmueller
sergejmueller / ttf2woff2.md
Last active Jan 8, 2021
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
View ttf2woff2.md
View trello-css-guide.md

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets


Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

View 1_Tiny_Content_Framework.md

Tiny Content Framework

About the project

This is a tiny content strategy framework focused on goals, messages, and branding. This is not a checklist. Use what you need and scrap the rest. Rewrite it or add to it. These topics should help you get to the bottom of things with clients and other people you work with.

Give me feedback on Twitter (@nicoleslaw) or by email (nicole@nicolefenton.com).

Contents

@davatron5000
davatron5000 / Sublime Text Setup.md
Last active Oct 2, 2020
A new user's guide to SublimeText 2. Estimated reading time: 2 mins. Estimated workthrough time: 12 minutes.
View Sublime Text Setup.md

Make it useful

  • Install Package Control. For SublimeText 2, paste the following in Terminal:
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. +Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

@gruber
gruber / make_bookmarklet.pl
Last active Sep 4, 2020
JavaScript Bookmarklet Builder
View make_bookmarklet.pl
#!/usr/bin/env perl
#
# http://daringfireball.net/2007/03/javascript_bookmarklet_builder
use strict;
use warnings;
use URI::Escape qw(uri_escape_utf8);
use open IO => ":utf8", # UTF8 by default
":std"; # Apply to STDIN/STDOUT/STDERR
@futurefabric
futurefabric / gif_animation_example.pde
Last active Sep 1, 2020
Example code to create an animation and image sequence
View gif_animation_example.pde
// Example code from http://futurefabric.co.uk/mooooooving
// Based on the work of Dave Whyte — http://beesandbombs.tumblr.com
int[][] result;
float t;
void setup() {
setup_();
You can’t perform that action at this time.