mundi morgado mundizzle

Imperfect Buttons

"Hand-Drawn" border effect on buttons w/CSS border-radius
FYI: There is a bug when rendering the dotted / dashed borders in FF.
Rendering solid borders in FF is fine.

A Pen by Tiffany Rayside on CodePen.

License.

`vs` Questions

http://stackoverflow.com/questions/804115 (rebase vs merge).
https://www.atlassian.com/git/tutorials/merging-vs-rebasing (rebase vs merge)
https://www.atlassian.com/git/tutorials/undoing-changes/ (reset vs checkout vs revert)
http://stackoverflow.com/questions/2221658 (HEAD^ vs HEAD~) (See git rev-parse)
http://stackoverflow.com/questions/292357 (pull vs fetch)
http://stackoverflow.com/questions/39651 (stash vs branch)
http://stackoverflow.com/questions/8358035 (reset vs checkout vs revert)

Lightning Talk proposal for ReactiveConf 2017 http://www.reactiveconf.com #ReactiveConf

Porting Prezi to Elm in 99 lines of code

Elm is a statically-typed functional programming language. Its compiler produces safe JavaScript which is guaranteed to be free of runtime exceptions. Moreover Elm is packed with a bunch of powerful abstractions which let us build visual and reactive Web applications in a few lines of code.

As an example, I show the implementation of a simple framework for building Prezi-like presentations. It's just 99 lines of code!

Tiny rules for how to name stuff

CSS

How to name CSS classes

Stateful Class names

Is it a state that is only one of two conditions? (i.e. a boolean)

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

	'use strict';

	class HTMLElementPlus extends HTMLElement {

	static defaultAttributeValue() {
	/* the name of the attribute is parsed in as a parameter */
	return;
	}

	static parseAttributeValue(name, value) {

	/*
	To setup, place in scripts/generate.js and add

	"st:generate": "node scripts/generate.js"

	To your npm scripts.

	To generate a component in src/components/ run

	npm run st:generate component my-component

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<!-- Viewport -->
	<meta name="viewport" content="width=device-width, minimum-scale = 1.0, initial-scale = 1.0, maximum-scale = 5.0, user-scalable=yes, shrink-to-fit=no">

	<title>Title of the Page</title>

	//----------------------------------*\
	// TRIGONOMETRY FUNCTIONS
	//----------------------------------*/

	// # Trigonometry in CSS
	//
	// - Through Taylor/Maclaurin polynomial representation: http://people.math.sc.edu/girardi/m142/handouts/10sTaylorPolySeries.pdf
	// - Useful if you don't want to use JS.
	// - With CSS Variables.
	// - `calc()` can't do power (x ^ y) so I used multiplication instead.

	#!/usr/bin/env bash
	file="$1"
	test -z "$file" && echo "file required." 1>&2 && exit 1
	git filter-branch -f --index-filter "git rm -r --cached '$file' --ignore-unmatch" --prune-empty --tag-name-filter cat -- --all