[{"data":1,"prerenderedAt":322},["ShallowReactive",2],{"DefaultLayouten":3,"language-cases-slug-a-brand-new-funda-i18n-slugs":134,"language-cases-slug-en-a-brand-new-funda":141},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 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:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!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:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","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,"certificatesGrid":99},[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:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","a-brand-new-funda",{"locale":139,"value":140},"nl","het-nieuwe-funda",{"page":142,"cases":242},{"title":143,"slug":137,"i18nSlugs":144,"social":147,"heroIllustration":152,"caseTeaser":156,"content":159,"metaData":209,"quote":207,"author":207,"pivots":229},"A brand new Funda",[145,146],{"locale":136,"value":137},{"locale":139,"value":140},{"title":148,"description":149,"image":150},"A brand new Funda | Webdevelopment by De Voorhoede","We developed a uniform workflow for the biggest, most responsive and modular housing site of the Netherlands. Read more about the project on our website.",{"url":151},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1678377990-smartmockups_lf1ami5z.jpg",{"url":151,"alt":153,"width":154,"height":155},"A Brand New Funda",1920,1280,{"title":157,"image":158},"A uniform website created by multiple teams",{"url":151,"alt":153,"width":154,"height":155},[160,165,174,193,197,205],{"__typename":161,"id":162,"title":163,"body":164},"TextSectionRecord","395818","The challenge: a uniform website created by multiple teams","\u003Cp>Funda recently gave its website a new look and feel. With almost 30 million visits and 390 million page views a month Funda is one of the most popular websites in The Netherlands. De Voorhoede was responsible for building a completely responsive front-end. Our challenge was to ensure individual product teams could work seamlessly on the same front-end.\u003C\u002Fp>",{"__typename":166,"id":167,"image":168,"caption":170,"captionPosition":173},"ImageRecord","395836",{"url":169,"alt":170,"width":171,"height":172},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1622106712-funda-macbook-tablet-iphone-mockup-white-bg.png","Show case of funda.nl on different devices",1300,498,"bottom",{"__typename":175,"id":176,"storyItem":177},"StorytellingBlockRecord","396215",{"title":178,"items":179},"So, what's key?",[180,184,187,190],{"title":181,"body":182,"image":183},"Transparency","\u003Cp>When it’s always clear what’s being done by each team, you prevent them doing the same thing twice. Transparency also allows you to review and improve each other’s work.\u003C\u002Fp>",null,{"title":185,"body":186,"image":183},"Communication","\u003Cp>All developers use the same vocabulary for all parts of the website. Designers, back-end developers and other stakeholders understand and use this terminology as well. The same goes for coding conventions (guidelines on how to write your code).\u003C\u002Fp>",{"title":188,"body":189,"image":183},"Independence","\u003Cp>All teams should be able to work and make progress independently of each other. This also applies to all disciplines within a team.\u003C\u002Fp>",{"title":191,"body":192,"image":183},"Reuse","\u003Cp>Each team is responsible for a different part of the website. For example, a search field is used in many places within the site. Each team should be able to find and use the code for this search field easily. Reusing components provides consistency for end users and speeds up development.\u003C\u002Fp>",{"__typename":161,"id":194,"title":195,"body":196},"395837","The solution: component based development with the front-end guide","\u003Cp>Our \u003Cem>front-end guide\u003C\u002Fem> is a custom made component library.\u003C\u002Fp>\n\u003Cp>Each component in the front-end guide is a small bundle of HTML, CSS and\u002For JavaScript code. Front-end developers build these components independently. Some examples of components are a search field, a contact form and a navigation menu. We use them to compose pages, like the home page or search results page.\u003C\u002Fp>\n\u003Cp>We always develop and test components in isolation. This way we make sure that subsequent changes will not affect the rest of the website. When a component is delivered but not ready to use, you can implement it at a later stage without any hassle.\u003C\u002Fp>",{"__typename":166,"id":198,"image":199,"caption":201,"captionPosition":204},"176451964",{"url":200,"alt":201,"width":202,"height":203},"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1501076804-funda_search_result_component_dummydata.jpg","A component for search results with dummy data",756,284,"right",{"__typename":161,"id":206,"title":207,"body":208},"401061","","\u003Cp>A front-end guide provides an overview of all components and pages. Everyone has access, including product owners, designers and back-end developers. Components are carefully documented and combined with an live example usages. This helps with a smooth handover between developers. Another benefit is that the client and stakeholders always have access to the latest version of the front-end. Especially useful for feedback and demos.\u003C\u002Fp>\n\u003Cp>Automatic syntax and style validation are all integrated in the front-end guide. When a developer makes a mistake or delivers sloppy work, they will immediately be notified. The front-end guide also improves the performance by optimizing images and minifying CSS and JavaScript files.\u003C\u002Fp>",{"expertisesTitle":210,"expertises":211,"deliverableTitle":214,"deliverables":215,"technologiesTitle":220,"technologies":221,"interestedTitle":226,"interestedLinkUrl":227,"interestedLinkLabel":228},"Expertise",[212],{"title":213},"Development","Deliverables",[216,218],{"title":217},"Website",{"title":219},"Front-end guide","Platforms",[222,224],{"title":223},"Nunjucks",{"title":225},"Unit testing","See result","https:\u002F\u002Fwww.funda.nl\u002F","www.funda.nl",[230],{"title":231,"body":207,"links":232,"mailchimpValue":207,"mailchimpName":207,"mailchimpId":207,"formType":233,"contactPerson":234},"Let's discuss what we can do",[],"contact",{"name":235,"lastName":236,"jobTitle":237,"image":238},"Flip","van Eijndhoven","Business Director",{"url":239,"alt":183,"width":240,"height":241},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1760339734-flip-edit.jpeg",2201,2928,[243,246,249,252,255,258,261,264,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319],{"slug":244,"title":245},"quantum-inspire","Quantum Inspire",{"slug":247,"title":248},"life-terra","Life Terra",{"slug":250,"title":251},"geldmaat","Geldmaat",{"slug":253,"title":254},"pathe-thuis","Pathé Thuis",{"slug":256,"title":257},"viriciti","ViriCiti",{"slug":259,"title":260},"drop-and-fly","Drop & Fly",{"slug":262,"title":263},"15-apps-for-water-research-at-deltares","15 Apps for water research at Deltares",{"slug":137,"title":143},{"slug":266,"title":267},"bouwen-is-macht","Bouwen is Macht",{"slug":269,"title":270},"world-water-atlas","World Water Atlas",{"slug":272,"title":273},"pick-up-10","Pick Up 10",{"slug":275,"title":276},"hike-one","Hike One",{"slug":278,"title":279},"dlr-inspection-app","DLR Inspection app",{"slug":281,"title":282},"tradus","Tradus",{"slug":284,"title":285},"trouw","Trouw, Volkskrant and Parool",{"slug":287,"title":288},"abn-amro-loan-wizard","ABN-AMRO loan wizard",{"slug":290,"title":291},"npo-dashboard","NPO Dashboard",{"slug":293,"title":294},"hotel-and-bungalowspecials","Hotel- and BungalowSpecials",{"slug":296,"title":297},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":299,"title":300},"2dehands-be","2dehands.be",{"slug":302,"title":303},"swipe-and-shop","Swipe & Shop",{"slug":305,"title":306},"ziggo-interactive-television","Ziggo Interactive Television",{"slug":308,"title":309},"giftforyou","GiftForYou",{"slug":311,"title":312},"commtrac","Commtrac",{"slug":314,"title":315},"stamp-postnl-design-system","PostNL",{"slug":317,"title":318},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":320,"title":321},"privacy-by-design-in-je-bol","In je bol",1776256136790]