{"tag":{"id":"56744721958ef13879b94b91","name":"CSS","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513316949083/By6UMkbfG.png","slug":"css","tagline":"A style sheet language used for describing the presentation of a document written in a markup language.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"5d0b56855aa1c3046ccca2d6","url":"https://devbyrayray.hashnode.dev","canonicalURL":"https://devbyrayray.hashnode.dev","urlPattern":"SIMPLE","title":"Dev By RayRay","displayTitle":"","hasBadges":true,"descriptionSEO":"🚀 Lead Frontend/JavaScript Developer\n🔥 Writing about CSS, JavaScript, Typescript, Angular, Serverless functions, and a lot more web-related topics.\n","about":{"html":"

🚀 Lead Frontend/JavaScript Developer\n🔥 Writing about CSS, JavaScript, Typescript, Angular, Serverless functions, and a lot more web-related topics.

\n","text":"🚀 Lead Frontend/JavaScript Developer\n🔥 Writing about CSS, JavaScript, Typescript, Angular, Serverless functions, and a lot more web-related topics.\n","__typename":"Content"},"features":{"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":true,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":true,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":true,"published":{"__typename":"CustomCSS","homeMinified":".blog-body,.blog-content-main{font-family:monospace}","postMinified":".blog-body,.blog-content-main{font-family:monospace}","staticMinified":".blog-body,.blog-content-main{font-family:monospace}"},"draft":{"__typename":"CustomCSS","homeMinified":".blog-body,.blog-content-main{font-family:monospace}","postMinified":".blog-body,.blog-content-main{font-family:monospace}","staticMinified":".blog-body,.blog-content-main{font-family:monospace}"},"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":"","ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1664267535345/Ba2q2nP8Z.webp","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"5cfb6ab095bf20ea2c2964f3","name":"Dev By RayRay","username":"devbyrayray","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629534286551/WVZqmCHpu.png"},"preferences":{"__typename":"Preferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1630051986776/j3HW9FsOb.png","darkMode":{"__typename":"DarkModePreferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1630051993428/-9y9torL-.png","enabled":true},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"63160e91d54563f8b19aff83","label":"Earn Money Online","url":"https://devbyrayray.hashnode.dev/series/earn-money-online","type":"series","series":{"__typename":"Series","id":"63160e54d54563f8b19aff7e"},"page":null},{"__typename":"PublicationNavbarItem","id":"618a280f468c06249afc4235","label":"Sponsor 💸","url":"https://hasnode.byrayray.dev/sponsor","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"6123a355b115357df05f1e12","label":"Badges","url":"https://hasnode.byrayray.dev/badges","type":"link","series":null,"page":null}],"enabledPages":{"__typename":"PagesPreferences","badges":true,"newsletter":true,"members":null},"layout":"magazine","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1630052004266/VK7oMWnFI.png","headerColor":"#ffc600","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"UA-166352508-4","gTagManagerID":null,"plausibleAnalyticsEnabled":null,"wmPaymentPointer":"$ilp.uphold.com/nq996pqFmey8","__typename":"PublicationIntegrations"},"imprintV2":{"__typename":"Content","html":"

I learn by writing, and write while learning more and more each day!👊\nA developer is never finished with learning, thinking that is the most stupid thing to do 🤣

\n"},"postsCount":{"totalDocuments":136,"__typename":"PublicationPostConnection"},"isTeam":false,"links":{"twitter":"https://twitter.com/devbyrayray","instagram":"","github":"https://github.com/devbyray","website":"https://blog.byrayray.dev","hashnode":"https://hashnode.com/@devbyrayray","youtube":"https://www.youtube.com/channel/UCPdzw5ACNiNeQgUCVexRK9g","dailydev":"https://app.daily.dev/devbyrayray","linkedin":"","mastodon":null,"facebook":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"devbyrayray","domain":{"__typename":"DomainStatus","host":"hasnode.byrayray.dev","ready":false},"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":0,"sponsorship":{"content":{"html":"

Hi I'm Ray,

I'am a....

Lead Frontend Developer 🇳🇱
Blogger
😸 person
❤️ for #codenewbies
Optimistic person

I love to write about...

Tech
Programming
Automation
Web Development
Low Code
Positivity

If you love my work and want to support me even more, use the sponsor feature here 🤗. When you support me, you will make my day even better 🙏

When you don't have the money, just read my posts and share them with as much people as possible 👍

\n","markdown":"Hi I'm Ray,\n\nI'am a....\n- Lead Frontend Developer 🇳🇱 \n- Blogger\n- 😸 person\n- ❤️ for #codenewbies\n- Optimistic person\n\nI love to write about...\n- Tech\n- Programming \n- Automation\n- Web Development\n- Low Code\n- Positivity\n\nIf you love my work and want to support me even more, use the sponsor feature here 🤗. When you support me, you will make my day even better 🙏\n\nWhen you don't have the money, just read my posts and share them with as much people as possible 👍","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1JtdBKRPpUOhcZOw","country":"NL","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"pro":null,"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"611f5890e404793819ca69be","title":"Getting Started With Storybook Without a JavaScript Framework","slug":"getting-started-with-storybook-without-a-javascript-framework","publishedAt":"2021-06-03T22:00:00.000Z","cuid":"cksk112wa09ku2xs1bzez8owu","url":"https://devbyrayray.hashnode.dev/getting-started-with-storybook-without-a-javascript-framework","subtitle":"Use it with plain HTML and CSS","brief":"We all want to use well-documented UI components in our Frontend. With Storybook, you can do that reasonably quickly with React, Angular, Vue, or any other framework. \nBut since the documentation lacks clear information about how to set up Storybook ...","readTimeInMinutes":5,"views":451,"author":{"__typename":"User","id":"5cfb6ab095bf20ea2c2964f3","username":"devbyrayray","name":"Dev By RayRay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629534286551/WVZqmCHpu.png","followersCount":74},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629442997842/oGcq7MNXf.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjExZjU4OTBlNDA0NzkzODE5Y2E2OWJlXzIwMjEtMDYtMDNUMjI6MDA6MDAuMDAwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"611ff0e6a5d08237f40df510","title":"Polished.js: A Utility CSS-in-JS library for Styled-Components in React.js","slug":"polished-js-a-utility-css-in-js-library-for-styled-components-in-react-js-32c1649d3831","publishedAt":"2021-03-18T14:01:46.695Z","cuid":"cksko8xf90gqj1ws14pre0lqa","url":"https://devbyrayray.hashnode.dev/polished-js-a-utility-css-in-js-library-for-styled-components-in-react-js-32c1649d3831","subtitle":"Styling Utilities Inspired By Sass for CSS-inJS","brief":"Sass functions like lighten(), darken(), complement(), invert() are pretty useful. I was wondering if there was something for styled-components. Well, I found the great library Polished.js.\nThe nice thing about this library is that it doesn’t matter ...","readTimeInMinutes":4,"views":59,"author":{"__typename":"User","id":"5cfb6ab095bf20ea2c2964f3","username":"devbyrayray","name":"Dev By RayRay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629534286551/WVZqmCHpu.png","followersCount":74},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629625609336/f8uzF_5CN.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjExZmYwZTZhNWQwODIzN2Y0MGRmNTEwXzIwMjEtMDMtMThUMTQ6MDE6NDYuNjk1Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"611ff0e3e404793819ca7fe1","title":"How To Add Props To Styled Components in React.js with TypeScript","slug":"how-to-add-props-to-styled-components-in-react-js-with-typescript-1df49ef951bf","publishedAt":"2021-03-16T09:03:16.794Z","cuid":"cksko8v7h0gi12xs13s401032","url":"https://devbyrayray.hashnode.dev/how-to-add-props-to-styled-components-in-react-js-with-typescript-1df49ef951bf","subtitle":"Write Predictable Code With styled-components in React.js","brief":"Using React.js with TypeScript is not as straightforward for everyone when building a React application. I have quite some experience with TypeScript that I didn’t have significant issues (anymore 😅).\nI’m pleased with Styled components. But typing t...","readTimeInMinutes":2,"views":39,"author":{"__typename":"User","id":"5cfb6ab095bf20ea2c2964f3","username":"devbyrayray","name":"Dev By RayRay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629534286551/WVZqmCHpu.png","followersCount":74},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629626708426/t904Bn7Go.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjExZmYwZTNlNDA0NzkzODE5Y2E3ZmUxXzIwMjEtMDMtMTZUMDk6MDM6MTYuNzk0Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"611ff0e0a5d08237f40df50a","title":"How to use CSS Media Queries with Styled Components in React.js","slug":"how-to-use-css-media-queries-with-styled-components-in-react-js-f5db5ffcc5f0","publishedAt":"2021-03-15T15:07:50.417Z","cuid":"cksko8tan0gqi1ws1gsk6ap0v","url":"https://devbyrayray.hashnode.dev/how-to-use-css-media-queries-with-styled-components-in-react-js-f5db5ffcc5f0","subtitle":"Use Media Queries Smarter In Styled Components","brief":"Just like regular CSS, you write your Media Queries in your CSS file. In Styled Components, you can include them as well.\nhttps://gist.github.com/devbyray/844a2ac6ffe9de7676fbd066ec3fc3dbBut if you want to make it smart, you set all the sizes in an O...","readTimeInMinutes":1,"views":95,"author":{"__typename":"User","id":"5cfb6ab095bf20ea2c2964f3","username":"devbyrayray","name":"Dev By RayRay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629534286551/WVZqmCHpu.png","followersCount":74},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629707938001/RQuaoNBo3.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjExZmYwZTBhNWQwODIzN2Y0MGRmNTBhXzIwMjEtMDMtMTVUMTU6MDc6NTAuNDE3Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"611ff112a5d08237f40df555","title":"How To Build A Custom Checkbox With JavaScript","slug":"how-to-build-a-custom-checkbox-with-javascript-82083a66ae04","publishedAt":"2021-02-12T19:04:59.011Z","cuid":"cksko9vvl0gr71ws14un1cp22","url":"https://devbyrayray.hashnode.dev/how-to-build-a-custom-checkbox-with-javascript-82083a66ae04","subtitle":"Learn JavaScript The Easy Way","brief":"HTML & CSS\nSo let’s start with the HTML & CSS to make our component static. I have created the HTML and CSS for you. But if you want to change it, please go ahead and make your flavor of it.\nIn the HTML, we have 2 checkboxes because, with JavaScript,...","readTimeInMinutes":10,"views":192,"author":{"__typename":"User","id":"5cfb6ab095bf20ea2c2964f3","username":"devbyrayray","name":"Dev By RayRay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629534286551/WVZqmCHpu.png","followersCount":74},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1629873836953/eRnAXMNg_.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjExZmYxMTJhNWQwODIzN2Y0MGRmNTU1XzIwMjEtMDItMTJUMTk6MDQ6NTkuMDExWg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjExZmYxMTJhNWQwODIzN2Y0MGRmNTU1XzIwMjEtMDItMTJUMTk6MDQ6NTkuMDExWg==","hasNextPage":false,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}