CMI Web Studio

Here’s a few basic rules to improve the performance of your website. Perhaps in the future I’ll go deeper into this topic and cover some more advanced topics.

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript and CSS
11. Avoid Redirects
12. Remove Duplicate Scripts/Code
13. Configure ETags
14. Make Ajax Cacheable
15. Flush the Buffer Early
16. Use GET for AJAX Requests
17. Post-load Components
18. Preload Components
19. Reduce the Number of DOM Elements
20. Split Components Across Domains
21. Minimize the Number of iframes
22. No 404s
23. Reduce Cookie Size
24. Use Cookie-free Domains for Components
25. Minimize DOM Access
26. Develop Smart Event Handlers
27. Choose over @import
28. Avoid Filters
29. Optimize Images
30. Optimize CSS Sprites
31. Keep Components under 25K
32. Pack Components into a Multipart Document
33. Make favicon.ico Small and Cacheable
34. Caching strategies like using Memcached
35. Serve resources from a consistent URL

The front end developer has realized that a new era of development is well formed and quickly coming.  With the introduction of technologies such as WebGL and Canvas, even graphics rendering became feasible using JavaScript.  But, this didn’t change anything on the server side; the server programs were still running on JVMs/Rubys/Pythons.

Fast forward to today: The scenario is dramatically changing. JavaScript has just sneaked its way into the servers. Now, it is no longer required that a web application needs to have a back end programming language such as Java/C++. Everything can be done using just JavaScript.

Thanks to node.js which made it possible to run the JavaScript server side. Using MongoDB, one can replace the need to have SQL code and now store JSON documents using JavaScript MongoDB connectors. The JavaScript template libraries such as {{Mustache}}/Underscore almost removed the need to have server side templates (JSPs). On the client side, JavaScript MVC frameworks such as Backbone.JS enable us to write maintainable code. And, there’s always the plain old JavaScript waiting for us to write some form validation script, and the never end JQuery plugins that extend our functionality with ease. With that, now it is possible to do the heavy lifting just by using JavaScript.

The front end JavaScript programmers no longer need to focus on just the front end. They can use their skill set to develop the web application end-to-end. This rise of the front end developers poses a threat to the survival of the back end developer. If you are one, do you already realize this threat? What’s your game plan to stay fit to survive this challenge?

OK, Dreamweaver has reused the recordset code for too long, but let’s look at the big picture for Dreamweaver CS5. The easiest front end development tool that exists… period. No one can take that away. In CS5, Adobe has finally stepped up their development game a notch.

As a PHP developer, it’s the changes in Code view that really excite me. When you start typing a PHP script in Dreamweaver CS5, you’ll immediately notice a red marker in the line numbers column and an alert about a syntax error. Complete the line without errors, and the marker and warning disappear. Dreamweaver constantly checks your syntax on the fly. It doesn’t tell you what the errors are, but it highlights all lines with errors, making the debugging process much quicker. PHP code hints have also been improved dramatically. There’s full support for all core functions, constants, and classes (as of PHP 5.2).

Code hinting is also much smarter. Instead of needing to search through code hints alphabetically, Dreamweaver CS5 searches for substrings. This is helpful when you can’t remember the exact name of function or class—just type the part of the name that you remember, and Dreamweaver includes it in the list. You can also work out your own shortcuts. For example, if you press Ctrl+spacebar and type gesi, the code hints take you straight to getimagesize() by recognizing the ge of “image” and the si of “size”. And in case you don’t know how a function or class works, the official manual page—complete with code examples—appears as a tooltip at the bottom of the selected code hint.

For serious PHP developers, it gets even better. Dreamweaver CS5 is capable of code introspection, so it builds code hints on the fly for your own functions and classes, as well as for third-party libraries, such as the Zend Framework. The definition files don’t even need to be directly attached to the page you’re working in. With Site-Specific Code Hints, you tell Dreamweaver where your library files are located, and it scans them for you automatically.

So should you upgrade? Seriously, you’re asking that? YES… it’s the best version of Dreamweaver that’s existed.