Do you use {pretty print} ?

Steve Souders began to describe Web Performance Optimization 10 years ago. WPO is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user’s web browser. He wrote and contributed to many books (High Performance Web Sites , Even Faster Web Sites , Web Performance Daybook V2
) to explain us his best practices for performance along with the research and real-world results behind them.

One of the most important rules is to Combine & Minify resources. Bundling combines multiples files into a single file whereas Minification is the process of removing all unnecessary characters from source code without changing its functionality.

With the latest HTML5 specification and the emergence of JS frontend frameworks like JQuery and more recently AngularJS, JavaScript has never been so used and so popular. We can now create scalable, maintainable applications, unified under a single language: JavaScript !

As we’re all good web citizen, all our resources (JS/CSS) are bundled and minified on production. This is sometimes where things start going bad. Have you ever try to debug JavaScript on production? The primary drawback of this optimization is that it makes debugging your JavaScript code a nightmare, since the browser’s developer tools will show you code that is virtually unreadable.

For example, a production JavaScript may looks like this: 14K characters on the same line.

min

It’s impossible to debug the previous script because browsers can’t set breakpoint at character level (only at line-level).

Helpfully, some of the browsers have an option in developers tools to un-minify partially a JavaScript file. This option is called “pretty print” and the icon is like {}.

Chrome
chrome

Internet Explorer
,ie

In Firefox (since December 2013)
firefox

Here is the result after pretty print.

unmin

It’s fairly better and you have the nearly the same debugging experience that for dev scripts. Sometimes it’s not enough because JavaScript minification tools rename local functions & variables. It’s common to see a(), b(), c() in a minified script.  A good indentation won’t change this.

Fortunately, Source Maps provide a way of mapping the lines & columns of the production source code (bundled & minified), back to their original locations in the corresponding uncompressed source files. This feature is supported by all modern browsers.

An additional file is generated during the minification process and is added at the top of the optimized file.

map

Source Maps are easily generated by grunt-contrib-uglify or Closure Compiler. Unfortunately, it’s still not supported by Microsoft ASP.NET Web Optimization Framework. For sure, this is something that needs to be done. Web Essentials also offer this feature.

It’s a nice tip for every web developer but the good question may be : Why do you have to debug production code ?

Advertisements

Become a Responsible Programmer

Our job is so … special. Isn’t it?

Like me, you may have already been in this delicate situation where one of your friends ask you for help  “I have a problem with program XXX”, “I can’t order an item in this e-commerce web site”, “my computer is slow”…. Could you help me? A vast majority of people thinks that working in computers means that you know everything about computers. We –programmers- know that it’s false but it’s just a consequence of how developers are considered. The programmer’s stereotype is a perfect example: A geek/nerd living alone in his world.  Nobody can understand a programmer better than … another programmer.

Have you ever try to discuss computer science with a non-programmer? Sometimes it’s quite funny but most of the time he will have a headache; you too. How can you explain Web 2.0, the N existing programming languages, Agile Vs waterfall, scripting vs compiled language, MVC pattern …? It’s even worst between developers. In the past, We saw all endless fights & debates between antagonist technology stacks.

After 10 years of programming, my vision has also changed a lot and I’m sure it will change again in the next coming years. Thanks to communities, we’re now all connected. I have the feeling that programmers now share the same vision of their job. asp.net vNext and  .NET  foundation are great examples of Microsoft (“Linux is Cancer”, 2001) embracing Open Source.

So, as a programmer, you have great responsibilities. You have to contribute to this common ideal,  you’re responsible to keep our job a nice -and fun- place to work, to encourage programming concepts especially in education where it is learned too late, to promote team working and collaboration, to be professional and respectful towards users…

There’re a wide range of ideas I’d like to say here, but I will list only those that come immediately to my mind. So here are my 10 commandments of Responsible Programming

  • Embrace & be active in communities
  • Accept changes and react positively to events
  • Banish license violation, code/content robbery
  • Accept your mistakes, and take the opportunity to become better
  • Write efficient code and don’t hesitate to prove it
  • Write maintainable code with clean and strong architecture, following common quality rules and common security guidelines
  • Don’t deceive your users ; users satisfaction is your primary objective
  • Learn continuously and get better every day
  • Share your knowledge and your vision to everyone and especially to less experienced developers
  • Don’t to be a lone hero, but embrace team working & collaboration

What we -programmers – have done in the last 10 years has changed the world for ever. Let’s continue to change the world and make it a better place to live. This is how I consider about my job and the values I try to share.