Gustav Svalander

Entrepreneur and Web engineer

Today I noticed something new in my Gmail inbox. A link in the subject-header, very cool feature. Seems like this is something from scheme.org



So it's possible to add subject link?! Wow! The link says Listen on Spotify

After some decoding and investigation I found these lines included in the email body. Seems like it has to do with the magic.



<span itemscope itemtype="http://schema.org/EmailMessage">
  <meta itemprop="description" content="Gustav lade till ny musik till spellistan Klubb">
  <span itemprop="about" itemscope itemtype="http://schema.org/CreativeWork">
    <meta itemprop="name" content="Klubb">
    <span itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
      <meta itemprop="url" content="http://www.spotify.com/redirect/email-wp/?username=xer&template_name=notify_playlist_update.html&utm_medium=email&open=http%3A%2F%2Fopen.spotify.com%2Fuser%2Fgustsval%2Fplaylist%2F3LEqrGmTyZohmOBEZIOW7e">
      <meta itemprop="name" content="Lyssna på Spotify">
    </span>
  </span>
</span>

Distributed systems on flipboard 30 mars 2014

View my Flipboard Magazine.

Chalmersdagen 2014 20 mars 2014

Today I was representing my programme, computer science, for the open Chalmers-day.

UX Pattern: Merge login and sign up form 16 mars 2014

Why is there always two separate pages for login and sign up? The foremost answer according to me is that HTML-templating and HTTP POST-requests is done easier having them separate. You simply have two forms the user posts to the server, maybe on the same page but more commonly separate ones. Leveraging the ease of signing up on your website is most important before anything.


At my current venture, myInternship, we are currently building a traditional authorization process for our users, with profile-page and everything. We will be doing this slightly different. This purposed design pattern let's you merge your sign up-form with your login-form. Creating a common flow for both new and returning users.




  • The sign up and login page are merged into one single form. At first this form only consists of an email field. Whether or not the email is registered the form will adapt with appropriate fields. Either sign up, login or "check your inbox".
  • Verify email and reset password are replaced by a single set new password. This is a landing page from an email-link where the user enters their password, it will clear any password already set, combining the reset password-step.
  • Having the user not setting a password on first visit puts that burden in the future when the user is more committed. The stats will tell if this is a good idea.

The flow is very simple as long as the user don't avoid or don't gets the set new password-mail. It's the only edge case where the UX is threatened.

UX traps this pattern solves

  • User switching sign up/login-forms whether account exists.
  • User will be asked to create a new account immediately in case the wrong email was entered on last visit. It's forever lost anyway.
  • Decision points and navigation complexity overall reduced.
  • User trying to recover password on non-existing account.
  • Existing user enters credentials in sign up-form. It happens, sign up is most forthcoming.

Security aspects

The vulnerability of this design is the required AJAX-endpoint for checking if the email is in use. The attacker could brute-force email addresses to check for valid ones or test a list of addresses trying to figure out who is a member on the site.

To counter this threat myInternship does rate-limiting on the number of different addresses tested and the total number of requests per IP. Additionally session-bound unique input names are used, this eliminates direct POST-requests. Since an attacker might use a botnet you can't entirely rely on ip-blocking. Therefore a captcha should be required for successive failures or suspicious activity to verify the session.

Related

Log in or sign up?

Change of blog-engine 16 mars 2014

Recently this blog was running Wordpress. The threat from bots was really overwhelming. Thousands of requests just probing for unprotected Wordpress system-files and pages. Since I put the installation online (about one year ago) 30k requests has been made trying to bruteforce my login and password.
The requests are probably from zombies or JS-injected web-browsers. Wordpress is starting to be a security issue as written about in this article, 162000 wordpress sites used for DDOS-attack. Makes me not wanna use it.
1394928923	106.187.47.170	/wp-login.php	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ...
1394904198	91.144.108.126	/wp-login.php	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ...
1394904159	91.144.108.126	/wp-login.php	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ...
1394856460	144.76.169.166	/wp-login.php	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ...
1394856458	144.76.169.166	/wp-login.php	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ...
1394846632	144.76.169.166	/wp-login.php	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ...
1394822127	91.144.108.126	/wp-login.php	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ...
This time around I'm not using any known blog-engine.

F2 på en Cylinda DM62 diskmaskin 19 februari 2014

Jag fick häromdagen felmeddelandet F2 på min Cylinda DM62. Felet beskrivs i manualen som "För mycket vatten", åtgärd: "Kontakta service". Felet som vi hade visade sig vara att diskmaskinens undre vattenuppsamlare hade fyllts med vatten. Diskmaskinen varnar för att det kan vara vattenläckage och kör därför avloppspumpen på max. Bra design!
Det finns risk att maskinen läcker vatten så problemet kan vara allvarligt! Ignorerar du det så kanske du får bada i köket.
Den tillfälliga lösningen utgjordes av att torka upp vattnet i uppsamlaren/bottenplåten. För att komma åt den räcker det att skriva loss den nedre frontpanelen. Den sitter med 6 torxskruv och man behöver inte flytta ut maskinen. Tamponger, sprutor, papper eller fläkt över natten kan vara några tips.
Från manualen: Tänkbara orsaker
  • Stopp i avloppsslangen. Kontrollera att ingenting fastnat där avloppsslangen är ansluten till diskbänk- ens vattenlås. Det kan fastna skräp mot anslutningsrörets mynning. Kontrollera dessutom att det kon- formade anslutningsröret är kapat så att den invändiga diametern blir så stor som möjligt, dock minst 16 mm. Veck på avloppsslangen. Kontrollera att slangen inte har några veck eller hårda böjar.
  • Silarna igensatta. Rensa grovsil, finsil och filter.
  • Avloppspumpen igensatt. Rensa pumpen.
  • Ett surrande ljud (avloppspumpen) hörs från maskinen, som ej upphör när strömmen bryts med huvudströmbrytaren.
    1. Stäng av vattenkranen.
    2. Dra ur kontakten.
    3. Ring därefter service. (Det kan vara ett vattenläckage och F2 visas)
  • Kontrollera att passbiten sitter rätt till vänster i bottenbrunnen vid avloppspumpen.

Finding the right talents in school 15 januari 2014

Lately I've been involved constructing a new website called myinternship. It's all about the new way of searching for talents before graduation from collage. Mainly through internships and practice.

My first book 23 oktober 2013

I've written a book (almost) about distributed computing. I've actually just put together some relevant wikipedia articles and ordered some printing, but it's really cool!

#wowhack2 finished, and we got a price from Parlophone 11 augusti 2013

Panflute heros presentation, playing with that puppy during the hack was just heart-melting.

I participated at The way out west hackaton in Göteborg this week. Very cool event, awesome submissions, and a lot of fun! My idea for our project was to make it easier to tag music inside social media. Hash-tags are just too wide, the need for a music-tag is eminent. The project took the name Shash as in S(ound)hash and we set the concept together and made a small demo.
Video of our slides
Our submission
Today the project got mentioned in Wired UK

10 myths about entrepreneurship 15 april 2013

  • Entreprenörskap är inget extraordinärt fenomen. Det kan hända vem som helst.
  • Man utgår inte ifrån mål, utan sina medel.
  • Man förlitar sig aldrig på en enskild lösning till ett problem.
  • Affärsplaner underlättar inte att förutse framtiden.
  • Entreprenörer försöker inte förutse framtiden, de formar den.

How to capture SIGINT and SIGKILL in Go! 27 mars 2013

When exiting your Go! program it's important to finish any work in progress, this requires capturing the OS signals. One signal is called SIGINT(Interrupt) and is created by someone pressing Ctrl-C. This is the only one Go supports since it's consistant across platforms.
From the Go package docs
var (
  Interrupt Signal = syscall.SIGINT
  Kill      Signal = syscall.SIGKILL
)
The only signal values guaranteed to be present on all systems are Interrupt (send the process an interrupt) and Kill (force the process to exit).
import "os/signal"

signals := make(chan os.Signal, 1)
signal.Notify(signals, os.Interrupt)
go func() {
  for signal := range signals {
    log.Printf("captured %v, exiting.", signal)
    // Tell app to exit
  }
}()
 
If we like to extend this concept we could also capture SIGKILL and multiplex the two channels:
import "os/signal"

sigint := make(chan os.Signal, 1)
signal.Notify(sigint, os.Interrupt)
sigkill := make(chan os.Signal, 1)
signal.Notify(sigkill, os.Kill)
go func() {
  for {
    select {
      case <-sigint:
        log.Printf("captured SIGINT")
        // Tell app to exit gracefully
      case <-sigkill:
        log.Printf("captured SIGKILL")
        // Tell app to exit now
    }
  }
}()

os/signal package
Stackoverflow question

How to create your own MVC template-engine in PHP 22 mars 2013

How do you handle templates in PHP? There are many ways to do it. One way is to use PHP-files as templates. This approach enables independent loading (otherwise you always need to finish off the page with the view). This is a simple yet powerful MVC-pattern for PHP:

template.php

<?php
// Load a php-file and use it as a template
function template($tpl_file, $vars=array()) {
  $dir='/usr/local/app/view/'.$tpl_file.'.php';
  if(file_exists($dir)){
    // Make variables from the array easily accessible in the view
    extract($vars);
    // Start collecting output in a buffer
    ob_start();
    require($dir);
    // Get the contents of the buffer
    $applied_template = ob_get_contents();
    // Flush the buffer
    ob_end_clean();
    return $applied_template;
  }
}

template_for_firstpage.php

<html>
  <head>
    <title><?php echo $title; ?></title>
  </head>
  <body>
    <p><?php echo $content ?></p>
  </body>
</html>

model_for_firstpage.php

<?php
class FirstpageModel {
  static function getVars(){
    return array(
      'title' => 'Firstpage',
      'content' => 'Firstpage content'
    );
  }
}

controller_for_firstpage.php

<?php
require "template.php";
require "model_for_firstpage.php";
$template_vars = FirstpageModel::getVars();
echo template('template_for_firstpage', $template_vars);
Nice and easily separated. Now you can pass the template-files to your designer and your model-files to your back-end engineers. What does it do? Template xml, xhtml, css, you name it Separate Model, View, and Controller Allow nesting of templates independently, first load footer, then header, then content, print it.

gustav@gustavsvalanders.com