lillbra.se

Veckans länktips – 2012-09-09

• Getting started with YSlow – Speed Awareness Month
  Om du inte redan använder YSlow så är det dags nu!
• The Top 10 Javascript MVC Frameworks Reviewed – CodeBrief
  En jämförelse och sammanställning över de vanligaste mvc-ramverken för javascript.
• User Experience Euphemisms | 90 Percent of Everything
  Vad en UX:ar säger och egentligen menar
• Stop Validating Email Addresses With Your Complex Regex – davidcelis.com
  Varför vara så hår i valideringen av e-post är frågan – konfirmationsmejlet borde räcka (via @jenswedin).
• enquire.js – WickyNilliams @ Github
  Js-lib som känner av och reagerar på vilka media-queries som triggas (via @jenswedin).
• Line-height on input elements – jsFiddle
  Problem med att få sökfält/sökknapp lika höga i alla webbläsare? Utgå från detta (via @Micke).
• Adobe’s CSS Shaders Now an Official Web Standard | Webmonkey | Wired.com
  Shaders med bildförvrängningar som 3D-animeringar, färgjusteringar m.m., andra blir en del av en kommande CSS Filter Effects specification (via @Micke).
• ignore the code: Buttons
  En slag för knappars betydelse då kreativiteten ibland kan skena iväg för på touch-devices (via @rogerjohansson).
• HTML5 Async Scripts
  Enkel demosida för hur async-attributet fungerar (via @palleman).

Veckans länktips – 2012-09-02

• HTML5 download Attribute
  “The download attribute allows you to set a separate file download name than the actual link endpoint itself.”
• HTML5 Element Flowchart
  En enkel guide för vilka sektions-element du ska använda när i HTML5 (via @filip).
• Notes on HTML5 accessibility support in IE 10 | The Paciello Group Blog
  Genomgång av tillgängligheten och utseendet hos HTML5 formulär- och mediaelement i IE10 på Windows 8 (via @palleman).
• Responsive images, the picture element and the W3C: This is how you deal with Hixie and WHATWG | Marc Drummond
  Historien om hur responsive images kan komma att standardiseras.
• Vanilla JS
  Det enda javascript-ramverk du behöver
• TaffyDB – The JavaScript Database
  Js-lib för att simulera en databas i webbläsaren (via @lillerik).
• Under the hood: Rebuilding Facebook for iOS
  Historien och bakgrunden till Facebooks nya iOS-app.
• WCAG Cheatsheet
  Äntligen! Varför har ingen kommit på detta tidigare. Smidig lathund för de olika nivåerna inom WCAG (via @palleman).
• Droplings for Mac
  Litet program som “can turn any file on your computer into a branded download page hosted on Dropbox” (via @pereverzev).

99 länktips från våren och sommaren 2012

Den automatiska uppdateringen av länktips från mina bokmärken på Pinboard, har varit avslagen sedan februari. Men nu slår jag igång den igen, så att det åter kommer länktips här på bloggen varje vecka. Och vem vet, kanske skriver jag någon “riktig” artikel då och då också.
Här kommer först de länktips som aldrig kom ut under våren och sommaren – håll till godo!

• Brainfuck beware: JavaScript is after you! | Patricio Palladino
  Så gör du din javascript-kod totalt oläsbar (via @tobiassjosten)
• A JavaScript Security Flaw by Alex MacCaw
  Script-taggar i javascript-strängar kan bli så här fel (via @emilstenstrom).
• Where polyfill came from / on coining the term It was when… – Remy Sharp – Google+ -
  Remy Sharp berättar hur det gick till när ordet polyfill myntades.
• twitter-cldr-js – Twitter @ Github.
  Twitters egna kulturformatering av datum etc i javascript.
• Support for @supports in Firefox Nightly • Cameron McCormack’s blog
  Eldräven är på gång att stöda CSS Conditional Rules Module Level 3.
• Opera Developer News – A hot Opera 12.50 summer-time snapshot
  Opera tar bort sitt o-prefix från css-transform, -transition och -animation.
• Piecon – Pie charts in your favicon
  Litet js-lib för att visa pajdiagram i din favicon!
• Meteor
  Ett webbramverk för realtidsuppdateringar.
• Style Guide – Starbucks
  Starbucks egna (responsive) css-ramverk.
• Travis CI
  “A hosted continuous integration service for the open source community.” (via @mikaellundin)
• An Attempt at Understanding CSS 3D Perspective
  Pedagogisk förklaring av hur perspective i css3 fungerar.
• Triggers click on spacebar key — Gist
  Enkel js-snippet från @icaaq för att få länkar med role=button att bete sig som förväntat.
• The Photoshop Etiquette Manifesto for Web Designers
  Skulle vara underbart om alla ADs och designers kunde följa dessa Photoshop-råd! (via @ptz0n)
• Webkit subpixel aliasing and icon fonts – Woopie Blog
  Om hur du kan använda -webkit-font-smoothing för att snygga till ikoner som är fonter.
• CSS media queries in JavaScript, Part 2 | NCZOnline
  Mer info om hur du hanterar mediaqueries i javascript.
• Dashboards | Android Developers
  Statistik över vilka versioner av Android som är vanligats. ICS har tagit sig ganska bra (via @cryosleepkitten)
• Web Whiteboard
  En enkel webbtjänst när du behöver en digital whiteboard (via @peterkz_swe).
• Vagrant – Virtualized development for the masses.
  Program som gör det enkelt att sätta upp virtuella utvecklingsmiljöer mha VirtualBox (via @ptz0n).
• IFTTT / Pushover Channel
  Skapa push-notiser med IFTTT.
• 28 Modern Fonts for Use in Web Projects – DesignM.ag
  Snygga typsnitt till ditt nästa webbprojekt (via @lifeonmarw).
• Touch Means a Renaissance for Radial Menus – Global Moxie
  Intressant om varför “cirkelmenyer” spås göra comeback och fördelarna med dem.
• Callback Hell
  Skriv snyggare och mer lättläst kod med moduler och bättre namngivning i javascript (via @emilstenstrom).
• Living with HTTPS – ImperialViolet
  Basic men viktig introduktion till saker att tänka på ang https.
• Email Standards Project
  ACID-test för e-post-klienter (!), och de största håller inte hög standard.
• The Badass JavaScript Roundup is Back! – Badass JavaScript
  Länklistor ungefär som mina länktips, men endast med javascript-tips (via @peppelorum).
• Using CSS Sprites to optimize your website for Retina Displays — miekd
  Sprites vägrar att dö… (via @codepo8)
• Graph API Explorer – Facebook Developers
  Enkel men användbar klient för att testa Facebooks Graph API.
• Learning IE8
  Saker som IE8 har som IE7 inte har (via @emilstenstrom).
• Image Layout Algorithm Google Plus – Vjeux
  Så fixar du ett likadant bildgalleri som Google+ m javascript (via @emilstenstrom).
• WhatFont Tool – The easiest way to inspect fonts in webpages « Chengyin Liu
  What the Font? Browser extension tells what font was used, and from which web font service (via @zeldman).
• Seamless iframes: The future, today!
  Bra presentation om hur Disqus har använt seamless-attributet i HTML5 för iframes och fallback för detta.
• The Elements Of The Mobile User Experience – Smashing Mobile | Smashing Mobile
  Lång artikel om informationsstruktur och annan UX för mobiler (via @samuelericson).
• Mozilla Marketplace Animated Buttons
  Snyggare animerade knappar med css (via @madr).
• The open/closed principle applied to CSS — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
  Tankar och diskussioner som får dig att skriva bättre (oo)css (via @madr).
• skrollr – Prinzhorn
  Nice! “Stand-alone parallax scrolling library with zero dependencies.” (via @madr)
• The Nifty MiniDrive by niftydrives — Kickstarter
  Ett snyggt sätt att få in mer minne i din Macbook eller Macbook Air.
• JavaScript for Assholes – by Thomas S. Bradford
  En e-bok som lär dig grundläggande javascript-programmering och fult språk. Lär dig t.ex. att skriva “Your First Shitty Program” (via @peppelorum).
• App Icon Template
  Photoshop-mall för när du ska göra en egen app-ikon (via @m_malmstedt).
• A/B Testing with Google Analytics Content Experiments | Cardinal Path Blog
  Om de nya funktionerna i GA för att köra ab-testning. Kraftfull! (via @axbom)
• Asynchronous programming and continuation-passing style in JavaScript
  En bra introduktion till hur du skriver kod CPS-style istället för sekventiellt (via @palleman)
• Geohash – geohash.org
  System och tjänst för att göra url:er av koordinater (via @kalahl)
• Twitter Engineering: Improving performance on twitter.com
  Twitter skippar äntligen hasbangs (#!) och beskriver hur de fått bättre prestanda med modules i javascript.
• Writing Modular JavaScript With AMD, CommonJS & ES Harmony
  Så skriver du äkta modulära javscript. En överblick över olika ramverk och nästa version av ECMAScript.
• The Evil Side of Google? Exploring Google’s User Data Collection | SEOmoz
  Lista över all data Google har, eller vill ha, om dig (via @patricjansson).
• Zombie.js
  “Insanely fast, headless full-stack testing using Node.js” (via @mahvne).
• deploying a django app to heroku with easy static files on s3
  Bra guide till hur du sätter upp din Django-app på Heroku (via @peppelorum).
• A New Take on Responsive Tables by ZURB
  Smidigt js-lib som tar hand om visning av tabeller på små skärmar på ett snyggt sätt (via @jenswedin).
• Conditional Resources | Gray Ghost Visuals Press
  Ladda in bilder/scripts osv beroende på vilken media-query som gäller just nu på sidan mha Modernizr.
• Adactio: Journal—Conditional CSS
  Ett annat sätt att kolla med javascript vilken media-query som gäller just nu på sidan (via @piira).
• Arrrows – A Fully Scalable Icon Font For Your Design
  Alla pilikoner du någonsin kommer att behöva.
• Flask (A Python Microframework)
  Ett lättviktigt python-ramverk. Som alternativ till Django? (via @madr)
• html5shiv and Serving Content From Code Repositories | Zoompf
  Om varför du inte ska direktlänka in js-filer från Google Code, läs även kommentarerna.
• cdn js – the missing cdn
  Ett cdn för många olika js-bibliotek, inte bara jQuery som Google och MS har (@via micke)
• HTML9 Responsive Boilerstrap JS
  “9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.”
• Brain.js: Neural Networks In JavaScript – Badass JavaScript
  Artificiell intelligens med javascript (via @urvader)!
• Bricss – Easily checking in JavaScript if a CSS media query has been executed
  Så kollar du enkelt med javascript vilken media-query som gäller just nu på sidan.
• Futurico UI HTML – Free User Interface Elements for Developers – DesignModo
  Riktigt snyggt css/html-paket med snygga utseenden på vanligt förekommande interaktionselement (via @osserpse).
• Fler imponerande css3-effekter, denna gång för menyer (via @robertnyman).
  Fler imponerande css3-effekter, denna gång för menyer (via @robertnyman).
• CSS WG Blog
  Följ W3Cs arbete med utveckling av css-standarderna via deras egna blogg.
• Make the web Fast(er), one Rails app at a time
  Presentation från Google-anställd om hur dom och vi kan göra webben snabbare (via @emilstenstrom).
• Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap | 456 Berea Street
  Bra artikel om hur du ska hantera radbrytningar i css mha word-wrap and hyphens.
• Polyfills For The Pragmatist
  Jättebra presentation om polyfills – syftet, användandet, genomgång av de vanligaste, gotchas osv osv (via @paul_irish).
• VIM Adventures
  Lär dig VIM när du spelar detta spel.
• Touch Gesture Reference Guide – LukeW
  Översikt och arbetsmaterial för vilka touch-gester som finns, och hur de bör fungera i din app (via @lifeonmarw).
• stroll.js – CSS3 Scroll Effects
  Imponerande scroll-effecter gjorda med endast css! (via @robertnyman)
• Unsuitable Image Formats for Websites | Zoompf
  1% av alla bilder på webben är _inte_ jpg, gif eller png (via @palleman).
• Longitude SCSS Grid
  “A responsive, mobile first, unobtrusive SCSS grid!” (via @peter_lind)
• Startups: Why are front end developers so high in demand at startups if front end development is relatively easier than other fields of engineering? – Quora
  Är det enklare att vara front-end-utvecklare än backend?
• sisyphus.js – simsalabim @ Github
  Ett jquery-plugin som sparar en draft av det användaren skriver in i ett stort formulär i localStorage, om användaren skulle bli avbruten eller råka stänga fliken.
• Creating a Mobile-First Responsive Web Design – HTML5 Rocks
  En kom-igång-guide när du ska göra din första mobile-first.
• foresight.js – adamdbradley @Github
  “tell if the user’s device is capable of viewing high-resolution [...] Additionally, it judges if the user’s device currently has a fast enough network connection for high-resolution images” (via @jenswedin).
• Free Icons Set designed by Brankic1979 – Free psd
  Mer ikoner! Enkla. Snygga. (via @emilcardell)
• Vertical centering with Flexbox + margin fallback ✿ dabblet.com
  The CSS holy grail: Vertical centering Flexbox + graceful degradation with good ol’ margins. (via @ze7en)
• Uniform – Sexy forms with jQuery
  Ännu ett plugin för att skapa snyggare formulär.
• Media Query & Asset Downloading Results | TimKadlec.com
  Bra genomgång av hur du serverar stora bilder endast till de klienter som ska ha dem. Att sätta display:none räcker som sagt inte – webbläsarna laddar hem filen ändå (via @madr).
• 20 Useful jQuery Plugins for Responsive Web Design – DesignModo
  Lista på plugins som kan hjälpa dig när du gör responsive.
• Responsive Layouts, Responsively Wireframed
  Exempel på hur man kan göra dynamiska wireframes för att visa hur en responsive sajt agerar.
• Word wrapping/hyphenation using CSS – Kenneth Auchenberg
  Den säkraste lösningen på rad-brytningar mitt i långa ord mha css.
• Html Agility Pack
  Enklaste sättet att parsa och manipulera html i .net?
• Another CSS image replacement technique – Nicolas Gallagher
  Ett bättre sätt att köra image replacement, istället för klassiska text-indent. Används i HTML5 Boilerplate.
• About normalize.css – Nicolas Gallagher
  “a modern, HTML5-ready, alternative to the traditional CSS reset”
• Remove Native “Inspect Element” Context Menu in Firefox 10 | Social Couch
  Så får du bort FF egna meny-alternativ, så du slipper förväxla det med Firebug (via @henrikekelof).
• Codiqa – the jQuery Mobile Prototype Builder
  Verktyg för att rita snabba protoyper för (jquery) mobil-appar (via @peterrosdahl).
• LukeW | Multi-Device Layout Patterns
  En översikt över olika strategier för layouten vid responsive design (via @peterrosdahl).
• HTML5 drag and drop asynchronous multi file upload with ASP.NET WebAPI | StrathWeb
  Så fixar du filuppladdning via webbläsaren mha js och .net (via @jacobhama).
• Why your ‘Skip to Content’ link might not work « WhatIsDamon
  Oj, det här var en överraskning… se till att fixa dina skip-links (via @madr).
• Font Awesome, the iconic font designed for use with Twitter Bootstrap
  Enkla snygga ikoner, designade speciellt för bootstrap (via @madr).
• check.rdfa
  En RDF-validator (via @madr).
• Content Folding | CSS-Tricks
  Exempel på hur man kan strukturera om ordningen på element vid responsive desigen mha css regions.
• We need a standard show navigation icon for responsive web design | Stuff & Nonsense
  Tre linjer verkar bli ikonen som symboliserar en meny på mobiler och andra mindre devices.
• Kicksend/mailcheck
  “jQuery plugin that suggests a right domain when your users misspell it in an email address”. Hjälper dina användare att skriva in rätt e-post.
• Hammer.js — A javascript library for multi touch gestures
  “easy implementation of touch events in your website”, väger endast 2kb! (via @robertpiira)
• WAI-ARIA for those who have no time to lose
  Snabbintro till wai-aria. Läs även mitt inlägg om det här på bloggen. (via @icaaq)
• Firebug Tip: What font-family is rendered?
  Litet firebug-plugin för att se vilket typsnitt som faktiskt rendreras (via @henrikekelof).
• Replacing the -9999px hack (new image replacement) – Jeffrey Zeldman Presents The Daily Report
  Ännu en variant på image replacement (via @ekelof).
• ImageOptim — all image compression tools in one Mac app
  Litet program som komprimerar bilder – för mindre filstorlekar på din webbsajt (via @henrikekelof)
• Fluqi – Ease using jQuery UI with ASP.NET and ASP.NET MVC
  Litet js-lib för att skapa upp jquery UI-kontroller direkt från javascript, utan att de först finns i markup.
• Tower.js – Full Stack JavaScript Framework for Node.js and the Browser
  Allt du behöver för en webapp i node, från databas till css inkl testramverk (via @peppelorum).
• ThoughtFarmer is Turnkey Social Intranet Software
  Bästa produkten för det sociala intranätet? (via @peterkz_swe)