alexanderson1993

import {
  React,
} from "https://unpkg.com/es-react";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      h1: any;
      div: any;
      h2: any;

luke-john

Glamorous Styleguide

This is a simplified version of the Code Styleguide used at Seven West Media where we use Glamorous for styles on https://thewest.com.au and http://www.perthnow.com.au

Setup

All styled items should have a separate file in the componets folder named according to the component name e.g. heading.styled.tsx Sub-components should exist in a separate folder with the components folder called component If there is more than one component, components should be put into their own files

paulirish

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

josepmartins

# Inline svg from @tomeara https://gist.github.com/tomeara/6515860
def inline_svg(path)
  file = File.open("app/assets/images/#{path}", "rb")
  raw file.read
end

# Use SVG internal link
def use_svg(clazz)
  content_tag(:svg, content_tag(:use, "", { "xlink:href" => '#icon-' + clazz }), class: "icon icon-#{clazz}")
end

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

branneman

//
// SVG — hasClass, addClass, removeClass, toggleClass
//  Source:
//   https://gist.github.com/branneman/8436956
//  Taken and adapted from:
//   http://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/
//

if (SVGElement && SVGElement.prototype) {

zenorocha

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 14,

    // font family with optional fallbacks

stevesouders

// ActiveTable - a bookmarklet to make tables sortable and editable

function init() {
	var aHrows = getHrows();
	var numHrows = aHrows.length;

	var aHidden = getHiddenColumns();
	ATpopup = document.createElement("div");
	ATpopup.style.cssText = "position: absolute; visibility: hidden; padding: 0; font-family: Arial; background-color: rgba(255, 255, 255, 0.9); border-radius: .5em; text-align: center; box-shadow: .05em .05em .5em #00C;";
	ATpopup.innerHTML = "<a href='sort' title='sort' onclick='sortColumn(); return false'><img border=0 src='http://stevesouders.com/images/sort_up_down.png' style='padding-top: 0.2em;'></a><br><a href='hide' style='color: #C00; font-family: monospace; font-size: 1.5em; text-decoration: none;' title='hide' onclick='hideColumn(); return false'>x</a>"; // TODO - use protocol-less URL for img

dergachev

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

nickawalsh

@import compass

$icons: sprite-map("icons/*.png")
$icons-hd: sprite-map("icons-hd/*.png")

i
  background: $icons
  display: inline-block
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
    background: $icons-hd