Saturday, February 28, 2015

10 brilliant tools for web design and development

If you've had a quiet time of it these last 12 months, then well done you, because the rest of us were sweating just to keep up with the base rate of change online. HTML5 has reached critical mass, responsive development continued to barrel along at full tilt, then there's audio APIs and WebGL…

Thankfully, the degree of change correlates positively to the problem-solving efforts of the developers and designers everywhere, dug into their respective specialities.

Niche tools

As a result, along with the larger corporate-backed applications, we have a huge host of small tools and libraries, each designed to solve a particular problem or preserve a certain set of possibilities. A couple of these projects have become institutions: Modernizr, keeping the technical playing field level and PhoneGap holding the mobile market open for web types.

Most encouragingly, there's room for some 'just for the hell of it' type experimentation. And even a bit of self-congratulation, evidenced by the fact that Google felt confident enough about some tools to package and prink them into the Yeoman project.

Indeed, this is a handsome list, with good representation for most slices of the development pie. From full-scale IDEs to small, exotic libraries with beautiful aesthetics. But what gives this year its character is the poise that these tools exhibit. Within it's niche, each one shows that we use are beginning to outdistance the problems, freeing ourselves up to give more though to the creative possibilities of the web. How's that for joyous tidings? Happy Holidays!

Read More - How to become A Good Android Developer

02. Fontello

Price: Free
Why is it so hard to find a set of icons that covers all the bases with a consistent look and feel? One of life's great mysteries perhaps. Well, wonder no more because Fontello not only has all the icons you need but you can pick and choose the glyphs you need and compile these into your own minimalist set.

You can, of course, download the entire set of icons from theGitHub repository (actually it's several sets) but thefontello.com interface makes customising your font so easy it's the only sensible approach. The project is open source but as always, donations would be appreciated.

03. Proto.io

Price: Free - $49/Month

A good prototyping tool should allow you to get up and running fast but also provide enough depth that you can refine your ideas to the point where they don't need you leaning over a user's shoulder saying things like "Just ignore that bit for now".Proto.io does just this.

It also handles all the touch gestures you might want, tackles animations and provides for sharing and commenting. It's smooth to use and thankfully, there's a free plan too.

04. Foundation 3

Price: Free

Responsive design seems to have gone from zero to about a thousand miles an hour in no time flat. And things are still changing fast enough that small development shops are hard-pushed to stay up to date, let alone conduct their own R&D. That's where Foundation 3 comes in.

Developed by ZURB, an agency with the resources and experience available to throw at the responsive problem, Foundation 3 can act as a blueprint for your own projects, a rapid prototyping tool or even as an object lesson in how to address some of the web's must current issues.

The latest release introduces a simplified grid structure and makes the jump to SASS/Compass, allowing for a more readily flexible approach to styling. Though it makes sense to work with SASS if you are planning to have a look at Foundation 3, the customisable download is conceived to allow a straight CSS version too.

Read Also: Debunking 10 Common Blogging Myths

5. Dreamweaver CS6

Price: From £344.32

Fluid layouts, CSS3 transitions and enhanced PhoneGap support lead the charge in the latest update to Adobe's web design all-rounder. There's no denying that Dreamweaver CS6hits the ground running.

The problem which Dreamweaver has always had is the difficulty of balancing it's across the board functionality with the need to keep out of the user's way. CS6 actually manages this pretty well.

The new fluid layouts are handy but in fact are the least convincing new feature. That accolade probably goes to CSS3 transitions which are, with Dreamweaver's help, fun to explore.

06. Cloud9 IDE

Price: Free/$12 per month Premium

This year the browser-based IDE finally came of age with a number of promising projects offering fully-featured apps which make collaborating from anywhere on even large-scale projects. Among these, Cloud9 has the edge.

The code editor is very usable. Code completion, smart drag and drop document trees, FTP integration and all that, but it's the connectivity which makes Cloud9: If a team are hacking the same file, each user is identified by their own coloured cursor. A chat module closes the feedback loop.

Integrated with the likes of GitHub, capable of working offline, and generally intuitive to use. If you want a 'code anywhere' solution, look at this one first.

07. Sencha Touch 2

Price: Free

There's no denying that the mobile/touch device has changed web development for good. It's a broader, more heterogenous world out there and everyone wants a piece of the action.Sencha Touch 2 aims to put that dream within reach of HTML5 developers.

An improved API, stronger docs and training materials as well as firmed-up native integration with many leading devices all make Sencha Touch 2 a serious contender for the mobile development framework of choice. There is a learning curve but, since Sencha aims to be an end-to-end package, at least there's only one slope to climb.

08. Adobe Edge Inspect

Price: Free
A great little app for mobile developers, formerly known asAdobe Shadow, which cuts a huge amount of hassle from the design process. Just pair your devices (Android and iOS) with your main machine. Then the sites you browse to are echoed direct to every connected device.

If you've got conditional code or responsive templates then these should work fine. And if you want to tinker with the code, just hit the angle brackets next to your paired device (in Chrome) and away you go.

09. Brackets

Price: Free

You'd think by now that the concept of the code editor would be pretty mature. There's so many out there and they're all so similar it's easy to imagine that the final blueprint has been found. Brackets shows that even at this level there's plenty of possibilities left to explore.

The central goal for Brackets seems to be a removal of all the repetitive little tasks we fold into the development process. Browser reloading, editing an element's CSS, function searching. Full credit to those involved because, even at beta stage, Brackets is refreshingly good to use. Check out their YouTube channel.

And if you'd like an augmented experience, now you can sign up for Adobe's creative cloud and get Edge Code. Built on Brackets, Edge Code adds some excellent features for typography and PhoneGap.

Read More - Top 5 SEO Tips of 2015

10. Modernizr 2.6

Price: Free

Leading with improved geolocation, WebGL and a host of community contributed detections, the latest update toModernizr delivers some important new detects for the progressive enhancement cabal to get their teeth into.

Version 2.6 of the popular browser capability detection tool updates a couple of dependencies too, but the largest volume of new detects comes from the community. The list itself makes interesting reading: css-backgroundposition-xy, css-subpixelfont, svg-filters, vibration…

If you're keen to make use of the latest features in a responsible fashion then this is one library you need to keep up to the minute.

Read More - How to become A Good Android Developer

0 comments:

Post a Comment

Thanks For Commented.

TechTalk