[{"data":1,"prerenderedAt":448},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-i18n-slugs":111,"language-blog-en":118},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https://github.com/voorhoede/","https://www.youtube.com/channel/UCzHuhQVYFRixtQN2-swcuGg","https://www.linkedin.com/company/de-voorhoede","+31 (0)20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https://www.google.com/maps/place/De+Voorhoede+%7C+Front-end+Development/@52.396847,4.8700823,17z/data=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https://www.google.nl/maps/place/Koornmarkt+22,+2611+EG+Delft/@52.0093477,4.3573054,17z/","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"bCorpLinks":99,"dutchDigitalAgenciesLinks":104,"dutchDigitalAgenciesLogo":109,"bcorpLogo":114},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https://creativecommons.org/licenses/by/4.0/","De Voorhoede privacy statement (pdf)","Privacy statement","https://www.datocms-assets.com/6524/1640619694-privacy-statement-en.pdf",[100],{"id":101,"title":102,"url":103},"138591972","B Corp","https://www.bcorporation.net/en-us/find-a-b-corp/company/de-voorhoede/",[105],{"id":106,"title":107,"url":108},"138591973","Dutch digital agencies","https://dutchdigitalagencies.com/leden/de-voorhoede/",{"url":110,"alt":111,"width":112,"height":113},"https://www.datocms-assets.com/6524/1687353461-dda-boxlogo-black.png",null,627,480,{"url":115,"alt":111,"width":116,"height":117},"https://www.datocms-assets.com/6524/1687353463-b-corp-logo-black-rgb.png",404,680,{"page":119,"items":154,"itemsMeta":425,"tags":427,"tag":111},{"title":79,"social":120,"subtitle":123,"description":124,"headerIllustration":111,"pinnedPosts":125,"pivots":142},{"title":121,"description":122,"image":111},"Blog | De Voorhoede","Find out how we approach our projects and what techniques we use.","We love the web","In our blog posts you’ll read how we approach our projects and what techniques we use.",[126],{"slug":127,"social":128,"title":133,"date":134,"authors":135},"how-to-select-framework-design-system-components",{"title":129,"description":130,"image":131},"How to select a Framework for Design System Components","Which technology or framework do you select for your design system? We looked at a setup with Stencil and PReact. Read about our conclusion. ",{"url":132},"https://www.datocms-assets.com/6524/1670852538-linkedin-post-2.jpg","How to select a framework for design system components","2022-12-12T01:00:00+01:00",[136],{"name":137,"image":138},"Jasper",{"url":139,"alt":111,"width":140,"height":141},"https://www.datocms-assets.com/6524/1683535518-jasper.jpg",1892,2523,[143],{"title":144,"body":145,"links":146,"mailchimpValue":153,"mailchimpName":153,"mailchimpId":153,"formType":153,"contactPerson":111},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C/p>\n",[147],{"__typename":148,"id":149,"title":150,"link":151},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":152},"jobs","",[155,170,185,196,205,220,236,248,264,277,292,304,315,331,347,363,379,385,401,413],{"slug":156,"social":157,"title":158,"date":162,"authors":163},"accessibility-in-design-systems",{"title":158,"description":159,"image":160},"Accessibility in Design Systems","Design systems help with accessibility, but they’re not the full solution.",{"url":161},"https://www.datocms-assets.com/6524/1749642128-accessibility_blog_with_graphic.jpg","2025-06-17T14:15:56+02:00",[164],{"name":165,"image":166},"Sjoerd",{"url":167,"alt":111,"width":168,"height":169},"https://www.datocms-assets.com/6524/1683534892-sjoerd.jpg",1637,2182,{"slug":171,"social":172,"title":173,"date":177,"authors":178},"better-transitions-with-scroll-driven-animations",{"title":173,"description":174,"image":175},"Using scroll-driven animations for better transitions","CSS scroll-driven animations can be used to great effect instead of the transition definition.",{"url":176},"https://www.datocms-assets.com/6524/1724412268-linkedin-blog-11.jpg","2025-01-10T13:42:00+01:00",[179],{"name":180,"image":181},"Jurgen",{"url":182,"alt":180,"width":183,"height":184},"https://www.datocms-assets.com/6524/1721036030-jurgen-edit.jpg",2341,3069,{"slug":186,"social":187,"title":188,"date":192,"authors":193},"design-system-from-scratch-from-the-shelf",{"title":188,"description":189,"image":190},"Design System: from scratch or from the shelf?","Depending on your needs and budget, you may prefer a fully tailor-made design system from scratch, or rather a white label from the shelf.",{"url":191},"https://www.datocms-assets.com/6524/1731076679-social-design-system-scratch-shelf.png","2024-11-19T13:16:02+01:00",[194],{"name":137,"image":195},{"url":139,"alt":111,"width":140,"height":141},{"slug":197,"social":198,"title":199,"date":201,"authors":202},"the-popover-api-your-new-best-friend-for-tooltips",{"title":199,"description":200,"image":111},"The Popover API: Your New Best Friend for Tooltips","Discover how the Popover API and new CSS features simplify tooltip creation, making them accessible and well-positioned across all major browsers","2024-10-07T15:36:10+02:00",[203],{"name":165,"image":204},{"url":167,"alt":111,"width":168,"height":169},{"slug":206,"social":207,"title":209,"date":212,"authors":213},"write-components-once-run-everywhere-with-mitosis-a-beautiful-dream-or-reality",{"title":208,"description":209,"image":210},"Using Mitosis to build a Design System","“Write components once, run everywhere” with Mitosis; a beautiful dream or reality?",{"url":211},"https://www.datocms-assets.com/6524/1726596831-mitosis-social-cover-en.jpg","2024-09-16T13:04:31+02:00",[214],{"name":215,"image":216},"Wessel",{"url":217,"alt":215,"width":218,"height":219},"https://www.datocms-assets.com/6524/1721035942-wessel.jpg",2135,2868,{"slug":221,"social":222,"title":227,"date":228,"authors":229},"lessons-learned-debugging-inp",{"title":223,"description":224,"image":225},"Lessons learned debugging Interaction to Next Paint (INP)","INP is a new performance metric significantly affetcing your search ranking. But how can we measure and debug in order to improve our website's INP?",{"url":226},"https://www.datocms-assets.com/6524/1723473873-linkedin-blog-8.jpg"," Lessons learned debugging Interaction to Next Paint (INP)","2024-08-16T09:46:11+02:00",[230],{"name":231,"image":232},"Declan",{"url":233,"alt":111,"width":234,"height":235},"https://www.datocms-assets.com/6524/1683534636-placeholder.jpg",1235,1646,{"slug":237,"social":238,"title":243,"date":244,"authors":245},"affordance-design-system-components",{"title":239,"description":240,"image":241},"Affordance in Design System Components | De Voorhoede","By using affordance principles, design systems become easier to use and more flexible, making it simpler for developers to build web applications. Discover how.",{"url":242},"https://www.datocms-assets.com/6524/1716534481-linkedin-blog-6.jpg","Affordance in Design System Components","2024-05-27T09:00:00+02:00",[246],{"name":165,"image":247},{"url":167,"alt":111,"width":168,"height":169},{"slug":249,"social":250,"title":255,"date":256,"authors":257},"headless-cmss-go-head-to-head-strapi-vs-datocms",{"title":251,"description":252,"image":253},"Headless CMS: Strapi vs DatoCMS ","Our verdict: Strapi if you want to bring your own database & hosting or need severe UI customisation. For most straightforward projects DatoCMS is the way. ",{"url":254},"https://www.datocms-assets.com/6524/1691142058-headless-cms-strapi-vs-dato-cms.png","Headless CMSs go head to head: Strapi vs DatoCMS","2023-08-04T02:00:00+02:00",[258],{"name":259,"image":260},"Remco",{"url":261,"alt":111,"width":262,"height":263},"https://www.datocms-assets.com/6524/1683535671-remco.jpg",1990,2653,{"slug":265,"social":266,"title":267,"date":271,"authors":272},"building-design-system-react-web-components",{"title":267,"description":268,"image":269},"Building a Design System with React Web Components","Learn how to create a universal Design system with React and Web Components to use in any web application or framework.",{"url":270},"https://www.datocms-assets.com/6524/1687161534-linkedin-post-1.jpg","2023-06-19T02:00:00+02:00",[273,275],{"name":137,"image":274},{"url":139,"alt":111,"width":140,"height":141},{"name":165,"image":276},{"url":167,"alt":111,"width":168,"height":169},{"slug":278,"social":279,"title":284,"date":285,"authors":286},"switching-google-analytics-privacy-friendly-tracking-6-steps",{"title":280,"description":281,"image":282},"From GA to privacy friendly tracking: 6 steps | De Voorhoede","Is it really necessary for your website to use Google Analytics? Probably not. You can switch to alternative, privacy friendly tracking in 6 steps. Read more.",{"url":283},"https://www.datocms-assets.com/6524/1684246367-linkedin-post.jpg","Switching from Google Analytics to privacy friendly tracking in 6 steps","2023-05-29T02:00:00+02:00",[287,290],{"name":288,"image":289},"Vera",{"url":233,"alt":111,"width":234,"height":235},{"name":137,"image":291},{"url":139,"alt":111,"width":140,"height":141},{"slug":293,"social":294,"title":299,"date":300,"authors":301},"primary-school-girls-learn-programming-during-girls-day",{"title":295,"description":296,"image":297},"Primary school girls learn programming during Girls' Day","On 30 March 2023 we welcomed a group of girls from the primary school De Oostpoort at our office in Delft. This visit was part of the national Girls’ Day.",{"url":298},"https://www.datocms-assets.com/6524/1680181632-girls-day.jpg","Primary school girls learn programming during Girls’ Day","2023-03-31T02:00:00+02:00",[302],{"name":288,"image":303},{"url":233,"alt":111,"width":234,"height":235},{"slug":305,"social":306,"title":307,"date":311,"authors":312},"inclusive-design-accessible-web-development",{"title":307,"description":308,"image":309},"Inclusive Design & Accessible Web Development","Accessibilty and inclusivity still gets too little attention in web development. We talked about this during our meetup in collab with Girl Code on march 16.",{"url":310},"https://www.datocms-assets.com/6524/1679314130-linkedin-post-4.jpg","2023-03-20T01:00:00+01:00",[313],{"name":288,"image":314},{"url":233,"alt":111,"width":234,"height":235},{"slug":316,"social":317,"title":322,"date":323,"authors":324},"highlights-vue-js-nation-2023",{"title":318,"description":319,"image":320},"Highlights from Vue.js Nation 2023 | De Voorhoede","At the Vue.js Nation conference '23 I learned how the creators of Vue see the present and the future of the framework. Here are my takeaways of the talks.",{"url":321},"https://www.datocms-assets.com/6524/1679315682-linkedin-blog-alternatief-4.png","Highlights from Vue.js Nation 2023","2023-03-17T01:00:00+01:00",[325],{"name":326,"image":327},"Misha",{"url":328,"alt":111,"width":329,"height":330},"https://www.datocms-assets.com/6524/1683535051-misha.jpg",1951,2601,{"slug":332,"social":333,"title":338,"date":339,"authors":340},"introducing-handlebars-in-webassembly",{"title":334,"description":335,"image":336},"Introducing Handlebars in WebAssembly | Blog by De Voorhoede","Clients use various programming languages. How do we manage to create and control the entire front-end, regardless of the back-end they use? We use WebAssembly.",{"url":337},"https://www.datocms-assets.com/6524/1676363348-linkedin-blog-alternatief-3.png","Introducing Handlebars in WebAssembly","2023-02-14T01:00:00+01:00",[341],{"name":342,"image":343},"Arash",{"url":344,"alt":111,"width":345,"height":346},"https://www.datocms-assets.com/6524/1683535548-arash.jpg",2290,3054,{"slug":348,"social":349,"title":354,"date":355,"authors":356},"can-ai-generate-illustrations-custom-style",{"title":350,"description":351,"image":352},"Can AI generate illustrations in a custom style? | Blog","We did an experiment: can we train AI to generate illustrations in De Voorhoede style? Short answer: yes. Let’s look at the technology and some examples.",{"url":353},"https://www.datocms-assets.com/6524/1675175939-linkedin-post-3.jpg","Can AI generate illustrations in a custom style?","2023-01-31T01:00:00+01:00",[357],{"name":358,"image":359},"James",{"url":360,"alt":111,"width":361,"height":362},"https://www.datocms-assets.com/6524/1683534742-james.jpg",1811,2415,{"slug":364,"social":365,"title":370,"date":371,"authors":372},"accessibility-kit-for-web-developers",{"title":366,"description":367,"image":368},"Accessibility kit for web developers | De Voorhoede","We put together an accessibility kit that we can use as web developers. With these tools we can test our products and make the web a better place. Have a look.",{"url":369},"https://www.datocms-assets.com/6524/1673860265-accessibility-kit-web-developers.jpg","Accessibility kit for web developers","2023-01-16T01:00:00+01:00",[373],{"name":374,"image":375},"Zowie",{"url":376,"alt":111,"width":377,"height":378},"https://www.datocms-assets.com/6524/1683535300-zowie.jpg",1880,2507,{"slug":127,"social":380,"title":133,"date":134,"authors":382},{"title":129,"description":130,"image":381},{"url":132},[383],{"name":137,"image":384},{"url":139,"alt":111,"width":140,"height":141},{"slug":386,"social":387,"title":392,"date":393,"authors":394},"scripted-cms-migrations",{"title":388,"description":389,"image":390},"Safe CMS migrations with Scripted Migrations | De Voorhoede","Updating your content models manually is risky and inconvenient. You can update the wrong field or even remove it. Scripted migrations are here to save you.",{"url":391},"https://www.datocms-assets.com/6524/1669363496-linkedin-blog-alternatief.png","Safe and convenient CMS migrations with scripted migrations and sandbox environments","2022-11-25T01:00:00+01:00",[395],{"name":396,"image":397},"Frank",{"url":398,"alt":111,"width":399,"height":400},"https://www.datocms-assets.com/6524/1683534610-frank.jpg",2049,2732,{"slug":402,"social":403,"title":408,"date":409,"authors":410},"10-inspiring-women-tech-ada-lovelace-day",{"title":404,"description":405,"image":406},"10 Inspiring Women in Tech | De Voorhoede","On Ada Lovelace Day we celebrate the achievements of women in science, technology, engineering and math. These are 10 female tech leaders that have inspired us.",{"url":407},"https://www.datocms-assets.com/6524/1665472076-linkedin-post-2.jpg","10 Inspiring Women in Tech - Ada Lovelace Day","2022-10-11T02:00:00+02:00",[411],{"name":288,"image":412},{"url":233,"alt":111,"width":234,"height":235},{"slug":414,"social":415,"title":420,"date":421,"authors":422},"front-end-at-the-edge",{"title":416,"description":417,"image":418},"Front-end at the Edge | De Voorhoede","Edge functions are the latest extension to the serverless ecosystem. They promise low latency by running closer to the user. Watch our 3 talks about this topic.",{"url":419},"https://www.datocms-assets.com/6524/1664895503-img_20220901_194601-1.jpg","Front-end at the Edge","2022-10-04T02:00:00+02:00",[423],{"name":288,"image":424},{"url":233,"alt":111,"width":234,"height":235},{"count":426},91,[428,432,436,440,444],{"id":429,"title":430,"slug":431},"WTPJX79URE-O5lpWLJeEHg","Headless CMS","headless-cms",{"id":433,"title":434,"slug":435},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",{"id":437,"title":438,"slug":439},"HgWm8aCCRMWWS0eqggo5xg","Accessibility ","accessibility",{"id":441,"title":442,"slug":443},"NJN9K2rdSY2pn9MvchHLtw","Strategy","strategy",{"id":445,"title":446,"slug":447},"b-HOCOQTRJKMsff0UxhDcg","Web performance ","web-performance",1751446915706]