9 useful things that every web developer needs to know
TRANSCRIPT
9 Useful Things That Every Web Developer Needs to Know
9 Useful Things That Every Web Developer Needs to Know
Presented by:
Nadeem Khan
[email protected]
1. How to check the legitimacy of a website?
Alexa Rank/Compete Rank
Google Page Rank
No. of Indexed Pages on Google
Moz Rank
Dmoz listing
Domain Age/Expiration
Web of Trust Ranking
Note: Social Media fan base has nothing to do with legitimacy of a website. Many scam websites have thousands of fake fans on Facebook, Twitter, Google+ etc.
How to check the legitimacy of a website? (contd)
Use Webrank SEO for traffic ranks and Google Page Rank (Alexa Rank below 25,000 and PR 3+ is good)
Google this site:exampledomain.com and note the number of pages indexed (higher is better)
For Moz Rank install Moz Bar extension (Moz Rank of 4+ is good)
Manually check whether site is listed on Dmoz or not (Dmoz only accepts quality and one of a kind websites)
Manually check Domain Age (3-4 years is normally good) and Domain Expiration (2-4 years is normally good) via http://whois.domaintools.com/
Green WOT Rank indicates safe website (Webrank SEO extension shows WOT Rank also)
2. How to view a website in different screen sizes?
Testing a responsive web design in different screen sizes is really a hectic task
Say hello to Viewport-Resizer
Experimental browser tool available at http://lab.maltewassermann.com/viewport-resizer/
How to view a website in different screen sizes? (contd)
Custom view port size and auto animations are extremely hand features of Viewport-Resizer
3. How to find what font or color a website is using?
Colorzilla browser extension makes it a breeze to detect the color of any element present on a page
Whatfont browser extension makes it a breeze to detect the font of any text present on a page
4. How to detect the font of a text present inside an image?
This is a very tricky thing but the community present at http://www.myfonts.com/ is really good and quick about it.
You just need to upload the image and the community members there will identify the font within hours (its absolutely free).
5. How to take a full/custom screenshot and annotate it?
There are various browser extensions that can take screenshots but nothing can come close to what Awesome Screenshot: Capture and Annotate extension provides.
You can take full page, custom selected area screenshots and then can crop, annotate and label them easily.
6. How to determine the development quality a website?
Apart from the basic w3c HTML and CSS validations, these tools are extremely handy:
http://gtmetrix.com/ (shows both YSlow and Pagespeed reports)
http://media4x.com/test/
http://tools.pingdom.com/
http://developers.google.com/speed/pagespeed/insights/
7. How to speed up a website?
Use a CDN (e.g. MaxCDN and CloudFlare)
Leverage browser caching
HTML, CSS and JS Minification
Enable compression
Optimize and Scale Images
Combine CSS and JavaScript
Defer the parsing of JavaScript
Lazy Load all Images (e.g. jQuery Lazy Load)
Serve images from a different server
Use CSS Image Sprites ()
Choose web hosting wisely
7a. CDN
A Content Delivery Network serves content (usually static content like images and JavaScript) to end users from alternative servers that are geographically closer to the users.
7b. Browser Cache
Browser caching enables a browser to "remember" the resources that it has already loaded
Define these expire headers in your .htaccess file:
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/xhtml+xml "access 1 month"
ExpiresDefault "access 1 year"
7c. HTML, CSS and JS Minification
Use YSlow or Page Speed to detect resources that need minification
Then minify CSS with 'yuicompressor' OR http://cssminifier.com/
And JavaScript with 'yuicompressor' OR http://javascript-minifier.com/
Note: Minification is nothing but removal of extra white space, newlines, comments and tabs etc
7d. Image Optimization and Scaling
Use .jpg over .gif and .png whenever possible
Use Smush.it or RIOT to optimize images
Don't resize images in CSS or HTML and only serve scaled images
Use RIOT or Photoshop to resize images
Define and fill the 'alt' attribute in all images (mandatory in HTML5)
Use CSS over image whenever possible (mostly while defining backgrounds)
7f. Lazy Load Images
Lazy load all images below the fold using any of the many JS libraries
7g. Serve Images from a different server
Many browsers only allocate two sockets to downloading assets from a single host. So, if index.html is downloaded from www.domain.com and it references 6 image files, 3 javascript files, and 3 CSS files (all on www.domain.com), the browser will download them 2 at a time, with the other blocking until a socket is free.
Serve images from a sub-domain or a different server to enable parallel downloading of resources (most CDNs offer this out of the box)
7h. CSS Image Sprites
A CSS image sprite is a collection of images put into a single image to avoid multiple server requests.
Use any reliable tool like http://spritepad.wearekiss.com/# to quickly generate a sprite and its CSS
7e. Deferring JavaScript Parsing
Processing of all elements below an external script is blocked until the browser loads the code from disk and executes it.
Identify all JavaScript functions that are not actually used before the onload event and place it in another external file which you can download after the onload event.
Place this code just before the tag:
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
7i. Choosing a web hosting
A good web hosting company is extremely important but its mostly a matter of opinion. Certain factors however can help in making the right decision like:
Server Uptime
Server Response Time
Value of Money w.r.t Resources Offered
Customer Support
Positive Reputation and Reviews
8. How to optimize code for optimal website performance?
Minimize global variables
Use hardcoded HTML in header as much as possible
Avoid DB calls as much as possible
Put/Include Stylesheets in the and Scripts just before the tag
Inline small external CSS resources whenever possible
Write clean and validated HTML
Avoid CSS @import and use instead
Avoid using HTML tables
Nesting HTML tables is a sin
Never leave an Image 'src' attribute empty
9. How to quickly make a static based design responsive?
Its a simple two step process:
Defining media queries for different screen sizes
Setting auto/percentage widths with max-widths
Note: CSS Frameworks like Bootstrap or Foundation automatically provide responsive UI elements
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master subtitle style
Click to edit Master title style
Click to edit Master text stylesSecond level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master text styles
Click to edit Master title style
Click to edit Master text stylesSecond level
Third level
Fourth level
Fifth level
Click to edit Master text stylesSecond level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master text styles
Click to edit Master text stylesSecond level
Third level
Fourth level
Fifth level
Click to edit Master text styles
Click to edit Master text stylesSecond level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master title style
Click to edit Master text stylesSecond level
Third level
Fourth level
Fifth level
Click to edit Master text styles
Click to edit Master title style
Click to edit Master text styles
Click to edit Master title style
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master subtitle style
Click to edit Master title style
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master text styles
Click to edit Master title style
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master text styles
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master text styles
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master title style
Click to edit Master text styles
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click icon to add picture
Click to edit Master text styles
Click to edit Master title style
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit Master title style
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level