Matt Smith AllThingsSmitty

## display-fade.html
<!doctype html>
<meta charset="utf-8">
<title>Example</title>

<style>
  div {
    width: 100px;
    height: 100px;
    background: black;
    animation-duration: .5s;

## Sublime Text Setup.md

      
              1 file
            
          
              24 forks
            
          
              20 comments
            
          
              283 stars
            
          
                davatron5000
                / Sublime Text Setup.md
            
            
              Last active
              April 15, 2023 15:39
            
              
                A new user's guide to SublimeText 2. Estimated reading time: 2 mins. Estimated workthrough time: 12 minutes.
              
          
    Make it useful


Install Package Control. For SublimeText 2, paste the following in Terminal:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. ⌘+Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

  
## gist:2b53198906d320abe650
function foo(x) { x = (typeof x != "undefined") ? x : 10; .. }
function foo(x = 10) { .. }

function foo(x,y,z) { .. }; foo.apply(null,[1,2,3]);
function foo(x,y,z) { .. }; foo(...[1,2,3]);

function foo() { var args = [].slice.call(arguments); .. }
function foo(...args) { .. }

var o = { x: 2, y: 3 }, x = o.x, y = o.y, z = (typeof o.z != "undefined") ? o.z : 10;

## mq.css
@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

## pseudo_elements.md

      
              1 file
            
          
              79 forks
            
          
              5 comments
            
          
              584 stars
            
          
                p3t3r67x0
                / pseudo_elements.md
            
            
              Last active
              January 16, 2024 01:17
            
              
                A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.
              
          
    Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

  
## package.json
{
    "name": "my-app",
    "version": "1.0.0",
    "description": "My test app",
    "main": "src/js/index.js",
    "scripts": {
        "jshint:dist": "jshint src/js/*.js",
        "jshint": "npm run jshint:dist",
        "jscs": "jscs src/*.js",
        "browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

## README.md

      
              5 files
            
          
              303 forks
            
          
              50 comments
            
          
              2017 stars
            
          
                addyosmani
                / README.md
            
            
              Last active
              April 2, 2024 20:18
                — forked from 140bytes/LICENSE.txt
            
              
                108 byte CSS Layout Debugger
              
          
    CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$ if your browser aliases it:
~ 108 byte version

  
## how-to-publish-to-npm.md

      
              1 file
            
          
              210 forks
            
          
              75 comments
            
          
              1113 stars
            
          
                coolaj86
                / how-to-publish-to-npm.md
            
            
              Last active
              April 2, 2024 20:18
            
              
                How to publish packages to NPM
              
          
    Getting Started with NPM (as a developer)

As easy as 1, 2, 3!
Updated:

Aug, 08, 2022 update config docs for npm 8+
Jul 27, 2021 add private scopes
Jul 22, 2021 add dist tags
Jun 20, 2021 update for --access=public
Sep 07, 2020 update docs for npm version


## trello-css-guide.md

      
              1 file
            
          
              126 forks
            
          
              62 comments
            
          
              1474 stars
            
          
                bobbygrace
                / trello-css-guide.md
            
            
              Last active
              April 22, 2024 10:15
            
              
                Trello CSS Guide
              
          
    Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

  
## bling.js
/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;
	<!doctype html>
	<meta charset="utf-8">
	<title>Example</title>

	<style>
	div {
	width: 100px;
	height: 100px;
	background: black;
	animation-duration: .5s;
	function foo(x) { x = (typeof x != "undefined") ? x : 10; .. }
	function foo(x = 10) { .. }

	function foo(x,y,z) { .. }; foo.apply(null,[1,2,3]);
	function foo(x,y,z) { .. }; foo(...[1,2,3]);

	function foo() { var args = [].slice.call(arguments); .. }
	function foo(...args) { .. }

	var o = { x: 2, y: 3 }, x = o.x, y = o.y, z = (typeof o.z != "undefined") ? o.z : 10;
	@media only screen and (min-width: 320px) {

	/* Small screen, non-retina */

	}

	@media
	only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
	only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
	only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",
	/* bling.js */

	window.$ = document.querySelectorAll.bind(document);

	Node.prototype.on = window.on = function (name, fn) {
	this.addEventListener(name, fn);
	}

	NodeList.prototype.__proto__ = Array.prototype;