Web standards like HTML5 and CSS3 continue to change. One of the most significant changes has been the W3C Candidate Recommendation for CSS Gradients which allows developers to code for modern browsers like Internet Explorer 10 without using vendor prefixes. In this article, I’ll take you through some differences between the old and new syntax and behavior and provides some insight into the change. Hopefully it will save you some time as you support many browsers.
Note: IE10 stills supports older CSS Gradients syntax from the W3C Working Draft of 17 February 2011 behind the vendor prefix -ms- so your current code won’t break.
Key Changes
Should you choose to simplify your CSS by making the move from vendor-prefixed CSS3 Gradients to unprefixed CSS3 Gradients, there are some key syntax changes to be aware of. Many gradient generators have provided cross-browser markup, including markup for unprefixed gradients. In many cases, the unprefixed markup is no longer valid according to the CSS Image Values W3C Candidate Recommendation that covers gradients. Here are the changes you should be aware of. Read the rest of this entry »
Profound Grid is a responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control. You can make the grid fluid or fixed and add per-media layouts as needed. Change the column and gutter widths and remove or add columns as needed.
The grid keeps your markup semantic and works without any “grid_x” classes. Unless you want to use them, in which case they are included. Profound Grid uses negative margins to calculate columns. Unlike with other grid systems, fluid layouts will look exactly the same in every browser.
Requirements: –
Download Link: http://www.profoundgrid.com/
License: License Free
GitHub Survivor is a simple bug dashboard that shows an overview of bugs in a GitHub-hosted repo. 99designs is using it at to keep an eye on the bug count and remind themselves to close bugs.
It’s easy to forget about bugs when you’re knee-deep in feature development. This dashboard is a good way to keep bugs on people’s minds, and to show at-a-glance information about the current bug situation. GitHub Survivor scrapes your bug data using the GitHub API and stores it in your local Mongo DB for subsequent querying.
A bug leaderboard occupies the bulk of the screen. It shows who’s closed the most bugs this sprint and who’s forgotten to spend some time fixing bugs. There are charts showing the number of bugs opened and closed in recent sprints, the open bug count over time, and a big indicator showing the current open bug count.
Requirements: Github
Download Link: https://github.com/99designs/githubsurvivor
License: MIT License
Motio is a jQuery plugin for simple but powerful sprite based animations and panning. Motio is called on an element representing animation container, where animation is delivered as a CSS background image.
In sprite based animations, container should have the dimensions of one sprite frame. E.g, if you have 10 frames in a horizontal sprite that is 1000 x 100 pixels big, the container should be 100 x 100 pixels big. In panning, container size doesn’t play any role, just the background image should be seamless.
Integrated Motio on/off methods are using jQuery $.Callbacks API, which is in jQuery sice 1.7+. If you can’t use newer versions of jQuery, you can go for jQuery bind/unbind methods called on a frame element, with ‘motio:’ prefix on all event names.
Requirements: jQuery Framework
Download Link: http://darsa.in/motio/
License: MIT License
Springy is a force directed graph layout algorithm. It means that springy uses some real world physics to try and figure out how to show a network graph in a way that looks good.
Springy.js is designed to be small and simple. It provides an abstraction for graph manipulation and for calculating the layout and not too much else. The details of drawing and interaction are mostly up to you. This means you can use canvas, SVG, WebGL, or even just plain old positioned HTML elements.
Requirements: JavaScript Framework
Download Link: http://getspringy.com/
License: MIT License
This article is the second part to: How to Create a Windows 8 RSS Reader App with HTML5. If you haven’t read it, check it out first.
We’re now going to see how to display the details of each article. We will use for that a transition animation, we will play with the simulator and we will continue to discover Blend to use CSS3 Multi-columns for instance.
Like in the previous article, you’ll find the source code to download at the end of the article.
During this article, we’ll see:
- Step 1: using the simulator
- Step 2: displaying the articles’ details
- Step 3: finishing the design of the detail view with Blend
- Step 4: source code to download and conclusion
Note: this article has been updated on 21/08/2012 to implement the changes in the UI & in the code between Windows 8 Release Preview and RTM. In a general manner, if you need to migrate your application from RP, you should read this document: breaking changes document. In our case, there was 0 impact between RP & RTM here. Read the rest of this entry »
Spectragram is an easy jQuery plugin for Instagram API to fetch and display user, popular or tags photo feeds inside your web application or site. You can get get the most recent media published by a user, the most popular media at the moment, or recently tagged media from Instagram API.
You can display the results on list items or any other HTML tag you define, Define the size of the pictures (small, medium, big), and use your own Instagram application ClientID and AccessToken. It is licensed under MIT License.
Requirements: jQuery Framework
Download Link: http://lab.adrianquevedo.com/jquery-spectragram/
License: MIT License
There are still a lot of web developers that like to design with a simple palette – the hex values are easy to memorize and the palette is still large enough for typical stuff like link colors and borders. Web Safe Colors was created for those who like to keep things simple.
A lot of web designers still use web safe colors in their designs so here is a little responsive website as a visual and quick reference guide. It’s great cause you can have it open on your tablet or mobile device while you design.
Requirements: –
Demo: http://websafecolors.info/
License: License Free
Elusive Icons is a webfont that can be used with any of your projects. There are 270 Sleek vector icons for bootstrap. Bootstrap-based, Foundation-based or even your custom projects. It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other “attribution” claws.
If you don’t care much about licences there are many alternatives you can use, most notably the font-awesome font. When downloading this font you’ll also receive all the icons in .svg vector format so you can play with them, improve them and contribute them back on github.
Requirements: Bootstrap
Demo: http://aristath.github.com/elusive-iconfont/
License: See License Agreement
JavaScript is a single-threaded language. This means that invoking a long-running process blocks all execution until that process completes. UI elements are unresponsive, animations pause, and no other code in the app can run. The solution to this problem is to avoid synchronous execution as much as possible.
One way to do this is to have a function execute at a later time, as with event handlers, which are invoked after another call has raised an event. Callback functions are another kind of asynchronous processing, because they call back into the code that initiated the process. Read the rest of this entry »
