[{"data":1,"prerenderedAt":319},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-cases-slug-het-nieuwe-funda-i18n-slugs":132,"language-cases-slug-nl-het-nieuwe-funda":139},{"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},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__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},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"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",null,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":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","a-brand-new-funda",{"locale":137,"value":138},"nl","het-nieuwe-funda",{"page":140,"cases":239},{"title":141,"slug":138,"i18nSlugs":142,"social":145,"heroIllustration":150,"caseTeaser":154,"content":157,"metaData":206,"quote":204,"author":204,"pivots":226},"Het nieuwe Funda",[143,144],{"locale":134,"value":135},{"locale":137,"value":138},{"title":146,"description":147,"image":148},"Het nieuwe Funda | Webdevelopment door De Voorhoede","Onze front-end guide zorgt voor een uniforme workflow voor de grootste, responsive'ste en modulairste huizenaanbod site van Nederland. Bekijk de case.",{"url":149},"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1501159269-funda_highlight.jpg",{"url":151,"alt":104,"width":152,"height":153},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1678377990-smartmockups_lf1ami5z.jpg",1920,1280,{"title":155,"image":156},"Een uniforme website gemaakt door verschillende teams",{"url":151,"alt":104,"width":152,"height":153},[158,163,172,190,194,202],{"__typename":159,"id":160,"title":161,"body":162},"TextSectionRecord","401062","De uitdaging: een uniforme website gemaakt door verschillende teams","\u003Cp>Funda stak recent haar website in een nieuw jasje. Met bijna 30 miljoen bezoeken en 390 miljoen bekeken pagina's per maand is Funda een van de meest bezochte websites in Nederland. De Voorhoede bouwde een volledig responsive front-end.\u003C\u002Fp>",{"__typename":164,"id":165,"image":166,"caption":168,"captionPosition":171},"ImageRecord","401069",{"url":167,"alt":168,"width":169,"height":170},"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1501076787-funda-devices.jpg","Show case of funda.nl on different devices",3868,1540,"bottom",{"__typename":173,"id":174,"storyItem":175},"StorytellingBlockRecord","401065",{"title":176,"items":177},"Wat is dan belangrijk?",[178,181,184,187],{"title":179,"body":180,"image":104},"Transparantie","\u003Cp>\u003Cspan>Als op elk moment helder is welk team waaraan werkt, hoef je nooit dubbel werk te doen. Je krijgt de kans om elkaar te helpen en kan elkaars werk evalueren en verbeteren.\u003C\u002Fspan>\u003C\u002Fp>",{"title":182,"body":183,"image":104},"Communicatie","\u003Cp>\u003Cspan>Alle developers gebruiken dezelfde woorden voor de verschillende website-onderdelen. Designers, back-end developers en andere disciplines in het team begrijpen en gebruiken deze terminologie ook. Code-conventies — lees: afspraken over hoe je je code schrijft — horen hier ook bij.\u003C\u002Fspan>\u003C\u002Fp>",{"title":185,"body":186,"image":104},"Zelfstandigheid","\u003Cp>\u003Cspan>Teams moeten zelfstandig werken en onafhankelijk van elkaar voortgang kunnen boeken. Dat geldt ook voor de disciplines binnen een team.\u003C\u002Fspan>\u003C\u002Fp>",{"title":188,"body":189,"image":104},"Hergebruik","\u003Cp>\u003Cspan>Elk team is verantwoordelijk voor een ander deel van de website. Als voorbeeld: een zoekveld wordt op veel plekken in de website gebruikt. Elk team kan de code hiervoor vinden en implementeren. Dat levert consistentie op voor de eindgebruiker en versnelt het ontwikkelen.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":159,"id":191,"title":192,"body":193},"401067","De oplossing: werken met componenten in de front-end guide","\u003Cp>De \u003Cem>front-end guide\u003C\u002Fem> is een componentenbibliotheek die op maat wordt gemaakt.\u003C\u002Fp>\n\u003Cp>Elk component in de front-end guide is een pakketje HTML, CSS en\u002Fof JavaScript. Front-end developers ontwikkelen deze componenten los van elkaar. Voorbeelden van componenten zijn een zoekveld, een contactformulier en een navigatiemenu. We gebruiken ze vervolgens om pagina's samen te stellen, zoals de homepage of de zoekresultatenpagina.\u003C\u002Fp>\n\u003Cp>Door een component geïsoleerd te ontwikkelen en te testen zijn we er zeker van dat latere aanpassingen geen invloed hebben op de rest van de website. Ook als een component is opgeleverd maar nog niet in de website kan worden gebruikt, kan het vrijwel pijnloos in een later stadium worden geïmplementeerd.\u003C\u002Fp>",{"__typename":164,"id":195,"image":196,"caption":198,"captionPosition":201},"176451965",{"url":197,"alt":198,"width":199,"height":200},"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1501076804-funda_search_result_component_dummydata.jpg","Search-result-component met dummy data",756,284,"right",{"__typename":159,"id":203,"title":204,"body":205},"401079","","\u003Cp>Een front-end guide biedt een centraal overzicht van alle componenten en pagina's. Iedereen heeft toegang, ook product owners, designers en back-end developers. Componenten worden zorgvuldig gedocumenteerd en voorzien van een voorbeeldimplementatie. Dit maakt de overdracht tussen developers makkelijk. Een ander voordeel is dat een stakeholder (de opdrachtgever) altijd toegang heeft tot de meest recente versie van de front-end. Praktisch voor feedback en demo’s.\u003C\u002Fp>\n\u003Cp>Ingebakken in de front-end guide is automatische syntax- en stijlvalidatie van onze code. Als een developer een fout maakt of slordig werkt, krijgt hij daar meteen melding van. Ten slotte helpt de front-end guide met het verbeteren van performance, bijvoorbeeld door het optimaliseren van afbeeldingen en verkleinen van CSS- en JavaScriptbestanden.\u003C\u002Fp>",{"expertisesTitle":207,"expertises":208,"deliverableTitle":211,"deliverables":212,"technologiesTitle":217,"technologies":218,"interestedTitle":223,"interestedLinkUrl":224,"interestedLinkLabel":225},"Expertise",[209],{"title":210},"Development","Deliverables",[213,215],{"title":214},"Website",{"title":216},"Front-end guide","Platforms",[219,221],{"title":220},"Nunjucks",{"title":222},"Unit testing","Bekijk resultaat","https:\u002F\u002Fwww.funda.nl\u002F","www.funda.nl",[227],{"title":228,"body":204,"links":229,"mailchimpValue":204,"mailchimpName":204,"mailchimpId":204,"formType":230,"contactPerson":231},"Laten we bespreken wat we kunnen doen",[],"contact",{"name":232,"lastName":233,"jobTitle":234,"image":235},"Flip","van Eijndhoven","Business Director",{"url":236,"alt":104,"width":237,"height":238},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1760339734-flip-edit.jpeg",2201,2928,[240,243,246,249,252,255,258,261,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316],{"slug":241,"title":242},"quantum-inspire","Quantum Inspire",{"slug":244,"title":245},"life-terra","Life Terra",{"slug":247,"title":248},"geldmaat","Geldmaat",{"slug":250,"title":251},"pathe-thuis","Pathé Thuis",{"slug":253,"title":254},"viriciti","ViriCiti",{"slug":256,"title":257},"drop-and-fly","Drop & Fly",{"slug":259,"title":260},"15-apps-voor-wateronderzoek-bij-deltares","15 Apps voor wateronderzoek bij Deltares",{"slug":138,"title":141},{"slug":263,"title":264},"bouwen-is-macht","Bouwen is Macht",{"slug":266,"title":267},"world-water-atlas","World Water Atlas",{"slug":269,"title":270},"pick-up-10","Pick Up 10",{"slug":272,"title":273},"hike-one","Hike One",{"slug":275,"title":276},"dlr-inspectie-app","DLR Inspectie app",{"slug":278,"title":279},"tradus","Tradus",{"slug":281,"title":282},"trouw","Trouw, Volkskrant en Parool",{"slug":284,"title":285},"abn-amro-lening-kieswijzer","ABN-AMRO lening kieswijzer",{"slug":287,"title":288},"npo-dashboard","NPO Dashboard",{"slug":290,"title":291},"hotel-en-bungalowspecials","Hotel- en BungalowSpecials",{"slug":293,"title":294},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":296,"title":297},"2dehands-be","2dehands.be",{"slug":299,"title":300},"swipe-and-shop","Swipe & Shop",{"slug":302,"title":303},"ziggo-interactieve-televisie","Ziggo Interactieve Televisie",{"slug":305,"title":306},"giftforyou","GiftForYou",{"slug":308,"title":309},"commtrac","Commtrac",{"slug":311,"title":312},"stamp-postnl-design-system","PostNL",{"slug":314,"title":315},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":317,"title":318},"privacy-by-design-in-je-bol","In je bol",1776256144893]