Frontend Friday

#20 : Kauden päätösjakso

PodLuolan perukoilla Tommi miettii syntyjä syviä. Tai syytä miksi podcastia tehdään. Syvät ajatukset kumpuavat blogipostista [http://xn--pkk-qlaa4i.fi/weblog/miksi-teen-podcastia.html].

#19 : Koodikuri

PodLuolassa on koodinsiivoustalkoot, joten aiheena on koodikuri. Läpi käydään asioita eri linttereistä front end tekemiseen liittyen. Ja saattaapa tuo ajatus vähän muutenkin vaellella. * JSLint [http://www.jslint.com/] * Douglas Crockford [http://www.crockford.com/] * JSON [http://www.json.org/] * JavaScript: The Good Parts [http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb] * Crockford on Javascript - Programming style and your brain [https://youtu.be/taaEzHI9xyY] * Clean Code Linters [https://github.com/showcases/clean-code-linters] * JSHint [http://jshint.com/] * Jscs [http://jscs.info/] * Editorconfig [http://editorconfig.org/] * Syntastic [https://github.com/scrooloose/syntastic] * HTMLLint [https://github.com/htmllint/htmllint] * jscpd [https://github.com/kucherenko/jscpd] * jsinspect [https://github.com/kucherenko/jscpd] * CSS Specificity graph [https://jonassebastianohlsson.com/specificity-graph/] * CSScomb [https://github.com/csscomb/csscomb.js]

#18 : Polymer Bootstrap

Kesä vaihtuu syksyksi ja Apple julkaisee uusia käyttöjärjestelmiä ja laitteita. PodLuolan syvyyksissä keskitytään kuitenkin uusiin kirjastojulkaisuisihin. Polymerin vakaa versio tuli esille ja se toi mukanaan nopeuspäivityksiä. Material Designiä webiin Polymeria kevyempänä tarjoaa Material Design Lite. Ja Bootstrapin poppoo julkaisi alphan 4-versiostaan. * Tyyppimuunnos [http://tyyppimuunnos.fi/] * Polymer [https://www.polymer-project.org/1.0/] * Polymer 1.0 julkaisublogi [https://blog.polymer-project.org/announcements/2015/05/29/one-dot-oh/] * Material Design Lite [http://www.getmdl.io/] * MDL:n julkaisupostaus Mediumissa [https://medium.com/google-developers/introducing-material-design-lite-3ce67098c031] * Bootstrap 4 alpha julkaisuposti [http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/] * MDO:n tweetti Bootstrap 5:n “uutuuksista” [https://twitter.com/mdo/status/591364406816079873] * Bootstrap themes [http://themes.getbootstrap.com/]

#17 : Safari on IE

Kesälomat on lusittu ja pölyt PodLuolan lähettimien päältä pyyhitty. Olli ja Tommi käyvät läpi selaimiin liittyviä asioita kesän varrelta. Muun jutustelun ohessa. * Firefox Developer Editor [https://www.mozilla.org/en-US/firefox/developer/] * Power Surge [https://hacks.mozilla.org/2015/06/power-surge-optimize-the-javascript-in-this-html5-game-using-firefox-developer-edition/] * Nolan Lawsonin kirjoitus Safarista [http://nolanlawson.com/2015/06/30/safari-is-the-new-ie/] * Juttua Safarista Ars Technicassa [http://arstechnica.com/information-technology/2015/06/op-ed-safari-is-the-new-internet-explorer/] * iMoren Rene Ritchien vastaus Nolanille [http://www.imore.com/safari-isnt-new-ie-its-user-centric-web] * Safari 9:n ominaisuuksia [https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html] * PPK:n kirjoitus webin edistämisen hidastamisesta [http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html] * Ja toinen PPK:n kirjoitus samasta aiheesta uudelleenkäsiteltynä [http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_re.html] * Jake Archibaldin [https://jakearchibald.com/2015/if-we-stand-still-we-go-backwards/], Bruce Lawsonin [https://dev.opera.com/articles/on-a-moratorium-on-new-browser-features/] ja Aaron Gustafsonin [http://www.aaron-gustafson.com/notebook/ramblings-on-new-browser-features-interoperability-craft-and-the-future-of-the-web/] vastaus PPK:lle

#16 : SVG

PodLuolan syvyyksistä avataan sanaista arkkua SVG:n suhteen. Jaksossa käydään läpi vektorigrafiikan lyhyt historia webissä. Lisäksi annetaan muutama vinkki SVG:n käyttöön sekä mahdollisuuksiin. * Caniuse.com svg-tuki [http://caniuse.com/#search=svg] * Media Queryt svg:n sisällä [http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/] * SVG:n käyttö [https://css-tricks.com/using-svg/] * Responsiiviset kuvat ja svg [http://alistapart.com/article/responsive-images-in-practice] * SVG:n exporttaus Illustratorista [http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html] * SVG:n optimointia webiin SVGO:lla [https://github.com/svg/svgo] ja SVGOMG:lla [https://jakearchibald.github.io/svgomg/] sekä yleisesti SVG:n optimoinnista [http://calendar.perfplanet.com/2014/tips-for-optimising-svg-delivery-for-the-web/] * SVG:n tyylittely ja animointi CSS:n avulla [http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/] * SVG:n animointi [http://sarasoueidan.com/blog/svg-transformations/] * Älä ehkä mahdollisesti base64-enkoodaa SVG:tä [https://css-tricks.com/probably-dont-base64-svg/] * Ikonifontit vs. SVG [http://blog.nparashuram.com/2015/05/icons-font-inline-svg-or-background-svgs.html] * Lonelyplanet.com (ei hotels.com, kuten jaksossa muistelin) vaihtoi SVG:hen [http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/] * SVG:n use-tagin käytöstä [https://css-tricks.com/svg-use-external-source/] * Sara Soueidanin blogi [http://sarasoueidan.com/articles/index.html] * Stripen checkout-demo [https://stripe.com/docs/tutorials/checkout] * Snap SVG javascript-kirjasto [http://snapsvg.io/] * Sideproject Oulu Slack-kanava [http://www.sideprojectoulu.org/]

#15 : Web Components

Webbiteknologioista seuraavana PodLuolan listalla oli Web Components [http://webcomponents.org/]. Olli kyseli ja Tommi vastaili sen mitä osasi. Web Componentseihin tututstuttiin pintaraapaisulla ja polyfilleistä esiin nousi Polymer [http://www.polymer-project.org/] ja X-Tag [http://x-tags.org/]. Katsomisen arvoisia videoita ovat esimerkiksi Andrew Rotan The Complimentary of React.js and Web Components [http://webcomponents.org/presentations/complementarity-of-react-and-web-components-at-reactjs-conf/], Soledad Penades:n An Introduction to Web Components [http://webcomponents.org/presentations/an-introduction-to-web-components-at-web-components-london/] ja Edge Conferencen Web Components paneeli [https://www.youtube.com/watch?v=e29D1daRYrQ]. Selaintuki unohtui mainita kokonaan podcastissa, joten siitä pahoittelut. Chrome ja Opera tukevat kaikkia ominaisuuksia Firefox ja Safari perässä. IE:n tilanteesta mitään ei pysty sanoa mutta lupaavasti sieltä suunnalta on asioista kuulunut. Are we Componentized Yet [http://jonrimmer.github.io/are-we-componentized-yet/] kertoo tilanteen tarkemmin.

#14 : React.js

PodLuolan massiivinen tuotantolaitos pyöräytti asiaa React.js-nimisestä [http://facebook.github.io/react/index.html] kirjastosta. Mitä mahtaa Ollilla ja Tommilla olla sanottavaa tästä Facebookin tuotoksesta. Muita jaksossa käsiteltyjä aiheita olivat Flux [https://facebook.github.io/flux/], Marty.js [http://martyjs.org/] sekä React.js:n natiivi toteutus. Video React Nativen julkaisusta on täällä [https://code.facebook.com/videos/786462671439502/react-js-conf-2015-keynote-introducing-react-native-/].

#13 : Versionhallintaa

PodLuolan syvyyksissä pyyhitään pölyjä podcast-laitteista ja sukelletaan versionhallinnan maailmaan. Tutustutaan hieman Git [http://git-scm.com/]in, SVN [https://subversion.apache.org/]:n ja Mercurial [http://mercurial.selenic.com/]in käyttöä helpottaviin työkaluihin. Lyhyet esittelyt saavat Git Tower [http://www.git-tower.com/], SourceTree [http://www.sourcetreeapp.com/], Versions [http://www.versionsapp.com/], CornerStone [http://www.zennaware.com/cornerstone/index.php], TortoiseSVN [http://tortoisesvn.net] sekä TortoiseGit [https://code.google.com/p/tortoisegit/]. Versionhallinnan lisäksi tutustutaan eroavaisuuksien tarkasteluun erikoistuneisiin työkaluihin. Näitä ovat mm. DiffMerge [https://sourcegear.com/diffmerge/] ja Kaleidoscope [http://www.kaleidoscopeapp.com/]. Ulkopuolista versionhallintapaikkaa tarjoavat esimerkiksi GitHub [https://github.com/], Bitbucket [https://bitbucket.org/] ja Beanstalk [http://beanstalkapp.com/]. Sekä maksullisena että maksuttomana. Mikäli omaa kokemusta näistä tai muista vastaavista palveluista löytyy niin laittakaa palautetta. Palautekanavina ovat alla oleva foorumi, Twitteristä @FrontendFriday [https://twitter.com/FrontendFriday], Facebookista Frontend Friday [https://www.facebook.com/FrontendFriday] sekä sähköpostitse ouluweb@gmail.com [ouluweb@gmail.com]

#12 : Editorit

Tällä kertaa PodLuolan syvyyksissä puhutaan editoreista. Tarkempaan käsittelyyn pääsee ensimmäisenä Githubin Atom [https://atom.io/]. Vertailukohtaa haetaan niin Sublime Textistä [http://www.sublimetext.com/3], TextMatesta [https://github.com/textmate/textmate] kuin VIMistä [http://www.vim.org/]. Myös Adoben Brackets [http://brackets.io/] pääsee vertailulistalle. Toisenlaisena editorina nousee esille Macaw [http://macaw.co/]. Onko tässä haastaja Adoben työkalujen ylivallalle web-suunnittelussa? Ei ehkä vielä mutta hyvään suuntaan ollaan menossa. Mainintaa saa myös WebFlow [https://webflow.com/], jota ei kuitenkaan vielä ole päästy koeponnistamaan. Muissa aiheissa sivutaan seuraavia: * DoCSSa [http://docssa.info/] * Will-change property [http://dev.opera.com/articles/css-will-change-property/] * Element Queryjen päivittyneet käyttötapaukset [https://responsiveimagescg.github.io/eq-usecases]

#11 : Word of Press

PodLuolan uumenista kantautuu jälleen kerran ääntä. Tällä kertaa Olli saatiin tynnyristä ulos ja ääni on laadukkaampaa. Kova yritys oli tiivistää jakson mittaa ja melkein siinä onnistuttiinkin. OLETKO TURVASSA - XP:N TUKI PÄÄTTYY Windows XP:n tuki päättyy 8.4.2014 ja sitä myöten saamme jättää jäähyväiset toivon mukaan myös Internet Explorer 8:lle. Innolla odotamme miten tämä näkyy käytännön tasolla ja jäämme odottamaan Vistan tuen päättymistä vuonna 2017. PICTURE-ELEMENTIN IMPLEMENTOINTI BLINKIIN Responsive Images Comunity Group (RICG) on häärinyt picture elementin kanssa. Nyt ollaan ilmeisesti päästy yhteisymmärrykseen tuosta ja pitäisi implementoida selaimoottoreihin. Yoav Weiss niminen kaveri (freelancer) on pistänyt pystyyn Indie GoGo:hon kamppiksen [http://www.indiegogo.com/projects/picture-element-implementation-in-blink], jossa tavoitteena on kerätä 10 000 dollaria jotta Picture elementti saadaan mahdollisimman nopeaa Blinkiin (ja sitä myöten Chrome + Opera). Ja tavoitehan on täytetty. Lisärahoituksella kehittäjä lupasi ottaa mm. element queryt harkintaan/työn alle! PICTURE SRCSET KUVALLISESTI Mikäli picture-elementin todellinen hyöty on hieman epäselvä niin Eric Portis tarjoaa kuvallisen selityksen miten homma tulee toimimiaan [http://ericportis.com/posts/2014/srcset-sizes/]. ELEMENT QUERYN TILA VUONNA 2014 Tab Atkins kertoilee hieman element queryistä [http://www.xanthir.com/b4VG0]. Tai itseasiassa päivittää tilanteen ja odotettavissa olevat haasteet. VAGRANTPRESS Jos Wordpressin päälle kehittäminen kiinnostaa ja sen haluaa saada mahdollisimman kevyesti ylös on Vagrantpress [https://github.com/chad-thompson/vagrantpress] näppärä paketti siihen. Koneella pitää olla asennettuna Vagrant [http://www.vagrantup.com/] (Win, Mac, linux) jonka jälkeen otetaan klooni github-reposta. Myös VirtualBox [https://www.virtualbox.org/] on hyvä asentaa. Tämän jälkeen komennetaan vagrant up ja loppu on automaagista. Ensimmäisellä kerralla tulee olla verkkoyhteys mutta jälkeenpäin onnistuu ilman yhteyttä. WORDPRESS API Edellisessä jaksossa puhuttiin Hypermedia API:sta, joten tämä on hyvää jatkoa sille. WP API [https://github.com/WP-API/WP-API] tarjoaa JSON-pohjaisen REST-rajapinnan Wordpressille. Plugin on aika geneerinen mutta kohtalaisen helposti laajennettavissa eri projekteihin. Tarvittaessa jopa toiminnallisen proton backend on mahdollista tämän avulla saada nopeasti pystyyn. WPML Mikäli Wordpress on tarve saada monikieliseksi on WPML [http://wpml.org/] siihen oiva työkalu. Hyvin pitkälle kaikki Wordpressissä on lokalisoitavissa. Ja suoraan Wordpressin backendistä. WP-TOOLSET WP-Toolset [http://wp-types.com/] tarjoaa useita eri työkaluja tehokkaaseen Wordpressin säätöön.