Learn to code, Part 2: Wireframing tools

Have I got a treat for you! Today you’ll learn how to hack The NASA! Okay, not really. Coding is not about hacking and in Part 1, I promised to make you a super hero, remember?

Part 1 also talked about asking why, Today we’re going to learn about mocking – or wire framing.

Choosing an app that doesn’t hate you

There are tons of apps out there. Just google 20 best wireframe tools. A lot of them are online, collaborative tools, while some are download-and-installable. All of them say they’re gonna empower you to make quick, accurate sketches of desktop apps, websites or mobile apps. One of them, however, distinguishes itself from the bunch by their why: 

Helping rid the world of bad software

Personally, I fell in love with Balsamiq Mockups four years ago, when I started working for my current employer. I was hired as a web developer, and my focus was their next big web app that would run anywhere, on any device. Scalable, sleek, futuristic, yeah. I stumbled upon balsamiq, and liked it immediately. And they have a cute logo:

Bilderesultat for balsamiq logo

Trying to be as ugly as possible

I told my brothers, Dan and Benjamin, that wireframing tools kind of balance between pretending-that-I-am-a-photoshop-clone and quick-and-simple. However, along that road many tools end up trying to be as-ugly-as-possible-because-simple-is-ugly-or-something.

Wireframing tools are not supposed to be a replacement for the design process. Come on! We have great design tools out there. On the other hand, if they become too basic, they also tend to become be super ugly and hard to use. I’ve seen a few.

Is Balsamiq the best? Yeah, definitely. Okay, maybe not – I haven’t objectively dissected every tool. But I’ve seen a few tools and I’ve tried using some of them. I even did today! I went on a hunting trip across the web, trying to find a great tool with a free community license. I finally ended up sending an e-mail to Balsamiq’s CEO Giacomo “Peldi” Guilizzoni, asking if I could get a few licenses for this teaching project.

I got a sweet reply from their Head Chef of the Wow! Division, Valerie Liberty where she told me it was her pleasure to give me three licenses to the “Pedersen Brothers”. Little did I know that they have actually given away more than 10 000 licenses up through the years.

Remember how we talked about the reason for existing in part 1? Balsamiq is all about that.

Golden links

It’s getting late, and I have not even started talking about UX and wireframing! For now, I’ll leave you with some links I found on Balsamiq’s website. Enjoy and see you in part 3, where we’ll start digging into wireframing with Balsamiq!

Balsamiq Success Stories – a free book on nine people’s experience of how Balsamiq helped them and how it didn’t help them

Little Big Details – a curated collection of the finer details of design, updated every day.

Inspire UX – a blog that posts articles and quotes relating to User Experience Design (UX)

Learn Balsamiq through the UX Apprentice.

 

Learn to Code, Part 1: Start With Why

This is the first post in a series where I’ll teach you how to code. My friends and I anyhow. We’re gonna take you from zero to hero. Ready?

Before we start conquerring the world with code, increasing our income by three-digit-per-cents and becoming more athletic, let’s start at the beginning – before the beginning:

Why

Simon Sinek says you should start with why. Like Apple. When Steve Jobs was alive, anyhow. So why should you code? What do you want to code? No, wait – start with why:

The intention of your coding project. What do you want to achieve? What is the core belief of the business you’re about to embark on? Start with why – right after you’ve watched Simon’s video (he’s at TED-talks – so he’s a part of the inner circle – right?)

Now that you’ve become a believer in why, just for kicks, let’s say out core value is:

Make people’s work life more meaningful and less exposed to financial stress

How

The thing of it is: We work – earn money – spend money – go to start. However, how can we relate to work and money in a way that takes some of the stress off the income part. How can we help people in a way that makes them stand ahead of their peers and at the same time bring meaning and value to their work life?

Remember our core value? We want to make people’s work life more meaningful and less exposed to financial stress. We want to make people more able to produce value than their peers (no, not just better than Peer). How can we do this? I think I’ve got an idea! Check this out:

Make people stand ahead of their peers by raising their skill set to a level where they can deliver a far higher value.

What

Now that we know the why and the how, let’s find out what we’re gonna make. We’re taking code here, right? So my suggestion is that we make:

A web based learning platform with an accompanying cross platform mobile app

Sounds good? We – obviously – don’t know anything about coding, programming, web development, nada, zip, so we have to start at the very bottom.

A digression

Ever heard about the horse that had fallen into a rather deep ditch?

The owner did what he could to pull the horse out, but the ditch was too deep and the horse was too heavy. After a few days, he decided it was better to end the poor animal’s misery quickly than to let it die from thirst.

He decided to bury the animal (alive) and started shoveling dirt into the ditch. As the dirt hit the horse, it shook the dirt off and stomped it down under it’s feet. As the man continued shoveling dirt, the horse continued shaking it off and stomping it down – being lifted a few millimeters at a time – until it was finally able to leap out of the ditch.

You might feel as though I’m going to throw piles of dirt at you, trying to bury you alive. But take heart, my friend. The dirt will be what helps you learn, master and conquer a programmer’s skill. Just like the horse. It must have been a unicorn.

In Part 2, we’re going to talk about prototyping and mocking. Stay tuned, unicorn!

Matbutikk på ferga!

Problem: Bortkastet tid på ferga

Jeg tar ferga hver dag til og fra jobb. For de uinnvidde: Det er en del fjorder i Norge. Mange av oss må ta ferge hver dag, ganske enkelt for å komme på jobb.

Selv om jeg setter pris på muligheten for å lukke øynene, senke seteryggen og støtte samferdselsnorge med en årlig sum tilsvarende en god bruktbil, er det allikevel bortkastet tid.

Tidligere hadde denne fergen en kiosk. Nå er den nedlagt. Tror det var dårlig med salg. Jeg handlet ikke. Men jeg ville handlet matvarer!

Løsning: Matbutikk på ferga

Hva om vi tok vekk den gamle kiosken og etablerte en matbutikk – en 24/7/365-brustadbubutikk! Se for deg sitteplass-delen av fergen: den ser omtrent ut som en lang, relativt brei gang. La meg ta en handlekurv ved inngangen, la meg legge i varer langs med hele gangen – ja – og med selvbetjening da.

Butikken burde solgt typiske ting som melk, brød, wienerbrød og nugatti. Tenk på de som jobber natt! De kunne tatt med seg ferskt hjem til frokosten, mens vi som jobber 8-16 kunne rasket med oss en Adams-matkasse-ish pakke med 25-minutter-til-suksess-middag.

Personal Crowd Shopper

Problem

Jeg går av og til og kjøper ting til familien fra de forskjellige fabrikkutsalgene her på Devoldfabrikken. Det tar tid, og jeg tenker ofte at her kunne jeg kjøpt inn mange flere enheter hvis jeg hadde kjøpere.

Løsning

En app (Ionic?) hvor jeg kan pushe ut at “nå skal jeg kjøpe greier” og så får alle abonnentene en push notification hvor det står hva jeg skal kjøpe, og de kan binde seg opp til et kjøp.

Monetization

Når jeg så går for å kjøpe, handler jeg 10 enheter i stedet for 1, og mine kunder kan betale et lite beløp ekstra for at jeg gjør jobben for de. Jeg ender opp med å tjene litt på dette i stedet for at det bare blir kostnad for meg.

WebService for Produktinformasjon

Problem

Mange nettbutikker har dårlig produktinformasjon. De kopierer og limer inn litt informasjon fra produsentens nettside – gjerne via Google Translate – og så er de fornøyd. Et stort problem jeg har lagt merke til, er når produktet begynner å bli “legacy” eller gammelt – da er gjerne produktinformasjonen skikkelig utdatert.

Løsning

En WebService hvor du kan sende inn EAN-nummer, språk og bredde på nettsiden og så få tilbake JSON – evt. HTML med nydelig formatert og strukturert. Kan hende dette finnes allerede?

Monetization

Produsentene betaler for å få lagt inn informasjon om produktet.
Nettbutikkene får x antall hundre tusen kall gratis – mens de store må betale litt.

XAML ALT+letter to focus textbox

If you want the user to be able to focus a specific field with an ALT+Key – eg. ALT+F, you can do it the following way:

<Label Target="{Binding ElementName=Username}">Enter _Username:</Label>
<TextBox
Name="UserName"
Text="{Binding Username, Mode=TwoWay, UpdateSourceTrigger=LostFocus}">
</TextBox>
  • Target of Label associates it with the TextBox.
  • Underscore _Before a letter makes it accessible via the ALT+Key

If you are from the Web World, you are used to associating labels with inputs via the ID-attribute. Target looks similar.

Download Google Web Fonts for self hosting? Look no further!

I’ve used way too much of my life trying to dig through the source code of Google Web Fonts, looking for woff, eot, ttf and svg files for hosting one of the many beautiful fonts on my own server.

Today I was doing the same when I kind of came to a freeze and asked myself if I am really doing this the best way. That’s when I found this post at SO which had link to https://google-webfonts-helper.herokuapp.com/fonts

Look no further! This tool does everything fast and correct. I needed Open Sans 300, 400 and 600 for an offline site and therefore needed to download the web fonts. In addition I needed latin-extended. This tool lets you select weights, extended characters and download everything as a nice zip file. In addition it generates the correct styles.

20150814145317

Bower vs JSPM

We are in the middle of a major shift in the web development world, and seeing the greatest change in about 15 years with ECMAScript 2015 (ES6) just released and and 2016 (ES7) on its way. Because of this rapid change, a myriad of tools are popping up every day and it can be hard to keep up with all the fancy acronyms.

This post explains the differences between the Bower package manager and JSPM or JavaScript Package Manager.

Package Manager?

A package manager lets you search for and install software packages that your application depends on. So there is usually a web site, like bower.io/search that shows you what kind of packages the manager has available, and you can also use the CLI (command line interface) to search for packages.

When you install a package, you can choose to save what package you installed to a config file, so your app will remember its dependencies.

Bower vs JSPM

So what is the difference between Bower and JSPM? The short answer is that while both managers let you install and update dependencies, JSPM is more future oriented. It automatically downloads SystemJS, which is a universal dynamic module loader that loads both ES6 modules, AMD, CommonJS and global scripts and maintains config.js to help SystemJS know where to find the dependencies. This StackOverflow question has further details.

Watch this recording from the London React Meetup where Jack Franklin talks about SystemJS and demonstrates how it works:

Going from Angular to Aurelia

I’ve started experimenting with Aurelia, the newest JavaScript MV* kid in town. Aurelia is created by Rob Eisenberg, who has 10 years experience building frameworks. He worked on the Angular for a while, but ended up being known as the guy who quit Google

I had the privilege of speaking with Rob at NDC 2015 before his talk on Aurelia, and I got a good impression of Aurelia. Rob also spoke well of his former work place at the Angular team, which speaks of character.

At work we started experimenting with Angular for rebuilding our dinosaur PowerBuilder software for the modern web as a SPA and we recently finished a prototype that uses Angular 1.4 and ASP.Net MVC. We made some conclusions:

  • Angular has a beautiful logo
  • Angular 1.4 is not (!==) Angular 2.0. The latter is a complete rewrite
  • Angular has a steep learning curve
  • Angular has quite vast and broad support in the community

Aurelia

So you want to learn Aurelia too? Aurelia wants to stay as close to the standards as possible. It’s written with JavaScript, so it lets you wirite ECMAScript 6 and 7 (using a transpiler lilke BabelJs) and it tries to stay out of the way so your code is not saturated with the framework’s opinions so much.

Start with the following two videos, which I find to be companions as one speaks of ECHMAScript 6 and 7 and the other is an introduction to Aurelia.

Rob speaking about ES6 at NDC 2015

Rob speaking about Aurelia at NDC 2015

Getting started

Then head on to the getting started section of aurelia.io and go through the tutorial. Also watch the introduction video at the front page of aurelia.io.

Update

Also have a look at this Aurelia blog post that compares Angular 2.0 code to Aurelia code: http://blog.durandal.io/2015/03/16/aurelia-and-angular-2-code-side-by-side/ 

Configuring jspm with Github

jspm.io is a frictionless browser package manager. If you haven’t heard about package managers, they are nifty little tools that organize the packages your software is depending on. So instead of downloading the same favourite script package every time you need it, you can configure the project to depend on the script and then stay in sync with the latest version using jspm install.

However, when downloading packages from github, there is a limit as to how many requests you can issue. You’ll quickly get the message github rate limit reached. To fix this do:

  1. Go to github.com, login and click settings
  2. Click Personal access tokens and then Generate new token
  3. Copy the token and start command line inside the project folder
  4. Type jspm registry config github

During the config process, you will be asked to enter the token. Do so, and you’re good to go.

2015-06-23 08-00-03 - C__Windows_System32_cmd.exe