Marius Hauken is a designer and partner at Stacc X, Bergen Norway.

En kort (personlig) innføring i smarthus

Holder du på å pusse opp huset? Eller kanskje du skal i gang med et nybygg? Uansett er nok smarthus én av de tusen avgjørelsene og tingene du må sette deg inn i. Her er mine erfaringer og tips om smarthus etter at vi har fullrestaurert et 40 år gammelt hus.

Smarthus

Smarthus trenger ikke være så dyrt

Etter å ha lest meg litt opp fant jeg ut at smarthus ikke trenger å være så dyrt og omfattende som jeg først fryktet. Når du først kjøper ny termostat og lysbrytere, hvorfor ikke bare kjøpe smarte versjoner av disse? Smarte produkter som snakker med hverandre har de siste årene blitt veldig konkurransedyktige i pris,så forskjellen er ikke så stor lengre

Z-wave

z-wave

Én av hovedgrunnene til at smarthusløsninger har blitt billigere er den trådløse fellesstandarden z-wave. Denne gjør at enhetene snakker sammen med hverandre og sender signaler via hverandre om noen av enhetene er lengre vekke. Denne gjør også at du ikke er bundet til én løsning for å styre smarthuset ditt. Du kan fint bytte mellom Futurehome, Samsung Smartthings, Homeseer eller andre smarthusløsninger. En annen oppside med z-wave er at termostater, lysbrytere o.l. funker helt fint som vanlige enheter før du kobler de til et smarthussystem.

Hvilke smarte dingser?

«Ok. Disse z-wave-dingsene virker ikke så dum. Men hvilke dingser skal jeg kjøpe for å få et smarthus?»

Varme

z-wave varme Termostater er kanskje det som er mest praktisk og økonomisk lønnsomt å gjøre smarte. Da kan du få funksjonalitet som nattsenking av temperatur, at varmen er av når du er på ferie og er tilbake når du kommer tilbake fra ferie. I Norge regnes termostatene til Multireg for bransjestandarden etter hva jeg har skjønt. Vi har én av disse i hvert rom og er godt fornøyd.

Lys

z-wave Den andre tingen som er lurt å ordne når du holder på med husplanlegging er smarte dimmere som kontrollerer lyset. Dette er en liten dings elektrikeren din installerer bak lysbryteren din på veggen som styrer lysstyrke, om lyset er av eller på og sender oppdateringer til smarthub din. Her finnes det mange forskjellige typer. Vi har Fibaro dimmer 2 i hele huset vårt. Alle lysbryterne må da være såkalte impulsbrytere. Bryteren vippes da tilbake igjen i samme posisjon som den var i når du klikker på den. Ønsker du mer eller mindre lys holder du bryteren enkelt og greit inne.

Dørlås

z-wave Etter noen måneder skaffet vi oss en smart dørlås i huset i tillegg. Vi endte opp med ID-lock som visst er den som passer best for det norske været. Det beste med en smarthuslås er at du ikke lengre trenger å ha med deg nøkler. I stedet for nøkler taster du inn en kode eller bruker en NFC-brikke for å låse opp. I praksis har jeg aldri brukt brikken fordi det er mye raskere og enklere å bare taste inn koden for å komme seg inn. Du kan også legge til flere koder om du ønsker å gi en egen kode til f.eks. håndtverkere.

Smarthustilkoblingen her er veldig grei da jeg får varsler på mobilen om døren åpnes om huset er i borte-modus. Du er også sikker på at huset er låst når du setter huset i borte- eller nattmodus. Jeg har også fjernstyrt åpningen av huset fra mobilen min når det kom en tømrer på besøk og jeg ikke var hjemme enda.

«Hva om batteriet på låsen er tomt? Kommer dere ikke inn i huset da?» Batteriene er på innsiden av døren. Så om jeg er inne er det bare å skifte batteriene. Om jeg er utenfor så kan jeg dytte et brannvarsler-batteri mot døren så vil døren kunne åpne seg.

Sensorer

Sensorer er noe av det som kan gjøre smarthuset vesentlig smartere. Disse finnes i mange forskjellige typer: Bannsensorer, dørsensorer, temperatursensorer, bevegelsessensorer ++. Det mest praktiske er bevegelsessensorer som blant annet kan skru av og på lys. Jeg har 3 aeotech multisensorer som gjør dette. Disse brukes stort sett til å skru på lyset henholdsvis i stuen, gangen og på badet. Det beste med sensorene er at de kan ha forskjellige funksjoner alt etter hvilken modus huset er i. Om huset er i hjemme-modus skrur sensorene på lyset. Om huset er i borte- eller feriemodus får jeg en melding på telefonen min. Om huset er i nattmodus trigges det noen rolige nattlys slik at nattesynet ikke skal bli ødelagt. Disse er også veldig greie å ettermontere. Så langt må jeg si at det mest praktiske stedet å ha sensorene er i ganger som bare brukes i blant, så slipper du å tenke på å skru av og på lys.

Brannvarslere

Du kan også få brannvarslere knyttet sammen med systemet ditt. Disse er ikke vesentlig smartere enn andre brannvarslere annet enn at de snakker med resten av systemet slik at de kan skru på lys og åpne døren om brannalarmen går, eller gi deg en pushvarsling på mobilen om du ikke er hjemme. Vær obs på at fibaro sine brannvarslere som er små og enkle ikke har innebygget sirene, slik at du må skaffe dette i tillegg.

Smarthub

Kanskje det viktigste du trenger for å få et smarthus er en smarthub. Det er en liten boks du har i huset ditt som er tilkoblet internett og som snakker med alle z-wave dingsene rundt om i huset. De har alle en tilhørende app som gjør at du kan styre huset fra hvor som helst. Her er en liten gjennomgang av de smarthusløsningene jeg synes virket mest aktuelle.

Futurehome

Dette er løsningen jeg endte på selv. Futurehome er en liten norsk startup som kontinuerlig dytter ut nye oppdateringer og funksjonalitet til smarthusløsningen sin. De har tidenes beste kundeservice (jeg har selv fått svar på under 10min en lørdags kveld), og har spennende planer fremover. Brukergrensesnittet deres er oversiktelig og enkelt, men for å være ærlig bruker jeg for det meste snarveiene de har på lås-skjermen på telefonen min.

Oppsettet av Futurehome var en veldig positiv opplevelse. Vi hadde kanskje bodd i huset vårt i 2 måneder før jeg kjøpte Futurehome og skulle gjøre huset smart. Jeg antok at det kom til å ta hele kvelden å koble alle enhetene til smarthubben, men etter 10 minutter var jeg ferdig med å koble til 9 termostater og 15 dimmere.

Futurehome har også et API du kan få tilgang til om du ønsker å gjøre andre spennende ting.

Smartthings

Dette er Samsung sin smarthusløsning. Den virker ganske bra, enkel og oversiktelig. Funksjonaliteten virker relativt likt Futurehome og er nok det jeg ville gått for om Futurehome ikke eksisterte.

Homeseer

Dette er nok den mest avanserte av smarthusløsningene. Her kan du gjøre absolutt alt du vil og lage de rareste regler. Det er nok denne som også støtter flest forskjellige enheter. Jeg skal innrømme at jeg slo fra meg denne løsningen kun pga. estetiske hensyn da mobilappen til Homeseer ser ut som den ble laget på 90-tallet av en ingeniør. De har visstnok et eget program hvor jeg kunne ha designet det som jeg ville, men det er rett og slett ikke det jeg vil bruke tiden min på. Pluss at det programmet bare var på Windows.

Home assistant

Home assistant er kanskje den rimeligste løsningen. Den er open source og kjører på en Rasberry Pi + en tilleggsmodul. Det betyr at om du har en del teknisk kompetanse kan du tilpasse denne akkurat som du vil, og nok bruke en god del tid på å få ting som du vil.

Moduser, regler og snarveier

Når du først får deg smarthus tenker du gjerne det er viktig å kunne lage mange avanserte funksjoner som at «dette skal skje om dette er oppfyllt». Etter å ha hatt det en stund synes jeg egentlig det er mer enn nok funksjonaliteter ved å sette et par hoved-innstillinger for hjemme, borte, natt og feriemodus og så ha et par snarveier som skrur av og på lys etter det jeg trenger. Dette dekker Futurehome ganske bra, og jeg synes de har funnet en sweet-spot når det gjelder balansen mellom brukervennlighet og avanserte funksjoner.

IFTTT

Om du ønsker flere avanserte funksjoner støtter Futurehome IfThisThanThat. Det vil si at du kan koble Futurehome opp mot mange andre nettløsninger og få mer avansert funksjonalitet. Jeg benytter dette blant annet til å automatisk sette huset i hjemme-modus når jeg nærmer meg lokasjonen til huset med mobilen min. En annen funksjon jeg har benyttet meg av er å skru på et overvåkningskamera når huset er i borte- eller feriemodus.

Alexa

IFTTT har også gjort at jeg kan koble huset opp mot Amazon Echo Dot og få Alexa til å skru av og på lys eller lignende. Det er unektelig litt gøy. Etter at vi fikk Alexa i hus har jeg nesten ikke benyttet meg av snarveiene i Futurehome-appen, men stort sett benyttet meg av stemmekommandoer til Alexa. Samsung Smarthhings har visst enda tettere integrasjon til Amazon Echo.

Enova

Om du kjøper styring for tre eller flere varmesoner kan du i tillegg få støtte av Enova. De dekker 20% av totalkostnaden (opptil maks 4000,-) på smarthusutstyr. For min del virket det enkelt. Jeg lastet opp kvitteringene og fylte ut skjemaet deres. Noen uker etter fikk jeg pengene på konto.

Hvordan er det å ha smarthus?

Totalt sett kommer ikke en smarthusløsning til å revolusjonere hverdagen din. Det er riktignok praktisk at lys går på og av uten bryter, dører låser seg når du ønsker, og at varmen justerer seg etter ferie og natt. Eller at du kan sitte i sofaen og be Alexa om å sette huset i TV-modus. Men jeg ville nok ikke brukt pengesparing som argument. Totalt sett skal det ta ganske mange år før strømregningen min har tjent inn igjen utgiftene jeg har hatt — for det kommer jo stadig flere smarte enheter inn i huset.

Mine enheter

Jeg har handlet omtrent alt hos Intin, en smarthusforhandler i Førde som har bra utvalg, gode priser og rask service. Derfor er alle lenker til deres nettside. Produktene finnes også mange andre steder.

Opprinnelig publisert på medium.com/@hauken


6 new HTML-elements (I dream of)

As a designer one of my jobs is to recognise patterns. Small design- and code-patterns that get used again and again on every project. Every time I get to a new pattern I stop and ponder how to mark it up. Accessibility is important for me, but I often find it unclear what’s best practice for these patterns.

This is a short list of some elements I wish existed in HTML. By officially becoming HTML elements, these patterns would then be more likely to be marked up for accessibility. They would also be marked up more consistently — and frankly they’d also be easier to talk about, since we’d all use the same names for them.

Filter

select The first pattern I think of is an element that filters or sort the rest of the content. You’ve probably used this on a webshop sorting from cheapest to most expensive. Or most popular to least popular. Or to filter by brand. Or color. I think you get the gist. Usually these filters are just marked up with a simple div around them. My proposal is something along the lines of the snippet below, just to make it clearer that some content is filtering another block of content. I guess there should also be some kind of indication if it is filtered or not, but I’m not sure how this is best solved.

<filter for="product-list">
  However you would like to filter the content. Select, radio-buttons etc.
</filter>
<ul id="product-list">
  <li>The content you are filtering</li>
</ul>

Select

select “But we already have the <select>-element”. Fair point. I often find myself wishing the Select element was more flexible. Maybe I want to add a flag to a list of countries, or maybe two lines on top of each other like an account-name or an account-number. My proposal here would be that you could actually use spans, images and divs inside the select-element. I guess this could cause headaches for creators of mobile browsers. But they are really smart people. They have created a browser. I guess they will find a way.

<select>
  <option>
    <img src="norway.svg" />
    <span>Norway</span>
  </option>
  ...
</select>

Expanding table

Expanding table Imagine that you have a list of contacts with information about their names, addresses, telephone-numbers, and e-mails. Now place everything in a regular table and try to make it responsive. Yeah? Struggling, right? One solution is one of these fancy responsive tables, but what I want is to hide the columns that don’t fit on the screen and when you click each row it expands and show the rest. My hack for now is to use a <tbody> for each row and then place two rows inside that. One is the regular row and one is a row with just one column that is hidden but which appears when you click the first row in the <tbody>.

<!-- how I am doing it now -->
<table>
  <tbody>
    <tr>
      <td>Visible</td>
    </tr>
    <tr>
      <td>Hidden until you click on the row above</td>
    </tr>
  </tbody>
  ...
</table>

<!-- how expanding tables could work -->
<!-- thr = TableHiddenRow -->
<table>
  <tbody>
    <tr for="example">
      <td>Visible</td>
    </tr>
    <thr id="example">
      <td>Hidden until you click on the row above</td>
    </thr>
    ...
  </tbody>
</table>

Step-indicator

Step indicator You are applying for a loan, or maybe you are filling out your tax report or answering a questionnaire. Each page has a lot of fields you need to fill out and every time you click ‘Next’ you hope you are done, but you just get more boxes to tick and fields to type in. Wouldn’t it be nice if there were some kind of common navigation that told you how far in the process you were? My proposal for this is something like <step current="2" of="6"></step>. The idea is that you can place what you want inside of it and style it however you like. The nice thing about this feature is that browsers could indicate subtly that you now are in a flow and how far through you are. Screen readers could for example say “step 2 of 6 of car loan“ reading the steps before the title of the page.

Carousel Ahh. Carousel. Much hated. Much used. Much badly implemented. I guess there are as many people who know html as there are ways to code up a carousel. You have a wrapper, some content, some arrows maybe, and a navigation showing where you are. Imagine using a screenreader to browse a website and suddenly your screenreader stops midway through reading a description and starts on a new one, and a new one. If we just had some consistent markup this could have been avoided. I have no suggestions for how it would work, but it would be useful.

Expand

Expand One pattern that comes up again and again is expand. An element that when you click it, shows more content. I thought quite a bit about how, in a perfect world, this should be marked up. Then I asked around, and it seems the world is perfect, after all. There actually is an ‘expand’ element being implemented in browsers today. Internet Explorer hasn’t caught up yet, nothing new there, but almost all the newest browser have implemented it:

<details>
  <summary>Read more</summary>
  Text that is hidden and appears when you click read more.
</details>

Do you have any ‘HTML elements’ that you lie awake at night, wishing existed?

Originally published on Medium


How to store your photos?

Let’s talk about how you store your photos. Since you probably don’t use film anymore you need to store them somewhere digitally, and probably not just on your computer. You don’t want to risk all your images if your computer crashes or gets stolen.

I’ve gone through a couple of the cloud-storage solutions out there and compared them with each other.

Dropbox Google Photos iCloud Photos Amazon Cloud Drive
Prime photos
Jottacloud
Good search functionality no yes yes no no
Timeline-feature yes yes yes yes yes
Albums yes yes yes yes yes
Collaborate on albums no yes yes no yes
Collect family photos with different accounts yes yes no yes no
Support RAW-format yes no yes yes yes
Displays RAW-files as images no no yes no no
Works with Lightroom yes no no yes yes
Windows app yes yes yes yes yes
Mac app yes yes yes yes yes
iOS yes yes yes yes yes
Android yes yes no yes yes
Price up to 1 TB/month €8.25 €9.54 €9.99 €0.95 €9.44
Price over 1 TB/month €50.00*
€95.38
10TB
€19.99**
2TB
€0.95
€9.44
* €10 / user / month minimum of 5 users
** Doesn't seem like you can buy more than 2TB.

Some findings

  • Google Photos is ridiculously expensive (100 times more than Amazon Cloud) if you have more than 1TB of files
  • No-one can compete with Amazon Cloud prices
  • iCloud and Google Photos have the best search. iCloud is probably a bit better because it has face-recognition
  • Google Photos has an amazing Assistant that creates albums, animations and adds filters etc. to your images automatically. It’s actually pretty good!
  • The Norwegian Jottacloud is a good competitor to the rest and the only solution that stores it’s files in Norway

My current setup

I sync my iPhone images with iCloud. I store the RAW-images from my camera on a Synology NAS that syncs the images to Amazon Cloud. This way I don’t have to store them on my computer, but has fast access to them at home. I use Adobe Lightroom as my image-organizer and Amazon Cloud more as just file-storage. Since all my pictures are RAW-files I sadly miss out on a lot of the great search-functionality that’s out there.

My dream setup

If Google Photos supported RAW-files and had a regular filesystem (so I could use it with Lightroom) I would pick that. Mostly because I love the Google Photos assistant.

What should I do if I just have images on my mobile phone?

Do you have an iPhone? Sync it with iCloud. It works great, is simple to use and works out of the box. It is however a bit more lock-in solution than Google Photos (and doesn’t have the assistant).
Do you have an Android-device? Sync it with Google Photos.
Are you switching between iPhone, Android or similar? Use Google Photos.

A last little tip

There is a clever app for macOS called Expandrive that can mount a lot of these cloud-solutions as a Network Drive. This way you don’t have to store the files on your computer, but they are accessible in the filesystem. It works great with Amazon Cloud Drive, Google Drive, Dropbox ++.


15 takeaways from cssconfeu 2015 that you can use today

  • You can use fill: currentColor as a property in your svg-icons. That way they’ll inherit the color property of their parent. Especially useful for inline-icons.
  • Blend modes could get really useful for making a consistent image-style across images for clients that don’t have much photography-experience. Much like an instagram-filter. You could for example do like this to get a more washed out dark color on an image.
.div-over-img {
    background-color: #2f3138;
    background-blend-mode: lighten;
}
  • For performance you can use a black/white image with a colored gradient with blend-mode on top to make a nice effect.
  • By always writing just 0 instead of 0px, 0em or similar, Facebooks saves a lot of energy (and I guess money). This is something a preprocessor should do, but a nice reminder non the less. Facebook also detects which browser you are browsing from and sends just the correct browser-prefix for each browser.
  • You can save yourself a lot of trouble by using background-images instead of the <img> tag in certain situations. The <img> tag is nice to have as a fallback, but hidden via CSS.
  • You can use max-width: max-content; to specify the size of a figure element where you want the width of the figure to be defined by image-width.
  • You can specify language in HTML with the lang-tag and target this with CSS to get quotes-marks for different languages. Eks: <HTML lang="no">
HTML[lang="no"] q {
Quotes: '«' '»';
}
  • @media: print has support for orphans and widows with the syntax orphans: 3; and widows:3;. It is sadly not supported in regular CSS, but I guess it will come. Would be especially handy if we could use this on layout-elements.
  • Flexbox can be used as a kind of element-query. You can use it to break up blocks when there isn’t enough space instead of @media-queries.
  • Margin(left|right|top|bottom): auto; is used a lot for calculating distances in flexbox.
  • Flex overwrites width and float, so they can be used as fallbacks.
  • To get an evenly distributed spacing between menu-elements add display: inline-block; to the li and display: flex; and justify-content: space-between; on the ul.
  • You should think of flexbox as an addition. First do as you normally would, then add the extra perfection in form of flexbox.
  • As a fallback for browsers that don’t support flexbox you can use modernizr or wrap you flexbox-code in this:
@supports(flex-wrap:wrap){
// instead of modernizr
}
  • order is used to specify the order of the elements when they break to smaller sizes. Default is 0, but you could also use minus-values.

Tired of minified files when you search through your project?

Are you also tired of having your minified versions of CSS and JavaScript showing up when you are searching through your project?

It turns out there is an easy way to fix this if your are using Atom. Go to Atom => Config and add this to your configuration-file:

ignoredNames: [
  ".git"
  ".svn"
  ".DS_Store"
  ".jpg"
  ".png"
  "app"
  "vendor"
  "dist"
  ".css"
  "min.js"
]

Are you using SublimeText? Go to Preferences => Settings – User and add this to your configuration-file:

"file_exclude_patterns": [
    "*-ck.js",
    "*min.js",
    "*.css"
  ]

I have added *-ck.js because that’s the default output from CodeKit for minified files. I’ve also added all CSS files since I just want to search through my SCSS.