Lästips om webbutveckling: vecka 3-6 2015

Annonser och tredjepartswidgets¶

Single-Tag Website - All of this coming from a single LINK tag
Kanske är det såhär man ska komma undan giffar och flash i annonsbanners? Inkludera en <link> och några placeholders (rimligen <a> med ett id) så är det klart? Borde vara mindre kostsamt än att rita annonser med flash.

Ser även att detta skulle kunna appliceras på fler widgets, t ex på diagram eller topplistor. Särskilt om dessa ska ta en ifrån sajten vid klick.

CSS-effekter, showcases¶

Hover.css - A collection of CSS3 powered hover effects
En samling över hover-effekter. Används LESS- eller Sassbiblioteket kan dessa enkelt inkluderas som mixins.

Magic Animations CSS3
En annan samling, men med animationer. Med litet fantasi kan en sån här animation göra stor förbättring i interaktiva gränssnitt.

CSS Shake
Satt och fnissade litet när jag kollade på det här. :)

Some Ideas for Checkout Effects
Skulle också kunna fungera för bokmärken i en webapp eller till och med menyer.

CSS Vertical Center with Flexbox
Vertikal centrering, gamle vän. Flexbox gör det enklare än display: table-cell åtminstone.

Fun with line-height!
Många inte helt uppenbara knep finns här.

Simple CSS-Only Row and Column Highlighting
Gillar särskilt JavaScript-godiset som får det där att fungera på pekskärmar också. Det är en snippet som går att använda till mycket annat.

Bra CSS¶

Strategies for Keeping CSS Specificity Low
Mycket bra tips här! Mitt eget bidrag är att undvika element-selektorer (för klena) och id-selektorer (för starka): använd istället klasser. Då jag är ett stort fan av SMACSS föredrar jag dessutom .news-header framför .news .header. Jag har också vanans edan många år att värdera min CSS mellan återkommande/grundläggande CSS (hamnar längst upp i Cascade) och utökande/unik CSS (hamnar längst ner i Cascade).

Abusing CSS3’s nth-child selector to invent new ones
Med följande länk i åtanke skadar det inte att dela en länk lik denna! Det här är riktigt fiffigt, fantasifullt och innovativt.

A Vision for Our Sass
Lika relevant för LESS. Jag har själv nyligen bråkat mycket med Sass-kod jag skrev för flera år sedan av den enkla orsaken att jag gick "för långt".

Webbstandarder¶

CSS Level 4 Selectors to Watch Out For
Kommer CSS bli en fara för batteriet på våra telefoner i framtiden? Eller kommer det bli en förbättring, eftersom JavaScript annars används? Återstår att se.

Why we can’t do real responsive images with CSS or JavaScript
Jag har medvetet undvikit allt vad responsive images heter. Det är ett koncept somb ehöver mogna och bottna ner i en konkret teknik som är pålitlig. Jag rekommenderar istället boken Retinafy.me.

Why AJAX Isn’t Enough
Spekulerar litet hur WebSockets kan ta oss dit Ajax inte riktigt når.

5 Ways that CSS and JavaScript Interact That You May Not Know About
Pointer-events är grymt användbart, jag glömmer mellan varven bort att dessa finns.

Little, Big: Using CSS fit-content
fit-content, det bättre alternativet till display: inline-block att bråka med floats.

JavaScript Fetch API in action
Hur Ajax kommer skötas när Promises blir en hit.

Prestanda¶

Weighing SVG Animation Techniques (with Benchmarks)
Prestandan verkar vara en issue för SVG. Jag gillar att det får fokus.

GreenSock | CSS animations performance: the untold story
CSS-animeringar är fortfarande sämre på att utnyttja hårdvaran än att animera med JavaScript. Detta är dock ett bekymmer för webbläsarna, inte oss utvecklare, så jag tänker påbjuda förbättring genom att fortsätta animera med CSS.

At the end of my tether…
Krigshistoria om att försöka få jobbet gjort med enbart Internet från telefonen. Stämmer bra för svenska förutsättningarna också.

Biz¶

Overcast’s 2014 sales numbers
Wow! Det går bevisligen att få till hit-appar fortfarande. Stort tack till Arment som delar med sig.

Do you have to love what you do?
Så jäkla bra! Riktig ögonöppnare, faktiskt. Motivationen och att kämpa mot ett mål man själv förstår är viktigare än att älska det man gör. Det går att vända på det också - det räcker inte att älska det man gör för att få ett jobb att funka. Jag själv har ibland svårt att hitta motivation i uppdrag vars leverans inte är något jag själv förstår nyttan med.

Design¶

typebase.css: The starting point for good typography on the web
Det här har jag letat efter! Helt fantastiskt initiativ som jag personligen ska använda här på bloggen vid nästa redesign.

Tour of a Performant and Responsive CSS Only Site
Till och med jag blev grymt överraskad över vad enbart CSS kan åstadkomma som visat här.

Refreshing Search: Testing Search Box Variations
Tydligen så är det en bred enrads-textruta som folk söker efter först, inte ett förstoringsglas, när de vill söka. Intressant.

Verktyg för design¶

Tint UI
Färger från iOS, Flat UI, Windows, Pantone 2015 och Googles Material Design. Ett klick på en färg kopierar HEX-värdet till utklipp.

PicSvg: Convert Picture to Svg
Ett verktyg för att ta en bild och skapa en Stencilbild i SVG-format. Tackar, tackar!

Font Pair
Interaktiv demo av olika kombinationer från Google Fonts.

För Prototypdriven utveckling¶

Documentation - Materialize
Ännu ett ramverk vars riktiga styrka troligtvis kommer fram vid prototyp-driven utveckling. Baserat på Googles Material Design.

LumX
Angular var från början tänkt att användas för just prototyper. Här är ett komplett kit för ändamålet.

Why I Ditched Angular for React
Den här artikeln, i kombination med det här jämförande prestandatestet där React sopar mattan med Angular och Knockout, gör att jag kan tänka mig att bygga något med React i ett läge där jag måste ta till ett ramverk baserat på reellt kundbehov.

Photoshop? nej, tack!¶

11 tips for prototyping with Sketch
Sketch verkar smidigt. Jag är beredd att testa det för att definitivt stänga av kodaren i mig när jag behöver fundera en stund på design.

Export an Image from Layered Photoshop PSD from Command Line
ImageMagick kan tydligen göra en PNG-export av Photoshopfiler. Ingen mer Spara för webb.

JavaScript¶

Creating Well-Behaved Sites With The Page Visibility API
Det här är bra användningsområden för JavaScript! Sitter själv och klurar på vad jag kan göra för att få hemsidor att må bättre när de ligger i en dold flik.

Strange JavaScript Errors and How to Fix Them
Fusklapp för vanliga fel i JavaScript.

HTML5 Form novalidate
Använder du JavaScript för att validera formulärfält i "specialfall", och funderar på att ta hjälp av HTML5-valideringen? novalidate är i så fall bra att känna till.

Gratis-saker¶

I backspegeln¶

No, the Prediction Was Crazy
Åt helvete xD En artikel från 2011 som förutspår att Microsoft med hjälp av Nokia ska "slå" iPhone under 2015.