Skip to content

Instantly share code, notes, and snippets.

View webstandardcss's full-sized avatar

Trey Brister webstandardcss

View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active August 24, 2026 13:06
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
@PurpleBooth
PurpleBooth / README-Template.md
Last active August 16, 2026 01:24
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

@AllThingsSmitty
AllThingsSmitty / css-not.scss
Last active November 28, 2018 16:16
Use CSS :not() instead of applying and unapplying borders on navigations
.nav-tab {
...
// instead of putting it on
border-right: 1px solid #424242;
&:last-child {
border-right: 0; // and then taking it off
}
// use CSS not() to only apply to the elements you want
&:not(:last-child) {
border-right: 1px solid #424242;
@jorinvo
jorinvo / challenge.md
Last active November 19, 2024 02:40
This is a little challenge to find out which tools programmers use to get their everyday tasks done quickly.

You got your hands on some data that was leaked from a social network and you want to help the poor people.

Luckily you know a government service to automatically block a list of credit cards.

The service is a little old school though and you have to upload a CSV file in the exact format. The upload fails if the CSV file contains invalid data.

The CSV files should have two columns, Name and Credit Card. Also, it must be named after the following pattern:

YYYYMMDD.csv.

@imjasonh
imjasonh / markdown.css
Last active September 3, 2025 22:12
Render Markdown as unrendered Markdown (see http://jsbin.com/huwosomawo)
* {
font-size: 12pt;
font-family: monospace;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: black;
cursor: default;
}
@webstandardcss
webstandardcss / pedantically_commented_playbook.yml
Last active June 12, 2025 07:15 — forked from phred/pedantically_commented_playbook.yml
Insanely complete Ansible playbook, showing off all the options.
---
# ^^^ YAML documents must begin with the document separator "---"
#
#### Example docblock, I like to put a descriptive comment at the top of my
#### playbooks.
#
# Overview: Playbook to bootstrap a new host for configuration management.
# Applies to: production
# Description:
# Ensures that a host is configured for management with Ansible.
'use strict';
var React = require('react-native');
var {
Bundler,
StyleSheet,
Text,
TouchableHighlight,
View,
ScrollView,
@runexec
runexec / Clojure Does Objects Better.clj.md
Last active June 17, 2020 03:47
Clojure Does Objects Better

Clojure does Objects Better

A hopefully short and concise explanation as to how Clojure deals with Objects. If you already write Clojure, this isn't for you.

You know what an Interface is if you write/read Java or PHP 5+. In Clojure it might be called defprotocol.

user> (defprotocol IABC
        (also-oo [this])
        (another-fn [this x]))

IABC

@jsomers
jsomers / websters-chrome.md
Created November 10, 2014 14:20
Adding Webster's as a Chrome search engine

Instructions courtesy of @chancelionheart:

  1. Access the Settings menu by clicking the Options icon in the upper-right corner of the browser window. It is the icon with three horizontal lines stacked on top of each other. Click on “Settings” near the bottom of the Options menu.

  2. Under the “Search” heading in the Settings menu, click the "Manage search engines" button.

  3. At the bottom of the Search Engines window that comes up, enter the following: Name: Use whatever you like (I used "Webster's Revised 1913+1928 Dictionary") Keyword: Also whatever you like, I just use 'd' for easy access. Url: http://machaut.uchicago.edu/?resource=Webster%27s&word=%s&use1913=on&use1828=on (replaces the search term with %s, what google chrome uses for the query)