By: Mattias Wallander

2013-03-20

Så här håller du dig uppdaterad inom webbutveckling

Måndagen den 12 november hade Dynabytes kompetenscirkel för webb sin första träff. Vi var nio intresserade som samlades på kontoret där vi skulle få lyssna på två föredrag för att sedan ha en gemensam diskussion kring det fortsatta upplägget på cirkeln.

## HUR KAN MAN HÅLLA SIG UPPDATERAD?

Mattias Wallander inledde med att prata om hur man kan hålla sig uppdaterad om det som händer på webben idag. Utvecklingen går väldigt snabbt och flera webbläsare kommer nuförtiden ut i nya versioner med bara en till två månaders mellanrum. Det går idag att göra mer och mer saker med ganska enkla medel, som t.ex. denna minimala demo som inte använder någon JavaScript alls:

http://codepen.io/anon/pen/uFEAg

Mozilla har varje månad en demotävling de kallar för Dev Derby som är ett bra ställe att se vad som kan göras i moderna webbläsare. Här är vinnaren av julitävlingen No JavaScript, d.v.s. den innehåller bara HTML och CSS:

Honey Pursuit: Yet Another Love Saga

Mozilla Dev Derby

Det lättaste sättet idag att hänga med är nog att följa lite olika flöden och där finns det mycket att välja mellan. Mattias listade några av dem han läser.

Webbläsartillverkarna själva har ofta egna bloggar de skriver i. Det behöver inte bara handla om deras produkter utan är snarare allmänna artiklar om nya tekniker inom HTML/CSS/JavaScript.

Mozilla Hacks
Dev.Opera
IEBlog

Det finns även många privata bloggar och två stycken som speciellt togs upp var Christian Heilmanns (Principal Developer Evangelist hos Mozilla Developer Network i London) och Paul Irish (front-end-utvecklare hos Google Chrome som bl.a. utvecklar jQuery, Modernizr och HTML5 Boilerplate).

Christian Heilmann
Paul Irish

En mer allmänt hållen sida med generella artiklar om HTML, CSS och JavaScript, tutorials m.m. är HTML5 Rocks.

HTML5 Rocks

De har även ett flöde med mer utvalda artiklar:

HTML5 Rocks Updates

Om man specifikt är intresserad av CSS så finns dels CSS3.info som rapporterar om vad som händer med CSS3, t.ex. moduler som fått rekommendationsstatus, nya förslag eller förhandstittar, och dels CSS-Tricks som mer har artiklar med exempel på hur man kan göra olika saker med CSS.

CSS-Tricks
CSS3.info

En sida inriktad på JavaScript som dagligen uppdateras med tips om bibliotek, jQuery-plug-ins med mera är DailyJS:

DailyJS

Som eventuellt sidospår togs även ett par sidor om front-end-optimering upp. Sedan Steve Souders visade att 80-90 % av en sidas laddningstid ligger på klientsidan, inte på serversidan, har detta blivit ett hett ämne och intressanta artiklar i ämnet kan hittas på bland annat följande tre sidor:

Steve Souder
Web Performance Today
Web Performance Optimization Blog

Vill man dyka ytterligare lite djupare i vad som är allra nyast för tillfället så kan man följa två flöden om några av de senaste commits som gjorts till repositorierna för WebKit/Chrome och Gecko/Firefox:

Peter Beverloo
The Burning Edge

Om man sen vill använda sig av några av de nya teknikerna man läst om så behöver man veta om de stöds av besökarens webbläsare. Det finns lite olika sätt att kolla detta. För att alls veta om det finns något stöd att prata om kan man använda någon av sidorna caniuse.com och HTML5 Please:

Can I use…
HTML5 Please

För att skilja ut stödet specifika besökare har för olika funktioner bör man sedan använda sig av “feature detection” i stället för “browser detection”. Det senare är dåligt bland annat på grund av att det är väldigt svårt att täcka upp alla fall. Som tur är finns det bra verktyg för det tidigare där Modernizr är det mest spridda.

Modernizr

Det börjar spännande nog även komma en inbyggd funktion för detta, nämligen @supports-regeln i CSS och ett motsvarande gränssnitt för JavaScript. De enda webbläsarna som än så länge har något slags stöd för det är Firefox och Opera men förhoppningsvis hoppar de andra tillverkarna på ganska snart. Här är två artiklar om funktionen:

Firefox supports @?supports, gets my support
Native CSS feature detection via the @supports rule

Vill man träffa likasinnade och diskutera i verkligheten så finns så klart den här kompetenscirkeln men även sthlm.js. Träffarna för sthlm.js blir dock snabbt fulla så man behöver vara snabb om man ska få plats men de brukar vara väldigt intressanta.

sthlm.js

Efter föredraget flikade Patrik Hedman in med ytterligare några bra länktips:

JavaScript Weekly
HTML5 Weekly
es-discuss summaries
StatusCode

## ELF – EXTENSIBLE LANGUAGE FRAMEWORK

Efter en kort paus berättade Patrik Hedman om sitt experimentella kompilatorramverk ELF som man kan använda för att skapa återanvändbara och utbyggbara implementationer av programmeringsspråk i JavaScript. Vill man veta mer om det kan man besöka ramverkets webbsida som även har bra kodexempel.

ELF – Extensible Language Framework

## DISKUSSION

Kvällen avslutades med en diskussion kring hur vi skulle fortsätta med kompetenscirkeln. Det vi främst kom fram till var att formatet gärna får vara ganska öppet. Det är intressant med föredrag om någon har något spännande att berätta om men vi har även en maillista för tips och frågor och provar gärna på andra format på träffar som vi känner ger oss något.

Det händer mycket i webbvärlden och det kan vara svårt, om inte omöjligt, att ha koll på precis allting men om man ser till att följa några olika flöden så att man åtminstone känner till vad det finns för moderna lösningar så kan man kolla upp det noggrannare när man hamnar inför ett problem där de kan användas.

JavaScript är inte bara till för att visa och dölja saker på en webbsida när man klickar på en knapp utan kan användas för ganska avancerade saker idag där ELF är ett exempel.

#CSS #FEO #HTML #Javascript

Effective JavaScript

Angular vs. Backbone vs. Ember