Why Responsive Web Design isn't enough

Why Responsive Web Design isn’t enough

Responsive Web Design (RWD) has been the hype word (or concept) since Ethan Marcotte introduced the word in 2010. Well maybe not that long but at least last couple of years. Now everybody builds and releases RWD sites. And it seems that mobile aspect is on the requirement list on most of the projects.

RWD as a word has grown since it’s introduction. Originally it involved technical things like media queries, fluid grid and flexible media elements such as images. On fundamental level it meant that the same content should be available on different devices. Today RWD is split in two. The one that web enthusiasts mean and second one rest of the people understand.

The latter in my experience means sites that perform good on a decent internet connection and a desktop sized device. They scales down to a small screen size but the performance isn’t that good. In most cases it’s quite bad and can even go to a point where the site is unusable on a mid priced mobile phone. You know, those cheap Android based phones most of the people outside web communities use. I know this because most of my web browsing outside my work is done through a mobile device and some times it’s a crappy Android.

These pseudo-RWD sites do have the basic concepts of RWD like media queries and flexible media elements. But they miss the whole point of RWD by including lots of javascript and big images. The page size grows to 2 megs and loads 5 to 10 seconds before it’s usable. And after that the experience is mostly infuriating because of all the javascript trying to capture every touch movement on the page. Or a social media plugin hides some essential elements so that the key content on that page is inaccessible.

So what’s the point of RWD if these sites miss it? It’s not the flexible part everybody tries to achieve. It’s the part no-one seem to remember except the web enthusiasts. You know, the part that I think Ethan originally tried to tell us. And what most of us already know. And what the real RWD has grown to.

The real RWD means a site and it’s content should be accessible on all devices. And accessibility is more than “flexin’ the site” to mobile. It’s about performance on the crappiest phone used on the site behind the slowest internet speed available. It’s about serving the core content first and enhancing the experience after that. And most of all it’s about the courage to stand your ground and speak up when a pseudo-RWD site is being build.

Sometimes the best RWD site is the one that doesn’t flex to mobile.

Pation päivitys

Pation päivitys

Parisen vuotta takaperin aloin miettimään pation päivitystä. Talossamme on yksi ovi ulos, joten patio oli rakennettu siihen. Kokonsa ja muotonsa johdosta patio tuntui täyteenahdetulta. Lisäksi talon rakentamissuunnan ansiosta aurinko porottaa pation tukalaksi aamupäivän ajaksi. Suora auringonpaiste 25 asteen lämmössä nostaa elohopeamittarin 40 asteen tuntumaan meidän patiolla. Toisaalta jo muutama plusaste saa aikaiseksi lähes t-paitakelit patiolle, että kyllä siinä puolensa on.

Suunnitelma uudelle patiolle

Insinööri minussa piirteli Blenderillä mallit talosta ja patiosta laajennusten kanssa. Tämän jälkeen esittelin ne vaimolle, joka kohteliaasti kielsi tekemisen. Minä piirtelin ja näytin vaimolle ja sain vastaukseksi kohteliaan kiellon kerta toisensa jälkeen. Mutta viimein parin vuoden väsytystais… neuvottelujen jälkeen päädyimme pation uusimiseen. Asiaa saattoi helpottaa vahoista terassilaudoista rakennettu väliaikainen laajennusosa.

Uuden pation neliömäärä asettui 40 hujakoille eli noin tuplat edellisestä. Suunnitelmista oli tarkoitus muuttaa kulkuaukkojen sijainnit hieman järkevämmiksi, koska talossa kiinni olevan autotallin toinen ovi avautuu hankalasti kulkuaukon eteen. Lisäksi ujutin mukaan korkeammat tolpat ja yläjuoksut jotta tulevaisuudessa olisi mahdollista amppelein ja köynnöskasvein luoda näköesteitä erinäisiin suuntiin. Ja yläjuoksujen kautta on näppärä vetää sähköt valaistukselle.

Hyvin suunniteltu ei ole yhtään tehty

Puutavaran menekit laskettiin ja kilpailutettiin paikallisilla rautakaupoilla. Yllättäen itseään halvoiksi mainostavat kaupat olivat ne kaksi kalleinta.

Minun lomien alkaessa pääsi viimein purkamaan vanhan terassin pois. Budjettilaajennosta tehtäessä kaikki vanhasta hyödynnettävä hyödynnettiin uudessa. Käytännössä tämä tarkoitti runkopuita, naulauslevyjä ja -kulmia sekä ehjiä terassiruuveja.

Yllättävän suuri urakka

Alunperin ajattelin että eihän pationrakennuksessa voi mennä pitkää viikonloppua enempää. Purku yhdessä päivässä, pohjat toisessa ja runko sekä kansilaudoitus seuraavassa kahdessa. Ainakun Youtubessa olevissa videoissa se on noin nopeaa.

Amatöörin ollessa asiassa aikaa meni enemmän kuin tuplaten. Asioita piti tehdä ja tuumailla jotta hoksasi mikä on järkevin tapa tehdä se. Niinpä koko urakkaan sai kulutettua 10 päivää, eikä se vieläkään ole valmis. Kaiteita ja käsittelyjä uupuu kuten myös portaita ja reunalautoja. Terassiin lasketut ruuvit loppuivat kesken ja uudet pitää tilata verkkokaupasta koska jotain erikoistahan tähän piti saada. Ja se erikoisuus on piiloon ruuvattu kiinnitys Kreg Deck Jigin avulla.

Tässäpä vielä Youtube-video 10 päivän urakasta. Tai niiltä osin kun kortille mahtui/kameran akussa riitti virtaa.

Ai niin, Oulussa terassi on patio. Ihan vain tiedoksi.

Öljysäiliötapahtuma

Öljysäiliötapahtuma

Talonomistajan arkea

Ja niin lähestyi pääsiäinen. Puhelin pirisi ja surisi ja sieltä soitti öljysäiliöntarkastaja. Olivat viitisen vuotta takaperin käyneet säiliön tarkastamassa ja nyt olisi taas aika. Kätevää, kun omalle kohdalle ei tätä vielä ollut sattunut ja ajatuksissa oli tilata kesälle tarkastus. Ei kait siinä, tarkastus tilattiin ja miehet tulivat tarkastamaan.

Tarkastuspäivänä puhelin soi. Minä odottelin raporttia, jossa kerrottaisiin että kaikki on ok. Turhaan. Säiliössä on reikä ja sinne oli valunut satoja litroja vettä. Mitään suurempaa vahinkoa ei ollut vielä sattunut mutta öljyjä ei sinne enää lasketa. Mainittakoon että meidän säiliö on maan alla.

Näennäiset vaihtoehdot

Samaisen puhelun aikana kyselin mahdolliset vaihtoehdot säiliön suhteen. Uusi maan alle kustantaisi asennettuna arviolta 5000 € luokkaa. Uusi sisäasennettava olisi noin puolet siitä, 2500 €. Eurot hävisivät silmien edessä, samoin kesälle suunniteltu Prahan matka. Tähän en ollut varautunut, varsinkin kun taloa ostettaessa öljysäiliön kunto oli lähes moitteeton.

Saman päivän aikana kävin vaihtoehdot läpi lämmitysmuodon vaihtamisesta öljysäiliön sijoitukseen. Illalla kävin saman asian vaimon kanssa läpi. Öljysäiliö, VILP, hybridivaraaja. Lopulta vaihtoehtoja ei kuitenkaan ollut kuin yksi. Sisäsäiliöllä oli mentävä. Seuraavana aamuna soitti öljykaverille ja pienen tinkaamisen jälkeen löytyi käytetty öljysäiliö 1800 € hintaan asennettuna. Ja asennus ennen Vappua.

Pakko tyhjentää ennen asennusta

Asennuspaikaksi valikoitui autotallin takana oleva varastotila. Se oli ainoa paikka mihin säiliön sai vähänkään järkevästi laitettua. Ongelma oli tavaran määrä. Jotta huoneen sai tyhjäksi piti autotalli tyhjentää. Harrasteajokki ulos ja katokseen pressun alle. Kiinteästi asennetut kalusteet irti ja hirveä määrä tavaraa (auton osia, työkaluja, kaatopaikkaromua) ulos. Tämän jälkeen varastohuone siistiksi ja tuplakyprokki seinään, lattiaan ja kattoon. Eli se 30 minuutin palosuojaus. Viikonlopun tuohon sai tuhlattua.

Asentajat tulivat tiistai-aamuna asentamaan säiliötä. Vähän piti soitella perään, että ollaanko sitä tulossa mutta säiliö oli asennettuna kun tulin töistä kotia. Ja kaikki tuntui pelaavan ok. Seinää rumensivat uuden säiliön täyttö- ja huohotusputki sekä ylitäytönestin.

2014-04-29 17.42.08  2014-05-02 19.46.06

Koteloidaan säiliö

Vappu tuli ja meni ja oli aika saada säiliö piiloon. Tai siis koteloitua. Perjantai-illasta kiinnitin ensimmäiset runkopalat ja koteloinnit ja lauantaina homma jatkui. Koko säiliö koteloitiin tuplakyprokilla. Lopulta urakkaan meni koko lauantai. Mutta kotelosta tuli siisti, vaikka itse kehunkin.

_DSC6437 _DSC6438

On muuten haaste saada kipsilevypalat kerrasta sopimaan kun lattia ja seinät ovat lähes suorassa mutta eri suuntaan vinoja. Jokaista palaa piti koesovittaa ja uudelleenleikata jotta passasi paikalleen.

FitPC2 palomuuriksi ja reitittimeksi

Jälleen sai uusi (vanha) kone uuden paikan. Kuten aikaisemmin jo totesin, päätin siirrellä hieman eri toiminnallisuuksia yhdeltä koneelta parille muulle. Tällä kertaa vuorossa oli reititin, palomuuri ja kotiautomaatio. Ja koneena oli pari kuukautta sitten hankittu FitPC2.

Fit-PC2 ja modeemi

FitPC2 on siitä kiitollinen alusta, että kyseessä on ihan perinteistä PC-rautaa. Vain pienemmässä koossa. Prosessorina paikkaa pitelee Intelin Atom noin 1 Ghz:n nopeudella, kiintolevynä on 50 Gigan SSD-levy, muistia Gigan verran ja kaverina on lisäksi 2 kpl Gigabit-ethernet -portteja. Eli oikein soppelia rautaa reitittimen ja palomuurin rooliin. Ja vähän muuhunkin.

Asennus ja perussäädöt

Asennusmediaksi valikoitui tuttu ja turvallinen Debian netinstaller. Tuolta asennusmetodina expert ja oletuksena ei root-tunnuksia. Lisäksi mitään ylimääräistä ei tullut valittua, eli ei työpöytäympäristöä tai palvelinpaketteja. Uudelleenkäynnistyksen jälkeen oltiin puhtaassa ympäristössä jonne asensin openssh:n ja vim:n, jotta säätäminen onnistuu etäyhteyden läpi suosikkieditorilla. Ssh:n kohdalla suosittelen säätämään /etc/sshd_config -tiedostosta portin (Port) ja root-kirjautumisen (PermitRootLogin) muuksi kuin oletukseksi. Eli seuraavat kohdat

Port 222 # esimerkiksi 222, oletus on 22
PermitRootLogin no # Oletus on yes

Tässä vaiheessa siirsin FitPC2:n lähes lopulliseen fyysiseen sijaintiin työhuoneeseen modeemin viereen.

Reitittimen säädöt

Asennusten jäljiltä kone oli vielä yhden yhteyden varassa eikä näin ollen soveltunut reitittimeksi tai palomuuriksi. Vielä. Yhteydenotto koneeseen ja dnsmasq-ohjelma käyttöön.

> sudo apt-get install dnsmasq

Dnsmasq on kevyt DHCP-palvelin ja DNS-toistin, joten yhdellä softalla saan hoidettua kaikki näppärästi. Dnsmasq soveltuu hyvin kotiympäristöön NAT-käyttöön, joten en ihan ensimmäisenä tätä useamman sadan koneen ympäristöön ajattelisi. Mutta näppärä ja yksinkertainen softa säädettäväksi.

Ennen Dnsmasqin säätöä meidän tulee kuitenkin laittaa verkot kuosiin. Debianissa verkot saa säädettyä /etc/network/interfaces -tiedostosta, joten lempieditori käsiin, oikeustaso kohdalle ja säätämään. Oma tiedosto näyttää seuraavalta.

lo eth0 eth1
iface lo inet loopback

iface eth0 inet static
    address 192.168.10.1
    netmask 255.255.255.0
    broadcast 192.168.10.255
    network 192.168.10.0

iface eth1 inet dhcp

Lyhyt yhteenveto kertoo seuraavaa: eth0 on sisäverkossa käytettävä verkkosovitin ja se vastaa osoitteesta 192.168.10.1 (varmista ettei tässä ole päällekkäisyyksiä). Eth1 taasen menee internetin suuntaan ja saa oman ip-osoitteen palveluntarjoajalta, jonka takia käytetään dhcp:tä.

Kun yhteydet on säädetty päästään itse asiaan eli Dnsmasqin säätöön. Ja se on itseasiassa aika simppeliä. Jälleen sudolla oikeudet kohdalleen ja editorilla /etc/dnsmasq.conf auki. Tässä jälleen olennaisimmat säädettävät kohdat:

# If you want dnsmasq to listen for DHCP and DNS requests only on
# specified interfaces (and the loopback) give the name of the
# interface (eg eth0) here.
# Repeat the line for more than one interface.
interface=eth0

ja

# Uncomment this to enable the integrated DHCP server, you need
# to supply the range of addresses available for lease and optionally
# a lease time. If you have more than one network, you will need to
# repeat this for each network on which you want to supply DHCP
# service.
dhcp-range=192.168.10.100,192.168.10.150,24h

Jälleen lyhyt kuvaus. Ensin määritellään, mistä verkkosovittimesta kuunnellaan dhcp- ja dns-pyyntöjä. Tässä tapauksessa sovitin on sisäverkon sovitin, eli eth0. Tämän jälkeen kerrotaan mikä osoiteavaruus on tarjolla dhcp:n kanssa. 192.168.10.100 - 192.168.10.150n riittää tällä hetkellä minun koneille oikein mainiosti.

Dnsmasqin avulla on myös mahdollista kiinnittää tiettyjä sisäverkon ip-osoitteita jonkin koneen verkkosovittimen mac-osoitteen avulla. Nämä on dokumentoitu tuohon asetustiedostoon, joten mikäli aihe kiinnostaa niin asetustiedostoa lukemaan.

Tässä vaiheessa meillä on käytössä molemmat verkkosovittimet sekä dns- ja dhcp-palvelin. Kannattaa huomioida ja varmistaa, ettei sisäverkossa ole muita dhcp-palvelimia, ettei tule vahingossa väärinymmärryksiä liikenteen suhteen. Vaikka dns ja dhcp pelaavatkin ei meillä ole vielä käytössä palomuuria tai jaettua yhteyttä ulkomaailmaan. Eli seuraa palomuuri- ja reititinosuus.

Palomuuria yksinkertaisesti

Olen itse useamman vuoden ajan käyttänyt palomuurina ufw-softaa. Kyseessä on Uncomplicated Firewall eli yksinkertaistettu palomuuri. Pohjalla on Debianissa käytettävä iptables, jolla saa tehtyä todella hyviä palomuuriasetuksia. Olen käyttänyt myös iptablesia mutta ufw korvasi iptablesin lähinnä yksinkertaisemman säädön ansiosta. Eli minun käytössä säädöt ovat todella yksinkertaisia ja niiden asettaminen oli hankalampaa iptablesilla.

Jotta saamme yhteyden ulkomaailmaan meidän tulee tehdä seuraavat asiat

  1. reititys liikenteelle kuntoon
  2. palomuuri pystyyn
  3. palomuurin asetukset kuntoon

Hommiin siis.

sudo apt-get install ufw

Tämän jälkeen säädetään reititysasetukset ensin /etc/default/ufw-tiedostosta

DEFAULT_FORWARD_POLICY="ACCEPT"

ja /etc/ufw/sysctl.conf-tiedostosta

net/ipv4/ip_forward=1

Lisäksi meidän tulee asettaa NAT-säännöt ufw:lle. Tämä on se vaikein osuus palomuurissa. Eli editorilla /etc/ufw/before.rules-tiedostoon alkukommenttien jälkeen ensimmäiseksi säännöksi

# nat Table
*nat
:POSTROUTING ACCEPT [0:0]
-A POSTROUTING -s 192.168.10.0/24 -o eth1 -j MASQUERADE

COMMIT

Yhteenvetoa säännöstä: asetetaan POSTROUTING-sääntö, lähteenä (-s) sisäverkon koko osoiteavaruus (192.168.10.0/24) ja kohdesovittimena internetin verkkosovitin (eth1). Lopuksi hyväksytään sääntö.

Viimeistellään palomuuri käynnistämällä se

sudo ufw enable

Ja sallitaan sekä dhcp-liikenne että liikenne sisäverkosta ulos.

sudo ufw allow from 192.168.10.0/24
sudo ufw allow bootps

Tämän jälkeen (minun tapauksessa) vanha dhcp-palvelin sammutettiin, modeemin johdot kytkettiin FitPC2:n porttiin ja kone käynnistettiin uusiksi. Parin testin jälkeen homma tuntui pelaavan ok.

Bonusmateriaalia: OpenRemote ja kotiautomaatio

Käytössäni oleva kotiautomaatiosofta sai myös paikkansa FitPC2:sta. Fyysisinä laitteina minulla on nipullinen DIN-kiskoihin kytkettäviä X10-moduleja sekä usb-väylään kytkettävä CM15Pro-lähetin/vastaanotin.

Fit-PC2, modeemi ja CM15Pro X10 Dimmer Moduulit

Softan puolesta käytössä on sama setti kuin aikaisemminkin, eli mochad. Aikaisempaan asennukseen erona oli se, että githubista latasin hieman muutetun lähdekoodin ja käänsin sen. Muutoin homma rokkasi parissa minuutissa.

OpenRemotea varten piti asentaa Java-ympäristö ja ladata tuorein OpenRemote Controller-paketti koneelle.

sudo apt-get install openjdk-6-jdk

Tämän jälkeen purin OpenRemoten /opt/openremote-hakemistoon. Suoritusoikeudet openremote.sh-tiedostolle ja testi, että palvelin lähtee päälle varmistukseksi.

cd /opt/openremote/bin
sudo chmod +x openremote.sh
sudo ./openremote.sh

Selaimella osoitteeseen 192.168.10.1:8080/controller ja palvelin näytti vastaavan. Eli kaikki oli tähän mennessä ok. Enää tarvitsi saada OpenRemote starttaamaan uudelleenkäynnistyksen yhteydessä. Ja tähän oli olemassa Debian-ympäristöön sopiva init-skripti valmiina, joten copy’n’paste ja modaus omaan ympäristöön sopivaksi. Lopullisena versiona osimmoilleen tällanen

! /bin/sh
### BEGIN INIT INFO
# Provides:          openremote
# Required-Start:    $remote_fs $syslog
# Required-Stop:     $remote_fs $syslog
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: Openremote initscript
# Description:       This file should be used to construct scripts to be
#                    placed in /etc/init.d.
### END INIT INFO

# Author: Tommi Pääkkö <tommi@nerd.fi>

# Do NOT "set -e"

# PATH should only include /usr/* if it runs after the mountnfs.sh script
PATH=/sbin:/usr/sbin:/bin:/usr/bin
DESC="OpenRemote Controller"
NAME=openremote
DAEMON=/opt/openremote/bin/$NAME
SCRIPTNAME=/etc/init.d/$NAME

# Define LSB log_* functions.
# Depend on lsb-base (>= 3.2-14) to ensure that this file is present
# and status_of_proc is working.
. /lib/lsb/init-functions

#
# Function that starts the daemon/service
#
do_start()
{
    $DAEMON.sh start > /dev/null 2>&1 &
}

#
# Function that stops the daemon/service
#
do_stop()
{
    $DAEMON.sh stop > /dev/null 2>&1 &
}

cd /opt/openremote/bin
case "$1" in
  start)
    do_start
    ;;
  stop)
    do_stop
    ;;
  restart)
    #
    # If the "reload" option is implemented then remove the
    # 'force-reload' alias
    #
    do_stop
    sleep 10
    do_start
    ;;
  *)
    #echo "Usage: $SCRIPTNAME {start|stop|restart|reload|force-reload}" >&2
    echo "Usage: $SCRIPTNAME {start|stop|restart}" >&2
    exit 3
    ;;
esac

Tuon viskasin /etc/init.d/-hakemistoon, annoin suoritusoikeudet ja komensin vielä käynnistymään kun kone käynnistyy.

sudo chmod +x /etc/init.d/openremote
sudo insserv openremote

Jälleen kerran konetta käyntiin ja testailemaan. Ja OpenRemote Controller tuntui vastaavan oikeassa paikassa. Näin ollen jälleen kerran on pistorasiat ja valot ohjattavissa puhelimella ja tietokoneella.

Raspberry Pi digiboksina

Raspberry Pi digiboksina

Osana suurempaa projektien loppuusaattamista päädyni viimeinkin kasaamaan aikanaan ostamani Raspberry Pi:n käyttöön. Pikku Pi on ollut enemmän tai vähemmän testeissä kaikennäköisillä kokoonpanoilla. Välillä oli XBMC, välillä xine-pluginilla varustettu VDR frontend. Eli digiboksin pääte. Mutta kun olen ranttu niin käytettävyys noissa on ollut liian karu. Niinpä suurin osa ajasta pikku Pi:n elämästä on kulunut television takana piilossa ja sähköittä.

Digiboksi virittäminen

Innostus digiboksin virittämiseen lähti oikeastaan siitä, että hankin joulun aikaan FitPC2-laitteen. Ajatuksena oli siirtää Raspberry muuhun käyttöön, lähinnä kotiautomaatiota hoitamaan ja antaa VDR frontin hoitamine FitPC2:lle. Tästä kuitenkin peräännyin, kun en saanutkaan ihan heti ja kohtuuhelposti videoulostuloa FitPC2:ssa pelaamaan halutulla tavalla. Niinpä FitPC2 siirtyi sivulle ja päätin antaa Raspberrylle uuden mahdollisuuden.

Yllättäen Linuxtv.fi:n puolella oli muutkin samalla asialla, joten yksin ei tarvinnut Raspberryä säädellä. Asiaa helpotti vielä se, että Saksan suunnalla VDR-Portalin puolella oli joku innokas tehnyt vdr output pluginin raspberrylle. Joten suurin työ oli jo oikeastaan tehty.

Raspberry kääntöhommiin

Vdrhddevice (VDR plugin) tarvitsi saada toimintaan. Näppärin tapa oli asentaa VDR Raspberryyn ja kääntää plugin. Erinäisten tutkimisten jälkeen yksinkertaisimmaksi osoittautui ns. vanilla sourcen lataus ja kääntö. Eli tvdr.de-sivustolta VDR:n tuorein vakaa lähdekoodi Raspberryyn, mukaan muutama plugin (streamdev-client, vdrhddevice, remoteosd, femon, skinsoppalusikka), kääntö ja asennus. Erinäisten säätöjen jälkeen kuva näkyi televisiosta ja yllättävän hyvänä.

Fiilaten ja höyläten kokemus paranee

Viimeisenä pakettiin tarvitsi saada kaukosäädinohjaus. Lopullisena toiveena on saada Sony BD Remote pelaamaan bluetoothin yli mutta nopeana ratkaisuna päädyin IR-vastaanottimen kytkemiseen Raspberryn GPIO-pinneihin. Tämä itsessään oli kohtalaisen vaivaton toimenpide, komponentit löytyivät valmiina ja IR-tuki oli Raspberryssä valmiina.

Parin päivän koekäytön jälkeen olen varovaisen optimistinen sen suhteen, että kohta olohuoneessa tuhiseva 12 teran tallennustilalla varustettu työpöytäpalvelin siirtyy työhuoneen kylmyyteen patterin virkaa toimittamaan. Eli alkuperäinen tavoite parin vuoden takaa viimein toteutuu ja jokin tietotekninen projekti lähestyy kypsytysvaihetta.

Ja sitten olisi vielä se FitPC2…

© Tommi Pääkkö