Skip to content

Instantly share code, notes, and snippets.

@dornfeder
dornfeder / Readme.md
Last active Sep 14, 2021
Git Branching Diagram Template
View Readme.md

Git Branching Diagram Template for diagrams.net

This is my own variant of a git branching diagram template based on Bryan Braun's great template.

You can use this diagram as a template to create your own git branching diagrams. Here's how:

  1. Create a new diagram with diagrams.net (formerly draw.io)
  2. Go to File > Open From > URL
  3. Insert this url (it points to the xml data below): https://gist.githubusercontent.com/dornfeder/13abff279de357f048e474d4ed6c692d/raw/f5efc838bd34429e59e38063bd348b7a86457d18/git-diagram-template.xml
  4. Customize as needed for your team.
@bessfernandez
bessfernandez / setting-up-html-storybook-app.md
Last active Sep 12, 2021
How to setup a simple Storybook HTML demo app
View setting-up-html-storybook-app.md

icon-storybook-default

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

View Poor Man's Style Guide
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>
View AnchorJS.js
<script>
/**
* Example 1
*/
anchors.options = {
placement: 'right',
visible: 'hover',
};
@wiledal
wiledal / template-literals-3-for-loops.js
Last active Mar 26, 2021
Template Literals example: For loops
View template-literals-3-for-loops.js
/*
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) => `
@matthewmueller
matthewmueller / osx-for-hackers.sh
Last active May 21, 2021
OSX for Hackers (Mavericks/Yosemite)
View osx-for-hackers.sh
# OSX for Hackers (Mavericks/Yosemite)
#
# Source: https://gist.github.com/brandonb927/3195465
#!/bin/sh
# Some things taken from here
# https://github.com/mathiasbynens/dotfiles/blob/master/.osx
# Ask for the administrator password upfront
@jordanmoore
jordanmoore / Better Emmet Media Queries
Created Nov 18, 2013
Go to Preferences > Browse Packages > Emmet > Emmet.sublime-settings and add this between the curly brackets under snippets for writing better media queries quickly in Emmet. mqm => min-width media query mqx => max-width media query
View Better Emmet Media Queries
"css": {
"abbreviations": {
"mqm": "@media screen and (min-width:${1}) {\n\t|\n}",
"mqx": "@media screen and (max-width:${1}) {\n\t|\n}"
}
}
@tomeara
tomeara / inline_svg_helper.rb
Last active Oct 25, 2019
Inline SVG for Rails
View inline_svg_helper.rb
# 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
@richardscarrott
richardscarrott / box.css
Last active Aug 7, 2021
Fading an element in from display: none; with CSS transitions.
View box.css
.box {
display: block;
background: red;
width: 200px;
height: 200px;
opacity: 1;
}
.box-hidden {
display: none;
@willurd
willurd / web-servers.md
Last active Sep 17, 2021
Big list of http static server one-liners
View web-servers.md

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000