CSS oppikoulu osa 2: webselain

Reading Time: < 1 minute

CSS on yksi kolmesta tärkeästä webin teknologiasta (muut ovat HTML ja JavaScript). Kaikki edellämainitut ovat lopulta vain tekstiä, joka tallennetaan tiedostoihin. Miten teknologiat sitten eroavat toisistaan?

Jotta ymmärrämme paremmin CSS:n roolin, tehdään pikakatsaus näiden kolmen teknologian saumaamiseksi.

HTML, CSS ja JavaScript ovat myös kaikki standardeja, joista löytyy kattava dokumentaatio.

Miten websivu muodostuu näytölle?

Web-sivu tulkitaan HTML- ja CSS-lähdetiedostojen avulla. Web-serveri (palvelin) säilöö tiedostoja, jotka ohjelmoija on tehnyt.

Kun netin käyttäjä kirjoittaa selaimeen osoitteen (ns URLin), selain lähettää HTTP-protokollaa käyttäen pyynnön dokumentin saamiseksi palvelimelta. HTTP “GET” on komento, jolla dokumentti pyydetään. Palvelin palauttaa HTML-tiedoston. Toisin sanoen, HTML sitoo eri komponentit yhteen. HTML on siis kuin sovelluksen kuoret; se sisältää suoraan tai linkkeinä muutkin osaset.

CSS:llä sen sijaan luodaan graafinen ulkoasu ja monia hyödyllisiä efektejä, animaatioita yms.

JavaScript puolestaan on varsinainen sovelluksen logiikka, eli “koodi”; sillä kerrotaan tarkkaan ottaen miten sovellus toimii. JavaScriptillä mm.

  • käsitellään tekstin syöttö lomakkeen kenttiin ja muihin sivun alueisiin
  • käsitellään klikkaukset (“click handlers“): napit, menut
  • tehdään lomakkeiden kenttien tarkistukset (form validation)
  • voidaan tehdä ajastettuja toimintoja
  • voidaan suorittaa laskutoimituksia, peleissä ja hyötysovelluksissa

Jäikö jotain mietityttämään tässä vaiheessa? Kommentoi tänne blogiin, tai anna palautetta esimerkiksi kysymällä Twitterissä. Myös Facebookissa Jukkasoftin ympärillä on oma ryhmä.

CSS oppikoulu osa 1

Reading Time: < 1 minute

CSS:n (Cascading Style Sheets) käytännön tarkoitus on luoda visuaalinen ulkonäkö, eli ilme, webin sivustoille. Käytännössä CSS:llä luodaan myös käyttöliittymiä perinteisemmässä merkityksessä, eli sillä tyylitellään web-selaimen komponentteja: napit, menut, hotspot-alueet. Myös pieniä hyödyllisiä yksityiskohtia, kuten animaatioita, voidaan lisätä CSS:n avulla.

Oma oppimistarinani CSS:stä

Tähän asti olin täysi n00bie CSS:ssä. Sen rooli oli ollut projekteissa suhteellisen pieni; joko osana jotain komponenttikirjastoa – jolloin en juurikaan nähnyt tarvetta perehtyä konepellin alla olevaan CSS:ään – tai tein projekteja joissa muotoilua ja ilme sujui myös heikohkolla osaamisellani.

Nyt halusin oppia lisää! CSS oli jäänyt kytemään, selkeästi.

Projektini: CSS analog clock (kello)

Opin parhaiten kun teen jotain konkreettista. Projektiksi otin “seinäkellon”, eli tavoitteena on luoda CSS:llä analoginen kellotaulu: 2 viisari (tuntiviisari ja minuuttiviisari), numerot 1-12 kuten oikeassa kellossa; ja tietysti oikean kuluvan ajan kytkeminen kelloon, siten että se näyttää oikeaa aikaa.

Siinä on siis speksi.

Seuraavassa osassa pilkon analogisen kellon rakentamisen osasiin, ja kerron miten opin projektin avulla CSS:ää.

Ennenpitkää kun CSS:ää opiskelee, törmää mitoittamiseen. Jokainen designeri haluaa kontrollia käyttöliittymänsä käyttäytymiseen ja myös staattiseen ulkonäköön. Webissä asioita ei voi varsinaisesti hakata (ainakaan kovin helposti) pikselintarkasti kiveen, mutta taitavalla CSS:n käytöllä saavutetaan hyvä lopputulos.

Kellon kanssa kyse on myös mielenkiintoisesta kysymyksestä: miten ihmeessä saadaan tietokoneelta oikea “realtime clock” kellonaika siirtymään CSS:ään, siten että viisarit ovat oikeissa asennoissa?

Nähdään pian osassa 2!

State of the Word 2018 (Mullenweg puhe)

Reading Time: 2 minutes

Matt Mullenweg mainitsi ensin alkuun WordPressin kehityksen taustalla olevat 4 vapautta; periaatteessa aika tarkkaan ottaen GNU-filosofia. Matt mainitsi että WordPressiä voi ajaa monenlaisella erilaisella alustalla. WP antaa vapauden valita, eikä aseta rajoituksia. 

Ekosysteemi on eloisa ja monipuolinen. 

Koko WordPress -ekosysteemin kaupallinen aktiviteetti on noin 10 miljardia USD vuodessa. 

WordPress -leirin missio: julkaisemisen demokratisointi. Jokainen voi käyttää WordPressiä; riippumatta antropologisista tekijöistä tai teknisestä osaamisesta. 

WordPressillä on viimeisimmän mittauksen (koko vuosi 2018) noin 32.5% markkinaosuus web-alustoista. 

Gutenberg-editori ja uudet suunnat?

Gutenberg. Jos olet seurannut WordPress-maailmaa vuoden 2018 aikana, Gutenbergiin on törmännyt jossain muodossa varmasti. Gutenberg on täysin uudistettu editori, joka tuotiin klassisen editorin (Classic Editor) tilalle.

WordPress uusimmassa 5.0-versiossa Gutenberg on vakiona käytössä, syrjäyttäen vanhan Classic Editorin. Vanhan editorin saa edelleen käyttöön asentamalla ja aktivoimalla Classic Editor -pluginin  

“Miksi teemme tätä / miksi teemme näin?”

Matt näyttää videolta käytettävyystestauksesta otettuja aitoja esimerkkejä käyttäjien raportoimista ongelmista WordPressin kanssa. ON helppo samaistua tilanteen cringeen; näennäisen helpot asiat saavat käyttäjät välillä tuskastelemaan ja luovuttamaan. Gutenbergin taustalla on puhtaan modernisoinnin (Reactilla kirjoitettu frontend) lisäksi aito halu auttaa blogaajia tekemään perusasiat helpommin.

Maukka perusblogaajana, joka arvostaa eniten nopeutta ja helppoutta, Gutenberg on ollut tervetullut. Aivan alkuaikoina näkyi pientä bugisuutta, joka ilmeni yksityiskohdissa; kappaleen alkuun tehty dropcap (suuri alkukirjain) ei tahtonut millään pysyä kuosissa vaan vaihteli edestakaisin tilaansa.

Kirjoittaminen vaivattomampaa

Käytössä Gutenbergin myötä huomasin pienen pienen nopeutuksen, asiat ovat nyt yksinkertaisempia. Käytettävyys on kasvanut muutosten myötä. Arvostan koodaajana sinänsä Gutenbergin takana olevan projektin ryhmävoimaa ja sitä miten hyvin asiat on suurista teknisistä muutoksista riippumatta pidetty kasassa. Toisaalta pesunkestävänä blogaajana pyrin näkemään, mikä muuttui ja mikä Gutenbergin todellinen arvo on.

Ainakin hostatulla WordPress.com alustalla Gutenbergiin siirtyminen todellakin tapahtui täysin automaattisesti ja “mom, look – no hands” tyyliin. Toisinsanoen en nostanut rikkaakaan ristiin muutoksen eteen. Automagiikalla kaikki.

Blokit (Gutenberg ‘blocks’)

Suurimpaan filosofiseen uutuuteen, blokkeihin eli valmispaloihin, olen tutustunut vasta varsin pinnallisesti. Blokit näkyvät Gutenberg-editorissa työkalupalkkina, joka väistyy aina kirjoittamisen aikana.

Blokkien fundamentaali tarkoitus on:

  • tarjota helppo tapa käyttää “monimutkaisia” asioita kuten upotettua sisältöä (Youtube-videoita, twiittejä, …)
  • pitää WordPressin blogiartikkelin editointikokemus virtaviivaisena
  • mahdollistaa asioiden tekeminen ilman HTML-osaamista

Entisessä Classic Editorissa blogin sisällöllä oli duaalinen luonne: Visual tai Code. Visual-moodissa luotiin blogia “lopulliseen muotoonsa”, kun taas Code-puolelle saattoi hypätä vilkaisemana miltä HTML ja CSS näyttää.

Gutenbergissä on edelleen mahdollista myös päästä vilkaisemaan ja editoimaan koodia, mutta Gutenberg pyrkii häivyttämään tämän dikotomian. Ideaalitapauksessa Code-näkymään ei ole mitään tarvetta mennä, ja blokit tuovat valinnaiset konfiguroinnit esille aktiivisina vipuina, valintapainikkeina ja muilla tavoin – ilman tarvetta osata HTML:ää.

Uusi jatkumo tekstille luodaan klikkaamalla + palloa ja valitsemalla blokkityyppi uudelle sisällölle. Sisältö tulee edellisen blokin ala- tai yläpuolelle. Perus leipätekstin kirjoittaminen puolestaan onnistuu suoraan uuteen tekstikappaleeseen rivinvaihdolla (Enter).

Blokkien ideana laajemmin on mm. rohkaista alustatarjoajia ojentamaan kätensä WordPress-käyttäjille automaattisempien teknisten integrointien suhteen. Karkeasti sanottuna kyse on HTML:n ja CSS:n järkevästä uudelleenkierrätyksestä. Blokkien idea ei ole kaukana esimerkiksi koodieditorien “snippets”:eistä, joissa luodaan pohja valmistekstille, siten että jätetään muutamia kriittisimpiä kohtia täydennettäväksi myöhemmin. Blokit on kääräisty WordPressissä ikonin muotoon, jotta ne olisi helppo tunnistaa.

Neuroverkot – kuten ne ymmärrän (osa 4)

Reading Time: 2 minutes

Miten digitaalisuodin voi mukautua – olematta huono?

Mitä hyötyä digitaalisen filtterin mukautumisesta on? Eikö itse asiassa tämä tee, ainakin naiivisti ajateltuna, digitaalisuotimesta epäkonsistentin, jos ajattelee että sen tuottama “jälki” (tulosten jono) on riippuvainen siitä, mitä filtteri on siihen mennessä kohdannut? Voi olla että en vielä ymmärrä täysin konseptia.

Otetaan naiivi esimerkki tällaisesta ongelmallisesta sarjasta. Suotimen tehtävänä on jaotella koevastaukset 7 eri “looraan”, eli kategoriaan. Koevastaus on pala tekstiä, jonka neuroverkon algoritmi käy läpi. Pisteytys tulee ulos yhtenä kokonaislukuna, 4, 5, 6, 7, 8, 9, tai 10.

Suodin alkaa tutkia vastauksia. Vastauksia on yhteensä 1000 kpl, suurehkon lukion verran. Suodin käy ensin läpi vastauksen #1, ja antaa arvosanan numerona (kouluarvosana 4-10). Verkko päätyi ensimmäisen vastauksen kohdalla arvosanaan 8. Asiantuntija, oikea ihmisopettaja, kertoo verkolle oman palautteensa (arvosana 6), jolloin neuroverkkoa opetetaan. Verkko muokkaa omaa näkemystään “hieman” sinne suuntaan, minne luotettu asiantuntija on neuvonut oman arvosanansa perusteella.

Eli mitä todellisuudessa tapahtuu tässä on täysin aritmetiikkaa, matemaattista logiikkaa: ensin lasketaan erotus, 6 – 8 = -2. Verkon pitäisi hakeutua siis kohti numeroa 6. Nyt tapahtuu myös keskeinen neuroverkon suunnittelijan eli ohjelmoijan tekemä valinta; kuinka dramaattisesti (eli: millä suuruudella), ja miten verkon painoja muokataan, jotta verkon antama vastaus konvergoituisi kohti oikeaa vastausta.

Ongelmaksi näkisin sen, että alkupään automaattisesti annetut arvosanat ovat “volatiilimpia” eli heppoisimmin periaattein annettuja, kuin loppupäässä – koska digitaalisuodin on oppinut enemmän (laajemmin) loppupäässä, verrattuna sen alkupään tietoihin.

Ratkaisuja?

Verkkoa voidaan ensin treenata, eli opettaa sille riittävän laaja otos. Opetuksen aikaisia tuloksia ei vielä käytetä / näytetä, vaan niiden tarkoitus on pelkästään säätää verkko tuottamaan oikeita ratkaisuja, ja sellaisia jotka ovat keskenään linjassa. Tästä lisää vielä myöhemmin, kun pääsen konkreettisen koodin äärelle.

Neuroverkot – kuten ne ymmärrän (osa 3)

Reading Time: < 1 minute

Ajatellaanpa hieman, miten tekoäly voi erota normaalista ohjelmoinnista. Kysymys saattaa olla hieman harhaanjohtava jopa. Aloin ymmärtää, että voi olla tarpeen erotella nämä kaksi asiaa:

  • ohjelmointi teknisenä prosessina
  • logiikka jota ohjelma suorittaa (=”tekoälyn luonne”)

Vaikka teemme tekoälysovellusta, silti aivan normaalisti vain ohjelmoimme – edelleen siis kielenä voi olla vaikka Python; käytämme tekstieditoria, ja ajamme ohjelman aivan normaaliin tapaan. Ohjelmoijan kannalta tekoälyssä ei siis ole sinänsä mitään eroa muuhun ohjelmointiin nähden.

Siis näin syntyy tekoälyohjelmisto(kin):

  • tehdään lähdekoodin runko (vakiolausekkeet; ohjelman valmismodulien sisällyttäminen)
  • pohditaan, millainen algoritmi ja järjestelmä (struktuuri) ongelmamme voisi ratkaista parhaiten
  • kirjoitetaan ja testataan sopiva ohjelma
  • parannellaan sitä tulosten perusteella

Mutta yllä oleva on silti hyvä ääneen todeta. Usein uuden oppimisen, kuten tekoälyn, ympärillä käy helposti niin että puurot ja vellit voivat mennä sekaisin. Tekoälyohjelmointi ei eroa normaalista ohjelmoinnista oleellisesti mitenkään.

Luin Haykinin teosta myös eteenpäin!

Haykinin kirja lähtee liikkeelle esittelemällä digitaalisen suodatuksen periaatteet. Suotimet ovat muuten kuin niiden analogiset “perinteiset” muodot, paitsi että digitaalinen suodin voidaan rakentaa ohjelmallisella logiikalla: sen parametreja voidaan muokata lennosta, datan perusteella. Analogisilla perinteisellä suotimilla tarkoitan mm:

  • low pass
  • high pass
  • band pass
  • jne..

Suotimen tehtävä on muokata tulosignaalia järjestelmällisesti. Alipäästösuodin leikkaa pois ne taajuudet, jotka ylittävät määritellyn raja-arvon. Ylipäästösuodin (high-pass) leikkaa taas raja-arvoa matalammat pois, jättäen korkeammat taajuudet jäljelle ulostulosignaaliin. Band pass on näiden kahden looginen yhdistelmä: se jättää jäljelle “kaistan” eli alarajan ja ylärajan välisen taajuusalueen, leikaten sekä alapuolelta että yläpuolelta.

Analoginen suodin ei siis muuta toimintaansa. Digitaalisuodin voi mukautua. Tästä tuntuu seuraavan myös hieman epämukava kysymys, johon palaan osassa 4.

Semantic Compression – Efficiency improvements in a Mental chore

Reading Time: 3 minutes

When I first got this (image besides) apparatus to medicate a child, I thought – OMG. It’s formidable looking, and feels like you are carrying a homing missile when you take the apparatus home from a local pharmacy.

inhaler

I’m kind of both amazed and yet, endlessly curious and just thinking to myself:

  • is this the (right) direction?
  • Could we do better? How?
  • What relation does this blog have to do with geeks, developers, and usability?!

Hold on – it’ll all come to you. Promise. Keep reading – these might be the droids you are looking for.

I’ll get back to those questions in the bottom. So: pretext, shall we.

I once wrote a piece of blog called ‘The Present History of Man‘. The idea in that text is the notion of us truly living in what will be perceived as history – the old ways. This is naturally true by the very definition of time, causality and so on. There’s no escaping the fact that what is right now “now”, will be “history” tomorrow.

But there’s one thing we definitely CAN choose: the direction of change.

The Inhaler – from 1630 words down to: “Press and inhale”

Getting back to the inhaler device; it’s just a convenience, an aide to help give a child the medication. For adults, we can inhale the medicine directly from a small tank.

What is the “payload” in the whole thing, is of course the medicine (substance) inside the tank. This inhaler helps vaporize and get all of the vapor inside the lungs of the patient.

The inhaler comes with a printed instructions leaflet, worth about 1630 words and a few illustrations (images). The reason for having explicit instructions is that medical industry is regulated heavily, and there are standards for documenting medicine and any apparatus involved with the application of the medicine.

The 1630 words come down to: push a button once, place the mask around your mouth, and inhale 5-6 times. But before you can “compress” this knowledge into a actionable and easy-to-remember internal representation, you do have to spend some time both reading, understanding and practising.

What started to interest me, is how are we doing in the digital sphere of things?

When we speak of “hail a cab”, for example, what exactly goes on to do that? How complicated is it for the first time? And how much faster we can do the same thing, once we are accustomed to the app?

Digital services have the potential to help us a lot in everyday life. This is in fact the single most motivating thing why I tend to revolve around mobile apps and technology. I want to explore the possibilities to make life better. Simple as that.

The Questions answered

  1. “Is this a good direction for technology and humankind”.
    My Answer: No comment. I only believe that this has been, and will be, the general route of human advancement: technological means change during time. Medicine has changed a lot, and will keep changing. The ways to administer chemical medicines keeps evolving, as will also the knowledge about root causes of ailments – and the general treatments as well.
  2. “Could we do better?” and (3) “How [can we do better]?”
    My Answer: We already are improving. And we will keep improving the methods, apparatures. Most likely nanotechnology, materials science, AI and electronics can improve the physical form factors of many medical applications; things get “under the skin”, less pervasive, more tacit and generally the applications feel better and more natural. There are some examples in treatment of eg. diabetes (via automated subcutaneous insulin pumps) and in Parkinson’s disease there are applications called ‘brain pacemaker‘ (CNBC news article) which is essentially a electronics gadget that applies small electric current to a specific part in the brain, alleviating the symptoms of Parkinson’s – namely tremors (shaking).
  3. – (I probably could tweak the automatic numbering. Sorry)
  4. How does this relate to geeks, developers and usability?
    My Answer: I believe that digitality and UX (user experience) are analogous to the real-world counterparts. In many apps we might be initially dumbfounded by the apparent complexity, but how it then sorts out and starts to feel uncanny natural is a very curious effect – however, there is a kind of mental unlearning process, IF you decide to jump to another wagon. More about this to come… Stay tuned.

Rokotustietokanta ja sen edut (2014 esitysvideo)

Reading Time: < 1 minute

Olipa mielenkiintoista tutustua suomalaisen rokotustietokannan tulemiseen ja sen tuomiin hyötyihin. Katsoin Youtubesta videotallenteen Filha:n tartuntatautikurssiin liittyen, jossa kerrottiin millaisia hyötyjä rokotostiedon digitalisoimisesta on ollut.

Digitaalinen rokotustietokanta käytännössä luotiin “tukkimiehen kirjanpidon” korvaajaksi. Digitalisoimalla ei pelkästään säästetty työtä kaksinkertaiselta kirjanpidolta (kansallinen ja paikallinen neuvoloiden kirjanpito) mutta myös saatiin tilastollisesti merkittävää lääketieteellistä dataa rokotteiden peittävyydestä ja tehokkuudesta. Rokotusten peittävyystieto eli se, kuinka kattavasti populaatio on rokotettu, saatiin aiempaa nopeammin muodostettua.

Suosittelen videota! Alta linkki:

“Miksi kansallinen rokotusrekisteri?” (video)

Nykyaika 2025

Reading Time: < 1 minute

Hei $rekisteristaPoimittuEtunimi,

tervetuloa palveluumme osoitteeseen $etMuistaSitaKuitenkaan. Tästä kauniista moniväripainatuksesta ja monikanavaisesta viestinnästä huolimatta itse fyysinen palvelupisteemme on tasan yhtä sosialistisen kamala, mitäänsanomattoman harmaa kuin kaikkien muidenkin. Saat pannuunpalanutta kahvia, kuten aina edellisinäkin vuosina. Vatsasi murisee illasta.

Lisäksi rakennuksen huolto on laiminlyöty sitten $perustamisVuosi.

$callToAction

P.S. Palvelumme on tasan yhtä samanlaista kuin niillä $countCompetitors() muullakin joilta saat myös hienoja semikohdennettuja automaattiviestejä.