Tips And Tricks To Set You Apart From The Tech Crowd (Part 6)

3/31/2013 9:20:47 AM

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

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

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

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.

Top 10
Review : Sigma 24mm f/1.4 DG HSM Art
Review : Canon EF11-24mm f/4L USM
Review : Creative Sound Blaster Roar 2
Review : Philips Fidelio M2L
Review : Alienware 17 - Dell's Alienware laptops
Review Smartwatch : Wellograph
Review : Xiaomi Redmi 2
Extending LINQ to Objects : Writing a Single Element Operator (part 2) - Building the RandomElement Operator
Extending LINQ to Objects : Writing a Single Element Operator (part 1) - Building Our Own Last Operator
3 Tips for Maintaining Your Cell Phone Battery (part 2) - Discharge Smart, Use Smart
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular Tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8