genoma's kitchen your daily cup of coffeescript

Bootstrap Configuration

Una configurazione personalizzata di Bootstrap inserita come git module, con Grunt configurato per Less e Coffeescript.

Bootstrap Configuration

Bootstrap Configuration Safe

Sugli Editor

Gli editor sono uno strumento importante per un programmatore, probabilmente lo strumento più importante in assoluto. Ogni giorno chiunque scriva codice, passa 10 ore della propria giornata digitando sulla tastiera usando un software sviluppato per facilitare la scrittura in molteplici linguaggi di programmazione.

Per chi sviluppa interfacce per il web le scelte sono svariate, ma non infinite.


Brackets

Open Source - Adobe - Difficoltà semplice

Brakets è un editor per front end developers caratterizzato da un modello di sviluppo basato sull’HTML5 e Javascript: l’editor è un browser spinto da node.js e CSS.

Punto forte dell’editor, oltre all’integrazione con un sistema di plugins di facile installazione, è la sua integrazione con i più moderni linguaggi per il web: Sass, Less, CoffeeScript.

Di base l’editor e’ un ottimo compromesso per chi si avvicina al mondo dello sviluppo delle interfacce per il web, ha una curva di apprendimento molto breve ed è immediatamente utilizzabile da chiunque con qualsiasi esperienza.


Atom

Open/Closed source(?) - GitHub - Difficoltà media

Atom è il nuovo editor multi purpose sviluppato da GitHub su base Chromium, CoffeeScript, node.js, HTML5 e Less.

Correntemente in closed beta con una emulazione Vim discreta, ma comunque continuamente sviluppata, si propone come l’erede di Sublime Text 3 con una potenziale base utenti enorme ed un supporto eccellente da parte del gigante di San Francisco.

Il software è al momento solo disponibile per OS X


Sublime Text 3

Commercial - Difficoltà elevata

Sublime è un editor che si avvicina al modello Vim per quantità di funzioni, presenza di plugins, qualità del prodotto, ma di contro ha una curva di apprendimento piuttosto lunga.

Sfortunatamente sembra che lo sviluppo sia arrivato ad uno stallo, per ragioni molteplici, ed attualmente la versione 3 in beta da più di un anno, non riceve aggiornamenti sostanziali da alcuni mesi.


Vim

Open Source - Difficoltà agghiacciante

Vim e’ uno strumento il cui uso deve essere appreso
Vim - About

Un editor con una curva di apprendimento potenzialmente infinita, considerato da molti il miglior editor mai sviluppato, si distingue per essere sviluppato attivamente dopo 23 anni, per il numero di plugin e per la community enorme che circonda questo software.

Le potenzialità di questo editor si vedono nel medio/lungo termine della fase di apprendimento, è uno strumento che richiede tempo, dedizione e qualche lettura approfondita.


Conclusioni

Lo sviluppatore che si dedica allo sviluppo del front end per il web non si può appoggiare a strumenti che creano il codice per lui (es: Dreamweaver o WYSIWYG editors), deve ricercare uno strumento flessibile, espandibile e personalizzabile. L’era in cui si sviluppava un sito web con 3 linguaggi ed un paio di strumenti è finita, oggi uno sviluppatore coerente con i tempi, che vuole creare un prodotto di qualità deve conoscere l’utilizzo di frameworks, CLI, molteplici linguaggi e librerie.

Vim è uno strumento che permette di velocizzare qualsiasi operazione e che nel lungo termine diventa insostituibile per chiunque abbia avuto la determinazione e la pazienza di impararne le basi.

Foundation 5 grunt configuration with CoffeeScript and grunt-newer

Configurazione per Foundation 5 Ruby Gem, con aggiunto supporto per CoffeeScript ed integrazione grunt-newer.

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    coffee: {
      compileJoined: {
        options: {
          join: true
        },
        files: {
          'js/app.js': ['coffeescripts/app.coffee', 'coffeescripts/*.coffee']
        }
      },
      glob_to_multiple: {
        expand: true,
        flatten: true,
        cwd: 'p_coffeescripts',
        src: ['*.coffee'],
        dest: 'js/plugins/',
        ext: '.js'
      }
    },
    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }
      }
    },
    watch: {
      grunt: { files: ['Gruntfile.js'] },
      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      },
      coffee: {
        options: {
          livereload: true
        },
        files: ['coffeescripts/*.*', 'p_coffeescripts/*.*'],
        tasks: ['coffee']
      },
      html: {
        options: {
          livereload: true
        },
        files: ['*.html']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-newer');

  grunt.registerTask('build', ['newer:sass', 'newer:coffee']);
  grunt.registerTask('default', ['build','watch']);
}

package.json

{
  "name": "foundation-libsass-template",
  "version": "0.0.1",
  "devDependencies": {
    "node-sass": "~0.7.0",
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "^0.5.3",
    "grunt-sass": "~0.8.0",
    "grunt-contrib-coffee": "^0.10.1",
    "grunt-newer": "^0.6.1"
  }
}

Gist[!]

Foundation Off Canavas 100% Tweak

Su Foundation5 v1.0.4 se body,html{height:100%;} l'Offcanavas menu non copre tutta la pagina - con footer posizionato sempre sul fondo della pagina con contenuti che non arrivano al 100% dell'altezza del browser.

Soulzione

Coffeescript

$ ->
  timer = undefined
  $(window).resize(->
    clearTimeout timer
    timer = setTimeout(->
      $(".inner-wrap").css "min-height", $(window).height() + "px"
      return
    , 40)
    return
  ).resize()
  return

jQuery

$ ->
$(function() {
  var timer;
  timer = void 0;
  $(window).resize(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      $(".inner-wrap").css("min-height", $(window).height() + "px");
    }, 40);
  }).resize();
});

jQuery Plugin con CoffeeScript

CoffeeScript permette di scrivere in una sintassi elegante e veloce javascript con qualsiasi libreria, e si integra alla perfezione con jQuery.

Plugin example

Per scrivere un plugin per jQuery in CoffeeScript:

CoffeeScript

# Reference jQuery
$ = jQuery

# Adds plugin object to jQuery
$.fn.extend
  # Change pluginName to your plugin's name.
  pluginName: (options) ->
    # Default settings
    settings =
      option1: true
      option2: false
      debug: false

    # Merge default settings with options.
    settings = $.extend settings, options

    # Simple logger.
    log = (msg) ->
      console?.log msg if settings.debug

    # _Insert magic here._
    return @each ()->
      log "Preparing magic show."
      # You can use your settings in here now.
      log "Option 1 value: #{settings.option1}"

Gist[!]