. Webdev

battle with code

Fight the evil ogre’s with code and learn some JS along the way. check out codecombat.com

pi project time

ah my raspi finally arrived, so it’s time to tjek the interwebs for usefull stuff and I gues this is link no. 1 http://stevenhickson.blogspot.it/2013/09/raspberry-pi-automatic-video-looper.html

realtime face tracking in JS

Start drawing your darthvader mask and hook it up through svg in javascript in real time. https://github.com/auduno/clmtrackr It shouldn’t be to difficult to hook this up in touchdesigner I’d say

tool of the day: richsnippets

http://www.google.com/webmasters/tools/richsnippets seems to only work in chrome tho..

Flexwerk&ik online now

Time for a little review So it was my first time implementing an iDeal solution, and I have to say it’s not that scary after all. But finding a ready made solution is. I gues there’s room on the market … Continue reading

link update

http://developerexcuses.com http://designjargonbullshit.com http://commitlogsfromlastnight.com enough with the fun, here’s something awesome if you can’t decide which font to use http://typewonder.com

Pirate radio! Comming to a wifi hotspot near you

Mac has had airplay for some time now, but now someone finally made that stuff opensource, so we all can stream our music via wifi. boring site here: magicplay.com repository here: github.com/alljoyn/audio  

img slider

There are tons and tons of sliders out there, but i like this one for various reasons but most of all, it works well with WP without mesing the existing system up to much, which keeps it easy to explain … Continue reading

Posted in Webdev | Tagged | Comments Off on img slider

css hack otd

Using ‘justify’ on boxes to center/divide a horizontal menu. Really only needs a clear (fix) element {width:100%} to work.

Posted in Webdev | Tagged | Comments Off on css hack otd

css hack of the day

When (ab)using inline-block-based layouts, checkout the “white-space” between your elements. You’d might want to fix that by setting your font size font-size: 0.1px; Reducing lineheight, word-spacing or letter-spacing will get you the same result.

I want my @media all and (min-speed: ~1Mbps) {}

Not kidding.. Was just reading about legislators playing catchup on cookies (ET-Tags anyone?) and then reading another article about FOUT and using lazyload cookies to cater for those instances.. So serving ‘low bandwidth’ styles for retina displays whilst conforming to … Continue reading

Posted in Webdev | Comments Off on I want my @media all and (min-speed: ~1Mbps) {}

WAMP pro-tip

So for developing WordPress site locally I’ve been using WAMP over XAMP for a while now. I prefer WAMP because it just starts all services without any hassle. With XAMP there’s a few extra clicks involved. That’s all really, I … Continue reading

Fresh test tool from ie

M$ just released a new testing tool for your websites over @ modern.ie Dunno what is has to do with IrEland tho but I just gave it a spin, and I really like the vendor prefix test it has. It … Continue reading

CSS Specificity

So #id’s should always override .classes right? Well apparently until you go beyond 255 classes it won’t! Check out Cris Coyier’s example over at codepen: http://codepen.io/chriscoyier/pen/lzjqh

With or without

yooouuuuu padding + margin + borders. In other words how to adjust your box-model to include ’em. But you already knew that didn’t didn’t you. *, *:after, *:before {     box-sizing: border-box;  /* or content-box or inherit */     padding: 0;     margin: … Continue reading

The auto F5-er

When you’re in the CSS-zone hitting F5 and praying for a refresh can be a real drag. Well someone finally did some ajaxification for that one. So grab your copy here:  http://cssrefresh.frebsite.nl/


from the ‘stuff you ought to know’ dept: Cross Origin Resource Sharing. So browsers these day’s raise red flags when content is fetched from different places (think API’s), and rightfully so. Still, adding stuff like a twitter feed is a … Continue reading

web fonts

By now everybody’s heard of google’s webfonts. But what I’ve seemed to missed tho was that adobe is doing the same thing these day’s. So go get ’em all @: http://html.adobe.com/edge/webfonts/

Posted in Webdev | Comments Off on web fonts

Responsive zen state

The rounding of percentages in to pixels generally creates hell for responsive layouts in pretty much all browsers. So this guy has an interesting attack vector for getting into that much desired zen like state. So meditate on this piece … Continue reading

search tip

from the I didn’t knew that dept; Add mdc in front of your google search and you’ll get results from the Mozila Doc’s Centre. Ow, and while you’re at it add -w3schools after it. tip from W3Fools.com I wonder what … Continue reading

CSS Animation

Full on Timeline-animation is finally here with step() The W3C isn’t know for being quick about implementing new stuff but this is definitely something I’ve been waiting for. As the functionName() suggests this allows for aniStops between your from{} and … Continue reading

All your data belong to us

They found another un-deletable tracking cookie. This time it’s a method that basically tries every know trick in the book. Including ET-Tags (theoretical until now) and localStorage.

Site speed

-note to self- DON’T use text-shadow with 200px blur. Javascript animations don’t like that. Got me a grade A again with YSlow :D  but found that js minify don’t go well with canvas. Guess I’ll wait for the update…

Developing for mobile

Devving for mobile devices generally revolves around the idea that they have a slow connection to the web and a small screen. The official idea these days is to develop bottom up, so cater for small screens first then load … Continue reading

!cookies but localStorage

Seems to be a buzzword lately so lets put on some rubber gloves and chime in shall we.   function support_test() { try { return ‘localStorage’ in window && window[‘localStorage’] !== null; } catch (e) { return false; } } … Continue reading

winning img placeholders

add some sheen to your design sheenholders.com/ lol via nettuts

CSS media queries

handheld css; @media query Continue reading

evolution of hyperlinks?

NYtimes, the evolution of hyperlinks? Continue reading

35 tips for speed

35 tips on speeding up your site. Continue reading

shadow DOM

my opinion on Glazkov’s shadow DOM Continue reading