Top 8 IDEs for JavaScript Development and Debugging

If you are starting off with writing some JavaScript, the first step is to choose an IDE (Integrated Development Environment). An IDE typically includes a Compiler, Code Editor (with/without Intellisense) and a Debugger. There are tons of additional features that almost every IDE now includes but these are the basic components. Let’s start with a list of possible IDEs you can use for writingJavaScript and debugging them.

1. Visual Studio 2010 with Visual Web Developer (Windows)

If you’re already writing your code in Visual Studio then this would be an ideal option. Visual Web Developer does not come by default in the VS 2010 installation so you will have to add it separately. To start off with, you can download and install the Express edition (free) of Visual Web Developer from here. Not only can you write and debug JS in VWD 2010 Express but you can also write RIA (Rich Internet Applications), WPF (Windows Presentation Foundation), in fact write a complete web-application.

2. Firefox + Firebug (Windows, Linux, Mac OS X)

If you do not want another heavy installation and just want to write plain JS and test it right inside your browser, you can do that with Firebug installed over Firefox. If you do not have Firefox thendownload install the latest version (3.6.13 at the time of writing this) and then download and install the Firebug plugin for Firefox from here (Or you can go to Tools –> Add-Ons –> Get Add-Ons and type in Firebug and install it). This is by far one of the most popular and most download Firefox Add-on too which speaks for itself.

Here’s a simple starter for writing and live-debugging JS using Firebug:

Fire up Firefox and open the JavaScipt that you want to inspect and debug.

If you have installed Firebug then a small bug icon will appear at the bottom-right corner of Firefox, that’s where you will open Firebug right inside Firefox. Since we’re inspecting JS, you need to click theScript button in the Firebug button panel:

You can set break point, conditional breakpoints and also profile your JS in addition to a couple of other features. This is a nice place to get started with Firebug.

Since Firebug does not include a Text Editor in which you can write code but you can add any text editor (preferably Notepad++) by going to Tools –> Firebug –> Open With Text Editor –> Add New Editor

3. Aptana Studio (Windows)

If you want to do some professional development then Aptana Studio would be a decent choice and best of all, it’s free! Download and install from here. You can use Aptana as a plugin with your Eclipse or you can download the standalone Aptana Studio. If you already use Eclipse then the Aptana plugin would be the natural choice.

Aptana Studio is pretty simple compared with Visual Web Developer + VS2010. You can Debug your JS using Firefox+Firebug. What’s really cool about it is the support for popular JS libraries like Dojo, Yahoo! UI etc. If you’re planning on using 3rd party JS libraries then you should choose Aptana Studio. It also comes with a nice FTP client integrated into it which comes in handy when you want to do live-development. Moreover, you can also preview your JS in action right inside it using the integrated browser view (it supports IE, Firefox and Safari).

4. Komodo IDE (Windows, Linux, Mac OS X)

Even though Komodo is not free but it’s worth your money if you write JS (or web apps for that matter) for a living. Komodo IDE comes packed with a code editor that supports almost every language in which you can write web apps. Besides all the usual features you can integrate almost any source control into the IDE. It also includes Database Explorer which lets you dig into your website’s database right from the IDE. If you’re developing web apps then you know how handy this could be. You can find the whole list of features on here.

5. Komodo Edit (Free) (Windows, Linux, Mac OS X)

Komodo Edit is the free version of Komodo IDE minus the integrated debugger and a couple more less-important features. I would recommend trying out your hands on Komodo Edit first before going for the Komodo IDE since it would give you a feel of working in Komodo. It is free and open-source unlike the Komodo IDE. You still get a code editor, intelli-sense and it also integrates nicely with Firefox+Firebug. You can get Komodo Editor from here.

6. Eclipse + JSEclipse Plugin (Windows, Linux, Mac OS X)

JSEclipse is a nice plugin for Eclipse so if you’re already developing on Eclipse then this would be a natural choice. However, I should warn that since Adobe acquired Interakt, the company that made JSEclipse, active development has stopped on JSEclipse as of late December 2010. But still if you want to just try out writing JS then it will be a good start since it can easily integrate with Firefox+Firebug. When I say that it can integrate, what I mean is that you can use it’s source editor as a text editor for Firebug. Find out more about JSEclipse on here.

7. NetBeans (Windows, Linux, Mac OS X and Solaris)

NetBeans also has some great support for writing simple as well as complex JavaScript. It sports a source code editor with auto-complete and intelli-sense and a debugger that integrates well with Internet Explorer as well as Firefox. And just like Aptana Studio, it has extensive support for integrating popular AJAX, JS libraries like Yahoo! UI, Prototype, Script.aculo.us etc into your code. You can target your JS, in fact your complete app for the whole range of popular browsers and check separately for each browser right inside it. There’s a very nice tutorial on getting started with writing Web Services that would come in hand. You can view it here. Click here to read more about the JS support in the NetBeans IDE.

8. WebStorm (Windows, Linux, Mac OS X)

WebStorm by the JetBrains has to be the latest JavaScript IDE. It’s light-weight and sports a JS code editor, debugger (support for putting breakpoints, conditional breakpoints, step-in, step-over etc). You can also integrate Firebug with WebStorm to debug right inside Firefox. It also has good support for writing HTML5 and just like Aptana Studio you can connect to an FTP server to sync your scripts. I wish they had support for some popular Source Control plugins since without it we cannot write large applications. Find out more about WebStorm’s JavaScript support on here. You can try out the 45-day trial.

Mozilla Offers Absolutely FREE JavaScript, HTML5 and CSS Courses

How about starting off with learning JS, HTML5 and CSS from the gurus? After the first successful round of this initiative in which 15 courses were offered in collaboration with P2PU (Peer 2 Peer University), the next round which will include up-to 30 different courses (absolutely free) ranging from writing awesome web-applications using JS, CSS and HTML5 to SEO (Search Engine Optimization). Registration opens from January 8 2011. The courses will be from 8 to 12 weeks long. You can sign-up on here.

This article originally published by:-programmersfish

Top 7 Websites That Offer Online Coding Courses

Internet is full of learning resources and tools. You need to remain constantly updated and active with latest knowledge of technologies in today’s world. There are some great frameworks available that can help you build websites but, to build something from scratch, you need deep knowledge of programming language. You can take an online course to learn to code yourself. Today we have listed top seven websites that offer great courses that will help to get you started

1. Code School:

Code School is an excellent online resource that helps you in learning many stuff on the internet. The platform was initially introduced by Pluralsight. Code School believes in learning by doing. It offers great quality content and student experience. You can follow the recommended path that will guide you through succession of different courses or you can take a single course of your choice. Some courses are for free while, some are paid. You can buy monthly subscription for just $29/month.

2. Skillcrush:

Skillcrush is a unique online coding course platform. The tool resembles to actual curriculum in classroom. You can enroll in either one of three week course or you can enroll in three month blueprint. Students can access to classroom with chat forum and interact with fellow students or they can also interact with instructor using office hours feature.

3. Udacity:

Udacity has robust range of online courses. The platform is being used by thousands of students across the world. The courses are about different topics. There are some serious advance courses for programmers who are looking to expand their knowledge. You can easily scan through Udacity and choose the course that suits you the best.

4. Code Avengers:

Code Avengers is a very simple platform that offers easy to understand step-by-step intersections for learning HTML, CSS and JavaScript. This platform has a mini phone simulator next to editor which helps you preview your work live. Code Avengers take you through nice level of exercise.

5. Khan Academy:

Khan Academy follows natural approach of learning. This tool lets you hear to instructions while you are practicing the coding. It feels as easy and natural as sitting with your tutor. The courses are straightforward and easy to follow. There are great exercises given with each course that test and polish your knowledge. Some mini-quizzes are there with small demo which helps you think about things conceptually.

6. Hack Design:

Hack Design is a great resource of aggregated learning content. The courses give on Hack Design are nothing but collections of aggregated content. This content can either be articles or videos from around the web. Hack Design has lists with recommendations from people. The platform has an excellent catalogue of design resources for all level.

7. Udemy:

Udemy has expensive catalogue. There are thousands of courses listed on Udemy There are some topics other than web and technology as well. Some courses listed on Udemy are free while, some are paid. You can find course of any are of interest on Udemy.

This article originally published by:-efytimes

5 Ways To Streamline Web Design Workflow

Productivity and efficiency are main concern for web designers. The ability to produce great quality content is dependent upon their skill set and efficiency. There are some tips that web designers can follow in day-to-day life to have great workflow. Here are five ways to streamline your web-design workflow.

1. Optimise and Customise Work Environment: 

Web designers are expected to work with different types of software. The work matters a lot in quality of content web designer produces. It’s best to have bunch of great tools handy that you can use to optimize applications. All the applications used by web designers have great short cuts. Well-organised work environment can help in saving lot of time and it ultimately results in great quality work. You can create a main folder for a project and put everything related to that project inside this folder. You can create sub-folders like current module, done, articles, pdfs, design elements etc. This system can help you locate your files very quickly. It’s also important to keep backup of this project, you can use external drive or cloud storage for backup.

2. Research, Wireframes and Sketches: 

Even though using paper and pencil for design may sound like old age, it is important that you follow this exercise when you start working on a new project. The time spent in planning, sketching and wire framing is time well spent. This helps in boosting creativity as you are not restricted by computer interface and limited set of tools and canvas. When you have an idea and it needs to be developed, always do research, wireframes and sketches on paper. This helps and saves lot of time in long run.

3. To-Do List And Tasks: 

If you follow the practice of writing your to-do list for the next day before going to sleep, it helps in saving maximum time. You can re-arrange this list by order of importance in the morning. Create a simple schedule for the work and put work on the list according to priority. You will end up saving lot of time and finishing the project before deadline.

4. Automation of Tasks: 

All actions in photoshop are time-saver. But, don’t forget to automate bunch of other things. You can use Automator app to take care of smaller tasks like renaming and resizing on OS X. There are many Automation apps available for all platforms. Using these apps will help in saving your lot of unproductive time.

5. Pre-Made Design Elements and Reusable Templates: 

Creating something from scratch may sound like an interesting thing to do but, it takes lot time. There are certain design templates and elements that you can use all the time. You can have your icon set or preferred CSS framework. There are many shape libraries available that include social media site’s logos and marks. This helps in reducing lot of time that is spent in creating original icons. 

This article originally published by:-efytimes

Apple Watch Launched!

On Monday, Apple Inc. has finally launched its much-awaited watch, Apple Watch, that costs up to $17,000. The Apple Watch has yellow and rose gold models with sapphire faces. The Apple Watch will be available for order on 10 April and will arrive in stores on 24 April. There is no word about its India launch yet.

Apple Watch is an excellent blend of fashion and technology. While launching the watch, Apple CEO Tim Cook shared the stage with model Christy Turlington Burns and Apple engineers showed how to send sketches and even heartbeats with the Watch. But the entire world had been wondering whether the Apple Watch had the “killer app” that would expand its reach to a vaster audience. In September the Apple Watch was unveiled for the first time.

The Apple Watch sport will start at $349 for its smaller 38-mm model. The standard version of the watch will start at $549 while the high-end Edition watch will start from $10,000. While launching the product Cook said, "I have been wanting to do this since I was five years old.” The $17,000 Edition of the Watch has a 38-mm sized smaller version which has a case made from customised version of 18-karat rose gold with a sapphire display and it also equips a magnetic charging case.

The $349 Sport model carries the same size but it has an aluminium case along with a 'sport band' as well as a magnetic charging cable. Cook has described the watch to be handling many functions which are associated with the iPhone and it will track exercise as well as remind wearers of events with a tap on the wrist. The official website says that all the models will take 2.5 hours to charge from 0 per cent to 100 per cent, and the larger model has longer battery life. 

This article originally published by:-efytimes

10 Essential HTML5 Animation Tools For Designers

HTML5 has been one of the most popular programming language among web developers. The robust programming language has great capabilities of producing better world wide web content. The rise of HTML5 has grown rapidly in last three years. The new technologies introduced in HTML5 are far better. HTML5 technology is supported by modern browsers like Chrome, Firefox, Internet Explorer and many more. Today we have listed ten HTML5 animation tools that can help you with your work.

1. Mixeek:

Mixeek is a free software tool that can be used for designing and interactive web animation. The tool is based on JavaScript, CSS3 and HTML5. Mixeek was developed to bring lightweight and easy to use alternative for paid animation tools.

2. Animatron:

Animatron is an intuitive design and publishing editor software. You can use Animatron to design content like banners, infographic, creative animations for desktop computer, mobile device and anything of your choice.

3. Tumult Hype:

You can use Tumult Hype to create beautiful HTML5 web content. The content created using Tumult is interactive and has great animation capabilities. You can use this framework from desktop, smartphone and ipads. It doesn't require to have coding knowledge.

4. Mugeda:

Mugeda is preferred by many authoring toolkit, advertisers and agencies to unleash their creativity and to create best quality media ad units. The tool is best known for its abilities to create great quality ad units, banners, interstitials, expandable and mini games.

5. HTML5 Maker:

HTML5 Maker is popular tool used for building sliders, banners and impressive graphics with minimum efforts. The tool is available for free. It doesn't require you to have any special programming knowledge.

6. Hippo Studios:

Hippo Studios is a great platform for creating powerful animation, games, presentations, apps and multimedia websites. The projects created using Hippo are support by most browsers and devices.

7. Sencha:

Sencha Space is a secure application environment for HTML and JavaScript based applications. The tool helps in organization to simplify application development, security, maintenance and deployment to desktop, tablets and smartphones. The tool is best known for its security features.

8. blysk:

blysk is very useful animation tool. It provides a great platform for animation and web designers for building intuitive animation for websites and other internet projects.

9. Radiapp:

Radi is a powerful tool for animation. It is most commonly used for creating of runtime video and graphics. It provides realtime graphics editing interface for modern websites.

10. Createjs:

Createjs is a JavaScript library for working with HTML5 Canvas Element. The tool is best known for creating games, generative art and other graphical tools. It provides great graphical experience. 

This article originally published by:-efytimes