Aarón García Hervás aarongarciah

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

Remote, Office Not Required

The Time is Right for Remote Work

Why work doesn't happen at work

The office during the day has become the last place people want to be when then really want to get work done.

Offices have become interruption factories: it's just one interruption after

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

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

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

#Selectores CSS

Los 30 selectores CSS que debes memorizar ( Un artículo de tutsplus.com )

#1. *

* {

	sub, sup {
	/* Specified in % so that the sup/sup is the
	right size relative to the surrounding text */
	font-size: 75%;

	/* Zero out the line-height so that it doesn't
	interfere with the positioning that follows */
	line-height: 0;

	/* Where the magic happens: makes all browsers position

	// @license http://opensource.org/licenses/MIT
	// copyright Paul Irish 2015


	// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
	// github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
	// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values

	// if you want values similar to what you'd get with real perf.now, place this towards the head of the page
	// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed

	/* WebKit browsers */
	::-webkit-input-placeholder {
	color: rgba(#fff, .2);
	}
	/* Mozilla Firefox 4 to 18 */
	:-moz-placeholder {
	color: rgba(#fff, .2);
	}
	/* Mozilla Firefox 19+ */
	::-moz-placeholder {