📸 PushSnapper visualiserar utvecklingen av våra webbplatser

Vid utveckling av webbplatser gillar vi att få en visuell historik över sajtens utveckling. Allt från en första vit blank sida till en färdig sajt med logotyp, menu, content och (ibland) andra färger än vitt.

För att få denna historik har vi utvecklat ett eget verktyg vid namn 📸 PushSnapper.

En skärmdump vid varje deploy

Det hela är väldigt enkelt: varje gång en ny version av en sajt pushas ut så tas en skärmdump av sajten. Alla skärmdumpar sparas i en mapp på en server och när som helst kan vi plocka fram valfri skärmdump eller skapa en film av alla skärmdumpar. Det är kul att titta på, det är ett bra sätt att följa en sajts utveckling, och det kan säkerställa att inget oväntat skett på sajten. Så när någon frågor “när och hur och varför blev logotypen dubbelt så stor?!” så kan vi lätt se vilken dag och tidpunkt detta inträffade.

Såhär kan verktyget visa utvecklingen av en sajt. I detta fall har vi skärmdumpat hur sajten ser ut på en mindre skärm, typ en mobil:

Slår man ihop alla bilder ovan till en video blir det ungefär såhär (du måste kanske musa över videon och klicka play):

 

Så hur tar vi dumparna då?

Jo på Earth People använder vi ofta verktyget Buddy för att deploya kod. Buddy har en fiffig funktion vid namn Pipelines som gör att man kan utföra olika saker i olika steg vid en deploy. Sist bland dessa steg har vi lagt in vårt eget verktyg PushSnapper, en liten enkel node-snurra som i sin tur använder sig av Puppeteer.

Så varje gång en ny version av sajten läggs ut så tas en eller flera skärmdumpar. När man väl aktiverat skärmdumpningen så behöver man inte bry sig om att den sker. Förhoppningsvis glömmer man det och kommer på det sist i projektet när man vill ha en fin animation – eller när något går riktigt snett och man undrar exakt när det hände!

Det finns garanterat flera liknande verktyg – men det här är vårt eget verktyg skapat för våra behov. Och än så länge funkar det 💯.

/Pär

Hämta hem ISRC-koder och annan matnyttig metadata du inte kan se i Spotify-appen.

Vi är ett antal individer på det här bygget som släppt ifrån oss musik i olika former. Jag själv började trevande med cdr-släpp med hemgjorda omslag, la ut musik i låg bitrate när MySpace-eran nådde zenit, för att gå vidare till “riktiga” cd-skivor, vinyler och de streamingtjänster som vid det här laget känns som de funnits för evigt.

Då det mest hela tiden skett på punknivå så har jag plockat på mig små bitar av oklar kunskap kring musikdistribution. Sådant det finns internationella standarder kring och professionella ägnar sig åt hela dagarna. Min icke-metod har lett till att mina tidigaste släpp gjorts under oklara former, där ingen av de inblandade vetat riktigt vad de hållit på med.

Med den inledningen ska jag komma till saken: Jag ska återutge en av mina första skivor, som från början gavs ut på cdr, och sedan släpptes digitalt. Den gavs ut av två olika skivbolag i nanostorlek, som båda somnat in sedan länge. För att kunna behålla de antal spelningar som skivan samlat på sig på Spotify behöver jag få fatt på de ISRC-koder som hänger ihop med låtarna.

Om jag gjort allt enligt konstens alla regler när det begav sig hade det varit EN kod prydligt kopplad till EN låt. Och allt hade registrerats hos IFPI i deras stora och lättillgängliga databas.

Men skivan släpptes utan koll på läget. Tur då att uppgifter om ISRC-koder finns tillgängliga i Spotifys API. Jag fick hjälp av Peder som byggde en enkel webbtjänst där man genom att klistra in länken till ett Spotify-album får fram all metadata som finns om låten, inklusive ISRC-koderna. Så nu har jag, förutom själva ISRC-koderna, fått reda på att låtarna visst råkat få dubbla uppsättningar av koder. Därför måste jag nu reda ut hur detta ska städas upp. En massa felstavad metadata är det också. Suck. Kan inte allt bara funka.

/Henrik

Gör en Spotifyplaylist från vilken sida som helst på hela Internet

En kanske gillar en del program på Sveriges Radio och en del musikbloggar. Dessa har massor med fina låtar listade, en och en, på sina websidor. Fantastiska playlists, förutom att de inte är just playlists utan bara låtlänkar. En vill inte sitta och klicka play låt efter låt utan ha detta i playlists istället.

Märkligt att det fortfarande saknades en enkel tjänst för detta. Så jag gjorde en snabb liten sajt som hjälper iallafall mig i min vardag. Använd om den passar ditt liv också.

Alla låtarnas interna Spotifylänkar presenteras, rakt upp och ner, i ett litet textfält. En illa dokumenterad feature i Spotifys desktopapp är att dessa kan pejstas rakt in i en playlist. Sjukt ju.

Inte så märkvärdigt, men känns bra att ha täppt igen det här glappet på Internet.
https://earthpeople.club/~peder/url2spotify/

Hur man gör en användbar flamingo-badring till Roblox


Sommarpyssel för dig och din unge.

Det låter kanske kul men det är ett litet helvete. Fast jo, också kul.

Roblox är en spelplattform med en egen utvecklingsmiljö för publicering av egna spel. Det har funnits sedan 2006 men på senaste tiden har det ökat snabbt i popularitet och är enormt stort i den yngre målgruppen med 65 miljoner aktiva spelare varje månad.

Todo:

  1. Modellera flamingon och exportera den som en .fbx-fil.
  2. Gör texturen och spara den i formatet png.
  3. Importera flamingo.fbx till Roblox Studio.
  4. Ladda upp texturen på roblox.com som en decal och para ihop den med modellen.
  5. Scripta och tjafsa runt med positioner och fysikvärden i Roblox Studio.
  6. ✨NJUT RUNT I DIN FLAMINGO! ✨

Till dom första två stegen använder jag Blender och lite Photoshop men det går ju bra med valfri 3D-programvara och eventuell bildbehandlingsprogram.

3D-modellering i Blender
👆 Här gör jag själva 3D-modellen i Blender.

Roblox har en gräns på 5000 polygoner per mesh. Detta är ju en rätt simpel form men håll modellen så enkel som möjligt.
Gör man modellen 3 enheter stor i Blender och sätter scale till 0.01 när man exporterar som fbx så blir det en rimlig storlek när man tar in den i Roblox Studio.


👆 Texturen skissade jag upp med Texture Paint i Blender och snyggade till i Photoshop.

Det här kan man ju göra på lite olika sätt. Jag valde att snitta upp min pippi på det här viset. Hur man markerar sömmar och ritar textur i Blender tycker jag den här videon förklarar bra.

Spara ut den som en png och ladda upp den under Create > Decals på Roblox.com. Då får du ett ID-nummer i urlen som du behöver klistra in som TextureId i Roblox Studio. Den måste inte vara modererad av Roblox för att använda i Studio. Dom är dock rätt snabba på att godkänna uppladdat material.

Att få in detta i Roblox Studio:

  • Öppna  Roblox Studio (ladda ner här).
  • Högerklicka på den gråa plattan på själva stagen och välj Insert Object > Meshpart
  • I properties-panelen – ändra klossens MeshId till din fbx-fil. Nu syns din flamingo!
  • Ändra material till Glass.
  • Kopiera in id-numret från decal-urlen i värdet till TextureId för att klä din mesh.

import to roblox

Om du testar spelet nu (F5 eller playknappen) så kan du inte greppa flamingon. I Roblox behöver man ett skapa ett objekt som heter Handle och placera det där karaktären ska greppa objektet. Man gör de två objekten till children av objektet Tool som finns beskrivet här. Tool är alltså till för redskap eller vapen egentligen. Jag följde den här beskrivningen för att få det att typ funka.

Tweaks
Genom att överdimensionera flamingon, placera handtaget på sniskan så att det ser ut som att man typ sitter på den istället för att hålla i den samt ändra fysikvärdena lyckades jag få den att agera som en användbar badring.

flamingo floatie
👆 YEEHAAW!

Utvärdering

Roblox Studio är en lite frustrerande miljö och det är väldigt mycket testande fram och tillbaka. Men fan alltså, det är roligt och leder till nästan lika många skratt som sammanbrott. 10 av 10.

Hej då.

/Andreas

Typsnitt med flera lager?

Typsnitt med flera lager – layered fonts. Vad hände med det egentligen?  Det var ett par år sedan jag labbade med det sist. Och tekniken har ju funnits i flera år innan det. Det har funkat väldigt tillfredsställande att jobba med det i Glyphs men andra programvaror har fortfarande begränsad support. Glyphs är iofs en programvara för att skapa och editera fonter så kanske inte så konstigt att det funkat där. Men nu känns det som att det börjar bubbla lite kring detta.
Det finns lite olika tekniker för att få det att fungera i en browser. Jag är inte bäst på att förklara det. Men enkelt beskrivet delar man upp lagren till separata fonter och lägger ovanpå varandra. Hur man gör detta utan att kladda ner sin markup finns det flera artiklar om redan. Det finns en del välgjorda typsnitt färdiga att använda men så här gjorde jag mitt eget. Se det mer som inspiration än en tutorial.



👆Nu var jag ute efter en handtextad känsla så jag började med att skriva alla bokstäver med en fet Faber Castell Brush pen och kalkerade av dom i Illustrator. Jag är så van med Illustrator att jag hellre styr upp ankarpunkterna där och kopierar över till Glyphs.

👆Övriga lager, i det här fallet highlights och skugga+outlines designade jag direkt datan genom att utgå från baslagret. Totalt 3 lager alltså.

👆 Här är alla tre lager importerade i Glyphs. Väldigt tillfredsställande när man kan testa sina bokstäver med tangentbordet.

Men ok!

Vad ska man med detta till då. Halvbra fråga. Fel använt skulle ju detta få internet att bli riktigt jävla fult. Men i rätt doser och kombinationer i rätt sammanhang är det fan fint alltså. I det kontextet hoppas jag på att få se mer av detta.

Detta var enkelt beskrivet. Att skapa ett typsnitt med bara ett lager är rätt tidskrävande och sällan försvarbart ekonomiskt för separata projekt. Men ändå. Det finns ju färdiga som sagt och det kanske inte alltid behövs ett helt typsnitt. Jaja.

👇 Den här är ju förresten baserad på en variant av exemplet ovan men med lite andra lager.

Hej då.
/Andreas

Blipp Blopp för barn

Förra året gjorde vi ett kul sidoprojekt som inte nämnts här: Blipp Blopp för barn – som blev grammisnominerad som “Bästa barnalbum”!

Barn behöver roligare kultur, och vad är roligare än pruttande syntar, fula röstljud och robotdans. Blipp Blopp för barn är en elektronisk barnskiva släppt på vinyl och digitalt, Earth People har agerat skivbolag. Andreas gjorde omslagsballonger i 3d och grafisk design, EP-arna Tvärvägen och Beem har gjort varsin låt, och vi har engagerat en rad grymma elektroniska musiker som Daniel Savio, Lisa & Kroffe, Andreas Tilliander och även rapparen Rikard “Skizz” Bizzi – under hans alias Monolåg.

Skivan släpptes i April 2017. Vinylskivan säljs på olika skiv- och barnaffärer i Stockholm, samt per post. Den finns också på Spotify och liknande tjänster – Länk till skivan på Spotify.

Alla medverkande:
Daniel Savio, Lisa & Kroffe, Andreas Tilliander, Beem, Tvärvägen, Franka, Råd Kjetil Senza Testa, The Bird Who Fell to Earth (Carolina Guillén), Trauma Trauma (Frans Carlqvist) och Monolåg (Rikard Bizzi).

Tippa Fotbolls-VM i en chatbot

Nu drar Fotbolls-VM 2018 igång och vår bot i Facebook Messenger för 1×2-tippning som vi gjorde till Euro 2016 får nytt liv. Chat-plattformen passar definitivt inte allt, men här glänser den faktiskt som en liten diamant. Enkelheten att komma igång, utan att ladda ned något eller skapa ett konto, få en liten ping varje matchdag och snabbt tippa dagens matcher – perfekt.

När andra 1×2-tips ofta går ut på att fylla i alla 64 (!) matcher på ett bräde, utan att veta hur lagen känns, så blir detta lättsamt, härligt och engagerande under hela eventet. De på kontoret som inte ens är så intresserade av fotboll börjar titta på matcher och peppa igång på hur det gått för lagen.

Det går att skapa ligor där ens vänner tävlar mot varandra, och – het ny funktion för i år: kasta emojis på varandra i highscorelistan.

Testa nu medan VM pågår: https://m.me/thefootballbot

/Fredrik

Pinga-mig-när-jag-missat-botten

Vi jobbar ju i en del projekt där faktiskt nedlagda timmar ska faktureras. Men det är ju så roligt att jobba och så himla svårt att komma ihåg att tidrapportera, även om man som vi gör det direkt i Slack.

Men samtidigt dumt att bjuda på timmar som glöms. Så jag hackade ihop en liten slackbot som hämtade ut alla dagens commits ur vårt byggsystem Buddy och jämför det med dagens inrapporterade timmar. Det är lite trubbigt (än så länge) men boten känner iallafall igen ifall någon varit inne och programmerat i nåt projekt och glömt rapportera det.

Alltid nåt.

/Peder

Jenny Wilson – EXORCISM release fest

Alltså oklart varför, vi är ju ingen eventbyrå. Men i mars ordnade vi ändå en skofri releasefest i dansens tecken, för Jenny Wilsons nya skiva Excorsism. För att:
1) det är så sjukt kul att ordna fester.
2) så himla fint att sammanföra massa bra folk från vårt nätverk som kan bidra med sina specialiteter.

 

(Video: Ola Lewitschnik / Gabriel Leigh)

Jenny har tidigare spelat på Webbklubben, och vi har tidigiare gjort nån slags “interaktiv upplevelse” för hennes singel/video: http://www.rapin.run

Bonusmaterial: “TV-kanalen” med tematiska giffar som Katarina kodade ihop och projicerade under festen (OBS: Enorm laddtid pga preload):
https://earthpeople.club/~katta/gif/

/Peder

Klubben Webbklubben

Jag kom på nu att vi ju kört rätt fina afterworks hos oss i gamla stan, i flera år, och glömt berätta om dessa. Om du känner oss sedan tidigare kanske du varit här, annars är du välkommen i framtiden. I sin enkelhet bjuder vi på öl och bokar en artist vi lyssnat på. Det är alltid astrevligt, och en rätt härlig mix av webbtroll, goda bekanta, snälla grannar och löst folk från gatan.

View this post on Instagram

@josefin_ohrn äger på @earthpe0ple #webbklubben

A post shared by Alex Picha (@alexpicha) on

Mer bilder från alla webbklubbar på Instagram.

Artister som spelat senaste åren:

  • ShitKid
  • Joy
  • Neybuu (US)
  • Nadia Tehran
  • Josefin Öhrn + The Liberation
  • Scuplture (UK)
  • Jenny Wilson
  • TM404
  • Natten
  • Molly Nilsson (DE)
  • Varg
  • Rickard Skizz Bizzi

Den 24:e maj är det dags igen. Då spelar det helt färska bandet FLORA något som, om man får tro första singeln, låter som en perfekt kombination av Yung Lean och Autechre.

Det blir nog stämning. Kom då!

/Peder