Responzivní image mapa? Nečekaný oříšek

Image-map je docela dost stará záležitost. V podstatě jde o to buďto určit souřadnice kliknutí na obrázek (server-side - parametr ismap pro html tag img) nebo, běžnější použití, přiřadit určitým částem obrázku odkaz (client-side - html tag map). Udělat správnou imagemapu nebylo nikdy jen tak a buďto to chtělo opravdu dobrou představivost, nebo schopný nástroj. Nikdo je neměl nikdy myslím moc rád. A co teprve, když se takový relikt minulosti střetne s posledními webovými trendy - konkrétně s responzivitou? No to je pak prů.. problém. Když pěkně stylem zmenšíte obrázek, nemáte jak automaticky přepočítat souřadnice mapy.

Samozřejmě jako na všechny neřešitelné html/css problémy najdete řešení celkem rychle:

1. Na image map fungující v responzivitě existují pluginy, třeba:
   jQuery RWD Image Maps
   Image Map Resize
   
2. Teoreticky by šly zadat souřadnice v mapě procentuálně (což při úpravě stávající image mapy znamená nějak sofistikovaně přepočítat), ale to prý stejně nefunguje všude.
3. Našel jsem i nějaké css3 řešení, které ale kdoví jak kde funguje.

Osobně bych ale doporučil mapu nezmenšovat a nechat ji scrollovat. Na to malé se stejně nedá trefit, takže je to vlastně nepoužitelné.

Animovaná Ajax Loading ikona v SVG?

Scalable Vector Graphics - SVG - oslavilo (-a?) nedávno 15. narozeniny a pět let je už "dospělé". Dosud ale není v prohlížečích plně podporováno (viz Can I use... svg) a třeba u Googlu z Chrome výpárávají již zabudovanou podporu animací SMIL (také Can I use... svg-smil).

A přitom právě "samochodná" animace je užitečná třeba pro animované ikony pro Ajax loader. Můžete si je vygenerovat třeba na webu loading.io - Your SVG + GIF Ajax Loading Icons (ano, tam získáte i CSS a GIF verze), nebo na SVG Loaders - Sam Herbert potažmo GitHub - SamHerbert/SVG-Loaders: Loading icons and small animations built with SVG and CSS, kde jsou fakt sexy kousky. Další zdroje nabízí Best CSS-SVG Loaders and Spinners na Code Geekz.

Síla použití těchto ikon se projeví při vložení do css jako "data:image".

Ale co je to vlastně platné, když Chrome 45 a Opera 32 animace SMIL neschvaluje, zatím jen stížností v konzoli. Ať to takto zůstane dlouho. ;-)

Co když se Windows sami probouzí?

Otravovat uživatele samovolným probouzením počítačů s Windows 10 je zřejmě pro Microsoft velmi zábavné. Měl jsem zato, že vloni jsem se této ohavné vlastnosti zbavil. Viz Marenkův bloček: Co když se Windows sami probouzí? Ale ne, "seriál" pokračuje.

Tentokrát powercfg /lastwake vypsal do cmd:

Wake History Count - 1Wake History [0]
  Wake Source Count - 1
  Wake Source [0]
    Type: Wake Timer
    Owner: [SERVICE] \Device\HarddiskVolume2\Windows\System32\svchost.exe (SystemEventsBroker)
    Owner Supplied Reason: Systém Windows provede naplánovanou úlohu Maintenance Activator, která vyžádala probuzení počítače.

Snažil jsem se dohledat inkriminovanou komponentu zase v Plánovači úloh. Marně. Potom jsem se pokusil změnit nastavení automatické údržby podle Automatic Maintenance - Change Settings in Windows 10 - Windows 10 Forums. V českých Windows jde o panel Zabezpečení a údržba a v něm Změnit nastavení údržby položky Automatická údržba.

Tady jsem ale našel povolení už vypnuté.

Pak jsem ještě našel na Windows keep waking itself from sleep : Windows10 zmínku nastavení samotného profilu napájení (Možnosti napájení - Upřesnit nastavení).

Zakázal jsem tedy časovače pro probouzení a uvidíme, kdy mě zase v noci neočekávaně probuzený počítač vytočí tak, že této obskurní problematice budu věnovat další hodiny svého života. :-(

Theremin v prohlížeči i telefonu

Theremin (teremin) je podivný elektronický hudební nástroj, který vynalezl v roce 1919 Lev Sergejevič Těrmen. Jeho zvuk zná každý, i když třeba ani neví, že jej vydává právě theremin. Hojně se používá "u filmu", ale zaslechnete ho napříč všemi hudebními žánry. Osud samotného vynálezce je tak zajímavý, že o něm vznikla i divadelní hra Teremin. Luke Phillips alias Femur pro změnu připravil on-line Theremin v JavaScriptu. Najdete jej také na stránce Chrome Experiments - Theremin by Luke Phillips a jsou dostupné i zdrojáky na GitHub - lukephills/Theremin: Browser based Theremin emulator using web audio, react and typescript. Femur upravil theremin i pro iPhone/iPad. Pěknou zábavu a pevné nervy rodině a sousedům. ;-)

embedresponsively.com zresponzivní i nezresponzivnitelné

Responzivní, tedy velikosti obrazovky přizpůsobivý web je dnes samozřejmostí (i když výjimky jsou povoleny). Základem jsou správně napsané CSS pro správně poskládané HTML. Jsou ale elementy, které standardním HTML konstrukcím a CSS definicím odolávají. Těmi jsou hlavně vložené (embed) externí kódy s elementem iframe. S jejích zvládnutím vám pomůže embedresponsively.com. Vygeneruje vám kód pro YouTube, Vimeo, Dailymotion, Google Maps, Instagram, Vine, Getty Images a pár dalších služeb. Princip je celkem jednoduchý a určitě se jím dá inspirovat obecně.

A jak to vypadá? Například pro ukázkové YouTube video http://youtube.com/watch?v=QILiHiTD3uc, které je Blogger vloží takto...

...vygeneruje embedresponsively.com kód...

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>


...což vypadá takto...

Ono to tu tak úplně nevyzní, ale v reálu se to jeví velmi zajímavě! :-)