Athegabloggen

Lär dig uttala vue.js (och hur det fungerar)

Postad med taggarna nyhetsbrev vuejs javascript

Månaden mars internutbildning handlade om det progressiva JavaScriptramverket vue.js. Vue är ett ramverk som kan användas till att bygga användargränssnitt i webbläsaren. Det är ett alternativ till andra populära ramverk som React eller Angular.

Det speciella med Vue är att det har en väldigt kort komma igång-tröskel (om du redan har koll på JavaScript, CSS och HTML). Dessutom är det snabbt och litet i sin kärna. Med endast 18kb hämtat via en <script>-tagg är du igång.

Se på detta exempelvis:

På några få rader har vi en reaktiv sida som hanterar inmatning från och interaktion med användaren.

Det tar ungefär en eftermiddag att komma igång att göra en riktig app. Vi avslutade därför dagen med att göra en single-page-app som sökte i Athegas medarbetar-API och presenterade resultatet i ett någorlunda snyggt format.

Nedan finner du presentationen från dagen.

/ Chrille

PS.

Vue.js uttallas precis som engelskans view.

DS.

Kreativ programmering

Postad med taggarna nyhetsbrev creative coding webgl shader art glsl

VertexShaderArt.com

På fredagseftermiddagar efter vårat sedvanliga månadsmöte brukar vi köra en session med någon form av internutbildning. Nu i februari gjorde vi det som en programmeringsutmaning som gick ut på att lite snabbt skapa något fint med bara kod.

Creative Coding - Intro presentation
Presentation av WebGL, GLSL och
VertexShaderArt

Creative coding

Det brukar kallas "creative coding" när man programmerar grafik och ljud från grunden för att skapa något underhållande och visuellt tilltalande. Ofta använder man inte några andra verktyg än bara koden. Poängen är helt enkelt att göra något fint och antagligen totalt onödigt, men det är väldigt roligt!

technoball
VertexShaderArt: technoball

Begränsningar föder kreativitet

Möjligheterna är som vanligt obegränsade men när man sätter begränsningar skapas förutsättningar för att föda inspiration. I det här fallet består begränsningen av att man endast skriver koden för en "vertex shader", vilket normalt sett bara är en liten del av kedjan för att rendera 3D-grafik. Vi använde oss av webbplatsen VertexShaderArt.com där allt redan finns på plats så att man snabbt kan börja koda direkt i webbläsaren. Därmed behöver man inte sätta upp någon utvecklingsmiljö eller installera andra verktyg.

flowerworm
VertexShaderArt: flowerworm

WebGL och shaders

Eftersom WebGL, "shaders" och programmeringsspråket GLSL var nytt för vissa började vi med en presentation som gav en kort introduktion från grunden. Vi gick därefter vidare med att kolla igenom några videor med instruktioner och exempel för att komma i gång. Tanken var att alla skulle hinna med att göra något kul på bara ett par timmar. Även de som är mindre vara att skriva kod kunde utgå från ett exempel och genom att ändra lite siffror och parametrar uppnå ett unikt och persoligt resultat. Det är kreativiteten som är det viktiga!

Kolla gärna in presentationen och några av de skapelser detta resulterade i som finns länkade här bredvid. Och varför inte testa själv?

/Johan.

Codebase 2016 (Athegas Hackday)

Postad med taggarna codebase 2016 athegas hackday

Friiberghs Herrgård

Traditionsenligt arrangerade vi vår Codebase på hösten, men två saker var lite annorlunda i år. Det första var att vi inte badade i bräckt vatten i Östersjön utan vi besökte Friiberghs Herrgård i Mälaren (Grodhavet). Kontrasten är stor mellan Ålandshav och Ekoln men båda miljöerna lämpar sig för kreativt arbete i annorlunda miljö. Ett tydligt avbräck från vardagen. Den andra skillnaden var att det flesta jobbade med ett gemensamt projekt som påbörjats tidigare i samband med våra gemensamma athegafredagar. Syftet är att renovera och förnya de kreativa lösningar vi använder på vår jullunch. Funktioner från inbjudan, genomförande av lunchen till uppföljning.

Peter jobbade hårt på serversidan med en meddelandebuss. Han satte upp NATS streaming och skrev en proxy för HTTP till NATS. Proxyn utvecklades i Go och har stöd för att leverera meddelande som Server-Sent Events (SSE) till browserbaserade klienter.

Mikael jobbade med presentation av livestatistik. Han konsumerar Server-Sent Events (https://www.html5rocks.com/en/tutorials/eventsource/basics/) och med hjälp av dessa renderar han bubbelgrafer med D3.js (https://d3js.org/). I takt med att händelser av en viss typ anländer till webbklienten så växer eller krymper de olika bubblorna.

Neopixel Codebase 2016

Torbjörn och Mats bygger bygger ljuseffekter till en fysisk inloggningsportal som ska användas när gästerna ankommer till lunchen. De använder Led-lampor från Neopixel som de styr med hjälp av en Tessel och tar fram lämpliga effekter som kan triggas av ankomsthändelser som fotografering av deltagaren. Tessel är en hårdavuutvecklingsplatform (IoT) som kan programmeras med Javascript och Node API:er. Händelser konsumeras via Server-Sent Events.

Chistian jobbade mycket med den nya Tesselplattformen, Tessel2 och den delen som sköter incheckningar med RFID-kort. Han fixar även serversidan med både webbgränssnitt samt lagring av incheckningsdata.

Alex bygger en stämningsmätare och använder en Tessel 1 med ambient- & servo-modulen. Genom ambientmodulen får han data om ljudnivån i rummet. Datat som avspeglar ljudnivån styr ett servo. Servot flyttar på en arm över en mätartavla. Tesseln skickar även datat över Peters lösning och vi kan utnyttja informationen i våra presentationer som rullar under lunchen.

Krister kommer se till vi tar en bra bild av varje deltagare. Han labbar med C++, OpenCV, cnats och curl.

Johan bygger dynamiska presentationsbilder som ska snurra och visas på skärmar under lunchen med livestatistik. Hans bildsnurra består av HTML, Javascript med jQuery, CSS med animeringar och webb API:et EventSource för att reagera på NATS-flödet av händelser.

Mattias bygger en legorobot som spelar på en Pocket operators. Det blir den bästa demon.

Vi hade en väldigt lyckad och trevlig Codebase och ser fram emot nästa.

Lite äldre bloggposter