fjaguero

Keybase proof

I hereby claim:

• I am fjaguero on github.
• I am fjaguero (https://keybase.io/fjaguero) on keybase.
• I have a public key whose fingerprint is 4785 E9DB 5FB3 358C 81DA 0ABE 7A0B C107 AFF3 F7C5

To claim this, I am signing this object:

fjaguero

Libraries

• 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
• Compass - Open source CSS Authoring Framework.
• Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
• Font Awesome - The iconic font designed for Bootstrap.
• Zurb Foundation - Framework for writing responsive web sites.
• SASS - CSS extension language which allows variables, mixins and rules nesting.
• Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

fjaguero

Libraries

• jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
• AngularJS - Conventions based MVC framework for HTML5 apps.
• Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
• lawnchair - Key/value store adapter for indexdb, localStorage

fjaguero

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

fjaguero

Color Queries

Curious as to how the browser would react to several hundred media queries, I decided to create this experiment.

In order to demonstrate each individual media query, I found a list of over 1,000 unique colors to use to apply a unique background color to each media query. To make sure the text color is readable on top of any given background color, I used Sass to return the complementary color of the background color. I had to compile my Sass locally because it was too big of a task for CodePen to handle. So, the CSS you see here is what was compiled on my machine and copy/pasted into this Pen.

The first media query kicks in at min-width: 320px, and each new media query thereafter increments by 1px. This continues all the way up to min-width: 1400px.

Resize your the preview window and watch the colors change as the media queries kick in!

fjaguero

// Adds the thousands separator
function numberWithThousands(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

fjaguero

/*
Theme Name:
Theme URI:
Author: 
Author URI: 
Description: 
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:

fjaguero

.ie8 .page-header {
  background:rgb(0,0,0);
	background: transparent\9;
	background:rgba(0,0,0,0.3);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
	zoom: 1;
	height: 215px;
}

.ie8 .page-header:nth-child(n) {

fjaguero

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

fjaguero

  .blink {
    animation: blink 1s steps(5, start) infinite;
}
@keyframes blink {
    to {
        visibility: hidden;
    }
}