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) {

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

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

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

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

alexanderson1993

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

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