The World Wide Web has become a major delivery platform for web development, a variety of complex and sophisticated enterprise applications in several domains. In addition to their inherent multifaceted functionality, these web applications exhibit complex behavior and place some unique demands on their usability, performance, security and ability to grow and evolve.
In practice, many web developers will have basic interdisciplinary skills / roles, such as: Graphic design / web design, Information Architecture and copywriting/copyediting with web usability, accessibility and search engine optimization in mind.
However, it is still important to remember that web development is generally split up into client side coding, covering aspects such as the layout and design, and server side coding, which covers the website’s functionality and back end systems.
When it comes to developing a well-coded and aesthetically well designed website – it can become quite a laborious task, for even the most skilled web developer. Developers as well as designers must now be able to stay abreast of current trends and web-standards and furthermore to determine ways by which way to incorporate them into their designs. Fortunately, there are an unlimited amount of free tools which are available that can enable one to speed up their efforts and work within a more efficient and productive way.
As of late, web standards have been eclipsing proprietary tool-kits, and the development community is creating its own set of open source tools by which to work with. However, 2012 has brought about many changes within the development community, and developers have managed to continually come up with many new and innovative web tools by which to enhance how the web is structured and designed, allowing site owners the opportunity to take their websites to their desired level.
Below we are introducing several of the latest and newest web tools & apps which will benefit Developers and Designers alike. Enjoy !
1. Cedvel : Web Application for Designing Grid Systems
Cedvel is an application for designing grid systems. Cedvel aims to ease the grid design process and help you explore more alternatives. Rectangles are building blocks of grids in Cedvel. Use the rectangle tool draw an arbitrary rectangle on the canvas and then modify its exact dimensions and margins from the properties panel. Rectangles can have baseline, image and rectangle grids.
Once you are satisfied with the size and position of your container rectangle, divide it into rows and columns and set gutter widths and heights. Grids can be exported as PNG files ideal for screen use or SVG files for printing.
[zilla_button url=”http://cedvel.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
2. Opal : A Ruby to JavaScript Source-to-Source Compiler
Opal is a ruby to javascript compiler. Opal includes a compiler which can be run in any browser, a corelib and runtime implementation. The corelib/runtime is also very small with the size of 10.8kb gzipped. Opal-jquery provides DOM access to opal by wrapping jQuery (or zepto) and providing a nice ruby syntax for dealing with jQuery instances as well.
Opal is a source-to-source compiler, so there is no VM as such and the compiled code aims to be as fast and efficient as possible, mapping directly to underlying javascript features and objects where possible. Opal is hosted on github and free for download.
[zilla_button url=”http://opalrb.org/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
3. Bourbon Neat : Lightweight Fluid Grid Framework
Bourbon Neat is an open source fluid grid framework built on top of Bourbon with the aim of being easy enough to use out of the box and flexible enough to customize down the road. It is built on top of Sass and Bourbon using em units and golden ratios.
Using Sass 3.2 block mixins, Neat makes it extremely easy to build responsive layouts. Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and even store these values in project-wide variables to DRY up your code. It has been tested on Firefox 3.5+, Safari 4.0+, Chrome 4.0+, Opera 9.5+ and IE 8+.
[zilla_button url=”http://thoughtbot.com/neat/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
4. Viewport Resizer : Test Responsive Design with Viewport Resizer
Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.
The smartest way to share your defined environment of devices and breakpoints directly with your team and client. However, this bookmarklet should not replace a real device simulation. It rather helps you, your team and client testing statuses, transitions, text length etc. throughout different device types.
[zilla_button url=”http://lab.maltewassermann.com/viewport-resizer/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
5. Scripted : A Fast & Lightweight Browser Based Code Editor
Scripted is a fast and lightweight code editor with an initial focus on JavaScript editing. Scripted is a browser based editor and the editor itself is served from a locally running Node.js server instance. The editor is actually the Eclipse Orion editor with a few additional bells and whistles. Anyone familiar with editing in Eclipse will immediately know many of the key bindings the Scripted editor supports.
[zilla_button url=”https://github.com/scripted-editor/scripted” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
6. Sentry : Open Source Event Logging Platform
Sentry is a realtime event logging and aggregation platform. It specializes in monitoring errors and extracting all the information needed to do a proper post-mortem without any of the hassle of the standard user feedback loop.
[zilla_button url=”https://github.com/getsentry/sentry” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
7. Deployd : Build Complex Backends Simple
Deployd is a platform that makes building complex backends simple. Build APIs for web and mobile apps in minutes instead of days. Unlike working with a traditional backend, there’s no boilerplate, or configuration. Deployd works right out of the box. The best part is that you can run it however and wherever you want – it’s free and open source.
[zilla_button url=”http://www.deployd.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
8. Dashing : Open Source Framework for Beautiful Dashboards
Dashing is a flexible framework, built with Ruby (Sinatra-based) and Coffeescript, for creating attractive dashboards. The dashboard is formed of widgets which can pull data from any source. The widgets interface is powered by Gridster and they can be re-positioned with drag ‘n drops. There are sample widgets like Twitter, clock or iframe to ease getting started with it and an API exists for pushing data to the widgets if wanted.
[zilla_button url=”http://shopify.github.com/dashing/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
9. Reactive UI : Asp.Net Libraries for Asynchronous Code
It is pretty hard to find quality, open sourced and regularly improved resources for the ASP.NET platform. However, ReactiveUI, the MVVM framework for .NET that integrates with the Reactive Extensions (Rx) framework, is definitely one of them. It eases writing 100% asynchronous code with chain calls to multiple web services and handle retries, timeouts, caching or throttling concurrency while writing readable, testable code.
[zilla_button url=”http://www.reactiveui.net/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
10. Liffect : A Bunch of CSS Animations Effects for Lists
Liffect is a web-based generator that provides lots of different effects for list elements. It makes use of CSS animations and requires jQuery for applying the delay in effects. There are items fading, zooming, sliding, flipping, bouncing and, a fun one,Star Wars-inspired effect.
[zilla_button url=”http://ademilter.com/lab/liffect/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
11. Emmet : A Toolkit for Improving HTML & CSS Workflow
Emmet is an editor plugin which has versions for many popular editors like Notepad++, Aptana, Coda, TextMate, Komodo Edit and more. Once installed, using a CSS-like syntax, it is possible to create bulk HTML and CSS code (or nay other programming language code) with a single line for coding quickly. It can also generate Lorem Ipsum text and much more complex outputs than the example above.
[zilla_button url=”http://docs.emmet.io/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
12. Kort : Greate to Present Thumbnails
Kort is a creative concept, by Hakim El Hattab (who creates awesome stuff regularly) for displaying thumbnails. It works by displaying a single thumbnail where others are hidden like a stack of cards and shown when hovered.
[zilla_button url=”http://lab.hakim.se/kort/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
13. TypeScript : A Language for Application Scale JavaScript Development
TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript starts from the syntax and semantics that millions of JavaScript developers know today. With TypeScript, you can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment.
[zilla_button url=”http://www.typescriptlang.org/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
14. Orion : Web-Based IDE with Firebug & Git Support
Orion, by Eclipse, is an open source and online IDE application (that isalternative to others) which can be a good alternative for anyone willing to create code online. It has 2 versions, hosted or self-hosted, and the self-hosted version requires Java to run. The application supports working with multiple projects, creating files/folders, FTP and there is Firebug + Git integration.
[zilla_button url=”http://eclipse.org/orion/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
15. Responsivator : Quickly View Websites with Different Screen Sizes
Responsivator is a free to use web app (it is also open source) for quickly viewing websites with different screen sizes. Once a URL is entered, it is loaded inside iframes with popular screen sizes (desktop, tablet, phone) in different orientations. It is possible to customize the screen sizes and add/remove any new ones. Also, each website tested gets its own URL to share it with others (an option exists for hiding the header of the app while sharing)
[zilla_button url=”http://dfcb.github.com/Responsivator/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
