{"publication":{"id":"5ebd7c02acf8911d7951ed49","hashnodeURL":"https://lo-victoria.com","url":"https://lo-victoria.com","canonicalURL":"https://lo-victoria.com","title":"Articles by Victoria Lo","displayTitle":"Blogging and Web Development | Articles by Victoria Lo","descriptionSEO":"Providing beginner-friendly tutorials for new programmers on JavaScript, React, Blogging, Software Development, Web Development and more!","username":"victoria","about":{"html":"

I'm a solutions engineer, writer, speaker, GitHub Star and WomenWhoCode evangelist. But TLDR: I'm just a nerd who loves to build projects and share valuable tips for new programmers on this blog.

\n","__typename":"AboutPublication"},"enabledFeatures":{"newsletter":true,"viewCount":false,"readTime":false,"__typename":"PublicationFeatures"},"ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1595258065636/tpUb85GJk.png","__typename":"OpenGraphMetaData"},"author":{"id":"5ebd7a2dacf8911d7951ed40","name":"Victoria Lo","username":"victoria","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","coverPhoto":"https://cdn.hashnode.com/res/hashnode/image/upload/v1596298873098/gTH87_jBr.png","__typename":"User"},"preferences":{"logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607028151322/9o8_5ImaK.png","darkMode":{"logo":null,"enabled":null,"__typename":"DarkModePreferences"},"customCSS":{"enabled":false,"staticMin":"#__next>div>div>div>div>h1{font-weight:300}.blog-impressum h3{display:none}","homeMin":"a{font-weight:300}.dark #__next>div>div:nth-child(2)>div>div>div>div.w-full.md\\:flex-1>div.flex.flex-row.flex-wrap.items-center.mb-2.justify-between>h3>a{color:white}.blog-posts-wrapper{justify-content:space-between}.blog-author-area{max-height:0;overflow:hidden;animation:slideIn;animation-fill-mode:forwards;animation-duration:2s;margin-bottom:2.5rem}@keyframes slideIn{0%{max-height:0}100%{max-height:200px}}.css-jwlm5c{flex-direction:row !important}.css-1uxkh7x{width:auto !important;align-items:flex-start !important;padding-left:3rem}.css-jjmvev{align-items:flex-start !important}.css-5gqbbk{text-align:left !important}.blog-post-card{transition:.6s;width:46% !important;padding:1.2rem !important;background:rgba(255,255,255,0.4);border-radius:12px;border:1px solid rgba(255,255,255,0.18)}.dark .blog-post-card{background:#e3e3e31a}.blog-post-card:hover{box-shadow:0 8px 32px 0 rgb(31 38 135 / 37%)}.dark .blog-post-card:hover{box-shadow:0 8px 32px 0 rgb(255 255 255 / 37%)}.post-cover{border:0}.blog-impressum h3{display:none}","__typename":"CustomCSSPreferences"},"navbarItems":[{"id":"604810c1c64c63545921cb9e","label":"About","url":"https://lo-victoria.com/about","priority":100,"type":"page","series":null,"__typename":"PublicationNavbarItem"},{"id":"609527b7d2b17b7fc35f30b0","label":"Sponsors","url":"https://lo-victoria.com/sponsor","priority":99,"type":"link","series":null,"__typename":"PublicationNavbarItem"},{"id":"609275d4b97aec7542ba657d","label":"Blogging","url":"https://lo-victoria.com/series/victorias-blogging-tips","priority":98,"type":"series","series":{"id":"5f89bf47d7dc0b17a97a22e7","__typename":"Series"},"__typename":"PublicationNavbarItem"},{"id":"6048111c7f43655434aaf557","label":"Node.js","url":"https://lo-victoria.com/series/nodejs-rest-api","priority":97,"type":"series","series":{"id":"5f105d5261fb3d25a2d43052","__typename":"Series"},"__typename":"PublicationNavbarItem"},{"id":"60fd1af831552277811ae84d","label":"GraphQL","url":"https://lo-victoria.com/series/graphql","priority":96,"type":"series","series":{"id":"6065c83ffad5042228d35d26","__typename":"Series"},"__typename":"PublicationNavbarItem"},{"id":"61e0ba86d546507ab03419cf","label":"React Hooks","url":"https://lo-victoria.com/series/a-look-at-react-hooks","priority":95,"type":"series","series":{"id":"5fcc9d99f9aad2092499a61b","__typename":"Series"},"__typename":"PublicationNavbarItem"},{"id":"63d1233f79a109e4ff159e58","label":"Resources","url":"https://lo-victoria.com/resources","priority":95,"type":"page","series":null,"__typename":"PublicationNavbarItem"},{"id":"614c99f4544e242e0c93f097","label":"DevOps","url":"https://lo-victoria.com/devops","priority":94,"type":"page","series":null,"__typename":"PublicationNavbarItem"},{"id":"604813afc64c63545921cbee","label":"Read More","url":"https://lo-victoria.com/read-more","priority":93,"type":"page","series":null,"__typename":"PublicationNavbarItem"},{"id":"604632b9d0457f4d5c583408","label":"Nerd Stuff","url":"https://lo-victoria.com/nerd-stuff","priority":0,"type":"page","series":null,"__typename":"PublicationNavbarItem"}],"enabledPages":{"badges":false,"newsletter":true,"members":null,"__typename":"PagesPreferences"},"customCSSDraft":{"enabled":null,"staticMin":"#__next>div>div>div>div>h1{font-weight:300}.blog-impressum h3{display:none}","homeMin":"a{font-weight:300}.dark #__next>div>div:nth-child(2)>div>div>div>div.w-full.md\\:flex-1>div.flex.flex-row.flex-wrap.items-center.mb-2.justify-between>h3>a{color:white}.blog-posts-wrapper{justify-content:space-between}.blog-author-area{max-height:0;overflow:hidden;animation:slideIn;animation-fill-mode:forwards;animation-duration:2s;margin-bottom:2.5rem}@keyframes slideIn{0%{max-height:0}100%{max-height:200px}}.css-jwlm5c{flex-direction:row !important}.css-1uxkh7x{width:auto !important;align-items:flex-start !important;padding-left:3rem}.css-jjmvev{align-items:flex-start !important}.css-5gqbbk{text-align:left !important}.blog-post-card{transition:.6s;width:46% !important;padding:1.2rem !important;background:rgba(255,255,255,0.4);border-radius:12px;border:1px solid rgba(255,255,255,0.18)}.dark .blog-post-card{background:#e3e3e31a}.blog-post-card:hover{box-shadow:0 8px 32px 0 rgb(31 38 135 / 37%)}.dark .blog-post-card:hover{box-shadow:0 8px 32px 0 rgb(255 255 255 / 37%)}.post-cover{border:0}.blog-impressum h3{display:none}","__typename":"CustomCSSPreferences"},"layout":"grid","disableFooterBranding":false,"__typename":"Preferences"},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984904615/AvlfZBL8d.jpg","headerColor":"#e3e3e3","metaTags":"","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":null,"hotjarSiteID":"","matomoSiteID":null,"matomoURL":null,"gaTrackingID":"UA-157955431-1","plausibleAnalyticsEnabled":null,"wmPaymentPointer":"$ilp.uphold.com/BkFEP7ajLX87","__typename":"PublicationIntegrations"},"postsCount":190,"impressum":"

GitHub Star Profile ✨ | Featured on Tech Blogs

Check out these other amazing blogs! 🔥

Catalin's Tech | Daily Dev Tips | Greenroots Blog | Idris Olubisi | Marko Denic

\n","isTeam":false,"links":{"twitter":"https://twitter.com/lo_victoria2666","instagram":"","github":"https://github.com/victoria-lo","website":"https://lo-victoria.com/","hashnode":"https://hashnode.com/@victoria","youtube":"https://www.youtube.com/channel/UCGrEsNzKfXjuKDTmpv5nTvg","dailydev":"","linkedin":"https://www.linkedin.com/in/victoria2666/","mastodon":"","__typename":"PublicationLinks"},"domainInfo":{"domain":{"value":"lo-victoria.com","certIssued":true,"ready":true,"__typename":"DomainStatus"},"wwwPrefixedDomain":{"value":null,"certIssued":null,"ready":null,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"__typename":"Publication","series":{"id":"5fcc9d99f9aad2092499a61b","name":"A Look at React Hooks","coverImage":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607245073394/rcNlhTMne.png","slug":"a-look-at-react-hooks","description":"In this series, we shall look at various React Hooks and learn how we can use them to implement in our React projects! Great for beginners in React or React Hooks.\n","cuid":"ckicwasfb00a0t0s15sv9bd6q","author":{"id":"5ebd7a2dacf8911d7951ed40","name":"Victoria Lo","username":"victoria","__typename":"User"},"posts":{"edges":[{"node":{"id":"6393236a855b6005fa6c16c4","title":"A Look at React Hooks: useNavigation","slug":"a-look-at-react-hooks-usenavigation","publishDate":"2022-12-09T12:00:42.139Z","cuid":"clbggidvp00uj39nvhrxhag5c","url":"https://lo-victoria.com/a-look-at-react-hooks-usenavigation","subtitle":"Handle page navigation and behaviours with useNavigation!","brief":"Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's learn about the useNavigation Hook.\nNote that this Hook is available for both React Native and React projects which uses React Rout...","readTimeInMinutes":4,"views":1035,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":13708,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1670477530254/VSdnGZwpr.png","isPortrait":null,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"6393236a855b6005fa6c16c4_2022-12-09T12:00:42.139Z","__typename":"PostEdge"},{"node":{"id":"6377741f3d2f88d544e2be34","title":"A Look at React Hooks: useRef vs useState","slug":"a-look-at-react-hooks-useref-vs-usestate","publishDate":"2022-11-18T12:01:35.265Z","cuid":"clamgamu9001g08jecj5yh5ht","url":"https://lo-victoria.com/a-look-at-react-hooks-useref-vs-usestate","subtitle":"Let's learn about the differences between useRef vs useState and uncontrolled vs controlled components!","brief":"When learning about React Hooks, you will probably come across useRef and useState. These two hooks are often used in form handling. In React, there are typically 2 ways to implement forms: Uncontrolled vs Controlled components.\nWelcome to another a...","readTimeInMinutes":3,"views":891,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":13708,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1667183317824/PeqSM2t7I.png","isPortrait":null,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"6377741f3d2f88d544e2be34_2022-11-18T12:01:35.265Z","__typename":"PostEdge"},{"node":{"id":"635289eae482dec443a318b8","title":"A Look at React Hooks: useParams for Dynamic Routing","slug":"a-look-at-react-hooks-useparams-for-dynamic-routing","publishDate":"2022-10-21T12:00:42.087Z","cuid":"cl9ifxn6c003aeqnv0rl74zev","url":"https://lo-victoria.com/a-look-at-react-hooks-useparams-for-dynamic-routing","subtitle":"A simple way to implement dynamic routing with this useful Hook!","brief":"Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at a simple application of the useParams Hook.\nBefore reading this article, you should know the following:\n\nBasic knowledge of...","readTimeInMinutes":3,"views":4182,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":13708,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1665807463447/9kVSm1ZOG.png","isPortrait":null,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"635289eae482dec443a318b8_2022-10-21T12:00:42.087Z","__typename":"PostEdge"},{"node":{"id":"622b37ca8ea100a5ef1870ad","title":"A Look At React Hooks: useScrollPosition for Parallax Scrolling Effects","slug":"a-look-at-react-hooks-usescrollposition-for-parallax-scrolling-effects","publishDate":"2022-03-11T11:51:38.457Z","cuid":"cl0mcz6fn024fh8nv8f1w2fyz","url":"https://lo-victoria.com/a-look-at-react-hooks-usescrollposition-for-parallax-scrolling-effects","subtitle":"Learn how to make your own custom Hook called useScrollPosition to create a parallax scrolling effect!","brief":"Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's learn how to create our own custom Hook.\nFor this tutorial, let's make a simple Hook called useScrollPosition to create any scrolli...","readTimeInMinutes":5,"views":3411,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":13708,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1644108897119/749XVycmN.png","isPortrait":null,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"622b37ca8ea100a5ef1870ad_2022-03-11T11:51:38.457Z","__typename":"PostEdge"},{"node":{"id":"61f3e8fa52c782474274a0e2","title":"A Look at React Hooks: useRef to Scroll to an Element","slug":"a-look-at-react-hooks-useref-to-scroll-to-an-element","publishDate":"2022-01-28T13:00:42.139Z","cuid":"ckyyey7w70glo2qs11wdogjyv","url":"https://lo-victoria.com/a-look-at-react-hooks-useref-to-scroll-to-an-element","subtitle":"Let's learn a useful application of the useRef Hook! Scrolling to a page element in React has become so much easier with this Hook","brief":"Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at a simple application of the useRef Hook.\n\nBefore reading this, you should have a basic understanding of the useRef Hook. If...","readTimeInMinutes":6,"views":36567,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":13708,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1642117885090/4ZGk4wnR7.png","isPortrait":null,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"61f3e8fa52c782474274a0e2_2022-01-28T13:00:42.139Z","__typename":"PostEdge"},{"node":{"id":"618e62aae61d1c383da7a991","title":"A Look At React Hooks: useSWR for Data Fetching in React","slug":"a-look-at-react-hooks-useswr-for-data-fetching-in-react","publishDate":"2021-11-12T12:48:42.866Z","cuid":"ckvwdm7f600ru3xs1e34d0vvu","url":"https://lo-victoria.com/a-look-at-react-hooks-useswr-for-data-fetching-in-react","subtitle":"Let's look at SWR and useSWR, and learn how it can enable our React apps to fetch, cache and work with data more efficiently","brief":"Welcome to A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at the useSWR Hook.\nThis Hook is used to fetch data in React. Let's first learn a little bit about its background.\nOverview: Data Fetching in Rea...","readTimeInMinutes":5,"views":5362,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":13708,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1635214758249/x2vIhQGbe.png","isPortrait":null,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"618e62aae61d1c383da7a991_2021-11-12T12:48:42.866Z","__typename":"PostEdge"}],"pageInfo":{"endCursor":"618e62aae61d1c383da7a991_2021-11-12T12:48:42.866Z","hasNextPage":true,"hasPreviousPage":true,"startCursor":"6393236a855b6005fa6c16c4_2022-12-09T12:00:42.139Z","__typename":"PageInfo"},"__typename":"PostConnection"},"__typename":"Series"}}}

Why Svelte.js is my new favorite front-end framework

Things I learnt from my first job as a Student Web Developer