Do Coding
Silicon Roundabout startup Decoded
reckons it can teach the grammar of the web in a day. A few weeks back I couldn’t code at all. I’d messed about with HTML
basics and other decrepit languages half a life ago at college, but many of the
web’s modern acronyms were as arcane to me as colloquial Japanese. But I had a
hunger to understand, in part so that I could talk to developers without
glazing over - handy for work purposes - but also so I could get stuck into
some of this stuff myself. Code In A Day (from $750, decoded.co) is designed
for people with exactly that kind of hunger.
Silicon
Roundabout startup Decoded reckons it can teach the grammar of the web in a day
The idea is to provide novices with a grasp
of how the digital world works. When you first sit on the Shore ditch studio’s
Barcelona sofas, you may not know your Java from your cappuccino, but by the
time you sip your leaving beer you’ll have coded your very own location-aware,
responsively designed, HTML5 web app that’ll work on any modern browser,
desktop or portable.
Our guides on the day are one of Decoded’s
founders, the enthusiastic and erudite Ali Blackwell, plus Craig Steele, an
ex-MOD software bug tester who now creates course materials for computing in
Scottish schools. According to Blackwell, code is simply instructions, and
given that we all know how to issue instructions, we all have an innate ability
to code. There’s just the small matter of learning to translate those
instructions into a language that a computer will understand first.
The day starts with a computing history
lesson. Although entertaining in its own right (did you know, for example, that
Sir Tm Berners-Lee is kept up at night by the waste caused by his inclusion of
the two slashes that follow every http?), this serves as an introduction to the
elements that make up modern sites and apps - HTML, CSS and JavaScript as they
emerged.
The
day starts with a computing history lesson
Next, there’s a look under the hood of a
few sites using browsers’ built-in debugging tools to see how this code
manifests itself on our desktops (you can do the same - just right-click
anywhere in a page on Chrome or Firefox and select ‘inspect element’). Once
we’ve grasped the gist of it (or at least pretended we have), we move to a
‘power table’ laid out with 11in MacBook Airs, where we’re introduced to Coda
2, the professional editing software we’ll be typing into for the rest of the
day.
Weaving our web
From that point on we’re actually doing it.
OK, so we’re only taking baby steps and tottering ones at that - but it’s all
completely hands on. We start by typing out the basic structure of a web page,
embedding an image and text, then formatting our page’s design with CSS code.
The way the Airs are set up allows us to see the impact our changes make within
seconds, which is just as well given the number of times we screw up.
Before long we’ve stuck on a background and
added code that adapts the layout for different screen resolutions. Next up are
the fonts - plumbed into our CSS code directly from Google Web Fonts, a simple
bit of copying and pasting all we need to make our apps look gorgeous. Seeing
how it all comes to life is exhilarating, and helps hit home just how amazing
Google’s contribution to the fabric of the web has been. Frankly, it’s
incredible that Web Fonts is free.
All good and all just about within our
capabilities, but the challenge really ramps up when we start looking at the
gritty business of transforming our dumb web pages into web apps via JavaScript
programming. At this point we receive another sage lesson: many developers
don’t actually type that much code themselves - they just use someone else’s,
the web’s culture of collaboration being such that copying proven code is just
the way things are done.
Following the script
Next we’re introduced to the wonders of
jQuery, a library of JavaScript functions created by John Resig and now used in
most of the world’s biggest websites.
Copy the library into your site’s folder,
reference the relevant function, dress it up to suit and - hey presto! - you
have newfound features. Embedding a tweet button, fading in your text box,
sliding a pane from one side of the page to the other - it’s all there, and
it’s all free.
Back at the sofas, and Ali and Craig take
us through the three building blocks of any program: variables, logic, and
functionality. After a few thought experiments, we begin work on the
‘pseudo-code’ for our own apps, which will let a user know exactly how far
their computer is from a given point on Earth (in this case, the Decoded
studio).
Now this stuff isn’t easy, but the crucial
lesson is that, even if you don’t understand 100% of the code, it doesn’t mean
you can’t use it. As with most things in life, a bit of intelligent Google
searching will usually turn up an answer - as we discover when we’re told to
program our apps to access our browsers’ geo-location APIs, then make use of
the data they find there.
After some adaptation, some head-
scratching and a healthy helping of teacher input, we’re all the proud creators
of fully working web apps. And, after sticking them on the Decoded server, we
can even access them on our phones and tablets. It’s hard to state how
satisfying that is. Time for that celebratory beer.
Now, to paraphrase The Killers, I can code
but I’m not a coder. It takes years of work to become a proper dev, and no-one
at Decoded would ever claim any different.
But I’ve made my own app, I can adapt and
work on it by myself, and if someone comes to me with talk of failing APIs or
PHP I’ll be able to do much more than smile and blink. Not bad for a day’s
work.
Try Will's app
It's simple, not very pretty, and it's been
adapted to always tell you how far you are from the Stuff offices.
Access it on any modern desktop or mobile browser and it'll do just that. Cool,
huh?
Coding tools
1. MacBook Air 11in
Website: www. apple.com
Small enough for coffee-shop coders but
with bags of power and an OS ideal for games or script editors
2. Firefox
Website: www. firefox.com
You'll want the latest Firefox for its ace
3D website element view, but also for its potentially vital debugging tools.
Website:
www. firefox.com
3. Coda 2
Website: www.panic.com/coda
Free code editors are available, but Coda
makes it easy, with auto-filling of terms, color picker and live previewing on
its iPad app.
4. GoDaddy
Website: www.godaddy.com
If you don’t want any bandwidth and
security issues, it’s far simpler to get your app hosted here.
Jargon Buster: The modern web's building blocks
1. HTML
Sir Tim Berners-Lee’s Hypertext Markup
Language is the universal language of the web. The content of every web page is
written in it and every browser reads it. HTML5 is the newest version, allowing
recent browsers to play slick animations and videos, provide image
manipulation, give access to a computer’s location and camera, and more.
2. CSS
Cascading Style Sheets are what makes the
web look pretty. They determine the layout, colors and fonts for the raw data
of associated HTML pages.
3. JavaScript
A programming language that makes the
modern web dynamic, and provides most of its interactive elements, turning web
pages into web apps, seen a nice transition on a site? Booked a ticket, or
picked a date from a calendar? Chances are JavaScript helped.
4. API
The Application Programming Interface
allows pieces of software to communicate and share data with each other. For
example, your browser’s geo-location API can furnish web apps with your
computer’s location.
