Värt att uppmärksamma - december 2014

Arbetsmiljö¶

• Don’t Push Through the Pain
  Sitter du bra när du skriver ditt livs bästa kod? Tar du raster för att sträcka på ryggen och mjuka upp axlarna när din app tar världen med storm? Jag är själv dålig på det och tackar för den här artikeln som en påminnelse.

Design¶

• Designer Blindness
  Jag lider också av detta. Är stolt över det, rentav. Varför ska jag visa pardon för gränssnitt och design som jag inte omedelbart förstår? Varför ska någon möta ett gränssnitt eller en design halvvägs?
• Design Principles: Visual Weight And Direction
  Bästa läsningen jag haft på ett tag! Oerhört svårt för mig personligen, det här med vityta. Särskilt sedan Responsive Web Design, när allt behöver vägas om sömlöst.
• The Good, The Bad And The Great Examples Of Web Typography
  Ännu en artikel om webbtypografi.

CSS¶

• TV4 Tech | Natalie Nordström (TV4): Styleguides – hur vi använder det på TV4 och hur du själv kommer igång med det
  Inte övertygad om styrkan med stilguider för webb- och approjekt? kika på den här dragningen på svenska, kanske trillar någon polett ner.
• OS Specific Fonts in CSS
  Olika lösningar och knep för att låta webbdesign ärva typsnitt från operativsystemet. Inte helt dumt för t ex intranät där gränssnittet med rätt typsnitt kan ge intranätets besökare mer trygghet.
• Automating CSS Regression Testing
  Att testa CSS ordentligt, samt att kunna automatisera det för att själv fokusera på att designa. Det här är grymt coolt! Overkill för många projekt men inte alls omöjlig att föreställa sig i de projekt som behöver det. Responsive Web Design är svårt.
• Understanding CSS Stats: How to Make the Most of the Numbers
  CSS Stats är ingen absolut sanning, men att diagnostisera sin egen CSS på det här viset kan vara ett sätt att förbättra sin egen färdighet och att lära sig något nytt om hur CSS fungerar - eller vara beslutsunderlag till en behövlig refaktorisering.
• Responsive Enhancement
  Artiklar med Progressive Enhancement är jag aldrig sen att sprida vidare. Här görs en typisk hamburgarmeny med panes som ligger underordnade. Ytterligare en menylösning för referens.
• Positioning Offset Background Images
  Hur att positionera bakgrundsbilder från höger och botten. Suck, Android ...
• Exposing Additional Form Fields via Checked Radio Buttons
  Visa inte extra formulärfält förrän de behövs med enbart CSS. Ett enkelt och mycket uppskattat sätt att göra formulär mer användarvänliga.
• The flag object
  Omedelbar bokmärkning rekommenderas! Detta är det berömda .media med vertikal centrering.
• Animated Headlines
  Det här är en riktigt trevlig addition till en landningssida.

Designa Wordpress¶

• Back to Basics With WordPress CSS: Understanding the Native Classes
  En lathund eller cheat sheet för att designa ett Wordpress-tema från skratch eller utifårn befintligt tema. Wordpress har en rätt bestämd uppfattning hur CSS-klasserna ser ut och den här länken är bra att snegla på för ökad förståelse.
• SMACSS-Press
  Hur man ändrar de inbyggda klassnamnen i Wordpress. Ska såklart inte uppmuntras allt för mycket men en artikel med allt på ett ställe är såklart ett bra redskap.

Trender¶

• On the accessibility of web components. Again.
  Det pågår riktigt bra diskussioner om Web components just nu som kommer leda till bra saker. Tillgängligheten och användbarheten är en issue som brukar få coola kids att stöna trött men faktum är att Web components krånglar till saker mer än nödvändigt ibland genom att laga saker som inte är trasiga. Detta behöver diskuteras.

SVG, Canvas, sånt¶

• Clipping and Masking in CSS
  Allt jag personligen kan tänka mig vilja veta om masking (bilder och gradients) och clipping (vektorbanor) i CSS. Hyfsat webbläsarstöd också!
• Html5 Canvas vs SVG vs div
  Det handlar inte om att välja en, utan att välja mellan tre. Min tumregel: så snart det är tal om interaktiva element, överväg SVG före Canvas eller skippa interaktiviteten. Webbläsarstödet är numera en ickefråga men har varit det som hållt mig borta från SVG i över tio år.
• Icon System with SVG Sprites
  Kommer 2015 bli SVG:s stora år och det år när användningen av fonts börjar dala? Spännande.
• Elastic SVG elements
  Läckert.
• Is WebGL the Technology of the Future? What’s AexolGL?
  Abstraktionslager för att koda WebGL, som numera finns i både Android och iOS. Framtidens visualisering ligger redo i webbläsaren. Se också three.js.
• SVG-loaders
  Meh, min sista ursäkt till att använda animerade giffar! :(
• Tips For Optimising SVG Delivery For The Web
  Ber om ursäkt, är såklart tvungen att bli tråkig!

JavaScript¶

• JavaScript Promises
  Promises, ett sätt att skriva bättre enkeltrådad kod, finns nu native i JavaScript: det behövs inte längre bibliotek. Jag har ännu inte haft behovet av att tillämpa promises men dess styrka i jämförelse med (egensnickrade) custom events och massor av .addEventListener() går inte att förneka. Definitivt något att se fram emot - vi väntar bara på stöd i Safari (inkluderat iOS) och IE. Fram tills dess blir detta min första labb 2015.
• JavaScript Modules the ES6 Way
  DAMN! 2016 kan man alltså med litet tur få använda import { double, square } from 'mymodule'; för att skriva modulär JavaScript. Jag är förväntansfull.
• Introduction to Service Worker
  Periodisk bakgrundssynkning, kanske rentav "riktiga" push-notiser? Service Workers skulle kunna lägga grunden för det genom att låta webbutvecklare exekvera JavaScript "utanför" webbläsarfönstret. Här finns potential. Litet tidigt än dock. Exempel med Service Workers: The offline cookbook.
• Research: Performance Impact of Popular JavaScript MVC Frameworks
  Om svarstider och snabb sidladdning är superprio är det ej rekommenderat att köra något MVC-ramverk. Ingen överraskning där. Finns andra bra anledningar också, t ex förvaltningsbarhet.
• Recreating the Firewatch Parallax Effect
  Alltid skönt med artiklar som går all-in för att nedmontera komplexa saker. Lärde mig massor.

Mikroramverk¶

• Responsive nav
  litet script som förvandlar en horisontell meny till en hamburgarmeny på pekskärmar. Funkar för både pekskärm och tangentbord/mus. Kräver inget annat bibliotek!
• Rippler - Effect that spreads like a wave in touch or click.
  En trevlig klick-effekt! En guldstjärna till den som fixar en POC i detta med enbart CSS.

Produktivitet¶

• Developing Robust Deployment Procedures
  Hygienfaktorer som ditt arbetsflöde bör uppfylla om du är designer eller programmerare.
• What Is Vagrant and Why Should I Care?
  Rekommenderad läsning till skeptiker likt mig! Jag avfärdade Vagrant i över ett år innan jag övervägde det: det som fick mig att till slut prova var att jag ville ha en LAMP-stack med frysta versioner av PHP och Apache och inte var på humör eller hade tiden för att installera en virtuell maskin. Jag fick vad jag behövde på mindre än 2 minuter med Vagrant och är därmed övertygad.
• Dealing with Emergencies in Git
  Riktigt bra tips för git-användare! git stash och git cherry-pick använder jag själv en hel del då de är mycket produktivitetshöjande.

Tjänster¶

• Generate Notifications From Your Web App With the Pushover API
  Hur man skickar notiser till Android och iOS från din sajts backend med en molntjänst. Verkar inte allt för komplicerat eller ens särskilt dyrt.
• VATMOSS
  Fan, helvete, fan ... Starta SaaS inom EU låter inte alls kul efter det här. Lider med alla enmans-SaaS.
• Input Type Sandbox
  Verktyg för att testa inmatningsflt i HTML 5, och hur de beter sig när man inte fyller i korrekta värden.

Appar¶

• Transmit iOS 1.1.1 [Updated]
  Bra funktionalitet som appens användare vill ha och som Apple utåt sett vill uppmuntra - likväl nekades appen i App Store.
• How Overcast asks for reviews
  Bokmärkt för framtida implementationer där jag vill begära betyg. Ingenting kan få mig att så radikalt ändra uppfattning om en app som när den på ett störande sätt ber mig sätta ett betyg.

Prototyp-driven utveckling¶

• Stuck again
  Bibehåll fortsatt förtroende genom att hela tiden försöka trycka ut ny funktionalitet och förbättra existerande funktionalitet, då det inte går att förlita sig på gamla meriter, en endagsberömmelse eller en stund i rampljuset.
• The PRD is Dead, Long Live the Prototype!
  Argument för prototyp-driven utveckling framför att författa en mustig kravspec.

Säkerhet¶

• The dark side of Apple’s two-factor authentication
  Gäller inte enbart Apple: om du använder tvåstegsverifiering i tjänster, tappa inte bort återställningsnycklar eller liknande - du kommer att bli utelåst. Det är ingen annans fel än ditt eget. Jag har blivit utelåst från ett av mina Heroku-konton av samma anledning.

En sista bonus: En viktig milstolpe för MittMedia, en ärlig artikel om MittMedia som nu pensionerat ett stort system som jag var med och byggde 2007-2009. Jag önskar dem lycka till och de har orken att fortsätta vara i framkant. Det här är en av de mest intressant mediakoncernerna att hålla koll på framöver, särskilt ur ett tekniskt perspektiv.

Gratis¶

• Stereotesque - Gratis font.
• Beetle HTML5 template - Gratis statiskt tema, från premium-teamt i Wordpress med samma namn.
• PixelBuddha Free Icons Bundle - Färgglada ikoner!
• Against - stor skrikig font.
• Freebie: Tourism & Travel Icon Set (100 Icons, PNG, SVG)