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>

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) => `

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

treyhoover

import { useState, useMemo } from "react";

// Usage example (booleans)
const userActivity = useStatus([true, false]);
userActivity.status; // true
userActivity.toggle();
userActivity.setTrue();
userActivity.setFalse();
userActivity.reset();

developit

const express = require('express');
const { html, Component } = require('htm/preact');
const renderToString = require('preact-render-to-string');

class App extends Component {
  render(props) {
    return html`
      <div class="app">
        <h1>This is an app</h1>
        <p>Current server time: ${new Date + ''}</p>