sashancruise

@font-face {
  font-family: "ROCK";
  src: url(../fonts/ROCK.ttf);
}

#wrapper {
  min-height:100%;
  margin: 0 auto;
}

sashancruise

(function(d) { 
  var dl = d.createElement('a');
  dl.innerText = 'Download MP3';
  dl.href = "http://media.soundcloud.com/stream/"+d.querySelector('#main-content-inner img[class=waveform]').src.match(/\.com\/(.+)\_/)[1];
  dl.download = d.querySelector('em').innerText+".mp3";
  d.querySelector('.primary').appendChild(dl);
  dl.style.marginLeft = '10px';
  dl.style.color = 'red';
  dl.style.fontWeight = 700;
})(document);

sashancruise

User-agent: *
Disallow: /search
Disallow: /sdch
Disallow: /groups
Disallow: /images
Disallow: /catalogs
Allow: /catalogs/about
Allow: /catalogs/p?
Disallow: /catalogues
Allow: /newsalerts

sashancruise

#Introduction

Developing Chrome Extensions is REALLY fun if you are a Front End engineer. If you, however, struggle with visualizing the architecture of an application, then developing a Chrome Extension is going to bite your butt multiple times due the amount of excessive components the extension works with. Here are some pointers in how to start, what problems I encounter and how to avoid them.

Note: I'm not covering chrome package apps, which although similar, work in a different way. I also won't cover the page options api neither the new brand event pages. What I explain covers most basic chrome applications and should be enough to get you started.

Table of Contents

1. Understand the Chrome Architecture
2. Understand the Tabs-Extension Relationship
3. Picking the right interface for the job

sashancruise

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

sashancruise

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

sashancruise

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

sashancruise

Adobe Edge Inspect Used while working on mobile/responsive sites to view natively on iPhone, updates in real time. https://chrome.google.com/webstore/detail/adobe-edge-inspect/ijoeapleklopieoejahbpdnhkjjgddem

Benchwarmer This has replaced my pinned Dribbble tab. "New tab" extension, no URL bar icon, transforms your new tab's background into a list of Dribbble popular/everyone/debut/following (you pick) shots. https://chrome.google.com/webstore/detail/benchwarmer-the-dribbble/lhdjhhpjicomphhjpehdhjenbaamdpnn

Bitly Used with custom .htaccess rule and vanity domain to shorten links with 2 clicks.