Web designFeature

The 11 most exciting open source projects on the web

The open source movement involves web designers and developers volunteering their time to make the web a better place. Here are the 11 open source projects we're most excited about.

We're constantly amazed by all the cool new open source projects available; if you look around there's almost always a blinding open source alternative to whatever pro software you need for web design work. Here are 11 great examples of the superb work being done to make the web a better place.

01. Font Awesome

open source projects

Font Awesome is indeed awesome: 249 icons contained within a single font, constituting "a pictographic language of web-related actions". Icons are scalable, so they look the same at any size, and you can style them with CSS. It's fully compatible with Twitter Bootstrap 2.2.2 (see below), works with IE7 and is available for commercial use.

  • Also see our favourite web fonts - and they don't cost a penny

Icons are currently divided into six categories: web application (a pushpin, a thumbs up, a shopping cart, and so on), text editor (icons for file, copy, paste, etc), directional (different styles of arrows and chevrons), video player, social, and medical. You can request additional icons on the GitHub project, and even contribute your own.

02. Bootstrap

open source projects

Since it was launched by Twitter in 2011, web building framework Bootstrap has become the most popular project on GitHub. Its creators Mark Otto and Jacob Thornton decided last September to move Bootstrap to its own open source organisation, and the project separated from Twitter.

Bootstrap benefits from a small footprint, LESS integration and compelling visual design. It has a web-based customiser that you can use to tailor it to your open source project: components and jQuery plug-ins can be added or removed by ticking checkboxes, and variables can be customised using a web form. There's a 12-column responsive grid, typography, form controls and it uses responsive CSS to work with mobile browsers.

Last month, Bootstrap creators launched Expo, a showcase of the most "beautiful and inspiring" projects built with the toolkit. There's more of the same over at LoveBootstrap.

03. Brackets

open source projects

An open source project begun at Adobe, Brackets is a lightweight and modern code editor focused on web technologies, with a collection of innovative features.

The 17th most popular project on Github, the core team consists of 12 developers, with Adobe providing seven full-time engineers to the project, plus around 80 individual contributors. However, product manager Adam Lehman cautions that it isn’t yet ready for day-to-day use.

"Code editors have been around for a very long time, so you can’t just expect to build an editor with all the required features overnight," he says. "We produce stable and reliable builds every two and a half weeks, so you can be sure it’s safe to use, but you may find yourself going back to your previous editor for a feature or two.

And yes, they use do Brackets to develop Brackets. "It’s all very meta," says Lehman. "We’ve been doing so since the second or third build."

04. Firefox OS

open source projects

Firefox OS, the new operating sysyem being developed by Mozilla, is a win for developers says Andreas Gal, vice president of mobile engineering at Mozilla. "The more platforms developers have to develop for, the more complicated their lives become," he reasons.

"Mozilla’s aim is to be a catalyst to drive more development for the Open Web. Over eight million developers develop in HTML5 today compared to around 100,000 iOS developers and 400,000 Android but 10 million for HTML5. We just want to unlock the power of HTML5 for standards-based work.

"Web apps can access all the device capabilities with the new web APIs that Mozilla added - closing the gap between web and native apps," Gal continues. "This will lower the barrier to entry for smaller, local content developers, businesses, educators and government organizations as well because HTML5 and Web technologies are familiar to developers.

"Apps powered by the open web also allow developers to have direct relationships with their customers. Additionally, there’s a much lighter software footprint on the device. so we can get more out of the hardware."

05. Conditionizr

open source projects

Conditionizr is a brilliant new tool for browser detection. "Conditionizr finalises the gap in frontend technology; conditional free," explains creator Todd Motto. "We use things like Modernizr for feature detection for HTML5/CSS3, and Conditionizr sits alongside to serve the exact opposite: legacy content serving for a clean markup."

Currently at version 2.2.1, Conditionizr recognises the browser in use and delivers the required content. For example, an IE7 user will receive either HTML classes for CSS overrides, or load an ie7.css and ie7.js file; useful for browser patching.

"Conditionizr isn't limited to legacy," adds Motto. "It also aims to help users fix modern browser quirks by detecting modern browsers too. Conditionizr has evolved to include not just legacy content serving, but it also detects retina and touch devices and again allows developers to cater for the entire frontend. It's a tiny 3KB script."

Future plans include redesigning the website to deliver a better user experience and swapping the IE detection to a non-sniffing alternative.

Advertisement

06. The Accessibility Project

open source projects

The Accessibility Project is a community-driven effort to make web accessibility easier for frontend designers and developers to understand and adopt in to a daily workflow.

As Dave Rupert of Paravel, one of the 40+ group of coders and accessibility experts behind the project, explains: "The project started in mid-January 2013 amid developer sentiment that core accessibility concepts, features and code examples are overly difficult to extract. Since launch, a11yproject.com has had 46,000 visitors and we're currently seeing about 7,000 monthly visitors."

Feedback has been mixed: "We've been told everything from 'Stop peddling bullshit' to 'Thank you for making accessibility more accessible'," Rupert reveals. "In general, the sentiment is positive and it solves a common desire for most frontend developers. If there is negative feedback (for example, errata or a difference of opinion) people are encouraged to file an issue on GitHub. Open source is working and iron is sharpening iron.

07. Laravel

open source projects

Laravel has revolutionised PHP development by leveraging the latest features of the language, bringing things like expressive migrations, a great ActiveRecord style ORM and RESTful routing to PHP developers.

"I began working on Laravel at night around the end of 2010," says its creator Taylor Otwell. "I wanted to create a PHP framework that was intuitive, yet powerful. A framework that was truly about developer productivity and happiness."

Right now, Laravel one of the most popular PHP projects on GitHub with thousands of watchers. The framework is used by many more thousands of developers around the world in dozens of countries. In late May, Otwell will be releasing version 4.0, which will bring a unified Queue API for background jobs and an enhanced CLI.

08. Grunt

open source projects

Grunt allows you to automate common tasks using JavaScript. As creator Ben Alman explains: "With Grunt, you can perform mundane, repetitive tasks like minification, compilation, unit testing and linting with basically zero effort. And because Grunt is extensible, if someone hasn't already built what you need, you can easily author and publish your own Grunt plug-in."

Grunt is downloaded about 25,000 times per week, and with over 20 officially-maintained plug-ins and 600 community-published plugins, it's quickly becoming the de facto standard.

"Grunt has dramatically lowered the barrier to entry for web developers by providing a common interface for the tasks in their build process," adds Alman. "Using our extensive plug-in ecosystem and easy configuration format, it's now possible for anyone on your team to create a modern build process - designers included."

09. Ember.js

open source projects

Ember.js bills itself as "a framework for creating ambitious web applications". Jack Franklin explains: "Ember's main features are its data binding; obejcts in Ember can bind properties to each other, so when a property changes in one object, the other is kept in sync.

"Another is the ability to define functions on an object that you can then treat as properties. Hence, if a model has a first and last name, you could create a function to define a person's full name, and have it treated as if the model has a fullname property.

"The feature most likely to draw you in is that Ember automatically updates its views when data changes - saving you a lot of work."

10. AngularJS

open source projects

AngularJS extends the vocabulary of HTML for declaring dynamic views in web apps. Again, Jack Franklin explains: "Angular takes a slightly different approach [to Backbone and Ember] by doing data binding directly in your HTML. It also uses just plain JavaScript for its controllers, meaning there's no need to extend other objects as you have to do in other frameworks.

"The data binding means data in views is automatically updated when the data changes, but also Angular makes it effortless to bind forms to models, meaning a lot of the code you typically write to link a form to creating a new instance of a model is not needed. Its data binding is bi-directional.

"By moving a lot of the binding directly into the HTML, Angular leaves you with much leaner controllers and less JavaScript to write. It might take a while to get your head around, but this approach is really powerful."

11. Ghost

Open source blogging platform Ghost turned heads when it was successfully funded through Kickstarter, surpassing its original request of £25,000 and eventually bring in over £196,000 in funding.

Ghost has a unique purpose in providing bloggers with a simple interface that allows them to write and publish their content without dealing with the complexity of traditional platforms. It's free as a package you can download and install to your own web server, but if that's too much hassle for you there are pro hosted versions costing between $5 and $36 per month.

Which projects did we miss? Let us know in the comments!

Advert

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection