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

Responsive Web Design

Content-is-like-water-1980

Responsive web design beskriver design som tilpasser seg forskjellige skjermer (mobiler, netbrett, PC-er osv) slik at alle får en god opplevelse av nettsiden.

70 % av mobilene er smarttelefoner

Husker du hvordan mobiltelefonene våre ikke støttet HTML i gamle dager? I begynnelsen hadde de jo ikke en gang en nettleser. Men etter hvert begynte de å støtte et eget mobilt markupspråk som hette WAP. Heldigvis varte denne perioden ganske kort tid, og vi fikk raskt mobiler med god kapasitet.

I dag er mobilene så kraftige at hovedbruksområdet ikke lengre er å snakke i telefonen, men digitalt konsum. Allerede i slutten av 2012 var andelen smartmobiler på det norske markedet kommet opp i 70 % (jeg spurte Telenor og Netcom). Som du vet er det også kort avstand mellom nettbrettene i Norske hjem.

Innholdskonsumenter vs. innholdsprodusenter

Vi surfer på mobiler, nettbrett og (stasjonære)/laptopper med forskjellig hensikt og til forskjellige tider. Du har sikkert selv fisket frem mobilen i køen på Rimi, rett etter du våknet om morgenen, i et skikkelig kjedelig selskap (vær ærlig nå) eller på do. Så mobiler bruker vi til raskt informasjonskonsum og når vi måtte føle det for godt.

Nettbrett bruker vi i sofaen. Når vi skal slappe av. Noen ser på film, andre surfer, leser nettaviser, ser på bilder. Og mange av oss bruker nettbrett til læring (TED, app-er for barna, NRK…) Nettbrett inviterer til konsum av innhold med mer lengde enn mobiler.

Så hva da med laptopper og stasjonære maskiner? Laptopper har vi ennå, men stasjonære maskiner på vei vekk. Uansett representerer maskiner med skikkelig tastatur og relativt stor skjerm innholdsprodusenter i større grad enn innholdskonsumenter.

Knotete referat

Jeg skal være den første til å innrømme at jeg har prøvd å skrive møtereferat på en iPad. Spesielt da den var ny. Den var så annerledes og kul og representerte en helt annen angrepsvinkel enn de tunge, gamle laptoppene. Vi hadde ingenting som hette ultrabook den gangen, så å knote på en iPad var liksom litt elegant.

Nettbrett er best for innholdskonsument og ikke for produksjon av innhold. Selvfølgelig finnes det tastatur du kan klipse på nettbrettet, og det finnes nettbretthybrider som Microsoft Surface, som kommer med tastatur, og det finnes mange mennesker som produserer innhold på nettbrett, men på generelt grunnlag er nettbrett for konsumenter og ikke for produsenter.

Let’s get down to business

Nå er vi endelig inne på kjernen av Responsive Web Design (RWD). Hvordan kan vi tilpasse innholdet på en nettside, slik at det utnytter skjermbredden på alle de forskjellige enhetene? En mobil er jo fryktelig mye smalere enn en laptop.

Responsive Web Design bruker noe som heter Media Queries til å plukke opp bredden på skjermen og så tilpasse innholdet på siden tilsvarende. Strukturen endrer seg men innholdet endrer seg ikke.

Hvilke enheter er relevant

Når jeg tar ut oversikten over antall sidevisninger på kryss av en mengde norske nettsteder, får jeg følgende enheter, rangert etter mest brukt (disse enhetene utgjør 22 % av den totale traffikken):

  1. Apple iPad – 50 %
  2. Apple iPhone – 25 %
  3. Samsung (Galaxy Tab 2, Galaxy S2, S3 og S4)

Jeg har også tilgang til data som viser omsetning i nettbutikker pr. enhet, og også her følger enhetene samme rekkefølge som i listen over. Med andre ord er det Apple som er den store lederen i Norge, med Samsung på en OK andreplass. Alle de andre er ikke verdt å nevne. Dette kan riktignok forandre seg over ganske kort tid, men sjansen er stor for at Apple eller Samsung/Android vil være blant de største også om noen år.

Tilgjengelig på alle plattformer

Så hvordan påvirker dette RWD og strategi for store organisasjoner som en kommune? En kommune har ennå større krav til å være tilgjengelig for alle brukere enn det en kommersiell side har. Du kjenner kanskje til Direktoratet for forvaltning og IKT sine krav til universell utforming? Fra 2013 gjelder de også kommersielle nettsider, men i praksis er det kun offentlige organisasjoner som i dag har et visst press på å følge retningslinjene.

Tilgjengelighet via RWD handler mer om å tilgjengeliggjøre informasjon på andre enheter enn å nå alle brukertyper. Du må fremdeles følge kravene til universell utforming, men du når målgruppen i andre situasjoner enn foran PC-en.

Adaptive Web Design

Den alternative måten å levere enhetstilpasset innhold heter Adaptive Web Design (AWD). I stedet for å levere samme HTML til alle enheter, leveres spesialtilpasset HTML til to eller flere type enheter. En AWD-metode som brukes hos oss i Avento, er å levere forskjellig malverk under samme adresse. Du slipper med andre ord den gamle videresendingen fra www.kunde.no/produkter til m.kunde.no/produkter (som jo har irritert mange av oss).

Mange roter med begrepene AWD og RWD, noe som er forståelig, siden det hele tiden dukker opp nye begreper for å beskrive den eksponensielle digitale utviklingen (jeg har også rotet med begrepene). Nå er du blitt en av de som skjønner forskjellen.

Gull og grønne skoger

RWD er ikke bare gull og grønne skoger. Den “gamle” generasjonen webdesignere har fokus på realisme og fantastiske bilder. Det fungerer dårlig hvis du skal levere til alle plattformer. Det blir rett og slett for mye data for mobiltelefoner å laste ned.

Skal du lage en responsiv nettside som fungerer godt, må du basere den på en UI-pakke med et grid-basert layout, slik som Twitter sin Bootstrap. Kort forklart så gjør grid-et en del av tilpassningsjobben for deg, så du slipper å legge inn så mange timer for å få de forskjellige enhetene til å vise nettsiden din skikkelig.

Grid system

 

En nettside som bruker grid-basert layout trenger ikke å se ut som masse firkanter ved siden av hverandre. Det viktige er at elementene følger størrelsene til kolonnene, slik at de enkelt kan kolapses på smalere skjermer.

Mobile First

For å kunne levere godt responsivt webdesign, må du bruke designere som skjønner den nye designretningen som kreves. I 2010 sa Eric Schmidt at Google fra nå av ville utvikle med Mobile First som motto. Han gikk så langt at han sa “I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” (sitat) Skal du lage godt responsivt design, lønner det seg å tenke mobile first, og skalere opp derfra.

Credits http://www.digitalbookworld.com/

Credits http://www.digitalbookworld.com/

Poenget med mobile first er at du begynner med å laste inn det mest essensielle for de små plattformene. Dette gir oss en kjappere opplevelse av siden og tar vekk unødvendig lasting. Videre ressurser som trengs på større skjermer lastes kun når de trengs.

Konklusjon

Det finnes mange meninger og mye forvirring rundt responsiv vs adaptiv web design. Jeg skal ikke gi deg noen fasit, annet enn å si at mobiltelefoner og nettbrett også i framtiden vil utgjøre en stor og voksende del av innholdskonsumentet, så uansett hva du mener om RWD eller AWD eller hvilket buzzword som er det neste, må du forholde deg til at en stadig voksende del av brukerne dine kommer fra mobile enheter.

Sjekk gjerne ut noen av referansesidene. De går dypere i materialet. Du kan også se på noen av eksemplene må RWD og AWD.

Referanser

Les om forskjellen mellom adaptive og responsive web desing:
http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

Netlife Research om responsivt design:
http://iallenkelhet.no/2012/01/25/responsiv-design/

Mobile first design: Why it’s great and why it sucks:
http://designshack.net/articles/css/mobilefirst/

Noen norske sider som bruker responsive web design

Noen norske sider som bruker adaptive web design

 

We underestimate simplicity

I watched a documentary the other day, about a stealth-plane developed by the Germans towards the end of the second world war. The plane was an answer to the British radar system, which gave the Brits an early warning when the German bombers came to attack airports and cities like London. The plane was stealth much because it was built of wood and painted with radar wave absorbing paint.

What struck me was; we tend to believe we are so far advanced that we can’t discover new things in the simple. Wood is simple.

Perhaps you’ve read the quote by former Chairman of IBM who allegedly said “I think there is a world market for maybe five computers” (Thomas J. Watson, 1945), or maybe you’ve laughed at some of these statements:

  • “A rocket will never be able to leave the Earth’s atmosphere.” — New York Times, 1936.
  • Rail travel at high speed is not possible because passengers, unable to breathe, would die of asphyxia.” — Dr Dionysys Larder (1793-1859), professor of Natural Philosophy and Astronomy, University College London.
  • X-rays will prove to be a hoax.” — Lord Kelvin, President of the Royal Society, 1883.

Today we look at these statements and laugh to ourselves, saying “people were stupid then, but now we know better.” Or are we? The things of it is: We have a tendency to become overly self confident about our own understanding and level of knowledge. We think we are at the top of humanly achievable knowledge and understanding.

I believe Thomas A. Edison was correct when he said: “We don’t know a millionth of one percent about anything.” Let me show you an example: Graphene. This super material is bascially a 2D structure of carbon, yeah, a one atom thick sheet of carbon, and it has enormous potential in areas we are continually discovering. One will most likely be the tinyest transitors you’ve seen this far, or what about the strongest material ever made? Graphene has tremendous potential, and for that reason nations are investing billions as we speak.

How did we ever find a way to create graphene? You might think it was a complicated process that involved the best brains in the world? Well, it was discovered using regular adhesive tape. Russian physicists Andre Geim and Konstantin Novoselov and the lead from pencils. Six years later, they won the Nobel Prize for their work.

So my plead is:

  • Don’t overlook the genious of simplicity.
  • Don’t stick with status quo.
  • Don’t be arrogant about your knowledge or insight

Or people might laugh at your alleged truths in the future.

If your train is wrecked, you need to fix the train

Customers seldom attack the company regarding their social strategy. They complain about your bad trains, bad customer service or your meanness in general. Social Media amplifies the customer’s voice.

– Arnt Christian Scheele

Train wrecks

Digital productions used to be an add-on to the general campaign, ending up not exploiting the strengths of digital media, but as a half product. Though this is changing, the same trend is present for social media: 5 % of the budget is used to create the social media product – at the end of the digital production.

NSB had enormous problems with their local trains, and therefore also got a tsunami of complaints on their Facebook page – about their bad trains – not about their social strategy. If you are evil, creating a Facebook page won’t make you less evil (NSB is not evil).

Conclusion: If your train is wrecked, you need to fix the train.

Why Sparebank 1 loves mistakes!

“Why not tell that we also make mistakes? I love negative news! Whenever one of our 6 000 employees does something wrong, I rejoice. It shows that there are people behind the logo. People don’t care about Sparebank 1 – but they care about people.

Christian Brosstad, Information Director, Sparebank 1

Negative is positive

“A few years ago, we dreaded telling about the many phishing mails. Now we proactively tell the users about these threats before they manifest in full.

Banks are no longer only a bank, but a media house. Big newspapers like VG read our blogs to get information for their articles. The old communication strategy is dead.”

Sharing

The younger employees work totally different from most of the old work force, that hold unto the accumulated knowledge. The new generation love to share their knowledge. Give them freedom to share. They are royal. Treat them thus.

Ask the customer for help

Thank you for engaging, thank you for participating. Instead of denying the employees access to the social dialogue, we establish guidelines for how and what to talk with the users about.

Why Sparebank 1 is the best bank

What is the difference between Sparebank 1 and all the other banks? Nada. The difference is in the people and how they relate to the customers, which again concludes with the same as Elin Lind in NAV and Cecilie TS: It’s about people.

This is one of the articles published directly during each of the 20 minute speeches that are held during Social Arctic 2013 in Tromsø. 

How to create a greenhouse for trolls

Elin Lind at NAV owns the first governmental Facebook page that has ever had success. During Social Arctic 2013 she shared the recipe on how to create a greenhouse for trolls and how to become the most popular Facebook page in the country. 

In 2009, NAV tried to establish a Facebook page with the strategy “let’s just jump into it”. It became a green house for trolls. I believe the success of our current social strategy lies in the difference between the old and the new Facebook page. – Elin Lind, NAV

Elin started from scratch, this time with a strategy, and created a page for paternity pay, which was by far the most discussed topic in social media. Everyone who has children – you’ll understand.

We use most time to give answer requests. We don’t really push information. Without any hidden agenda, we simply provide service.

The plan is everything

Since the first approach of “fingers crossed” did not work, Elin established a social strategy for the paternity pay page, containing some of the following keywords:

  • Language policy
  • When and how to delete posts
  • Dialogue vs Information:
    Talk with, not to the user.

Niche vs the monster organization

We have almost three million customers. Creating one Facebook page for this amount of users is very hard. Therefore we decided to focus the attention on paternity pay. Internet is all about niche. Don’t believe me? Read Copyblogger on niches.

It’s all about people

 

As Cecilie TS said, let the user have speak with people that can talk with the user from their heart, rather than letting the communication advisor own the dialogue.