Skip to content

Instantly share code, notes, and snippets.

@jamiebuilds
jamiebuilds / tradeoffs-in-value-derived-types-in-typescript.md
Last active December 16, 2022 17:21
Value-derived types in TypeScript are super powerful, but you should be thoughtful in how/when you use them

Tradeoffs in value-derived types in TypeScript

Many of the more "advanced" typescript features can be used for creating "value-derived" types.

At its simplest form:

let vehicle = { name: "Van", wheels: 4 }
@jbellenger
jbellenger / NamedChunksPlugin.js
Last active July 21, 2017 15:36
named chunks
// All webpack chunks have an identifier that is written to both the chunk and
// the chunk manifest.
//
// By default, webpack uses "int" identifiers, where the identifiers are
// sequentially generated after chunks are ordered by OccurenceOrderPlugin.
//
// The result of this is that small code changes may cause chunks to be
// reordered, leading to a cascading change of chunk ids, and a large number of
// chunk rehashes that could have been avoided.
//
@fdecampredon
fdecampredon / Container.js
Last active August 27, 2017 17:04
redux-relay
import React from 'react';
import { container } from 'redux-relay';
@container({
variablesFromState: (state) => ({myVariable: state.myState})
fragments: {
Relay.QL`
viewer {
@lambdahands
lambdahands / _readme.md
Created September 28, 2015 17:09
FlowType and CSS Modules

Huh?

So basically FlowType doesn't know about CSS Modules, a really handy way of dealing with the plagues of CSS in codebases (global variables and dependency wackiness mainly).

What WebPack allows us to do is "require" CSS files and use their class names:

import styles from "my_styles.css";
import React from "react";
@paulirish
paulirish / what-forces-layout.md
Last active March 28, 2024 11:45
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
@trodrigues
trodrigues / gist:6cbe73943baae57e2e2a
Created April 6, 2015 16:24
Mocking all sorts of stuff in angular (assumes lodash exists)
var mocks = angular.module('yourapp/mocks', []);
mocks.config(['$provide', '$controllerProvider', function ($provide, $controllerProvider) {
$provide.stubDirective = function (name, definition) {
$provide.factory(name + 'Directive', function () {
return [_.extend({
name: name,
restrict: 'A',
priority: 0,
}, definition)];
@bobbygrace
bobbygrace / trello-css-guide.md
Last active February 13, 2024 14:31
Trello CSS Guide

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?

@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active January 16, 2024 01:17
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@vdel26
vdel26 / nginx
Last active March 16, 2023 20:31
Openresty init.d script
#!/bin/sh
#
# chkconfig: 2345 55 25
# Description: Nginx init.d script, put in /etc/init.d, chmod +x /etc/init.d/nginx
# For Debian, run: update-rc.d -f nginx defaults
# For CentOS, run: chkconfig --add nginx
#
### BEGIN INIT INFO
# Provides: nginx
# Required-Start: $all
<!doctype html>
<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->
<html>
<head>
<title>iOS 8 web app</title>
<!-- CONFIGURATION -->