Simon Pedersen

Blog

  • Lesson learned when deploying a new Azure Classic Web Service

    Lesson learned when deploying a new Azure Classic Web Service

    For anyone else that might be experiencing difficulties assigning a reserved IP-address to a Microsoft Azure Classic Web Service, here are a few tips:

    Why I didn’t use deployment slots

    I was running a production service at azure, and wanted a staging server where I could – yea – stage the next version before pushing it into production. Azure has something called deployment slots, which lets you deploy your site to different slots and then swap the slots whenever you’re ready to publish. Azure Classic Web Services seem to have two slots: Production and Staging.

    I didn’t end up using slots though. I could not find a good way to have the two slots share the same IP-address, which was what I needed at the time.

    Why would I need a reserved IP-address?

    If you just publish an Azure Service, you’ll get a public IP-address for sure, but you will not be guaranteed ownership forever. To mitigate the risk of losing your IP-address, you can create a reserved IP-address and assign it to the service. Here comes the recipe:

    (You can administer Azure from the web portal or via PowerShell, the latter being full fledged. In this case, however, I was able to do what I needed through the web portal)

    1. Publish your site without a reserved IP-address

    Initially I tried creating an IP-address first – and then assigning it to my service. This didn’t work. The error message was:

    Error: The Reserved IP TheNameOfYourReservedIpAddress does not exist. Http Status Code: BadRequest

    I think the reason was that I had assigned the IP-address to a custom resource group. When I later converted an existing IP-address to a reserved one, I noticed the resource group had been set to “Default Networking”. Maybe my first attempt would have worked, had I assigned the new IP to that resource group.

    Anyway, I ended up first publishing the site – and thus getting a non-reserved IP-address.

    2. Convert the IP-address to a reserved IP-address

    Using the PowerShell Command Line, I converted the IP-address of my service to a reserved IP address thus:

    New-AzureReservedIP –ReservedIPName TheNameOfYourReservedIpAddress –Location "West Europe" -ServiceName NameOfYourService

    If you haven’t used PowerShell for Azure before, don’t panick. I’d never used it before either. Just watch the first few minutes of this introduction, and you’ll be up and running in no time.

    3. Edit your ServiceConfiguration-file (.cscfg)

    After this, I edited the <ServiceConfiguration> node of my ServiceConfiguration file and added the following chunk:

    <NetworkConfiguration>
<AddressAssignments>
<ReservedIPs>
<ReservedIP name="TheNameOfYourReservedIpAddress" />
</ReservedIPs>
</AddressAssignments>
</NetworkConfiguration>

    4. Republish

    When you now republish, the site will use the reserved IP-address.

    Wrap up

    Did this help you? Great! Did it lead you astray? Not so great! If there are mistakes in the text, please tell me, so I can correct and perhaps help others 🙂

  • Learn to code, Part 2: Wireframing tools

    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

    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!

    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

    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/