Every project needs analytics. But you shouldn’t have to litter your codebase with third-party-specific calls. Changing or adding new services should be a snap.
That’s where analytics.js comes in! Instead of adding hooks for every single analytics service you integrate, you add a single set of provider-agnostic hooks that then route to any analytics service you want! Analytics.js gives you a hassle-free way to integrate analytics into any web application.
Requirements: Google Analytics
Demo: http://segmentio.github.com/analytics.js/
License: MIT License
Workless is a clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks. It standardizes CSS, improves usability and interaction, sets base typography to help vertical rhythm and readability and adds helper classes to style elements easily.
You can either start with the base setup, or drop the files and assets into your current project and simply reference the CSS and Javascript files in your source. Once you’ve done this you can then begin adding your own application specific CSS.
Requirements: CSS3 adn HTML5
Demo: http://workless.ikreativ.com/
License: License Free
When you pour a lot of effort into designing something, you want to show it off right. So most people try to put it within some sort of environment to make it feel a bit more real. That’s a lot of pain because you have to open up photoshop, tilt, skew, apply glares and etc…
So Breezi has created PlaceIt for us to do it in seconds. Just drag and drop your screenshot right onto the environment you’d like to use and it will generate it for you. There are a few environments in there now (iPad, iPhone, iMac and more) and will be adding many more.
Requirements: –
Demo: http://placeit.breezi.com/
License: License Free
Framer is a modern prototyping tool. It can help you to quickly build and test complex interactions and rich animations for both desktop and mobile. The basic idea is that you only need a few simple building blocks like images, animation and events to build and test complex interactions.
It is made for designers. It is simple but powerful. A good alternative to Flash, Quartz Composer or Keynote. It works great in desktop and mobile Safari or Chrome, and Offline too. It uses webkit css transforms to render on the GPU for smooth performance. Built in easy spring physics for iOS like animations.
Requirements: –
Demo: http://www.framerjs.com/
License: License Free
Modern browsers like Internet Explorer 10 support CSS 3D and 2D Transforms and CSS Animations. By tapping the power of your GPU and running asynchronously from regular JavaScript, these technologies provide a more performant and flexible alternative to traditional script-based animations for Web content. I’ve talked about how to build with CSS 3D Transforms as well as CSS Animations and Transitions in previous articles. In this article, I’d like to introduce a more “unconventional†use case for these technologies by describing the concept of “full-page animations†that can be used during the navigation process to add fluidity and continuity to browsing. Our target is to achieve a seamless browsing experience in which content smoothly appears into view when the user visits a page and transitions away when he clicks on a link or performs a relevant action.
These effects can be accomplished by transforming the HTML <body> element using CSS Animations. However, this use case presents some considerations that we felt were worthy of discussion, such as the effect of layout and sizing on transforming <body>, as well as how to appropriately time page navigations so that they mesh properly with our animations.
The code samples in this post use unprefixed CSS markup as supported by IE10 Release Preview; other browsers may require vendor prefixes for the CSS Animations and CSS Transforms properties used. Read the rest of this entry »
Fresco is a beautiful responsive lightbox. It can be used to create stunning overlays that work great at any screen size, in all browsers on every device. To make things even more awesome Fresco comes with fullscreen zoom, retina-ready skins, supports for swipe events, Youtube and Vimeo integration for HTML5 video and a powerful Javascript API.
Fresco is licensed under the terms of the Fresco License. The Light version may be used freely on non-commercial domains. A Pro version can be purchased for commercial use.
Requirements: jQuery Framework
Demo: http://www.frescojs.com/
License: Fresco License
Shapeshift is a plugin which will dynamically arrange a collection of elements into a grid in their parent container. Shapeshift is intended to be a very bare bones version of these grid systems, however the drag and drop is what sets it apart from the other similar plugins. Position any item within the grid by dragging and dropping them into place. Shapeshift will try to find a logical place for it and display that to you.
Resizing the grid to accommodate for more or less space is automatically turned on in Shapeshift, so if your parent container has a 100% grid resizing the window will shapeshift the child objects around to accommodate for the new layout. You can even set CSS3 media queries on your objects and watch as they get shapeshifted around their new size.
Requirements: jQuery Framework
Demo: http://mcpants.github.com/jquery.shapeshift/
License: MIT License
Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8. We will then build a WinRT application targeting the Windows Store. We’ll try also to follow the Windows 8 UI design guidelines by using Expression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes.
This first article will help you to create the welcome screen that will use a WinJS ListView control. This control will display all the blog posts recently published via nice thumbnails. The 2nd one will work on the detail view displayed when you’ll click on one of the items. At last, you’ll find at the end the final solution to download. See it as useful complementary resources if you need to clarify some parts of this article. Read the rest of this entry »
Gemicon is handcrafted icon set by Turqois, which there 3 different sizes (16, 32, 64). Each icon created with pixel-perfect shape layer on Photoshop. Download and get PNGs and PSDs file. There are over 600 icons for you to download. They are all Free and suitable to implement here and there for your next awesome project.
Requirements: –
Demo: http://gemicon.net/
License: License Free
ABalytics.js is a pure javascript library allows you to do simple A/B testing working only on your client-side code. All data is registered as custom variables in your website Google Analytics profile, so you don’t need to configure anything server side.
You simply mark the html elements you want to test on with a class, the substitution is automatic. There is no need to set anything up server side, the data is stored on Google Analytics. You can conduct multiple, independent experiments at the same time. Each experiment will use a custom variable slot. It is pure javascript, you just need to include GA.
Requirements: JavaScript, Google Analytics
Demo: https://github.com/danmaz74/ABalytics
License: MIT License
