reprogramming myself

If you want to use the awesome source maps for Sass in Devtools, you will have to:

1. Go to chrome://flags/ and Enable Developer Tools experiments, then restart Chrome.
2. Open Devtools and check Enable source maps in General tab and Support for Sass in Experimental tab.
3. Download latest Sass from the console: gem install sass --pre (you might need sudo)
4. Just adding sass_options = {:sourcemap => true} to config.rb in Compass won’t work (just yet) and you can even get Compass conflicts with the aforementioned Sass alpha version. In my case, Compass 0.12.2 (Alnilam) does not get on very well with Sass 3.3.0.alpha.103 (Bleeding Edge), though it might be some other gem conflict.
5. For that reason, we will have to watch changes using Sass directly, using sourcemap option: sass --watch --sourcemap sources/compass:public/css which generates a .map file for each source. This is the information Devtools will use to let you trace/edit original Sass files directly in the browser.

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.

• 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.

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.

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 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:

1. Many false positives 
2. 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;}

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).

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!

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.

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.

1. 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
2. Create a vhosts folder inside apache folder (if you’re using MAMP, this is typically /Applications/MAMP/conf/apache).
3. Add a .conf file inside the vhosts folder, named after the production domain.  In our example this will be www.example.com.conf
4. 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.
5. 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.

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.

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].

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()

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