deathgrunt - tweakers.net in nightmode...

Door deathgrunt op vrijdag 15 augustus 2014 19:47 - Reacties (10)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 2.229

Lol... tweakers.net in nightmodus! En dat met (letterlijk) één regeltje code...

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
window.wp_app_NightMode = function wp_app_nightMode()
    {
var wp_app_css = '*, #menubar, .scoreButton{background-image:none !important;background-color:#000 !important;color:#999 !important;border-color:#999 !important;}#menuwrapper{opacity: .75 !important;}::selection{background-color:#999 !important;color:#000 !important;}',
wp_app_head = document.head || document.getElementsByTagName('head')[0],
wp_app_style = document.createElement('style');
wp_app_style.type   = 'text/css';
wp_app_style.appendChild(document.createTextNode(wp_app_css));
wp_app_head.appendChild(wp_app_style);      
    }

wp_app_NightMode();


Door bovenstaande code in de console [F12] uit te voeren, of simpelweg de CSS-declaraties in je custom-CSS te zetten, wordt Tweakers vanzelf in nightmode gerenderd.

...

Het is nog in bèta, want Internet Explorer ondersteunt (als enige browser...) niet de CSS-tag "filter:gray(100)", dus afbeeldingen worden helaas nog niet in grayscale gerenderd...

En dat terwijl IE notabene de eerste browser ter wereld was (in 1995) die filters los kon laten op afbeeldingen. Maar sinds IE10 is Microsoft daar van afgestapt en aangezien het grayscale-filter nog niet is goedgekeurd door W3C zijn ze nu de enige die het laten afweten...

"-ms-filter" werkt niet meer in IE10 en IE11 en ik wil niet terugvallen op jQuery of vage SVG-hacks, dus de nightmode is work in progress, maar zeker met een amoled-screen werkt het nu al goed.

...


...

http://deathgrunt.com/img/tweak/apps/tweakers_wp_night_modus.png
- tweakers.net nightmodus op een (clear black) amoled screen -


http://deathgrunt.com/img/tweak/apps/tweakers_wp_night_modus_update.png
- tweakers.net nightmodus update (low contrast) -

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/058f76c6-60dd-43cb-9f39-576cec792f4a?imageType=ws_icon_largeTweakers WP

Al het nieuws van je favoriete site in één
oogopslag op je Windows Phone.

...

deathgrunt - acronymen (html) op een touch-device

Door deathgrunt op dinsdag 12 augustus 2014 13:37 - Reacties (2)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 806

Acroniemen (of beter abbr) in html zijn handig; het is (meestal) een afkorting van een definitie en herkenbaar door een stippellijn onder het woord zelf. Door er even met je muis over heen te bewegen, zie je waar de afkorting voor staat.

Een nadeel van deze 'hover-actie' is dat hij (meestal) niet werkt op touch-devices. Natuurlijk, een Windows-tablet als bijvoorbeeld de Dell Venue 8 Pro kan een 'hover-actie' simuleren (door je vinger iets langer op het scherm te drukken), maar echt cross-platform is dat niet.

Daarom heb ik een Javascriptje geschreven, dat van elke acroniem een interactief element maakt.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var acronymEl = document.getElementsByTagName('acronym');

if(acronymEl.length)
    {
for(var i = 0; i < acronymEl.length; i++)
    {
var acronymTxt = acronymEl[i];

  acronymTxt.onclick = function(e)
    {
  e.preventDefault();
  alert(e.target.innerText.toUpperCase() + ' : ' + e.target.getAttribute('title'));
    }

if(window.console){console.log('acronym fired : ' + acronymTxt.innerText.toUpperCase());}
    }
    }
else
    {
if(window.console){console.log('no acronyms found');}   
    }

Het script werkt eenvoudig; eerst kijkt het of er acroniemen op de pagina aanwezig zijn (de <abbr> tag sla ik in dit voorbeeld even over).

Als er daadwerkelijk acroniemen gevonden worden, dan wordt er een actie aan verbonden waarmee je (door er op te klikken) een alertbox te zien krijgt met daarin de afkorting zelf en de aangekoppelde definitie.

Door bovenstaande code uit te voeren in de console van je browser, zie je (als je deze pagina als voorbeeld neemt) direct of er een acroniem aanwezig is en dat hij vervolgens interactief wordt gemaakt.

...

Als eenmaal bekend is welke acroniemen er zijn en wat hun definitie is, dan kan je er mee doen wat je wilt. Een optie is om in de acronym-tag automatisch een <span> te injecteren, met daarin de volledige definitie. Via css kan je vervolgens zeggen dat die <span> onzichtbaar is, maar bij een ::focus juist zichtbaar. Door met je vinger op de acroniem te drukken, wordt de <span> dan zichtbaar en verdwijnt hij weer als je de focus er af haalt.

<reclame-modus>In mijn eigen Tweakers App heb ik het script gebruikt door er een c# code aan te hangen; door te drukken op een acroniem, trigger je een request naar de app. Die vangt het request af, kijkt wat hij moet doen en toont via een customMessageBox() de definitie van het acroniem.</reclame-modus>

Onderstaande screenshots tonen hoe het in zijn werk gaat; stel je zoekt via de Meuktracker (ja, in de app is die er gewoon nog) naar het programma Wine. Dan kom je via de zoekoptie op de changelog van dat programma terecht en zie je het acroniem API staan. Door er op te drukken, zie je een nette uitleg waar het begrip voor staat.

acroniemen
...

http://cdn.marketplaceimages.windowsphone.com/v8/images/058f76c6-60dd-43cb-9f39-576cec792f4a?imageType=ws_icon_largeTweakers WP

Al het nieuws van je favoriete site in één
oogopslag op je Windows Phone.

...

deathgrunt - iWatch ... 1986

Door deathgrunt op maandag 04 augustus 2014 13:37 - Reacties (5)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.259

Lol... voordat Apple weer begint te roepen dat hun iWatch / iHealth app revolutionair en amazing is (voorzien van een witte achtergrond en foute klassieke piano-muziek)...

Chriet had hem al in 1986 (even skippen naar minuut 1:21 - omdat de embed-tag van 81 seconden hier niet werkt, blijkbaar...).


...
Vraag ik me ineens af; zal Amber geslaagd zijn voor haar tentamen? Haar iWatch sloeg zwart uit...
...

deathgrunt - interfierce [WP]

Door deathgrunt op maandag 21 juli 2014 16:42 - Reacties (2)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.024

Soms maak je een app, waarvan je later denkt... "wáárom?!" Dit is er zo één...
...
http://deathgrunt.com/img/tweak/apps/blog_interfierce.png
...
http://cdn.marketplaceimages.windowsphone.com/v8/images/b3eaf099-a2ab-4efd-a19d-50fc3f431d14?imageType=ws_icon_largeinterfierce

Generate some phone interference sounds.
...
...

...en als ik dan toch aan het pluggen ben...

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/d59c15cd-487a-41c0-8e99-6c2d35c164e7?imageType=ws_icon_largeThe Alphab@

26 (typo-)graphical animations, teaching you the internet... made in 1997.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/fa6c2c3c-e0cb-4f7a-a096-517ac7d578bc?imageType=ws_icon_largeThe Kardashian Tape

View the secret Kardashian tape and share it with all your friends!

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/64955b55-c4a8-4adb-a767-7f083d442a20?imageType=ws_icon_large2IBAN

Zet een regulier rekeningnummer om naar IBAN.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/db5c6a9b-41f6-4774-893d-20675dc49869?imageType=ws_icon_largePurno de Purno

Sapperedosio!
De allereerste Purno De Purno app ter wereld, exclusief op je Windows Phone!

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/058f76c6-60dd-43cb-9f39-576cec792f4a?imageType=ws_icon_largeTweakers WP

Al het nieuws van je favoriete site in één oogopslag op je Windows Phone.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/2f17d5f4-3922-4a17-bbbd-d2f5d149029a?imageType=ws_icon_largeNU | Tech

Het actuele en belangrijkste tech nieuws van NU.nl direct op je Windows Phone.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/abc37fb2-ba90-411a-9007-c2a7bd87c9f4?imageType=ws_icon_largeSuriname Nieuws

Het belangrijkste nieuws uit- en over Suriname in één oogopslag op je Windows Phone

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/5df29e17-913e-45bd-b5ac-410076e88adb?imageType=ws_icon_largeYUIS?! (discontinued...)

A trusted and elegant designed WHOIS look-up tool. See - and share - the most important site information.

...

deathgrunt - The Alphab@ [WP]

Door deathgrunt op dinsdag 08 juli 2014 11:11 - Reacties (7)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.590

In 1996 wilde ik - als eerste Nederlander ooit - afstuderen aan een kunstacademie met een website als eindexamenproject.
...
De docenten die mij moesten begeleiden, hadden geen idee wat internet was. De opleiding (visuele communicatie) had geen internetverbinding. Er werd gedreigd mij van school te sturen en mijn diploma niet uit te reiken.

Om duidelijk te maken wat "het internet" inhield, besloot ik een tweede website te maken; The Alphab@

Aan de hand van 26 (typo-)grafische animaties werden de belangrijkste onderdelen van het internet uitgelegd. Na bemiddeling van een rijksgecommiteerde studeerde ik uiteindelijk in 1997 af.

...

http://deathgrunt.com/img/tweak/apps/blog_the_alphab@.png
...
http://cdn.marketplaceimages.windowsphone.com/v8/images/d59c15cd-487a-41c0-8e99-6c2d35c164e7?imageType=ws_icon_largeThe Alphab@

26 (typo-)graphical animations, teaching you the internet... made in 1997.
...

...
http://deathgrunt.com/img/tweak/apps/the_alphab@_press.png
- het originele persbericht uit 1997 op usenet... sorry voor het taalgebruik -


...