Skip to content

Instantly share code, notes, and snippets.

@webbower
webbower / format.js
Created July 15, 2015 22:46
Simple string formatting function in JS
// Take a string template with {var1} placeholders and replace them with
// matching keys from POJO
function format(str, data) {
data = Object(data);
var re, p;
for (p in data) {
if (has(data, p)) {
re = new RegExp('\\\{' + p + '\\\}', 'g');
@webbower
webbower / .gitconfig
Last active February 21, 2025 19:13
Global Git and ZSh config
[alias]
co = checkout
ci = commit
st = status
br = branch
hist = log --pretty=format:\"%h %ad | %s%d [%an]\" --graph --date=short
type = cat-file -t
dump = cat-file -p
current-branch = rev-parse --abbrev-ref HEAD
cb = rev-parse --abbrev-ref HEAD
@webbower
webbower / frontend-test-concepts.md
Created May 18, 2016 01:11
List of ideas for frontend concepts for interview questions

Frontend Interview Concepts

HTML

CSS

  • CSS position
  • Margin collapsing
  • Display types (inline, block, none, table-*, flex) and what they mean
@webbower
webbower / post-merge
Created May 19, 2016 23:16 — forked from sindresorhus/post-merge
git hook to run a command after `git pull` if a specified file was changed.In this example it's used to run `npm install` if package.json changed and `bower install` if `bower.json` changed.Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.
#!/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com
# https://gist.github.com/sindresorhus/7996717
# git hook to run a command after `git pull` if a specified file was changed
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
check_run() {
@webbower
webbower / generate-text-image.js
Last active October 2, 2021 06:30
Generate an image from text using the Canvas API
function generateImageFromText(text, width, height) {
// TODO Add auto-wrapping logic when text is too wide
// TODO Add tiered text scaling (if height > 200: font-size = 36; else if height > 100: font-size = 18; etc)
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const fontSize = Math.min(height, 36);
ctx.fillStyle = '#212121';
@webbower
webbower / prevent-scroll-modal.css
Last active June 13, 2017 02:12
CSS to prevent body scrolling while a modal is open
body.modal-is-visible {
/* https://stackoverflow.com/a/43677395/2684520 */
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
}
@webbower
webbower / .editorconfig
Created August 19, 2017 17:05
Base EditorConfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
@webbower
webbower / delegate.js
Created September 21, 2017 05:04
Event delegation wrapper/HOF
function delegate(selector, handler) {
return (ev) => {
const tgt = ev.target;
// Check if the event target matches the selector or if it is a descendant
// of the selector
if (tgt.matches(selector) || tgt.matches(`${selector} ${tgt.nodeName.toLowerCase()}`)) {
// Since `ev.target` is the deepest element that triggered the event, it
// won't always match the selector for the delegated event, so we add a
// custom key to the event object for the delegate event target.
handler(Object.assign(ev, { delegateTarget: closest(tgt, selector) }));
const curry = (
f, arr = []
) => (...args) => (
a => a.length === f.length ?
f(...a) :
curry(f, a)
)([...arr, ...args]);
// Unbound native-friendly since you can specify arity (typicaly native.length + 1)
const curry2 = (
@webbower
webbower / emptyNode.js
Created December 2, 2017 21:53
Remove all children from a DOM node
// https://stackoverflow.com/a/3955238/2684520
const emptyNode = (el) => {
while (el.lastChild) {
el.removeChild(el.lastChild);
}
return el;
}