iCheck is super customized checkboxes and radio buttons with jQuery. iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.
iCheck is verified to work in Internet Explorer 7+, Firefox 2+, Google Chrome, Safari 3+ and Opera 9+ browsers. Should also work in many others. Mobile browsers like Opera mini, Chrome mobile, Safari mobile and others are also supported. Tested on iOS, Android, BlackBerry and Windows Phone devices.
Requirements: jQuery Framework
Demo: http://damirfoy.com/iCheck/
License: MIT License
One of the most stubbornly persistent misconceptions about HTML5 is that it’s effectively unusable for years to come. With that myth and the uncertainty over fragmented browser support for HTML5’s new features, it’s easy to find someone with reasons for avoiding HTML5 right now.
But while some features are legitimately not ready for use in production, many of the new APIs in HTML5 have solidified enough to be relied on in newer browsers like Chrome, Firefox 4 and Internet
Explorer 9. In fact, even Internet Explorer 6 includes support for one of HTML5’s “new†features, contentEditable. More importantly, many of the new features in HTML5 are compelling enough that waiting another decade to begin using them doesn’t make sense.
Cross-Browser Support
The most nagging issue with making the leap to HTML5 is that most of us have no choice but to support a variety of older browsers that have little or no support for the most useful new APIs. The thought of adopting a new Web technology conjures up nightmares of cross-browser inconsistencies, unmaintainable branching code, browser sniffing and a host of other problems. However, there’s an underappreciated technique that can entirely mitigate those problems for certain new features of HTML5 and still allow you to develop against the new APIs as though all your users had upgraded their browsers overnight: polyfills.
Polyfilling is a term coined by Remy Sharp to describe an approach for backfilling missing functionality in a way that duplicates the missing API. Using this technique allows you to write application-specific code without worrying about whether or not each user’s browser implements it natively. In fact, polyfills aren’t a new technique or tied to HTML5. We’ve been using polyfills such as json2.js, ie7-js, and the various fallbacks for providing transparent PNG support in Internet Explorer for years. The difference is the proliferation of HTML5 polyfills in the last year. Read the rest of this entry »
Google has announced it’s going to retire Google Reader. If the service has been an essential part of your media diet, don’t despair. Feedly is the best alternative of your Google Reader, partially because it’s free, cross-platform, and available on multiple devices. Plus, they make importing your Google Reader subscriptions so ridiculously easy that it’s worth a try.
You can easily organize your favorite blogs, news sites, podcasts and Youtube channels and access them all in one place or sync with Google Reader. There are multiple layout options, auto-mark as read, tagging, advanced sharing, keyboard shortcuts.
If you do not like RSS Feeds anymore, you can always follow us on Facebook, Twitter, and Google Plus. You can also subscribe to our newsletter with freebies and exclusive deals from webappers.
Requirements: –
Demo: http://www.feedly.com/
License: License Free
Intro.js is better introductions for websites and features with a step-by-step guide for your projects. User have the ability to navigate with the mouse, or the keyboard – â†, →, ENTER and ESC to exit. It’s fast and small, with only 4 KB JavaScript and 2 KB CSS.
Better compatibility is on the roadmap, but currently it should work in recent versions of Firefox and Chrome (probably IE10, too!). It’s Free and open-source (including commercial use). It is released under MIT license.
Requirements: JavaScript Framework
Demo: http://usablica.github.com/intro.js/
License: MIT License
Beyond the buzz of Web 2.0, mashup applications (also called hybrid or situational applications) bring the promise of creating meaningful experiences by feeding other people’s data to your application. For businesses, this means consuming data without the overhead of infrastructure or data storage and being able to tap into established technology vendors such as Bing Maps, LinkedIn or Twitter. While combining components from all over the web can help you quickly build a powerful application, it can also expose your users to malicious content that sneaks into your application from your providers. How can you protect your users and still realize the potential of mashup applications for the enterprise?
In this series, I’ll investigate how to mitigate security issues that can come along with a mashup application. To frame the discussion, we’ll build an application for the fictional Vision Sciences Corporation, leveraging risk management, good-old input validation and the muscle of modern browsers to keep users safe. Each article will focus on one of these elements, starting in this article, where I’ll examine how modern browsers help isolate content. At the end of this article, you’ll understand how the browser is the first layer in your defense-in-depth strategy against malicious mashup madness.
What Are We Building?
I always find a sample project helpful to illustrate development issues. Talking about the sample lets me dive into a narrative, not just detached code. So to start, imagine the following scenario:
You are a developer at Vision Science Corporation, and your product team has requested that you build an HTML5 application for the company’s office locations around the world that shows news about health and safety risks combined with medical information distilled from Twitter.
Being a savvy developer, you know that you can get this data from a variety of sources in your organization and through external providers like Bing Maps and Twitter. Here is a breakdown of the data sources and systems for the application: Read the rest of this entry »
Looking to better monetize your site? Having some serious issues with conversions? If you’ve got the traffic but aren’t making the profits, then you could certainly use some help. Now, don’t go throwing thousands of dollars down the drain by paying an agency to simply analyze your site and come up with some new creatives for you. Instead, do it all yourself at a fraction of the cost.
With the Ninja Graphics Kit, you’ll get all of the essential conversion-boosting graphics you’ll ever need. We’re talking one massive, ginormous bundle of high-quality, professional graphics that cater towards increasing sales on your site. And thanks to this Mighty Deal, you can convert a 60% savings for yourself!
This massive collection of conversion-exploding graphics currently sells for $39, but for a limited time only, you can get it all for a mere $14!
Swipebox is a touchable jQuery lightbox. It is a jQuery “lightbox” plugin for desktop, mobile and tablet. It supports Swipe gestures for mobile, Keyboard Navigation for desktop, CSS transitions with jQuery fallback, Retina support for UI icons, and Easy CSS customization.
It has been tested on Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, windows phone. It is released under MIT License.
Requirements: jQuery Framework
Demo: http://brutaldesign.github.com/swipebox/
License: MIT License
Countable.js is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable does not rely on any libraries and is very small in size.
Countable takes the value from an HTML element and counts paragraphs, words and characters (without and with spaces). Those numbers are then returned in an object, accessible by a single parameter in the callback function. Countable has been tested in Chrome (latest), Safari (latest), Firefox (latest), Opera (latest) and Internet Explorer (7+). It is built to support both newer and older browsers.
Requirements: JavaScript Framework
Demo: http://radlikewhoa.github.com/Countable/
License: MIT License
For a commercial site, and with the proliferation of online payment services, you may need to have buttons showing the logos of Online Payment Service Providers. Here is a set of 75 Free Buttons For Online Payment Service Providers that you can place on your website or online business on your forms of payment.
These icons are available in PNG format in two sizes (99×66 and 64×43). You will also find generic icons payment methods. A blank PSD is also included in the ZIP file. This resource file is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes.
Requirements: –
Demo: http://pepsized.com/75-free-buttons-for-online-payment…
License: License Free
Paint 4 Kids is a Windows Store app, specifically designed for kids. A simple app for coloring and drawing. You can read of the consumer’s features directly from the Windows Store site, where you can also see some screen shots. For this article, you can simply think of an app that has several drawings and you can interact with them.
From a technical perspective, it is entirely built using standard web technologies, like HTML, CSS, JavaScript and SVG. Consider an important aspect here: with Windows 8, we are writing an app reusing our web skill and we are developing for the web platform, using the underlying HTML5 support of the Internet Explorer 10 rendering engine. So one immediate benefit is that we do not have to test and support all the different browsers versions and do not have to use some polyfills to emulate the new API features in old browsers. We can use the best of the web platform and use some specific API of Windows 8 directly in JavaScript.
This article is about to discuss the use of Scalable Vector Graphics (SVG) in Paint 4 Kids, starting from some requirements of the project, going to address them and some pitfalls using SVG. I hope that some of these considerations could apply to your apps as well.
Requirements and why using SVG
Windows Store app give you a great opportunity in terms of markets where you can distribute and sell your apps and in terms of devices where your app can run. Think that your app can be used on devices with different screen sizes, different screen resolutions and pixel densities. This must be considered and looking through this article gives you a very good technical understanding on how to scale your app to different screens and how to test your app using the Windows Simulator.
One of the requirement is that we want to have a single drawing that will show well at different resolutions. We ended to use SVG that is a vector image format for two-dimensional graphics. Our approach is to create a drawing at a specific resolution 2560×1440, see later for details, scaling down to the current user’s resolution. Another advantage is that is very simple and fast to fill a path with a color in SVG, that it is one of the main feature of the app. When a user tap the screen it is simple to intercept the corresponding portion of the drawing and fill the path with a specific color.
Read the rest of this entry »
