paulogaspar7

Generate Appcache Manifest (incl. xhr) in Chrome DevTools

1. Open your Chrome Developer Tools
2. Navigate to the Network tab
3. Just right click into the panel and choose Copy ALL as HAR (maybe the page needs a reload)
4. Switch to the console tab and save your HAR data in a variable. (var data = cmd + v)
5. Now let's create the cache manifest:

console.log('CACHE MANIFEST\n\nCACHE:');

paulogaspar7

<plugin>
  <artifactId>maven-antrun-plugin</artifactId>
  <version>1.7</version>
  <executions>
      <execution>
          <phase>generate-sources</phase>
          <configuration>
              <target name="building">
                  <echo>
---------------------------------------------------

paulogaspar7

_.extend Backbone.Validation.callbacks,
  valid: (view, attr, selector) ->
    control = view.$('[' + selector + '=' + attr + ']')
    group = control.parents(".control-group")
    group.removeClass("error")

    if control.data("error-style") == "tooltip"
      # CAUTION: calling tooltip("hide") on an uninitialized tooltip
      # causes bootstraps tooltips to crash somehow...
      control.tooltip "hide" if control.data("tooltip")

paulogaspar7

/**
 * Flexible buttons with ems (duh!)
 */

body {
	font-family: sans-serif
}

button {
	padding: .5em .8em .4em;

paulogaspar7

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	0% {
		stroke: #00aeef
	}
	37.5% {
		stroke: #ed1c24;

paulogaspar7

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	to {
		stroke-dashoffset: -264;
	}
}

paulogaspar7

Frontend Development

• Guides
  • Hack Design
  • Designer School
  • TheExpressiveWeb
  • Talks To Help You Become A Better Front-End Engineer In 2013
• Architecture
  • Scalable and Modular Architecture for CSS
• BEM

paulogaspar7

An Elasticsearch in Ruby Crash Course!

By Andrew Cholakian

All examples use the Stretcher ruby gem

What is Elasticsearch?

• An Information Retrieval (IR) System
• A way to search your data in terms of natural language, and so much more

paulogaspar7

Mac OSX keyboard layout switching is a pain in the ass.
Using a keyboard layout different than the one actually printed on
your keys is also weird. The following keyboard shortcuts allow you
to create the various diacritics used in languages like Portuguese
on the British layout of a Mac keyboard.
 
 
Alt+e -> ´ Examples: é ó á
Alt+i -> ^ Examples: â ê
Alt+c -> ç

paulogaspar7

// Stick all your icons in a subfolder in your images folder. Put retina versions in a subfolder of that called "@2x".
$sprites: sprite-map("NAME_OF_SUBFOLDER/*.png");
$sprites2x: sprite-map("NAME_OF_SUBFOLDER/@2x/*.png");

// stolen from 37signals
@mixin retina-media() {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {