The presentation covers the following points: 1) How to check the legitimacy of a website? 2) How to view a website in different screen sizes? 3) How to find what font or color a website is using? 4) How to detect the font of a text present inside an image? 5) How to take a full/custom screenshot and annotate it? 6) How to determine the development quality a website? 7) How to speed up a website? 8) How to optimize code for optimal website performance? 9) How to quickly make a static <div> based design responsive?

1. 9 Useful Things That Every Web
Developer Needs to Know
Presented by:
Nadeem Khan
nadeem.khan@arkhitech.com

2. 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.
●

3. How to check the legitimacy of a website?
(cont’d)
●
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)

4. 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/

5. How to view a website in different
screen sizes? (cont’d)
●
Custom view port size and auto animations are extremely
hand features of Viewport-Resizer

6. 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

7. 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).

8. 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.

9. 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/in
sights/
●

10. 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
●
●
●
●

11. 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.

12. 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:
●
<IfModule mod_expires.c>
●
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"
●
</IfModule>

13. 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

14. 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)

15. 7f. Lazy Load Images
● Lazy load all images below the fold using any of the
many JS libraries

16. 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)

17. 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

18. 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 </body> tag:
●
<script type="text/javascript">
●
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;
●
</script>

19. 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

20. 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 <head> and Scripts just
before the </body> tag
●
Inline small external CSS resources whenever possible
●
Write clean and validated HTML
●
Avoid CSS @import and use <link> instead
●
Avoid using HTML tables
●
Nesting HTML tables is a sin
●
Never leave an Image 'src' attribute empty

21. 9. How to quickly make a static <div>
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