[{"data":1,"prerenderedAt":454},["ShallowReactive",2],{"search-all-posts":3,"settings-global":47,"\u002Fblog\u002F2018-06-11-webkit-naar-watchos-5":70},[4,10,17,23,28,34,39],{"title":5,"description":6,"path":7,"tags":8},"Responsive aspect ratio in CSS","Hoe maak je een responsive aspect ratio in CSS? Een aspect ratio is bijvoorbeeld toepasbaar op afbeeldingen, video’s, placeholders en iframes.","\u002Fblog\u002F2017-04-18-responsive-aspect-ratio-in-css",[9],"CSS",{"title":11,"description":12,"path":13,"tags":14},"Sketch plugin tips voor een snellere workflow","Voor het versnellen van je workflow in Sketch, de digitale ontwerptool voor designers, zijn de volgende plugins interessant.","\u002Fblog\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow",[15,16],"Design","Productiviteit",{"title":18,"description":19,"path":20,"tags":21},"WebKit naar watchOS 5","Tijdens de WWDC 2018 van Apple was er een leuk nieuwtje. WebKit komt naar watchOS. Dit betekent dat je, zodra watchOS 5 uit is, web content kan gaan consumeren!","\u002Fblog\u002F2018-06-11-webkit-naar-watchos-5",[22],"Apple",{"title":24,"description":25,"path":26,"tags":27},"CSS variabelen en preprocessor variabelen","In CSS zijn variabelen er voornamelijk om consistent hergebruikt te worden. De voor- en nadelen.","\u002Fblog\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen",[9],{"title":29,"description":30,"path":31,"tags":32},"Adobe XD en line-height","Als designer & developer werk je met verschillende tools. Hierbij loop je soms tegen dingen aan die je werkproces verstoren. Zo ook bij Adobe XD.","\u002Fblog\u002F2020-04-29-adobe-xd-en-line-height",[33,15],"Adobe",{"title":35,"description":36,"path":37,"tags":38},"Mijn favoriete Mac apps 2022","MacOS en apps, ik zou niet zonder kunnen. Persoonlijk gebruik ik een handje vol apps die wellicht voor jou ook de moeite waard zijn.","\u002Fblog\u002F2022-07-23-mijn-favoriete-mac-apps-2022",[16],{"title":40,"description":41,"path":42,"tags":43},"Shopify en shop munteenheid symbool","Shopify's Liquid shop object met geneste currency object shop.currency.symbol werkt niet. Als workaround kan je het cart object gebruiken.","\u002Fblog\u002F2022-08-07-shopify-en-shop-munteenheid-symbol",[44,45,46],"Shopify","Snippets","Notities",{"id":48,"title":49,"description":50,"extension":51,"github_url":52,"lang":53,"linkedin_url":54,"meta":55,"navigation":56,"noindex":67,"stem":68,"__hash__":69},"settings\u002Fsettings.yaml","Roy","Inspiratie en slimme oplossingen voor Shopify & tech.","yaml",null,"nl","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Froy-van-neden-10549761",{},[57,60,63,65],{"title":58,"to":59},"Home","\u002F",{"title":61,"to":62},"Blog","\u002Fblog",{"title":45,"to":64},"https:\u002F\u002Fgist.github.com\u002Froyvn",{"title":66,"to":54},"LinkedIn",false,"settings","-UwRePwvcv6cIOnnqX6vHLS1vLrRiCvBGOSHiNv7qA0",{"id":71,"title":18,"authors":72,"body":73,"date":445,"description":19,"draft":67,"extension":446,"image":447,"meta":448,"navigation":449,"noindex":67,"path":20,"readingTime":198,"seo":450,"stem":451,"tags":452,"__hash__":453},"posts\u002Fblog\u002F2018-06-11-webkit-naar-watchos-5.md",[49],{"type":74,"value":75,"toc":435},"minimark",[76,80,85,88,91,96,99,144,147,151,158,212,219,247,251,254,257,373,376,380,396,400,403,407,431],[77,78,79],"p",{},"Tijdens de WWDC 2018 van Apple was er een leuk nieuwtje. WebKit komt naar watchOS. Dit betekent dat je, zodra watchOS 5 uit is, web content zoals websites en html-emails kan gaan consumeren op je Apple Watch! De schermruimte op je Apple Watch is voor nu nogal beperkt. Dus wat zijn de mogelijkheden en hoe zal het werken?",[81,82,84],"h2",{"id":83},"hoe-het-werkt","Hoe het werkt",[77,86,87],{},"Als basis zal WebKit op watchOS een website met 320 CSS pixels proberen te weergeven. 320 is qua afmetingen precies de schermbreedte van een iPhone 5s en iPhone SE.",[77,89,90],{},"Bij het laden van een website zal de initial-scale (het zoomniveau wanneer de pagina voor de eerste keer is geladen) automatisch overschreven worden van 1 naar 0.49. De weergave is dan niet meer 320 maar 156 CSS pixels. Op deze manier kan een responsive website, out of the box, weergegeven worden op een Apple Watch.",[92,93,95],"h3",{"id":94},"verdere-optimalisatie","Verdere optimalisatie",[77,97,98],{},"Het is mogelijk om je web content geheel te optimaliseren voor watchOS hiervoor moet je de onderstaande meta tag toevoegen.",[100,101,106],"pre",{"className":102,"code":103,"language":104,"meta":105,"style":105},"language-html shiki shiki-themes github-light github-dark","\u003Cmeta name=\"disabled-adaptations\" content=\"watch\" \u002F>\n","html","",[107,108,109],"code",{"__ignoreMap":105},[110,111,114,118,122,126,129,133,136,138,141],"span",{"class":112,"line":113},"line",1,[110,115,117],{"class":116},"sVt8B","\u003C",[110,119,121],{"class":120},"s9eBZ","meta",[110,123,125],{"class":124},"sScJk"," name",[110,127,128],{"class":116},"=",[110,130,132],{"class":131},"sZZnC","\"disabled-adaptations\"",[110,134,135],{"class":124}," content",[110,137,128],{"class":116},[110,139,140],{"class":131},"\"watch\"",[110,142,143],{"class":116}," \u002F>\n",[77,145,146],{},"Met de meta tag zal WebKit op watchOS de automatische aanpassingen, zoals het schalen naar 0.49, niet doen. Met CSS kan je dan de echte width van de Apple Watch gebruiken. Op dit moment is dat 272 pixels voor de Apple Watch 38mm en 312 pixels voor de Apple Watch 42mm.",[92,148,150],{"id":149},"formulieren","Formulieren",[77,152,153,154,157],{},"De keuze om het invoeren van formulieren te ondersteunen in watchOS is opvallend. Met een klein scherm zou het al snel gepriegel moeten worden. Echter door gebruik te maken van het juiste html ",[107,155,156],{},"type=\"value\""," attribuut wordt het invoeren van data vanaf je Apple Watch makkelijker gemaakt door Apple.",[100,159,161],{"className":102,"code":160,"language":104,"meta":105,"style":105},"\u003Cinput type=\"tel\" \u002F>\n\u003Cinput type=\"date\" \u002F>\n\u003Cselect>\u003C\u002Fselect>\n",[107,162,163,180,196],{"__ignoreMap":105},[110,164,165,167,170,173,175,178],{"class":112,"line":113},[110,166,117],{"class":116},[110,168,169],{"class":120},"input",[110,171,172],{"class":124}," type",[110,174,128],{"class":116},[110,176,177],{"class":131},"\"tel\"",[110,179,143],{"class":116},[110,181,183,185,187,189,191,194],{"class":112,"line":182},2,[110,184,117],{"class":116},[110,186,169],{"class":120},[110,188,172],{"class":124},[110,190,128],{"class":116},[110,192,193],{"class":131},"\"date\"",[110,195,143],{"class":116},[110,197,199,201,204,207,209],{"class":112,"line":198},3,[110,200,117],{"class":116},[110,202,203],{"class":120},"select",[110,205,206],{"class":116},">\u003C\u002F",[110,208,203],{"class":120},[110,210,211],{"class":116},">\n",[77,213,214,215,218],{},"Het gebruik van een ",[107,216,217],{},"aria-label"," was al belangrijk voor mensen met een beperking, maar nu zie je het als niet beperkte gebruiker bij het invoeren terug. Dit komt namelijk linksboven als back button in je scherm te staan.",[100,220,222],{"className":102,"code":221,"language":104,"meta":105,"style":105},"\u003Cinput type=\"email\" aria-label=\"E-mailadres\" \u002F>\n",[107,223,224],{"__ignoreMap":105},[110,225,226,228,230,232,234,237,240,242,245],{"class":112,"line":113},[110,227,117],{"class":116},[110,229,169],{"class":120},[110,231,172],{"class":124},[110,233,128],{"class":116},[110,235,236],{"class":131},"\"email\"",[110,238,239],{"class":124}," aria-label",[110,241,128],{"class":116},[110,243,244],{"class":131},"\"E-mailadres\"",[110,246,143],{"class":116},[92,248,250],{"id":249},"safari-reader","Safari reader",[77,252,253],{},"Zodra een pagina een article tag met content bevat wordt Safari Reader automatisch geactiveerd. Dit is te vergelijken met een soort modus zonder afleiding zoals je die wellicht kent in je browser.",[77,255,256],{},"Witte tekst wordt dan weergegeven op een zwarte achtergrond. Om hier optimaal gebruik van te maken is het vereist om microdata toe te passen.",[100,258,260],{"className":102,"code":259,"language":104,"meta":105,"style":105},"\u003Carticle itemscope itemtype=\"https:\u002F\u002Fschema.org\u002FpostsPosting\">\n  \u003Ch1 itemprop=\"title\">\u003C\u002Fh1>\n  \u003Ch2 itemprop=\"subheading\">\u003C\u002Fh2>\n  \u003Cspan itemprop=\"author\">\u003C\u002Fspan>\n  \u003Cspan itemprop=\"pubdate\">\u003C\u002Fspan>\n\u003C\u002Farticle>\n",[107,261,262,282,304,323,343,363],{"__ignoreMap":105},[110,263,264,266,269,272,275,277,280],{"class":112,"line":113},[110,265,117],{"class":116},[110,267,268],{"class":120},"article",[110,270,271],{"class":124}," itemscope",[110,273,274],{"class":124}," itemtype",[110,276,128],{"class":116},[110,278,279],{"class":131},"\"https:\u002F\u002Fschema.org\u002FpostsPosting\"",[110,281,211],{"class":116},[110,283,284,287,290,293,295,298,300,302],{"class":112,"line":182},[110,285,286],{"class":116},"  \u003C",[110,288,289],{"class":120},"h1",[110,291,292],{"class":124}," itemprop",[110,294,128],{"class":116},[110,296,297],{"class":131},"\"title\"",[110,299,206],{"class":116},[110,301,289],{"class":120},[110,303,211],{"class":116},[110,305,306,308,310,312,314,317,319,321],{"class":112,"line":198},[110,307,286],{"class":116},[110,309,81],{"class":120},[110,311,292],{"class":124},[110,313,128],{"class":116},[110,315,316],{"class":131},"\"subheading\"",[110,318,206],{"class":116},[110,320,81],{"class":120},[110,322,211],{"class":116},[110,324,326,328,330,332,334,337,339,341],{"class":112,"line":325},4,[110,327,286],{"class":116},[110,329,110],{"class":120},[110,331,292],{"class":124},[110,333,128],{"class":116},[110,335,336],{"class":131},"\"author\"",[110,338,206],{"class":116},[110,340,110],{"class":120},[110,342,211],{"class":116},[110,344,346,348,350,352,354,357,359,361],{"class":112,"line":345},5,[110,347,286],{"class":116},[110,349,110],{"class":120},[110,351,292],{"class":124},[110,353,128],{"class":116},[110,355,356],{"class":131},"\"pubdate\"",[110,358,206],{"class":116},[110,360,110],{"class":120},[110,362,211],{"class":116},[110,364,366,369,371],{"class":112,"line":365},6,[110,367,368],{"class":116},"\u003C\u002F",[110,370,268],{"class":120},[110,372,211],{"class":116},[77,374,375],{},"💡\nUpdate: ondertussen wordt het gebruik van JSON-LD aangeraden.",[92,377,379],{"id":378},"interactie","Interactie",[381,382,383,387,390,393],"ul",{},[384,385,386],"li",{},"Scrollen, ook mogelijk met de digital crown",[384,388,389],{},"Swipen",[384,391,392],{},"Tap to zoom",[384,394,395],{},"Edge swipe en firm press (o.a. voor terug en vooruit navigeren)",[81,397,399],{"id":398},"afwachten","Afwachten",[77,401,402],{},"Het is wachten op een definitieve release van watchOS 5.",[81,404,406],{"id":405},"links","Links",[381,408,409,418,425],{},[384,410,411,412],{},"Apple, (2018, 20 juni). Designing Web Content for watchOS. Geraadpleegd op 20 juni 2018, van ",[413,414,415],"a",{"href":415,"rel":416},"https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F239\u002F",[417],"nofollow",[384,419,420,421],{},"Mozilla, (2018, 2 december). Viewport basics. Geraadpleegd op 20 juni 2018, van ",[413,422,423],{"href":423,"rel":424},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FMozilla\u002FMobile\u002FViewport_meta_tag#Viewport_basics",[417],[384,426,427],{},[413,428,429],{"href":429,"rel":430},"https:\u002F\u002Fschema.org\u002Fdocs\u002Fdocuments.html",[417],[432,433,434],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":105,"searchDepth":182,"depth":182,"links":436},[437,443,444],{"id":83,"depth":182,"text":84,"children":438},[439,440,441,442],{"id":94,"depth":198,"text":95},{"id":149,"depth":198,"text":150},{"id":249,"depth":198,"text":250},{"id":378,"depth":198,"text":379},{"id":398,"depth":182,"text":399},{"id":405,"depth":182,"text":406},"2018-06-11T13:00:00.000Z","md","\u002Fwebkit-naar-watchos-5.png",{},true,{"title":18,"description":19},"blog\u002F2018-06-11-webkit-naar-watchos-5",[22],"9jyJtb_1vsFyVOZ-7hy36Jx7ZCXEaITkvkRcp1jQCRk",1780848345657]