Tag Archive: stylesheets


Cheat Sheets for Front-end Web Developers

Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office.In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery).So go ahead – print out your favorites and pepper your workspace with these wonderful references.

HTML/XHTML

1. HTML Help Sheet

HTML Help Sheet Screenshot

2. HTML Cheat Sheet

HTML Cheat Sheet - Screen shot.

3. HTML Character Entities Cheat Sheet

HTML Character Entities Cheat Sheet - Screen shot.

4. XHTML Cheat Sheet v. 1.03 – PDF

XHTML Cheat Sheet v. 1.03 - screen shot.

CSS

5. CSS Cheat Sheet (V2)

CSS Cheat Sheet (V2) - screen shot.

6. CSS Cheat Sheet

CSS Cheat Sheet - screen shot.

7. CSS Shorthand Cheat Sheet

CSS Shorthand Cheat Sheet - screen shot.

8. CSS Level 1 Quick Reference – PDF

CSS Level 1 Quick Reference - screen shot.

9. CSS Level 2 Quick Reference – PDF

CSS Level 2 Quick Reference - screen shot.

10. CSS2.1 Quick Reference Card – PDF

CSS2.1 Quick Reference Card - screen shot.

11. CSS2 Reference Guide – PDF

CSS2 Reference Guide - screen shot.

JavaScript

12. JavaScript Cheat Sheet

JavaScript Cheat Sheet - screen shot.

13. Addison-Wesley’s JavaScript Reference Card – PDF

Addison-Wesley's JavaScript Reference Card - screen shot.

14. JavaScript and Browser Objects Quick Reference

JavaScript and Browser Objects Quick Reference - screen shot.

15. The most common DOM methods at a glance – PDF

The most common DOM methods at a glance - Screen shot.

16. JavaScript Quick Reference Card/Cheatsheet

avaScript Quick Reference Card/Cheatsheet - Screen shot.

17. mootools 1.2 cheat sheet

mootools 1.2 cheat sheet - screen shot.

18. jQuery Cheatsheet

jQuery Cheatsheet - screen shot.

19. jQuery 1.2 Cheat Sheet

jQuery 1.2 Cheat Sheet - screen shot.

20. jQuery Visual Map – PNG

jQuery Visual Map - screen shot.

Miscellaneous

21. RGB Hex Colour Chart

RGB Hex Colour Chart - screen shot.

22. The Web Developer’s SEO Cheat Sheet

The Web Developer's SEO Cheat Sheet - screen shot

23. The WordPress Help Sheet

The WordPress Help Sheet - screen shot.

Hope you picked up a cool cheat sheet or two. If your favorites aren’t on the list, don’t forget to share it with us in the comments.

Source: http://sixrevisions.com/resources/cheat_sheets_web_developer/

Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office.In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery).So go ahead – print out your favorites and pepper your workspace with these wonderful references.

HTML/XHTML

1. HTML Help Sheet

HTML Help Sheet Screenshot

2. HTML Cheat Sheet

HTML Cheat Sheet - Screen shot.

3. HTML Character Entities Cheat Sheet

HTML Character Entities Cheat Sheet - Screen shot.

4. XHTML Cheat Sheet v. 1.03 – PDF

XHTML Cheat Sheet v. 1.03 - screen shot.

CSS

5. CSS Cheat Sheet (V2)

CSS Cheat Sheet (V2) - screen shot.

6. CSS Cheat Sheet

CSS Cheat Sheet - screen shot.

7. CSS Shorthand Cheat Sheet

CSS Shorthand Cheat Sheet - screen shot.

8. CSS Level 1 Quick Reference – PDF

CSS Level 1 Quick Reference - screen shot.

9. CSS Level 2 Quick Reference – PDF

CSS Level 2 Quick Reference - screen shot.

10. CSS2.1 Quick Reference Card – PDF

CSS2.1 Quick Reference Card - screen shot.

11. CSS2 Reference Guide – PDF

CSS2 Reference Guide - screen shot.

JavaScript

12. JavaScript Cheat Sheet

JavaScript Cheat Sheet - screen shot.

13. Addison-Wesley’s JavaScript Reference Card – PDF

Addison-Wesley's JavaScript Reference Card - screen shot.

14. JavaScript and Browser Objects Quick Reference

JavaScript and Browser Objects Quick Reference - screen shot.

15. The most common DOM methods at a glance – PDF

The most common DOM methods at a glance - Screen shot.

16. JavaScript Quick Reference Card/Cheatsheet

avaScript Quick Reference Card/Cheatsheet - Screen shot.

17. mootools 1.2 cheat sheet

mootools 1.2 cheat sheet - screen shot.

18. jQuery Cheatsheet

jQuery Cheatsheet - screen shot.

19. jQuery 1.2 Cheat Sheet

jQuery 1.2 Cheat Sheet - screen shot.

20. jQuery Visual Map – PNG

jQuery Visual Map - screen shot.

Miscellaneous

21. RGB Hex Colour Chart

RGB Hex Colour Chart - screen shot.

22. The Web Developer’s SEO Cheat Sheet

The Web Developer's SEO Cheat Sheet - screen shot

23. The WordPress Help Sheet

The WordPress Help Sheet - screen shot.

Hope you picked up a cool cheat sheet or two. If your favorites aren’t on the list, don’t forget to share it with us in the comments.

Since few days we have been registering heavy traffic spikes on our website. This lead to performance issues. As this site is currently hosted on a shared hosting server, it is very difficult to optimize the performance of the site.We are using WordPress as CMS for this blog, hence we decided to install WP-Super cache plugin for WordPress to improve the performance. This plugin will create static HTML files from your blogs post and other pages and save them on web server. These HTMLs are served to client whenever consecutive requests are made. Hence this greatly improve the performance as it reduce PHP parsing and database connections.Bandwidth control is an important task to be followed when your traffic is increasing. With limited monthly bandwidth hosting, your site may run out of bandwidth and thus result in increase in down time. Hence it is very much advisable to compress your websites response with GZip and then serve it to client. Compressing output can significantly improve your websites performance by reducing the size sometimes upto 80%!So how can you enable GZip compression and compress your websites output? Well there are several ways to achieve this. I have listed out following very useful tricks to enable compression.

GZip compression in Tomcat, JBoss server

You can find a full post explaining this trick here.

GZip using mod_gzip, mod_deflate and htaccess

Apache server supports server level GZip compression with the help of module mod_gzip and mod_deflate. You can use this module and enable GZip compression for your website using htaccess file. First you have to check whether your hosting provider has enabled mod_gzip or mod_deflate module or not? To check this, you can use php_info() function of PHP which prints all the information about server and modules.You can enable compression for text and html by adding following lines in your htaccess file.

# compress all text and html:AddOutputFilterByType DEFLATE text/html text/plain text/xml# Or, compress certain file types by extension:<Files *.html>SetOutputFilter DEFLATE</Files>

You can compress all type of content (image, css, js etc) using mod_deflate. Copy following code in htaccess to do this.

<Location />    SetOutputFilter DEFLATE      SetEnvIfNoCase Request_URI  \        \.(?:gif|jpe?g|png)$ no-gzip dont-vary    SetEnvIfNoCase Request_URI  \        \.(?:exe|t?gz|zip|gz2|sit|rar)$ no-gzip dont-vary</Location>

Also, you can add following code in your htaccess file and enable compression using mod_gzip.

<IfModule mod_gzip.c>    mod_gzip_on       Yes    mod_gzip_dechunk  Yes    mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$    mod_gzip_item_include handler   ^cgi-script$    mod_gzip_item_include mime      ^text/.*    mod_gzip_item_include mime      ^application/x-javascript.*    mod_gzip_item_exclude mime      ^image/.*    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</IfModule>

This technique only works if mod_gzip or mod_deflate modules are loaded in Apache. In our case, these modules were not there and our hosting provider refused to load it as we were using a shared hosting. So following can be another way of enabling compression.

GZip using PHP ob_start() method

If your hosting provider does not support mod_gzip module, ob_start() method can be used to enable compression in PHP file. For this you need to copy following line in top of the PHP file. You may want to add this line in start of the header file that gets included in every php.

<?php	if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))		ob_start("ob_gzhandler");	else		ob_start();?>

Above code will check whether your browser supports gzip, if yes, then it send ob_gzhandler method as handle to ob_start method which buffers the output. Thus output is compressed using ob_gzhandler. Only problem with this method is that you have to manually edit all PHP files or should have a header.php file that gets included in all files. There are still ways to achieve this without touching your PHP files. Read following trick.

GZip using php_value directive in htaccess

php_value directive can be used to append/prepend any PHP files in the request of change the output handler. First we will see how we can prepend a PHP file and achieve this. Copy the PHP code that we saw in above example in a file called gzip-enable.php. Now copy following lines in your htaccess file. Thus you need not to modify any of your PHP files can can prepend a PHP file with ob_start() method to all the files.

<FilesMatch "\.(txt|html|htm|php)">    ForceType application/x-httpd-php	php_value auto_prepend_file /the/full/path/gzip-enable.php</FilesMatch>

But what if you don’t want to prepend a PHP file? Still there is a way to specify default output handler using htaccess. Use following line in your htaccess file to tell your apache to register ob_gzhandler handler function as output handler.

    php_value output_handler ob_gzhandler

Compress CSS using htaccess and php_value

CSS Stylesheet files occupy significant size in overall webpage size. It is hence advisable to compress these files before sending them to client. This significantly improve the performance of a webpage. For compressing CSS files, we will first create a PHP file gzip-css.php with following code.

<?php   // initialize ob_gzhandler function to send and compress data   ob_start ("ob_gzhandler");   // send the requisite header information and character set   header ("content-type: text/css; charset: UTF-8");   // check cached credentials and reprocess accordingly   header ("cache-control: must-revalidate");   // set variable for duration of cached content   $offset = 60 * 60;   // set variable specifying format of expiration header   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";   // send cache expiration header to the client broswer   header ($expire);?>

Now add following lines in your htaccess file to enable compression for CSS files.

<FilesMatch "\.(css)">    ForceType application/x-httpd-php	php_value auto_prepend_file "/the/full/path/of/this/file/gzip-css.php"</FilesMatch>

Whenever a http request for .css will come to a server, the type of css will get converted to application/x-httpd-php, thus making them parsed using PHP. Then a file gzip-css.php will be prepend to this request which in turns compress the output using ob_start (”ob_gzhandler”) method.

Compress JavaScript (JS) using htaccess and php_value

Similar to above example for CSS, JavaScript files can also be compressed and sent to client. For this create a PHP file gzip-js.php and copy following code in it.

<?php   // initialize ob_gzhandler function to send and compress data   ob_start ("ob_gzhandler");   // send the requisite header information and character set   header ("content-type: text/javascript; charset: UTF-8");   // check cached credentials and reprocess accordingly   header ("cache-control: must-revalidate");   // set variable for duration of cached content   $offset = 60 * 60;   // set variable specifying format of expiration header   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";   // send cache expiration header to the client broswer   header ($expire);?>

Also add following lines in your htaccess file.

<FilesMatch "\.(js)">    ForceType application/x-httpd-php	php_value auto_prepend_file "/the/full/path/of/this/file/gzip-js.php"</FilesMatch>

Do you know other methods of compressing the output of PHP/JS/CSS files? Let me know, I will try to add them in this tutorial.Happy Compressing :)

As some of you may know, I am currently working on a content management system. Although I am not able to share all of the code – it is proprietary after all – I already made one debugging tool public. This tool can be used to test some common techniques which decreases the bandwidth generated by feed consumers. Today I am going to make a second tool public – including source code. It is a method to decrease the loading time of a page by combining all the different css or javascript files and compress them.About six months ago I noticed the pages generated by the content management system were in itself very clean and small, but that these pages still took a long time to load for new visitors. Even on a fast internet connection it took more than 8 seconds to load a basically empty page. The server generated the page in about 350ms, so that wasn’t the problem. The problem turned out to be a combination of two things: each page used more than 12 different css files because each plugin supplied its own css definitions and because the use of the rather large prototype and scriptaculous javascript libraries which also consists of a couple of different files. Now that an article about the same problem featured on the Yahoo! User Interface blog, I decided to make my solution public, so others can benefit from it.The solution turned out the be simple, combine all the different files into a single large file and compress that file using gzip. Unfortunately, if you do this manually you are going to run into maintenance problems. That single compressed file is no longer editable. So after editing one of the original source files you will have to recombine it with the other files and re-compress it.Instead of going for the easy – but hard to maintain – solution I decided to automate the process and thanks to a small PHP script and some clever URL rewriting I now have an easy to maintain method to speed up the loading of pages that use many or large css and javascript files.The idea is that you have one directory for css files and one directory for javascript files on your server. If you rewrite the URLs that point to these directories to a small script that intercepts the requests for those files. The script loads the file from disk and compresses it using gzip. It then sends that compressed file back to the browser. Given that javascript and css files compress really well this will greatly decrease the size of the data that is going to be transferred and thus decrease the time needed to download these files. Because this works completely transparently you do not need to change anything in your existing code.But there is more. Compressing the files will decrease the size of the data that needs to be transferred, it does not solve the problem that the browser can only download a limited number of files at the same time. If you have many different files that need to be loaded the browser will not optimally use the bandwidth it has access to. It will request some files from the server and wait until those files are retrieved before the rest of the files are requested. The solution to this problem is to combine all those different files into one large file. And this is exactly what the script tries to do. You can concatenate different files by simply adding the names of the other files to the URL of the first file.

Take for example the following URLs:
http://www.creatype.nl/javascript/prototype.js
http://www.creatype.nl/javascript/builder.js
http://www.creatype.nl/javascript/effects.js
http://www.creatype.nl/javascript/dragdrop.js
http://www.creatype.nl/javascript/slider.js

You can combine all these files to a single file by simply changing the URL to:
http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

The script will intercept the attempt to retrieve something from the javascript directory and will notice that you want to fetch multiple files at once. It will then concatenate the requested files, compress it and send it as one to the browser. Also notice that I include the files that come with scriptaculous manually and I do not use the scriptaculous.js file like you normally would. The reason for this is that scriptaculous.js loads each javascript file individually. If I use the scriptaculous.js file I will get the benefit of compression, but the different files won’t be combined into a single file.Unfortunately I noticed a nasty side effect of the combination of these two methods. If you combine many files the resulting files can be come quite large. Compressing those files takes some time and on a busy server that time will become large enough to negate a significant portion of the improvements you made earlier. But this problem can also be solved by simply adding a cache that stores an already combined and compressed version of the files. The cached version is automatically created the first time that particular combination of files is used and used every time – as long as the files are not changed. The result is that once the cache is created there is almost no overhead and the compressed file is delivered almost instantly.I’ve done some informal testing on my own website and I did get some impressive results. Before this script was added to my website you needed to download 8 javascript files, in total 168 Kb – the prototype and scriptaculous libraries. On average this took about 1905 ms. After installing this script you now need to download only a single file of 37 Kb which only takes around 400 ms. Your results may vary of course, but given that it shaved 1.5 seconds of a total loading time of 3.5 seconds, this script almost cut the time needed to load a page on my weblog in two.Configurating this script is easy. First you need to download and configure the combine.php script. By default this script look in the javascript and css directory in the root of your website, but if you are currently using different directories you can change these values at the top of the combine.php script. Upload the combine.php script to the root of your website. Secondly you need to create a cache directory that is writable by the web server. Again, by default this script will look for the cache directory in the root of the website, but you can change this in the combine.php script. Finally you need to create or modify your .htaccess file. If you do not have a .htaccess file you can create it in the root of your website and add the following lines. If you already have an preexisting .htaccess file you can simply add the following lines to the file:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

Note: if your preexisting .htaccess file already uses URL rewriting you do not need to add the first two lines. You can simply add the last two lines to the bottom of the .htaccess file.

Hôm trước đi soi mấy cái optimize thấy bài này cũng được, post lên cho mọi người cùng tham khảo.

There is a lot of whitespace in both stylesheets and JavaScript files. This is because of indented text and line breaks to name a few. They are typically also filled with comments to make them more maintainable. Believe it or not, it all adds up substantially to the overall file size. My tests show that stylesheets can be reduced by more than 30% and JavaScript files by 20%. That’s a lot.

I made two C# classes, which implement the IHttpHandler interface, one for stylesheets and one for JavaScript files. The easiest way to implement them is simply to add this line to the <system.web> section of the web.config.

<httpHandlers>
<add verb=”*” path=”*.js” type=”ScriptHandler” validate=”false”/>
<add verb=”*” path=”*.css” type=”CssHandler” validate=”false”/>
</httpHandlers>

You also have to make sure that the IIS lets the ASP.NET ISAPI filter handle files with .css and .js extensions.

The classes use regular expressions to remove whitespace and comments. Then it caches the cleaned file and adds a dependency to the real .css/.js file on disk. Every time you change the source file, the cache reloads.

In order to remove comments properly, you should use the /*  …  */ syntax and not //. Further more, it can be a problem for the JavaScript handler if a line isn’t closed with a semicolon. Enjoy.

File name: httphandlers.zip
File size:1.95 KB

By Mads Kristensen

Powered by WordPress | Theme: by 85ideas. Editor by Khoanguyen