[{"data":1,"prerenderedAt":1559},["ShallowReactive",2],{"search-all-posts":3,"settings-global":47,"tag-posts-apple":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",[71,352,507,862,1226,1379,1445],{"id":72,"title":5,"authors":73,"body":74,"date":343,"description":6,"draft":67,"extension":344,"image":345,"meta":346,"navigation":347,"noindex":67,"path":7,"readingTime":130,"seo":348,"stem":349,"tags":350,"__hash__":351},"posts\u002Fblog\u002F2017-04-18-responsive-aspect-ratio-in-css.md",[49],{"type":75,"value":76,"toc":339},"minimark",[77,98,103,106,117,158,253,257,335],[78,79,80,81,85,86,89,90,93,94,97],"p",{},"Een responsive aspect ratio creëer je met percentages ",[82,83,84],"code",{},"padding-top"," of ",[82,87,88],{},"padding-bottom",". Een percentage ",[82,91,92],{},"height"," is gebaseerd op de ",[82,95,96],{},"width"," van je div. Volledig responsive dus zodra je scherm klein wordt.",[99,100,102],"h2",{"id":101},"voorbeeld","Voorbeeld",[78,104,105],{},"In dit voorbeeld passen we een aspect ratio van 4:3 toe.",[78,107,108,109,112,113,116],{},"Zodra je ",[82,110,111],{},"padding-bottom: 100%;"," toepast heb je een 1:1 verhouding. Vanuit hier werk je naar de andere verhoudingen toe. Voor 4:3 is dat dan ",[82,114,115],{},"padding-bottom: 75%;",".",[118,119,124],"pre",{"className":120,"code":121,"language":122,"meta":123,"style":123},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"aspect-ratio aspect-ratio--4x3\">\u003C\u002Fdiv>\n","html","",[82,125,126],{"__ignoreMap":123},[127,128,131,135,139,143,146,150,153,155],"span",{"class":129,"line":130},"line",1,[127,132,134],{"class":133},"sVt8B","\u003C",[127,136,138],{"class":137},"s9eBZ","div",[127,140,142],{"class":141},"sScJk"," class",[127,144,145],{"class":133},"=",[127,147,149],{"class":148},"sZZnC","\"aspect-ratio aspect-ratio--4x3\"",[127,151,152],{"class":133},">\u003C\u002F",[127,154,138],{"class":137},[127,156,157],{"class":133},">\n",[118,159,163],{"className":160,"code":161,"language":162,"meta":123,"style":123},"language-css shiki shiki-themes github-light github-dark",".aspect-ratio {\n  width: 100%;\n  height: 0;\n  background-color: red;\n}\n.aspect-ratio.aspect-ratio--4x3 {\n  padding-bottom: 75%;\n}\n","css",[82,164,165,173,193,206,219,225,233,248],{"__ignoreMap":123},[127,166,167,170],{"class":129,"line":130},[127,168,169],{"class":141},".aspect-ratio",[127,171,172],{"class":133}," {\n",[127,174,176,180,183,186,190],{"class":129,"line":175},2,[127,177,179],{"class":178},"sj4cs","  width",[127,181,182],{"class":133},": ",[127,184,185],{"class":178},"100",[127,187,189],{"class":188},"szBVR","%",[127,191,192],{"class":133},";\n",[127,194,196,199,201,204],{"class":129,"line":195},3,[127,197,198],{"class":178},"  height",[127,200,182],{"class":133},[127,202,203],{"class":178},"0",[127,205,192],{"class":133},[127,207,209,212,214,217],{"class":129,"line":208},4,[127,210,211],{"class":178},"  background-color",[127,213,182],{"class":133},[127,215,216],{"class":178},"red",[127,218,192],{"class":133},[127,220,222],{"class":129,"line":221},5,[127,223,224],{"class":133},"}\n",[127,226,228,231],{"class":129,"line":227},6,[127,229,230],{"class":141},".aspect-ratio.aspect-ratio--4x3",[127,232,172],{"class":133},[127,234,236,239,241,244,246],{"class":129,"line":235},7,[127,237,238],{"class":178},"  padding-bottom",[127,240,182],{"class":133},[127,242,243],{"class":178},"75",[127,245,189],{"class":188},[127,247,192],{"class":133},[127,249,251],{"class":129,"line":250},8,[127,252,224],{"class":133},[99,254,256],{"id":255},"andere-aspect-ratio","Andere aspect ratio",[118,258,260],{"className":160,"code":259,"language":162,"meta":123,"style":123},".aspect-ratio.aspect-ratio--4x1 {\n  padding-bottom: 25%;\n}\n.aspect-ratio.aspect-ratio--4x2 {\n  padding-bottom: 50%;\n}\n.aspect-ratio.aspect-ratio--4x6 {\n  padding-bottom: 150%;\n}\n",[82,261,262,269,282,286,293,306,310,317,330],{"__ignoreMap":123},[127,263,264,267],{"class":129,"line":130},[127,265,266],{"class":141},".aspect-ratio.aspect-ratio--4x1",[127,268,172],{"class":133},[127,270,271,273,275,278,280],{"class":129,"line":175},[127,272,238],{"class":178},[127,274,182],{"class":133},[127,276,277],{"class":178},"25",[127,279,189],{"class":188},[127,281,192],{"class":133},[127,283,284],{"class":129,"line":195},[127,285,224],{"class":133},[127,287,288,291],{"class":129,"line":208},[127,289,290],{"class":141},".aspect-ratio.aspect-ratio--4x2",[127,292,172],{"class":133},[127,294,295,297,299,302,304],{"class":129,"line":221},[127,296,238],{"class":178},[127,298,182],{"class":133},[127,300,301],{"class":178},"50",[127,303,189],{"class":188},[127,305,192],{"class":133},[127,307,308],{"class":129,"line":227},[127,309,224],{"class":133},[127,311,312,315],{"class":129,"line":235},[127,313,314],{"class":141},".aspect-ratio.aspect-ratio--4x6",[127,316,172],{"class":133},[127,318,319,321,323,326,328],{"class":129,"line":250},[127,320,238],{"class":178},[127,322,182],{"class":133},[127,324,325],{"class":178},"150",[127,327,189],{"class":188},[127,329,192],{"class":133},[127,331,333],{"class":129,"line":332},9,[127,334,224],{"class":133},[336,337,338],"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);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":123,"searchDepth":175,"depth":175,"links":340},[341,342],{"id":101,"depth":175,"text":102},{"id":255,"depth":175,"text":256},"2017-04-18T11:00:00.000Z","md","\u002Fresponsive-aspect-ratio-in-css.png",{},true,{"title":5,"description":6},"blog\u002F2017-04-18-responsive-aspect-ratio-in-css",[9],"GlvmrepYu8muYmdmyS5HU5BHMtBInC9VKKFJx-Uwdy0",{"id":353,"title":11,"authors":354,"body":355,"date":500,"description":12,"draft":67,"extension":344,"image":501,"meta":502,"navigation":347,"noindex":67,"path":13,"readingTime":175,"seo":503,"stem":504,"tags":505,"__hash__":506},"posts\u002Fblog\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow.md",[49],{"type":75,"value":356,"toc":493},[357,368,372,375,386,393,397,406,410,417,421,430,433,440,444,447,461,470,477,481,484,486],[78,358,359,360,367],{},"Voor het versnellen van je workflow in ",[361,362,366],"a",{"href":363,"rel":364},"https:\u002F\u002Fwww.sketch.com\u002F",[365],"nofollow","Sketch",", de digitale ontwerptool voor designers, zijn de volgende plugins interessant.",[99,369,371],{"id":370},"sketch-runner","Sketch Runner",[78,373,374],{},"Met de plugin Sketch Runner kan je snel rond Sketch navigeren en acties uitvoeren die je tijd besparen. Met een zoekinterface voer je commando’s uit zonder dat je een muis hoeft te gebruiken.",[78,376,377,378,381,382,385],{},"Met de combinatie ",[82,379,380],{},"CMD"," + ",[82,383,384],{},"'"," en tab voer je acties uit zoals run, goto, insert, create, apply en install. Plugins kan je ook vanuit daar beheren.",[78,387,388],{},[361,389,392],{"href":390,"rel":391},"https:\u002F\u002Fwww.sketchrunner.com\u002F",[365],"Download Sketch Runner",[99,394,396],{"id":395},"sketch-relabel-button","Sketch Relabel Button",[78,398,399,400,381,402,405],{},"De plugin Sketch Relabel Button doet wat de naam al aangeeft. Met de toetsencombinatie ",[82,401,380],{},[82,403,404],{},"J"," pas je gemakkelijk het label van een button aan. Na bewerking is bijvoorbeeld de padding van je button automatisch aangepast. Bespaart bij meerdere iteraties een hoop tijd!",[407,408],"video",{"src":409,"poster":123,"loop":347,"autoPlay":347,"muted":347,"playsInline":347,"controls":347},"\u002Fsketch-craft-plugin-voorbeeld.mp4",[78,411,412],{},[361,413,416],{"href":414,"rel":415},"https:\u002F\u002Fgithub.com\u002Fkenmoore\u002Fsketch-relabel-button",[365],"Download Sketch Relabel Button",[99,418,420],{"id":419},"sketch-measure","Sketch Measure",[78,422,423,424,429],{},"Om een design te vertalen naar het ontwikkelteam is het nodig om afmetingen en meer duidelijk te maken. Mocht je niet gebruik kunnen maken van tools zoals bijvoorbeeld ",[361,425,428],{"href":426,"rel":427},"https:\u002F\u002Fmaterial.io\u002Ftools\u002Fgallery\u002F",[365],"Gallery"," van Google, die dit automatisch voor je doet, dan is Sketch Measure een goede optie. Via het plugin menu kan je verschillende richtlijnen maken waarbij jij en anderen specificaties kunnen aflezen.",[407,431],{"src":432,"poster":123,"loop":347,"autoPlay":347,"muted":347,"playsInline":347,"controls":347},"\u002Fsketch-measure-plugin-voorbeeld.mp4",[78,434,435],{},[361,436,439],{"href":437,"rel":438},"https:\u002F\u002Futom.design\u002Fmeasure\u002F",[365],"Download Sketch Measure",[99,441,443],{"id":442},"stark","Stark",[78,445,446],{},"Klaar met een ontwerp? Hoe ziet je ontwerp er voor kleurenblinden uit? Sketch heeft hiervoor ook een plugin, genaamd Stark. Met deze tool kan je visueel meerdere soorten kleurenblindheid testen.",[448,449,450,451,450,457],"figure",{},"\n  ",[452,453],"img",{"src":454,"alt":455,"loading":456},"\u002Fsketch-stark-plugin-voorbeeld-opties.png","Sketch stark plugin voorbeeld opties","lazy",[458,459,460],"figcaption",{},"Voorbeeld opties",[448,462,450,463,450,467],{},[452,464],{"src":465,"alt":466,"loading":456},"\u002Fsketch-stark-plugin-voorbeeld-protanopia.png","Sketch stark plugin voorbeeld protanopia",[458,468,469],{},"Protanopia weergave",[78,471,472],{},[361,473,476],{"href":474,"rel":475},"https:\u002F\u002Fwww.getstark.co\u002F",[365],"Download Stark",[99,478,480],{"id":479},"craft","Craft",[78,482,483],{},"Craft bevat meerdere handige tools van InVision in één plugin. Zo is het mogelijk om delen van je design te dupliceren\u002Fbeheren. Ook kan je willekeurige foto’s en verschillende soorten teksten genereren.",[407,485],{"src":409,"poster":123,"loop":347,"autoPlay":347,"muted":347,"playsInline":347,"controls":347},[78,487,488],{},[361,489,492],{"href":490,"rel":491},"https:\u002F\u002Fwww.invisionapp.com\u002Fcraft",[365],"Download Craft",{"title":123,"searchDepth":175,"depth":175,"links":494},[495,496,497,498,499],{"id":370,"depth":175,"text":371},{"id":395,"depth":175,"text":396},{"id":419,"depth":175,"text":420},{"id":442,"depth":175,"text":443},{"id":479,"depth":175,"text":480},"2018-04-21T13:00:00.000Z","\u002Fsketch-plugin-tips-voor-een-snellere-workflow.jpg",{},{"title":11,"description":12},"blog\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow",[15,16],"PipoZjQ9nhMoALSCWBIOqjWTw7vvq-xC8Ytk2udi6kk",{"id":508,"title":18,"authors":509,"body":510,"date":855,"description":19,"draft":67,"extension":344,"image":856,"meta":857,"navigation":347,"noindex":67,"path":20,"readingTime":195,"seo":858,"stem":859,"tags":860,"__hash__":861},"posts\u002Fblog\u002F2018-06-11-webkit-naar-watchos-5.md",[49],{"type":75,"value":511,"toc":845},[512,515,519,522,525,530,533,564,567,571,578,628,635,663,667,670,673,786,789,793,809,813,816,820,842],[78,513,514],{},"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?",[99,516,518],{"id":517},"hoe-het-werkt","Hoe het werkt",[78,520,521],{},"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.",[78,523,524],{},"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.",[526,527,529],"h3",{"id":528},"verdere-optimalisatie","Verdere optimalisatie",[78,531,532],{},"Het is mogelijk om je web content geheel te optimaliseren voor watchOS hiervoor moet je de onderstaande meta tag toevoegen.",[118,534,536],{"className":120,"code":535,"language":122,"meta":123,"style":123},"\u003Cmeta name=\"disabled-adaptations\" content=\"watch\" \u002F>\n",[82,537,538],{"__ignoreMap":123},[127,539,540,542,545,548,550,553,556,558,561],{"class":129,"line":130},[127,541,134],{"class":133},[127,543,544],{"class":137},"meta",[127,546,547],{"class":141}," name",[127,549,145],{"class":133},[127,551,552],{"class":148},"\"disabled-adaptations\"",[127,554,555],{"class":141}," content",[127,557,145],{"class":133},[127,559,560],{"class":148},"\"watch\"",[127,562,563],{"class":133}," \u002F>\n",[78,565,566],{},"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.",[526,568,570],{"id":569},"formulieren","Formulieren",[78,572,573,574,577],{},"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 ",[82,575,576],{},"type=\"value\""," attribuut wordt het invoeren van data vanaf je Apple Watch makkelijker gemaakt door Apple.",[118,579,581],{"className":120,"code":580,"language":122,"meta":123,"style":123},"\u003Cinput type=\"tel\" \u002F>\n\u003Cinput type=\"date\" \u002F>\n\u003Cselect>\u003C\u002Fselect>\n",[82,582,583,600,615],{"__ignoreMap":123},[127,584,585,587,590,593,595,598],{"class":129,"line":130},[127,586,134],{"class":133},[127,588,589],{"class":137},"input",[127,591,592],{"class":141}," type",[127,594,145],{"class":133},[127,596,597],{"class":148},"\"tel\"",[127,599,563],{"class":133},[127,601,602,604,606,608,610,613],{"class":129,"line":175},[127,603,134],{"class":133},[127,605,589],{"class":137},[127,607,592],{"class":141},[127,609,145],{"class":133},[127,611,612],{"class":148},"\"date\"",[127,614,563],{"class":133},[127,616,617,619,622,624,626],{"class":129,"line":195},[127,618,134],{"class":133},[127,620,621],{"class":137},"select",[127,623,152],{"class":133},[127,625,621],{"class":137},[127,627,157],{"class":133},[78,629,630,631,634],{},"Het gebruik van een ",[82,632,633],{},"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.",[118,636,638],{"className":120,"code":637,"language":122,"meta":123,"style":123},"\u003Cinput type=\"email\" aria-label=\"E-mailadres\" \u002F>\n",[82,639,640],{"__ignoreMap":123},[127,641,642,644,646,648,650,653,656,658,661],{"class":129,"line":130},[127,643,134],{"class":133},[127,645,589],{"class":137},[127,647,592],{"class":141},[127,649,145],{"class":133},[127,651,652],{"class":148},"\"email\"",[127,654,655],{"class":141}," aria-label",[127,657,145],{"class":133},[127,659,660],{"class":148},"\"E-mailadres\"",[127,662,563],{"class":133},[526,664,666],{"id":665},"safari-reader","Safari reader",[78,668,669],{},"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.",[78,671,672],{},"Witte tekst wordt dan weergegeven op een zwarte achtergrond. Om hier optimaal gebruik van te maken is het vereist om microdata toe te passen.",[118,674,676],{"className":120,"code":675,"language":122,"meta":123,"style":123},"\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",[82,677,678,698,720,739,758,777],{"__ignoreMap":123},[127,679,680,682,685,688,691,693,696],{"class":129,"line":130},[127,681,134],{"class":133},[127,683,684],{"class":137},"article",[127,686,687],{"class":141}," itemscope",[127,689,690],{"class":141}," itemtype",[127,692,145],{"class":133},[127,694,695],{"class":148},"\"https:\u002F\u002Fschema.org\u002FpostsPosting\"",[127,697,157],{"class":133},[127,699,700,703,706,709,711,714,716,718],{"class":129,"line":175},[127,701,702],{"class":133},"  \u003C",[127,704,705],{"class":137},"h1",[127,707,708],{"class":141}," itemprop",[127,710,145],{"class":133},[127,712,713],{"class":148},"\"title\"",[127,715,152],{"class":133},[127,717,705],{"class":137},[127,719,157],{"class":133},[127,721,722,724,726,728,730,733,735,737],{"class":129,"line":195},[127,723,702],{"class":133},[127,725,99],{"class":137},[127,727,708],{"class":141},[127,729,145],{"class":133},[127,731,732],{"class":148},"\"subheading\"",[127,734,152],{"class":133},[127,736,99],{"class":137},[127,738,157],{"class":133},[127,740,741,743,745,747,749,752,754,756],{"class":129,"line":208},[127,742,702],{"class":133},[127,744,127],{"class":137},[127,746,708],{"class":141},[127,748,145],{"class":133},[127,750,751],{"class":148},"\"author\"",[127,753,152],{"class":133},[127,755,127],{"class":137},[127,757,157],{"class":133},[127,759,760,762,764,766,768,771,773,775],{"class":129,"line":221},[127,761,702],{"class":133},[127,763,127],{"class":137},[127,765,708],{"class":141},[127,767,145],{"class":133},[127,769,770],{"class":148},"\"pubdate\"",[127,772,152],{"class":133},[127,774,127],{"class":137},[127,776,157],{"class":133},[127,778,779,782,784],{"class":129,"line":227},[127,780,781],{"class":133},"\u003C\u002F",[127,783,684],{"class":137},[127,785,157],{"class":133},[78,787,788],{},"💡\nUpdate: ondertussen wordt het gebruik van JSON-LD aangeraden.",[526,790,792],{"id":791},"interactie","Interactie",[794,795,796,800,803,806],"ul",{},[797,798,799],"li",{},"Scrollen, ook mogelijk met de digital crown",[797,801,802],{},"Swipen",[797,804,805],{},"Tap to zoom",[797,807,808],{},"Edge swipe en firm press (o.a. voor terug en vooruit navigeren)",[99,810,812],{"id":811},"afwachten","Afwachten",[78,814,815],{},"Het is wachten op een definitieve release van watchOS 5.",[99,817,819],{"id":818},"links","Links",[794,821,822,829,836],{},[797,823,824,825],{},"Apple, (2018, 20 juni). Designing Web Content for watchOS. Geraadpleegd op 20 juni 2018, van ",[361,826,827],{"href":827,"rel":828},"https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F239\u002F",[365],[797,830,831,832],{},"Mozilla, (2018, 2 december). Viewport basics. Geraadpleegd op 20 juni 2018, van ",[361,833,834],{"href":834,"rel":835},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FMozilla\u002FMobile\u002FViewport_meta_tag#Viewport_basics",[365],[797,837,838],{},[361,839,840],{"href":840,"rel":841},"https:\u002F\u002Fschema.org\u002Fdocs\u002Fdocuments.html",[365],[336,843,844],{},"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":123,"searchDepth":175,"depth":175,"links":846},[847,853,854],{"id":517,"depth":175,"text":518,"children":848},[849,850,851,852],{"id":528,"depth":195,"text":529},{"id":569,"depth":195,"text":570},{"id":665,"depth":195,"text":666},{"id":791,"depth":195,"text":792},{"id":811,"depth":175,"text":812},{"id":818,"depth":175,"text":819},"2018-06-11T13:00:00.000Z","\u002Fwebkit-naar-watchos-5.png",{},{"title":18,"description":19},"blog\u002F2018-06-11-webkit-naar-watchos-5",[22],"9jyJtb_1vsFyVOZ-7hy36Jx7ZCXEaITkvkRcp1jQCRk",{"id":863,"title":24,"authors":864,"body":865,"date":1219,"description":25,"draft":67,"extension":344,"image":1220,"meta":1221,"navigation":347,"noindex":67,"path":26,"readingTime":195,"seo":1222,"stem":1223,"tags":1224,"__hash__":1225},"posts\u002Fblog\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen.md",[49],{"type":75,"value":866,"toc":1209},[867,882,888,894,898,906,975,978,1013,1016,1020,1105,1108,1112,1115,1118,1121,1130,1139,1142,1145,1148,1151,1172,1182,1186,1189,1191,1206],[78,868,869,870,875,876,881],{},"In CSS zijn variabelen er voornamelijk om consistent hergebruikt te worden. Nu zijn variabelen al lang onderdeel van verschillende ",[361,871,874],{"href":872,"rel":873},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FCSS_preprocessor",[365],"preprocessors",". Native heeft CSS nu ook ",[361,877,880],{"href":878,"rel":879},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FUsing_CSS_variables",[365],"custom properties"," (hierna CSS variabelen genoemd). Beide hebben zo hun voor- en nadelen afhankelijk van de situatie waarin je ze toepast. Welke dat zijn lees je hier.",[883,884,885],"blockquote",{},[78,886,887],{},"CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.",[78,889,890],{},[361,891,893],{"href":878,"rel":892},[365],"MDN web docs",[99,895,897],{"id":896},"preprocessor-variabelen","Preprocessor variabelen",[78,899,900,901,905],{},"In het voorbeeld hieronder gebruik ik preprocessor ",[361,902,904],{"href":903},"http:\u002F\u002Fsass-lang.com\u002F","Sass"," (Syntactically Awesome StyleSheets) variabelen in SCSS syntax.",[118,907,911],{"className":908,"code":909,"language":910,"meta":123,"style":123},"language-scss shiki shiki-themes github-light github-dark","$body-bg: #fafafa;\n$black: #000000;\n\nbody {\n  background-color: $body-bg;\n  color: $black;\n}\n","scss",[82,912,913,926,938,943,950,960,971],{"__ignoreMap":123},[127,914,915,919,921,924],{"class":129,"line":130},[127,916,918],{"class":917},"s4XuR","$body-bg",[127,920,182],{"class":133},[127,922,923],{"class":178},"#fafafa",[127,925,192],{"class":133},[127,927,928,931,933,936],{"class":129,"line":175},[127,929,930],{"class":917},"$black",[127,932,182],{"class":133},[127,934,935],{"class":178},"#000000",[127,937,192],{"class":133},[127,939,940],{"class":129,"line":195},[127,941,942],{"emptyLinePlaceholder":347},"\n",[127,944,945,948],{"class":129,"line":208},[127,946,947],{"class":137},"body",[127,949,172],{"class":133},[127,951,952,954,956,958],{"class":129,"line":221},[127,953,211],{"class":178},[127,955,182],{"class":133},[127,957,918],{"class":917},[127,959,192],{"class":133},[127,961,962,965,967,969],{"class":129,"line":227},[127,963,964],{"class":178},"  color",[127,966,182],{"class":133},[127,968,930],{"class":917},[127,970,192],{"class":133},[127,972,973],{"class":129,"line":235},[127,974,224],{"class":133},[78,976,977],{},"Nadat de preprocessor SCSS heeft omgezet naar CSS krijg je het volgende als resultaat. Simpel en basic.",[118,979,981],{"className":160,"code":980,"language":162,"meta":123,"style":123},"body {\n  background-color: #fafafa;\n  color: #000000;\n}\n",[82,982,983,989,999,1009],{"__ignoreMap":123},[127,984,985,987],{"class":129,"line":130},[127,986,947],{"class":137},[127,988,172],{"class":133},[127,990,991,993,995,997],{"class":129,"line":175},[127,992,211],{"class":178},[127,994,182],{"class":133},[127,996,923],{"class":178},[127,998,192],{"class":133},[127,1000,1001,1003,1005,1007],{"class":129,"line":195},[127,1002,964],{"class":178},[127,1004,182],{"class":133},[127,1006,935],{"class":178},[127,1008,192],{"class":133},[127,1010,1011],{"class":129,"line":208},[127,1012,224],{"class":133},[78,1014,1015],{},"Hetzelfde resultaat behaal je ook met CSS variabelen.",[99,1017,1019],{"id":1018},"css-variabelen","CSS variabelen",[118,1021,1023],{"className":160,"code":1022,"language":162,"meta":123,"style":123},":root {\n  --body-bg: #fafafa;\n  --black: #000000;\n}\n\nbody {\n  background-color: var(--body-bg);\n  color: var(--black);\n}\n",[82,1024,1025,1032,1043,1054,1058,1062,1068,1086,1101],{"__ignoreMap":123},[127,1026,1027,1030],{"class":129,"line":130},[127,1028,1029],{"class":141},":root",[127,1031,172],{"class":133},[127,1033,1034,1037,1039,1041],{"class":129,"line":175},[127,1035,1036],{"class":917},"  --body-bg",[127,1038,182],{"class":133},[127,1040,923],{"class":178},[127,1042,192],{"class":133},[127,1044,1045,1048,1050,1052],{"class":129,"line":195},[127,1046,1047],{"class":917},"  --black",[127,1049,182],{"class":133},[127,1051,935],{"class":178},[127,1053,192],{"class":133},[127,1055,1056],{"class":129,"line":208},[127,1057,224],{"class":133},[127,1059,1060],{"class":129,"line":221},[127,1061,942],{"emptyLinePlaceholder":347},[127,1063,1064,1066],{"class":129,"line":227},[127,1065,947],{"class":137},[127,1067,172],{"class":133},[127,1069,1070,1072,1074,1077,1080,1083],{"class":129,"line":235},[127,1071,211],{"class":178},[127,1073,182],{"class":133},[127,1075,1076],{"class":178},"var",[127,1078,1079],{"class":133},"(",[127,1081,1082],{"class":917},"--body-bg",[127,1084,1085],{"class":133},");\n",[127,1087,1088,1090,1092,1094,1096,1099],{"class":129,"line":250},[127,1089,964],{"class":178},[127,1091,182],{"class":133},[127,1093,1076],{"class":178},[127,1095,1079],{"class":133},[127,1097,1098],{"class":917},"--black",[127,1100,1085],{"class":133},[127,1102,1103],{"class":129,"line":332},[127,1104,224],{"class":133},[78,1106,1107],{},"Dit doet precies hetzelfde als het eerder gegeven Sass voorbeeld.",[99,1109,1111],{"id":1110},"voor-en-nadelen","Voor- en nadelen",[78,1113,1114],{},"Er zijn wel situaties te bedenken waar het gebruik van de ene een voordeel kan hebben ten opzichte van de ander.",[99,1116,897],{"id":1117},"preprocessor-variabelen-1",[78,1119,1120],{},"Het grootste voordeel ten opzichte van CSS variabelen is dat een preprocessor geen last heeft van falende browser compatibiliteit.",[78,1122,1123,1124,1129],{},"Op het moment van schrijven laat een check op ",[361,1125,1128],{"href":1126,"rel":1127},"https:\u002F\u002Fwww.caniuse.com\u002F#feat=css-variables",[365],"caniuse.com"," zien dat de ondersteuning voor CSS variabelen redelijk goed is. Een aantal browsers valt zoals verwacht wel buiten de boot. Gebruikt jouw doelgroep voornamelijk browsers zoals IE 11 of meer oude meuk 😂 dan kan je niet anders dan alleen preprocessor variabelen gebruiken.",[448,1131,450,1132,1136],{},[452,1133],{"src":1134,"alt":1135,"loading":456},"\u002Fcss-custom-properties-support.png","CSS custom properties support",[458,1137,1138],{},"Browser support voor CSS variabelen",[78,1140,1141],{},"Browser support voor CSS variabelen (CSS Custom Properties) is redelijk goed, namelijk 87,54% wereldwijd (rechtsboven zichtbaar).",[526,1143,1019],{"id":1144},"css-variabelen-1",[78,1146,1147],{},"Het eerste voordeel is dat je geen preprocessor nodig hebt. Alleen een browser die het ondersteunt en je kan aan de slag.",[78,1149,1150],{},"Het voordeel van CSS variabelen is dat je de variabelen kan beïnvloeden tijdens je gebruik\u002Fbezoek van een website in je browser. Dit kan op style niveau. Denk bijvoorbeeld aan breakpoints met media queries.",[78,1152,1153,1154,1157,1158,1160,1161,1164,1165,1168,1169,1171],{},"Ook met JavaScript kan je CSS variabelen aanpassen. In het volgende voorbeeld kan je door simpel de CSS variabele op de ",[1155,1156],"root",{}," aan te passen kleurwijzigingen doen door heel je site. Als het ware worden de CSS variabelen gewoon bijgewerkt. In het voorbeeld hieronder nemen de ",[82,1159,705],{}," en ",[82,1162,1163],{},".tile"," gewoon de kleur van variabele ",[82,1166,1167],{},"var(--black)"," uit de ",[1155,1170],{}," over.",[1173,1174,1181],"iframe",{"height":1175,"scrolling":1176,"title":1177,"src":1178,"frameBorder":1176,"allowTransparency":1179,"allowFullScreen":1179,"style":1180},265,"no","CSS Custom Properties test","\u002F\u002Fcodepen.io\u002Froyvn\u002Fembed\u002FrovMyM\u002F?height=265&theme-id=0&default-tab=js,result","true","width: 100%;","See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Froyvn\u002Fpen\u002FrovMyM\u002F'>CSS Custom Properties test\u003C\u002Fa> by Roy (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Froyvn'>@royvn\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[99,1183,1185],{"id":1184},"tot-slot","Tot slot",[78,1187,1188],{},"CSS variabelen zijn ongetwijfeld een goede toevoeging. Afhankelijk van je doelgroep en eigen wensen kan je een afweging maken welke soort variabelen te gebruiken. Geen van beide is goed of slecht. Het is wel leuk om te zien hoe CSS variabelen default steeds beter ondersteund worden door browsers.",[99,1190,819],{"id":818},[794,1192,1193,1199],{},[797,1194,1195,1196],{},"Mozilla, (2018, 22 december). Using CSS custom properties (variables). Geraadpleegd op 20 januari 2019, van ",[361,1197,878],{"href":878,"rel":1198},[365],[797,1200,1201,1202],{},"Sass, (2006 – 2018). Sass: Sass Basics. Geraadpleegd op 20 januari 2019, van ",[361,1203,1204],{"href":1204,"rel":1205},"http:\u002F\u002Fsass-lang.com\u002Fguide",[365],[336,1207,1208],{},"html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":123,"searchDepth":175,"depth":175,"links":1210},[1211,1212,1213,1214,1217,1218],{"id":896,"depth":175,"text":897},{"id":1018,"depth":175,"text":1019},{"id":1110,"depth":175,"text":1111},{"id":1117,"depth":175,"text":897,"children":1215},[1216],{"id":1144,"depth":195,"text":1019},{"id":1184,"depth":175,"text":1185},{"id":818,"depth":175,"text":819},"2019-01-20T14:00:00.000Z","\u002Fcss-variabelen-en-preprocessor-variabelen.jpg",{},{"title":24,"description":25},"blog\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen",[9],"J8a4O1yY2mq7Tuf21oz8cQWIbKxFMxAdT0bVD0_3RnY",{"id":1227,"title":29,"authors":1228,"body":1229,"date":1372,"description":30,"draft":67,"extension":344,"image":1373,"meta":1374,"navigation":347,"noindex":67,"path":31,"readingTime":195,"seo":1375,"stem":1376,"tags":1377,"__hash__":1378},"posts\u002Fblog\u002F2020-04-29-adobe-xd-en-line-height.md",[49],{"type":75,"value":1230,"toc":1363},[1231,1246,1250,1264,1267,1277,1280,1282,1291,1301,1308,1311,1315,1319,1322,1325,1328,1332,1335,1339,1342,1351],[78,1232,1233,1234,1239,1240,1245],{},"Als designer & developer werk je met verschillende tools. Hierbij loop je soms tegen dingen aan die je werkproces verstoren. Zo ook bij ",[361,1235,1238],{"href":1236,"rel":1237},"https:\u002F\u002Fwww.adobe.com\u002Fnl\u002Fproducts\u002Fxd.html",[365],"Adobe XD",". In eerste instantie lijkt het een werkbare tool. Tijdens het aflezen van design specificaties viel het echter op dat XD apart met de ",[361,1241,1244],{"href":1242,"rel":1243},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fline-height",[365],"line-height"," en de daarmee verbonden hoogte van een tekst object omgaat.",[99,1247,1249],{"id":1248},"probleem","Probleem",[78,1251,1252,1253,1160,1258,1263],{},"Een onderdeel van een goed ontwerp is bijvoorbeeld het doordacht toepassen van incrementele ",[361,1254,1257],{"href":1255,"rel":1256},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fpadding",[365],"padding",[361,1259,1262],{"href":1260,"rel":1261},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fmargin",[365],"margin",". Horizontaal maar ook verticaal. Verticaal is waar het bij XD met tekst en line-height niet helemaal lekker gaat.",[78,1265,1266],{},"Op het Adobe forum staat het volgende over hoe XD afmetingen behandelt.",[883,1268,1269],{},[78,1270,1271,1272],{},"XD currently uses a virtual pixel for most of its measurements (including font size), which should be the same unit of measure as a CSS pixel, or most measurements in iOS. It’s roughly equal to 1 physical pixel on a 72 dpi monitor (and, incidentally, a point).\n",[361,1273,1276],{"href":1274,"rel":1275},"https:\u002F\u002Fforums.adobe.com\u002Fthread\u002F2140211",[365],"Adobe forum",[78,1278,1279],{},"Op basis hiervan verwacht je dat afmetingen overeen moeten komen met een CSS pixel.",[99,1281,102],{"id":101},[78,1283,1284,1285,1290],{},"Stel dat je voor een website een titel van 1 regel ontwerpt met een font-size van 24 pixels en een line-height van 32 pixels. De titel zou zoals je verwacht in CSS 32 pixels hoog moeten zijn. Zo werkt het in je browser. Als de titel over twee regels gaat zou dat 32+32=64 pixels hoog moeten worden. Logisch toch? Adobe XD denkt er anders over, namelijk 40 pixels voor een enkele regel en 72 pixels voor een dubbele (afhankelijk van lettertype). Dat is een verschil van 8 pixels 😬 (",[361,1286,1289],{"href":1287,"rel":1288},"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FPoppins",[365],"lettertype Poppins",").",[138,1292,1294],{"style":1293},"width:100%;height:0;padding-bottom:73%;position:relative;",[1173,1295],{"allow-full-screen":1179,"className":1296,"frame-border":203,"height":1298,"src":1299,"style":1300,"width":1298},[1297],"giphy-embed","100%","https:\u002F\u002Fgiphy.com\u002Fembed\u002FpPhyAv5t9V8djyRFJH","position:absolute",[78,1302,1303],{},[361,1304,1307],{"href":1305,"rel":1306},"https:\u002F\u002Fgiphy.com\u002Fgifs\u002Fwtf-obama-wth-pPhyAv5t9V8djyRFJH",[365],"via GIPHY",[78,1309,1310],{},"Niet te begrijpen voor een UX\u002FUI design tool.",[99,1312,1314],{"id":1313},"gevolgen","Gevolgen",[526,1316,1318],{"id":1317},"ontwerp","Ontwerp",[78,1320,1321],{},"Omdat de line-height en de daaraan verbonden hoogte niet klopt is het toepassen van verticale ruimte en het positioneren van elementen niet eenvoudig meer. De hoogte klopt niet, dus de Y-as positie van een aangrenzend component voor de juiste margin of padding ook niet.",[407,1323],{":autoplay":1179,":controls":1179,":loop":1179,":muted":1179,"src":1324},"\u002Fadobe-xd-line-height-issue.mp4",[78,1326,1327],{},"De hoogte klopt niet op basis van de ingevoerde line-height en regels",[526,1329,1331],{"id":1330},"overdracht","Overdracht",[78,1333,1334],{},"Als designer kan je het probleem rechttrekken door handmatig elk element een beetje te nudgen. Tijdsintensief, maar dat neemt niet weg dat ook de overdracht naar mede developers extra aandacht nodig heeft om er voor te zorgen dat een design goed geïmplementeerd wordt.",[99,1336,1338],{"id":1337},"samenvattend","Samenvattend",[78,1340,1341],{},"Adobe XD behandelt de hoogte van een tekst element, die mede ontstaat door de line-height, niet zoals CSS pixels. De hoogte klopt niet waardoor eenvoudige design specificaties lastiger af te lezen zijn. Ook moet er extra opgelet worden bij het consistent toepassen van padding, margin en meer.",[78,1343,1344,1345,1350],{},"Vind je ook dat Adobe XD line-height en de daarmee verbonden hoogte moet functioneren zoals op het web? Stem dan op de volgende ",[361,1346,1349],{"href":1347,"rel":1348},"https:\u002F\u002Fadobexd.uservoice.com\u002Fforums\u002F353007-adobe-xd-feature-requests\u002Fsuggestions\u002F13813872-line-height-should-function-as-it-does-on-the-web",[365],"feature request"," bij het Adobe forum.",[78,1352,1353,1354,1160,1357,1362],{},"Gelukkig hebben andere tools zoals bijvoorbeeld ",[361,1355,366],{"href":363,"rel":1356},[365],[361,1358,1361],{"href":1359,"rel":1360},"https:\u002F\u002Fwww.figma.com\u002F",[365],"Figma"," niet last van dit probleem ❤️.",{"title":123,"searchDepth":175,"depth":175,"links":1364},[1365,1366,1367,1371],{"id":1248,"depth":175,"text":1249},{"id":101,"depth":175,"text":102},{"id":1313,"depth":175,"text":1314,"children":1368},[1369,1370],{"id":1317,"depth":195,"text":1318},{"id":1330,"depth":195,"text":1331},{"id":1337,"depth":175,"text":1338},"2019-04-29T13:00:00.000Z","\u002Fadobe-xd-en-line-height.jpg",{},{"title":29,"description":30},"blog\u002F2020-04-29-adobe-xd-en-line-height",[33,15],"2SO-avHP9vRLBot4Z-TgLooCQBgf-18-pXoykh2S7tw",{"id":1380,"title":35,"authors":1381,"body":1382,"date":1439,"description":36,"draft":67,"extension":344,"image":52,"meta":1440,"navigation":347,"noindex":67,"path":37,"readingTime":175,"seo":1441,"stem":1442,"tags":1443,"__hash__":1444},"posts\u002Fblog\u002F2022-07-23-mijn-favoriete-mac-apps-2022.md",[49],{"type":75,"value":1383,"toc":1433},[1384,1387,1391,1399,1403,1411,1415,1423,1426],[78,1385,1386],{},"Om de zoveel tijd is het de moeite waard om Mac apps te proberen die iets leuks toevoegen of je productiviteit verhogen. Dit jaar heb ik ook weer een lijstje met apps die ik met plezier gebruik.",[99,1388,1390],{"id":1389},"magnet","Magnet",[78,1392,1393,1394,1398],{},"Met ",[361,1395,1390],{"href":1396,"rel":1397},"https:\u002F\u002Fapps.apple.com\u002Fus\u002Fapp\u002Fmagnet\u002Fid441258766",[365]," kan je een venster naar een rand van je scherm slepen en je ziet in een preview hoe het venster gesnapt gaat worden. Zo organiseer je openstaande vensters met gemak. Zeker als je met grotere monitoren werkt is het een verbetering die je niet kan missen.",[99,1400,1402],{"id":1401},"shapr3d","Shapr3D",[78,1404,1405,1406,1410],{},"Misschien wel de meest gebruiksvriendelijke 3D modeling app. Ik gebruik ",[361,1407,1402],{"href":1408,"rel":1409},"https:\u002F\u002Fwww.shapr3d.com\u002F",[365]," met regelmaat om klusplannen te maken. Normaal heeft een 3D app een flinke leercurve maar hier is dat niet het geval. Binnen enkele minuten heb je het door en kan je lekker aan de slag.",[99,1412,1414],{"id":1413},"visual-studio-code","Visual Studio Code",[78,1416,1417,1418,1422],{},"Deze app kan eigenlijk niet ontbreken. De code editor voor developers. ",[361,1419,1414],{"href":1420,"rel":1421},"https:\u002F\u002Fcode.visualstudio.com\u002F",[365]," en de beschikbare extensies maken het geheel een fijne tool om mee te werken. De meeste tijd breng ik hier dan ook in door. Voor elke taal of framework is er wel een extensie beschikbaar die je productiviteit verhoogt.",[99,1424,1361],{"id":1425},"figma",[78,1427,1428,1429,1432],{},"De moderne online design tool. ",[361,1430,1361],{"href":1359,"rel":1431},[365]," is gebruiksvriendelijk, alles zit op één plek en je kan realtime meekijken met designers en overleggen. Vooral in de tijd van thuiswerken met corona was dit makkelijk. Bij projecten momenteel mijn favoriet om een design te vertalen naar een echte website.",{"title":123,"searchDepth":175,"depth":175,"links":1434},[1435,1436,1437,1438],{"id":1389,"depth":175,"text":1390},{"id":1401,"depth":175,"text":1402},{"id":1413,"depth":175,"text":1414},{"id":1425,"depth":175,"text":1361},"2022-07-23T12:16:00.000Z",{},{"title":35,"description":36},"blog\u002F2022-07-23-mijn-favoriete-mac-apps-2022",[16],"5CZB9PirYSCL-x1751G9SdYFukmIX8IWzk67jWNtdzE",{"id":1446,"title":40,"authors":1447,"body":1448,"date":1552,"description":41,"draft":67,"extension":344,"image":1553,"meta":1554,"navigation":347,"noindex":67,"path":42,"readingTime":130,"seo":1555,"stem":1556,"tags":1557,"__hash__":1558},"posts\u002Fblog\u002F2022-08-07-shopify-en-shop-munteenheid-symbol.md",[49],{"type":75,"value":1449,"toc":1550},[1450,1475,1482,1488,1501,1512,1547],[78,1451,1452,1453,1458,1459,1464,1465,1470,1471,1474],{},"Om binnen Shopify met ",[361,1454,1457],{"href":1455,"rel":1456},"https:\u002F\u002Fshopify.dev\u002Fapi\u002Fliquid",[365],"Liquid"," de shop munteenheid terug te krijgen kan je volgens de documentatie het ",[361,1460,1463],{"href":1461,"rel":1462},"https:\u002F\u002Fshopify.dev\u002Fapi\u002Fliquid\u002Fobjects#shop-currency",[365],"shop object"," met geneste ",[361,1466,1469],{"href":1467,"rel":1468},"https:\u002F\u002Fshopify.dev\u002Fapi\u002Fliquid\u002Fobjects#currency",[365],"currency object"," ",[82,1472,1473],{},"shop.currency.symbol"," gebruiken. Alleen werkt dit op het moment van schrijven niet.",[138,1476,1478],{"style":1477},"width:100%;height:0;padding-bottom:72%;position:relative;",[1173,1479],{"allow-full-screen":1179,"className":1480,"frame-border":203,"height":1298,"src":1481,"style":1300,"width":1298},[1297],"https:\u002F\u002Fgiphy.com\u002Fembed\u002FeJiX4lpUuD2fxmVZ8g",[78,1483,1484],{},[361,1485,1307],{"href":1486,"rel":1487},"https:\u002F\u002Fgiphy.com\u002Fgifs\u002Fmoodman-eJiX4lpUuD2fxmVZ8g",[365],[78,1489,1490,1491,1496,1497,1500],{},"Het makkelijkste is om je ",[361,1492,1495],{"href":1493,"rel":1494},"https:\u002F\u002Fshopify.dev\u002Fapi\u002Fliquid\u002Fobjects#cart",[365],"cart object"," te gebruiken, met ",[82,1498,1499],{},"cart.currency.symbol"," krijg je wel het symbool van de munteenheid terug.",[78,1502,1503,1504,1507,1508,1511],{},"Een andere optie is nog om een for loop te starten met ",[82,1505,1506],{},"shop.enabled_currencies",". Met behulp van de ",[82,1509,1510],{},"currency.iso_code"," filter je de huidige munteenheid eruit.",[118,1513,1515],{"className":120,"code":1514,"language":122,"meta":123,"style":123},"{% for currency in shop.enabled_currencies %}\n  {% if currency.iso_code == shop.currency %}\n    {{ currency.symbol }}\n    {% break %}\n  {% endif %}\n{% endfor %}\n",[82,1516,1517,1522,1527,1532,1537,1542],{"__ignoreMap":123},[127,1518,1519],{"class":129,"line":130},[127,1520,1521],{"class":133},"{% for currency in shop.enabled_currencies %}\n",[127,1523,1524],{"class":129,"line":175},[127,1525,1526],{"class":133},"  {% if currency.iso_code == shop.currency %}\n",[127,1528,1529],{"class":129,"line":195},[127,1530,1531],{"class":133},"    {{ currency.symbol }}\n",[127,1533,1534],{"class":129,"line":208},[127,1535,1536],{"class":133},"    {% break %}\n",[127,1538,1539],{"class":129,"line":221},[127,1540,1541],{"class":133},"  {% endif %}\n",[127,1543,1544],{"class":129,"line":227},[127,1545,1546],{"class":133},"{% endfor %}\n",[336,1548,1549],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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":123,"searchDepth":175,"depth":175,"links":1551},[],"2022-08-07T11:00:00.000Z","\u002Fshopify-en-shop-munteenheid-symbol.jpg",{},{"title":40,"description":41},"blog\u002F2022-08-07-shopify-en-shop-munteenheid-symbol",[44,45,46],"5buLEWEGWmlqMmWkjvvFeWAypse78KQyo96nb6WS17I",1780848346035]