The 20 best new collection for web pattern and growth of 2012

Mark Penfold compiles a tip 20 from his monthly roundup of a best new collection that saw a light of day this year – and many are free!

If you’ve had a still time of it these final 12 months, afterwards good finished you, given a rest of us were sweating usually to keep adult with a bottom rate of change online. HTML5 has reached vicious mass, manageable growth continued to tub along during full tilt, afterwards there’s audio APIs and WebGL…

Thankfully, a grade of change correlates definitely to a problem-solving efforts of a developers and designers everywhere, dug into their sold specialities.

As a result, along with a incomparable corporate-backed applications, we have a outrageous horde of tiny collection and libraries, any designed to solve a sold problem or safety a certain set of possibilities. A integrate of these projects have turn institutions: Modernizr, gripping a technical personification margin turn and PhoneGap holding a mobile marketplace open for web types.

Most encouragingly, there’s room for some ‘just for a ruin of it’ form experimentation. And even a bit of self-congratulation, evidenced by a fact that Google felt assured adequate about some collection to package and flounce them into a Yeoman project.

Indeed, this is a vast list, with good illustration for many slices of a growth pie. From full-scale IDEs to small, outlandish libraries with pleasing aesthetics.

But what gives this year a impression is a intrepidity that these collection exhibit. Within it’s niche, any one shows that we use are commencement to surpass a problems, pardon ourselves adult to give some-more nonetheless to a artistic possibilities of a web. How’s that for joyous tidings? Happy Holidays.

The 20 best new collection for web pattern and growth of 2012

1. Bugherd

Price: Free-$99/month for 25 members

Contrary to renouned belief, a launch of a new site is not a finish of a dev team’s work. If anything it’s a indicate during that a persperate unequivocally starts to build. As clients start to accept feedback, these inaudible and opposing requests start to filter behind as emails, that afterwards get batted around before finally apropos a bone of contention.

BugHerd provides a neat, good organized proceed to hoop feedback, bug fixes and underline requests – nonetheless a email overhead. A elementary .js embody and visitors to a site get a feedback button. Guests to a devise get to record bugs and requests, members get to discharge a whole shebang from a friendly, discerning interface. Progressing bugs from news to movement to execution is many preferable to a choice situation: a light rave that will eventually overwhelm.

2. Fontello

Price: Free

Why is it so tough to find a set of icons that covers all a bases with a unchanging demeanour and feel? One of life’s good mysteries perhaps. Well, consternation no some-more given Fontello not usually has all a icons we need nonetheless we can collect and select a glyphs we need and accumulate these into your possess minimalist set.

You can, of course, download a whole set of icons from a GitHub repository (actually it’s several sets) nonetheless a interface creates customising your rise so easy it’s a usually essential approach. The devise is open source nonetheless as always, donations would be appreciated.


Price: Free – $49/Month

A good prototyping apparatus should concede we to get adult and using quick nonetheless also yield adequate abyss that we can labour your ideas to a indicate where they don’t need we disposition over a user’s shoulder observant things like “Just omit that bit for now”. does usually this.

It also handles all a hold gestures we competence want, tackles animations and provides for pity and commenting. It’s well-spoken to use and thankfully, there’s a giveaway devise too.


Thanks to that diversion is going to be a smash, probably


4. Foundation 3

Price: Free

Responsive pattern seems to have left from 0 to about a thousand miles an hour in no time flat. And things are still changing quick adequate that tiny growth shops are hard-pushed to stay adult to date, let alone control their possess RD. That’s where Foundation 3 comes in.

Developed by ZURB, an group with a resources and knowledge accessible to chuck during a manageable problem, Foundation 3 can act as a plans for your possess projects, a quick prototyping apparatus or even as an intent doctrine in how to residence some of a web’s contingency stream issues.

The latest recover introduces a simplified grid structure and creates a burst to SASS/Compass, permitting for a some-more straightforwardly stretchable proceed to styling. Though it creates clarity to work with SASS if we are formulation to have a demeanour during Foundation 3, a customisable download is recognised to concede a true CSS chronicle too.

5. Dreamweaver CS6

Price: From £344.32

Fluid layouts, CSS3 transitions and extended PhoneGap support lead a allot in a latest refurbish to Adobe’s web pattern all-rounder. There’s no denying that Dreamweaver CS6 hits a belligerent running.

The problem that Dreamweaver has always had is a problem of balancing it’s opposite a house functionality with a need to keep out of a user’s way. CS6 indeed manages this flattering well.

The new liquid layouts are accessible nonetheless in fact are a slightest convincing new feature. That fame substantially goes to CSS3 transitions that are, with Dreamweaver’s help, fun to explore.

6. Cloud9 IDE

Price: Free/$12 per month Premium

This year a browser-based IDE finally came of age with a series of earnest projects charity fully-featured apps that make collaborating from anywhere on even large-scale projects. Among these, Cloud9 has a edge.

The formula editor is unequivocally usable. Code completion, intelligent drag and dump request trees, FTP formation and all that, nonetheless it’s a connectivity that creates Cloud9: If a group are hacking a same file, any user is identified by their possess phony cursor. A discuss procedure closes a feedback loop.

Integrated with a likes of GitHub, able of operative offline, and generally discerning to use. If we wish a ‘code anywhere’ solution, demeanour during this one first.


Cloud9 gives we and your cohorts with a unified, formula anywhere environment


7. Sencha Touch 2

Price: Free

There’s no denying that a mobile/touch device has altered web growth for good. It’s a broader, some-more heterogenous universe out there and everybody wants a square of a action. Sencha Touch 2 aims to put that dream within strech of HTML5 developers.

An softened API, stronger docs and training materials as good as firmed-up local formation with many heading inclination all make Sencha Touch 2 a critical contender for a mobile growth horizon of choice. There is a training bend but, given Sencha aims to be an end-to-end package, during slightest there’s usually one slope to climb.


Can’t live nonetheless my radio: Sencha’s radio app


8. Adobe Edge Inspect

Price: Free

A good tiny app for mobile developers, before famous as Adobe Shadow, that cuts a outrageous volume of con from a pattern process. Just span your inclination (Android and iOS) with your categorical machine. Then a sites we crop to are echoed proceed to each connected device.

If you’ve got redeeming formula or manageable templates afterwards these should work fine. And if we wish to tinker with a code, usually strike a angle brackets subsequent to your interconnected device (in Chrome) and divided we go.

9. Adobe Brackets

Price: Free

You’d consider by now that a judgment of a formula editor would be flattering mature. There’s so many out there and they’re all so identical it’s easy to suppose that a final plans has been found. Brackets shows that even during this turn there’s copiousness of possibilities left to explore.

The executive thought for Brackets seems to be a dismissal of all a repeated tiny tasks we conceal into a growth process. Browser reloading, modifying an element’s CSS, duty searching. Full credit to those concerned because, even during beta stage, Brackets is refreshingly good to use. Check out their YouTube channel.

And if you’d like an protracted experience, now we can pointer adult for Adobe’s artistic cloud and get Edge Code. Built on Brackets, Edge Code adds some glorious facilities for typography and PhoneGap.

10. Modernizr 2.6

Price: Free

Leading with softened geolocation, WebGL and a horde of village contributed detections, a latest refurbish to Modernizr delivers some critical new detects for a on-going encouragement gang to get their teeth into.

Version 2.6 of a renouned browser capability showing apparatus updates a integrate of dependencies too, nonetheless a largest volume of new detects comes from a community. The list itself creates engaging reading: css-backgroundposition-xy, css-subpixelfont, svg-filters, vibration…

If you’re penetrating to make use of a latest facilities in a obliged conform afterwards this is one library we need to keep adult to a minute.

11. Trello

Price: Free

There are a surprisingly vast series of devise government collection out there. They time time and allot teams, nonetheless unequivocally few of them have a kind of healthy interest that Trello exhibits in spades.

The visible embellishment is a board. A elementary judgment nonetheless Trello creates it into something able of displaying all a details and outs of a devise during one glance. What’s to do, being done, complete. Commenting, sharing, attaching files, prioritising. Trello creates all this fun, and in so doing, helps to shake your contemptible self into something imitative boat shape. Great stuff.

12. TypeCast beta

Price: Free while in beta

Thanks to a good jump brazen in web fonts, typography is apropos an increasingly critical component of a web designer’s job. But, a elementary fact that there’s now thousands of fonts to select from doesn’t indeed make a pursuit any easier. For that, you’ll wish TypeCast.

TypeCast allows we to select your fonts from suppliers, TypeKit, FontDeck and Google. But it also allows we to indeed emanate comps, character them and review them corresponding with choice designs. Then usually tell a URL when we wish feedback. No need to indeed buy a fonts compartment you’ve motionless on a final signed-off solution.

The interface is so discerning you’ll be knocking out new page concepts in no time. There’s no doubt this is a good proceed to examination with form on a web, and a formula pronounce for themselves. Whether this is indeed time-saving is disputable – for a typographically challenged it could be a outrageous (but enjoyable) rabbit hole down that to disappear.

13. Gridset

Price: $12 per set/$18 per month

The grid is apropos as many of a focal indicate for web design, many as it has traditionally been for a imitation world, nonetheless with some combined complications. Obviously these grids need to be flexible, and responsive. But how do we ‘play’ with this kind of thing when a calculations keep removing in a way? Answer: Gridset.

Created by a folk during Mark Boulton Design, gridset allows we to try a possibilities of grids, adding columns, defining ratios and sourroundings gutters, all nonetheless worrying about he underlying arithmetic. The generated formula is inexhaustible in distance for a elementary reason that it attempts to cover all a basis. You also get pngs, an .js conceal and CSS/HTML files. It opens adult a grid for exploration.

14. Yeoman

Price: Free

Modern web growth seems to be coalescing around a series of small, open source projects and tools. The likes of Bootstrap, Compass and PhantomJS. Each package contributing a singular aspect to a new pursuit – could be testing, CSS frameworks or formula compilation.

Yeoman is Google’s try to lift together a best of these apps underneath a single, customisable banner. Scaffolding new web apps, gripping packages adult to date, auto-compiling your code, optimising your images. Yeoman has got your back. As they say.

Once Yeoman, and a dependencies are installed, a sorcery all happens on a authority line so you’ll ideally be gentle arising commands there. If you’re not, don’t worry, a complement is unequivocally good documented, even to a indicate of creation this a good place to learn a basis of a things that Yeoman packages up.

15. Emmet

Price: Free

Formerly famous as Zen Coding, devise Emmet, delivers a CSS-like shorthand to your manually coded pages. It’s a elementary concept, that builds on a thought of a ‘snippet’, providing your with a apparatus to cut by a many repeated of coding tasks like a blade by butter.

Apply a elementary syntax: ‘p.class_name’ gives we ‘p class=”class_name” /p’. Nesting is simple: ‘divp.class_name’ becomes ‘divp class=”class_name” /p/div’. You get a picture. You can even hide lorem impsum text, beget lists and, once we get a feel for things, emanate your possess shortcuts and dash structures.

All in all, this is a unequivocally absolute extension, accessible for a extended preference of renouned editors. If you’re hand-coding it’s going to save we a lot of time. Don’t overdo it though, as a strings quick turn undecipherable.

16. Sublime Text 2 beta

Price: $59

Getting your coding sourroundings right can be difficult. Do we wish lots of buttons, menus and highlighting? Or do we foster a minimal interface and cite to hoop dependencies yourself? The questions are unconstrained once we start seeking them.

Sublime Text 2 favours a minimalist approach. A beautifully elementary content editor, it focuses on creation a essay knowledge silky smooth, so we can have your formula demeanour and hoop usually a proceed we want.

Many languages are upheld including a likes of C++, Clojure and Markdown, modifying facilities like indents an formula collapsing are rubbed easily and Minimap gives we quick page navigation.

17. Microsoft WebMatrix 2

Price: Free

At one time or another usually about everybody who works on a web will have accursed Microsoft. Let’s usually contend they have a few black outlines opposite their name. WebMatrix 2 shows that it doesn’t have to be that way. Far from it.

WebMatrix 2 is a good IDE to work with, regardless of a denunciation we cite or a horizon we work within. It’s purify to demeanour at, quick to use, useful nonetheless unobtrusive. And if we occur to be a .NET devotee, afterwards it’s going to make your life a lot easier.

Plugging into databases or installing a bottom CMS, even hacking around with Node.js. WebMatrix handles things with efficiency. Where prior MS products have suffered with over-clutter as a outcome of a need to scream about their accomplishments, this focus treats we like an adult. If you’re an adult that works in C#, all a better.

18. PhoneGap 2.0

Price: Free

Everyone seems to determine that mobile is a new black. And given that’s a box it’s a vital pain in a self-evident that this ‘new’ height managed to reconstruct so many of a problems faced by a desktop: opposite APIs, languages, browsers, record formats… Thankfully, PhoneGap has left a prolonged proceed towards smoothing out those difficulties.

PhoneGap 2, a initial recover given Adobe took a reins, is a poignant allege for during slightest dual reasons. The initial is a elementary boost in platforms reached, Windows 8 phone included. The second is a accessibility of PhoneGap Build, giving developers a singular accumulate indicate able of reaching each platform. No consternation there’s so many apps.

19. Firefox 18

Price: Free

The web is relocating flattering quick during a impulse – even by a possess standards. Consequently, it’s been a bustling year for Firefox. Something a rest of us should be unequivocally beholden for.

Introducing a slew of new technologies from Web Sockets to IndexedDB and useful collection like a Web Console and Javascript Scratchpad, Firefox has given developers a possibility to try new possibilities and a collection to make doing so extremely some-more profitable.

The constancy of Mozilla’s bid to make a use of code new technologies accessible and aged ones some-more fit is considerable to contend a least.

20. Photon

Price: Free

This is a fun project. Photon creates a elementary lighting outcome for DOM elements rendered in 3D space. This is done probable by a new fangled CSS renovate property. Or as it’s some-more scrupulously famous a ‘[vendor prefix] – transform’ property.

It’s crafty stuff, if rather wily to get your conduct around, and a bit complicated on a aged CPU. But Photon’s creator, Tom Giannattasio, creates a good box for a use in a form of an origami crane. Fire adult a decent browser and take it for a spin.

If we have come opposite any cold collection recently that haven’t done a list nonetheless we consider they should have, greatfully let us know in a comments. Equally, if you’ve combined a apparatus that you’d like us to underline in a subsequent roundup, fire us an email!

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Comment

Comments are moderated. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

× five = 25