Sinds voorjaar 2013 werkt de v1.0 versie van de standaard Twitter Widget niet meer.

De oude widget was gemaakt in JavaScript, en voegde elementen toe aan de geladen pagina. Het was makkelijk hier styling voor toe te voegen, je kon het gewoon aan de stylesheet van de pagina toevoegen.

Met de nieuwe widget, die de nieuwe API gebruikt, werkt dat niet meer. Het is nog steeds gemaakt in JavaScript, maar het genereert een iframe. En styleregels in de standaard stylesheet hebben geen effect op een iframe.

Toch kun je een stylesheet toevoegen aan een iframe, en dat heb ik ook gedaan. Het is beschikbaar als download. Alles wat je hoeft te doen is de locatie van de stylesheet aan te passen. Je kunt het dan toevoegen aan de pagina layout. Het heeft wel jQuery nodig.

Mocht je de stylesheet bewerken, en toch verversen bij F5, open dan de stylesheet zelf in een tabblad van de browser, en ververs deze mbv. F5, zodat de cache van de browser ververst is.

Onder de nieuwe naam Picture Time heb ik mijn photo album opnieuw uitgegeven.

Download hem hier: Picture Time

Er is veel te doen over responsive design, een techniek om websites vorm te geven voor oa. een mobiele telefoon. Of een televisie. Of een koelkast.
Op mijn werk werken we vooral met de max-width media query.

Bij een mobiele telefoon zijn er verschillende besturingssystemen en browsers, en een pixel schermbreedte (hardware) is niet hetzelfde als een css pixel. Om dit simpel toonbaar te maken, en zo te testen welk apparaat welke viewport heeft, heb ik een scriptje geschreven. Het geeft gewoon aan wat de breedte is van het scherm in css-pixels.

Van het script is hier de uitvoer te bekijken. Ook de broncode is beschikbaar.