(This post also lives on medium)
When was the last time that you had a ‘light-bulb’ moment? You know the one; it’s when an idea gets you so inspired, motivated, excited, (insert relevant synonym here) that you just HAVE to do something about it. You might have told a friend, taken a photo of your inspiration, posted something on Facebook, or just scribbled something down. Sometimes, our light-bulb moments only get so far.
BUT, what if your light-bulb moment was a brilliant idea for a website or an app? AND what if you knew how to take it from a brilliant idea, and turn it into a brilliant product?
Every weekend, thousands of people around the world attend hackathons to do just that. They turn brilliant ideas, into truly amazing products, often in only 24, or 48 hours.
How do these teams manage to develop their products so quickly and how can you do the same? One secret is in the multitude of open source resources available on the internet. This post highlights some of the best and most popular open source resources available for your next hackathon (or light-bulb moment side project).
Before we begin, it’s important to understand that even if you don’t know your html from xml, or CSS from CMS; just having some familiarity with these open source resources may help to give you the edge when it comes to talking tech. So, settle in, and let’s get started.
What’s Open Source all about?
Open source software is often developed in a public, collaborative manner. Open source licenses grant licensees the right to copy, modify and redistribute source code (or content). These licenses may also impose obligations.
It’s important to check the licence for any open source software that you choose to use. Specifically, confirm any restrictions if planning to use a resource commercially, or if planning to change the source code. Being aware of the licence in the beginning can help you avoid issues down the track.
- Apache License 2.0
- BSD 3-Clause “New” or “Revised” license
- BSD 2-Clause “Simplified” or “FreeBSD” license
- GNU General Public License (GPL)
- GNU Library or “Lesser” General Public License (LGPL)
- MIT license
- Mozilla Public License 2.0
- Common Development and Distribution License
- Eclipse Public License
A great place to begin your open source journey is at GitHub.
What is GitHub?
GitHub: has millions of public and private repositories, with thousands more being added everyday. GitHub repositories or ‘repos’, are used as a collaborative means of source control. Github allows a granular level of change control and code management. This means that code changes can be clearly identified, issues can be addressed, and new features can be requested, all in one place.
GitHub uses some terms which may be new to you, but please don’t be discouraged, you’ll be down with the lingo before you know it.
Some common GitHub terms:
Git — open source change tracking software, used by GitHub, (may also be used without GitHub).
Repository — a folder or directory that contains all of the project files (including documentation), and stores each file’s revision history.
Commit — each change made to the repository code is a ‘commit’, often with a supporting comment about the change that was made.
Blame — think ‘updated by’ — identifies who made a change/commit.
Push — when you make changes locally, (on your computer) a push is used to move your changes into a remote source control, such as GitHub.
Branch — like having another development environment where you can test out changes outside of your main/master repository.
Fork — a copy of someone else’s repository. You can fork someone else’s repository so that you can make whatever changes you like without effecting their repository.
Issue — problems, questions, potential enhancements for a specific repository.
Markdown — .md — a file format that is generally used for read-me files.
Fetch — retrieve the latest changes made to a repository, so that you can compare the changes with your version.
Pull — fetches the latest changes, AND merges/overrides the newly fetched changes over a local version.
Pull Request — not to be confused with Pull, a Pull Request is like an issue that has already been coded. When you don’t have access to directly update a repository, you can provide repository owners/collaborators a Pull Request for them to review and either include in their repository, or reject.
Local — something that is on your laptop or computer.
SSH Key — used to securely identify yourself to a server.
For more details on these terms, check out the official glossary: https://help.github.com/articles/github-glossary.
A timely example
Let’s try and use these new terms from the perspective of two users, in a somewhat contrived example:
Mike — an open source developer:
Mike recently created his first repository on GitHub. He started by downloading Git and setting up a SSH key. He then created a folder on his laptop for his new project and used Git to create a local repository in that folder. Then he created awesome.html, readme.md, and Licence files locally. Lastly, he used Git to commit his files to his local Git repository and pushed the local Git repository into GitHub.
Jane — a hackathon hacker:
Jane was searching through GitHub when she came across Mike’s repository. She already had Git installed, so she just cloned a copy of Mikes repository. Now Jane has all of Mikes latest files on her laptop.
How did she do it?
Lets have a closer look at the steps that Jane went through to get a copy of Mike’s repository.
- Jane already had Git installed. She did this by downloading and installing Git from http://git-scm.com/ .
- After installing Git, Jane set up her configuration using Git Bash:
git config —global user.name “Jane”
Sets the name for the commits that are made by Jane.
git config —global user.email “[email protected]”
Sets the email for commits that are made by Jane. - In order to get a copy of Mike’s repository Jane had to tell Git where to put the repository (the directory on her laptop).
cd ‘C:\Users\Jane’
Points Git to the location where Jane wants to save Mike’s repository. - Lastly, Jane used the Git ‘clone’ command, to copy the repository.
git clone git://github.com/mike/awesomeness.git MySheHacksFolder
This command takes a copy of mike’s repository from GitHub called ‘awesomeness’, and puts the files in folder on Jane’s laptop called ‘MySheHacksFolder’.
Note that this example doesn’t use SSH, an SSH transfer looks a little different, whereby the URL would be something like –
git clone https://github.com/mike/awesomeness.git MySheHacksFolder.For a secure connection, see this guide for setting up SSH.
If Jane wasn’t comfortable with using the command line for Git Bash, there are other ways that Jane could get access to Mike’s repo:
- Firstly, GitHub has released a special GUI version of Git for windows and Mac .
- Secondly, Jane could download the repository as a ‘zip’ file by selecting ‘Download Zip’ from Mike’s Awesomeness GitHub repository.
Now that we know a little bit about what GitHub is (and we have this awesome cheatsheet), let’s look at some great open source resources used at hackathons to help you get started.
Where do I start with Open Source resources?
The following is a list of some of the most popular frameworks and resources around at the moment. Each one could command a few posts each, so consider this a summary:
Client Side:
CSS Frameworks:
A CSS framework helps to pretty up html and streamline the design/development process. A quick Google search of ‘CSS framework’ nets around 20 million results, here’s a few:
- Bootstrap — (formally ‘Twitter Bootstrap’, formed by a couple of guys who worked for Twitter). This is by far one of the most popular choices.
- Foundation — also a fully featured CSS framework.
- Semantic UI — Semantic has some great UI features. It is still in development and not as fully featured as Bootstrap, but it’s fast becoming one of my favourites.
Javascript Frameworks:
- Angular — hands down, my favourite client side framework. Angular is developed and maintained by Google.
- Backbone — small and lightweight, great for small/single-page apps.
- Ember — the newest of this list, lots of built in support, great for multi-page/large apps.
These are just a few examples that have great communities and support networks, there are plenty more out there, and new ones popping up everyday.
Server Side:
Server:
Node — used for building fast, scalable applications that are lightweight and efficient.
Just one server mention here. Sorry, I’m biased.
Databases:
I think there is a strong benefit of using NoSQL databases in hackathons (if you feel that you have time to incorporate a database). There are hundreds of NoSQL databases around now, some of the most popular:
- MongoDB — a document database, stores data in BSON.
- CouchDB — also a document database, great features, stores data in JSON.
- Redis — a key-value store, lots of uses to support an app. I usually use in conjunction with a document database.
Once you go NoSQL, it’s too much fun to go back.
Go forth and explore the open source wilderness
When you’re first starting out, just getting familiar with the terms in this post will greatly help when communicating with fellow geekettes. The key is to get familiar with the terms, and then just explore and learn as much as you can, at your own pace.
A quick search in GitHub and you’ll find hundreds of projects that have used or combined some of the resources listed above into boilerplate to get you up and running. ‘Boilerplate’ is a word used to describe a template, where the default pieces are already set up for you to reuse, which means getting started faster.
Getting familiar with potential GitHub repositories can also act in your favor. It can mean that come hack-day you’ll just need to clone a GitHub repository and you’ll have your favourite resources ready to go, to turn your brilliant idea, into a brilliant product. Happy hacking!