5 Must Reads to understand AngularJS Service and Factory difference

As a beginner or intermediate, a lot of JavaScript developers tends to get confused between two most vital components of AngularJS – Service and Factory.

Reason, both tend to do kind of similar job, well it looks like initially when we can’t really distinguish the proper usage. I too had these confusions and few of my colleagues happen to ask me this particular question often and often. So here I am, compiled the list of very good writings – this will give you a perfect answer on what are AngularJS Service or Factory, how to use them, what are the differences etc.

  1. Answer by Doug T on StackExchange
  2. Usage example by Gil
  3. A StackExchange Community Wiki 
  4. AngularJS: Factory vs Service vs Provider by Tyler (He has got a cool website, check that out)
  5. AngularJS Service vs Factory – video by DevelopMentor

I hope, after going through those Q/As and the video if you were still in doubt – you have a clear picture of what Service and Factory are made for in AngularJS.

Top 5 Articles on HTML5 Audio Video

Learn HTML5 Audio Video

1. Everything you need to know about HTML5 video and audio

Here, Simon Pieters, from Opera, will walk you through everything basics you needed to know about HTML5 Audio & Video features. He says:

This article aims to provide all the nitty-gritty details of HTML5 media, the DOM API, events, and so forth, so you can implement your own HTML5 player with fallback to old browsers.

2. HTML5 Audio and Video: What you Must Know

Bruce Lawson talks on Nettuts+ about must know facts regarding HTML5 Audio/Video.

3. Getting started with the HTML5 Audio Video API

Very quick & a short article to get you started on making your own media players on HTML5 Video.

4. Using HTML5 Video and Audio in Modern Browsers

This time, in-depth learning on API, learn about browser fall back & how to handle those legacy browsers – from SitePoint.

5. How to Make Your Own Video Player On HTML5 Video

Once again very depth article. This article will take you thoroughly on how you can create your very own media player using HTML5 Audio & Video.

That’s it. Hope you will learn from very basic to creating your own full functional media players. Happy coding!

PS: Image used in this post banner is taken from 356PSD.com

Learning Gamification

Learning Gamification

Applying game design principles & techniques to non-game elements to increase user engagement is Gamification.

Wikipedia says:-

Gamification is the use of game design elements, game thinking and game mechanics to enhance non-game contexts.

The very best example of Gamification is FourSquare app & Nike+.  It is very very new concept so it’s a kid in our era.

Here are lists of very good place to learn more about Gamification, how you can use it today & what is the future of Gamification.

  1. Gamification –  Coursera Class
  2. Gamification & UX – Smashing Magazine article.
  3. Gamification by Designbook
  4. The Purpose of Gamification – O’Really
  5. Five Rules of Gamification – Forbes
  6. Fun is the Future – Mastering Gamification – Google TechTalks video

Hope the list above going to help you readers get more insight & details on Gamification. Have you come across any good  articles similar? Comment it down below, I will read it.

10 Best Articles to Learn PSD to HTML Conversion

This list article contains links of good resources where you can learn very best ways and methods of coding up a PSD into workable HTML/CSS templates. Target is for novice folks. Articles listed below will help you master in HTML/CSS crafting with industry best practices.


  1. Converting a clean magazine-style PSD template to HTML/CSS

  2. Converting a Design From PSD to HTML

  3. Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

  4. From PSD to HTML: Building a Set of Website Designs Step by Step

  5. How to Code up a Web Design from PSD to HTML

  6. PSD/HTML Conversion: Code a Clean Business Website Design

  7. Minimal and Modern Layout: PSD to XHTML/CSS Conversion

  8. Slice and Dice that PSD

  9. Building a Website (2 of 3): HTML/CSS Conversion

  10. From PSD to HTML the easy way – Using Ultimate CSS Framework

Top 10 Best Tools to Test your Mobile & Responsive Websites

Top 10 Best Tools to Test your Mobile Websites

Mobile Web Design, Responsive websites are the hottest trend in the Web industry now. Experts have made forecast that future is Mobile Computing. Luke’s infographic says more iPhone are sold in one day than babies born in the world.

Considering the trend nowadays we are working more on mobile websites, which is great. But do you have enough resources to check you work across multiple devices? I don’t have much. Here I have listed top 1o best tools to check mobile and responsive websites.

  1. Ripple

  2. iPhoney

  3. Mobilify

  4. Iphone4Simulator

  5. The Responsinator

  6. Mobilizer

  7. Opera Mini Simulator

  8. dotMobi Emulator

  9. Nokia Mobile Browser

  10. Test iPhone


That’s all for today. Any one of your favorite? Or any good one I missed? List them in comment below or RT us @CSSJunction

5 Best Articles to Learn Metro UI Design

Learn Metro UI Design

Microsoft Windows 8 is about to release. It will bring a totally new way in computing experience. Microsoft has changed the UI from classic bar button pattern to Metro Design Pattern. I think this is one of the most trending news in web designers world now.

Have you had any chances to learn Metro UI Design language? If not, here are 5 good resources  where you can learn Metro UI Design.

Metro Design Principles

Article by Arturot, an architect – he talks about core principles behind the Metro Design Language.

Link to article

Metro design guide for developers, v1.00

He is a developer, who codes yet shares the learning from Windows Phone design.

Link to article

Designing Metro UI Apps

This article is about designing apps for Windows 8. Definitely you can not avoid talking about Windows because its the origin of Metro UI.

In this article, you will find a video, really descriptive for Metro UI apps designing fundamentals.

Link to article

8 traits of great Metro style apps

One more video to see, quite lengthy – BUT it will give you straight views on why you should consider Metro pattern. Must watch.

Link to article

More Metro UI Resources

Link to article

Here you will find two slides to download and more article links to go further.

You also have more links to learn great things about Metro UI? Please comment it down.

Product Showcase PSD Template

We have an excellent PSD template freebie today. It’s super cool design helps to showcase your product in very well manner. I must say, it is a most attractive psd template released under CSS Junction.

Product Showcase PSD Website Template

Images used in the template are creative common from Behance gallery and fonts are from Google Fonts. Heading type is Tenor Sans and body copy is Buenard.

This template has been designed by Nepalese Web designer Sanjay Shrestha, a young and talented creative. You can follow him @shresthasans and here is his portfolio.

Isn’t it awesome that you can get this template right away. Yes it is. Get it:

Download PSD

Have something to say, spread words about this in the comment section below. Don’t forget  to follow us @CSSJunction and Subscribe our RSS feed for more attractive free PSD templates.

More PSD Templates: