I put this together as my way of giving back. I hope that it might help you get hacking smarter and faster ⚡️.

The Idea

Coming up with a decent idea can be difficult. For me, the best hacks are the hacks that make my everyday better. Ask your team what things they have struggled with in the past week - a boring repetitive task? Something mundane maybe?

Take those pain points and come up with as many solutions as you can for them. It doesn’t matter how crazy the idea is - sometimes the craziest ideas can be scaled down into something clever that no one has thought of.

Naming Your Hack

Keep It Short and Memorable

The shorter the better. The judges are going to see plenty of hacks. Is your hack’s name memorable enough to stand out from the rest? Less than 10 characters is my rule!

Choose A Name That Is Searchable

If I search for your name am I going to find it on google or does it share its name with a million other products and servies?

Align It With A Domain

Make sure the domain for your chosen name is available. Buy it early. Getting the domain activated can take a long time and if you leave it until the final stretch you’ll be too late to get it live.

Waste No More Time On It

The name is not important - the idea is. If you’ve spent more than 20 mins on the name then you’re doing something wrong.

Quick & Dirty Branding

Colour

Pantone Color of the Year

Since 2000, the Pantone Color Institute has declared a particular colour “Color of the Year”. Twice a year the company hosts, in a European capital, a secret meeting of representatives from various nations’ colour standards groups. After two days of presentations and debate, they choose a colour for the following year. The results of the meeting are published in Pantone View, which fashion designers, florists, and many other consumer-oriented companies purchase to help guide their designs and planning for future products.

You may notice that Monzo were paying attention when they released their bank card 😉.

Coolors

Coolors is my go-to-site for colour themes. I use their generator all the time to find good combinations I can use for logos, posters, websites and more! You can also paste in your own hex values and lock them and then generate colours that compliment them.

Font

Before using font make sure you read the typography manual.

Find two fonts that work well together here.

And download those fonts here.

Icons

The Noun Project or FlatIcon for SVGs and PNGs of everything under the sun.

Design Inspiration

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. - Laws of UX

This quote is a great reason to be inspired or even steal good design from other sites. I use three main sources for my inspiration:

dribbble: Arguably the home of designers online.

pages.xyz: A hall of fame for simply beautiful websites.

uplabs: A great place for designs along with their original files for download. Most of them are free.

Version Control

This is a hack, I dont need version control. Right? Wrong! Using version control might seem like it will slow down your progress but commiting regularly will allow you to time travel. Why is this a good thing? Well lets say you try to implement just one more feature before the end of the hack but you end up breaking your codebase, you can quickly jump back to when everything was working to show the judges. Magic.

But Sam, I’ve never used version control before! SOS! You’re in luck, I wrote a guide on git specifically for hackathons. Find it here:

Gimme Git Quick

Some Styles

Setting up style sheets can be annoying. I am a big fan of scss so here, let me save you the hassle.

(Psst! These are already in the boiler plates below if you’d rather just get cracking.)

Grid Layout

This codes is a little long for a snippet so save these links to grab the files.

Prerequisite: _flex.scss by Brian Franco

Then go and grab: layout.scss

Margin & Padding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Adjust this to include the pixel amounts you need.
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100); 
// Leave this variable alone
$sides: (top, bottom, left, right); 

@each $space in $spaceamounts {
    .margin-#{$space/5} {
        margin: #{$space}px !important;
    }
    .pad-#{$space/5} {
      padding: #{$space}px !important;
  }
  @each $side in $sides {
    .margin-#{$space/5}-#{str-slice($side, 0, 1)} {
      margin-#{$side}: #{$space}px !important;
    }
  
    .pad-#{$space/5}-#{str-slice($side, 0, 1)} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}

Now you have a grid system you can use:

1
2
3
4
5
<div className ="row">
  <div className="col-xs-12 col-md-6">
    // This div will take up the whole screen on xs and half the screen on md
  </div>
</div>

Colour Colour Colour

Switch out the brand colours at the top of this snippet with your own.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Add as many colours as you like comma seperated.
$brand-colors: 
("white",white),
("black",#1C1C1C),


@each $color in $brand-colors {
  .is-#{nth($color,1)}-bg{
    background-color: nth($color,2) !important;
  }
  .is-#{nth($color,1)}{
    color: nth($color,2) !important;
  }
}

Now you can add these colours to your things using:

1
2
3
4
// Make item the colour
is-white 
// Make the background the colour
is-white-bg

Front-end Boilerplates

Why start from zero when you can start with a boilerplate?

GatsbyJS

This is my new favourite framework. A react static site generator and so much more! Did I mention its blazing fast? I’ve built boilerplates in GatsbyJS for realtime updates, working with markdown and so much more. Check it out here.

Surviving The Night

Staying up for the whole hack is not easy - heres a couple of things I suggest you do to make it a little less painful.

Drink Plenty of Water

Drink water as often as you remember too. I never drank enough and I always felt super dehydrated by day two. It can improve your mood and will probably make your code better.

Avoid the Sugar Rush

Consuming lots of sugar can get you buzzing but its usually followed by a sugar low. When you are already tired, and you add a sugar low on top of it, then there is no way you will survive the night without crashing hard. Reserve the sugar until the final sprint.

5 to 7

For me the hardest time of a hack is 5AM - I get these pinching headaches right at the front of my head. I always find that if I can make it to 7 then I’m fine. If you find yourself with the same thing, stop coding, walk around, talk to people and preocccupy your mind with something else. It will pass. The only times I have ever caved at hackathons is when I’ve tried to continue coding at this point.

Fake It Till You Make It

My final piece of advice is to fake it if time is pressing. Chances are that the judges wont have enough time to delve deep into your project and be sure its all working as you say it is under the hood. If you’ve been stuck on something for a long time, find a way to fake the functionality and move on. Your idea is more important than your code.

Now Go Smash That Hack 💪