Category Archives: Coding

So I applied to be an astronaut

My life’s ambition is to go into space, so a few years ago I applied to be an astronaut.

At the time anyone could apply to ESA (the European Space Agency), so I went to the doc and to the hospital, had a bunch of tests done, filled out the application form and sent it off.

There was little chance I would succeed. But it made perfect logical sense to try.

There are two ways of getting into space: (1) become a billionaire, or (2) get hired as a professional astronaut. Maybe one day I’ll be a billionaire but I don’t want to count on it. So I just applied.

Actually, all my best decisions are made when I ignore the chances of failure and just do it.

  • Want to learn how to code? Ok, build a website.
  • Want to try building a business? Ok, start one now.
  • Want to find out if teaching would be a good career move? Ok, do it part-time and see whether it’s fun.
  • Like that girl a lot? Ok, ask her out.

These simple decisions are the best.

A) You can’t regret them

If it doesn’t work out, no big deal. You did the logical thing and tried. Your mind is at rest. Ssshh now little brain.

B) You know exactly why you made them

It’s a simple formula. You won’t get confused about your motives. Want something? Ok, have a go.

C) You always gain something unexpected

Building a website taught me how the internet works. Starting a business taught me a million things that I put into a recent post (How I lost £1,500 when I was 23). Teaching part-time right now is making me 10x better at explaining stuff and speaking in public. And the last girl I asked out is going to become my wife next summer, so that one worked out pretty well too.

Worrying about failure kills good decisions. Whenever I worry I lose the magic power to make simple logical decisions and I waste my life fretting. I’m glad that didn’t happen with applying to be an astronaut.

The physical tests and most of the application form were ok, though I couldn’t really disguise my lack of a PhD in astrophysics or biology. The weakest bit though was when I had to describe my experience in radio communications:

I did hospital radio for two years when I was at school. I was a presenter and had my own weekly show.

But since I haven’t actually heard back from ESA, I assume they’ve got me on the reserve list.

Hopefully someone will drop out soon.

 

+++

For more posts like this, Like the new Facebook page or follow me on Twitter:


How to build your first website in six hours (with a hangover)

I made toddmgreen.com on a Sunday afternoon, the day after a house party ending at 4am. I’m not much of a coder, so I was surprised how little time it took.

Lots of people I know want to make websites but assume it must be really difficult, so I thought it might be helpful to share how I did it.

I’ve built a couple of sites before, but I’m going to go through everything step by step. My aim is to write the post I wish I’d read the first time I tried to make a website.

This is roughly how I looked when I made my website

You will need:

1. A computer

2. The internet

3. Six hours

4. A hangover (optional)

Let’s go!

+++

1. Buy your domain name 

The domain name is the web address where people will find your website – e.g. toddmgreen.com.

You need to buy the domain name you want from one of the many companies that sell them.

toddmgreen.com cost me £8.89 from ukreg.com.

(I’ll talk about the specific companies I used to make my website, but there aren’t any affiliate links in this article – I used these services before and found that they work just fine).

2. Buy your hosting

The hosting is where the files that make up your website will live.

Again, lots of companies will be happy to help you.

I bought the basic package from BlueHost (it cost about £50, and I can use it to host several sites). Whoever you choose, make sure that (like BlueHost) they offer one-click WordPress installation.

3. Connect your domain name with your hosting

You have to do this so that when visitors go to your domain name, they’ll be able to see your website.

First, go to your hosting provider account and find what’s known as the ‘nameserver’ addresses. For Bluehost, the nameserver addresses are NS1.BLUEHOST.COM and NS2.BLUEHOST.COM – if you’re using another hosting provider, it’ll be something similar.

Second, go to your domain name provider account. Select the domain name you just bought, and change the nameserver details to the nameserver details for your hosting provider. If you’re using UKReg, hover over ‘Domain names’, click ‘Registered domains’, click the domain name you want to use, and click ‘Change nameservers’. Then select ‘Specify nameservers’, type in the nameserver addresses, then click the save button.

(No caption required)

Third, go back to your hosting provider account, and tell them that you’ve assigned your domain to their nameservers. If you’re using BlueHost, go to this page.

You’ll probably get a message saying it’ll be 48-72 hours before the nameserver changes have been made. I think they’re being rather conservative with their estimate, though – when I did it for toddmgreen.com, it only took about 90 minutes.

4. Install wordpress.org

wordpress.org is a super-simple way of making and managing your website.

You might be familiar with WordPress as a place to write a blog. That’s wordpress.com – they provide a free and easy way of creating a blog. wordpress.org is run by the same crew, but it’s more flexible and powerful – that’s one reason why I wanted to use it for making toddmgreen.com.

The other reason is that the ‘open-source’ community at wordpress.org has created loads free tools for things like showing your tweets or allowing people to subscribe to your blog by email. We’ll look at those tools (known as ‘plug-ins’) in a bit.

Since in step #2 you cleverly signed up to a hosting provider that offers a one-click WordPress install, setting up wordpress.org to run your site is easy. Just find the relevant page in your hosting provider account and follow the instructions. If you’re using BlueHost, there’s a WordPress icon in the ‘SimpleScripts’ section of the ‘cPanel’ page. You’ll probably have to create a username and password as part of the process.

You should be taken through a handful of easy steps to complete the installation of wordpress.org. When it’s all done, you can start playing around with your site. Woohoo!

Yeah, I do love WordPress a bit

Type your domain name into your browser, then add /wp-admin on the end. That’ll show you the login screen for managing your website. Log in. Right, let’s start on the site itself…

5. Choose your website design

The first thing you’ll probably want to do is make your site look sexy-beautiful by choosing a sweet theme. Themes are design templates for your website.

Click on ‘Appearance’, then ‘Themes’. You’ll see your current theme (the default one) at the top of the page. To see all the themes available, click ‘Install themes’, then click the ‘Find themes’ button.

Yep, there are thousands of them!

Scroll through to find one you like (mine is called ‘Clean Home’). To narrow down the selection, click ‘Search’ to get the search option tick-boxes to appear.

Don’t worry if you can’t decide – you can change themes any time you like.

Be sure to choose your theme from the official theme directory. If you get it from anywhere else, you risk letting bad guys hack your site – or, at the very least, having crappy code on your site. [Hat-tip to Mike Taylor for the warning.]

Once you’ve found the one you like best, click ‘Install’, then click the ‘Install now’ button.

Open a new browser tab and type in your domain name – you should see your beautiful-looking site right there on the internet!

If you don't read The Oatmeal, stop everything until you have. This is part of http://theoatmeal.com/comics/design_hell.

6. The basics

You might want to change the title and subtitle of your site. To do so, go to ‘Settings’ in the left-hand menu, and select ‘General’.

I made my ‘Site title’ toddmgreen.com, and my subtitle (‘Tagline’) is at the time of writing ‘Man, alive.’ You can also change some basic details like the time zone, the way dates are displayed. Click the ‘Save changes’ button at the bottom when you’re done.

7. Add pages

The default page is a blog page. But it’s easy to add pages – most people want an ‘About’ page at the very least.

To add a page, click ‘Pages’ in the left-hand menu, then click the ‘Add new’ button. If you want to add an ‘About’ page, type ‘About’ in the title box, then write something about yourself in the main text box, and then click the blue ‘Publish’ button.

Now go to yourdomainname.com/about, and you’ll see your new page. BOOM!

8. Changing your home page

I didn’t want my blog page to be the front page of my site (the one that appears when you go to toddmgreen.com). So I made a different page the front page instead.

If you want to do the same, this is how to do it. First, add a new page using the info in step #6. You can make the page title whatever you like – rather unimaginatively, I called mine ‘Home’.

If you want to keep the blog page, but don’t want it as your front page, go to ‘Pages’ in the left-hand menu, then click the ‘Add new’ button. Type ‘Blog’ into the title box, don’t type anything at all in the main text box, and then click the blue ‘Publish’ button.

Once you’ve done that, or if you don’t want to keep the blog page on your site at all, go to ‘Administration’ in the left-hand menu, then click ‘Settings’, then click ‘Reading’. In the ‘Front page displays’ section, choose ‘A static page’, then select the page you want to use (I chose ‘Home’ at this point). Click the ‘Save changes’ button, and you’re done.

Now put your domain name (e.g. toddmgreen.com) into a browser: you should land on the page you just chose, instead of the blog page. Huzzah!

9. Widgets

On the right-hand side of toddmgreen.com pages you’ll see a couple of widgets.

One is named ‘toddmgreen’s links’ – I’ve listed my Twitter stream, LinkedIn page, and the RSS feed from my blog.

The other appears as ‘Latest blog posts’, which displays the last three posts on my blog.

There are a dozen or so widgets available. I think the exact list depends on which theme you’ve chosen.

Adding a widget to your page is straightforward – here’s how it works.

Pink widgets make me a little uncomfortable

First, click ‘Appearance’ in the left-hand menu. Then click the ‘Widgets’ link in the ‘Current theme’ section at the top of the page.

You’ll see a big box full of available widgets. You can drag and drop each available widget into one of the sections listed on the right-hand side of the page. Almost all themes will offer you ‘Sidebar’ as a minimum.

‘Recent Posts’ is a pretty popular one for the sidebar (that’s where I’ve got it too), so let’s look at how that works. First, click on the Recent Posts widget under ‘Available widgets’, and drag it over to ‘Sidebar’ in the right-hand menu. Drop it onto Sidebar, and Recent Posts will automatically open up for your to customise it.

Type in the widget heading you want to appear on your site into the ‘Title’ box (I called mine ‘Latest blog posts’). Then choose how many posts you want to have in the list, and click the ‘Save’ button. Done!

You can add, edit and remove widgets whenever you like.

10. Plugins

The best thing about wordpress.org in my book is the plugins. Plugins make it really simple to add popular functions to your site – things like the neat little sharing buttons I’ve got on my site (e.g. at the bottom of this post), and tools that make your site easier for Google searchers to find.

Plugins are contributed by the guys who run WordPress, by members of the wordpress.org community, or by third-party services wanting to reach wordpress.org users. Some require you to sign up for the relevant service, and/or edit some simple settings (though even then none will take you >5 minutes to set up). Almost all are free.

A shameless plug

I’ve got nine plugins installed on toddmgreen.com. You can find them by clicking ‘Plugins’ in the left-hand menu, then clicking the ‘Add new’ button, then using the search box to find the one you want, and then clicking ‘Install’.

AddThis Social Bookmarking Widget – provides the sweet-ass sharing buttons on my site

All in One SEO Pack – helps Google find your site

Google Analytics for WordPress – Google Analytics tracks lots of stats about the way people use your site; this plugin connects your site to Google Analytics

Google XML Sitemaps – helps Google et al understand all the content on your site, so it’s easier to find

IntenseDebate – makes the comment box at the bottom of your blog posts look nicer. I just installed this yesterday, but it looks cool

Jetpack by WordPress.com – the mack daddy of wordpress.org plugins: made by the WordPress guys and featuring some top plugins that they bought, it offers a range of useful things – definitely install this one

W3 Total Cache – helps your site load faster

WordPress Backup for Dropbox – I use a file backup service called Dropbox; this plugin makes it easy for you to backup your site in Dropbox

WordPress Importer – if (like me) you’ll be turning a wordpress.com site into a wordpress.org one, this is the way to do it smoothly

WPTouch – this one adapts your site nicely for mobile browsers

Plugins are wicked, so get some. You can always ditch them in a couple of clicks on the ‘Plugins’ page if you don’t like them.

11. Changing the finer details of your site’s appearance

You can edit pretty much every detail of the way your site appears. I’ve done a (very) little bit of coding before, but you don’t need to know anything more than what I’m about to tell you.

The code files are like the DNA of your site – and wordpress.org lets you act like the scientist guys in Jurassic Park by fiddling around with anything you like. Just don’t use frog DNA.

Oh shit, they're breeding!

I’ll take you through a couple of examples of things I changed so that you can see how simple the basic stuff is.

All of them use the ‘Stylesheet’ file. The Stylesheet is a big document written in CSS, a coding language that determines how your site looks. That means that to change how the site looks, you need to change the CSS.

As the CSS for each theme is different, giving loads of specific examples is a bit pointless. So what I’ll do instead is explain the basics of how to edit your CSS.

Open the ‘Stylesheet’ by going to ‘Appearance’, then clicking ‘Editor’, then clicking ‘Stylesheet’.

At the top you’ll see a block of text that looks much like this:

body {
font-family: 'Shanti', sans-serif;
font-size:15px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.7em;
}

Let’s go through it line by line to see what it does.

body {   ->   This tells you that the section { between the curly brackets } relates to the ‘body’, which is the main chunk of text on the page. I’m writing this sentence in the body of this page.

font-family: ‘Shanti’, sans-serif;   ->   This defines the font that appears on the page. I’ve got one called Shanti from Google Fonts API, with the generic sans-serif as the back-up in case Shanti doesn’t work in the reader’s browser. Google Fonts API has clear instructions, but if you don’t want to bother with it just choose one of the fonts listed on this page – they work everywhere.

font-size:15px;   ->   This determines the size of the text on the page. Make the number higher/lower to make it bigger/smaller.

font-style:normal;   ->   This is the style of the font; you can choose ‘normal’ or ‘italic’.

font-variant:normal;   ->   This enables you to display the font as ‘normal’ or small caps; not sure why you’d want the latter!

font-weight:normal;   ->   This decides the thickness of the letters. I’m using ‘normal’; you could choose ‘bold’ or use a number to get a specific thickness (e.g. ‘900’ would make it thicker than the standard ‘bold’).

line-height:1.7em;   ->   This defines the spacing between the lines of text.

}   ->   This tells the browser that the section of code relating to the ‘body’ – all the stuff we’ve just been looking at – is all done.

There we go – that’s the section of code that enables you to change how the ‘body’ text looks on the page.

If you want to change other stuff, no problem. The one thing you can definitely find on the internet is information about how to make stuff for the internet. So if there’s anything you want to change about the way your site looks, type ‘CSS [what you want to do]’ into Google and you’ll most likely find the answer.

Don’t be scared by the code – it’s not the Matrix. Sadly :(

Is this sandwich real?

12. Give it a try!

All that should be enough to get you going.

The tools available to layman website-creators these days are pretty awesome, but they are not always that easy to understand. I hope this post helps to bridge the gap between what’s technically possible and what non-specialists are able to understand.

Good luck, and have fun.

~ Todd