[{"data":1,"prerenderedAt":740},["ShallowReactive",2],{"collection-blogs--1786878538":3,"_apollo:default":739},{"data":4,"meta":736},[5],{"id":6,"title":7,"excerpt":8,"slug":9,"createdAt":10,"updatedAt":11,"publishedAt":12,"backDate":13,"documentId":14,"imageUrl":15,"expertises":58,"author":18,"blocks":551,"seo":704},50,"Aan de slag met Storybook zonder JavaScript-framework","Het liefst gebruiken we allemaal goed gedocumenteerde UI-componenten in onze Front-End. Met Storybook kan je dit redelijk snel doen met bijvoorbeeld React, Angular, Vue of een ander framework.\n\nMaar je kunt dit ook voor elkaar krijgen zonder een JavaScript-framework, met gewone HTML & CSS! Hier is geen duidelijke documentatie over; daarom werk ik het in deze blog voor je uit.","aan-de-slag-met-storybook-zonder-javascript-framework","2023-10-13T10:26:32.250Z","2025-04-15T15:05:07.412Z","2024-01-16T13:30:16.278Z","2021-06-23","ndnnbnhbucnfksbqz6sf91wb",{"id":16,"name":17,"alternativeText":18,"caption":18,"width":19,"height":20,"formats":21,"hash":51,"ext":23,"mime":26,"size":52,"url":53,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":55,"updatedAt":55,"documentId":56,"publishedAt":57},299,"aan-de-slag-met-storybook-zonder-javascript-framework.jpg",null,1280,500,{"large":22,"small":31,"medium":37,"thumbnail":44},{"ext":23,"url":24,"hash":25,"mime":26,"name":27,"path":18,"size":28,"width":29,"height":30},".jpg","https://incredible-beef-2a6059b946.media.strapiapp.com/large_aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069.jpg","large_aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069","image/jpg","large_aan-de-slag-met-storybook-zonder-javascript-framework.jpg",56.47,1000,391,{"ext":23,"url":32,"hash":33,"mime":26,"name":34,"path":18,"size":35,"width":20,"height":36},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069.jpg","small_aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069","small_aan-de-slag-met-storybook-zonder-javascript-framework.jpg",15.74,195,{"ext":23,"url":38,"hash":39,"mime":26,"name":40,"path":18,"size":41,"width":42,"height":43},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069.jpg","medium_aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069","medium_aan-de-slag-met-storybook-zonder-javascript-framework.jpg",32.59,750,293,{"ext":23,"url":45,"hash":46,"mime":26,"name":47,"path":18,"size":48,"width":49,"height":50},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069.jpg","thumbnail_aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069","thumbnail_aan-de-slag-met-storybook-zonder-javascript-framework.jpg",4.54,245,96,"aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069",91.78,"https://incredible-beef-2a6059b946.media.strapiapp.com/aan_de_slag_met_storybook_zonder_javascript_framework_26f617a069.jpg","strapi-provider-upload-strapi-cloud","2023-10-13T10:22:35.523Z","s6kyqsnqf30ibn33h2x6bf7h","2026-01-05T12:38:34.018Z",[59,293],{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70,"image":71,"blocks":90,"midPageBlocks":162,"seo":18},2,"Front-End","Steeds complexer en steeds belangrijker","In een online wereld vol moderne webapplicaties is een goede Front-End onmisbaar. Het is nodig om aan de behoeften en verwachtingen van de gebruikers te voldoen. De interactie voor de gebruiker moet daarbij zo snel en optimaal mogelijk zijn. Met trots kunnen wij zeggen dat juist dáár de kracht van onze Front-End Developers zit.\n\nOnze ervaren Developers staan klaar om jouw team te versterken en te zorgen voor een optimale gebruikerservaring. Of je nu een tijdelijke aanvulling op je team nodig hebt of op zoek bent naar gespecialiseerde kennis voor een specifiek project, onze Front-End Developers zijn uitgerust om de uitdagingen van onze klanten aan te gaan en hun doelen te bereiken.","Onze Front-End developers zijn bedreven in diverse programmeertalen, frameworks en methodieken en daardoor breed inzetbaar.","front-end","2023-08-17T09:50:12.632Z","2024-12-13T12:15:57.609Z","2023-08-17T09:50:14.418Z",false,"l6bdicvjcb7ue03zpciuc888",{"id":72,"name":73,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":76,"hash":85,"ext":78,"mime":81,"size":86,"url":87,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":88,"updatedAt":88,"documentId":89,"publishedAt":57},15,"frontend.png",282,130,{"thumbnail":77},{"ext":78,"url":79,"hash":80,"mime":81,"name":82,"path":18,"size":83,"width":49,"height":84},".png","https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_frontend_d8fa4dbfc1.png","thumbnail_frontend_d8fa4dbfc1","image/png","thumbnail_frontend.png",5.3,113,"frontend_d8fa4dbfc1",1.19,"https://incredible-beef-2a6059b946.media.strapiapp.com/frontend_d8fa4dbfc1.png","2023-08-17T09:47:56.273Z","gyo35xg1rnualaf1vog9edz8",[91,139],{"__component":92,"id":93,"title":94,"aside":95,"postType":96,"limit":97,"expertise":98},"strapi.related-kennisbank-list",161,"Lees meer over Front-End Development","Onze blogs","alle",3,[99],{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70,"image":100,"blocks":103,"midPageBlocks":114,"seo":18},{"id":72,"name":73,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":101,"hash":85,"ext":78,"mime":81,"size":86,"url":87,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":88,"updatedAt":88,"documentId":89,"publishedAt":57},{"thumbnail":102},{"ext":78,"url":79,"hash":80,"mime":81,"name":82,"path":18,"size":83,"width":49,"height":84},[104,105],{"__component":92,"id":93,"title":94,"aside":95,"postType":96,"limit":97},{"__component":106,"id":107,"titleLeft":108,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113},"call-to-action.double",210,"Heb je een Front-End Developer nodig?","Neem contact met ons op","/contact","Zoek je een nieuwe baan?","Bekijk onze vacatures","/word-onze-collega/vacatures",[115,121,125,129,133],{"__component":116,"id":117,"title":118,"subTitle":18,"content":119,"callToActionText":120,"callToActionLink":110,"colorStyle":18,"showAsides":18},"global.alternating-page-section",20,"Experts in verschillende frameworks","De huidige markt wordt al enige jaren gedomineerd door de drie grote Front-End frameworks: Angular, Vue en React. Voor elk framework hebben wij experts die altijd up-to-date blijven van de laatste ontwikkelingen. Hierdoor kunnen wij aan alle wensen voldoen. Het houdt de interactie binnen het team ook levendig; we sparren vaak en organiseren regelmatig LevelUp-sessies om elkaar op de hoogte te houden.","Neem contact op voor de mogelijkheden",{"__component":116,"id":122,"title":123,"subTitle":18,"content":124,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},22,"Meer dan HTML, CSS en Javascript","Over het algemeen bestaat een Front-End framework uit HTML, CSS en Javascript, maar als Front-End competence in een multidisciplinaire agile omgeving doen we steeds meer. Of het nu gaat om de integratie van middleware zoals GraphQL of het inrichten van een pipeline voor productie- en staging-omgevingen. Wij weten wat we ermee moeten doen. Onze experts zijn zeer bekwaam en ervaren in de samenwerking met UX-designers. Door het gebruik van design patterns en design tokens zorgen ze voor een naadloze integratie van ontwerp naar ontwikkeling.",{"__component":116,"id":126,"title":127,"subTitle":18,"content":128,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},21,"Kennis up-to-date","De Front-End Developers krijgen ruim de mogelijkheid om hun kennis up-to-date te houden door trainingen te volgen en evenementen te bezoeken. Maar wat is leerzamer dan de opgedane kennis in de praktijk brengen? Daarvoor hebben we binnen ShareValue een aantal interne projecten lopen zoals de herbouw van onze website met Nuxt met een Strapi CMS, en de ontwikkeling van een eigen CV-generator met Angular. De kennis die onze experts opdoen, delen zij regelmatig in blogs.",{"__component":116,"id":130,"title":131,"subTitle":18,"content":132,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},23,"Full-Stack Development","Onze Developers zijn niet alleen experts in Front-End technieken, maar ook getraind in .NET en Azure. Dit verbreedt hun vaardigheden en maakt hen volwaardige Full-Stack Developers. Wat natuurlijk niet wegneemt dat wij trots zijn op onze specialistische kennis als Front-End Developers. ",{"__component":134,"id":135,"title":136,"callToActionText":137,"callToActionLinkUrl":138,"body":18},"call-to-action.single",100,"Wil je weten wat onze collega's allemaal kunnen?","Lees de klantcase over ons werk bij Rovict","/klantcases/rovict-vernieuwt-leerlingadministratie-en-leerlingvolgsysteem-esis",{"__component":106,"id":107,"titleLeft":108,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113,"iconUrlLeft":140,"iconUrlRight":153},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},6,"bulb.svg",71,70,"bulb_dd2e1d4efb",".svg","image/svg+xml",3.75,"https://incredible-beef-2a6059b946.media.strapiapp.com/bulb_dd2e1d4efb.svg","2023-08-17T08:31:37.036Z","2025-04-01T14:08:08.648Z","l2lglwkh4lf7ip36sjvs42rc",{"id":154,"name":155,"alternativeText":18,"caption":18,"width":144,"height":144,"formats":18,"hash":156,"ext":146,"mime":147,"size":157,"url":158,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":159,"updatedAt":160,"documentId":161,"publishedAt":57},8,"briefcase.svg","briefcase_679abae475",4.49,"https://incredible-beef-2a6059b946.media.strapiapp.com/briefcase_679abae475.svg","2023-08-17T08:31:37.038Z","2025-01-24T15:53:51.531Z","bfdftlvwhj35dm37dzv4aujf",[163,200,230,260,291],{"__component":116,"id":117,"title":118,"subTitle":18,"content":119,"callToActionText":120,"callToActionLink":110,"colorStyle":18,"showAsides":18,"imageUrl":164},{"id":165,"name":166,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":168,"hash":195,"ext":23,"mime":172,"size":196,"url":197,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":198,"updatedAt":198,"documentId":199,"publishedAt":57},775,"development.jpg",850,{"large":169,"small":176,"medium":182,"thumbnail":188},{"ext":23,"url":170,"hash":171,"mime":172,"name":173,"path":18,"size":174,"width":29,"height":175},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_development_eb51c16b40.jpg","large_development_eb51c16b40","image/jpeg","large_development.jpg",129.5,664,{"ext":23,"url":177,"hash":178,"mime":172,"name":179,"path":18,"size":180,"width":20,"height":181},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_development_eb51c16b40.jpg","small_development_eb51c16b40","small_development.jpg",47.86,332,{"ext":23,"url":183,"hash":184,"mime":172,"name":185,"path":18,"size":186,"width":42,"height":187},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_development_eb51c16b40.jpg","medium_development_eb51c16b40","medium_development.jpg",86.06,498,{"ext":23,"url":189,"hash":190,"mime":172,"name":191,"path":18,"size":192,"width":193,"height":194},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_development_eb51c16b40.jpg","thumbnail_development_eb51c16b40","thumbnail_development.jpg",14.65,235,156,"development_eb51c16b40",184.35,"https://incredible-beef-2a6059b946.media.strapiapp.com/development_eb51c16b40.jpg","2024-08-08T08:20:39.044Z","kpowm3xzp131qb3rneasct1x",{"__component":116,"id":122,"title":123,"subTitle":18,"content":124,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":201},{"id":202,"name":203,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":204,"hash":225,"ext":23,"mime":172,"size":226,"url":227,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":228,"updatedAt":228,"documentId":229,"publishedAt":57},776,"ux designer.jpg",{"large":205,"small":210,"medium":215,"thumbnail":220},{"ext":23,"url":206,"hash":207,"mime":172,"name":208,"path":18,"size":209,"width":29,"height":175},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_ux_designer_4d22c4e684.jpg","large_ux_designer_4d22c4e684","large_ux designer.jpg",95.41,{"ext":23,"url":211,"hash":212,"mime":172,"name":213,"path":18,"size":214,"width":20,"height":181},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_ux_designer_4d22c4e684.jpg","small_ux_designer_4d22c4e684","small_ux designer.jpg",30.12,{"ext":23,"url":216,"hash":217,"mime":172,"name":218,"path":18,"size":219,"width":42,"height":187},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_ux_designer_4d22c4e684.jpg","medium_ux_designer_4d22c4e684","medium_ux designer.jpg",59.67,{"ext":23,"url":221,"hash":222,"mime":172,"name":223,"path":18,"size":224,"width":193,"height":194},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_ux_designer_4d22c4e684.jpg","thumbnail_ux_designer_4d22c4e684","thumbnail_ux designer.jpg",8.79,"ux_designer_4d22c4e684",140.45,"https://incredible-beef-2a6059b946.media.strapiapp.com/ux_designer_4d22c4e684.jpg","2024-08-08T08:22:53.444Z","lzicd49svwe2coyrmyxkolub",{"__component":116,"id":126,"title":127,"subTitle":18,"content":128,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":231},{"id":232,"name":233,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":234,"hash":255,"ext":23,"mime":172,"size":256,"url":257,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":258,"updatedAt":258,"documentId":259,"publishedAt":57},777,"kennis opdoen.jpg",{"large":235,"small":240,"medium":245,"thumbnail":250},{"ext":23,"url":236,"hash":237,"mime":172,"name":238,"path":18,"size":239,"width":29,"height":175},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_kennis_opdoen_7e45a846f8.jpg","large_kennis_opdoen_7e45a846f8","large_kennis opdoen.jpg",147.32,{"ext":23,"url":241,"hash":242,"mime":172,"name":243,"path":18,"size":244,"width":20,"height":181},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_kennis_opdoen_7e45a846f8.jpg","small_kennis_opdoen_7e45a846f8","small_kennis opdoen.jpg",43.85,{"ext":23,"url":246,"hash":247,"mime":172,"name":248,"path":18,"size":249,"width":42,"height":187},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_kennis_opdoen_7e45a846f8.jpg","medium_kennis_opdoen_7e45a846f8","medium_kennis opdoen.jpg",90.65,{"ext":23,"url":251,"hash":252,"mime":172,"name":253,"path":18,"size":254,"width":193,"height":194},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_kennis_opdoen_7e45a846f8.jpg","thumbnail_kennis_opdoen_7e45a846f8","thumbnail_kennis opdoen.jpg",10.87,"kennis_opdoen_7e45a846f8",220.32,"https://incredible-beef-2a6059b946.media.strapiapp.com/kennis_opdoen_7e45a846f8.jpg","2024-08-08T08:25:10.656Z","q2bqhg65mnalhkgalkt2o2sq",{"__component":116,"id":130,"title":131,"subTitle":18,"content":132,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":261},{"id":262,"name":263,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":264,"hash":285,"ext":23,"mime":172,"size":286,"url":287,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":288,"updatedAt":289,"documentId":290,"publishedAt":57},778,"stack.jpg",{"large":265,"small":270,"medium":275,"thumbnail":280},{"ext":23,"url":266,"hash":267,"mime":172,"name":268,"path":18,"size":269,"width":29,"height":175},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_stack_fec3a2bfae.jpg","large_stack_fec3a2bfae","large_stack.jpg",95.19,{"ext":23,"url":271,"hash":272,"mime":172,"name":273,"path":18,"size":274,"width":20,"height":181},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_stack_fec3a2bfae.jpg","small_stack_fec3a2bfae","small_stack.jpg",29.21,{"ext":23,"url":276,"hash":277,"mime":172,"name":278,"path":18,"size":279,"width":42,"height":187},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_stack_fec3a2bfae.jpg","medium_stack_fec3a2bfae","medium_stack.jpg",58.57,{"ext":23,"url":281,"hash":282,"mime":172,"name":283,"path":18,"size":284,"width":193,"height":194},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_stack_fec3a2bfae.jpg","thumbnail_stack_fec3a2bfae","thumbnail_stack.jpg",8.24,"stack_fec3a2bfae",143.32,"https://incredible-beef-2a6059b946.media.strapiapp.com/stack_fec3a2bfae.jpg","2024-08-08T08:26:50.506Z","2024-12-09T10:18:46.269Z","kpz9iiz9dr551k3umhmtwy3k",{"__component":134,"id":135,"title":136,"callToActionText":137,"callToActionLinkUrl":138,"body":18,"imageUrl":292},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":294,"title":295,"subTitle":296,"description":297,"shortDescription":298,"slug":299,"createdAt":300,"updatedAt":301,"publishedAt":302,"isCoreExpertise":303,"documentId":304,"image":305,"blocks":319,"midPageBlocks":456,"seo":546},10,"Development","Maatwerkoplossingen voor ieder vraagstuk","Ons Development-team biedt oplossingen die de verwachtingen van onze opdrachtgevers overtreffen. Wij zijn experts op het gebied van alle aspecten van Development, wat ons in staat stelt om veelzijdige en schaalbare oplossingen te creëren. Van gebruiksvriendelijke interfaces tot krachtige Back-End-architecturen: wij hebben de kennis en ervaring om jouw project tot een succes te maken.","Ons Development-team biedt oplossingen die de verwachtingen van onze opdrachtgevers overtreffen. Wij zijn experts op het gebied van alle aspecten van Development, wat ons in staat stelt om veelzijdige en schaalbare oplossingen te creëren. ","development","2024-12-13T12:15:40.484Z","2025-04-11T13:13:55.384Z","2024-12-13T12:15:42.976Z",true,"lpzfadokpxn5sdnx9czcdg47",{"id":306,"name":307,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":308,"hash":314,"ext":78,"mime":81,"size":60,"url":315,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":316,"updatedAt":317,"documentId":318,"publishedAt":57},950,"Logo Development 2025 web.png",{"thumbnail":309},{"ext":78,"url":310,"hash":311,"mime":81,"name":312,"path":18,"size":313,"width":49,"height":84},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_Logo_Development_2025_web_d7711df072.png","thumbnail_Logo_Development_2025_web_d7711df072","thumbnail_Logo Development 2025 web.png",8.58,"Logo_Development_2025_web_d7711df072","https://incredible-beef-2a6059b946.media.strapiapp.com/Logo_Development_2025_web_d7711df072.png","2024-12-17T15:02:47.479Z","2024-12-19T08:35:22.054Z","okwfs117fps338v5fj5dnrpb",[320,435],{"__component":92,"id":321,"title":322,"aside":18,"postType":96,"limit":97,"expertise":323},179,"Lees meer over Development",[324,373,386],{"id":294,"title":295,"subTitle":296,"description":297,"shortDescription":298,"slug":299,"createdAt":300,"updatedAt":301,"publishedAt":302,"isCoreExpertise":303,"documentId":304,"image":325,"blocks":328,"midPageBlocks":333,"seo":356},{"id":306,"name":307,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":326,"hash":314,"ext":78,"mime":81,"size":60,"url":315,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":316,"updatedAt":317,"documentId":318,"publishedAt":57},{"thumbnail":327},{"ext":78,"url":310,"hash":311,"mime":81,"name":312,"path":18,"size":313,"width":49,"height":84},[329,330],{"__component":92,"id":321,"title":322,"aside":18,"postType":96,"limit":97},{"__component":106,"id":331,"titleLeft":332,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113},251,"Heb je een Developer nodig?",[334,339,344,347,352],{"__component":116,"id":335,"title":336,"subTitle":18,"content":337,"callToActionText":18,"callToActionLink":18,"colorStyle":338,"showAsides":69},47,"Optimale gebruikerservaring","Een goede Front-End is meer dan alleen een aantrekkelijke interface; het vormt de schakel tussen technologie en eindgebruiker. Onze Developers combineren hun kennis van frameworks zoals React, Angular en Vue met ervaring in geavanceerde technologieën zoals GraphQL en CI/CD pipelines. Dit stelt ons in staat om interactieve, intuïtieve en betrouwbare applicaties te ontwikkelen die voldoen aan de hoogste standaarden.\n\nWij werken nauw samen met UX-designers om via design patterns en design tokens een naadloze integratie van ontwerp naar functionaliteit te realiseren. Dankzij regelmatige LevelUp-sessies, interne projecten en kennisdeling blijven onze Front-End specialisten altijd up-to-date.","Sugar Glaze",{"__component":116,"id":340,"title":341,"subTitle":18,"content":342,"callToActionText":18,"callToActionLink":18,"colorStyle":343,"showAsides":69},49,"Betrouwbaarheid en schaalbaarheid","Voor robuuste Back-End-oplossingen vertrouwen we op onze kennis van .NET. Of het nu gaat om het bouwen van nieuwe applicaties, het onderhouden van bestaande software of het implementeren van geavanceerde authenticatie- en autorisatiesystemen: ons team levert maatwerk dat aansluit bij de specifieke wensen en behoeften van jouw organisatie.\n\nHierbij maken we onder andere gebruik van onze kennis van Azure-services zoals Function Apps, Service Bus en App Services, maar ook tools als Docker en Kubernetes om veilige, schaalbare oplossingen te realiseren.\n\nOnze focus op grondige tests – van unit tests tot integratietests – garandeert stabiliteit en betrouwbaarheid.","White",{"__component":116,"id":6,"title":345,"subTitle":18,"content":346,"callToActionText":18,"callToActionLink":18,"colorStyle":338,"showAsides":69},"Full-Stack mogelijkheden","Wat ons uniek maakt, is onze combinatie van Front-End en .NET-expertise. Onze Developers zijn niet alleen gespecialiseerd in het creëren van intuïtieve interfaces, maar beheersen ook de complexiteit van Back-End-architectuur en Azure-integraties. Dit maakt hen volwaardige Full-Stack Developers die moeiteloos schakelen tussen de verschillende onderdelen van jouw project.",{"__component":116,"id":348,"title":349,"subTitle":18,"content":350,"callToActionText":351,"callToActionLink":110,"colorStyle":343,"showAsides":69},48,"Samen naar succes","Onze aanpak is erop gericht om samen met jou het optimale resultaat te behalen. Door proactief mee te denken en onze kennis te delen, zorgen we ervoor dat jouw project voldoet aan de hoogste standaarden van gebruiksvriendelijkheid, betrouwbaarheid en veiligheid. Of het nu gaat om een tijdelijke versterking van je team of volledige projectondersteuning: ons Development-team staat voor je klaar.\n\nOntdek wat wij voor jouw project kunnen betekenen."," Neem contact met ons op voor meer informatie!",{"__component":134,"id":353,"title":354,"callToActionText":137,"callToActionLinkUrl":355,"body":18},103,"Wil je weten wat onze collega’s allemaal kunnen?","https://www.sharevalue.nl/klantcases/rovict-vernieuwt-leerlingadministratie-en-leerlingvolgsysteem-esis",{"id":357,"metaTitle":358,"metaDescription":359,"structuredData":360},27,"Maatwerk software & integraties – ShareValue Development","Van webapps tot koppelingen: onze developers bouwen slimme oplossingen die passen bij jouw Microsoft-omgeving.",{"url":361,"@type":362,"@context":363,"provider":364,"areaServed":368,"description":371,"serviceType":372},"https://www.sharevalue.nl/wat-we-doen/development","Service","https://schema.org",{"url":365,"name":366,"@type":367},"https://www.sharevalue.nl","ShareValue","Organization",{"name":369,"@type":370},"Nederland","Country","Onze developers realiseren maatwerkoplossingen binnen Microsoft-omgevingen. Denk aan webapplicaties, API-integraties, extensies voor Microsoft 365 en koppelingen met externe systemen. Technisch sterk én begrijpelijk ingericht.","Maatwerk softwareontwikkeling en integraties",{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70,"image":374,"blocks":377,"midPageBlocks":380,"seo":18},{"id":72,"name":73,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":375,"hash":85,"ext":78,"mime":81,"size":86,"url":87,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":88,"updatedAt":88,"documentId":89,"publishedAt":57},{"thumbnail":376},{"ext":78,"url":79,"hash":80,"mime":81,"name":82,"path":18,"size":83,"width":49,"height":84},[378,379],{"__component":92,"id":93,"title":94,"aside":95,"postType":96,"limit":97},{"__component":106,"id":107,"titleLeft":108,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113},[381,382,383,384,385],{"__component":116,"id":117,"title":118,"subTitle":18,"content":119,"callToActionText":120,"callToActionLink":110,"colorStyle":18,"showAsides":18},{"__component":116,"id":122,"title":123,"subTitle":18,"content":124,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},{"__component":116,"id":126,"title":127,"subTitle":18,"content":128,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},{"__component":116,"id":130,"title":131,"subTitle":18,"content":132,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},{"__component":134,"id":135,"title":136,"callToActionText":137,"callToActionLinkUrl":138,"body":18},{"id":97,"title":387,"subTitle":296,"description":388,"shortDescription":389,"slug":390,"createdAt":391,"updatedAt":392,"publishedAt":393,"isCoreExpertise":69,"documentId":394,"image":395,"blocks":409,"midPageBlocks":417,"seo":18},"Microsoft .NET","Ons team van .NET-experts staat niet alleen klaar om onze klanten te ondersteunen bij diverse implementatie uitdagingen, maar we zijn ook gespecialiseerd in het testen van applicaties op verschillende niveaus, zoals unit tests, integratietests en acceptatietests. We streven naar uitmuntende testdekking om de stabiliteit en betrouwbaarheid van de applicaties te waarborgen.\n\nDaarnaast zijn we bedreven in het gebruik van verschillende Azure-services om schaalbare en veilige oplossingen te bieden aan onze klanten. Zo bieden we met Azure DevOps krachtige tools voor het beheren van de ontwikkeling, het automatiseren van tests en het geautomatiseerd uitrollen naar acceptatie- of productieomgevingen met CI/CD-pipelines.\n\nHet samenwerken met onze klanten staat centraal in ons werk, en we denken proactief mee om samen de meest optimale oplossingen te realiseren.","In de praktijk komen de .NET developers van ShareValue terecht in allerlei verschillende branches met uiteenlopende technische uitdagingen.","dotnet","2023-08-17T11:19:57.991Z","2024-12-13T12:16:04.480Z","2023-08-17T11:22:08.050Z","v9pl553hsjk98esvs5gzoso3",{"id":396,"name":397,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":398,"hash":404,"ext":78,"mime":81,"size":405,"url":406,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":407,"updatedAt":407,"documentId":408,"publishedAt":57},17,"dotnet_logo.png",{"thumbnail":399},{"ext":78,"url":400,"hash":401,"mime":81,"name":402,"path":18,"size":403,"width":49,"height":84},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_dotnet_logo_d38dbc3865.png","thumbnail_dotnet_logo_d38dbc3865","thumbnail_dotnet_logo.png",7.14,"dotnet_logo_d38dbc3865",2.93,"https://incredible-beef-2a6059b946.media.strapiapp.com/dotnet_logo_d38dbc3865.png","2023-08-17T09:47:56.313Z","nnimzsossci29qmi8z0texlp",[410,413],{"__component":92,"id":411,"title":412,"aside":18,"postType":96,"limit":97},167," Lees meer over .NET Development",{"__component":106,"id":414,"titleLeft":415,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":416,"callToActionTextRight":109,"callToActionLinkUrlRight":110},212,"Heb je een .NET expert nodig?","Weten welke expert op dit moment beschikbaar is?",[418,423,427,431],{"__component":116,"id":419,"title":420,"subTitle":18,"content":421,"callToActionText":422,"callToActionLink":110,"colorStyle":18,"showAsides":18},36,"Bouwen en testen","Onze .NET-experts kunnen uiteraard goede en betrouwbare applicaties ontwikkelen met de laatste .NET-versies. Ook zijn onze collega’s ervaren in het onderhouden van oudere software. We kunnen je helpen met het upgraden en uitbreiden van je applicatie zodat deze aan de laatste wensen en eisen voldoet. Het uitvoeren van uitgebreide unit- en integratietests om de stabiliteit van applicaties te waarborgen, wordt meegenomen als standaard onderdeel van het werk. Met een focus op grondige testdekking streven we ernaar om eventuele bugs vroegtijdig op te sporen en op te lossen, waardoor de algehele kwaliteit van jouw product wordt verbeterd.  \n\nVan Blazor Front-End of REST API’s tot database communicatie, onze .NET-experts hebben er ruime ervaring mee.","Weten wat onze experts voor jou kunnen doen?",{"__component":116,"id":424,"title":425,"subTitle":18,"content":426,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},37,"Combineren met Azure","Wil je profiteren van Azure-services voor jouw project? Ons team van experts kan je helpen met het selecteren en opzetten van de juiste services. Of je gebruik wil maken van App services, Function Apps, storage of database oplossingen of bijvoorbeeld een Service Bus, onze experts kunnen je helpen bij het kiezen en het realiseren van stabiele, schaalbare en veilige oplossingen die voldoen aan jouw specifieke behoeften.",{"__component":116,"id":428,"title":429,"subTitle":18,"content":430,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},35,"Houd het veilig!","Om de toegang tot je producten veilig te houden, kan ons team van .NET-experts je helpen bij het opzetten en onderhouden van authenticatie en autorisatie. Onze experts zijn ervaren in het opzetten de juiste entra diensten zodat de toegang tot zowel Front-End als Back-End of deamon-processen op een juiste manier afgehandeld wordt. Ook kunnen we je helpen met het opzetten van verschillende groepen, rechten en rollen, en deze op de juiste manier toepassen binnen de applicatie zodat onterechte toegang op functieniveau geregeld kan worden. Bij het opzetten en implementeren wordt er rekening gehouden met het reduceren van de administratieve overhead zonder concessies te doen aan de beveiliging.",{"__component":134,"id":432,"title":136,"callToActionText":433,"callToActionLinkUrl":434,"body":18},46,"Lees de klantcase over ons werk bij KPN","/klantcases/de-continue-bereikbaarheid-van-een-alarmcentrale",{"__component":106,"id":331,"titleLeft":332,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113,"iconUrlLeft":436,"iconUrlRight":447},{"id":437,"name":438,"alternativeText":18,"caption":18,"width":439,"height":440,"formats":18,"hash":441,"ext":146,"mime":147,"size":442,"url":443,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":444,"updatedAt":445,"documentId":446,"publishedAt":57},7,"people.svg",83,60,"people_6bb632d0d7",1.47,"https://incredible-beef-2a6059b946.media.strapiapp.com/people_6bb632d0d7.svg","2023-08-17T08:31:37.039Z","2024-09-13T08:11:42.408Z","iyvqylwtkx5qokq2hk77ppgf",{"id":448,"name":449,"alternativeText":18,"caption":18,"width":340,"height":440,"formats":18,"hash":450,"ext":146,"mime":147,"size":451,"url":452,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":453,"updatedAt":454,"documentId":455,"publishedAt":57},372,"magnifier.svg","magnifier_d084afba36",1.05,"https://incredible-beef-2a6059b946.media.strapiapp.com/magnifier_d084afba36.svg","2023-11-03T11:13:25.446Z","2025-12-09T15:45:48.015Z","e7czsfz9jg7oi93q44vomebz",[457,477,507,514,544],{"__component":116,"id":335,"title":336,"subTitle":18,"content":337,"callToActionText":18,"callToActionLink":18,"colorStyle":338,"showAsides":69,"imageUrl":458},{"id":459,"name":166,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":460,"hash":473,"ext":23,"mime":172,"size":196,"url":474,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":475,"updatedAt":475,"documentId":476,"publishedAt":57},904,{"large":461,"small":464,"medium":467,"thumbnail":470},{"ext":23,"url":462,"hash":463,"mime":172,"name":173,"path":18,"size":174,"width":29,"height":175},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_development_6e5abdca44.jpg","large_development_6e5abdca44",{"ext":23,"url":465,"hash":466,"mime":172,"name":179,"path":18,"size":180,"width":20,"height":181},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_development_6e5abdca44.jpg","small_development_6e5abdca44",{"ext":23,"url":468,"hash":469,"mime":172,"name":185,"path":18,"size":186,"width":42,"height":187},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_development_6e5abdca44.jpg","medium_development_6e5abdca44",{"ext":23,"url":471,"hash":472,"mime":172,"name":191,"path":18,"size":192,"width":193,"height":194},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_development_6e5abdca44.jpg","thumbnail_development_6e5abdca44","development_6e5abdca44","https://incredible-beef-2a6059b946.media.strapiapp.com/development_6e5abdca44.jpg","2024-12-13T12:36:11.969Z","qqi9wubjpzs8w6daj98mtc7a",{"__component":116,"id":340,"title":341,"subTitle":18,"content":342,"callToActionText":18,"callToActionLink":18,"colorStyle":343,"showAsides":69,"imageUrl":478},{"id":479,"name":480,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":481,"hash":502,"ext":23,"mime":172,"size":503,"url":504,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":505,"updatedAt":505,"documentId":506,"publishedAt":57},791,"service bus.jpg",{"large":482,"small":487,"medium":492,"thumbnail":497},{"ext":23,"url":483,"hash":484,"mime":172,"name":485,"path":18,"size":486,"width":29,"height":175},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_service_bus_2b48e3a7cc.jpg","large_service_bus_2b48e3a7cc","large_service bus.jpg",82.82,{"ext":23,"url":488,"hash":489,"mime":172,"name":490,"path":18,"size":491,"width":20,"height":181},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_service_bus_2b48e3a7cc.jpg","small_service_bus_2b48e3a7cc","small_service bus.jpg",29.35,{"ext":23,"url":493,"hash":494,"mime":172,"name":495,"path":18,"size":496,"width":42,"height":187},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_service_bus_2b48e3a7cc.jpg","medium_service_bus_2b48e3a7cc","medium_service bus.jpg",54.72,{"ext":23,"url":498,"hash":499,"mime":172,"name":500,"path":18,"size":501,"width":193,"height":194},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_service_bus_2b48e3a7cc.jpg","thumbnail_service_bus_2b48e3a7cc","thumbnail_service bus.jpg",8.71,"service_bus_2b48e3a7cc",117.51,"https://incredible-beef-2a6059b946.media.strapiapp.com/service_bus_2b48e3a7cc.jpg","2024-08-09T08:35:35.231Z","rbpawsulv6vrsistrk2yupwg",{"__component":116,"id":6,"title":345,"subTitle":18,"content":346,"callToActionText":18,"callToActionLink":18,"colorStyle":338,"showAsides":69,"imageUrl":508},{"id":262,"name":263,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":509,"hash":285,"ext":23,"mime":172,"size":286,"url":287,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":288,"updatedAt":289,"documentId":290,"publishedAt":57},{"large":510,"small":511,"medium":512,"thumbnail":513},{"ext":23,"url":266,"hash":267,"mime":172,"name":268,"path":18,"size":269,"width":29,"height":175},{"ext":23,"url":271,"hash":272,"mime":172,"name":273,"path":18,"size":274,"width":20,"height":181},{"ext":23,"url":276,"hash":277,"mime":172,"name":278,"path":18,"size":279,"width":42,"height":187},{"ext":23,"url":281,"hash":282,"mime":172,"name":283,"path":18,"size":284,"width":193,"height":194},{"__component":116,"id":348,"title":349,"subTitle":18,"content":350,"callToActionText":351,"callToActionLink":110,"colorStyle":343,"showAsides":69,"imageUrl":515},{"id":516,"name":517,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":518,"hash":539,"ext":23,"mime":172,"size":540,"url":541,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":542,"updatedAt":542,"documentId":543,"publishedAt":57},789,"teamwork.jpg",{"large":519,"small":524,"medium":529,"thumbnail":534},{"ext":23,"url":520,"hash":521,"mime":172,"name":522,"path":18,"size":523,"width":29,"height":175},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_teamwork_8f4a7b0c14.jpg","large_teamwork_8f4a7b0c14","large_teamwork.jpg",80.4,{"ext":23,"url":525,"hash":526,"mime":172,"name":527,"path":18,"size":528,"width":20,"height":181},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_teamwork_8f4a7b0c14.jpg","small_teamwork_8f4a7b0c14","small_teamwork.jpg",27.14,{"ext":23,"url":530,"hash":531,"mime":172,"name":532,"path":18,"size":533,"width":42,"height":187},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_teamwork_8f4a7b0c14.jpg","medium_teamwork_8f4a7b0c14","medium_teamwork.jpg",51.59,{"ext":23,"url":535,"hash":536,"mime":172,"name":537,"path":18,"size":538,"width":193,"height":194},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_teamwork_8f4a7b0c14.jpg","thumbnail_teamwork_8f4a7b0c14","thumbnail_teamwork.jpg",8.11,"teamwork_8f4a7b0c14",116.53,"https://incredible-beef-2a6059b946.media.strapiapp.com/teamwork_8f4a7b0c14.jpg","2024-08-08T10:07:23.468Z","uo85gvimf7llsbaoahqw08m3",{"__component":134,"id":353,"title":354,"callToActionText":137,"callToActionLinkUrl":355,"body":18,"imageUrl":545},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":357,"metaTitle":358,"metaDescription":359,"structuredData":547,"metaImage":18,"metaSocial":550},{"url":361,"@type":362,"@context":363,"provider":548,"areaServed":549,"description":371,"serviceType":372},{"url":365,"name":366,"@type":367},{"name":369,"@type":370},[],[552,557,560,563,566,569,572,575,578,581,585,588,591,593,595,598,602,696],{"__component":553,"id":554,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":556,"introductionText":18},"global.pagesection",763,"","## De installatie van Storybook\n\nVoeg Storybook toe door de volgende opdracht in de terminal uit te voeren.\n\n_NPX SB INIT_\n\nMet deze opdracht worden alle afhankelijkheden voor Storybook toegevoegd en worden de eerste bestanden gemaakt, zodat je meteen aan de slag kunt.\n\nNa installatie krijg je de vraag “Do you want to manually choose a Storybook project type to install?”. Op deze vraag antwoord je met “yes”.\n\nDe tweede vraag die je krijgt is “Please choose a project type from the list”, hierop antwoord je met “HTML”.\n\nNu zal de CLI alles klaarzetten om Storybook met gewone HTML te gebruiken.\n\nRun npm run storybook wanneer de installatie is voltooid.",{"__component":553,"id":558,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":559,"introductionText":18},764,"## Algemene instellingen\n\nWanneer je je directory bekijkt, zie je een map .storybook. In deze map bevinden zich twee bestanden, main.js en preview.js .\n\nIn het bestand main.js kan je instellen in welke map wordt gecontroleerd op \\*.stories.js-bestanden (andere bestandsextensies zijn mogelijk). Storybook heeft ook een plug-insysteem genaamd addons die je hier ook kunt toevoegen.\n\nIn het preview.js-bestand kan je alles toevoegen dat moet worden geladen wanneer je een voorbeeld van je UI-componenten bekijkt. Voeg bijvoorbeeld je globale CSS-bestand of pictogramlettertype toe om het beschikbaar te hebben in alle component.",{"__component":553,"id":561,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":562,"introductionText":18},765,"## Voorbeeld storyfile voor gewone HTML\n\nIn de map stories vind je het bestand Button.stories.js. Het ziet er zo uit:\n\n     \n    import { createButton } from './Button';\n    \n    export default {\n      title: 'Example/Button',\n      argTypes: {\n        label: { control: 'text' },\n        primary: { control: 'boolean' },\n        backgroundColor: { control: 'color' },\n        size: {\n          control: { type: 'select', options: ['small', 'medium', 'large'] },\n        },\n        onClick: { action: 'onClick' },\n      },\n    };\n    \n    const Template = ({ label, ...args }) => {\n      // You can either use a function to create DOM elements or use a plain html string!\n      // return `\u003Cdiv>${label}\u003C/div>`;\n      return createButton({ label, ...args });\n    };\n    \n    export const Primary = Template.bind({});\n    Primary.args = {\n      primary: true,\n      label: 'Button',\n    };\n    \n    export const Secondary = Template.bind({});\n    Secondary.args = {\n      label: 'Button',\n    };\n    \n    export const Large = Template.bind({});\n    Large.args = {\n      size: 'large',\n      label: 'Button',\n    };\n    \n    export const Small = Template.bind({});\n    Small.args = {\n      size: 'small',\n      label: 'Button',\n    };",{"__component":553,"id":564,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":565,"introductionText":18},766,"Dit is een uitstekend voorbeeld van hoe een story file eruitziet. De code in Button.js maakt een \u003C button>-element aan.\n\n     \n    import './button.css';\n    \n    export const createButton = ({\n      primary = false,\n      size = 'medium',\n      backgroundColor,\n      label,\n      onClick,\n    }) => {\n      const btn = document.createElement('button');\n      btn.type = 'button';\n      btn.innerText = label;\n      btn.addEventListener('click', onClick);\n    \n      const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n      btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');\n    \n      btn.style.backgroundColor = backgroundColor;\n    \n      return btn;\n    };",{"__component":553,"id":567,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":568,"introductionText":18},767,"Ook al ziet het er goed en duidelijk uit, de manier waarop de createButton een \u003C button>-tag maakt, laat ons geen duidelijk codevoorbeeld genereren om te kopiëren en te plakken. Dus we gaan het een beetje anders doen.",{"__component":553,"id":570,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":571,"introductionText":18},768,"## Eenvoudige HTML-story met codevoorbeeld\n\nOm dit te laten werken, hebben we een Storybook-add-on nodig. Voer de onderstaande code uit om het te installeren.\n\n_npm i_ _@ storybook/addon-storysource_\n\nVoeg het na installatie toe aan het .storybook/main.js-bestand zoals hieronder.\n\n     \n    module.exports = {\n      \"stories\": [\n        \"../stories/**/*.stories.mdx\",\n        \"../stories/**/*.stories.@(js|jsx|ts|tsx)\"\n      ],\n      \"addons\": [\n        \"@storybook/addon-links\",\n        \"@storybook/addon-essentials\",\n        \"@storybook/addon-storysource\"\n      ]\n    }",{"__component":553,"id":573,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":574,"introductionText":18},769,"Maak vervolgens een map helpers in de verhalenmap. Maak in die map een bestand “code-example.js”. In dit bestand zullen we een helperfunctie maken die gegevens genereert voor ons codevoorbeeld.\n\n     \n    function addCodeExample(component, templateConfig) {\n      if(!component || !templateConfig) return\n    \n      component.parameters = {\n        docs: {\n          source: {\n            code: templateConfig({\n              label: component?.args?.label,\n              className: component?.args?.className\n            })\n          }\n        }\n      }\n    \n      return component\n    }\n    \n    export { addCodeExample }",{"__component":553,"id":576,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":577,"introductionText":18},770,"In deze functie nemen we de component en de templateConfig als parameters. Deze parameters geven ons informatie van de componenten zelf.\n\nVoor dit voorbeeld zal ik de lengte van de Button.stories.js minimaliseren door slechts één voorbeeld van een knop toe te voegen. Dus kopieer en plak de onderstaande code.\n\n     \n    export default {\n      title: 'Example/Button',\n      argTypes: {\n        label: { control: 'text' },\n        className: { control: 'text' }\n      },\n    };\n    \n    const Template = ({ label, className }) => {\n      return `\u003Cbutton class=\"${className}\">${label}\u003C/button>`;\n    };\n    \n    export const Primary = Template.bind({});\n    Primary.args = {\n      label: 'Button',\n      className: 'button-primary',\n    };",{"__component":553,"id":579,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":580,"introductionText":18},771,"Wanneer je de button-component bekijkt in Storybook, is jouw codevoorbeeld nog niet klaar om te knippen en te plakken.",{"__component":553,"id":582,"title":18,"asideText":583,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":584,"introductionText":18},772,"Button-component in Storybook","![](https://www.sharevalue.nl/images/sharevalue/blogs/storybook_1.png)",{"__component":553,"id":586,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":587,"introductionText":18},773,"Door de functie te gebruiken om dat voorbeeld te genereren, zie je het verschil.\n\n     \n    import { addCodeExample } from './helpers/code-example'\n    \n    export default {\n      title: 'Example/Button',\n      argTypes: {\n        label: { control: 'text' },\n        className: { control: 'text' }\n      },\n    };\n    \n    const Template = ({ label, className }) => {\n      return `\u003Cbutton class=\"${className}\">${label}\u003C/button>`;\n    };\n    \n    export const Primary = Template.bind({});\n    Primary.args = {\n      label: 'Button',\n      className: 'button-primary',\n    };\n    addCodeExample(Primary, Template)",{"__component":553,"id":589,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":590,"introductionText":18},774,"Hier kan je zien dat ik Primary als de eerste parameter en Template aan de volgende heb toegevoegd. Dit genereert de eenvoudige HTML-code die je kunt kopiëren en plakken.",{"__component":553,"id":165,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":592,"introductionText":18},"![](https://www.sharevalue.nl/images/sharevalue/blogs/storybook_2.png)",{"__component":553,"id":202,"title":18,"asideText":555,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":594,"introductionText":18},"## Conclusie\n\nNu je weet hoe je Storybook met gewone HTML en CSS moet gebruiken, kan je jouw UI-component veel beter maken!\n\nStorybook is een geweldig hulpmiddel om in elke webtoepassing te gebruiken! Ik ben er super blij mee! Als je hun project op Github wilt bekijken en wat waardering wilt tonen, bekijk ze dan hier: [https://github.com/storybookjs/storybook](https://github.com/storybookjs/storybook)\n\nBen je ook van plan om Storybook te gebruiken met HTML? [Laat het me weten!](/contact)",{"__component":596,"id":597,"title":18,"showBlankAside":303},"global.social-sharing",89,{"__component":599,"id":335,"name":600,"jobTitle":601},"strapi.author-card","Raymon","Developer",{"__component":92,"id":603,"title":322,"aside":18,"postType":96,"limit":97,"expertise":604},58,[605,647],{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70,"image":606,"blocks":609,"midPageBlocks":616,"seo":18},{"id":72,"name":73,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":607,"hash":85,"ext":78,"mime":81,"size":86,"url":87,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":88,"updatedAt":88,"documentId":89,"publishedAt":57},{"thumbnail":608},{"ext":78,"url":79,"hash":80,"mime":81,"name":82,"path":18,"size":83,"width":49,"height":84},[610,613],{"__component":92,"id":93,"title":94,"aside":95,"postType":96,"limit":97,"expertise":611},[612],{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70},{"__component":106,"id":107,"titleLeft":108,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113,"iconUrlLeft":614,"iconUrlRight":615},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":154,"name":155,"alternativeText":18,"caption":18,"width":144,"height":144,"formats":18,"hash":156,"ext":146,"mime":147,"size":157,"url":158,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":159,"updatedAt":160,"documentId":161,"publishedAt":57},[617,624,631,638,645],{"__component":116,"id":117,"title":118,"subTitle":18,"content":119,"callToActionText":120,"callToActionLink":110,"colorStyle":18,"showAsides":18,"imageUrl":618},{"id":165,"name":166,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":619,"hash":195,"ext":23,"mime":172,"size":196,"url":197,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":198,"updatedAt":198,"documentId":199,"publishedAt":57},{"large":620,"small":621,"medium":622,"thumbnail":623},{"ext":23,"url":170,"hash":171,"mime":172,"name":173,"path":18,"size":174,"width":29,"height":175},{"ext":23,"url":177,"hash":178,"mime":172,"name":179,"path":18,"size":180,"width":20,"height":181},{"ext":23,"url":183,"hash":184,"mime":172,"name":185,"path":18,"size":186,"width":42,"height":187},{"ext":23,"url":189,"hash":190,"mime":172,"name":191,"path":18,"size":192,"width":193,"height":194},{"__component":116,"id":122,"title":123,"subTitle":18,"content":124,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":625},{"id":202,"name":203,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":626,"hash":225,"ext":23,"mime":172,"size":226,"url":227,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":228,"updatedAt":228,"documentId":229,"publishedAt":57},{"large":627,"small":628,"medium":629,"thumbnail":630},{"ext":23,"url":206,"hash":207,"mime":172,"name":208,"path":18,"size":209,"width":29,"height":175},{"ext":23,"url":211,"hash":212,"mime":172,"name":213,"path":18,"size":214,"width":20,"height":181},{"ext":23,"url":216,"hash":217,"mime":172,"name":218,"path":18,"size":219,"width":42,"height":187},{"ext":23,"url":221,"hash":222,"mime":172,"name":223,"path":18,"size":224,"width":193,"height":194},{"__component":116,"id":126,"title":127,"subTitle":18,"content":128,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":632},{"id":232,"name":233,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":633,"hash":255,"ext":23,"mime":172,"size":256,"url":257,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":258,"updatedAt":258,"documentId":259,"publishedAt":57},{"large":634,"small":635,"medium":636,"thumbnail":637},{"ext":23,"url":236,"hash":237,"mime":172,"name":238,"path":18,"size":239,"width":29,"height":175},{"ext":23,"url":241,"hash":242,"mime":172,"name":243,"path":18,"size":244,"width":20,"height":181},{"ext":23,"url":246,"hash":247,"mime":172,"name":248,"path":18,"size":249,"width":42,"height":187},{"ext":23,"url":251,"hash":252,"mime":172,"name":253,"path":18,"size":254,"width":193,"height":194},{"__component":116,"id":130,"title":131,"subTitle":18,"content":132,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":639},{"id":262,"name":263,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":640,"hash":285,"ext":23,"mime":172,"size":286,"url":287,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":288,"updatedAt":289,"documentId":290,"publishedAt":57},{"large":641,"small":642,"medium":643,"thumbnail":644},{"ext":23,"url":266,"hash":267,"mime":172,"name":268,"path":18,"size":269,"width":29,"height":175},{"ext":23,"url":271,"hash":272,"mime":172,"name":273,"path":18,"size":274,"width":20,"height":181},{"ext":23,"url":276,"hash":277,"mime":172,"name":278,"path":18,"size":279,"width":42,"height":187},{"ext":23,"url":281,"hash":282,"mime":172,"name":283,"path":18,"size":284,"width":193,"height":194},{"__component":134,"id":135,"title":136,"callToActionText":137,"callToActionLinkUrl":138,"body":18,"imageUrl":646},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":294,"title":295,"subTitle":296,"description":297,"shortDescription":298,"slug":299,"createdAt":300,"updatedAt":301,"publishedAt":302,"isCoreExpertise":303,"documentId":304,"image":648,"blocks":651,"midPageBlocks":660,"seo":691},{"id":306,"name":307,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":649,"hash":314,"ext":78,"mime":81,"size":60,"url":315,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":316,"updatedAt":317,"documentId":318,"publishedAt":57},{"thumbnail":650},{"ext":78,"url":310,"hash":311,"mime":81,"name":312,"path":18,"size":313,"width":49,"height":84},[652,657],{"__component":92,"id":321,"title":322,"aside":18,"postType":96,"limit":97,"expertise":653},[654,655,656],{"id":294,"title":295,"subTitle":296,"description":297,"shortDescription":298,"slug":299,"createdAt":300,"updatedAt":301,"publishedAt":302,"isCoreExpertise":303,"documentId":304},{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70},{"id":97,"title":387,"subTitle":296,"description":388,"shortDescription":389,"slug":390,"createdAt":391,"updatedAt":392,"publishedAt":393,"isCoreExpertise":69,"documentId":394},{"__component":106,"id":331,"titleLeft":332,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113,"iconUrlLeft":658,"iconUrlRight":659},{"id":437,"name":438,"alternativeText":18,"caption":18,"width":439,"height":440,"formats":18,"hash":441,"ext":146,"mime":147,"size":442,"url":443,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":444,"updatedAt":445,"documentId":446,"publishedAt":57},{"id":448,"name":449,"alternativeText":18,"caption":18,"width":340,"height":440,"formats":18,"hash":450,"ext":146,"mime":147,"size":451,"url":452,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":453,"updatedAt":454,"documentId":455,"publishedAt":57},[661,668,675,682,689],{"__component":116,"id":335,"title":336,"subTitle":18,"content":337,"callToActionText":18,"callToActionLink":18,"colorStyle":338,"showAsides":69,"imageUrl":662},{"id":459,"name":166,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":663,"hash":473,"ext":23,"mime":172,"size":196,"url":474,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":475,"updatedAt":475,"documentId":476,"publishedAt":57},{"large":664,"small":665,"medium":666,"thumbnail":667},{"ext":23,"url":462,"hash":463,"mime":172,"name":173,"path":18,"size":174,"width":29,"height":175},{"ext":23,"url":465,"hash":466,"mime":172,"name":179,"path":18,"size":180,"width":20,"height":181},{"ext":23,"url":468,"hash":469,"mime":172,"name":185,"path":18,"size":186,"width":42,"height":187},{"ext":23,"url":471,"hash":472,"mime":172,"name":191,"path":18,"size":192,"width":193,"height":194},{"__component":116,"id":340,"title":341,"subTitle":18,"content":342,"callToActionText":18,"callToActionLink":18,"colorStyle":343,"showAsides":69,"imageUrl":669},{"id":479,"name":480,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":670,"hash":502,"ext":23,"mime":172,"size":503,"url":504,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":505,"updatedAt":505,"documentId":506,"publishedAt":57},{"large":671,"small":672,"medium":673,"thumbnail":674},{"ext":23,"url":483,"hash":484,"mime":172,"name":485,"path":18,"size":486,"width":29,"height":175},{"ext":23,"url":488,"hash":489,"mime":172,"name":490,"path":18,"size":491,"width":20,"height":181},{"ext":23,"url":493,"hash":494,"mime":172,"name":495,"path":18,"size":496,"width":42,"height":187},{"ext":23,"url":498,"hash":499,"mime":172,"name":500,"path":18,"size":501,"width":193,"height":194},{"__component":116,"id":6,"title":345,"subTitle":18,"content":346,"callToActionText":18,"callToActionLink":18,"colorStyle":338,"showAsides":69,"imageUrl":676},{"id":262,"name":263,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":677,"hash":285,"ext":23,"mime":172,"size":286,"url":287,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":288,"updatedAt":289,"documentId":290,"publishedAt":57},{"large":678,"small":679,"medium":680,"thumbnail":681},{"ext":23,"url":266,"hash":267,"mime":172,"name":268,"path":18,"size":269,"width":29,"height":175},{"ext":23,"url":271,"hash":272,"mime":172,"name":273,"path":18,"size":274,"width":20,"height":181},{"ext":23,"url":276,"hash":277,"mime":172,"name":278,"path":18,"size":279,"width":42,"height":187},{"ext":23,"url":281,"hash":282,"mime":172,"name":283,"path":18,"size":284,"width":193,"height":194},{"__component":116,"id":348,"title":349,"subTitle":18,"content":350,"callToActionText":351,"callToActionLink":110,"colorStyle":343,"showAsides":69,"imageUrl":683},{"id":516,"name":517,"alternativeText":18,"caption":18,"width":19,"height":167,"formats":684,"hash":539,"ext":23,"mime":172,"size":540,"url":541,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":542,"updatedAt":542,"documentId":543,"publishedAt":57},{"large":685,"small":686,"medium":687,"thumbnail":688},{"ext":23,"url":520,"hash":521,"mime":172,"name":522,"path":18,"size":523,"width":29,"height":175},{"ext":23,"url":525,"hash":526,"mime":172,"name":527,"path":18,"size":528,"width":20,"height":181},{"ext":23,"url":530,"hash":531,"mime":172,"name":532,"path":18,"size":533,"width":42,"height":187},{"ext":23,"url":535,"hash":536,"mime":172,"name":537,"path":18,"size":538,"width":193,"height":194},{"__component":134,"id":353,"title":354,"callToActionText":137,"callToActionLinkUrl":355,"body":18,"imageUrl":690},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":357,"metaTitle":358,"metaDescription":359,"structuredData":692,"metaImage":18,"metaSocial":695},{"url":361,"@type":362,"@context":363,"provider":693,"areaServed":694,"description":371,"serviceType":372},{"url":365,"name":366,"@type":367},{"name":369,"@type":370},[],{"__component":106,"id":697,"titleLeft":332,"callToActionTextLeft":109,"callToActionLinkUrlLeft":698,"titleRight":699,"callToActionTextRight":700,"callToActionLinkUrlRight":701,"iconUrlLeft":702,"iconUrlRight":703},116,"https://www.sharevalue.nl/contact","Wil je weten waar wij goed in zijn?","Ontdek wat we doen","https://www.sharevalue.nl/wat-we-doen",{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":705,"metaTitle":706,"metaDescription":707,"structuredData":708,"metaImage":18,"metaSocial":735},138,"Storybook gebruiken zonder JS-framework | ShareValue​","Leer hoe je Storybook inzet met alleen HTML en CSS, zonder JavaScript-frameworks, voor het documenteren van UI-componenten.",[709,718],{"url":710,"@type":711,"author":712,"@context":363,"headline":713,"publisher":714,"description":707,"datePublished":13},"https://www.sharevalue.nl/blogs/aan-de-slag-met-storybook-zonder-javascript-framework","BlogPosting",{},"Storybook gebruiken zonder JS-framework | ShareValue",{"logo":715,"name":366,"@type":367},{"url":716,"@type":717},"https://www.sharevalue.nl/_nuxt/img/sharevalue-logo.3c5e7cb.svg","ImageObject",{"@type":719,"@context":363,"mainEntity":720},"FAQPage",[721,727,731],{"name":722,"@type":723,"acceptedAnswer":724},"Kan ik Storybook gebruiken zonder een JavaScript-framework?","Question",{"text":725,"@type":726},"Ja, Storybook ondersteunt het gebruik met alleen HTML en CSS via de HTML-variant, zonder dat een JavaScript-framework nodig is.","Answer",{"name":728,"@type":723,"acceptedAnswer":729},"Hoe installeer ik Storybook voor een HTML-project?",{"text":730,"@type":726},"Voer 'npx sb init' uit, kies 'yes' bij de vraag om handmatig een projecttype te selecteren, en kies vervolgens 'HTML' als projecttype.",{"name":732,"@type":723,"acceptedAnswer":733},"Hoe schrijf ik een eenvoudige HTML-story in Storybook?",{"text":734,"@type":726},"Je kunt een story schrijven door een functie te exporteren die een HTML-string retourneert, bijvoorbeeld: export const MijnComponent = () => '\u003Cdiv>Hallo wereld\u003C/div>';.",[],{"pagination":737},{"page":738,"pageSize":135},1,{},1778234605966]