Blog

Træd ind i din filterboble

|

April betyder ofte travlhed når man læser på IT-produktudvikling, fordi nu skal prototyperne snart være flyveklar. Det gælder lige nu, hvor mine læsegruppe og jeg bygger på en social installation. Den forsøger at simulere konceptet filterboble. 

 

 

 

 

Vi har bygget en dome som skal sybomlisere boblen. Den er bygget af rundstokke og 3D printede samleled. Den er dækket af hvidt stof, som er specialsyet til at passe. Det er længe siden jeg har syet på en symaskine, men det lykkedes at sy overtrækket til domen der er 4 meter i diameter. 

 

 

 

 

Når man træder ind i domen, bliver man bedt om at logge ind med sin facebook profil. Efterfølgende har folk udenfor domen, mulighed for at “redigere” personens liv. Det opleves inde i domen, gennem lyde, video og billeder. 

 

Til det har jeg lavet forskellige simple react applikationer, som skal køre de forskellige skærme. Og den app som personen logger ind gennem.

 

Installationen skal udstilles på Dokk1 til Internet Week 3.-4. maj. Jeg ser meget frem til hvilke diskussioner, vores installation kan skabe. 

 

 

 

 

Quick and dirty - ny lækker hjemmeside for Landsmøde

|

Jeg øver mig i at lave mere LEAN udvikling. At nogle gange er den bedste løsning - den hurtigst mulige. Det gælder især når det er frivilligt arbejde, og det stort set altid er brug for mange flere hænder, end det er muligt at skrabe sammen. 

 

Jeg er projektleder for KFUM-Spejdernes Landsmøde på Gram Slot til september. Og vi vil gerne være mange flere, end vi har været tidligere. En stor del af min rolle handler om kommunikationen. Til det havde vi brug for en hjemmeside.

 

 

 

 

Men samtidigt med at udviklingen skal gå hurtigt - så vil jeg ikke gå på kompromis med et flot tilpasset design!

 

Derfor skiftede jeg for en kort tid tilbage til en wordpress side. Fordi så kunne jeg starte ovenpå et eksisterende wordpress tema. Det gav en hurtig start. Og en masse CSS linjer og PHP tilpasninger, så kom det til at ligne det ovenover. Se det færdige resultat.

 

 

 

 

Vue som en god erstatning

På program-siden har jeg arbejdet med en særlig løsning. At se programmet er en af de vigtigste ting for en event side - samtidigt skal det være let og hurtigt at redigere. 

 

Derfor brugte jeg den Google Sheets løsning, som jeg har skrevet om tidligere. Så kunne programmet rettes direkte fra et Google Sheet. 

 

For at hente data ud og kunne navigere i programmet brugte jeg VueJS. Det er min første erfaring med Vue - jeg har tidligere erfaring med Angular. Men jeg vil gerne have mere erfaring med treenigheden Angular-React-Vue.

 

Som jeg ser det er Vue en god stand-in for jQuery, fordi det er relativt let at bruge i små projekter. Hvor Angular og React er mere full-blown applikations frameworks.

 

 

 

 

Der skal ikke mere end de her få linjer til. Så Vue har fået gode plusser i bogen. Og forhåbentlig hjælper det til, at der kommer mange mennesker med på Landsmøde.

Brug Google Sheet som JSON-backend

|

Jeg vil bygge mange flere ting i 2018 - gerne quick and dirty. Derfor har jeg nogle gange brug for en hurtig og let backend til datahåndtering. Derfor har jeg her til aften arbejdet med at bruge Google Sheets til at hente data ud via javascript.

 

Jeg bare må indrømme, at nogle ting bare er lettere at redigere i som spreadsheet, end i et CMS. Og nogle mennesker føler sig endda mere hjemme i et regneark.

 

 

 

 

For at kunne bruge dataen, skal den ud i et format jeg kan arbejde med. Og der er intet så lækkert som JSON. 

 

Til det bruger jeg gsx2json.com, som oversætter mit spreadsheet til JSON-data. Her er de 3 hurtige trin: 

 

1. Offentliggør på nettet...

Tryk på "Filer" -> "Offentliggør på nettet...". Der kommer en popup, tryk på Offentliggør. Og luk derefter popup'en igen. 

 

2. Find id

Du skal bruge filens id - den er i navigationsbaren. Strukturen er:

https://docs.google.com/spreadsheets/d/ID_HER/edit

 

3. Hent dataen

Nu kan vi skrive koden, læg mærke til at jeg bruger JQuery's get function:  

 

function getSheetData(){

var url = "http://gsx2json.com/api?id=ID_HER";

$.get(url, function( data ) {

console.log(data);

});

}

 

 

Den JSON der kommer ud ser sådan her ud: