{"tag":{"id":"56744722958ef13879b94f1b","name":"Web Development","logo":"https://res.cloudinary.com/hashnode/image/upload/v1450469658/vdxecajl3uwbprclsctm.jpg","slug":"web-development","tagline":null,"__typename":"Tag"},"publication":{"__typename":"Publication","id":"5fb124cf03f7294d0e3a83d5","url":"https://frankiefab.hashnode.dev","canonicalURL":"https://frankiefab.hashnode.dev","urlPattern":"SIMPLE","title":"Franklin Ohaegbulam","displayTitle":"Frankiefab's Insights","hasBadges":true,"descriptionSEO":"A tech blog by Franklin Ohaegbulam that features how-to guides, tips, resources, and tutorials on frontend development, visual & UI/UX design, web3, and blockchain technology.","publicMembers":{"totalDocuments":1,"__typename":"PublicationMemberConnection"},"about":{"html":"

Frontend Engineer | Visual Designer | Technical Writer

\n","text":"Frontend Engineer | Visual Designer | Technical Writer\n","__typename":"Content"},"features":{"proTeam":{"isEnabled":false,"__typename":"ProTeamFeature"},"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":false,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":false,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":false,"published":null,"draft":null,"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":"\n \n\n\n\n\n \n \n \n \n \n\n \n \n \n \n \n \n\n \n ","ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1662642227576/Q_4cN54ER.png","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"5fb1245f03f7294d0e3a83cc","name":"Franklin Ohaegbulam","username":"frankiefab100","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672931437705/w1LCze6K6.jpg"},"preferences":{"__typename":"Preferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1661875873684/Areokpngt.png","darkMode":{"__typename":"DarkModePreferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1661875887873/YFslNxiYO.png","enabled":true},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"63bf501c98bf52f9c9082396","label":"Tutorials","url":"https://frankiefab.hashnode.dev/series/tutorials","type":"series","series":{"__typename":"Series","id":"631e4cf0f73f4734bc058bf9"},"page":null},{"__typename":"PublicationNavbarItem","id":"63bf4f9d98bf52f9c9082365","label":"Web3","url":"https://frankiefab.hashnode.dev/series/blockchain","type":"series","series":{"__typename":"Series","id":"631e4db03e8d6f3497ad7940"},"page":null},{"__typename":"PublicationNavbarItem","id":"63bf4e10a54681f9eea7550f","label":"Open Source","url":"https://frankiefab.hashnode.dev/series/open-source","type":"series","series":{"__typename":"Series","id":"63bd854155c009e411585b63"},"page":null},{"__typename":"PublicationNavbarItem","id":"63bf520898bf52f9c9082407","label":"Resources/Tips","url":"https://frankiefab.hashnode.dev/series/resources","type":"series","series":{"__typename":"Series","id":"631e4e96f73f4734bc058c5f"},"page":null},{"__typename":"PublicationNavbarItem","id":"63bf4ff098bf52f9c908238e","label":"About","url":"https://frankiefab.hashnode.dev/about","type":"page","series":null,"page":{"__typename":"StaticPage","id":"63bd8638a02a7de436a2f034"}},{"__typename":"PublicationNavbarItem","id":"63bf4fe5a54681f9eea75562","label":"Calendly","url":"https://calendly.com/frankiefab","type":"link","series":null,"page":null}],"enabledPages":{"__typename":"PagesPreferences","badges":false,"newsletter":true,"members":true},"layout":"stacked","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1661875899341/iLjH5rbqW.png","headerColor":"#227aba","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"","gTagManagerID":null,"plausibleAnalyticsEnabled":null,"wmPaymentPointer":"","koalaPublicKey":null,"msClarityID":null,"__typename":"PublicationIntegrations"},"imprintV2":null,"postsCount":{"totalDocuments":29,"__typename":"PublicationPostConnection"},"isTeam":true,"links":{"twitter":"https://twitter.com/frankiefab100","instagram":"https://www.instagram.com/frankiefab100","github":"https://github.com/frankiefab100","website":"https://www.frankiefab.com","hashnode":"https://hashnode.com/@frankiefab100","youtube":"https://youtube.com/@frankiefab","dailydev":"https://app.daily.dev/frankiefab100","linkedin":"https://linkedin.com/in/frankiefab100","mastodon":"https://fosstodon.org/@frankiefab","facebook":null,"bluesky":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"frankiefab","domain":null,"wwwPrefixedDomain":null},"redirectionRules":[{"source":"/calendly","destination":"https://calendly.com/frankiefab","type":"PERMANENT","__typename":"RedirectionRule"}],"totalRecommendedPublications":3,"sponsorship":{"content":null,"stripe":null,"__typename":"PublicationSponsorship"},"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"63d260299cf1069a453cc22d","title":"Building a Temperature Converter App using HTML, CSS, and JavaScript","slug":"building-a-temperature-converter-app-using-html-css-and-javascript","publishedAt":"2023-01-26T11:12:41.683Z","cuid":"cldczxj9v00060amibwrf6m0q","url":"https://frankiefab.hashnode.dev/building-a-temperature-converter-app-using-html-css-and-javascript","subtitle":"How to build a temperature converter app using HTML, CSS, and JavaScript","brief":"A temperature converter is a tool used to convert temperatures, to and from Celsius, Fahrenheit, and Kelvin.\nIn this article, we will learn how to build a temperature converter application using HTML, CSS, and JavaScript. Here’s a screenshot of what ...","readTimeInMinutes":5,"views":148,"author":{"__typename":"User","id":"5fb1245f03f7294d0e3a83cc","username":"frankiefab100","name":"Franklin Ohaegbulam","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672931437705/w1LCze6K6.jpg","followersCount":97},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1674731240742/891fe2c0-5f04-40ee-87cd-3c8411486f02.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjNkMjYwMjk5Y2YxMDY5YTQ1M2NjMjJkXzIwMjMtMDEtMjZUMTE6MTI6NDEuNjgzWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"63bfe152a54681f9eea766ac","title":"How to Build a Tip Calculator With HTML, CSS and JavaScript","slug":"how-to-build-a-tip-calculator-with-html-css-and-javascript","publishedAt":"2023-01-12T10:30:42.117Z","cuid":"clcsy9lv106ilugnvc31sad5f","url":"https://frankiefab.hashnode.dev/how-to-build-a-tip-calculator-with-html-css-and-javascript","subtitle":"Build a simple tip calculator using HTML, CSS and vanilla Javascript","brief":"A tip calculator is a tool used to calculate the tip for a meal, bar tab, or service gratuity in a restaurant. It also allows one to calculate the tip amount split between a given number of people once the bill and the tip percentage are entered.\nIn ...","readTimeInMinutes":6,"views":366,"author":{"__typename":"User","id":"5fb1245f03f7294d0e3a83cc","username":"frankiefab100","name":"Franklin Ohaegbulam","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672931437705/w1LCze6K6.jpg","followersCount":97},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1673498174615/a9ff29fc-a3b2-400e-b159-8f1200085c44.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjNiZmUxNTJhNTQ2ODFmOWVlYTc2NmFjXzIwMjMtMDEtMTJUMTA6MzA6NDIuMTE3Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"639ee4cc6c6eff8c66847c15","title":"Web Optimization: An Overview of Search Engine Optimization (SEO)","slug":"web-optimization-an-overview-of-search-engine-optimization-seo","publishedAt":"2022-12-18T10:00:44.766Z","cuid":"clbt76sfg00q8n5nv5rubbjqa","url":"https://frankiefab.hashnode.dev/web-optimization-an-overview-of-search-engine-optimization-seo","subtitle":"An in-depth overview of how to optimize your website using simple SEO techniques.","brief":"Search Engine Optimization (abbreviated as SEO) is a common term in the digital marketing, advertising, and web development industry. The essence of having a website is mainly for marketing or online presence. Search engines such as Google , yahoo an...","readTimeInMinutes":6,"views":54,"author":{"__typename":"User","id":"5fb1245f03f7294d0e3a83cc","username":"frankiefab100","name":"Franklin Ohaegbulam","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672931437705/w1LCze6K6.jpg","followersCount":97},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1671263184715/M_EfxHnnD.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjM5ZWU0Y2M2YzZlZmY4YzY2ODQ3YzE1XzIwMjItMTItMThUMTA6MDA6NDQuNzY2Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"630b863b56df9e8e5024ef27","title":"Best Tools and Resources For Self-Taught Developers","slug":"best-tools-and-resources-for-self-taught-developers","publishedAt":"2022-08-28T15:14:03.641Z","cuid":"cl7dh2b19028b1unv2opfeq7u","url":"https://frankiefab.hashnode.dev/best-tools-and-resources-for-self-taught-developers","subtitle":"My 30 favorite tools and resources as a self-taught web developer","brief":"Selecting the right tools and resources from the myriad of available resources can be challenging for self-learners and anyone looking to make a transition to web development.\nBelow are some of my favorite free learning resources and tools that helpe...","readTimeInMinutes":6,"views":661,"author":{"__typename":"User","id":"5fb1245f03f7294d0e3a83cc","username":"frankiefab100","name":"Franklin Ohaegbulam","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672931437705/w1LCze6K6.jpg","followersCount":97},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1661620596800/qJh9l6yIV.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjMwYjg2M2I1NmRmOWU4ZTUwMjRlZjI3XzIwMjItMDgtMjhUMTU6MTQ6MDMuNjQxWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6300dca874730d13020f22ec","title":"How To Build a Star Rating Using useState Hook","slug":"how-to-build-a-star-rating-using-usestate-hook","publishedAt":"2022-08-20T13:07:52.334Z","cuid":"cl71x17rn02r5p0nvaqsu1bnw","url":"https://frankiefab.hashnode.dev/how-to-build-a-star-rating-using-usestate-hook","subtitle":"Learn how to create a star rating widget using the useState hook in React","brief":"Have you ever wondered how star ratings commonly seen on e-commerce websites or app stores are created? \nThousands of reviews are received every day, and many products and services across the web aren't complete without a star rating for receiving cu...","readTimeInMinutes":6,"views":691,"author":{"__typename":"User","id":"5fb1245f03f7294d0e3a83cc","username":"frankiefab100","name":"Franklin Ohaegbulam","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672931437705/w1LCze6K6.jpg","followersCount":97},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1660995987529/ul1avPd94.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjMwMGRjYTg3NDczMGQxMzAyMGYyMmVjXzIwMjItMDgtMjBUMTM6MDc6NTIuMzM0Wg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjMwMGRjYTg3NDczMGQxMzAyMGYyMmVjXzIwMjItMDgtMjBUMTM6MDc6NTIuMzM0Wg==","hasNextPage":false,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}