WebAppers

/ best free open source web resources /

Graphic Resources

How to Diagnose JavaScript Errors Faster with Error.stack

Posted · Category: Information

Modern browsers like Internet Explorer 10 support for Error.stack, which enables Web developers to diagnose and correct bugs faster, especially those that are difficult to reproduce. Developers can build amazing apps with the capabilities of Web platforms that power today’s modern browsers as well as apps in Windows 8. The increasing power and complexity of these apps means developers need better tools like Error.stack for handling errors and diagnosing bugs. In this article, I’ll show you some simple debugging techniques to help save you time.

Debugging Applications

Structured error handling in JavaScript rests on throw and try/catch – where the developer declares an error and passes the control flow to a portion of the program that deals with error handling. When an error is thrown, Chakra, the JavaScript engine in Internet Explorer, captures the chain of calls that led up to where the error originated – also referred to as the call stack. If the object being thrown is an Error (or is a function whose prototype chain leads back to Error), Chakra creates a stack trace, a human-readable listing of the call stack. This listing is represented as a property, stack, on the Error object. The stack includes the error message, function names, and source file location information of the functions. This information can help developers rapidly diagnose defects by learning what function was being called, and even see what line of code was at fault. For example, it might indicate that a parameter passed into the function was null or an invalid type.

Let’s explore with an example of a simple script that attempts to calculate the distance between two points, (0, 2) and (12, 10): Read the rest of this entry »

A Fast & Fully Featured Auto-Complete Library

Posted · Category: Forms, MIT License

Typeahead.js is inspired by twitter.com’s autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library. It displays suggestions to end-users as they type.

It works with hardcoded data as well as remote data. It allows for suggestions to be drawn from multiple datasets. It supports customized templates for suggestions. It also plays nice with RTL languages and input method editors. It is licensed under MIT License.

typeahead-js

Requirements: jQuery Framework
Demo: http://twitter.github.com/typeahead.js/
License: MIT License

Giveaway 3 Awesome Templates from TemplateMonster

Posted · Category: Announcement

In this contest we’ve teamed up with TemplateMonster to give away 3 templates from their collection. Simple leave a comment to Win a WordPress Theme, a Joomla Template or a Magento Theme from TemplateMonster.

template-monster

What Can You Win?

  • One of three templates of your choice

Please keep in mind: you can choose from 1800+ WordPress Themes, 1200+ Joomla templates and 550+ Magento themes which you can find at templatemonster.com.

How to Win

To enter, simply reply to this post and let us know which of TemplateMonster’s templates you want to get for free and why you need it.

  • For example: “I want to win a WordPress Theme #42801 because it’s perfect for my corporate blog”.

Please follow the links below to choose the template you like best. If you win, this template will be your prize

Click here to see WordPress themes
Click here to see Joomla templates
Click here to see Magento templates

The prizes are provided by TemplateMonster, a US based company offering WordPress themes, Joomla templates, Magento themes, and other types of website templates.

Rules & Terms

No purchase or payment of any kind is necessary to enter or win. One entry per person please.The three lucky winners will be chosen at random and notified via email. Be sure your email is correct so we can contact you if you win. Of course, your email address won’t be displayed or used for any other purpose than contacting you about the prize. Contest ends Thursday, Tuesday 28th. Good luck!

A Search Engine for Vectors, Photos & PSD Files

Posted · Category: License Free, Stock Photos

Freepik is a search engine that helps graphic and web designers to locate high quality photos, vectors, illustrations and PSD files for their creative projects.

Freepik tracks and locates free graphic content on the Internet and it displays the results in an orderly layout for easy access. Freepik makes it easier for you to find the files you need without manually searching dozens of websites.

Freepik Robots visit hundreds of web sites searching for free graphic resources, they read the contents of these sites and they select them if useful. An algorithm determines the content’s value and it ranks the results according to quality and relevance criteria. This is why you find the very best inspiration for you projects.

freepik

Source: http://www.freepik.com/

jQuery Plugin to Create 360 Degree Image Slider

Posted · Category: Gallery, GPL License, MIT License

ThreeSixty Image Slider Plugin is a jQuery plugin to create 360 degree product image slider. The plugin is full customizable with number of options provided. The plugin have the power to display images in any angle 360 degrees. This feature can be used successfully in many use cases e.g. on an e-commerce site to help customers look products in detail, from any angle they desire.

360-slider

Requirements: jQuery Framework
Demo: http://creativeaura.github.com/threesixty-slider/
License: MIT, GPL License

A Fully Responsive HTML5, CSS & JavaScript Toolkit

Posted · Category: Framework, MIT License

Groundwork is a fully responsive HTML5, CSS and Javascript toolkit. Using Groundwork, you can quickly build web apps that work on virtually any device. Groundwork has been built from the ground up with the incredibly powerful CSS preprocessor, Sass.

Featuring an incredibly flexible, nestable, fluid grid system: the Groundwork grid system supports any columns in any fractional amount from halves to twelths. Groundwork is open-source, hosted on Github and 100% free.

groundwork

Requirements: Sass & Compass
Demo: http://groundwork.sidereel.com/
License: MIT License

A Complete Guide for Building HTML5 Games

Posted · Category: Information

I’m currently spending most of my time explaining to students, hobbyists, professional developers and teachers how to build games using HTML5. I then recently thought: rather than keeping all these details for small audiences, wouldn’t it be smarter to share it with you?

This article is then based on my own experience. I will probably omit some crucial things some of you may know. But it will try to update this blog post along with my own new discovers and of course based on the feedbacks you will kindly provide in the comments or via Twitter.

But why are so many people currently interested in HTML5 Gaming?

Well, simply because today, we can really use HTML5 to target multi-platforms using the same code: for desktop machines of course (with IE9/IE10, Firefox, Chrome, Opera & Safari), for iOS & Android tablets & phones and Windows 8, and its future associated millions of tablets & PC, is also warmly welcoming HTML5 Games! I then frequently see some HTML5 gaming projects ported to each of these platforms with almost no effort.

What’s more, the modern JavaScript engines performance coupled with the GPU hardware-accelerated graphics layers enable us to build great games in HTML5 with confidence.

Note: we will only talk about the <canvas> tag of HTML5 and about SVG in this article.

Canvas & SVG: 2 ways to draw on the screen

The first thing you need to understand before building your first HTML5 game is how to draw nice objects on the screen. There are 2 ways to do that and to better understand their differences, you should start by reading this article from Patrick Dengler (member of the SVG W3C Working Group): Thoughts on when to use Canvas and SVG

On my side, I’ve re-used parts of Patrick’s materials to build a 45min internal session for my Microsoft’s colleagues last year. You can watch it via this video I’ve made (using HTML5 <video> of course!): Read the rest of this entry »

8 Smashing eBooks for Responsive Web Design & JS

Posted · Category: Information

One of the neatest parts about programming is that there’s always something new to learn. And with so much knowledge to absorb you’d literally need a computer chip in your head to remember it all. That’s why it’s a great idea to build up a library of informational programming books.

Whether you’re a complete beginner or just looking to polish off some of the rust, this collection of 8 informational eBooks covers the most important aspects of coding for Web Design. These high-quality bundle from Smashing Magazine will give you the lowdown on HTML and CSS, as well as the most-recent applications for Responsive Web Design and improving your JavaScript and jQuery skills.

smashing-books

This fabulous collection of 8 Smashing eBooks all about Coding for Web Design normally sells for $39.92, but for a limited time only you can get the entire collection for just $24! That’s a 40% discount!

Winners of 10x One Year Atmail Cloud Accounts

Posted · Category: Announcement

Thank you for all of the participants of Giveaway 10x Atmail Cloud Accounts for Free. We are happy to announce the following winners. Congratulations. You will receive an email from Atmail with instructions of getting your prize shortly.

1. wites
2. Jimmy Westberg
3. fadlisaad
4. Nathan Mickler
5. David Corbacho
6. Gonik
7. Cade Collister
8. Andrei
9. Chris Griffin
10. Gianmarco

WebAppers will continue giving away some really nice web development tools and resources to our readers. Please feel free to suggest what you would like for the next Giveaway under this post. Thank you.

Enhance Built-in Find Function with Cinnamon.js

Posted · Category: MIT License, Tools

A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the link “@username” instead.

Cinnamon.js prevents just this situation, taking some of the pain out of naming things. It allows users to find links, images, and other content by their synonyms, using the browser’s built-in Find function.

find-in-page

Requirements: JavaScript Framework
Demo: http://thomaspark.me/2013/02/cinnamon-js-find-in-page…
License: MIT License

Page 2 of 4«1234»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons