[{"data":1,"prerenderedAt":346},["ShallowReactive",2],{"search-entries":3,"settings-global":47,"layout-content-page-\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow":51,"layout-content-post-\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow":75,"i-lucide:arrow-left":239,"navigation-pages":243,"authors-global":247,"\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow":249},[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.","\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.","\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!","\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.","\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.","\u002F2020-04-29-adobe-xd-en-line-height",[33,15],"Adobe",{"title":35,"description":36,"path":37,"tags":38},"Mijn favoriete Mac apps 2022","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.","\u002F2022-07-23-mijn-favoriete-mac-apps-2022",[16],{"title":40,"description":41,"path":42,"tags":43},"Array-index in een Shopify-metaobject list","Een metaobject-list-metafield in Shopify Liquid kun je niet betrouwbaar met een index uitlezen. Deze dubbele toepassing van het reverse-filter is een workaround.","\u002F2026-02-14-array-index-in-een-shopify-metaobject-list",[44,45,46],"Shopify","Liquid","Metaobjects",{"id":48,"title":49,"avatar_image":50,"banner_image":51,"description":52,"extension":53,"github_url":51,"lang":54,"linkedin_url":55,"meta":56,"navigation":57,"noindex":70,"open_for_work":70,"origin":71,"stem":72,"tagline":73,"__hash__":74},"settings\u002Fsettings.yaml","Roy","\u002Froy.jpeg",null,"Ik help mooie merken met Shopify, thema's en maatwerkoplossingen die goed werken én goed voelen. Daarnaast schrijf ik op mijn blog over technologie, design en dingen die ik interessant vind.","yaml","nl","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Froyvn",{},[58,61,64,67],{"title":59,"to":60},"Home","\u002F",{"title":62,"to":63},"Over","\u002Fover",{"title":65,"to":66},"Snippets","https:\u002F\u002Fgist.github.com\u002Froyvn",{"title":68,"to":69},"Domaine","https:\u002F\u002Fdomaineworldwide.com\u002Fnl?ref=roy",false,"https:\u002F\u002Froy.vanneden.nl","settings","Frontend Engineer @ Domaine","tf8ovhsPty76hKyv1-L8VwYyUCgt3Bu1SLXbbfQGwpM",{"id":76,"title":11,"authors":77,"body":79,"date":231,"description":12,"draft":70,"extension":232,"image":233,"meta":234,"navigation":139,"noindex":70,"path":13,"readingTime":224,"seo":235,"stem":236,"tags":237,"__hash__":238},"posts\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow.md",[78],"roy",{"type":80,"value":81,"toc":223},"minimark",[82,94,99,102,114,121,125,134,140,147,151,160,163,170,174,177,191,200,207,211,214,216],[83,84,85,86,93],"p",{},"Voor het versnellen van je workflow in ",[87,88,92],"a",{"href":89,"rel":90},"https:\u002F\u002Fwww.sketch.com\u002F",[91],"nofollow","Sketch",", de digitale ontwerptool voor designers, zijn de volgende plugins interessant.",[95,96,98],"h2",{"id":97},"sketch-runner","Sketch Runner",[83,100,101],{},"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.",[83,103,104,105,109,110,113],{},"Met de combinatie ",[106,107,108],"code",{},"CMD"," + ",[106,111,112],{},"'"," en tab voer je acties uit zoals run, goto, insert, create, apply en install. Plugins kan je ook vanuit daar beheren.",[83,115,116],{},[87,117,120],{"href":118,"rel":119},"https:\u002F\u002Fwww.sketchrunner.com\u002F",[91],"Download Sketch Runner",[95,122,124],{"id":123},"sketch-relabel-button","Sketch Relabel Button",[83,126,127,128,109,130,133],{},"De plugin Sketch Relabel Button doet wat de naam al aangeeft. Met de toetsencombinatie ",[106,129,108],{},[106,131,132],{},"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!",[135,136],"video",{"src":137,"poster":138,"loop":139,"autoPlay":139,"muted":139,"playsInline":139,"controls":139},"\u002Fsketch-craft-plugin-voorbeeld.mp4","",true,[83,141,142],{},[87,143,146],{"href":144,"rel":145},"https:\u002F\u002Fgithub.com\u002Fkenmoore\u002Fsketch-relabel-button",[91],"Download Sketch Relabel Button",[95,148,150],{"id":149},"sketch-measure","Sketch Measure",[83,152,153,154,159],{},"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 ",[87,155,158],{"href":156,"rel":157},"https:\u002F\u002Fmaterial.io\u002Ftools\u002Fgallery\u002F",[91],"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.",[135,161],{"src":162,"poster":138,"loop":139,"autoPlay":139,"muted":139,"playsInline":139,"controls":139},"\u002Fsketch-measure-plugin-voorbeeld.mp4",[83,164,165],{},[87,166,169],{"href":167,"rel":168},"https:\u002F\u002Futom.design\u002Fmeasure\u002F",[91],"Download Sketch Measure",[95,171,173],{"id":172},"stark","Stark",[83,175,176],{},"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.",[178,179,180,181,180,187],"figure",{},"\n  ",[182,183],"img",{"src":184,"alt":185,"loading":186},"\u002Fsketch-stark-plugin-voorbeeld-opties.png","Sketch stark plugin voorbeeld opties","lazy",[188,189,190],"figcaption",{},"Voorbeeld opties",[178,192,180,193,180,197],{},[182,194],{"src":195,"alt":196,"loading":186},"\u002Fsketch-stark-plugin-voorbeeld-protanopia.png","Sketch stark plugin voorbeeld protanopia",[188,198,199],{},"Protanopia weergave",[83,201,202],{},[87,203,206],{"href":204,"rel":205},"https:\u002F\u002Fwww.getstark.co\u002F",[91],"Download Stark",[95,208,210],{"id":209},"craft","Craft",[83,212,213],{},"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.",[135,215],{"src":137,"poster":138,"loop":139,"autoPlay":139,"muted":139,"playsInline":139,"controls":139},[83,217,218],{},[87,219,222],{"href":220,"rel":221},"https:\u002F\u002Fwww.invisionapp.com\u002Fcraft",[91],"Download Craft",{"title":138,"searchDepth":224,"depth":224,"links":225},2,[226,227,228,229,230],{"id":97,"depth":224,"text":98},{"id":123,"depth":224,"text":124},{"id":149,"depth":224,"text":150},{"id":172,"depth":224,"text":173},{"id":209,"depth":224,"text":210},"2018-04-21T13:00:00.000Z","md","\u002Fsketch-plugin-tips-voor-een-snellere-workflow.jpg",{},{"title":11,"description":12},"2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow",[15,16],"h-S3HaDQNPWlHgv_9cbjutlbqXIm7Uob0zqCbQWs-co",{"left":240,"top":240,"width":241,"height":241,"rotate":240,"vFlip":70,"hFlip":70,"body":242},0,24,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",[244,245],{"path":63,"draft":139},{"path":246,"draft":139},"\u002Fstyles",[248],{"slug":78,"name":49,"bio":52,"image":50},{"type":250,"document":251},"post",{"id":76,"title":11,"authors":252,"body":253,"date":231,"description":12,"draft":70,"extension":232,"image":233,"meta":343,"navigation":139,"noindex":70,"path":13,"readingTime":224,"seo":344,"stem":236,"tags":345,"__hash__":238},[78],{"type":80,"value":254,"toc":336},[255,260,262,264,270,275,277,283,285,290,292,297,299,304,306,308,314,320,325,327,329,331],[83,256,85,257,93],{},[87,258,92],{"href":89,"rel":259},[91],[95,261,98],{"id":97},[83,263,101],{},[83,265,104,266,109,268,113],{},[106,267,108],{},[106,269,112],{},[83,271,272],{},[87,273,120],{"href":118,"rel":274},[91],[95,276,124],{"id":123},[83,278,127,279,109,281,133],{},[106,280,108],{},[106,282,132],{},[135,284],{"src":137,"poster":138,"loop":139,"autoPlay":139,"muted":139,"playsInline":139,"controls":139},[83,286,287],{},[87,288,146],{"href":144,"rel":289},[91],[95,291,150],{"id":149},[83,293,153,294,159],{},[87,295,158],{"href":156,"rel":296},[91],[135,298],{"src":162,"poster":138,"loop":139,"autoPlay":139,"muted":139,"playsInline":139,"controls":139},[83,300,301],{},[87,302,169],{"href":167,"rel":303},[91],[95,305,173],{"id":172},[83,307,176],{},[178,309,180,310,180,312],{},[182,311],{"src":184,"alt":185,"loading":186},[188,313,190],{},[178,315,180,316,180,318],{},[182,317],{"src":195,"alt":196,"loading":186},[188,319,199],{},[83,321,322],{},[87,323,206],{"href":204,"rel":324},[91],[95,326,210],{"id":209},[83,328,213],{},[135,330],{"src":137,"poster":138,"loop":139,"autoPlay":139,"muted":139,"playsInline":139,"controls":139},[83,332,333],{},[87,334,222],{"href":220,"rel":335},[91],{"title":138,"searchDepth":224,"depth":224,"links":337},[338,339,340,341,342],{"id":97,"depth":224,"text":98},{"id":123,"depth":224,"text":124},{"id":149,"depth":224,"text":150},{"id":172,"depth":224,"text":173},{"id":209,"depth":224,"text":210},{},{"title":11,"description":12},[15,16],1785620948593]