9 useful things that every web developer needs to know

Download 9 Useful Things that Every Web Developer Needs to Know

If you can't read please download the document

Upload: simobo

Post on 16-Apr-2017

712 views

Category:

Internet


0 download

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