{"tag":{"id":"56744723958ef13879b95434","name":"React","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","slug":"reactjs","tagline":"React is a JavaScript library for building user interfaces.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"609695911ea29f2c341e0185","url":"https://brunosabot.hashnode.dev","canonicalURL":"https://brunosabot.hashnode.dev","urlPattern":"SIMPLE","title":"Bruno Sabot's Blog","displayTitle":null,"hasBadges":true,"descriptionSEO":null,"publicMembers":{"totalDocuments":1,"__typename":"PublicationMemberConnection"},"about":null,"features":{"proTeam":{"isEnabled":false,"__typename":"ProTeamFeature"},"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":false,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":true,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":false,"published":null,"draft":null,"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":"","ogMetaData":{"image":null,"__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"609693bd1ea29f2c341e0143","name":"Bruno Sabot","username":"brunosabot","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1636133771479/G5BsUI-hj.png"},"preferences":{"__typename":"Preferences","logo":"","darkMode":{"__typename":"DarkModePreferences","logo":"","enabled":null},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"6249893416cdedfe9f7ce7b6","label":"Sponsor","url":"https://brunosabot.hashnode.dev/sponsor","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"6185a4e2936da605cb9ab158","label":"Website","url":"https://brunosabot.dev","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"619b63235bb9cc256fc6c05f","label":"Patreon","url":"https://www.patreon.com/brunosabot?fan_landing=true","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"619b63435bb9cc256fc6c063","label":"Buy Me A Coffee","url":"https://www.buymeacoffee.com/brunosabot1","type":"link","series":null,"page":null}],"enabledPages":{"__typename":"PagesPreferences","badges":false,"newsletter":true,"members":true},"layout":"magazine","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1645209419547/3Dkfev81K.jpeg","headerColor":"","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"","gTagManagerID":null,"plausibleAnalyticsEnabled":null,"wmPaymentPointer":"$ilp.uphold.com/zbywBq9qy3pe","koalaPublicKey":null,"msClarityID":null,"__typename":"PublicationIntegrations"},"imprintV2":{"__typename":"Content","html":"

I am Bruno, a web developer for more than 12 years, mainly working on JavaScript, React, VueJS, HTML, CSS, UX and performance topics.

\n"},"postsCount":{"totalDocuments":17,"__typename":"PublicationPostConnection"},"isTeam":true,"links":{"twitter":"https://twitter.com/brunosabot","instagram":null,"github":"https://github.com/brunosabot/","website":"https://brunosabot.dev","hashnode":"https://hashnode.com/@brunosabot","youtube":null,"dailydev":null,"linkedin":"https://www.linkedin.com/in/brunosabot/","mastodon":"https://mastodon.social/@brunosabot","facebook":null,"bluesky":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"brunosabot","domain":null,"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":0,"sponsorship":{"content":{"html":"

I am Bruno, a web developer for more than 12 years, mainly working on JavaScript, React, VueJS, HTML, CSS, UX and performance topics.

I spend my career mostly on consulting jobs, since I like to share and help other people to grow in their jobs. I'm currently working for (Zenika)[https://www.zenika.com/en-US], a french consulting company.

I'm also a member of BDX I/O, a French non-profit organization that aims to propose a yearly conference about everything trending in the web technologies.

I like to share my discoveries and my expertise, that you will find here, on Hashnode, but also on my Twitter account, where I'm often posting small stories about the tech stuff I like.

I'm also a proud father, working on home automation on my spare time, reading about cognitive sciences and I like to cook.

If you find my posts useful, please consider donating to show your love.

Thanks!

\n","markdown":"I am Bruno, a web developer for more than 12 years, mainly working on JavaScript, React, VueJS, HTML, CSS, UX and performance topics.\n\nI spend my career mostly on consulting jobs, since I like to share and help other people to grow in their jobs. I'm currently working for (Zenika)[https://www.zenika.com/en-US], a french consulting company.\n\nI'm also a member of BDX I/O, a French non-profit organization that aims to propose a yearly conference about everything trending in the web technologies.\n\nI like to share my discoveries and my expertise, that you will find here, on Hashnode, but also on my Twitter account, where I'm often posting small stories about the tech stuff I like.\n\nI'm also a proud father, working on home automation on my spare time, reading about cognitive sciences and I like to cook.\n\nIf you find my posts useful, please consider donating to show your love.\n\nThanks!","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1KkRo5RJuWrFVBtt","country":"FR","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"6225b94fecb2d35f765e5c23","title":"Loading Gists in a NextJS Application","slug":"loading-gists-in-a-nextjs-application","publishedAt":"2022-03-01T07:49:07.000Z","cuid":"cl0gelvgb043fk3nv685k5buk","url":"https://brunosabot.hashnode.dev/loading-gists-in-a-nextjs-application","subtitle":"A tutorial on how to load GitHub Gists from inside markdown pages of a NextJS blog","brief":"Introduction\nAll my blog posts are available on my personal website. Under the hood, they are saved as markdown files.\nIt allows me to easily write the posts, but when I’m cross-posting on other platforms, I don’t have the luxury to get the syntax hi...","readTimeInMinutes":9,"views":50,"author":{"__typename":"User","id":"609693bd1ea29f2c341e0143","username":"brunosabot","name":"Bruno Sabot","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1636133771479/G5BsUI-hj.png","followersCount":5},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/unsplash/wX2L8L-fGeA/upload/v1646639310321/7K0PRx9P5.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjIyNWI5NGZlY2IyZDM1Zjc2NWU1YzIzXzIwMjItMDMtMDFUMDc6NDk6MDcuMDAwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"620fe3159375bf259a97b92b","title":"Fetching data with React","slug":"fetching-data-with-react","publishedAt":"2022-02-01T18:19:01.000Z","cuid":"ckzsqkgqr04qkfes14grm4t6d","url":"https://brunosabot.hashnode.dev/fetching-data-with-react","subtitle":"From custom made code to powerful libraries","brief":"Introduction\nWhen we create a React application, there are a lot of chances you will have to fetch data from a remote server.\nDepending on your project, you will probably have to make simple calls or use advanced techniques to get your data cached or...","readTimeInMinutes":8,"views":107,"author":{"__typename":"User","id":"609693bd1ea29f2c341e0143","username":"brunosabot","name":"Bruno Sabot","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1636133771479/G5BsUI-hj.png","followersCount":5},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/unsplash/4I41IQtmSs0/upload/v1645208216726/cL60x9dby.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjIwZmUzMTU5Mzc1YmYyNTlhOTdiOTJiXzIwMjItMDItMDFUMTg6MTk6MDEuMDAwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"61bef35602755832385f247f","title":"Core Web Vitals Dashboard On Google Analytics","slug":"core-web-vitals-dashboard-on-google-analytics","publishedAt":"2021-12-17T23:00:00.000Z","cuid":"ckxd0jvam04yzx4s1c16v7321","url":"https://brunosabot.hashnode.dev/core-web-vitals-dashboard-on-google-analytics","subtitle":"Start a Core Web Vital Real User Monitoring on Google Analytics","brief":"Core Web Vitals are a set of well-known metrics used to measure your website performance. It’s often the entry point to investigating what is wrong with someone’s website and measure the progress made optimizing the overall speed and stability.\nSome ...","readTimeInMinutes":3,"views":59,"author":{"__typename":"User","id":"609693bd1ea29f2c341e0143","username":"brunosabot","name":"Bruno Sabot","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1636133771479/G5BsUI-hj.png","followersCount":5},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/unsplash/eveI7MOcSmw/upload/v1645210181202/3n_mtUjD9.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjFiZWYzNTYwMjc1NTgzMjM4NWYyNDdmXzIwMjEtMTItMTdUMjM6MDA6MDAuMDAwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"618ea26826d4d237c4277d84","title":"Build an Easy Popup System With React","slug":"build-an-easy-popup-system-with-react","publishedAt":"2021-11-12T17:20:40.639Z","cuid":"ckvwnby81036o0ks1go7g1m7a","url":"https://brunosabot.hashnode.dev/build-an-easy-popup-system-with-react","subtitle":"Demystifying the way to create a simple, customisable, and accessible popup system with React","brief":"Concerns About Existing Systems\nThere are plenty of popup systems out there, but they usually don’t meet the high-quality requirement I have on user interfaces and development simplicity.\nWhen I’m adding a popup into a website, it is important to me ...","readTimeInMinutes":6,"views":540,"author":{"__typename":"User","id":"609693bd1ea29f2c341e0143","username":"brunosabot","name":"Bruno Sabot","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1636133771479/G5BsUI-hj.png","followersCount":5},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/unsplash/oVAzLDIdqic/upload/v1645210408710/YlnxUuoS-.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjE4ZWEyNjgyNmQ0ZDIzN2M0Mjc3ZDg0XzIwMjEtMTEtMTJUMTc6MjA6NDAuNjM5Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"61858aa3936da605cb9aaef3","title":"My Journey From React to React Native","slug":"my-journey-from-react-to-react-native","publishedAt":"2020-09-21T18:47:34.000Z","cuid":"ckvmsjjhz067e57s1amop3pag","url":"https://brunosabot.hashnode.dev/my-journey-from-react-to-react-native","subtitle":"The things that changed for me switching when from web applications to native applications","brief":"I’ve recently started working on an Android application, and as a React developer, I made the easy choice to use and test React Native to do so because it helped me stay in my comfort zone and also gives me the opportunity to explore iOS someday.\nEve...","readTimeInMinutes":6,"views":56,"author":{"__typename":"User","id":"609693bd1ea29f2c341e0143","username":"brunosabot","name":"Bruno Sabot","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1636133771479/G5BsUI-hj.png","followersCount":5},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/unsplash/tPKQwYHy8q4/upload/v1645210628383/xWx5RsPFe.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjE4NThhYTM5MzZkYTYwNWNiOWFhZWYzXzIwMjAtMDktMjFUMTg6NDc6MzQuMDAwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"618589b6fd5d634d01698d9f","title":"An Opinionated Way to Structure React Apps","slug":"an-opinionated-way-to-structure-react-apps","publishedAt":"2020-05-05T18:43:42.000Z","cuid":"ckvmseh360q4a7ls162kj0zji","url":"https://brunosabot.hashnode.dev/an-opinionated-way-to-structure-react-apps","subtitle":"Based on my experience acquired building several big projects","brief":"When we first develop a React app, we can just put every component in a folder and it works. But when it comes to larger projects, it might be difficult to find our way between files if we keep using React this way.\nSo how can we handle a bigger proj...","readTimeInMinutes":7,"views":42,"author":{"__typename":"User","id":"609693bd1ea29f2c341e0143","username":"brunosabot","name":"Bruno Sabot","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1636133771479/G5BsUI-hj.png","followersCount":5},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/unsplash/Sk-C-om9Jz8/upload/v1645211199550/dYp232d54.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjE4NTg5YjZmZDVkNjM0ZDAxNjk4ZDlmXzIwMjAtMDUtMDVUMTg6NDM6NDIuMDAwWg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjE4NTg5YjZmZDVkNjM0ZDAxNjk4ZDlmXzIwMjAtMDUtMDVUMTg6NDM6NDIuMDAwWg==","hasNextPage":true,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}