reprogramming myself

Checklist to install multiuser development environment in OS X Mountain Lion

Tue, 05 Mar 2013 18:15:00 +0100

This list in not exhaustive, just my bare minimum for frontend purposes. I’m not dealing with Rails, PostgreSQL, MongoDB or other server tools since it’s not my day-to-day use. Just yet. It’s surprising that you need so many console tools these days to do frontend, but things fall apart, and most of them really improve your performance in many ways.

Installation for one or multiple users would be the same, but there are tasks we will perform as admin user so that we can share part of the environment across multiple users, who will only need to configure personal data (Git, $PATH, Sublime or other editor, …). We are using Mountain Lion but the following should work the same in older systems, down to at least Leopard or Snow Leopard.

Developer environment installation by admin user:

If we are going to use the complete Apple developers set up, including iOS simulators, we need to install XCode (from the Mac Store), then open it, preferences, downloads, install command line tools and the needed simulators.
If we don’t need iOS simulators, just go to https://developer.apple.com/downloads and download, then install the Command line tools for your system. It’s around 200Kb only.
Open a Terminal window and check if you have properly installed build tools:

which gcc

(it should return /usr/bin/gcc)

Then we will install homebrew, a nice package manager for OS X, from the terminal:

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

We are going to install Git now to have a control version in our projects without the need of a centralised repository:

brew install git

Update homebrew now:

brew update

Install rbenv to manage different versions of Ruby:

brew install rbenv

To use Homebrew’s directories rather than ~/.rbenv add to your profile:

export RBENV_ROOT=/usr/local/var/rbenv

Then

brew install ruby-build

We are going to install Compass, a CSS framework that uses Sass stylesheets (make sure you code your Sass with ‘compass watch’ running in a terminal tab):

sudo gem install compass

Install node, several development tools are distributed as npm these days:

brew install node

We recommend prepending the following path to your PATH environment variable to have npm-installed binaries picked up: /usr/local/share/npm/bin

We love Grunt, a Javascript task runner. We use it to build our frontend files, minimize, JSlint and several other features:

npm install -g grunt

PhantomJS is used to create files from Javascript in terminal, in one of our favorite tools, named Grunticon (allows us to throw SVG icons into a folder and convert them into datauri inside your CSS, with PNG fallback). No more sprites :-)

brew install phantomjs

Install nanoc, a nice static site generator

sudo gem install nanoc

If we need the preview server of nanoc we need to install it::

sudo gem install adsf

We can use other preview servers, like Apache from our system, MAMP or even a LiveReload server.

Install MAMP, which lets you have Apache, MySQL and PHP environment in a second.
We are going to configure /etc/hosts file according to this tutorial: How to use vhosts in Wordpress development.
Install Go2Shell (from the Mac Store), which opens a terminal window to the current directory in Finder. We just need to drag the app to the icons bar in Finder.
We install Chrome now, with LiveReload, Web Developer, YSlow plugins.

Developer environment config for each non admin users:

We have most of the environment set up ready, we just need some personal configurations. These will be performed by each non-admin user of the machine:

Open Finder and customize sidebars
We are heading to our personal folder ~/ and create an Applications folder. We are going to use this to install our programs, since /Applications will be used by programs installed by the system or admin for all users.
Install Dropbox (disclaimer, this is a recommendation link, both you and me will get extra space). Dropbox will let you have some Gb of your data backed up in the cloud and synchronized across your computers. It will require admin permissions to the folders in order to be installed.
Open /Applications folder and drag the app to the icons bar in Finder.
If you’re like me and prefer your finder to reveal hidden files, open Terminal and type:

defaults write com.apple.finder AppleShowAllFiles -bool YES

killall Finder

Copy your public/private SSH keys from an older computer. If it’s the first time you need these (Git, for instance), just create your keys.
To configure your Git user, we can copy ~/.gitconfig from an older computer into ~/ or:

git config --global user.name "Your name"

git config --global user.email your@email.com

Install SublimeText2 into our personal ~/Applications. You can buy it too! Or use Textmate, vim or whatever.
We need to create a folder for our binaries, type this in Terminal:

mkdir ~/bin

We are enabling Sublime access from terminal, pointing to a symlink in our bin (beware, link takes to the Sublime we just installed in our ~/Applications)

ln -s ~/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl ~/bin/subl

If we open a new terminal window or tab (cmd+t) we should be able to open Sublime by typing

subl

Install Sublime user prefs from an old computer, or use mine if you like them https://gist.github.com/zigotica/4954546
Install the package with color and typography settings (I keep a copy in Dropbox), usually found in

“~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default”

Install Package Control from View > Show console, following these instructions
We can now install these packages from Package control: Emmet (previously known as Zen code), SuperCalculator (nice for px/em conversions), GitGutter (awesome, to see changes in gutter from last Git commit)
Install your .bash_profile from an old computer into ~/ or https://gist.github.com/zigotica/4523081
Now you check if your .bash_profile includes PATH to our bin, grunt, and other tools:

export PATH=~/bin:/usr/local/share/npm/bin:/usr/local/share/npm/lib/node_modules/grunt/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin

Alternatively, much better approach is separate each path into a specific var (thanx @happywebcoder for the tip):

export MY_BIN_PATH="~/bin"

export PATH="$MY_BIN_PATH:$PATH"

export NPM_BIN_PATH="/usr/local/share/npm/bin"

export PATH="$NPM_BIN_PATH:$PATH"

export GRUNT_BIN_PATH="/usr/local/share/npm/lib/node_modules/grunt/bin"

export PATH="$GRUB_BIN_PATH:$PATH"

Open Chrome and authenticate with your login/password in order to start sync’ing our favorites, plugins, and so on.
If we are going to develop responsive sites (or sites adapted to be viewed in mobile gadgets) you will want to install Adobe Edge Inspect which lets you synchronize what you see in your browser to your mobile device, instantly, and even inspect your device for a debug session.

Other programs you may like:

I don’t work nor get anything from the following, I just think they are awesome apps:

We love TotalFinder, your Finder with Tabs! Buy it, it’s worth it.
CloudApp is an awesome service that stores screen captures and other files in the cloud.
Buy and install Transmit FTP, but don’t forget to use Git locally :-)
Buy and install Divvy a cool app that lets you manage your windows size very easily with shortcuts.

iOS phone number styling

Sun, 03 Feb 2013 12:35:00 +0100

iOS has an automatic feature to detect phone numbers and link them to a phone call by clicking on them.

The problem with this is twofold:

Many false positives
Style for these numbers is really ugly (ugly as in default link style).

OPTION 1

If you want to avoid this feature you can add the following meta in your pages:

<meta name = "format-detection" content = "telephone=no">

which will avoid the phone to make calls to ALL phone numbers in your page. To reactivate this key functionality in some of the numbers, you need to add a link around each telephone number in your page, manually, using tel: as the beginning of the href, as in:

<a hef="tel:1234567890">1234567890</a>

Then we just need to style the special links:

a[href^="tel:"] {color: inherit !important; background-color: inherit !important;}

OPTION 2

Since in some projects you will not be able to wrap numbers manually and you still want to style what iOS uses as phone numbers, you can do it the other way around. Let’s leave the OS add the special link for us (will not add the special meta that avoids this feature) and style how it looks. First you need to know how iOS links the numbers to the phone. Before:

1234567890

After:

<a hef="tel:1234567890" x-apple-data-detectors="true" x-apple-data-detectors-result="1">
1234567890</a>

As you can see iOS wraps the number into a link with special attributes. Now you can just style them using attribute selector:

a[x-apple-data-detectors=true] {color: inherit !important; background-color: inherit !important;}

Add custom poster frame to youtube video without the API.

Thu, 03 Jan 2013 10:11:00 +0100

The trick is adding the iframe in a comment. Javascript reads comment contents and saves iframe definition to a var. When user clicks on the image, javascript overwrites container innerHTML using the iframe defined in the comments.

https://gist.github.com/4438876

This code is also valid in browsers not supporting window.postMessage (API uses postMessage).

Untilted*: Code literacy for kids, a link dump

Wed, 26 Dec 2012 09:53:33 +0100

Untilted*: Code literacy for kids, a link dump :

bomberstudios:

Books

Mindstorms: Children, Computers, And Powerful Ideas: a must read.

Computer Science Unplugged

Lauren Ipsum, “A story about computer science and other improbable things.”

Projects / Platforms

Mozilla Hackasaurus

Mozilla Hackasaurus: “Hackasaurus makes it easy to mash up and…

amazing compilation

Mrmamba Sysadmin: Sistema de backup sencillo: Web y Mysql a Dropbox

Tue, 11 Dec 2012 12:46:38 +0100

Mrmamba Sysadmin: Sistema de backup sencillo: Web y Mysql a Dropbox:

Awesome post by mrmamba:

Siempre es necesario tener backup de nuestros sitios, pero a veces es algo costoso y da mucha pereza gestionar el mismo, que si hacer ssh aquí o allí, etc.

Comparto con todos una solución sencilla para gestionar el backup de un sitio web y su base de datos haciendo uso de Dropbox, rsync y tareas…

SpainJS 2012 in a post

Tue, 10 Jul 2012 11:27:00 +0200

Finally a Javascript event in Spain. I was tempted to organize one with some friends, but in the middle of the process we knew about this idea from the organizers of previous Rails conferences and also an attempt at Teambox to organize one as well in Barcelona. We postponed the idea, and frankly, the results for this first event in Madrid have been excellent. Kudos to the team!

THURSDAY

Workshops were cool. I could only attend the afternoon workshops, but they were really worth it. I was not asked for the registration ticket, which surprised me a lot since there were quite a lot of twits about only accepting registered users being allowed.

Dani Mata (@danimataonrails) talked about using Node.js, Express, Sequalize and Jade to create an API that would serve JSON. It was quite interesting, high level from the first moment, but given there was a bad wifi conection that made it slow to download all the dependencies and that I later had a mysql problem I was not able to finish the examples. Quite good anyway. Slides and code here: http://danimata.com/spainjs/

Guillermo Gutiérrez (@ggalmazor) managed a refactoring Dojo. Being my first dojo I can only say it was fun, worth it and inspiring. I suppose dojos are better with a smaller groups (at least not all strangers), but it was real fun, so fun I even went for a stint. Gotta do more of these. PDF here: https://t.co/18N2BhzI

For next year I would suggest the organization to force Camon to provide a better connection, during workshops wifi is more important than at the event talks. It was not on pair with the workshop contents.

FRIDAY

Registration process next day was a bit slow and chaotic. Separation between conference ticket and conference + dinner should have been made before the room entrance, there was place enough to separate those into two different spaces. Once inside we faced the problem of getting a decent wifi connection, more on that in the final words.

Vicent Martí (@tanoku) from github talked about github’s robot, hubot, and how cool it is to perform all kinds of tasks, scripts, domotic integrations, laughing at your coworkers and many more. Not much code was shown (the comic style in slides was gorgeous) but when it was, it fitted well, explaning in few lines how every task is a module with a name, a regexp and a callback. Hubot is opensourced, so you should give it a try. The talk was fun and inspiring. Slides here: https://speakerdeck.com/u/tanoku/p/intergalactic-javascript-robots-from-outer-space

Jeremy Ashkenas (@jashkenas) the creator of Backbone and CoffeeScript talked about the evolution of javascript (specifically, Harmony) and the benefits of using CoffeeScript. I’m not a big fan of compilers, but I have to agree that he knows how to lead a group with his speech, very dynamic, to the point. I liked the splats and soaks examples, and the fact that you can show the inner codefile using —tokens or —nodes options. Slides and code here: http://cl.ly/HwNW

Karolina Szczur (@karolinaszczur) from nodejitsu talked about simplicity in design, more specifically in CSS writing via frameworks. I don’t think I understood the point of the talk. She seems very good designer, but her presentation lacked focus. I know CSS, I use frameworks, I use compass. She talked about 3 frameworks, leaving many behind, she talked about CSS generators and then about Sass, which are quite incompatible from my point of view. Sorry, I don’t buy it. Slides here: https://speakerdeck.com/u/karolinaszczur/p/the-pursuit-of-simplicity

Jakob Mattsson (@jakobmattsson) from Burt started with an unfortunate joke about Berlusconni and Francisco Franco. Really, out of place and not fun at all. Then he talked about something he really knows: writting a RESTful API with Node.js. The speech was nice, lots of tips, tricks and suggestions of other middleware like connect and code examples of how to use node, express, connect, mongoose together, in a lot of code slides too. I wrote down this sentence: “db schemaless is a lie”. Slides here: https://speakerdeck.com/u/jakobmattsson/p/writing-restful-web-services-using-nodejs

Horia Dragomir (@hdragomir) from Wooga was the man of the day (shared honour with Vicent Martí). He gave a speech on how to create fast mobile UIs, with plenty of code examples, short and to the point, like using event bubbling, HTML5 APIs, touch events, viewport scaling, and so on. If that wasn’t enough, he is very enthousiastic and dynamic, making the after lunch hour very easy to handle. Top. Slides here: https://speakerdeck.com/u/hdragomir/p/fast-mobile-uis

Tomás Corral (@amischol) from Softonic was the poorest talk on friday and maybe the whole event. Language was by far the main struggle for him, since he knows his stuff, but English wasn’t helping. Subject was not very well chosen, either. Minimization of code is important but I don’t think it gives for more than a 10 minutes talk, and the examples were all about semicolons, using variables and concatenating strings. I would have preferred him to talk about javascript architecture, since he knows how to write that (he is the author of hydra.js). Slides here: http://www.slideshare.net/amischol/less-is-more-13574571

Christian Kvalheim (@christkv) from 10gen talked about a Pacman game clone written in Node.js. The presentation was fine, going from the evolution of the original game to the challenges he faced while cloning it for web and techniques used (Node.js, Akihabara, SoundJS, websockets and MongoDB), also what is in horizon with WebGL and so on. He also demo’ed the game. I am not a big fan of gaming, but the inners were interesting. Slides here: https://speakerdeck.com/u/christkv/p/mongoman-a-nodejs-powered-pacman-clone

Friday night dinner and party was excellent. Sala Garibaldi was a wise choice, center of town unlike last year in Rails conference, held in Florida Park itself (far from anything else). As usual, dinner was standed, ala cocktail style, good for talking with anyone. And the Jamón guy was there again. Good. A bit expensive, but I assume you pay for the networking more than the food.

SATURDAY

Ramón Corominas (@ramoncorominas) is a W3C’s WCAG WG member. He gave a talk on WAI-ARIA to create accessible sites. I personally don’t buy the subject, but he also gave terrible examples of javascript being used to connect WAI-ARIA to form inputs. Either he did so to show a (doubtfully) simpler code or he does not know how event managers and event bubbling work. A pity, since the other stuff seems interesting, these weighted too much for me. Slides and code: http://ramoncorominas.com/spainjs/#spainjs

Alex MacCaw (@maccman) from stripe and creator of spine.js gave an excellent talk on perceived speed and how to improve it for a better user experience, giving real world examples on how other sites or apps trick about it: twitter, facebook, instagram or a cool blog system named https://svbtle.com/ The three steps to improve perceived speed by using an async UI are: rendering on client (batch DOM updates), store state and data on client and only then communicate with server asyncronously. Also nice trick on the questions about unit testing UI and REST API separately. Slides here: https://speakerdeck.com/u/maccman/p/asyncronous-web-interfaces

Keith Norman (@keithnorm) was very inspiring. He talked about the process started with his colleagues at Groupon to share code between Node.js and the browser. That is, writting javascript once and use it both on client and server sides. Showed us how they were using browserify to convert coffee/backbone code in server to allow node+express to run it. Very good, maybe the man of the day, but that one is tight, saturday talks were frankly top level, I might give it a draw with Nuria Ruiz, Alex MacCaw and Javier Arévalo. Slides here: http://keithnorm.com/spainjs-pipedream/#/ and a demo https://github.com/keithnorm/SpainJS-Pipedream-Demo

Nuria Ruiz (@pantojacoder) explained us the processes started at tuenti to improve performance through changing how they load javascript and templates. The thumbs up on the talk are not only the solutions they arrived to (which improved the speed of next tuenti version by an incredible 500%) but also the explainations on the process and how they discarded other options to finally chose YUI lazy loading with Handlebars templating. Oh, and keep it in a post it next to you: measure everything. I have the honor to have chatted with her about oceanography and research vessels, remembering old times when we (separately) were one month on board doing science stuff. Old times, go beat that! :-) Slides here: https://speakerdeck.com/u/nuria_ruiz/p/client_side_rendering_is_not_so_easy

Brian McKenna (@puffnfresh) presented Roy, a javascript compiler. Since I am not a big fan of compilers I took that time to do some networking, so I can not give my opinion on this one, other than my admiration goes for those who innovate, and that seems to be the case. Slides here: http://brianmckenna.org/files/presentations/spainjs-roy/

Javier Arévalo (@TheJare) kicked youngsters arses. If you ever thought “viejunos” (older people) should go home and let 20yo do the job, think twice. This guy knows his stuff. He deeply went through the use of different strategies, HTML5 APIs, WebGL, audio, events, performance… Nice talk indeed, more than one and two attendees paid the tickets just to see him in action, and they were not defeated. Slides here: http://www.iguanademos.com/Jare/docs/html5/SpainJS2012/

Jonathan Azoff (@azoff) presented tacion, an app that pushes sync’ed content to an audience using websockets and a jQuery mobile presentation. Very cool idea. He went through some of the code. The nice part is being opensource and using pusher.com which I did not know of yet. As a slightly negative side, it needs improving on the case scenario where the driver of the talk wants to let users run the content but up to a point protect certain pages. Powerpoint is dead. Slides here: http://azoff.github.com/tacion.js/examples/spain.js/#slide=0&step=0

Final words

Overall the event was very impressive, well organized, nice talks, nice people… I would probably force lightning talks to be more technical and less “this is my product, buy it” but the event is good. Florida Park seems a good place for me, having lunch in the grass is a win. The worst part of the event was this (in my humble opinion): once there, we found out that people at home was following the event via streamming. This being a lack of respect to the attendees, it also swallowed some big chunk of the bandwith. I suggest next year organizers to register every talk in video and upload them online two weeks after the event, edited with sponsors’ logos, improved sound, and so on. Every one would win. Oh, and please choose another ISP, Movistar clearly is not up to the standards or they simply laughed at you, I hope you will not pay the bill. Thank you anyway for such a great event, one of the best I’ve attended, see you next year!

Mrmamba Sysadmin: Obtener datos del hardware en Linux

Wed, 18 Apr 2012 19:36:14 +0200

Mrmamba Sysadmin: Obtener datos del hardware en Linux:

(creo que voy a terminar compartiendo todos los posts de MrMamba…)

mrmamba:

Siempre es interesante poder obtener todos los datos posibles de nuestra máquina Linux sin tener que abrirle las “tripas” o reiniciar y mirar en la BIOS.

Vamos a conocer algunas formas de obtener toda la información del harware de nuestra máquina.

lshw

por ejemplo podemos saber datos como el…

Mrmamba Sysadmin: Backup mysql en caliente y envío por mail

Sun, 15 Apr 2012 18:43:19 +0200

Mrmamba Sysadmin: Backup mysql en caliente y envío por mail:

mrmamba:

Hace tiempo un buen amigo me comentó que necesitaba hacer un backup regular de la BBDD Mysql de su tienda y recibirlo por correo electrónico. Rebuscando por internet encontré una forma bastante elegante de hacerlo:

#!/bin/bash

fecha=`date +”%Y-%b-%d”`

mysqldump —user root —password=12345…

Path, Love & Hate

Fri, 09 Dec 2011 02:51:07 +0100

I love Path app. I admit first version didn’t call me at all, actually I uninstalled after just few minutes. But this version 2 is simple yet powerful, with the basic social needs all together. I love its basic user interface, cool Add (+) menu, having to slide between 3 main pages, and some other little subtleties which improve user experience (that analog clock is awesome). However none of my previous comments will help improve the app, so I decided to write some lines on the few things that would make it more usable (or less misleading).

Links inside comments are not clickable and cannot be copied. Text can’t be copied either.
When you look for friend and add them, you dont know what you are accepting nor who will be seeing what. Are you accepting that they see your stream or that you will see theirs? If it’s the former, then there’s an issue here (why would someone want to see streams from people that just invited you?). If it’s the latter, there’s no way to “follow” someone without them accepting you but then both are following each other. Honestly, following directions should be easier to understand.
Oh, and friendship invites should be on your activity screen.
When you receive an email notification from someone inviting you to share your paths, there is no link to that person’s path, just an invitation to download the app. Senseless, who’s this Xavi below in the picture? No way to know.
When you comment on someone else’s photo and later someone else comments on the same image, the notification you receive says something like “hey, x commented on YOUR photo”. Misleading and wrong, see yourself (the image below and comments are real, I just cut part of the image to make it more clear):

On the image above from Ale Muñoz, I added a comment and waited for a reply. When I got the notification on my iPhone notification center, it says Your photo.
There’s no way to differentiate my updates from my friends’ updates. Background and font color are the same.

I hope this post can eventually help improve the app, which is already awesome, but if the issues above are not just my imagination, the app can still have room for improvement.

Instagram Engineering: What Powers Instagram: Hundreds of Instances, Dozens of Technologies

Sat, 03 Dec 2011 05:02:35 +0100

Instagram Engineering: What Powers Instagram: Hundreds of Instances, Dozens of Technologies:

instagram-engineering:

One of the questions we always get asked at meet-ups and conversations with other engineers is, “what’s your stack?” We thought it would be fun to give a sense of all the systems that power Instagram, at a high-level; you can look forward to more in-depth descriptions of some of these systems in…

How to use vhosts in Wordpress development

Fri, 18 Nov 2011 11:35:00 +0100

Wordpress development has some pitfalls, one of them being that it stores the domain in the database to reference all inner links. So if you develop locally, you have to replace all instances of localhost in the database before you upload to production. Lame.

What follows is a little trick I use lately, nothing new I guess, but it might help your workflow. The idea is to create a virtual host locally with the same name of the production domain. Since local and production hosts will share the same name, you don’t have to worry about replacing strings in the database when you sync the code/database. Enough talking, here’s the method.

Edit /etc/hosts and add a new entry for the new development site, named after the production domain:
127.0.0.1 www.example.com
Create a vhosts folder inside apache folder (if you’re using MAMP, this is typically /Applications/MAMP/conf/apache).
Add a .conf file inside the vhosts folder, named after the production domain. In our example this will be www.example.com.conf
Content of this file will be the definition of the virtual host, name and path to local files:
<virtualhost *:80> ServerName www.example.com DocumentRoot "/your/local/path/www.example.com/" </virtualhost>
Note the use of www.example.com as ServerName.
Change apache’s httpd.conf to automatically include all configuration files from the vhosts folder (add this at the very bottom):
NameVirtualHost *:80 Include /Applications/MAMP/conf/apache/vhosts/*.conf

Now, the idea is that you are telling your system that www.example.com resides in the 127.0.0.1 IP so you wouldn’t reach the production site. When you need to work locally, you use the line of the /etc/hosts to cheat your computer, start apache and check your code changes at www.example.com (it will show you the local environment). When you need to visit the live domain you comment that line, point your browser to www.example.com and you will reach the production site.

You will probably need to add a fork in Wordpress config.php file to handle different user/pwd combo at development or production levels, something like:

define('DB_NAME', 'whatever_your_db_name_is'); if($_SERVER['SERVER_ADDR'] == '127.0.0.1') { // development define('DB_USER', 'development_db_username'); define('DB_PASSWORD', 'development_db_password'); } else { // production define('DB_USER', 'production_db_username'); define('DB_PASSWORD', 'production_db_password'); }
User here does not refer to the Wordpress user but the user connecting to the MySQL.

You Don't Know JavaScript

Fri, 11 Nov 2011 19:27:59 +0100

You Don't Know JavaScript

Things to do before launching a Wordpress site

Thu, 03 Nov 2011 13:48:00 +0100

Once you have installed Wordpress in your server, you MUST make some changes to make it less prone to attacks. Security is never 100% garanteed but these can help a lot:

Keep your Wordpress and plugins updated.
Install and configure the following plugins: Akismet, Login Lock, Wordpress File Monitor, Exploit Scanner, WP Security Scan, BackWPUp.
Deactivate and uninstall any plugin you are not using.
Delete install.php file. You don’t need it anymore.
Some .htaccess rules: protect against non referrer spam, protect against bad bots, prevent hotlinking, prevent access to wp-config.php and maybe install 5G firewall.
PHP or filesystem improvements may include: removing wordpress version number in your functions.php, adding auth keys to the config file and chmod important files such as .htaccess and wp-config.php accordingly (0644).

Make changes one step at a time. Hope these help.

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

Wed, 26 Oct 2011 13:53:00 +0200

Writing Modular JavaScript With AMD, CommonJS & ES Harmony:

Following with my modules and ES/Harmony findings, here’s one you MUST read. THis guy is doing a great evangelization job lately, so worth it.

What I like of ES.next/Harmony

Fri, 21 Oct 2011 13:22:00 +0200

I’ll make it short and to the point. What I like of ES.next/Harmony, from what I’ve been reading and watching at tech talks:

I like there’s a way to make private vars. I don’t like the syntax though: var secret = Name.create("WTF");.
Modules. Using design patterns is cool, and I’ve been advocating for them lately, mainly the Revealing Module Pattern. But there should be a standard way to make modules. There should be a better, standarized way to write big Javascript apps, actually, I like Zakas’ approach to Scalable JS Applications Architecture (Base, Core, Sandbox, Modules), but that’s another story. The proposed module/import/export syntax is easy and looks a bit nicer to me than AMD/CommonJS (which are very nice options anyway).
arguments object being a true Array, having the …rest syntax and accepting default values.
let allows for block scoped variables.
dynamic naming as in var L = { [getName()] : 5, ...}.
for in/of, keys/values. Finally fixing the mess…
Multiline string literals and string interpolation.

What I don’t like so much of ES.next/Harmony, didn’t understand fully or don’t have an opinion about yet:

As I said, private var syntax. What’s wrong with the private word?
yield to sortof create interruptible functions. Isn’t it just synchronous callbacks?
Proxy
weakMaps

I think the future of Javascript language is quite well thought, without going into the evil side. Dart, that is another thing, too Java-ish for my taste. I call it Dart[Vader].

Javascript module pattern in CoffeeScript

Mon, 08 Aug 2011 13:49:00 +0200

Just discovered how to use the javascript module pattern in coffeescript; it looks much cleaner than its javascript equivalent indeed:

module = (->
    privateVar = 1
    privateMethod = () -> alert "Hello CoffeeScript!"

    publicMethod : () -> alert "this is public now " + privateVar
    nowPublic : privateMethod

)()

module.publicMethod()
module.nowPublic()
alert module.privateVar
module.privateMethod()

Which turns into:

var module;
module = (function() {
  var privateMethod, privateVar;
  privateVar = 1;
  privateMethod = function() {
    return alert("Hello CoffeeScript!");
  };
  return {
    publicMethod: function() {
      return alert("this is public now " + privateVar);
    },
    nowPublic: privateMethod
  };
})();

module.publicMethod();
module.nowPublic();
alert(module.privateVar);
module.privateMethod();

Adapted from the official github repo, issue #1140

EDIT: @CoffeeScript just kindly showed me that we can make the code even shorter and cleaner by using the do keyword as follows:

module = do ->
    privateVar = 1
    privateMethod = () -> alert "Hello CoffeeScript!"

    publicMethod : () -> alert "this is public now " + privateVar
    nowPublic : privateMethod

module.publicMethod()
module.nowPublic()
alert module.privateVar
module.privateMethod()

advanced javascript articles and blogs

Fri, 22 Jul 2011 12:18:00 +0200

some of my reading these days:

Tom Trenka’s OOP with ECMAScript

Essential JavaScript Design Patterns For Beginners

Adequately good; decent programming advice

Eloquent JavaScript

JavaScript: Better and Faster

Perfection Kills by kangax

Deploy your static projects to Heroku using git

Tue, 19 Jul 2011 19:37:00 +0200

Deploy your static projects to Heroku using git:

Use git (it’s good!) and deploy your static html/css to Heroku - for free.

Raul makes it so easy.

Google's javascript Style guide

Mon, 18 Jul 2011 18:57:09 +0200

Google's javascript Style guide:

go read it, even if you think you know javascript

how to add your GIT branch to your prompt

Mon, 18 Jul 2011 16:48:35 +0200

add the following code to your .bash_profile

parse_git_branch() {
  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}
PS1="\w\[\e[0;33;49m\]\$(parse_git_branch)\[\e[0;0m\]$ "

credits