[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"search-all-posts":3,"settings-global":47,"\u002Fblog\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow":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":11,"authors":72,"body":73,"date":225,"description":12,"draft":67,"extension":226,"image":227,"meta":228,"navigation":133,"noindex":67,"path":13,"readingTime":218,"seo":229,"stem":230,"tags":231,"__hash__":232},"posts\u002Fblog\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow.md",[49],{"type":74,"value":75,"toc":217},"minimark",[76,88,93,96,108,115,119,128,134,141,145,154,157,164,168,171,185,194,201,205,208,210],[77,78,79,80,87],"p",{},"Voor het versnellen van je workflow in ",[81,82,86],"a",{"href":83,"rel":84},"https:\u002F\u002Fwww.sketch.com\u002F",[85],"nofollow","Sketch",", de digitale ontwerptool voor designers, zijn de volgende plugins interessant.",[89,90,92],"h2",{"id":91},"sketch-runner","Sketch Runner",[77,94,95],{},"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.",[77,97,98,99,103,104,107],{},"Met de combinatie ",[100,101,102],"code",{},"CMD"," + ",[100,105,106],{},"'"," en tab voer je acties uit zoals run, goto, insert, create, apply en install. Plugins kan je ook vanuit daar beheren.",[77,109,110],{},[81,111,114],{"href":112,"rel":113},"https:\u002F\u002Fwww.sketchrunner.com\u002F",[85],"Download Sketch Runner",[89,116,118],{"id":117},"sketch-relabel-button","Sketch Relabel Button",[77,120,121,122,103,124,127],{},"De plugin Sketch Relabel Button doet wat de naam al aangeeft. Met de toetsencombinatie ",[100,123,102],{},[100,125,126],{},"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!",[129,130],"video",{"src":131,"poster":132,"loop":133,"autoPlay":133,"muted":133,"playsInline":133,"controls":133},"\u002Fsketch-craft-plugin-voorbeeld.mp4","",true,[77,135,136],{},[81,137,140],{"href":138,"rel":139},"https:\u002F\u002Fgithub.com\u002Fkenmoore\u002Fsketch-relabel-button",[85],"Download Sketch Relabel Button",[89,142,144],{"id":143},"sketch-measure","Sketch Measure",[77,146,147,148,153],{},"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 ",[81,149,152],{"href":150,"rel":151},"https:\u002F\u002Fmaterial.io\u002Ftools\u002Fgallery\u002F",[85],"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.",[129,155],{"src":156,"poster":132,"loop":133,"autoPlay":133,"muted":133,"playsInline":133,"controls":133},"\u002Fsketch-measure-plugin-voorbeeld.mp4",[77,158,159],{},[81,160,163],{"href":161,"rel":162},"https:\u002F\u002Futom.design\u002Fmeasure\u002F",[85],"Download Sketch Measure",[89,165,167],{"id":166},"stark","Stark",[77,169,170],{},"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.",[172,173,174,175,174,181],"figure",{},"\n  ",[176,177],"img",{"src":178,"alt":179,"loading":180},"\u002Fsketch-stark-plugin-voorbeeld-opties.png","Sketch stark plugin voorbeeld opties","lazy",[182,183,184],"figcaption",{},"Voorbeeld opties",[172,186,174,187,174,191],{},[176,188],{"src":189,"alt":190,"loading":180},"\u002Fsketch-stark-plugin-voorbeeld-protanopia.png","Sketch stark plugin voorbeeld protanopia",[182,192,193],{},"Protanopia weergave",[77,195,196],{},[81,197,200],{"href":198,"rel":199},"https:\u002F\u002Fwww.getstark.co\u002F",[85],"Download Stark",[89,202,204],{"id":203},"craft","Craft",[77,206,207],{},"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.",[129,209],{"src":131,"poster":132,"loop":133,"autoPlay":133,"muted":133,"playsInline":133,"controls":133},[77,211,212],{},[81,213,216],{"href":214,"rel":215},"https:\u002F\u002Fwww.invisionapp.com\u002Fcraft",[85],"Download Craft",{"title":132,"searchDepth":218,"depth":218,"links":219},2,[220,221,222,223,224],{"id":91,"depth":218,"text":92},{"id":117,"depth":218,"text":118},{"id":143,"depth":218,"text":144},{"id":166,"depth":218,"text":167},{"id":203,"depth":218,"text":204},"2018-04-21T13:00:00.000Z","md","\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",1780848345659]