9 Useful Things that Every Web Developer Needs to Know
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

9 Useful Things that Every Web Developer Needs to Know

  • 256 views
Uploaded on

The presentation covers the following points: ...

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?

More in: Internet , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Developers might have a clear idea on developing a web application in a successful manner. But to build a website effectively, people has to examine some significant points to be considered and included in the development phase.

    This presentation would be a great assistance for the developers to develop a web application in an intellectual way.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
256
On Slideshare
256
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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