manbearwolf

<script>
  
/**
 * Example 1
 */
anchors.options = {
  placement: 'right',
  visible: 'hover',
};

tomeara

# Put this method in your helper file to render inline SVG

def inline_svg(path)
  file = File.open("app/assets/images/#{path}", "rb")
  raw file.read
end

IanLunn

/* sample cubic beziers */
linear = [0.250, 0.250, 0.750, 0.750];
ease = [0.250, 0.100, 0.250, 1.000];
easeIn = [0.420, 0.000, 1.000, 1.000];
easeOut = [0.000, 0.000, 0.580, 1.000];
easeInOut = [0.420, 0.000, 0.580, 1.000];

function reverseCubicBezier(cubicBezier) {
  return [
    1 - cubicBezier[2],

hotzenklotz

#!/bin/bash

# use imagemagick to merge all images in a folder to produce a spritesheet
# use conver -append for vertical stacking and
# convert +append for horizontal

if [ $# -gt 0 ]
then

    if [ $2 ]

jordanmoore

		"css": {
			"abbreviations": {
				"mqm": "@media screen and (min-width:${1}) {\n\t|\n}",
				"mqx": "@media screen and (max-width:${1}) {\n\t|\n}"
			}
		}

MariaJackson1

bryanbraun/poor-mans-styleguide

https://www.poormansstyleguide.com/


<h1 id="headings">Headings</h1>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

richardscarrott

.box {
	display: block;
	background: red;
	width: 200px;
	height: 200px;
	opacity: 1;
}

.box-hidden {
	display: none;

bessfernandez

Storybook for HTML

Storybook is all about writing stories. A story usually contains a single state of one component, almost like a visual test case.

Typically you see Storybook used for React or other frameworks, but the library has recently introduced the option to use HTML for your Storybook projects. As a prototyping tool or playground this is great! No larger scale knowledge of other frameworks needed.

Install Storybook HTML

wiledal

/* 
  Template literals for-loop example
  Using `Array(5).join(0).split(0)`, we create an empty array 
  with 5 items which we can iterate through using `.map()`
*/

var element = document.createElement('div')
element.innerHTML = `
  <h1>This element is looping</h1>
  ${Array(5).join(0).split(0).map((item, i) => `

olivierlacan

Screencasting Framework

The following document is a written account of the Code School screencasting framework. It should be used as a reference of the accompanying screencast on the topic.

Why you should care about screencasting?

You're probably aren't going to take the time to read this document if you're not interested, but there are a lot of nice side effects caused by learning how to create quality screencasts.

1. Communicating more effectively - At Envy Labs we produce screencasts for our clients all the time. Whether it's demoing a new feature or for a presentation for an invester, they're often much more effective and pleasent than a phone call or screen sharing.