{"componentChunkName":"component---src-gatsby-theme-try-ghost-templates-post-js","path":"/best-platforms-to-learn-programming-in-2021/","result":{"data":{"customPost":{"id":"Ghost__Post__6127ba1b3ed159214d382e77","title":"Best Free Platforms To Learn Programming in 2021","slug":"best-platforms-to-learn-programming-in-2021","featured":false,"feature_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1550645612-83f5d594b671.jpg","excerpt":"In this article, I will list websites and apps that will help you start or continue your journey in the world of programming.","custom_excerpt":"In this article, I will list websites and apps that will help you start or continue your journey in the world of programming.","visibility":"public","created_at_pretty":"25 Nov 2020","published_at_pretty":"28 Jan 2021","updated_at_pretty":"28 Sep 2021","created_at":"2020-11-25T10:10:10.000+00:00","published_at":"2021-01-28T14:34:58.000+00:00","updated_at":"2021-09-28T12:16:26.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":{"base":"photo-1521185496955-15097b20c5fe-2.jpeg","publicURL":"/static/13f953658eaecb779984996ea356b1c4/photo-1521185496955-15097b20c5fe-2.jpeg","imageMeta":{"width":2000,"height":1547},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABhU05c9sV/8QAGRAAAwEBAQAAAAAAAAAAAAAAAQIDABIR/9oACAEBAAEFAuTgGxGjVeRdPLOHf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAMBAQEAAAAAAAAAAAAAAAABEXECEP/aAAgBAQAGPwL2dJaOqYVH/8QAGhAAAwADAQAAAAAAAAAAAAAAAAERITFBYf/aAAgBAQABPyFpWJH6IutKCacL+lRRGxiDm+H/2gAMAwEAAgADAAAAEK//AP/EABYRAQEBAAAAAAAAAAAAAAAAAAEREP/aAAgBAwEBPxAI3P/EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAgEBPxBaR03/xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAhMUGxcf/aAAgBAQABPxAInmDF9wQ6urfMI5JgA/si0141k9pEa4fcjFJmybz/2Q==","aspectRatio":1.2935323383084578,"src":"/static/13f953658eaecb779984996ea356b1c4/d5c54/photo-1521185496955-15097b20c5fe-2.jpg","srcSet":"/static/13f953658eaecb779984996ea356b1c4/65d8c/photo-1521185496955-15097b20c5fe-2.jpg 260w,\n/static/13f953658eaecb779984996ea356b1c4/c5f21/photo-1521185496955-15097b20c5fe-2.jpg 520w,\n/static/13f953658eaecb779984996ea356b1c4/d5c54/photo-1521185496955-15097b20c5fe-2.jpg 1040w,\n/static/13f953658eaecb779984996ea356b1c4/81a53/photo-1521185496955-15097b20c5fe-2.jpg 1560w,\n/static/13f953658eaecb779984996ea356b1c4/4e5f3/photo-1521185496955-15097b20c5fe-2.jpg 2000w","srcWebp":"/static/13f953658eaecb779984996ea356b1c4/e4875/photo-1521185496955-15097b20c5fe-2.webp","srcSetWebp":"/static/13f953658eaecb779984996ea356b1c4/dc8f3/photo-1521185496955-15097b20c5fe-2.webp 260w,\n/static/13f953658eaecb779984996ea356b1c4/2db4b/photo-1521185496955-15097b20c5fe-2.webp 520w,\n/static/13f953658eaecb779984996ea356b1c4/e4875/photo-1521185496955-15097b20c5fe-2.webp 1040w,\n/static/13f953658eaecb779984996ea356b1c4/f5845/photo-1521185496955-15097b20c5fe-2.webp 1560w,\n/static/13f953658eaecb779984996ea356b1c4/49d6b/photo-1521185496955-15097b20c5fe-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null}],"plaintext":"As a new year comes along, it's the perfect time to set new goals and learn new\nthings. One of the most important things you should learn in our time and age is\nprogramming.\n\nWhether you already are a programmer or a beginner who wants to get started with\nit, I will list websites and apps that will help you start or continue your\njourney in the world of programming.\n\nSuggested Read\nFor Beginners 12+, check out Juni's article How to Code Your Own Website (for\nBeginners 12+) | Beginner Web Development\n[https://junilearning.com/blog/coding-projects/how-to-make-your-own-website?referrer=blogshahednasser]\n!\n\nCodecademy [https://www.codecademy.com/]\nCodecademy [https://www.codecademy.com/] is a great platform for learning. It is\nthe platform that helped me kick start my web development path and the platform\nI always check for new tutorials and learning paths.\n\nCodecademy is a learn-by-practice platform. It helps you understand the core\nconcept of what you are learning, but also shows you how it works by letting you\ndo it. With their simple explanation and integrated editors and previews, you\ncan learn and practice what you’ve learned all in one place.\n\nCodecademy has learning paths (or tutorials) for web development frameworks like\nReact, Data Science, Mobile Development, and more. It used to be only a website\nbut now they have a mobile app so that you can learn on the go.\n\nEdabit [https://edabit.com/?ref=shahednasser1]\nEdabit [https://edabit.com/?ref=shahednasser1] is a website where you can learn\na programming language through challenges. You can find languages for many\nprogramming languages like C++, C#, Swift, Ruby, Javascript, and more.\n\nWhen solving challenges, you can also see resources that will help you\nunderstand how you can solve the challenge. You can also discuss with other\nusers the best way to solve challenges. It’s very helpful in not only learning a\nprogramming language but also in learning problem-solving through the\nchallenges.\n\nUdemy [https://www.udemy.com/]\nUdemy [https://www.udemy.com/] is very helpful for those who like to learn\nthrough courses, with instructors and resources available. Udemy is a platform\nto learn anything, and one of those things is programming. \n\nAlthough most of the courses are not free on Udemy, you can still find free\ncourses that are very helpful. For example, I took a course about Web Design\nthat was really helpful. You can check my summary\n[https://shahednasserblog.tk/web-design-tips-for-web-developers/] about it as\nwell.\n\nSuggested Read\nTake Free Coding and Programming Courses on FutureLearn\n[https://www.futurelearn.com/subjects/it-and-computer-science-courses/coding-programming]\n!\n\nW3Schools [https://www.w3schools.com/]\nIf you ask any web developer about W3Schools [https://www.w3schools.com/], they\nall will say that they have at least visited it 10 times throughout their\njourney in learning web development. W3Schools is a website that has tutorials\non the most important programming languages and concepts you’ll need in web\ndevelopment.\n\nThe explanation is simple and divided in a way that makes it easy for any\nprogrammer to learn from it. Even those who already are skilled programmers\nstill refer to it when they need to remember a function.\n\nCodepen [https://codepen.io/]\nAlthough Codepen is not labeled as a learning platform, it was very helpful for\nme while learning, practicing, and expanding my skills in CSS. Whether it was\nthrough seeing people’s ideas and taking inspiration from them, or through the\nweekly and daily challenges they provide on Codepen, I was able to practice my\nCSS and become much better at it.\n\nCodepen is also good for practicing Javascript, SCSS, and much more. It does not\nprovide you with tutorials, but it helps you practice what you know and try new\nideas as well.\n\nSoloLearn [https://www.sololearn.com/]\nSoloLearn is another platform that provides simple, learn-by-practice tutorials\non different programming languages. Although from personal experience I wouldn't\nsay it's on the same level as Codecademy, it is still helpful for beginner\nprogrammers who are still not familiar with a lot of concepts in programming. \n\nTheir tutorials are light and fun, not too complicated. I would consider it a\ngreat platform to start getting into programming and maybe deciding where you\nwant to go from there. Also, once you finish learning a programming language you\nwill be provided with a certificate from SoloLearn!\n\nCodinGame [https://www.codingame.com/]\nCodinGame [https://www.codingame.com/] is another platform that helps you learn\nprogramming languages through solving challenges. However, CodinGame is unique\nas its challenges are all related to games. Instead of solving the same old\nchallenges that you will find on all challenge-learning based platforms, you get\nto solve challenges that are parts of games.\n\nYou can choose from many languages to solve any challenge, and you will be able\nto use their editor right on the website, with a simulation showing you your\nresults in the game. You can also participate in contests against other users.\nThe entire experience feels like a fun game!\n\nGoogle Developers Training [https://developers.google.com/training]\nOn Google Developers Training [https://developers.google.com/training], you can\nlearn about Web and Android Development. You can also learn about Firebase,\nMachine Learning, and more. \n\nThe training can be videos, Code Lab and quizzes. They have different paths for\nAndroid Development, for beginner and advanced programmers. This helps you\nunderstand Android Development more clearly as a beginner, then transition to\nthe advanced programmer training as you progress your skills. You can learn in\nKotlin or in Java.\n\nMedium [https://medium.com/] and Developers' Blogs\nBlogs are a great way to learn concepts about programming in general. You can\nfind specific tutorials or solutions to the problems you are facing.\n\nMedium [https://medium.com/] is a blogging platform where you can find tutorials\nand articles about many programming languages or problem solutions. You can also\nfind on google other blogs that will help you throughout your journey.\n\nGitHub [https://github.com/]\nAlthough GitHub [https://github.com/] is not directed towards learning\nprogramming, it is very important for any programmer to start experimenting with\nGitHub.\n\nBy contributing to other open-source projects and helping the community, you can\nexpand your knowledge in different areas while helping open source projects.\n\nIf you’re a beginner and you’re not sure where to start, you can check out a\nlist of beginner-friendly projects here\n[https://github.com/MunGell/awesome-for-beginners]. I personally have a\nrepository and open source project sButtons\n[https://github.com/sButtons/sbuttons], that welcomes everyone including\nbeginners, that you can also start contributing to.\n\nConclusion\nThe list above is among many platforms that will help you learn programming in\n2021. Do you know other platforms that would also be helpful for learning new\nlanguages? Let me know below!","html":"<p>As a new year comes along, it's the perfect time to set new goals and learn new things. One of the most important things you should learn in our time and age is programming.</p><p>Whether you already are a programmer or a beginner who wants to get started with it, I will list websites and apps that will help you start or continue your journey in the world of programming.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>For Beginners 12+, check out Juni's article <a href=\"https://junilearning.com/blog/coding-projects/how-to-make-your-own-website?referrer=blogshahednasser\" target=\"_blank\">How to Code Your Own Website (for Beginners 12+) | Beginner Web Development</a>!</p></div><!--kg-card-end: html--><h2 id=\"codecademy\"><a href=\"https://www.codecademy.com/\">Codecademy</a></h2><p><a href=\"https://www.codecademy.com/\" rel=\"noopener\">Codecademy</a> is a great platform for learning. It is the platform that helped me kick start my web development path and the platform I always check for new tutorials and learning paths.</p><p>Codecademy is a learn-by-practice platform. It helps you understand the core concept of what you are learning, but also shows you how it works by letting you do it. With their simple explanation and integrated editors and previews, you can learn and practice what you’ve learned all in one place.</p><p>Codecademy has learning paths (or tutorials) for web development frameworks like React, Data Science, Mobile Development, and more. It used to be only a website but now they have a mobile app so that you can learn on the go.</p><h2 id=\"edabit\"><a href=\"https://edabit.com/?ref=shahednasser1\">Edabit</a></h2><p><a href=\"https://edabit.com/?ref=shahednasser1\">Edabit</a> is a website where you can learn a programming language through challenges. You can find languages for many programming languages like C++, C#, Swift, Ruby, Javascript, and more.</p><p>When solving challenges, you can also see resources that will help you understand how you can solve the challenge. You can also discuss with other users the best way to solve challenges. It’s very helpful in not only learning a programming language but also in learning problem-solving through the challenges.</p><h2 id=\"udemy\"><a href=\"https://www.udemy.com/\">Udemy</a></h2><p><a href=\"https://www.udemy.com/\">Udemy</a> is very helpful for those who like to learn through courses, with instructors and resources available. Udemy is a platform to learn anything, and one of those things is programming. </p><p>Although most of the courses are not free on Udemy, you can still find free courses that are very helpful. For example, I took a course about Web Design that was really helpful. You can check <a href=\"https://shahednasserblog.tk/web-design-tips-for-web-developers/\">my summary</a> about it as well.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>Take Free Coding and Programming Courses on <a href=\"https://www.futurelearn.com/subjects/it-and-computer-science-courses/coding-programming\" target=\"_blank\">FutureLearn</a>!</p></div><!--kg-card-end: html--><h2 id=\"w3schools\"><a href=\"https://www.w3schools.com/\">W3Schools</a></h2><p>If you ask any web developer about <a href=\"https://www.w3schools.com/\" rel=\"noopener\">W3Schools</a>, they all will say that they have at least visited it 10 times throughout their journey in learning web development. W3Schools is a website that has tutorials on the most important programming languages and concepts you’ll need in web development.</p><p>The explanation is simple and divided in a way that makes it easy for any programmer to learn from it. Even those who already are skilled programmers still refer to it when they need to remember a function.</p><h2 id=\"codepen\"><a href=\"https://codepen.io/\">Codepen</a></h2><p>Although Codepen is not labeled as a learning platform, it was very helpful for me while learning, practicing, and expanding my skills in CSS. Whether it was through seeing people’s ideas and taking inspiration from them, or through the weekly and daily challenges they provide on Codepen, I was able to practice my CSS and become much better at it.</p><p>Codepen is also good for practicing Javascript, SCSS, and much more. It does not provide you with tutorials, but it helps you practice what you know and try new ideas as well.</p><h2 id=\"sololearn\"><a href=\"https://www.sololearn.com/\">SoloLearn</a></h2><p>SoloLearn is another platform that provides simple, learn-by-practice tutorials on different programming languages. Although from personal experience I wouldn't say it's on the same level as Codecademy, it is still helpful for beginner programmers who are still not familiar with a lot of concepts in programming. </p><p>Their tutorials are light and fun, not too complicated. I would consider it a great platform to start getting into programming and maybe deciding where you want to go from there. Also, once you finish learning a programming language you will be provided with a certificate from SoloLearn!</p><h2 id=\"codingame\"><a href=\"https://www.codingame.com/\">CodinGame</a></h2><p><a href=\"https://www.codingame.com/\" rel=\"noopener\">CodinGame</a> is another platform that helps you learn programming languages through solving challenges. However, CodinGame is unique as its challenges are all related to games. Instead of solving the same old challenges that you will find on all challenge-learning based platforms, you get to solve challenges that are parts of games.</p><p>You can choose from many languages to solve any challenge, and you will be able to use their editor right on the website, with a simulation showing you your results in the game. You can also participate in contests against other users. The entire experience feels like a fun game!</p><h2 id=\"google-developers-training\"><a href=\"https://developers.google.com/training\">Google Developers Training</a></h2><p>On <a href=\"https://developers.google.com/training\">Google Developers Training</a>, you can learn about Web and Android Development. You can also learn about Firebase, Machine Learning, and more. </p><p>The training can be videos, Code Lab and quizzes. They have different paths for Android Development, for beginner and advanced programmers. This helps you understand Android Development more clearly as a beginner, then transition to the advanced programmer training as you progress your skills. You can learn in Kotlin or in Java.</p><h2 id=\"medium-and-developers-blogs\"><a href=\"https://medium.com/\">Medium</a> and Developers' Blogs</h2><p>Blogs are a great way to learn concepts about programming in general. You can find specific tutorials or solutions to the problems you are facing.</p><p><a href=\"https://medium.com/\">Medium</a> is a blogging platform where you can find tutorials and articles about many programming languages or problem solutions. You can also find on google other blogs that will help you throughout your journey.</p><h2 id=\"github\"><a href=\"https://github.com/\">GitHub</a></h2><p>Although <a href=\"https://github.com/\" rel=\"noopener\">GitHub</a> is not directed towards learning programming, it is very important for any programmer to start experimenting with GitHub.</p><p>By contributing to other open-source projects and helping the community, you can expand your knowledge in different areas while helping open source projects.</p><p>If you’re a beginner and you’re not sure where to start, you can check out a list of beginner-friendly projects <a href=\"https://github.com/MunGell/awesome-for-beginners\" rel=\"noopener\">here</a>. I personally have a repository and open source project <a href=\"https://github.com/sButtons/sbuttons\" rel=\"noopener\">sButtons</a>, that welcomes everyone including beginners, that you can also start contributing to.</p><h2 id=\"conclusion\">Conclusion</h2><p>The list above is among many platforms that will help you learn programming in 2021. Do you know other platforms that would also be helpful for learning new languages? Let me know below!</p>","url":"https://backend.shahednasser.com/best-platforms-to-learn-programming-in-2021/","canonical_url":null,"uuid":"103b039c-c217-41cb-82b1-e87e4eccc56b","codeinjection_foot":null,"codeinjection_head":"<style>\n    .suggested-read {\n    \tbackground-color: #e8e8e8;\n    \tpadding: 20px;\n\t}\n</style>","codeinjection_styles":"\n    .suggested-read {\n    \tbackground-color: #e8e8e8;\n    \tpadding: 20px;\n\t}\n","comment_id":"5fbe2d826e92c2001ea2251f","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>As a new year comes along, it's the perfect time to set new goals and learn new things. One of the most important things you should learn in our time and age is programming.</p><p>Whether you already are a programmer or a beginner who wants to get started with it, I will list websites and apps that will help you start or continue your journey in the world of programming.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>For Beginners 12+, check out Juni's article <a href=\"https://junilearning.com/blog/coding-projects/how-to-make-your-own-website?referrer=blogshahednasser\" target=\"_blank\">How to Code Your Own Website (for Beginners 12+) | Beginner Web Development</a>!</p></div><!--kg-card-end: html--><h2 id=\"codecademy\"><a href=\"https://www.codecademy.com/\">Codecademy</a></h2><p><a href=\"https://www.codecademy.com/\" rel=\"noopener\">Codecademy</a> is a great platform for learning. It is the platform that helped me kick start my web development path and the platform I always check for new tutorials and learning paths.</p><p>Codecademy is a learn-by-practice platform. It helps you understand the core concept of what you are learning, but also shows you how it works by letting you do it. With their simple explanation and integrated editors and previews, you can learn and practice what you’ve learned all in one place.</p><p>Codecademy has learning paths (or tutorials) for web development frameworks like React, Data Science, Mobile Development, and more. It used to be only a website but now they have a mobile app so that you can learn on the go.</p><h2 id=\"edabit\"><a href=\"https://edabit.com/?ref=shahednasser1\">Edabit</a></h2><p><a href=\"https://edabit.com/?ref=shahednasser1\">Edabit</a> is a website where you can learn a programming language through challenges. You can find languages for many programming languages like C++, C#, Swift, Ruby, Javascript, and more.</p><p>When solving challenges, you can also see resources that will help you understand how you can solve the challenge. You can also discuss with other users the best way to solve challenges. It’s very helpful in not only learning a programming language but also in learning problem-solving through the challenges.</p><h2 id=\"udemy\"><a href=\"https://www.udemy.com/\">Udemy</a></h2><p><a href=\"https://www.udemy.com/\">Udemy</a> is very helpful for those who like to learn through courses, with instructors and resources available. Udemy is a platform to learn anything, and one of those things is programming. </p><p>Although most of the courses are not free on Udemy, you can still find free courses that are very helpful. For example, I took a course about Web Design that was really helpful. You can check <a href=\"https://shahednasserblog.tk/web-design-tips-for-web-developers/\">my summary</a> about it as well.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>Take Free Coding and Programming Courses on <a href=\"https://www.futurelearn.com/subjects/it-and-computer-science-courses/coding-programming\" target=\"_blank\">FutureLearn</a>!</p></div><!--kg-card-end: html--><h2 id=\"w3schools\"><a href=\"https://www.w3schools.com/\">W3Schools</a></h2><p>If you ask any web developer about <a href=\"https://www.w3schools.com/\" rel=\"noopener\">W3Schools</a>, they all will say that they have at least visited it 10 times throughout their journey in learning web development. W3Schools is a website that has tutorials on the most important programming languages and concepts you’ll need in web development.</p><p>The explanation is simple and divided in a way that makes it easy for any programmer to learn from it. Even those who already are skilled programmers still refer to it when they need to remember a function.</p><h2 id=\"codepen\"><a href=\"https://codepen.io/\">Codepen</a></h2><p>Although Codepen is not labeled as a learning platform, it was very helpful for me while learning, practicing, and expanding my skills in CSS. Whether it was through seeing people’s ideas and taking inspiration from them, or through the weekly and daily challenges they provide on Codepen, I was able to practice my CSS and become much better at it.</p><p>Codepen is also good for practicing Javascript, SCSS, and much more. It does not provide you with tutorials, but it helps you practice what you know and try new ideas as well.</p><h2 id=\"sololearn\"><a href=\"https://www.sololearn.com/\">SoloLearn</a></h2><p>SoloLearn is another platform that provides simple, learn-by-practice tutorials on different programming languages. Although from personal experience I wouldn't say it's on the same level as Codecademy, it is still helpful for beginner programmers who are still not familiar with a lot of concepts in programming. </p><p>Their tutorials are light and fun, not too complicated. I would consider it a great platform to start getting into programming and maybe deciding where you want to go from there. Also, once you finish learning a programming language you will be provided with a certificate from SoloLearn!</p><h2 id=\"codingame\"><a href=\"https://www.codingame.com/\">CodinGame</a></h2><p><a href=\"https://www.codingame.com/\" rel=\"noopener\">CodinGame</a> is another platform that helps you learn programming languages through solving challenges. However, CodinGame is unique as its challenges are all related to games. Instead of solving the same old challenges that you will find on all challenge-learning based platforms, you get to solve challenges that are parts of games.</p><p>You can choose from many languages to solve any challenge, and you will be able to use their editor right on the website, with a simulation showing you your results in the game. You can also participate in contests against other users. The entire experience feels like a fun game!</p><h2 id=\"google-developers-training\"><a href=\"https://developers.google.com/training\">Google Developers Training</a></h2><p>On <a href=\"https://developers.google.com/training\">Google Developers Training</a>, you can learn about Web and Android Development. You can also learn about Firebase, Machine Learning, and more. </p><p>The training can be videos, Code Lab and quizzes. They have different paths for Android Development, for beginner and advanced programmers. This helps you understand Android Development more clearly as a beginner, then transition to the advanced programmer training as you progress your skills. You can learn in Kotlin or in Java.</p><h2 id=\"medium-and-developers-blogs\"><a href=\"https://medium.com/\">Medium</a> and Developers' Blogs</h2><p>Blogs are a great way to learn concepts about programming in general. You can find specific tutorials or solutions to the problems you are facing.</p><p><a href=\"https://medium.com/\">Medium</a> is a blogging platform where you can find tutorials and articles about many programming languages or problem solutions. You can also find on google other blogs that will help you throughout your journey.</p><h2 id=\"github\"><a href=\"https://github.com/\">GitHub</a></h2><p>Although <a href=\"https://github.com/\" rel=\"noopener\">GitHub</a> is not directed towards learning programming, it is very important for any programmer to start experimenting with GitHub.</p><p>By contributing to other open-source projects and helping the community, you can expand your knowledge in different areas while helping open source projects.</p><p>If you’re a beginner and you’re not sure where to start, you can check out a list of beginner-friendly projects <a href=\"https://github.com/MunGell/awesome-for-beginners\" rel=\"noopener\">here</a>. I personally have a repository and open source project <a href=\"https://github.com/sButtons/sbuttons\" rel=\"noopener\">sButtons</a>, that welcomes everyone including beginners, that you can also start contributing to.</p><h2 id=\"conclusion\">Conclusion</h2><p>The list above is among many platforms that will help you learn programming in 2021. Do you know other platforms that would also be helpful for learning new languages? Let me know below!</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As a new year comes along, it's the perfect time to set new goals and learn new things. One of the most important things you should learn in our time and age is programming."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Whether you already are a programmer or a beginner who wants to get started with it, I will list websites and apps that will help you start or continue your journey in the world of programming."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"div","properties":{"className":["suggested-read"]},"children":[{"type":"element","tagName":"h4","properties":{},"children":[{"type":"text","value":"Suggested Read"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For Beginners 12+, check out Juni's article "},{"type":"element","tagName":"a","properties":{"href":"https://junilearning.com/blog/coding-projects/how-to-make-your-own-website?referrer=blogshahednasser","target":"_blank"},"children":[{"type":"text","value":"How to Code Your Own Website (for Beginners 12+) | Beginner Web Development"}]},{"type":"text","value":"!"}]}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"h2","properties":{"id":"codecademy"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.codecademy.com/"},"children":[{"type":"text","value":"Codecademy"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.codecademy.com/","rel":["noopener"]},"children":[{"type":"text","value":"Codecademy"}]},{"type":"text","value":" is a great platform for learning. It is the platform that helped me kick start my web development path and the platform I always check for new tutorials and learning paths."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Codecademy is a learn-by-practice platform. It helps you understand the core concept of what you are learning, but also shows you how it works by letting you do it. With their simple explanation and integrated editors and previews, you can learn and practice what you’ve learned all in one place."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Codecademy has learning paths (or tutorials) for web development frameworks like React, Data Science, Mobile Development, and more. It used to be only a website but now they have a mobile app so that you can learn on the go."}]},{"type":"element","tagName":"h2","properties":{"id":"edabit"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://edabit.com/?ref=shahednasser1"},"children":[{"type":"text","value":"Edabit"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://edabit.com/?ref=shahednasser1"},"children":[{"type":"text","value":"Edabit"}]},{"type":"text","value":" is a website where you can learn a programming language through challenges. You can find languages for many programming languages like C++, C#, Swift, Ruby, Javascript, and more."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When solving challenges, you can also see resources that will help you understand how you can solve the challenge. You can also discuss with other users the best way to solve challenges. It’s very helpful in not only learning a programming language but also in learning problem-solving through the challenges."}]},{"type":"element","tagName":"h2","properties":{"id":"udemy"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.udemy.com/"},"children":[{"type":"text","value":"Udemy"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.udemy.com/"},"children":[{"type":"text","value":"Udemy"}]},{"type":"text","value":" is very helpful for those who like to learn through courses, with instructors and resources available. Udemy is a platform to learn anything, and one of those things is programming. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although most of the courses are not free on Udemy, you can still find free courses that are very helpful. For example, I took a course about Web Design that was really helpful. You can check "},{"type":"element","tagName":"a","properties":{"href":"https://shahednasserblog.tk/web-design-tips-for-web-developers/"},"children":[{"type":"text","value":"my summary"}]},{"type":"text","value":" about it as well."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"div","properties":{"className":["suggested-read"]},"children":[{"type":"element","tagName":"h4","properties":{},"children":[{"type":"text","value":"Suggested Read"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Take Free Coding and Programming Courses on "},{"type":"element","tagName":"a","properties":{"href":"https://www.futurelearn.com/subjects/it-and-computer-science-courses/coding-programming","target":"_blank"},"children":[{"type":"text","value":"FutureLearn"}]},{"type":"text","value":"!"}]}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"h2","properties":{"id":"w3schools"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.w3schools.com/"},"children":[{"type":"text","value":"W3Schools"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you ask any web developer about "},{"type":"element","tagName":"a","properties":{"href":"https://www.w3schools.com/","rel":["noopener"]},"children":[{"type":"text","value":"W3Schools"}]},{"type":"text","value":", they all will say that they have at least visited it 10 times throughout their journey in learning web development. W3Schools is a website that has tutorials on the most important programming languages and concepts you’ll need in web development."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The explanation is simple and divided in a way that makes it easy for any programmer to learn from it. Even those who already are skilled programmers still refer to it when they need to remember a function."}]},{"type":"element","tagName":"h2","properties":{"id":"codepen"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/"},"children":[{"type":"text","value":"Codepen"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although Codepen is not labeled as a learning platform, it was very helpful for me while learning, practicing, and expanding my skills in CSS. Whether it was through seeing people’s ideas and taking inspiration from them, or through the weekly and daily challenges they provide on Codepen, I was able to practice my CSS and become much better at it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Codepen is also good for practicing Javascript, SCSS, and much more. It does not provide you with tutorials, but it helps you practice what you know and try new ideas as well."}]},{"type":"element","tagName":"h2","properties":{"id":"sololearn"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.sololearn.com/"},"children":[{"type":"text","value":"SoloLearn"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"SoloLearn is another platform that provides simple, learn-by-practice tutorials on different programming languages. Although from personal experience I wouldn't say it's on the same level as Codecademy, it is still helpful for beginner programmers who are still not familiar with a lot of concepts in programming. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Their tutorials are light and fun, not too complicated. I would consider it a great platform to start getting into programming and maybe deciding where you want to go from there. Also, once you finish learning a programming language you will be provided with a certificate from SoloLearn!"}]},{"type":"element","tagName":"h2","properties":{"id":"codingame"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.codingame.com/"},"children":[{"type":"text","value":"CodinGame"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.codingame.com/","rel":["noopener"]},"children":[{"type":"text","value":"CodinGame"}]},{"type":"text","value":" is another platform that helps you learn programming languages through solving challenges. However, CodinGame is unique as its challenges are all related to games. Instead of solving the same old challenges that you will find on all challenge-learning based platforms, you get to solve challenges that are parts of games."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can choose from many languages to solve any challenge, and you will be able to use their editor right on the website, with a simulation showing you your results in the game. You can also participate in contests against other users. The entire experience feels like a fun game!"}]},{"type":"element","tagName":"h2","properties":{"id":"google-developers-training"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://developers.google.com/training"},"children":[{"type":"text","value":"Google Developers Training"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On "},{"type":"element","tagName":"a","properties":{"href":"https://developers.google.com/training"},"children":[{"type":"text","value":"Google Developers Training"}]},{"type":"text","value":", you can learn about Web and Android Development. You can also learn about Firebase, Machine Learning, and more. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The training can be videos, Code Lab and quizzes. They have different paths for Android Development, for beginner and advanced programmers. This helps you understand Android Development more clearly as a beginner, then transition to the advanced programmer training as you progress your skills. You can learn in Kotlin or in Java."}]},{"type":"element","tagName":"h2","properties":{"id":"medium-and-developers-blogs"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://medium.com/"},"children":[{"type":"text","value":"Medium"}]},{"type":"text","value":" and Developers' Blogs"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Blogs are a great way to learn concepts about programming in general. You can find specific tutorials or solutions to the problems you are facing."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://medium.com/"},"children":[{"type":"text","value":"Medium"}]},{"type":"text","value":" is a blogging platform where you can find tutorials and articles about many programming languages or problem solutions. You can also find on google other blogs that will help you throughout your journey."}]},{"type":"element","tagName":"h2","properties":{"id":"github"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/"},"children":[{"type":"text","value":"GitHub"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/","rel":["noopener"]},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":" is not directed towards learning programming, it is very important for any programmer to start experimenting with GitHub."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By contributing to other open-source projects and helping the community, you can expand your knowledge in different areas while helping open source projects."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you’re a beginner and you’re not sure where to start, you can check out a list of beginner-friendly projects "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/MunGell/awesome-for-beginners","rel":["noopener"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":". I personally have a repository and open source project "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sButtons/sbuttons","rel":["noopener"]},"children":[{"type":"text","value":"sButtons"}]},{"type":"text","value":", that welcomes everyone including beginners, that you can also start contributing to."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The list above is among many platforms that will help you learn programming in 2021. Do you know other platforms that would also be helpful for learning new languages? Let me know below!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"error-missing-id","heading":"Suggested Read"},{"id":"codecademy","heading":"Codecademy"},{"id":"edabit","heading":"Edabit"},{"id":"udemy","heading":"Udemy","items":[{"id":"error-missing-id","heading":"Suggested Read"}]},{"id":"w3schools","heading":"W3Schools"},{"id":"codepen","heading":"Codepen"},{"id":"sololearn","heading":"SoloLearn"},{"id":"codingame","heading":"CodinGame"},{"id":"google-developers-training","heading":"Google Developers Training"},{"id":"medium-and-developers-blogs","heading":"Medium and Developers' Blogs"},{"id":"github","heading":"GitHub"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1550645612-83f5d594b671.jpg","publicURL":"/static/e9818cc00005b71bd82f0d24b45948ab/photo-1550645612-83f5d594b671.jpg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAeRWJKQH/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAERICH/2gAIAQEAAQUCROOn/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bh//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAAEFAQAAAAAAAAAAAAAAAAABEBEhMVH/2gAIAQEAAT8hNtJXTRJLf//aAAwDAQACAAMAAAAQUM//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPxCD/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAIDAQAAAAAAAAAAAAAAAQARITFRsf/aAAgBAQABPxBBuqdxoBwA8mTUMwUtFVn/2Q==","aspectRatio":1.5028901734104045,"src":"/static/e9818cc00005b71bd82f0d24b45948ab/d5c54/photo-1550645612-83f5d594b671.jpg","srcSet":"/static/e9818cc00005b71bd82f0d24b45948ab/65d8c/photo-1550645612-83f5d594b671.jpg 260w,\n/static/e9818cc00005b71bd82f0d24b45948ab/c5f21/photo-1550645612-83f5d594b671.jpg 520w,\n/static/e9818cc00005b71bd82f0d24b45948ab/d5c54/photo-1550645612-83f5d594b671.jpg 1040w,\n/static/e9818cc00005b71bd82f0d24b45948ab/81a53/photo-1550645612-83f5d594b671.jpg 1560w,\n/static/e9818cc00005b71bd82f0d24b45948ab/4e5f3/photo-1550645612-83f5d594b671.jpg 2000w","srcWebp":"/static/e9818cc00005b71bd82f0d24b45948ab/e4875/photo-1550645612-83f5d594b671.webp","srcSetWebp":"/static/e9818cc00005b71bd82f0d24b45948ab/dc8f3/photo-1550645612-83f5d594b671.webp 260w,\n/static/e9818cc00005b71bd82f0d24b45948ab/2db4b/photo-1550645612-83f5d594b671.webp 520w,\n/static/e9818cc00005b71bd82f0d24b45948ab/e4875/photo-1550645612-83f5d594b671.webp 1040w,\n/static/e9818cc00005b71bd82f0d24b45948ab/f5845/photo-1550645612-83f5d594b671.webp 1560w,\n/static/e9818cc00005b71bd82f0d24b45948ab/49d6b/photo-1550645612-83f5d594b671.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"ghostPost":{"id":"Ghost__Post__6127ba1b3ed159214d382e77","title":"Best Free Platforms To Learn Programming in 2021","slug":"best-platforms-to-learn-programming-in-2021","featured":false,"feature_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1550645612-83f5d594b671.jpg","excerpt":"In this article, I will list websites and apps that will help you start or continue your journey in the world of programming.","custom_excerpt":"In this article, I will list websites and apps that will help you start or continue your journey in the world of programming.","visibility":"public","created_at_pretty":"25 Nov 2020","published_at_pretty":"28 Jan 2021","updated_at_pretty":"28 Sep 2021","created_at":"2020-11-25T10:10:10.000+00:00","published_at":"2021-01-28T14:34:58.000+00:00","updated_at":"2021-09-28T12:16:26.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":{"base":"photo-1521185496955-15097b20c5fe-2.jpeg","publicURL":"/static/13f953658eaecb779984996ea356b1c4/photo-1521185496955-15097b20c5fe-2.jpeg","imageMeta":{"width":2000,"height":1547},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABhU05c9sV/8QAGRAAAwEBAQAAAAAAAAAAAAAAAQIDABIR/9oACAEBAAEFAuTgGxGjVeRdPLOHf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAMBAQEAAAAAAAAAAAAAAAABEXECEP/aAAgBAQAGPwL2dJaOqYVH/8QAGhAAAwADAQAAAAAAAAAAAAAAAAERITFBYf/aAAgBAQABPyFpWJH6IutKCacL+lRRGxiDm+H/2gAMAwEAAgADAAAAEK//AP/EABYRAQEBAAAAAAAAAAAAAAAAAAEREP/aAAgBAwEBPxAI3P/EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAgEBPxBaR03/xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAhMUGxcf/aAAgBAQABPxAInmDF9wQ6urfMI5JgA/si0141k9pEa4fcjFJmybz/2Q==","aspectRatio":1.2935323383084578,"src":"/static/13f953658eaecb779984996ea356b1c4/d5c54/photo-1521185496955-15097b20c5fe-2.jpg","srcSet":"/static/13f953658eaecb779984996ea356b1c4/65d8c/photo-1521185496955-15097b20c5fe-2.jpg 260w,\n/static/13f953658eaecb779984996ea356b1c4/c5f21/photo-1521185496955-15097b20c5fe-2.jpg 520w,\n/static/13f953658eaecb779984996ea356b1c4/d5c54/photo-1521185496955-15097b20c5fe-2.jpg 1040w,\n/static/13f953658eaecb779984996ea356b1c4/81a53/photo-1521185496955-15097b20c5fe-2.jpg 1560w,\n/static/13f953658eaecb779984996ea356b1c4/4e5f3/photo-1521185496955-15097b20c5fe-2.jpg 2000w","srcWebp":"/static/13f953658eaecb779984996ea356b1c4/e4875/photo-1521185496955-15097b20c5fe-2.webp","srcSetWebp":"/static/13f953658eaecb779984996ea356b1c4/dc8f3/photo-1521185496955-15097b20c5fe-2.webp 260w,\n/static/13f953658eaecb779984996ea356b1c4/2db4b/photo-1521185496955-15097b20c5fe-2.webp 520w,\n/static/13f953658eaecb779984996ea356b1c4/e4875/photo-1521185496955-15097b20c5fe-2.webp 1040w,\n/static/13f953658eaecb779984996ea356b1c4/f5845/photo-1521185496955-15097b20c5fe-2.webp 1560w,\n/static/13f953658eaecb779984996ea356b1c4/49d6b/photo-1521185496955-15097b20c5fe-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null}],"plaintext":"As a new year comes along, it's the perfect time to set new goals and learn new\nthings. One of the most important things you should learn in our time and age is\nprogramming.\n\nWhether you already are a programmer or a beginner who wants to get started with\nit, I will list websites and apps that will help you start or continue your\njourney in the world of programming.\n\nSuggested Read\nFor Beginners 12+, check out Juni's article How to Code Your Own Website (for\nBeginners 12+) | Beginner Web Development\n[https://junilearning.com/blog/coding-projects/how-to-make-your-own-website?referrer=blogshahednasser]\n!\n\nCodecademy [https://www.codecademy.com/]\nCodecademy [https://www.codecademy.com/] is a great platform for learning. It is\nthe platform that helped me kick start my web development path and the platform\nI always check for new tutorials and learning paths.\n\nCodecademy is a learn-by-practice platform. It helps you understand the core\nconcept of what you are learning, but also shows you how it works by letting you\ndo it. With their simple explanation and integrated editors and previews, you\ncan learn and practice what you’ve learned all in one place.\n\nCodecademy has learning paths (or tutorials) for web development frameworks like\nReact, Data Science, Mobile Development, and more. It used to be only a website\nbut now they have a mobile app so that you can learn on the go.\n\nEdabit [https://edabit.com/?ref=shahednasser1]\nEdabit [https://edabit.com/?ref=shahednasser1] is a website where you can learn\na programming language through challenges. You can find languages for many\nprogramming languages like C++, C#, Swift, Ruby, Javascript, and more.\n\nWhen solving challenges, you can also see resources that will help you\nunderstand how you can solve the challenge. You can also discuss with other\nusers the best way to solve challenges. It’s very helpful in not only learning a\nprogramming language but also in learning problem-solving through the\nchallenges.\n\nUdemy [https://www.udemy.com/]\nUdemy [https://www.udemy.com/] is very helpful for those who like to learn\nthrough courses, with instructors and resources available. Udemy is a platform\nto learn anything, and one of those things is programming. \n\nAlthough most of the courses are not free on Udemy, you can still find free\ncourses that are very helpful. For example, I took a course about Web Design\nthat was really helpful. You can check my summary\n[https://shahednasserblog.tk/web-design-tips-for-web-developers/] about it as\nwell.\n\nSuggested Read\nTake Free Coding and Programming Courses on FutureLearn\n[https://www.futurelearn.com/subjects/it-and-computer-science-courses/coding-programming]\n!\n\nW3Schools [https://www.w3schools.com/]\nIf you ask any web developer about W3Schools [https://www.w3schools.com/], they\nall will say that they have at least visited it 10 times throughout their\njourney in learning web development. W3Schools is a website that has tutorials\non the most important programming languages and concepts you’ll need in web\ndevelopment.\n\nThe explanation is simple and divided in a way that makes it easy for any\nprogrammer to learn from it. Even those who already are skilled programmers\nstill refer to it when they need to remember a function.\n\nCodepen [https://codepen.io/]\nAlthough Codepen is not labeled as a learning platform, it was very helpful for\nme while learning, practicing, and expanding my skills in CSS. Whether it was\nthrough seeing people’s ideas and taking inspiration from them, or through the\nweekly and daily challenges they provide on Codepen, I was able to practice my\nCSS and become much better at it.\n\nCodepen is also good for practicing Javascript, SCSS, and much more. It does not\nprovide you with tutorials, but it helps you practice what you know and try new\nideas as well.\n\nSoloLearn [https://www.sololearn.com/]\nSoloLearn is another platform that provides simple, learn-by-practice tutorials\non different programming languages. Although from personal experience I wouldn't\nsay it's on the same level as Codecademy, it is still helpful for beginner\nprogrammers who are still not familiar with a lot of concepts in programming. \n\nTheir tutorials are light and fun, not too complicated. I would consider it a\ngreat platform to start getting into programming and maybe deciding where you\nwant to go from there. Also, once you finish learning a programming language you\nwill be provided with a certificate from SoloLearn!\n\nCodinGame [https://www.codingame.com/]\nCodinGame [https://www.codingame.com/] is another platform that helps you learn\nprogramming languages through solving challenges. However, CodinGame is unique\nas its challenges are all related to games. Instead of solving the same old\nchallenges that you will find on all challenge-learning based platforms, you get\nto solve challenges that are parts of games.\n\nYou can choose from many languages to solve any challenge, and you will be able\nto use their editor right on the website, with a simulation showing you your\nresults in the game. You can also participate in contests against other users.\nThe entire experience feels like a fun game!\n\nGoogle Developers Training [https://developers.google.com/training]\nOn Google Developers Training [https://developers.google.com/training], you can\nlearn about Web and Android Development. You can also learn about Firebase,\nMachine Learning, and more. \n\nThe training can be videos, Code Lab and quizzes. They have different paths for\nAndroid Development, for beginner and advanced programmers. This helps you\nunderstand Android Development more clearly as a beginner, then transition to\nthe advanced programmer training as you progress your skills. You can learn in\nKotlin or in Java.\n\nMedium [https://medium.com/] and Developers' Blogs\nBlogs are a great way to learn concepts about programming in general. You can\nfind specific tutorials or solutions to the problems you are facing.\n\nMedium [https://medium.com/] is a blogging platform where you can find tutorials\nand articles about many programming languages or problem solutions. You can also\nfind on google other blogs that will help you throughout your journey.\n\nGitHub [https://github.com/]\nAlthough GitHub [https://github.com/] is not directed towards learning\nprogramming, it is very important for any programmer to start experimenting with\nGitHub.\n\nBy contributing to other open-source projects and helping the community, you can\nexpand your knowledge in different areas while helping open source projects.\n\nIf you’re a beginner and you’re not sure where to start, you can check out a\nlist of beginner-friendly projects here\n[https://github.com/MunGell/awesome-for-beginners]. I personally have a\nrepository and open source project sButtons\n[https://github.com/sButtons/sbuttons], that welcomes everyone including\nbeginners, that you can also start contributing to.\n\nConclusion\nThe list above is among many platforms that will help you learn programming in\n2021. Do you know other platforms that would also be helpful for learning new\nlanguages? Let me know below!","html":"<p>As a new year comes along, it's the perfect time to set new goals and learn new things. One of the most important things you should learn in our time and age is programming.</p><p>Whether you already are a programmer or a beginner who wants to get started with it, I will list websites and apps that will help you start or continue your journey in the world of programming.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>For Beginners 12+, check out Juni's article <a href=\"https://junilearning.com/blog/coding-projects/how-to-make-your-own-website?referrer=blogshahednasser\" target=\"_blank\">How to Code Your Own Website (for Beginners 12+) | Beginner Web Development</a>!</p></div><!--kg-card-end: html--><h2 id=\"codecademy\"><a href=\"https://www.codecademy.com/\">Codecademy</a></h2><p><a href=\"https://www.codecademy.com/\" rel=\"noopener\">Codecademy</a> is a great platform for learning. It is the platform that helped me kick start my web development path and the platform I always check for new tutorials and learning paths.</p><p>Codecademy is a learn-by-practice platform. It helps you understand the core concept of what you are learning, but also shows you how it works by letting you do it. With their simple explanation and integrated editors and previews, you can learn and practice what you’ve learned all in one place.</p><p>Codecademy has learning paths (or tutorials) for web development frameworks like React, Data Science, Mobile Development, and more. It used to be only a website but now they have a mobile app so that you can learn on the go.</p><h2 id=\"edabit\"><a href=\"https://edabit.com/?ref=shahednasser1\">Edabit</a></h2><p><a href=\"https://edabit.com/?ref=shahednasser1\">Edabit</a> is a website where you can learn a programming language through challenges. You can find languages for many programming languages like C++, C#, Swift, Ruby, Javascript, and more.</p><p>When solving challenges, you can also see resources that will help you understand how you can solve the challenge. You can also discuss with other users the best way to solve challenges. It’s very helpful in not only learning a programming language but also in learning problem-solving through the challenges.</p><h2 id=\"udemy\"><a href=\"https://www.udemy.com/\">Udemy</a></h2><p><a href=\"https://www.udemy.com/\">Udemy</a> is very helpful for those who like to learn through courses, with instructors and resources available. Udemy is a platform to learn anything, and one of those things is programming. </p><p>Although most of the courses are not free on Udemy, you can still find free courses that are very helpful. For example, I took a course about Web Design that was really helpful. You can check <a href=\"https://shahednasserblog.tk/web-design-tips-for-web-developers/\">my summary</a> about it as well.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>Take Free Coding and Programming Courses on <a href=\"https://www.futurelearn.com/subjects/it-and-computer-science-courses/coding-programming\" target=\"_blank\">FutureLearn</a>!</p></div><!--kg-card-end: html--><h2 id=\"w3schools\"><a href=\"https://www.w3schools.com/\">W3Schools</a></h2><p>If you ask any web developer about <a href=\"https://www.w3schools.com/\" rel=\"noopener\">W3Schools</a>, they all will say that they have at least visited it 10 times throughout their journey in learning web development. W3Schools is a website that has tutorials on the most important programming languages and concepts you’ll need in web development.</p><p>The explanation is simple and divided in a way that makes it easy for any programmer to learn from it. Even those who already are skilled programmers still refer to it when they need to remember a function.</p><h2 id=\"codepen\"><a href=\"https://codepen.io/\">Codepen</a></h2><p>Although Codepen is not labeled as a learning platform, it was very helpful for me while learning, practicing, and expanding my skills in CSS. Whether it was through seeing people’s ideas and taking inspiration from them, or through the weekly and daily challenges they provide on Codepen, I was able to practice my CSS and become much better at it.</p><p>Codepen is also good for practicing Javascript, SCSS, and much more. It does not provide you with tutorials, but it helps you practice what you know and try new ideas as well.</p><h2 id=\"sololearn\"><a href=\"https://www.sololearn.com/\">SoloLearn</a></h2><p>SoloLearn is another platform that provides simple, learn-by-practice tutorials on different programming languages. Although from personal experience I wouldn't say it's on the same level as Codecademy, it is still helpful for beginner programmers who are still not familiar with a lot of concepts in programming. </p><p>Their tutorials are light and fun, not too complicated. I would consider it a great platform to start getting into programming and maybe deciding where you want to go from there. Also, once you finish learning a programming language you will be provided with a certificate from SoloLearn!</p><h2 id=\"codingame\"><a href=\"https://www.codingame.com/\">CodinGame</a></h2><p><a href=\"https://www.codingame.com/\" rel=\"noopener\">CodinGame</a> is another platform that helps you learn programming languages through solving challenges. However, CodinGame is unique as its challenges are all related to games. Instead of solving the same old challenges that you will find on all challenge-learning based platforms, you get to solve challenges that are parts of games.</p><p>You can choose from many languages to solve any challenge, and you will be able to use their editor right on the website, with a simulation showing you your results in the game. You can also participate in contests against other users. The entire experience feels like a fun game!</p><h2 id=\"google-developers-training\"><a href=\"https://developers.google.com/training\">Google Developers Training</a></h2><p>On <a href=\"https://developers.google.com/training\">Google Developers Training</a>, you can learn about Web and Android Development. You can also learn about Firebase, Machine Learning, and more. </p><p>The training can be videos, Code Lab and quizzes. They have different paths for Android Development, for beginner and advanced programmers. This helps you understand Android Development more clearly as a beginner, then transition to the advanced programmer training as you progress your skills. You can learn in Kotlin or in Java.</p><h2 id=\"medium-and-developers-blogs\"><a href=\"https://medium.com/\">Medium</a> and Developers' Blogs</h2><p>Blogs are a great way to learn concepts about programming in general. You can find specific tutorials or solutions to the problems you are facing.</p><p><a href=\"https://medium.com/\">Medium</a> is a blogging platform where you can find tutorials and articles about many programming languages or problem solutions. You can also find on google other blogs that will help you throughout your journey.</p><h2 id=\"github\"><a href=\"https://github.com/\">GitHub</a></h2><p>Although <a href=\"https://github.com/\" rel=\"noopener\">GitHub</a> is not directed towards learning programming, it is very important for any programmer to start experimenting with GitHub.</p><p>By contributing to other open-source projects and helping the community, you can expand your knowledge in different areas while helping open source projects.</p><p>If you’re a beginner and you’re not sure where to start, you can check out a list of beginner-friendly projects <a href=\"https://github.com/MunGell/awesome-for-beginners\" rel=\"noopener\">here</a>. I personally have a repository and open source project <a href=\"https://github.com/sButtons/sbuttons\" rel=\"noopener\">sButtons</a>, that welcomes everyone including beginners, that you can also start contributing to.</p><h2 id=\"conclusion\">Conclusion</h2><p>The list above is among many platforms that will help you learn programming in 2021. Do you know other platforms that would also be helpful for learning new languages? Let me know below!</p>","url":"https://backend.shahednasser.com/best-platforms-to-learn-programming-in-2021/","canonical_url":null,"uuid":"103b039c-c217-41cb-82b1-e87e4eccc56b","codeinjection_foot":null,"codeinjection_head":"<style>\n    .suggested-read {\n    \tbackground-color: #e8e8e8;\n    \tpadding: 20px;\n\t}\n</style>","codeinjection_styles":"\n    .suggested-read {\n    \tbackground-color: #e8e8e8;\n    \tpadding: 20px;\n\t}\n","comment_id":"5fbe2d826e92c2001ea2251f","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>As a new year comes along, it's the perfect time to set new goals and learn new things. One of the most important things you should learn in our time and age is programming.</p><p>Whether you already are a programmer or a beginner who wants to get started with it, I will list websites and apps that will help you start or continue your journey in the world of programming.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>For Beginners 12+, check out Juni's article <a href=\"https://junilearning.com/blog/coding-projects/how-to-make-your-own-website?referrer=blogshahednasser\" target=\"_blank\">How to Code Your Own Website (for Beginners 12+) | Beginner Web Development</a>!</p></div><!--kg-card-end: html--><h2 id=\"codecademy\"><a href=\"https://www.codecademy.com/\">Codecademy</a></h2><p><a href=\"https://www.codecademy.com/\" rel=\"noopener\">Codecademy</a> is a great platform for learning. It is the platform that helped me kick start my web development path and the platform I always check for new tutorials and learning paths.</p><p>Codecademy is a learn-by-practice platform. It helps you understand the core concept of what you are learning, but also shows you how it works by letting you do it. With their simple explanation and integrated editors and previews, you can learn and practice what you’ve learned all in one place.</p><p>Codecademy has learning paths (or tutorials) for web development frameworks like React, Data Science, Mobile Development, and more. It used to be only a website but now they have a mobile app so that you can learn on the go.</p><h2 id=\"edabit\"><a href=\"https://edabit.com/?ref=shahednasser1\">Edabit</a></h2><p><a href=\"https://edabit.com/?ref=shahednasser1\">Edabit</a> is a website where you can learn a programming language through challenges. You can find languages for many programming languages like C++, C#, Swift, Ruby, Javascript, and more.</p><p>When solving challenges, you can also see resources that will help you understand how you can solve the challenge. You can also discuss with other users the best way to solve challenges. It’s very helpful in not only learning a programming language but also in learning problem-solving through the challenges.</p><h2 id=\"udemy\"><a href=\"https://www.udemy.com/\">Udemy</a></h2><p><a href=\"https://www.udemy.com/\">Udemy</a> is very helpful for those who like to learn through courses, with instructors and resources available. Udemy is a platform to learn anything, and one of those things is programming. </p><p>Although most of the courses are not free on Udemy, you can still find free courses that are very helpful. For example, I took a course about Web Design that was really helpful. You can check <a href=\"https://shahednasserblog.tk/web-design-tips-for-web-developers/\">my summary</a> about it as well.</p><!--kg-card-begin: html--><div class=\"suggested-read\"><h4>Suggested Read</h4><p>Take Free Coding and Programming Courses on <a href=\"https://www.futurelearn.com/subjects/it-and-computer-science-courses/coding-programming\" target=\"_blank\">FutureLearn</a>!</p></div><!--kg-card-end: html--><h2 id=\"w3schools\"><a href=\"https://www.w3schools.com/\">W3Schools</a></h2><p>If you ask any web developer about <a href=\"https://www.w3schools.com/\" rel=\"noopener\">W3Schools</a>, they all will say that they have at least visited it 10 times throughout their journey in learning web development. W3Schools is a website that has tutorials on the most important programming languages and concepts you’ll need in web development.</p><p>The explanation is simple and divided in a way that makes it easy for any programmer to learn from it. Even those who already are skilled programmers still refer to it when they need to remember a function.</p><h2 id=\"codepen\"><a href=\"https://codepen.io/\">Codepen</a></h2><p>Although Codepen is not labeled as a learning platform, it was very helpful for me while learning, practicing, and expanding my skills in CSS. Whether it was through seeing people’s ideas and taking inspiration from them, or through the weekly and daily challenges they provide on Codepen, I was able to practice my CSS and become much better at it.</p><p>Codepen is also good for practicing Javascript, SCSS, and much more. It does not provide you with tutorials, but it helps you practice what you know and try new ideas as well.</p><h2 id=\"sololearn\"><a href=\"https://www.sololearn.com/\">SoloLearn</a></h2><p>SoloLearn is another platform that provides simple, learn-by-practice tutorials on different programming languages. Although from personal experience I wouldn't say it's on the same level as Codecademy, it is still helpful for beginner programmers who are still not familiar with a lot of concepts in programming. </p><p>Their tutorials are light and fun, not too complicated. I would consider it a great platform to start getting into programming and maybe deciding where you want to go from there. Also, once you finish learning a programming language you will be provided with a certificate from SoloLearn!</p><h2 id=\"codingame\"><a href=\"https://www.codingame.com/\">CodinGame</a></h2><p><a href=\"https://www.codingame.com/\" rel=\"noopener\">CodinGame</a> is another platform that helps you learn programming languages through solving challenges. However, CodinGame is unique as its challenges are all related to games. Instead of solving the same old challenges that you will find on all challenge-learning based platforms, you get to solve challenges that are parts of games.</p><p>You can choose from many languages to solve any challenge, and you will be able to use their editor right on the website, with a simulation showing you your results in the game. You can also participate in contests against other users. The entire experience feels like a fun game!</p><h2 id=\"google-developers-training\"><a href=\"https://developers.google.com/training\">Google Developers Training</a></h2><p>On <a href=\"https://developers.google.com/training\">Google Developers Training</a>, you can learn about Web and Android Development. You can also learn about Firebase, Machine Learning, and more. </p><p>The training can be videos, Code Lab and quizzes. They have different paths for Android Development, for beginner and advanced programmers. This helps you understand Android Development more clearly as a beginner, then transition to the advanced programmer training as you progress your skills. You can learn in Kotlin or in Java.</p><h2 id=\"medium-and-developers-blogs\"><a href=\"https://medium.com/\">Medium</a> and Developers' Blogs</h2><p>Blogs are a great way to learn concepts about programming in general. You can find specific tutorials or solutions to the problems you are facing.</p><p><a href=\"https://medium.com/\">Medium</a> is a blogging platform where you can find tutorials and articles about many programming languages or problem solutions. You can also find on google other blogs that will help you throughout your journey.</p><h2 id=\"github\"><a href=\"https://github.com/\">GitHub</a></h2><p>Although <a href=\"https://github.com/\" rel=\"noopener\">GitHub</a> is not directed towards learning programming, it is very important for any programmer to start experimenting with GitHub.</p><p>By contributing to other open-source projects and helping the community, you can expand your knowledge in different areas while helping open source projects.</p><p>If you’re a beginner and you’re not sure where to start, you can check out a list of beginner-friendly projects <a href=\"https://github.com/MunGell/awesome-for-beginners\" rel=\"noopener\">here</a>. I personally have a repository and open source project <a href=\"https://github.com/sButtons/sbuttons\" rel=\"noopener\">sButtons</a>, that welcomes everyone including beginners, that you can also start contributing to.</p><h2 id=\"conclusion\">Conclusion</h2><p>The list above is among many platforms that will help you learn programming in 2021. Do you know other platforms that would also be helpful for learning new languages? Let me know below!</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As a new year comes along, it's the perfect time to set new goals and learn new things. One of the most important things you should learn in our time and age is programming."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Whether you already are a programmer or a beginner who wants to get started with it, I will list websites and apps that will help you start or continue your journey in the world of programming."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"div","properties":{"className":["suggested-read"]},"children":[{"type":"element","tagName":"h4","properties":{},"children":[{"type":"text","value":"Suggested Read"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For Beginners 12+, check out Juni's article "},{"type":"element","tagName":"a","properties":{"href":"https://junilearning.com/blog/coding-projects/how-to-make-your-own-website?referrer=blogshahednasser","target":"_blank"},"children":[{"type":"text","value":"How to Code Your Own Website (for Beginners 12+) | Beginner Web Development"}]},{"type":"text","value":"!"}]}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"h2","properties":{"id":"codecademy"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.codecademy.com/"},"children":[{"type":"text","value":"Codecademy"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.codecademy.com/","rel":["noopener"]},"children":[{"type":"text","value":"Codecademy"}]},{"type":"text","value":" is a great platform for learning. It is the platform that helped me kick start my web development path and the platform I always check for new tutorials and learning paths."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Codecademy is a learn-by-practice platform. It helps you understand the core concept of what you are learning, but also shows you how it works by letting you do it. With their simple explanation and integrated editors and previews, you can learn and practice what you’ve learned all in one place."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Codecademy has learning paths (or tutorials) for web development frameworks like React, Data Science, Mobile Development, and more. It used to be only a website but now they have a mobile app so that you can learn on the go."}]},{"type":"element","tagName":"h2","properties":{"id":"edabit"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://edabit.com/?ref=shahednasser1"},"children":[{"type":"text","value":"Edabit"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://edabit.com/?ref=shahednasser1"},"children":[{"type":"text","value":"Edabit"}]},{"type":"text","value":" is a website where you can learn a programming language through challenges. You can find languages for many programming languages like C++, C#, Swift, Ruby, Javascript, and more."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When solving challenges, you can also see resources that will help you understand how you can solve the challenge. You can also discuss with other users the best way to solve challenges. It’s very helpful in not only learning a programming language but also in learning problem-solving through the challenges."}]},{"type":"element","tagName":"h2","properties":{"id":"udemy"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.udemy.com/"},"children":[{"type":"text","value":"Udemy"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.udemy.com/"},"children":[{"type":"text","value":"Udemy"}]},{"type":"text","value":" is very helpful for those who like to learn through courses, with instructors and resources available. Udemy is a platform to learn anything, and one of those things is programming. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although most of the courses are not free on Udemy, you can still find free courses that are very helpful. For example, I took a course about Web Design that was really helpful. You can check "},{"type":"element","tagName":"a","properties":{"href":"https://shahednasserblog.tk/web-design-tips-for-web-developers/"},"children":[{"type":"text","value":"my summary"}]},{"type":"text","value":" about it as well."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"div","properties":{"className":["suggested-read"]},"children":[{"type":"element","tagName":"h4","properties":{},"children":[{"type":"text","value":"Suggested Read"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Take Free Coding and Programming Courses on "},{"type":"element","tagName":"a","properties":{"href":"https://www.futurelearn.com/subjects/it-and-computer-science-courses/coding-programming","target":"_blank"},"children":[{"type":"text","value":"FutureLearn"}]},{"type":"text","value":"!"}]}]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"h2","properties":{"id":"w3schools"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.w3schools.com/"},"children":[{"type":"text","value":"W3Schools"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you ask any web developer about "},{"type":"element","tagName":"a","properties":{"href":"https://www.w3schools.com/","rel":["noopener"]},"children":[{"type":"text","value":"W3Schools"}]},{"type":"text","value":", they all will say that they have at least visited it 10 times throughout their journey in learning web development. W3Schools is a website that has tutorials on the most important programming languages and concepts you’ll need in web development."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The explanation is simple and divided in a way that makes it easy for any programmer to learn from it. Even those who already are skilled programmers still refer to it when they need to remember a function."}]},{"type":"element","tagName":"h2","properties":{"id":"codepen"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/"},"children":[{"type":"text","value":"Codepen"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although Codepen is not labeled as a learning platform, it was very helpful for me while learning, practicing, and expanding my skills in CSS. Whether it was through seeing people’s ideas and taking inspiration from them, or through the weekly and daily challenges they provide on Codepen, I was able to practice my CSS and become much better at it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Codepen is also good for practicing Javascript, SCSS, and much more. It does not provide you with tutorials, but it helps you practice what you know and try new ideas as well."}]},{"type":"element","tagName":"h2","properties":{"id":"sololearn"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.sololearn.com/"},"children":[{"type":"text","value":"SoloLearn"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"SoloLearn is another platform that provides simple, learn-by-practice tutorials on different programming languages. Although from personal experience I wouldn't say it's on the same level as Codecademy, it is still helpful for beginner programmers who are still not familiar with a lot of concepts in programming. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Their tutorials are light and fun, not too complicated. I would consider it a great platform to start getting into programming and maybe deciding where you want to go from there. Also, once you finish learning a programming language you will be provided with a certificate from SoloLearn!"}]},{"type":"element","tagName":"h2","properties":{"id":"codingame"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.codingame.com/"},"children":[{"type":"text","value":"CodinGame"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.codingame.com/","rel":["noopener"]},"children":[{"type":"text","value":"CodinGame"}]},{"type":"text","value":" is another platform that helps you learn programming languages through solving challenges. However, CodinGame is unique as its challenges are all related to games. Instead of solving the same old challenges that you will find on all challenge-learning based platforms, you get to solve challenges that are parts of games."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can choose from many languages to solve any challenge, and you will be able to use their editor right on the website, with a simulation showing you your results in the game. You can also participate in contests against other users. The entire experience feels like a fun game!"}]},{"type":"element","tagName":"h2","properties":{"id":"google-developers-training"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://developers.google.com/training"},"children":[{"type":"text","value":"Google Developers Training"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On "},{"type":"element","tagName":"a","properties":{"href":"https://developers.google.com/training"},"children":[{"type":"text","value":"Google Developers Training"}]},{"type":"text","value":", you can learn about Web and Android Development. You can also learn about Firebase, Machine Learning, and more. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The training can be videos, Code Lab and quizzes. They have different paths for Android Development, for beginner and advanced programmers. This helps you understand Android Development more clearly as a beginner, then transition to the advanced programmer training as you progress your skills. You can learn in Kotlin or in Java."}]},{"type":"element","tagName":"h2","properties":{"id":"medium-and-developers-blogs"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://medium.com/"},"children":[{"type":"text","value":"Medium"}]},{"type":"text","value":" and Developers' Blogs"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Blogs are a great way to learn concepts about programming in general. You can find specific tutorials or solutions to the problems you are facing."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://medium.com/"},"children":[{"type":"text","value":"Medium"}]},{"type":"text","value":" is a blogging platform where you can find tutorials and articles about many programming languages or problem solutions. You can also find on google other blogs that will help you throughout your journey."}]},{"type":"element","tagName":"h2","properties":{"id":"github"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/"},"children":[{"type":"text","value":"GitHub"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/","rel":["noopener"]},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":" is not directed towards learning programming, it is very important for any programmer to start experimenting with GitHub."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By contributing to other open-source projects and helping the community, you can expand your knowledge in different areas while helping open source projects."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you’re a beginner and you’re not sure where to start, you can check out a list of beginner-friendly projects "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/MunGell/awesome-for-beginners","rel":["noopener"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":". I personally have a repository and open source project "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sButtons/sbuttons","rel":["noopener"]},"children":[{"type":"text","value":"sButtons"}]},{"type":"text","value":", that welcomes everyone including beginners, that you can also start contributing to."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The list above is among many platforms that will help you learn programming in 2021. Do you know other platforms that would also be helpful for learning new languages? Let me know below!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"error-missing-id","heading":"Suggested Read"},{"id":"codecademy","heading":"Codecademy"},{"id":"edabit","heading":"Edabit"},{"id":"udemy","heading":"Udemy","items":[{"id":"error-missing-id","heading":"Suggested Read"}]},{"id":"w3schools","heading":"W3Schools"},{"id":"codepen","heading":"Codepen"},{"id":"sololearn","heading":"SoloLearn"},{"id":"codingame","heading":"CodinGame"},{"id":"google-developers-training","heading":"Google Developers Training"},{"id":"medium-and-developers-blogs","heading":"Medium and Developers' Blogs"},{"id":"github","heading":"GitHub"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1550645612-83f5d594b671.jpg","publicURL":"/static/e9818cc00005b71bd82f0d24b45948ab/photo-1550645612-83f5d594b671.jpg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAeRWJKQH/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAERICH/2gAIAQEAAQUCROOn/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bh//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAAEFAQAAAAAAAAAAAAAAAAABEBEhMVH/2gAIAQEAAT8hNtJXTRJLf//aAAwDAQACAAMAAAAQUM//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPxCD/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAIDAQAAAAAAAAAAAAAAAQARITFRsf/aAAgBAQABPxBBuqdxoBwA8mTUMwUtFVn/2Q==","aspectRatio":1.5028901734104045,"src":"/static/e9818cc00005b71bd82f0d24b45948ab/d5c54/photo-1550645612-83f5d594b671.jpg","srcSet":"/static/e9818cc00005b71bd82f0d24b45948ab/65d8c/photo-1550645612-83f5d594b671.jpg 260w,\n/static/e9818cc00005b71bd82f0d24b45948ab/c5f21/photo-1550645612-83f5d594b671.jpg 520w,\n/static/e9818cc00005b71bd82f0d24b45948ab/d5c54/photo-1550645612-83f5d594b671.jpg 1040w,\n/static/e9818cc00005b71bd82f0d24b45948ab/81a53/photo-1550645612-83f5d594b671.jpg 1560w,\n/static/e9818cc00005b71bd82f0d24b45948ab/4e5f3/photo-1550645612-83f5d594b671.jpg 2000w","srcWebp":"/static/e9818cc00005b71bd82f0d24b45948ab/e4875/photo-1550645612-83f5d594b671.webp","srcSetWebp":"/static/e9818cc00005b71bd82f0d24b45948ab/dc8f3/photo-1550645612-83f5d594b671.webp 260w,\n/static/e9818cc00005b71bd82f0d24b45948ab/2db4b/photo-1550645612-83f5d594b671.webp 520w,\n/static/e9818cc00005b71bd82f0d24b45948ab/e4875/photo-1550645612-83f5d594b671.webp 1040w,\n/static/e9818cc00005b71bd82f0d24b45948ab/f5845/photo-1550645612-83f5d594b671.webp 1560w,\n/static/e9818cc00005b71bd82f0d24b45948ab/49d6b/photo-1550645612-83f5d594b671.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"prev":{"id":"Ghost__Post__6127ba1b3ed159214d382e80","title":"My Horrible Experience With Freelancer.com","slug":"my-horrible-experience-with-freelancer-com","featured":false,"feature_image":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1487073240288-854ac7f1bb3c.jpg","excerpt":"I had such high expectations going into Freelancers.com but was faced with problems that made me realize how it doesn't prioritize freelancers.","custom_excerpt":"I had such high expectations going into Freelancers.com but was faced with problems that made me realize how it doesn't prioritize freelancers.","visibility":"public","created_at_pretty":"2 Feb 2021","published_at_pretty":"2 Feb 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-02-02T10:28:13.000+00:00","published_at":"2021-02-02T11:37:03.000+00:00","updated_at":"2021-08-26T17:50:06.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1493612276216-ee3925520721-2-1.jpeg","publicURL":"/static/55d051b88133a375df71095790dfd724/photo-1493612276216-ee3925520721-2-1.jpeg","imageMeta":{"width":2000,"height":2500},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAEEAwIF/8QAGAEAAgMAAAAAAAAAAAAAAAAAAAMBBAX/2gAMAwEAAhADEAAAAfTTmIpADGTfld2IQ7O//8QAHBAAAQUAAwAAAAAAAAAAAAAAAgABAxAREyEy/9oACAEBAAEFAr1DKznq1EHfITXL7//EABkRAAIDAQAAAAAAAAAAAAAAAAABAhESE//aAAgBAwEBPwHBzZlNEk4urP/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBES/9oACAECAQE/AbNQj//EABoQAAEFAQAAAAAAAAAAAAAAAAEAAhAgMRH/2gAIAQEABj8CoWz0atNP/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAQETGRIf/aAAgBAQABPyHFs6LI9owavPeKsdKaP//aAAwDAQACAAMAAAAQdBNO/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQAQIWH/2gAIAQMBAT8QXVhJGJWdn//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxC4tR0kIOX/xAAdEAACAgIDAQAAAAAAAAAAAAAAARExECFBUWFx/9oACAEBAAE/EHHojwjwQ+B45hVISYd1xThsbt5XLc4sWfEf/9k=","aspectRatio":0.8,"src":"/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg","srcSet":"/static/55d051b88133a375df71095790dfd724/65d8c/photo-1493612276216-ee3925520721-2-1.jpg 260w,\n/static/55d051b88133a375df71095790dfd724/c5f21/photo-1493612276216-ee3925520721-2-1.jpg 520w,\n/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg 1040w,\n/static/55d051b88133a375df71095790dfd724/81a53/photo-1493612276216-ee3925520721-2-1.jpg 1560w,\n/static/55d051b88133a375df71095790dfd724/4e5f3/photo-1493612276216-ee3925520721-2-1.jpg 2000w","srcWebp":"/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp","srcSetWebp":"/static/55d051b88133a375df71095790dfd724/dc8f3/photo-1493612276216-ee3925520721-2-1.webp 260w,\n/static/55d051b88133a375df71095790dfd724/2db4b/photo-1493612276216-ee3925520721-2-1.webp 520w,\n/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp 1040w,\n/static/55d051b88133a375df71095790dfd724/f5845/photo-1493612276216-ee3925520721-2-1.webp 1560w,\n/static/55d051b88133a375df71095790dfd724/49d6b/photo-1493612276216-ee3925520721-2-1.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"UPDATE\n2 days after posting this, Freelancer's support team has reached out and worked\nout the balance issue. Hopefully, in the future situations similar to mine will\nbe handled better and Freelancer becomes about freelancers again.\n\n\n--------------------------------------------------------------------------------\n\nI have been working as a freelance web developer since 2017. I have worked on\nmany projects including financial auditing management, reservation and booking\nsystems, e-commerce projects, and many more. All of these projects I have worked\non locally with people from the same country.\n\nHowever, I've always wanted to try Freelancer.com. It seemed like it would\nprovide good opportunities, and frankly easier ways to make money as a\nfreelancer. So, in December, I decided to expand my freelancing journey there. \n\n\n--------------------------------------------------------------------------------\n\nIf you don't know what Freelancer is, it's a platform that provides a connection\nbetween freelancers and job posters from all over the world. It's mostly used by\ndevelopers or designers, but it can be used for any sector and industry. If you\nhave a job that you want done, you just post a project with the descriptions and\nbudget. If you're a freelancer, you can search through projects and bid on the\nones you like, explaining why you'd be perfect for the job and what your fees\nare.\n\nI had such high expectations going in. Not only does Freelancer have so many\nusers, but if you check their profile summaries you'll see that these users\nmight have done over hundreds of projects and made good amount of money through\nFreelancer. If it happened to others, why can't it happen to me?\n\n\n--------------------------------------------------------------------------------\n\nAfter creating my account, Freelancer encouraged me to verify my identity. They\nfirst ask you for a pic of your ID or Passport or any identification you have.\nNext, you will be asked to write a code provided by Freelancer on a paper and\ntake a picture with it. I did both of those things and passed their verification\nprocess. \n\nHowever, I was then met by my first problem on Freelancer. The last step you\nhave to do to verify your identity is to provide a proof of address. If you have\ndone this on any website before, you are usually asked to provide any bill that\nproves your address. For Freelancer, it's more strict than this. You are asked\nto provide a utility bill, a contract or something official that not only has\nyour full name, address, and phone number on, but also the company or other\nparty's details as well.\n\nFor some people this is easy to do, however, if you're like me, a person that\ncomes from a culture where living with your family is normal and having the\nbills in someone else's name, even governmental forms, it's not possible.\n\nSo, since Freelancer made it seem like identifying your identity is just an\noptional process that just gives you a boost, I decided to not finish the\nprocess. I can still bid and be assigned to projects, so it's not going to stop\nme.\n\n\n--------------------------------------------------------------------------------\n\nI started then applying for projects, and that's when I faced more problems. \n\nIf you're not a Freelancer Plus member, you only get 6 bids when you create your\naccount. After that, you get new bids only after 5 days. You get at most 6 bids,\nwhich means even if you leave your account for a while, it will not cross the 6\nbids limit. \n\nAs a beginner, getting a project is not easy at all. Job posters will mostly\nlook at the reviews you have or number of projects you worked. And it doesn't\nhelp that those with higher reviews or higher plans on Freelancer show up higher\nin the bids of a project than beginners who don't have any reviews. So, 6 bids a\nmonth will not be of any help to get your reviews higher and getting more jobs.\n\nThis is another issue that Freelancer has. It does not give a chance to new\ncomers. Its system ensures that only those with high reviews or paid plans get a\nbetter chance at getting hired. Even if you do have a paid plan you still will\nnot get as much of a chance as anyone with a 5 stars review.\n\nSo, I decided to start a free trial on the plus membership. You get a 100 bid a\nmonth, approximately 3 bids a day. This was helpful as I could bid on more\nprojects and increase my chance of getting my first project on Freelancer.\n\nEven when you bid on many projects, it's still not easy to get a project on\nFreelancer. Again, no review, no one will see you. \n\nAnother problem you'll notice when using Freelancer is that there are certain\ntags for projects that will get over 50 bids in a minute. For example, check any\nWordpress job. You'll find that after 2 minutes or even less of it getting\nposted, it already has so many bids, and most of these bids are by companies and\nnot individuals. You'll realize soon that companies who can take on different\nprojects, and not individual freelancers, are the ones who can actually make\nmoney and get projects on Freelancer.\n\n\n--------------------------------------------------------------------------------\n\nAfter bidding for a few days on so many projects, I finally got a project to\ndevelop a portfolio website for a company. Then, I got another small project\njust to add a google analytics link to a website and fix some email issues the\nposter had.\n\nWhen taking jobs on Freelancer, your balance will immediately drop even before\nyou start working on the project or getting paid. That is because Freelancer\ntakes their share the minute you are assigned the project, regardless of how the\nproject actually goes.\n\nI finished the small project and started working on the portfolio website. Then,\nI found out something that was the main problem of working on Freelancer.\n\n\n--------------------------------------------------------------------------------\n\nFreelancer has a few ways you can withdraw your money: Wire Transfer, Express\nWithdrawal, Paypal, and Skrill. Most of these methods are not available in all\ncountries, which means Wire Transfer is the only method that's available for\nyour country regardless of where you are.\n\nHowever, Wire Transfer (and all payment methods) requires that you verify your\nidentity. Then shouldn't this make verifying your identity mandatory, and not\noptional? Freelancer could point that out when it asks you to verify your\nidentity, that you will need this to verify your identity. Instead, Freelancer\njust points out that it's good for the job poster and your profile to verify\nyour identity.\n\nI contacted their support, and when explaining my inability to provide a proof\nof address since it's asking for something that is not available for me, I was\ntold it was because of Freelancer's strict policy and because they want to\nmaintain \"the security of the website.\"\n\nOk, so that's understandable in a sense. However, I did a project with a job\nposter, I finished the project, I received a 5-star review, and the job poster\npaid for the job. Shouldn't this provide as a source of guarantee that I'm doing\nmy job properly and that I'm not misusing Freelancer or breaking its security?\nIf not, then shouldn't I at least get paid for the work I've done?\n\nI followed up with an email asking how can I withdraw my money, and I was simply\ntold that it's not possible for me to withdraw my money in my location.\nWas this information not available for Freelancer on my registration? If you do\nnot provide a withdrawal method to my country, then shouldn't you remove my\ncountry from the list of countries on registration, or at least in your FAQs and\nhelp sections?\n\nSo, I decided to end my journey on Freelancer, but it wasn't that simple. After\nmessaging the person from the first job posting that I'm unable to finish the\nproject due to the inability of withdrawing the money, they labeled the project\nas incomplete. However, my balance on Freelancer remained in the negative value.\nThey still want me to deposit their fee for the project that was not completed,\neven though I didn't technically get paid for the project that I did complete.\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nYou may think this story does not apply to you because you wouldn't face similar\nproblems regarding identity verification or money withdrawal, however, one thing\nis evident: Freelancer does not prioritize freelancers. You should know this\nwhen before you even get paid, they take their share of their money. They make\nsure that those who use their plans get their jobs. They gloss over some details\nand their customer support was not helpful in fixing the issues I was having. If\nyou are not a Freelancer user, then honestly don't bother being a part of it.","html":"<h3 id=\"update\">UPDATE</h3><p>2 days after posting this, Freelancer's support team has reached out and worked out the balance issue. Hopefully, in the future situations similar to mine will be handled better and Freelancer becomes about freelancers again.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/asset.png\" class=\"kg-image\" alt loading=\"lazy\"></figure><hr><p>I have been working as a freelance web developer since 2017. I have worked on many projects including financial auditing management, reservation and booking systems, e-commerce projects, and many more. All of these projects I have worked on locally with people from the same country.</p><p>However, I've always wanted to try Freelancer.com. It seemed like it would provide good opportunities, and frankly easier ways to make money as a freelancer. So, in December, I decided to expand my freelancing journey there. </p><hr><p>If you don't know what Freelancer is, it's a platform that provides a connection between freelancers and job posters from all over the world. It's mostly used by developers or designers, but it can be used for any sector and industry. If you have a job that you want done, you just post a project with the descriptions and budget. If you're a freelancer, you can search through projects and bid on the ones you like, explaining why you'd be perfect for the job and what your fees are.</p><p>I had such high expectations going in. Not only does Freelancer have so many users, but if you check their profile summaries you'll see that these users might have done over hundreds of projects and made good amount of money through Freelancer. If it happened to others, why can't it happen to me?</p><hr><p>After creating my account, Freelancer encouraged me to verify my identity. They first ask you for a pic of your ID or Passport or any identification you have. Next, you will be asked to write a code provided by Freelancer on a paper and take a picture with it. I did both of those things and passed their verification process. </p><p>However, I was then met by my first problem on Freelancer. The last step you have to do to verify your identity is to provide a proof of address. If you have done this on any website before, you are usually asked to provide any bill that proves your address. For Freelancer, it's more strict than this. You are asked to provide a utility bill, a contract or something official that not only has your full name, address, and phone number on, but also the company or other party's details as well.</p><p>For some people this is easy to do, however, if you're like me, a person that comes from a culture where living with your family is normal and having the bills in someone else's name, even governmental forms, it's not possible.</p><p>So, since Freelancer made it seem like identifying your identity is just an optional process that just gives you a boost, I decided to not finish the process. I can still bid and be assigned to projects, so it's not going to stop me.</p><hr><p>I started then applying for projects, and that's when I faced more problems. </p><p>If you're not a Freelancer Plus member, you only get 6 bids when you create your account. After that, you get new bids only after 5 days. You get at most 6 bids, which means even if you leave your account for a while, it will not cross the 6 bids limit. </p><p>As a beginner, getting a project is not easy at all. Job posters will mostly look at the reviews you have or number of projects you worked. And it doesn't help that those with higher reviews or higher plans on Freelancer show up higher in the bids of a project than beginners who don't have any reviews. So, 6 bids a month will not be of any help to get your reviews higher and getting more jobs.</p><p>This is another issue that Freelancer has. It does not give a chance to new comers. Its system ensures that only those with high reviews or paid plans get a better chance at getting hired. Even if you do have a paid plan you still will not get as much of a chance as anyone with a 5 stars review.</p><p>So, I decided to start a free trial on the plus membership. You get a 100 bid a month, approximately 3 bids a day. This was helpful as I could bid on more projects and increase my chance of getting my first project on Freelancer.</p><p>Even when you bid on many projects, it's still not easy to get a project on Freelancer. Again, no review, no one will see you. </p><p>Another problem you'll notice when using Freelancer is that there are certain tags for projects that will get over 50 bids in a minute. For example, check any Wordpress job. You'll find that after 2 minutes or even less of it getting posted, it already has so many bids, and most of these bids are by companies and not individuals. You'll realize soon that companies who can take on different projects, and not individual freelancers, are the ones who can actually make money and get projects on Freelancer.</p><hr><p>After bidding for a few days on so many projects, I finally got a project to develop a portfolio website for a company. Then, I got another small project just to add a google analytics link to a website and fix some email issues the poster had.</p><p>When taking jobs on Freelancer, your balance will immediately drop even before you start working on the project or getting paid. That is because Freelancer takes their share the minute you are assigned the project, regardless of how the project actually goes.</p><p>I finished the small project and started working on the portfolio website. Then, I found out something that was the main problem of working on Freelancer.</p><hr><p>Freelancer has a few ways you can withdraw your money: Wire Transfer, Express Withdrawal, Paypal, and Skrill. Most of these methods are not available in all countries, which means Wire Transfer is the only method that's available for your country regardless of where you are.</p><p>However, Wire Transfer (and all payment methods) requires that you verify your identity. Then shouldn't this make verifying your identity mandatory, and not optional? Freelancer could point that out when it asks you to verify your identity, that you will need this to verify your identity. Instead, Freelancer just points out that it's good for the job poster and your profile to verify your identity.</p><p>I contacted their support, and when explaining my inability to provide a proof of address since it's asking for something that is not available for me, I was told it was because of Freelancer's strict policy and because they want to maintain \"the security of the website.\"</p><p>Ok, so that's understandable in a sense. However, I did a project with a job poster, I finished the project, I received a 5-star review, and the job poster paid for the job. Shouldn't this provide as a source of guarantee that I'm doing my job properly and that I'm not misusing Freelancer or breaking its security? If not, then shouldn't I at least get paid for the work I've done?</p><p>I followed up with an email asking how can I withdraw my money, and I was simply told that it's not possible for me to withdraw my money in my location.<br>Was this information not available for Freelancer on my registration? If you do not provide a withdrawal method to my country, then shouldn't you remove my country from the list of countries on registration, or at least in your FAQs and help sections?</p><p>So, I decided to end my journey on Freelancer, but it wasn't that simple. After messaging the person from the first job posting that I'm unable to finish the project due to the inability of withdrawing the money, they labeled the project as incomplete. However, my balance on Freelancer remained in the negative value. They still want me to deposit their fee for the project that was not completed, even though I didn't technically get paid for the project that I did complete.</p><hr><h3 id=\"conclusion\">Conclusion</h3><p>You may think this story does not apply to you because you wouldn't face similar problems regarding identity verification or money withdrawal, however, one thing is evident: Freelancer does not prioritize freelancers. You should know this when before you even get paid, they take their share of their money. They make sure that those who use their plans get their jobs. They gloss over some details and their customer support was not helpful in fixing the issues I was having. If you are not a Freelancer user, then honestly don't bother being a part of it.</p>","url":"https://backend.shahednasser.com/my-horrible-experience-with-freelancer-com/","canonical_url":null,"uuid":"2b575ee6-5bda-4991-8b24-939ac651e477","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"6019293de3d803001eaf0162","reading_time":6,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<h3 id=\"update\">UPDATE</h3><p>2 days after posting this, Freelancer's support team has reached out and worked out the balance issue. Hopefully, in the future situations similar to mine will be handled better and Freelancer becomes about freelancers again.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/asset.png\" class=\"kg-image\" alt=\"\" loading=\"lazy\"></figure><hr><p>I have been working as a freelance web developer since 2017. I have worked on many projects including financial auditing management, reservation and booking systems, e-commerce projects, and many more. All of these projects I have worked on locally with people from the same country.</p><p>However, I've always wanted to try Freelancer.com. It seemed like it would provide good opportunities, and frankly easier ways to make money as a freelancer. So, in December, I decided to expand my freelancing journey there. </p><hr><p>If you don't know what Freelancer is, it's a platform that provides a connection between freelancers and job posters from all over the world. It's mostly used by developers or designers, but it can be used for any sector and industry. If you have a job that you want done, you just post a project with the descriptions and budget. If you're a freelancer, you can search through projects and bid on the ones you like, explaining why you'd be perfect for the job and what your fees are.</p><p>I had such high expectations going in. Not only does Freelancer have so many users, but if you check their profile summaries you'll see that these users might have done over hundreds of projects and made good amount of money through Freelancer. If it happened to others, why can't it happen to me?</p><hr><p>After creating my account, Freelancer encouraged me to verify my identity. They first ask you for a pic of your ID or Passport or any identification you have. Next, you will be asked to write a code provided by Freelancer on a paper and take a picture with it. I did both of those things and passed their verification process. </p><p>However, I was then met by my first problem on Freelancer. The last step you have to do to verify your identity is to provide a proof of address. If you have done this on any website before, you are usually asked to provide any bill that proves your address. For Freelancer, it's more strict than this. You are asked to provide a utility bill, a contract or something official that not only has your full name, address, and phone number on, but also the company or other party's details as well.</p><p>For some people this is easy to do, however, if you're like me, a person that comes from a culture where living with your family is normal and having the bills in someone else's name, even governmental forms, it's not possible.</p><p>So, since Freelancer made it seem like identifying your identity is just an optional process that just gives you a boost, I decided to not finish the process. I can still bid and be assigned to projects, so it's not going to stop me.</p><hr><p>I started then applying for projects, and that's when I faced more problems. </p><p>If you're not a Freelancer Plus member, you only get 6 bids when you create your account. After that, you get new bids only after 5 days. You get at most 6 bids, which means even if you leave your account for a while, it will not cross the 6 bids limit. </p><p>As a beginner, getting a project is not easy at all. Job posters will mostly look at the reviews you have or number of projects you worked. And it doesn't help that those with higher reviews or higher plans on Freelancer show up higher in the bids of a project than beginners who don't have any reviews. So, 6 bids a month will not be of any help to get your reviews higher and getting more jobs.</p><p>This is another issue that Freelancer has. It does not give a chance to new comers. Its system ensures that only those with high reviews or paid plans get a better chance at getting hired. Even if you do have a paid plan you still will not get as much of a chance as anyone with a 5 stars review.</p><p>So, I decided to start a free trial on the plus membership. You get a 100 bid a month, approximately 3 bids a day. This was helpful as I could bid on more projects and increase my chance of getting my first project on Freelancer.</p><p>Even when you bid on many projects, it's still not easy to get a project on Freelancer. Again, no review, no one will see you. </p><p>Another problem you'll notice when using Freelancer is that there are certain tags for projects that will get over 50 bids in a minute. For example, check any Wordpress job. You'll find that after 2 minutes or even less of it getting posted, it already has so many bids, and most of these bids are by companies and not individuals. You'll realize soon that companies who can take on different projects, and not individual freelancers, are the ones who can actually make money and get projects on Freelancer.</p><hr><p>After bidding for a few days on so many projects, I finally got a project to develop a portfolio website for a company. Then, I got another small project just to add a google analytics link to a website and fix some email issues the poster had.</p><p>When taking jobs on Freelancer, your balance will immediately drop even before you start working on the project or getting paid. That is because Freelancer takes their share the minute you are assigned the project, regardless of how the project actually goes.</p><p>I finished the small project and started working on the portfolio website. Then, I found out something that was the main problem of working on Freelancer.</p><hr><p>Freelancer has a few ways you can withdraw your money: Wire Transfer, Express Withdrawal, Paypal, and Skrill. Most of these methods are not available in all countries, which means Wire Transfer is the only method that's available for your country regardless of where you are.</p><p>However, Wire Transfer (and all payment methods) requires that you verify your identity. Then shouldn't this make verifying your identity mandatory, and not optional? Freelancer could point that out when it asks you to verify your identity, that you will need this to verify your identity. Instead, Freelancer just points out that it's good for the job poster and your profile to verify your identity.</p><p>I contacted their support, and when explaining my inability to provide a proof of address since it's asking for something that is not available for me, I was told it was because of Freelancer's strict policy and because they want to maintain \"the security of the website.\"</p><p>Ok, so that's understandable in a sense. However, I did a project with a job poster, I finished the project, I received a 5-star review, and the job poster paid for the job. Shouldn't this provide as a source of guarantee that I'm doing my job properly and that I'm not misusing Freelancer or breaking its security? If not, then shouldn't I at least get paid for the work I've done?</p><p>I followed up with an email asking how can I withdraw my money, and I was simply told that it's not possible for me to withdraw my money in my location.<br>Was this information not available for Freelancer on my registration? If you do not provide a withdrawal method to my country, then shouldn't you remove my country from the list of countries on registration, or at least in your FAQs and help sections?</p><p>So, I decided to end my journey on Freelancer, but it wasn't that simple. After messaging the person from the first job posting that I'm unable to finish the project due to the inability of withdrawing the money, they labeled the project as incomplete. However, my balance on Freelancer remained in the negative value. They still want me to deposit their fee for the project that was not completed, even though I didn't technically get paid for the project that I did complete.</p><hr><h3 id=\"conclusion\">Conclusion</h3><p>You may think this story does not apply to you because you wouldn't face similar problems regarding identity verification or money withdrawal, however, one thing is evident: Freelancer does not prioritize freelancers. You should know this when before you even get paid, they take their share of their money. They make sure that those who use their plans get their jobs. They gloss over some details and their customer support was not helpful in fixing the issues I was having. If you are not a Freelancer user, then honestly don't bother being a part of it.</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"h3","properties":{"id":"update"},"children":[{"type":"text","value":"UPDATE"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"2 days after posting this, Freelancer's support team has reached out and worked out the balance issue. Hopefully, in the future situations similar to mine will be handled better and Freelancer becomes about freelancers again."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/asset.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I have been working as a freelance web developer since 2017. I have worked on many projects including financial auditing management, reservation and booking systems, e-commerce projects, and many more. All of these projects I have worked on locally with people from the same country."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, I've always wanted to try Freelancer.com. It seemed like it would provide good opportunities, and frankly easier ways to make money as a freelancer. So, in December, I decided to expand my freelancing journey there. "}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you don't know what Freelancer is, it's a platform that provides a connection between freelancers and job posters from all over the world. It's mostly used by developers or designers, but it can be used for any sector and industry. If you have a job that you want done, you just post a project with the descriptions and budget. If you're a freelancer, you can search through projects and bid on the ones you like, explaining why you'd be perfect for the job and what your fees are."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I had such high expectations going in. Not only does Freelancer have so many users, but if you check their profile summaries you'll see that these users might have done over hundreds of projects and made good amount of money through Freelancer. If it happened to others, why can't it happen to me?"}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After creating my account, Freelancer encouraged me to verify my identity. They first ask you for a pic of your ID or Passport or any identification you have. Next, you will be asked to write a code provided by Freelancer on a paper and take a picture with it. I did both of those things and passed their verification process. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, I was then met by my first problem on Freelancer. The last step you have to do to verify your identity is to provide a proof of address. If you have done this on any website before, you are usually asked to provide any bill that proves your address. For Freelancer, it's more strict than this. You are asked to provide a utility bill, a contract or something official that not only has your full name, address, and phone number on, but also the company or other party's details as well."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For some people this is easy to do, however, if you're like me, a person that comes from a culture where living with your family is normal and having the bills in someone else's name, even governmental forms, it's not possible."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, since Freelancer made it seem like identifying your identity is just an optional process that just gives you a boost, I decided to not finish the process. I can still bid and be assigned to projects, so it's not going to stop me."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I started then applying for projects, and that's when I faced more problems. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're not a Freelancer Plus member, you only get 6 bids when you create your account. After that, you get new bids only after 5 days. You get at most 6 bids, which means even if you leave your account for a while, it will not cross the 6 bids limit. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As a beginner, getting a project is not easy at all. Job posters will mostly look at the reviews you have or number of projects you worked. And it doesn't help that those with higher reviews or higher plans on Freelancer show up higher in the bids of a project than beginners who don't have any reviews. So, 6 bids a month will not be of any help to get your reviews higher and getting more jobs."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is another issue that Freelancer has. It does not give a chance to new comers. Its system ensures that only those with high reviews or paid plans get a better chance at getting hired. Even if you do have a paid plan you still will not get as much of a chance as anyone with a 5 stars review."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, I decided to start a free trial on the plus membership. You get a 100 bid a month, approximately 3 bids a day. This was helpful as I could bid on more projects and increase my chance of getting my first project on Freelancer."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Even when you bid on many projects, it's still not easy to get a project on Freelancer. Again, no review, no one will see you. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another problem you'll notice when using Freelancer is that there are certain tags for projects that will get over 50 bids in a minute. For example, check any Wordpress job. You'll find that after 2 minutes or even less of it getting posted, it already has so many bids, and most of these bids are by companies and not individuals. You'll realize soon that companies who can take on different projects, and not individual freelancers, are the ones who can actually make money and get projects on Freelancer."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After bidding for a few days on so many projects, I finally got a project to develop a portfolio website for a company. Then, I got another small project just to add a google analytics link to a website and fix some email issues the poster had."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When taking jobs on Freelancer, your balance will immediately drop even before you start working on the project or getting paid. That is because Freelancer takes their share the minute you are assigned the project, regardless of how the project actually goes."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I finished the small project and started working on the portfolio website. Then, I found out something that was the main problem of working on Freelancer."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Freelancer has a few ways you can withdraw your money: Wire Transfer, Express Withdrawal, Paypal, and Skrill. Most of these methods are not available in all countries, which means Wire Transfer is the only method that's available for your country regardless of where you are."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, Wire Transfer (and all payment methods) requires that you verify your identity. Then shouldn't this make verifying your identity mandatory, and not optional? Freelancer could point that out when it asks you to verify your identity, that you will need this to verify your identity. Instead, Freelancer just points out that it's good for the job poster and your profile to verify your identity."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I contacted their support, and when explaining my inability to provide a proof of address since it's asking for something that is not available for me, I was told it was because of Freelancer's strict policy and because they want to maintain \"the security of the website.\""}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ok, so that's understandable in a sense. However, I did a project with a job poster, I finished the project, I received a 5-star review, and the job poster paid for the job. Shouldn't this provide as a source of guarantee that I'm doing my job properly and that I'm not misusing Freelancer or breaking its security? If not, then shouldn't I at least get paid for the work I've done?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I followed up with an email asking how can I withdraw my money, and I was simply told that it's not possible for me to withdraw my money in my location."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"Was this information not available for Freelancer on my registration? If you do not provide a withdrawal method to my country, then shouldn't you remove my country from the list of countries on registration, or at least in your FAQs and help sections?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, I decided to end my journey on Freelancer, but it wasn't that simple. After messaging the person from the first job posting that I'm unable to finish the project due to the inability of withdrawing the money, they labeled the project as incomplete. However, my balance on Freelancer remained in the negative value. They still want me to deposit their fee for the project that was not completed, even though I didn't technically get paid for the project that I did complete."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You may think this story does not apply to you because you wouldn't face similar problems regarding identity verification or money withdrawal, however, one thing is evident: Freelancer does not prioritize freelancers. You should know this when before you even get paid, they take their share of their money. They make sure that those who use their plans get their jobs. They gloss over some details and their customer support was not helpful in fixing the issues I was having. If you are not a Freelancer user, then honestly don't bother being a part of it."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"update","heading":"UPDATE"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1487073240288-854ac7f1bb3c.jpg","publicURL":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/photo-1487073240288-854ac7f1bb3c.jpg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABfTeuXLJlH//EABoQAAMBAAMAAAAAAAAAAAAAAAECAxEAEjH/2gAIAQEAAQUCLvw98PsW2dDj0GP/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAIBBQEAAAAAAAAAAAAAAAABIRASEyJBQv/aAAgBAQAGPwLbqgeSklnkaR//xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMVFx/9oACAEBAAE/IStIDRV78gtaOYE6R2dNxK1YVPYXMT//2gAMAwEAAgADAAAAELzP/8QAFhEAAwAAAAAAAAAAAAAAAAAAEBFB/9oACAEDAQE/EHR//8QAFhEBAQEAAAAAAAAAAAAAAAAAARBB/9oACAECAQE/EAyf/8QAGhABAQADAQEAAAAAAAAAAAAAAREAIVExQf/aAAgBAQABPxB3BBKPXGKoNAaT1nhgABpc3eyFfu8VgAFIyeLg+oXQtmf/2Q==","aspectRatio":1.4957264957264957,"src":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/ea4ab/photo-1487073240288-854ac7f1bb3c.jpg","srcSet":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/477ba/photo-1487073240288-854ac7f1bb3c.jpg 175w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/06776/photo-1487073240288-854ac7f1bb3c.jpg 350w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/ea4ab/photo-1487073240288-854ac7f1bb3c.jpg 700w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/3055e/photo-1487073240288-854ac7f1bb3c.jpg 1050w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/eff08/photo-1487073240288-854ac7f1bb3c.jpg 1400w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/4e5f3/photo-1487073240288-854ac7f1bb3c.jpg 2000w","srcWebp":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/89afa/photo-1487073240288-854ac7f1bb3c.webp","srcSetWebp":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/9fca7/photo-1487073240288-854ac7f1bb3c.webp 175w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/37a4e/photo-1487073240288-854ac7f1bb3c.webp 350w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/89afa/photo-1487073240288-854ac7f1bb3c.webp 700w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/78e7a/photo-1487073240288-854ac7f1bb3c.webp 1050w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/03d34/photo-1487073240288-854ac7f1bb3c.webp 1400w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/49d6b/photo-1487073240288-854ac7f1bb3c.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__6127ba1b3ed159214d382e7f","title":"If You're A Developer, You Need to Know This","slug":"if-youre-a-developer-you-need-to-know-this","featured":false,"feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1573166801077-d98391a43199.jpg","excerpt":"There are many mistakes you can make as a developer throughout your career. Some you will not realize until later and you will wish you already knew them.","custom_excerpt":"There are many mistakes you can make as a developer throughout your career. Some you will not realize until later and you will wish you already knew them.","visibility":"public","created_at_pretty":"20 Dec 2020","published_at_pretty":"26 Dec 2020","updated_at_pretty":"26 Aug 2021","created_at":"2020-12-20T13:25:05.000+00:00","published_at":"2020-12-26T10:58:34.000+00:00","updated_at":"2021-08-26T17:50:25.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null},"tags":[{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"There are many mistakes you can make as a developer throughout your career. Some\nyou will not realize until later and you will wish you already knew them. I'm\nnot talking about programming languages or frameworks or anything technical,\nthis is more related to your work ethic and how you handle yourself throughout\nyour years of experience.\n\n\n--------------------------------------------------------------------------------\n\nKnow Your Worth\nI put this at the top of the list because this is, in my opinion, the most\nimportant thing you need to learn. This is especially important if you're coming\nacross a new opportunity. Sometimes the opportunity is less than what you\ndeserve, but you still consider it thinking it's the only option. Other times it\ncould be a great opportunity, but you think you don't have what it takes to do\nit and you back out from trying. \n\nIt's not just in new opportunities. Some people get stuck at a job that isn't\nhelp them advance or learn anything new just because they think they won't find\na better opportunity out there.\n\nYou need to believe in yourself and know your worth. It's not about how many\ntechnical stuff you know. Yes, that part is obviously important as well, but you\ncan always learn new languages or frameworks or concepts. If you find yourself\nlacking in this part and that's standing in your way, then start advancing and\nlearning so that you can keep valuing yourself and aiming higher.\n\n\n--------------------------------------------------------------------------------\n\nValue Your Years of Experience\nThis doesn't just apply to those that already have more than 2 years of\nexperience, this also applies to anyone just starting out now. Value the time\nand effort that you have put or are putting into a job or a project, regardless\nof how big or small it is. Every day through working on it, you gain and learn\nsomething new, which makes future experiences easier. \n\nThis mostly happens with freelancers. A lot of freelancers are unsure of how\nmuch they should price their work, scared that it will be too high. Same thing\nfor full time developers that are scared to ask for a raise or leave a job\nthat's underpaying them. Remember how much time and effort you've put into\ngetting to where you are now. When you work with or for someone, you are\nbringing your knowledge and experiences with you, and that's worth a lot. So,\ndon't be scared of asking for exactly your worth. You are working hard to become\nbetter and deliver high quality services.\n\n\n--------------------------------------------------------------------------------\n\nAdvance Your Skills in A Specific Path\nWhen you become a developer, you may get overwhelmed by all the things you can\nlearn and do. You might dip your feet a little in Web Development, a little in\nApp Development, Game Development, etc... It's nice and important to learn a\nlittle of everything of course, but make sure that you pick one path that you\nlike the best and focus on expanding in it. Technology is always advancing and\ngrowing and you need to be at the top of it. If you don't choose one path, you\nmight get lost in the chaos and end up an expert in nothing. Focus your\nattention and energy to one of them and become the expert in it.\n\n\n--------------------------------------------------------------------------------\n\nYou Don't Need To Know Everything\nThis is a follow up to the previous one. You might get intimidated by others who\nknow more than you or think that you need to know everything to be good at this\njob. You don't. You need to remember first and foremost that no one knows\neverything, and there will always be someone who knows more than you, just like\nyou'll always know more than someone else. Keep focusing on the path you have\nchosen and moving forward in it. Let other people's knowledge inspire you, but\nnot intimidate you or distract you from your own path.\n\n\n--------------------------------------------------------------------------------\n\nEveryone Uses Google\nThis is more directed towards beginners or those that are just learning about\ndevelopment. If you run into a problem or forget something, don't be embarrassed\nor think it makes you less to use Google. Everyone, including those with many\nyears of experience, can forget sometimes and have to google a syntax or a\nfunction or an error they face. There's nothing wrong with it and in fact you\nneed to learn how to use Google to your side. Wracking your brain and wasting\ntime trying to figure it out yourself is not always desired, especially when\nsomeone out there have already went through it and you can learn from it just by\nsearching it.\n\n\n--------------------------------------------------------------------------------\n\nDon't Let What Looks Complicated Discourage You\nI think we all have went through this or some are going through it now. You see\nsomething that looks complicated, maybe above your level, and you think there's\nno way that I'll be able to do this. Whatever it is that looks complicated or\nhard to you, know that if you give it time and you work hard on yourself, with\ntime you will realize that it isn't. \n\n\n--------------------------------------------------------------------------------\n\nDon't Look Around, Keep Looking Forward\nThis one took me a while to understand and apply. As a woman in this career, I\nhave faced some problems finding a job and dealing with clients, who undermined\nme just because of the fact that I'm a woman. It can get discouraging and make\nyou want to give up, but the best counter attack is to keep working hard on\nyourself. If you feel like you are judged in any way in your work place or when\nfinding a job, don't let that put you down. Instead, work hard on improving your\nskills, whether they are soft skills or technical skills, because with time you\nwill become an asset that they can't look down on.\n\nYou should also remember that at the end of the day it doesn't matter how others\nlook at you, what matters is how you see yourself. Work hard to be confident in\nyour own identity and not let anyone put you down by their judgments.\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nThese are some things I've learned through my journey as a developer. If you\nhave other lessons that you think others should know as well, please let us know\nin the comments!","html":"<p>There are many mistakes you can make as a developer throughout your career. Some you will not realize until later and you will wish you already knew them. I'm not talking about programming languages or frameworks or anything technical, this is more related to your work ethic and how you handle yourself throughout your years of experience.</p><hr><h2 id=\"know-your-worth\">Know Your Worth</h2><p>I put this at the top of the list because this is, in my opinion, the most important thing you need to learn. This is especially important if you're coming across a new opportunity. Sometimes the opportunity is less than what you deserve, but you still consider it thinking it's the only option. Other times it could be a great opportunity, but you think you don't have what it takes to do it and you back out from trying. </p><p>It's not just in new opportunities. Some people get stuck at a job that isn't help them advance or learn anything new just because they think they won't find a better opportunity out there.</p><p>You need to believe in yourself and know your worth. It's not about how many technical stuff you know. Yes, that part is obviously important as well, but you can always learn new languages or frameworks or concepts. If you find yourself lacking in this part and that's standing in your way, then start advancing and learning so that you can keep valuing yourself and aiming higher.</p><hr><h2 id=\"value-your-years-of-experience\">Value Your Years of Experience</h2><p>This doesn't just apply to those that already have more than 2 years of experience, this also applies to anyone just starting out now. Value the time and effort that you have put or are putting into a job or a project, regardless of how big or small it is. Every day through working on it, you gain and learn something new, which makes future experiences easier. </p><p>This mostly happens with freelancers. A lot of freelancers are unsure of how much they should price their work, scared that it will be too high. Same thing for full time developers that are scared to ask for a raise or leave a job that's underpaying them. Remember how much time and effort you've put into getting to where you are now. When you work with or for someone, you are bringing your knowledge and experiences with you, and that's worth a lot. So, don't be scared of asking for exactly your worth. You are working hard to become better and deliver high quality services.</p><hr><h2 id=\"advance-your-skills-in-a-specific-path\">Advance Your Skills in A Specific Path</h2><p>When you become a developer, you may get overwhelmed by all the things you can learn and do. You might dip your feet a little in Web Development, a little in App Development, Game Development, etc... It's nice and important to learn a little of everything of course, but make sure that you pick one path that you like the best and focus on expanding in it. Technology is always advancing and growing and you need to be at the top of it. If you don't choose one path, you might get lost in the chaos and end up an expert in nothing. Focus your attention and energy to one of them and become the expert in it.</p><hr><h2 id=\"you-don-t-need-to-know-everything\">You Don't Need To Know Everything</h2><p>This is a follow up to the previous one. You might get intimidated by others who know more than you or think that you need to know everything to be good at this job. You don't. You need to remember first and foremost that no one knows everything, and there will always be someone who knows more than you, just like you'll always know more than someone else. Keep focusing on the path you have chosen and moving forward in it. Let other people's knowledge inspire you, but not intimidate you or distract you from your own path.</p><hr><h2 id=\"everyone-uses-google\">Everyone Uses Google</h2><p>This is more directed towards beginners or those that are just learning about development. If you run into a problem or forget something, don't be embarrassed or think it makes you less to use Google. Everyone, including those with many years of experience, can forget sometimes and have to google a syntax or a function or an error they face. There's nothing wrong with it and in fact you need to learn how to use Google to your side. Wracking your brain and wasting time trying to figure it out yourself is not always desired, especially when someone out there have already went through it and you can learn from it just by searching it.</p><hr><h2 id=\"don-t-let-what-looks-complicated-discourage-you\">Don't Let What Looks Complicated Discourage You</h2><p>I think we all have went through this or some are going through it now. You see something that looks complicated, maybe above your level, and you think there's no way that I'll be able to do this. Whatever it is that looks complicated or hard to you, know that if you give it time and you work hard on yourself, with time you will realize that it isn't. </p><hr><h2 id=\"don-t-look-around-keep-looking-forward\">Don't Look Around, Keep Looking Forward</h2><p>This one took me a while to understand and apply. As a woman in this career, I have faced some problems finding a job and dealing with clients, who undermined me just because of the fact that I'm a woman. It can get discouraging and make you want to give up, but the best counter attack is to keep working hard on yourself. If you feel like you are judged in any way in your work place or when finding a job, don't let that put you down. Instead, work hard on improving your skills, whether they are soft skills or technical skills, because with time you will become an asset that they can't look down on.</p><p>You should also remember that at the end of the day it doesn't matter how others look at you, what matters is how you see yourself. Work hard to be confident in your own identity and not let anyone put you down by their judgments.</p><hr><h2 id=\"conclusion\">Conclusion</h2><p>These are some things I've learned through my journey as a developer. If you have other lessons that you think others should know as well, please let us know in the comments!</p>","url":"https://backend.shahednasser.com/if-youre-a-developer-you-need-to-know-this/","canonical_url":null,"uuid":"def5ddea-4c68-4a65-b79e-cd76c7e091f7","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fdf50b1aea6cc001e675925","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>There are many mistakes you can make as a developer throughout your career. Some you will not realize until later and you will wish you already knew them. I'm not talking about programming languages or frameworks or anything technical, this is more related to your work ethic and how you handle yourself throughout your years of experience.</p><hr><h2 id=\"know-your-worth\">Know Your Worth</h2><p>I put this at the top of the list because this is, in my opinion, the most important thing you need to learn. This is especially important if you're coming across a new opportunity. Sometimes the opportunity is less than what you deserve, but you still consider it thinking it's the only option. Other times it could be a great opportunity, but you think you don't have what it takes to do it and you back out from trying. </p><p>It's not just in new opportunities. Some people get stuck at a job that isn't help them advance or learn anything new just because they think they won't find a better opportunity out there.</p><p>You need to believe in yourself and know your worth. It's not about how many technical stuff you know. Yes, that part is obviously important as well, but you can always learn new languages or frameworks or concepts. If you find yourself lacking in this part and that's standing in your way, then start advancing and learning so that you can keep valuing yourself and aiming higher.</p><hr><h2 id=\"value-your-years-of-experience\">Value Your Years of Experience</h2><p>This doesn't just apply to those that already have more than 2 years of experience, this also applies to anyone just starting out now. Value the time and effort that you have put or are putting into a job or a project, regardless of how big or small it is. Every day through working on it, you gain and learn something new, which makes future experiences easier. </p><p>This mostly happens with freelancers. A lot of freelancers are unsure of how much they should price their work, scared that it will be too high. Same thing for full time developers that are scared to ask for a raise or leave a job that's underpaying them. Remember how much time and effort you've put into getting to where you are now. When you work with or for someone, you are bringing your knowledge and experiences with you, and that's worth a lot. So, don't be scared of asking for exactly your worth. You are working hard to become better and deliver high quality services.</p><hr><h2 id=\"advance-your-skills-in-a-specific-path\">Advance Your Skills in A Specific Path</h2><p>When you become a developer, you may get overwhelmed by all the things you can learn and do. You might dip your feet a little in Web Development, a little in App Development, Game Development, etc... It's nice and important to learn a little of everything of course, but make sure that you pick one path that you like the best and focus on expanding in it. Technology is always advancing and growing and you need to be at the top of it. If you don't choose one path, you might get lost in the chaos and end up an expert in nothing. Focus your attention and energy to one of them and become the expert in it.</p><hr><h2 id=\"you-don-t-need-to-know-everything\">You Don't Need To Know Everything</h2><p>This is a follow up to the previous one. You might get intimidated by others who know more than you or think that you need to know everything to be good at this job. You don't. You need to remember first and foremost that no one knows everything, and there will always be someone who knows more than you, just like you'll always know more than someone else. Keep focusing on the path you have chosen and moving forward in it. Let other people's knowledge inspire you, but not intimidate you or distract you from your own path.</p><hr><h2 id=\"everyone-uses-google\">Everyone Uses Google</h2><p>This is more directed towards beginners or those that are just learning about development. If you run into a problem or forget something, don't be embarrassed or think it makes you less to use Google. Everyone, including those with many years of experience, can forget sometimes and have to google a syntax or a function or an error they face. There's nothing wrong with it and in fact you need to learn how to use Google to your side. Wracking your brain and wasting time trying to figure it out yourself is not always desired, especially when someone out there have already went through it and you can learn from it just by searching it.</p><hr><h2 id=\"don-t-let-what-looks-complicated-discourage-you\">Don't Let What Looks Complicated Discourage You</h2><p>I think we all have went through this or some are going through it now. You see something that looks complicated, maybe above your level, and you think there's no way that I'll be able to do this. Whatever it is that looks complicated or hard to you, know that if you give it time and you work hard on yourself, with time you will realize that it isn't. </p><hr><h2 id=\"don-t-look-around-keep-looking-forward\">Don't Look Around, Keep Looking Forward</h2><p>This one took me a while to understand and apply. As a woman in this career, I have faced some problems finding a job and dealing with clients, who undermined me just because of the fact that I'm a woman. It can get discouraging and make you want to give up, but the best counter attack is to keep working hard on yourself. If you feel like you are judged in any way in your work place or when finding a job, don't let that put you down. Instead, work hard on improving your skills, whether they are soft skills or technical skills, because with time you will become an asset that they can't look down on.</p><p>You should also remember that at the end of the day it doesn't matter how others look at you, what matters is how you see yourself. Work hard to be confident in your own identity and not let anyone put you down by their judgments.</p><hr><h2 id=\"conclusion\">Conclusion</h2><p>These are some things I've learned through my journey as a developer. If you have other lessons that you think others should know as well, please let us know in the comments!</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are many mistakes you can make as a developer throughout your career. Some you will not realize until later and you will wish you already knew them. I'm not talking about programming languages or frameworks or anything technical, this is more related to your work ethic and how you handle yourself throughout your years of experience."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"know-your-worth"},"children":[{"type":"text","value":"Know Your Worth"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I put this at the top of the list because this is, in my opinion, the most important thing you need to learn. This is especially important if you're coming across a new opportunity. Sometimes the opportunity is less than what you deserve, but you still consider it thinking it's the only option. Other times it could be a great opportunity, but you think you don't have what it takes to do it and you back out from trying. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It's not just in new opportunities. Some people get stuck at a job that isn't help them advance or learn anything new just because they think they won't find a better opportunity out there."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You need to believe in yourself and know your worth. It's not about how many technical stuff you know. Yes, that part is obviously important as well, but you can always learn new languages or frameworks or concepts. If you find yourself lacking in this part and that's standing in your way, then start advancing and learning so that you can keep valuing yourself and aiming higher."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"value-your-years-of-experience"},"children":[{"type":"text","value":"Value Your Years of Experience"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This doesn't just apply to those that already have more than 2 years of experience, this also applies to anyone just starting out now. Value the time and effort that you have put or are putting into a job or a project, regardless of how big or small it is. Every day through working on it, you gain and learn something new, which makes future experiences easier. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This mostly happens with freelancers. A lot of freelancers are unsure of how much they should price their work, scared that it will be too high. Same thing for full time developers that are scared to ask for a raise or leave a job that's underpaying them. Remember how much time and effort you've put into getting to where you are now. When you work with or for someone, you are bringing your knowledge and experiences with you, and that's worth a lot. So, don't be scared of asking for exactly your worth. You are working hard to become better and deliver high quality services."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"advance-your-skills-in-a-specific-path"},"children":[{"type":"text","value":"Advance Your Skills in A Specific Path"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you become a developer, you may get overwhelmed by all the things you can learn and do. You might dip your feet a little in Web Development, a little in App Development, Game Development, etc... It's nice and important to learn a little of everything of course, but make sure that you pick one path that you like the best and focus on expanding in it. Technology is always advancing and growing and you need to be at the top of it. If you don't choose one path, you might get lost in the chaos and end up an expert in nothing. Focus your attention and energy to one of them and become the expert in it."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"you-don-t-need-to-know-everything"},"children":[{"type":"text","value":"You Don't Need To Know Everything"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is a follow up to the previous one. You might get intimidated by others who know more than you or think that you need to know everything to be good at this job. You don't. You need to remember first and foremost that no one knows everything, and there will always be someone who knows more than you, just like you'll always know more than someone else. Keep focusing on the path you have chosen and moving forward in it. Let other people's knowledge inspire you, but not intimidate you or distract you from your own path."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"everyone-uses-google"},"children":[{"type":"text","value":"Everyone Uses Google"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is more directed towards beginners or those that are just learning about development. If you run into a problem or forget something, don't be embarrassed or think it makes you less to use Google. Everyone, including those with many years of experience, can forget sometimes and have to google a syntax or a function or an error they face. There's nothing wrong with it and in fact you need to learn how to use Google to your side. Wracking your brain and wasting time trying to figure it out yourself is not always desired, especially when someone out there have already went through it and you can learn from it just by searching it."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"don-t-let-what-looks-complicated-discourage-you"},"children":[{"type":"text","value":"Don't Let What Looks Complicated Discourage You"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I think we all have went through this or some are going through it now. You see something that looks complicated, maybe above your level, and you think there's no way that I'll be able to do this. Whatever it is that looks complicated or hard to you, know that if you give it time and you work hard on yourself, with time you will realize that it isn't. "}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"don-t-look-around-keep-looking-forward"},"children":[{"type":"text","value":"Don't Look Around, Keep Looking Forward"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This one took me a while to understand and apply. As a woman in this career, I have faced some problems finding a job and dealing with clients, who undermined me just because of the fact that I'm a woman. It can get discouraging and make you want to give up, but the best counter attack is to keep working hard on yourself. If you feel like you are judged in any way in your work place or when finding a job, don't let that put you down. Instead, work hard on improving your skills, whether they are soft skills or technical skills, because with time you will become an asset that they can't look down on."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You should also remember that at the end of the day it doesn't matter how others look at you, what matters is how you see yourself. Work hard to be confident in your own identity and not let anyone put you down by their judgments."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These are some things I've learned through my journey as a developer. If you have other lessons that you think others should know as well, please let us know in the comments!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"know-your-worth","heading":"Know Your Worth"},{"id":"value-your-years-of-experience","heading":"Value Your Years of Experience"},{"id":"advance-your-skills-in-a-specific-path","heading":"Advance Your Skills in A Specific Path"},{"id":"you-don-t-need-to-know-everything","heading":"You Don't Need To Know Everything"},{"id":"everyone-uses-google","heading":"Everyone Uses Google"},{"id":"don-t-let-what-looks-complicated-discourage-you","heading":"Don't Let What Looks Complicated Discourage You"},{"id":"don-t-look-around-keep-looking-forward","heading":"Don't Look Around, Keep Looking Forward"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1573166801077-d98391a43199.jpg","publicURL":"/static/a4623023ba5ad1fd67eb8f8abafcaddb/photo-1573166801077-d98391a43199.jpg","imageMeta":{"width":2000,"height":1335},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwT/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABe55KxyVkf//EABkQAAIDAQAAAAAAAAAAAAAAAAADAQIyBP/aAAgBAQABBQIU2GQXxwYP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGhAAAQUBAAAAAAAAAAAAAAAAAAECEBFxQf/aAAgBAQAGPwIWuLDsH7H/xAAcEAACAgIDAAAAAAAAAAAAAAABIQAREEFhgfD/2gAIAQEAAT8hJAFlCESjAjfeN5tPBxLn/9oADAMBAAIAAwAAABD4P//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/EKf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPxCI/8QAGxABAAIDAQEAAAAAAAAAAAAAAQARITFBUWH/2gAIAQEAAT8QdIAWrycHq5QOPi9xSPFYN4u8MSNezFvWf//Z","aspectRatio":1.4957264957264957,"src":"/static/a4623023ba5ad1fd67eb8f8abafcaddb/ea4ab/photo-1573166801077-d98391a43199.jpg","srcSet":"/static/a4623023ba5ad1fd67eb8f8abafcaddb/477ba/photo-1573166801077-d98391a43199.jpg 175w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/06776/photo-1573166801077-d98391a43199.jpg 350w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/ea4ab/photo-1573166801077-d98391a43199.jpg 700w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/3055e/photo-1573166801077-d98391a43199.jpg 1050w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/eff08/photo-1573166801077-d98391a43199.jpg 1400w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/4e5f3/photo-1573166801077-d98391a43199.jpg 2000w","srcWebp":"/static/a4623023ba5ad1fd67eb8f8abafcaddb/89afa/photo-1573166801077-d98391a43199.webp","srcSetWebp":"/static/a4623023ba5ad1fd67eb8f8abafcaddb/9fca7/photo-1573166801077-d98391a43199.webp 175w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/37a4e/photo-1573166801077-d98391a43199.webp 350w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/89afa/photo-1573166801077-d98391a43199.webp 700w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/78e7a/photo-1573166801077-d98391a43199.webp 1050w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/03d34/photo-1573166801077-d98391a43199.webp 1400w,\n/static/a4623023ba5ad1fd67eb8f8abafcaddb/49d6b/photo-1573166801077-d98391a43199.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__631f8eea4e918d05f3537b51","title":"How to Get Elements From the DOM Using JavaScript","slug":"how-to-get-elements-from-the-dom-using-javascript","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/09/js-elm.jpg","excerpt":"This tutorial shows you different ways to get an element from the DOM using JavaScript.","custom_excerpt":"This tutorial shows you different ways to get an element from the DOM using JavaScript.","visibility":"public","created_at_pretty":"12 Sep 2022","published_at_pretty":"19 Sep 2022","updated_at_pretty":"19 Sep 2022","created_at":"2022-09-12T19:56:26.000+00:00","published_at":"2022-09-19T10:58:26.000+00:00","updated_at":"2022-09-19T10:58:26.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":{"base":"photo-1592609931095-54a2168ae893-2.jpeg","publicURL":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/photo-1592609931095-54a2168ae893-2.jpeg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwAEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHh6QZDjq//xAAaEAEAAwADAAAAAAAAAAAAAAABAAIREiFB/9oACAEBAAEFApQ6eO+VXFWf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQIBAT8Bp//EABoQAAICAwAAAAAAAAAAAAAAAAABECExMkH/2gAIAQEABj8CwdNXFOP/xAAcEAADAAMAAwAAAAAAAAAAAAAAAREhQVFhcYH/2gAIAQEAAT8heHx6GaR4cOQ+jrqtTQu6lgaVs//aAAwDAQACAAMAAAAQlM//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8QrH//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8QdE//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhMUFhweH/2gAIAQEAAT8QwaQHozIjaNdvYnh0/qNZJwLU36JcXxL2lqf/2Q==","aspectRatio":1.5028901734104045,"src":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/d5c54/photo-1592609931095-54a2168ae893-2.jpg","srcSet":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/65d8c/photo-1592609931095-54a2168ae893-2.jpg 260w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/c5f21/photo-1592609931095-54a2168ae893-2.jpg 520w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/d5c54/photo-1592609931095-54a2168ae893-2.jpg 1040w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/81a53/photo-1592609931095-54a2168ae893-2.jpg 1560w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/4e5f3/photo-1592609931095-54a2168ae893-2.jpg 2000w","srcWebp":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/e4875/photo-1592609931095-54a2168ae893-2.webp","srcSetWebp":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/dc8f3/photo-1592609931095-54a2168ae893-2.webp 260w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/2db4b/photo-1592609931095-54a2168ae893-2.webp 520w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/e4875/photo-1592609931095-54a2168ae893-2.webp 1040w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/f5845/photo-1592609931095-54a2168ae893-2.webp 1560w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/49d6b/photo-1592609931095-54a2168ae893-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"While creating a website and working with JavaScript, you'll often need to get access to elements in the DOM for different purposes.\n\nThis tutorial shows you different ways to get an element from the DOM using JavaScript.\n\n\ngetElementById\n\nThe getElementById() method allows you to retrieve an element from the DOM using the element's ID.\n\nIf no element exists in the DOM with the supplied ID, null will be returned instead.\n\nFor example:\n\nconst mainElement = document.getElementById('main');\n\n\ngetElementsByTagName\n\nThe getElementsByTagName() allows you to retrieve an HTMLCollection of elements that have the tag name you supply to the method. An example of a tag name is div.\n\nItems in an HTMLCollection can be accessed similarly to how you would access items in an array.\n\nFor example:\n\nconst divElements = document.getElementsByTagName('div');\nconsole.log(divElements[0]);\n\nYou can use this method on any element and not just the document. That way, you can retrieve all children of that element that have the supplied tag name.\n\nFor example:\n\nconst divElements = document.getElementsByTagName('div');\nconst pElements = divElements[0].getElementsByTagName('p');\nconsole.log(pElements);\n\n\ngetElementsByClassName()\n\nThe getElementsByClassName() method allows you to retrieve a live HTMLCollection of elements that have the class name you provide as a parameter.\n\nA live HTMLCollection means that the items in the collection are updated with any updates that happen to the DOM. So, for example, if an item was part of the collection because it had the class provided as a parameter, but then its class was removed, the item will be removed from the collection.\n\nFor example:\n\nconst mainElements = document.getElementsByClassName('main');\nconsole.log(mainElements);\n\n\ngetElementsByName()\n\nThe getElementsByName() method allows you to retrieve elements by the value of the name attribute. For example, you can use it to retrieve input elements that have the name attribute set to email.\n\nThis method returns a live NodeList, which is generally similar to an HTMLCollection, but the items in the list can be accessed through the methods it provides.\n\nFor example:\n\nconst emailElements = document.getElementsByName('email');\nconsole.log(emailElements.item(0));\n\n\nquerySelector\n\nThe querySelector() method allows you to retrieve the first element that matches the specified selector. The selector can be any CSS selector.\n\nFor example:\n\nconst elm = document.querySelector('.main > p');\nconsole.log(elm);\n\nThis method can be used on any element, and not just the document. So, you can use it to retrieve a child element of a parent element that matches the specified selector.\n\nFor example:\n\nconst table = document.querySelector('.main > table');\nconst thead = table.querySelector('thead');\n\n\nquerySelectorAll\n\nThe querySelectorAll() method allows you to retrieve all elements that match the specified selector. This method returns a NodeList.\n\nFor example:\n\nconst elms = document.querySelectorAll('.main > p');\nconsole.log(elms.item(0));\n\nThis method can be used on any element, and not just the document. So, you can use it to retrieve all child elements of a parent element that match the specified selector.\n\nFor example:\n\nconst table = document.querySelector('.main > table');\nconst rows = table.querySelectorAll('tr');\nfor (const row of rows) {\n    console.log(row);\n}\n\n\nchildren\n\nThe children property allows you to retrieve all immediate child elements of the document or any element. This property's type is a live HTMLCollection.\n\nFor example:\n\nconst rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n    console.log(row.children);\n}\n\n\nfirstElementChild\n\nThe firstElementChild property allows you to retrieve the first child element of the document or any element.\n\nIf the element does not have children, the value of firstElementChild is null.\n\nFor example:\n\nconst rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n    console.log(row.firstElementChild);\n}\n\n\nlastElementChild\n\nThe lastElementChild property allows you to retrieve the last child element of the document or any element.\n\nIf the element does not have children, the value of lastElementChild is null:\n\nconst rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n    console.log(row.lastElementChild);\n}\n\n\nscripts\n\nThe scripts property allows you to retrieve all <script> elements in the document. It returns an HTMLCollection of elements.\n\nFor example:\n\nconsole.log(document.scripts);\n\n\nelementFromPoint\n\nThe elementFromPoint() method allows you to retrieve the top element starting from a specified point. It accepts x and y coordinates to locate the point to look for the element.\n\nFor example:\n\nconst elm = document.elemetFromPoint(100, 20);\nconsole.log(elm);\n\n\nelementsFromPoint\n\nThe elementsFromPoint() method allows you to retrieve an array of Elements starting from a specified point until the end of the viewport.\n\nFor example:\n\nconst elms = document.elementsFromPoint(100, 20);\nconsole.log(elm[0]);\n\n\nclosest\n\nThe closest() method available on elements (not on the document) allows you to retrieve the closest ancestor (which are the parents) of the element that matches the specified selector. If no elements are found, the method returns null.\n\nFor example:\n\nconst closestElm = table.closest('div');\nconsole.log(closestElm);\n\n\nnextElementSibling\n\nThe nextElementSibling property on elements (not on the document) allows you to retrieve the element that follows the current element among its parent's child elements.\n\nIf there are no elements after this element, the value of the property will be null.\n\nFor example:\n\nconsole.log(table.nextElementSibling);\n\n\npreviousElementSibling\n\nThe previousElementSibling property on elements (not on the document) allows you to retrieve the element that proceeds the current element among its parent's child elements.\n\nIf there are no elements before this element, the value of the property will be null.\n\nFor example:\n\nconsole.log(table.previousElementSibling);\n\n\nConclusion\n\nThis tutorial explores a list of methods and properties that you can use to retrieve elements in JavaScript. Each have different purposes and can be used differently based on your use case.","html":"<p>While creating a website and working with JavaScript, you'll often need to get access to elements in the DOM for different purposes.</p><p>This tutorial shows you different ways to get an element from the DOM using JavaScript.</p><h2 id=\"getelementbyid\">getElementById</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById\">getElementById()</a> method allows you to retrieve an element from the DOM using the element's ID.</p><p>If no element exists in the DOM with the supplied ID, <code>null</code> will be returned instead.</p><p>For example:</p><pre><code class=\"language-js\">const mainElement = document.getElementById('main');</code></pre><h2 id=\"getelementsbytagname\">getElementsByTagName</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName\">getElementsByTagName()</a> allows you to retrieve an <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection\">HTMLCollection</a> of elements that have the tag name you supply to the method. An example of a tag name is <code>div</code>.</p><p>Items in an <code>HTMLCollection</code> can be accessed similarly to how you would access items in an array.</p><p>For example:</p><pre><code class=\"language-js\">const divElements = document.getElementsByTagName('div');\nconsole.log(divElements[0]);</code></pre><p>You can use this method on any element and not just the <code>document</code>. That way, you can retrieve all children of that element that have the supplied tag name.</p><p>For example:</p><pre><code class=\"language-js\">const divElements = document.getElementsByTagName('div');\nconst pElements = divElements[0].getElementsByTagName('p');\nconsole.log(pElements);</code></pre><h2 id=\"getelementsbyclassname\">getElementsByClassName()</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName\">getElementsByClassName()</a> method allows you to retrieve a live <code>HTMLCollection</code> of elements that have the class name you provide as a parameter.</p><p>A live <code>HTMLCollection</code> means that the items in the collection are updated with any updates that happen to the DOM. So, for example, if an item was part of the collection because it had the class provided as a parameter, but then its class was removed, the item will be removed from the collection.</p><p>For example:</p><pre><code class=\"language-js\">const mainElements = document.getElementsByClassName('main');\nconsole.log(mainElements);</code></pre><h2 id=\"getelementsbyname\">getElementsByName()</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName\">getElementsByName()</a> method allows you to retrieve elements by the value of the <code>name</code> attribute. For example, you can use it to retrieve <code>input</code> elements that have the <code>name</code> attribute set to <code>email</code>.</p><p>This method returns a live <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/NodeList\">NodeList</a>, which is generally similar to an <code>HTMLCollection</code>, but the items in the list can be accessed through the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/NodeList#methods\">methods</a> it provides.</p><p>For example:</p><pre><code class=\"language-js\">const emailElements = document.getElementsByName('email');\nconsole.log(emailElements.item(0));</code></pre><h2 id=\"queryselector\">querySelector</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\">querySelector()</a> method allows you to retrieve the first element that matches the specified selector. The selector can be any <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors\">CSS selector</a>.</p><p>For example:</p><pre><code class=\"language-js\">const elm = document.querySelector('.main &gt; p');\nconsole.log(elm);</code></pre><p>This method can be used on any element, and not just the <code>document</code>. So, you can use it to retrieve a child element of a parent element that matches the specified selector.</p><p>For example:</p><pre><code class=\"language-js\">const table = document.querySelector('.main &gt; table');\nconst thead = table.querySelector('thead');</code></pre><h2 id=\"queryselectorall\">querySelectorAll</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll\">querySelectorAll()</a> method allows you to retrieve all elements that match the specified selector. This method returns a <code>NodeList</code>.</p><p>For example:</p><pre><code class=\"language-js\">const elms = document.querySelectorAll('.main &gt; p');\nconsole.log(elms.item(0));</code></pre><p>This method can be used on any element, and not just the <code>document</code>. So, you can use it to retrieve all child elements of a parent element that match the specified selector.</p><p>For example:</p><pre><code class=\"language-js\">const table = document.querySelector('.main &gt; table');\nconst rows = table.querySelectorAll('tr');\nfor (const row of rows) {\n    console.log(row);\n}</code></pre><h2 id=\"children\">children</h2><p>The <code>children</code> property allows you to retrieve all immediate child elements of the <code>document</code> or any element. This property's type is a live <code>HTMLCollection</code>.</p><p>For example:</p><pre><code class=\"language-js\">const rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n    console.log(row.children);\n}</code></pre><h2 id=\"firstelementchild\">firstElementChild</h2><p>The <code>firstElementChild</code> property allows you to retrieve the first child element of the <code>document</code> or any element.</p><p>If the element does not have children, the value of <code>firstElementChild</code> is <code>null</code>.</p><p>For example:</p><pre><code class=\"language-js\">const rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n    console.log(row.firstElementChild);\n}</code></pre><h2 id=\"lastelementchild\">lastElementChild</h2><p>The <code>lastElementChild</code> property allows you to retrieve the last child element of the <code>document</code> or any element.</p><p>If the element does not have children, the value of <code>lastElementChild</code> is <code>null</code>:</p><pre><code class=\"language-js\">const rows = document.querySelectorAll('table tr');\nfor (const row of rows) {\n    console.log(row.lastElementChild);\n}</code></pre><h2 id=\"scripts\">scripts</h2><p>The <code>scripts</code> property allows you to retrieve all <code>&lt;script&gt;</code> elements in the document. It returns an <code>HTMLCollection</code> of elements.</p><p>For example:</p><pre><code class=\"language-js\">console.log(document.scripts);</code></pre><h2 id=\"elementfrompoint\">elementFromPoint</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint\">elementFromPoint()</a> method allows you to retrieve the top element starting from a specified point. It accepts x and y coordinates to locate the point to look for the element.</p><p>For example:</p><pre><code class=\"language-js\">const elm = document.elemetFromPoint(100, 20);\nconsole.log(elm);</code></pre><h2 id=\"elementsfrompoint\">elementsFromPoint</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint\">elementsFromPoint()</a> method allows you to retrieve an array of Elements starting from a specified point until the end of the viewport.</p><p>For example:</p><pre><code class=\"language-js\">const elms = document.elementsFromPoint(100, 20);\nconsole.log(elm[0]);</code></pre><h2 id=\"closest\">closest</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\">closest()</a> method available on elements (not on the <code>document</code>) allows you to retrieve the closest ancestor (which are the parents) of the element that matches the specified selector. If no elements are found, the method returns <code>null</code>.</p><p>For example:</p><pre><code class=\"language-js\">const closestElm = table.closest('div');\nconsole.log(closestElm);</code></pre><h2 id=\"nextelementsibling\">nextElementSibling</h2><p>The <code>nextElementSibling</code> property on elements (not on the <code>document</code>) allows you to retrieve the element that follows the current element among its parent's child elements.</p><p>If there are no elements after this element, the value of the property will be <code>null</code>.</p><p>For example:</p><pre><code class=\"language-js\">console.log(table.nextElementSibling);</code></pre><h2 id=\"previouselementsibling\">previousElementSibling</h2><p>The <code>previousElementSibling</code> property on elements (not on the <code>document</code>) allows you to retrieve the element that proceeds the current element among its parent's child elements.</p><p>If there are no elements before this element, the value of the property will be <code>null</code>.</p><p>For example:</p><pre><code class=\"language-js\">console.log(table.previousElementSibling);</code></pre><h2 id=\"conclusion\">Conclusion</h2><p>This tutorial explores a list of methods and properties that you can use to retrieve elements in JavaScript. Each have different purposes and can be used differently based on your use case.</p>","url":"https://backend.shahednasser.com/how-to-get-elements-from-the-dom-using-javascript/","canonical_url":null,"uuid":"059a970c-e25a-42bc-9c72-002c52914f7b","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"631f8eea4e918d05f3537b51","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>While creating a website and working with JavaScript, you'll often need to get access to elements in the DOM for different purposes.</p><p>This tutorial shows you different ways to get an element from the DOM using JavaScript.</p><h2 id=\"getelementbyid\">getElementById</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById\">getElementById()</a> method allows you to retrieve an element from the DOM using the element's ID.</p><p>If no element exists in the DOM with the supplied ID, <code class=\"language-text\">null</code> will be returned instead.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> mainElement <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'main'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"getelementsbytagname\">getElementsByTagName</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName\">getElementsByTagName()</a> allows you to retrieve an <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection\">HTMLCollection</a> of elements that have the tag name you supply to the method. An example of a tag name is <code class=\"language-text\">div</code>.</p><p>Items in an <code class=\"language-text\">HTMLCollection</code> can be accessed similarly to how you would access items in an array.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> divElements <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementsByTagName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>divElements<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><p>You can use this method on any element and not just the <code class=\"language-text\">document</code>. That way, you can retrieve all children of that element that have the supplied tag name.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> divElements <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementsByTagName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> pElements <span class=\"token operator\">=</span> divElements<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">getElementsByTagName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'p'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>pElements<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"getelementsbyclassname\">getElementsByClassName()</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName\">getElementsByClassName()</a> method allows you to retrieve a live <code class=\"language-text\">HTMLCollection</code> of elements that have the class name you provide as a parameter.</p><p>A live <code class=\"language-text\">HTMLCollection</code> means that the items in the collection are updated with any updates that happen to the DOM. So, for example, if an item was part of the collection because it had the class provided as a parameter, but then its class was removed, the item will be removed from the collection.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> mainElements <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementsByClassName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'main'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>mainElements<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"getelementsbyname\">getElementsByName()</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName\">getElementsByName()</a> method allows you to retrieve elements by the value of the <code class=\"language-text\">name</code> attribute. For example, you can use it to retrieve <code class=\"language-text\">input</code> elements that have the <code class=\"language-text\">name</code> attribute set to <code class=\"language-text\">email</code>.</p><p>This method returns a live <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/NodeList\">NodeList</a>, which is generally similar to an <code class=\"language-text\">HTMLCollection</code>, but the items in the list can be accessed through the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/NodeList#methods\">methods</a> it provides.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> emailElements <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementsByName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'email'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>emailElements<span class=\"token punctuation\">.</span><span class=\"token function\">item</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"queryselector\">querySelector</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\">querySelector()</a> method allows you to retrieve the first element that matches the specified selector. The selector can be any <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors\">CSS selector</a>.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> elm <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.main > p'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>elm<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><p>This method can be used on any element, and not just the <code class=\"language-text\">document</code>. So, you can use it to retrieve a child element of a parent element that matches the specified selector.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> table <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.main > table'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> thead <span class=\"token operator\">=</span> table<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'thead'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"queryselectorall\">querySelectorAll</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll\">querySelectorAll()</a> method allows you to retrieve all elements that match the specified selector. This method returns a <code class=\"language-text\">NodeList</code>.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> elms <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.main > p'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>elms<span class=\"token punctuation\">.</span><span class=\"token function\">item</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><p>This method can be used on any element, and not just the <code class=\"language-text\">document</code>. So, you can use it to retrieve all child elements of a parent element that match the specified selector.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> table <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.main > table'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> rows <span class=\"token operator\">=</span> table<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'tr'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">const</span> row <span class=\"token keyword\">of</span> rows<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>row<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div><h2 id=\"children\">children</h2><p>The <code class=\"language-text\">children</code> property allows you to retrieve all immediate child elements of the <code class=\"language-text\">document</code> or any element. This property's type is a live <code class=\"language-text\">HTMLCollection</code>.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> rows <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'table tr'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">const</span> row <span class=\"token keyword\">of</span> rows<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>row<span class=\"token punctuation\">.</span>children<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div><h2 id=\"firstelementchild\">firstElementChild</h2><p>The <code class=\"language-text\">firstElementChild</code> property allows you to retrieve the first child element of the <code class=\"language-text\">document</code> or any element.</p><p>If the element does not have children, the value of <code class=\"language-text\">firstElementChild</code> is <code class=\"language-text\">null</code>.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> rows <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'table tr'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">const</span> row <span class=\"token keyword\">of</span> rows<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>row<span class=\"token punctuation\">.</span>firstElementChild<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div><h2 id=\"lastelementchild\">lastElementChild</h2><p>The <code class=\"language-text\">lastElementChild</code> property allows you to retrieve the last child element of the <code class=\"language-text\">document</code> or any element.</p><p>If the element does not have children, the value of <code class=\"language-text\">lastElementChild</code> is <code class=\"language-text\">null</code>:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> rows <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">querySelectorAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'table tr'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">const</span> row <span class=\"token keyword\">of</span> rows<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>row<span class=\"token punctuation\">.</span>lastElementChild<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div><h2 id=\"scripts\">scripts</h2><p>The <code class=\"language-text\">scripts</code> property allows you to retrieve all <code class=\"language-text\">&#x3C;script></code> elements in the document. It returns an <code class=\"language-text\">HTMLCollection</code> of elements.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>document<span class=\"token punctuation\">.</span>scripts<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"elementfrompoint\">elementFromPoint</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint\">elementFromPoint()</a> method allows you to retrieve the top element starting from a specified point. It accepts x and y coordinates to locate the point to look for the element.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> elm <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">elemetFromPoint</span><span class=\"token punctuation\">(</span><span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>elm<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"elementsfrompoint\">elementsFromPoint</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint\">elementsFromPoint()</a> method allows you to retrieve an array of Elements starting from a specified point until the end of the viewport.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> elms <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">elementsFromPoint</span><span class=\"token punctuation\">(</span><span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>elm<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"closest\">closest</h2><p>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\">closest()</a> method available on elements (not on the <code class=\"language-text\">document</code>) allows you to retrieve the closest ancestor (which are the parents) of the element that matches the specified selector. If no elements are found, the method returns <code class=\"language-text\">null</code>.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> closestElm <span class=\"token operator\">=</span> table<span class=\"token punctuation\">.</span><span class=\"token function\">closest</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>closestElm<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"nextelementsibling\">nextElementSibling</h2><p>The <code class=\"language-text\">nextElementSibling</code> property on elements (not on the <code class=\"language-text\">document</code>) allows you to retrieve the element that follows the current element among its parent's child elements.</p><p>If there are no elements after this element, the value of the property will be <code class=\"language-text\">null</code>.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>table<span class=\"token punctuation\">.</span>nextElementSibling<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"previouselementsibling\">previousElementSibling</h2><p>The <code class=\"language-text\">previousElementSibling</code> property on elements (not on the <code class=\"language-text\">document</code>) allows you to retrieve the element that proceeds the current element among its parent's child elements.</p><p>If there are no elements before this element, the value of the property will be <code class=\"language-text\">null</code>.</p><p>For example:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>table<span class=\"token punctuation\">.</span>previousElementSibling<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><h2 id=\"conclusion\">Conclusion</h2><p>This tutorial explores a list of methods and properties that you can use to retrieve elements in JavaScript. Each have different purposes and can be used differently based on your use case.</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While creating a website and working with JavaScript, you'll often need to get access to elements in the DOM for different purposes."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This tutorial shows you different ways to get an element from the DOM using JavaScript."}]},{"type":"element","tagName":"h2","properties":{"id":"getelementbyid"},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById"},"children":[{"type":"text","value":"getElementById()"}]},{"type":"text","value":" method allows you to retrieve an element from the DOM using the element's ID."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If no element exists in the DOM with the supplied ID, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" will be returned instead."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" mainElement "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'main'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"getelementsbytagname"},"children":[{"type":"text","value":"getElementsByTagName"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName"},"children":[{"type":"text","value":"getElementsByTagName()"}]},{"type":"text","value":" allows you to retrieve an "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection"},"children":[{"type":"text","value":"HTMLCollection"}]},{"type":"text","value":" of elements that have the tag name you supply to the method. An example of a tag name is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"div"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Items in an "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"HTMLCollection"}]},{"type":"text","value":" can be accessed similarly to how you would access items in an array."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" divElements "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementsByTagName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'div'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"divElements"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use this method on any element and not just the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":". That way, you can retrieve all children of that element that have the supplied tag name."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" divElements "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementsByTagName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'div'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" pElements "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" divElements"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementsByTagName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'p'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"pElements"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"getelementsbyclassname"},"children":[{"type":"text","value":"getElementsByClassName()"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName"},"children":[{"type":"text","value":"getElementsByClassName()"}]},{"type":"text","value":" method allows you to retrieve a live "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"HTMLCollection"}]},{"type":"text","value":" of elements that have the class name you provide as a parameter."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A live "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"HTMLCollection"}]},{"type":"text","value":" means that the items in the collection are updated with any updates that happen to the DOM. So, for example, if an item was part of the collection because it had the class provided as a parameter, but then its class was removed, the item will be removed from the collection."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" mainElements "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementsByClassName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'main'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"mainElements"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"getelementsbyname"},"children":[{"type":"text","value":"getElementsByName()"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName"},"children":[{"type":"text","value":"getElementsByName()"}]},{"type":"text","value":" method allows you to retrieve elements by the value of the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" attribute. For example, you can use it to retrieve "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"input"}]},{"type":"text","value":" elements that have the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" attribute set to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"email"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This method returns a live "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/NodeList"},"children":[{"type":"text","value":"NodeList"}]},{"type":"text","value":", which is generally similar to an "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"HTMLCollection"}]},{"type":"text","value":", but the items in the list can be accessed through the "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/NodeList#methods"},"children":[{"type":"text","value":"methods"}]},{"type":"text","value":" it provides."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" emailElements "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementsByName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'email'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"emailElements"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"queryselector"},"children":[{"type":"text","value":"querySelector"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector"},"children":[{"type":"text","value":"querySelector()"}]},{"type":"text","value":" method allows you to retrieve the first element that matches the specified selector. The selector can be any "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors"},"children":[{"type":"text","value":"CSS selector"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" elm "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelector"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'.main > p'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"elm"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This method can be used on any element, and not just the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":". So, you can use it to retrieve a child element of a parent element that matches the specified selector."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" table "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelector"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'.main > table'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" thead "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" table"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelector"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'thead'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"queryselectorall"},"children":[{"type":"text","value":"querySelectorAll"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll"},"children":[{"type":"text","value":"querySelectorAll()"}]},{"type":"text","value":" method allows you to retrieve all elements that match the specified selector. This method returns a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"NodeList"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" elms "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelectorAll"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'.main > p'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"elms"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"item"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This method can be used on any element, and not just the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":". So, you can use it to retrieve all child elements of a parent element that match the specified selector."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" table "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelector"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'.main > table'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rows "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" table"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelectorAll"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'tr'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" row "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"of"}]},{"type":"text","value":" rows"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"row"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"children"},"children":[{"type":"text","value":"children"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"children"}]},{"type":"text","value":" property allows you to retrieve all immediate child elements of the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":" or any element. This property's type is a live "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"HTMLCollection"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rows "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelectorAll"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'table tr'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" row "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"of"}]},{"type":"text","value":" rows"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"row"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"children"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"firstelementchild"},"children":[{"type":"text","value":"firstElementChild"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"firstElementChild"}]},{"type":"text","value":" property allows you to retrieve the first child element of the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":" or any element."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the element does not have children, the value of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"firstElementChild"}]},{"type":"text","value":" is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rows "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelectorAll"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'table tr'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" row "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"of"}]},{"type":"text","value":" rows"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"row"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"firstElementChild"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"lastelementchild"},"children":[{"type":"text","value":"lastElementChild"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"lastElementChild"}]},{"type":"text","value":" property allows you to retrieve the last child element of the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":" or any element."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the element does not have children, the value of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"lastElementChild"}]},{"type":"text","value":" is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rows "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"querySelectorAll"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'table tr'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" row "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"of"}]},{"type":"text","value":" rows"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"row"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"lastElementChild"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"scripts"},"children":[{"type":"text","value":"scripts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"scripts"}]},{"type":"text","value":" property allows you to retrieve all "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"<script>"}]},{"type":"text","value":" elements in the document. It returns an "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"HTMLCollection"}]},{"type":"text","value":" of elements."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"scripts"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"elementfrompoint"},"children":[{"type":"text","value":"elementFromPoint"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint"},"children":[{"type":"text","value":"elementFromPoint()"}]},{"type":"text","value":" method allows you to retrieve the top element starting from a specified point. It accepts x and y coordinates to locate the point to look for the element."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" elm "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"elemetFromPoint"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"20"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"elm"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"elementsfrompoint"},"children":[{"type":"text","value":"elementsFromPoint"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint"},"children":[{"type":"text","value":"elementsFromPoint()"}]},{"type":"text","value":" method allows you to retrieve an array of Elements starting from a specified point until the end of the viewport."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" elms "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"elementsFromPoint"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"20"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"elm"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"closest"},"children":[{"type":"text","value":"closest"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/closest"},"children":[{"type":"text","value":"closest()"}]},{"type":"text","value":" method available on elements (not on the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":") allows you to retrieve the closest ancestor (which are the parents) of the element that matches the specified selector. If no elements are found, the method returns "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" closestElm "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" table"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"closest"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'div'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"closestElm"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"nextelementsibling"},"children":[{"type":"text","value":"nextElementSibling"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"nextElementSibling"}]},{"type":"text","value":" property on elements (not on the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":") allows you to retrieve the element that follows the current element among its parent's child elements."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If there are no elements after this element, the value of the property will be "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"table"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"nextElementSibling"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"previouselementsibling"},"children":[{"type":"text","value":"previousElementSibling"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"previousElementSibling"}]},{"type":"text","value":" property on elements (not on the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document"}]},{"type":"text","value":") allows you to retrieve the element that proceeds the current element among its parent's child elements."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If there are no elements before this element, the value of the property will be "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"table"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"previousElementSibling"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This tutorial explores a list of methods and properties that you can use to retrieve elements in JavaScript. Each have different purposes and can be used differently based on your use case."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"getelementbyid","heading":"getElementById"},{"id":"getelementsbytagname","heading":"getElementsByTagName"},{"id":"getelementsbyclassname","heading":"getElementsByClassName()"},{"id":"getelementsbyname","heading":"getElementsByName()"},{"id":"queryselector","heading":"querySelector"},{"id":"queryselectorall","heading":"querySelectorAll"},{"id":"children","heading":"children"},{"id":"firstelementchild","heading":"firstElementChild"},{"id":"lastelementchild","heading":"lastElementChild"},{"id":"scripts","heading":"scripts"},{"id":"elementfrompoint","heading":"elementFromPoint"},{"id":"elementsfrompoint","heading":"elementsFromPoint"},{"id":"closest","heading":"closest"},{"id":"nextelementsibling","heading":"nextElementSibling"},{"id":"previouselementsibling","heading":"previousElementSibling"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"js-elm.jpg","publicURL":"/static/e1e7a4c25e44c189d9cf97060890c67b/js-elm.jpg","imageMeta":{"width":1560,"height":876},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHbjcCGH//EABgQAAIDAAAAAAAAAAAAAAAAAAERAAIg/9oACAEBAAEFAmXZwY//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAVEAEBAAAAAAAAAAAAAAAAAAAgMf/aAAgBAQAGPwKL/8QAGRABAQADAQAAAAAAAAAAAAAAAREAITEg/9oACAEBAAE/ISo4zfphcS9J4//aAAwDAQACAAMAAAAQ48//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAEAAwACAwAAAAAAAAAAAAABABExECFBcZH/2gAIAQEAAT8QZWodVOvkb7ZDNYCtoUC7vhB08wKv3P/Z","aspectRatio":1.7857142857142858,"src":"/static/e1e7a4c25e44c189d9cf97060890c67b/ea4ab/js-elm.jpg","srcSet":"/static/e1e7a4c25e44c189d9cf97060890c67b/477ba/js-elm.jpg 175w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/06776/js-elm.jpg 350w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/ea4ab/js-elm.jpg 700w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/3055e/js-elm.jpg 1050w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/eff08/js-elm.jpg 1400w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/81a53/js-elm.jpg 1560w","srcWebp":"/static/e1e7a4c25e44c189d9cf97060890c67b/89afa/js-elm.webp","srcSetWebp":"/static/e1e7a4c25e44c189d9cf97060890c67b/9fca7/js-elm.webp 175w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/37a4e/js-elm.webp 350w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/89afa/js-elm.webp 700w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/78e7a/js-elm.webp 1050w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/03d34/js-elm.webp 1400w,\n/static/e1e7a4c25e44c189d9cf97060890c67b/f5845/js-elm.webp 1560w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__626e658e39840e1ac2875199","title":"Local Storage vs Cookies: What's the Difference?","slug":"localstorage-vs-cookies-whats-the-difference","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/05/Local-Storage-vs-Cookies-What-s-the-Difference.jpg","excerpt":"In this article, you'll learn about some of the main differences between local storage and cookies and which you should choose for your websites.","custom_excerpt":"In this article, you'll learn about some of the main differences between local storage and cookies and which you should choose for your websites.","visibility":"public","created_at_pretty":"1 May 2022","published_at_pretty":"5 May 2022","updated_at_pretty":"5 May 2022","created_at":"2022-05-01T10:48:46.000+00:00","published_at":"2022-05-05T08:57:19.000+00:00","updated_at":"2022-05-05T08:57:19.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":{"base":"photo-1592609931095-54a2168ae893-2.jpeg","publicURL":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/photo-1592609931095-54a2168ae893-2.jpeg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwAEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHh6QZDjq//xAAaEAEAAwADAAAAAAAAAAAAAAABAAIREiFB/9oACAEBAAEFApQ6eO+VXFWf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQIBAT8Bp//EABoQAAICAwAAAAAAAAAAAAAAAAABECExMkH/2gAIAQEABj8CwdNXFOP/xAAcEAADAAMAAwAAAAAAAAAAAAAAAREhQVFhcYH/2gAIAQEAAT8heHx6GaR4cOQ+jrqtTQu6lgaVs//aAAwDAQACAAMAAAAQlM//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8QrH//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8QdE//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhMUFhweH/2gAIAQEAAT8QwaQHozIjaNdvYnh0/qNZJwLU36JcXxL2lqf/2Q==","aspectRatio":1.5028901734104045,"src":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/d5c54/photo-1592609931095-54a2168ae893-2.jpg","srcSet":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/65d8c/photo-1592609931095-54a2168ae893-2.jpg 260w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/c5f21/photo-1592609931095-54a2168ae893-2.jpg 520w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/d5c54/photo-1592609931095-54a2168ae893-2.jpg 1040w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/81a53/photo-1592609931095-54a2168ae893-2.jpg 1560w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/4e5f3/photo-1592609931095-54a2168ae893-2.jpg 2000w","srcWebp":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/e4875/photo-1592609931095-54a2168ae893-2.webp","srcSetWebp":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/dc8f3/photo-1592609931095-54a2168ae893-2.webp 260w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/2db4b/photo-1592609931095-54a2168ae893-2.webp 520w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/e4875/photo-1592609931095-54a2168ae893-2.webp 1040w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/f5845/photo-1592609931095-54a2168ae893-2.webp 1560w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/49d6b/photo-1592609931095-54a2168ae893-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"Cookies in JavaScript are used to read from and store small data related to the\nuser on the browser.\n\nLocal Storage allows you to also read from and store data related to the user on\nthe browser using JavaScript's Storage API\n[https://developer.mozilla.org/en-US/docs/Web/API/Storage].\n\nIn this article, you'll learn about some of the main differences between local\nstorage and cookies and which you should choose for your websites.\n\nWhat are Cookies?\nCookies are pieces of data that are communicated between the server and the\nbrowser in the header of requests. This allows the server to learn more\ninformation about the user accessing the website but also gives you access in\nthe browser to interact with that data.\n\nAn example of using cookies is storing the user's authentication token when they\nare logged in. The server needs to have access to that cookie to authenticate\nthe user in later requests and retrieve data or process actions based on who the\nuser is.\n\nSimilarly, as a developer, you'll probably need access to that token to use it\nfor future requests to send to your server. \n\nCookies on the client-side (the browser) are natively accessed with \ndocument.cookies. When you store cookies on the browser, you can make them\nspecific to a path in a domain name and you can add an expiry date for them.\n\nWhat is the Local Storage?\nLocal Storage is used to read and write data in the browser's storage. The data\nis persistent and has no expiry date. The data is stored in key-value pairs. The\nserver has no access to the client's local storage.\n\nAn example of using local storage is storing the user's color mode preference\n(light or dark mode). This piece of information is generally not necessary for\nthe server to know, and is used to ensure that the user's preference is\nreflected on the website.\n\nLocal storage is specific to the protocol of a domain. So, the information\nreturned for a website with HTTP protocol is different than the information\nreturned for that same website with HTTPS protocol.\n\nLocal storage is accessed using window.localStorage. It's a read-only property\nwith methods like getItem and setItem to access and modify or add data to the\nlocal storage.\n\nWhat are the Differences Between Cookies and Local Storage\nAccess on the Server\nAs mentioned in the previous sections, the server can access the client's\ncookies but not the data stored in the client's storage.\n\nSo, in use cases where it's important for the server to have access to a set of\ndata, you should use cookies.\n\nData Size\nThere's a big difference between the size of data that cookies can hold and that\nof the local storage. For cookies, the maximum size is 4096 bytes, whereas for\nlocal storage it's 5MB.\n\nFor that reason, cookies should not be used to store large pieces of data. For\nexample, if you want to store the user's details in the browser then it's best\nto store them in the local storage.\n\nData Expiry\nCookies have an expiry date. You can set it to a very far away date, but it\nstill expires. On the other hand, data in the local storage does not expire and\nwill be available any time the user opens your website. The only way to clear\nlocal storage is either manually with code or if the user clears their browser\nstorage manually.\n\nBetter API\nUnless you're using a JavaScript library to facilitate this, it can be a hassle\nto read or write cookies using document.cookies as there is no straight way to\ndo it. Here's an example from W3Schools\n[https://www.w3schools.com/js/js_cookies.asp] of the code you'd need to use to\nget and set a cookie by name:\n\nfunction setCookie(cname, cvalue, exdays) {\n  const d = new Date();\n  d.setTime(d.getTime() + (exdays*24*60*60*1000));\n  let expires = \"expires=\"+ d.toUTCString();\n  document.cookie = cname + \"=\" + cvalue + \";\" + expires + \";path=/\";\n}\n\nfunction getCookie(cname) {\n  let name = cname + \"=\";\n  let decodedCookie = decodeURIComponent(document.cookie);\n  let ca = decodedCookie.split(';');\n  for(let i = 0; i <ca.length; i++) {\n    let c = ca[i];\n    while (c.charAt(0) == ' ') {\n      c = c.substring(1);\n    }\n    if (c.indexOf(name) == 0) {\n      return c.substring(name.length, c.length);\n    }\n  }\n  return \"\";\n}\n\nAs for local storage, it implements the Web Storage API\n[https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API] \nwhich contains easy-to-use methods to read and write data. Here's an example of\nsetting data in the storage and reading them:\n\nlocalStorage.setItem('name', 'Shahed');\n\n//later\nconst name = localStorage.getItem('name');\n\n\nWhich Should You Choose?\nFrom reading the differences and definitions this should be clear. However, to\nsummarize it and make it even clearer:\n\n 1. If you need to store data that is accessible for both the server and the\n    client, use cookies. Otherwise, use local storage.\n 2. If you need to store larger data, use local storage.\n 3. If you need to store data that does not expire, use local storage.\n 4. If you need easy-to-use methods to access and modify the data stored on the\n    client, use local storage.\n\nConclusion\nIf you're interested to learn more about cookies and local storage, check out\nMDN's documentation for cookies\n[https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie] and \nlocalStorage\n[https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage] for a\nmore thorough explanation of each.","html":"<p>Cookies in JavaScript are used to read from and store small data related to the user on the browser.</p><p>Local Storage allows you to also read from and store data related to the user on the browser using JavaScript's <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Storage\">Storage API</a>.</p><p>In this article, you'll learn about some of the main differences between local storage and cookies and which you should choose for your websites.</p><h2 id=\"what-are-cookies\">What are Cookies?</h2><p>Cookies are pieces of data that are communicated between the server and the browser in the header of requests. This allows the server to learn more information about the user accessing the website but also gives you access in the browser to interact with that data.</p><p>An example of using cookies is storing the user's authentication token when they are logged in. The server needs to have access to that cookie to authenticate the user in later requests and retrieve data or process actions based on who the user is.</p><p>Similarly, as a developer, you'll probably need access to that token to use it for future requests to send to your server. </p><p>Cookies on the client-side (the browser) are natively accessed with <code>document.cookies</code>. When you store cookies on the browser, you can make them specific to a path in a domain name and you can add an expiry date for them.</p><h2 id=\"what-is-the-local-storage\">What is the Local Storage?</h2><p>Local Storage is used to read and write data in the browser's storage. The data is persistent and has no expiry date. The data is stored in key-value pairs. The server has no access to the client's local storage.</p><p>An example of using local storage is storing the user's color mode preference (light or dark mode). This piece of information is generally not necessary for the server to know, and is used to ensure that the user's preference is reflected on the website.</p><p>Local storage is specific to the protocol of a domain. So, the information returned for a website with HTTP protocol is different than the information returned for that same website with HTTPS protocol.</p><p>Local storage is accessed using <code>window.localStorage</code>. It's a read-only property with methods like <code>getItem</code> and <code>setItem</code> to access and modify or add data to the local storage.</p><h2 id=\"what-are-the-differences-between-cookies-and-local-storage\">What are the Differences Between Cookies and Local Storage</h2><h3 id=\"access-on-the-server\">Access on the Server</h3><p>As mentioned in the previous sections, the server can access the client's cookies but not the data stored in the client's storage.</p><p>So, in use cases where it's important for the server to have access to a set of data, you should use cookies.</p><h3 id=\"data-size\">Data Size</h3><p>There's a big difference between the size of data that cookies can hold and that of the local storage. For cookies, the maximum size is 4096 bytes, whereas for local storage it's 5MB.</p><p>For that reason, cookies should not be used to store large pieces of data. For example, if you want to store the user's details in the browser then it's best to store them in the local storage.</p><h3 id=\"data-expiry\">Data Expiry</h3><p>Cookies have an expiry date. You can set it to a very far away date, but it still expires. On the other hand, data in the local storage does not expire and will be available any time the user opens your website. The only way to clear local storage is either manually with code or if the user clears their browser storage manually.</p><h3 id=\"better-api\">Better API</h3><p>Unless you're using a JavaScript library to facilitate this, it can be a hassle to read or write cookies using <code>document.cookies</code> as there is no straight way to do it. Here's an example from <a href=\"https://www.w3schools.com/js/js_cookies.asp\">W3Schools</a> of the code you'd need to use to get and set a cookie by name:</p><pre><code class=\"language-js\">function setCookie(cname, cvalue, exdays) {\n  const d = new Date();\n  d.setTime(d.getTime() + (exdays*24*60*60*1000));\n  let expires = \"expires=\"+ d.toUTCString();\n  document.cookie = cname + \"=\" + cvalue + \";\" + expires + \";path=/\";\n}\n\nfunction getCookie(cname) {\n  let name = cname + \"=\";\n  let decodedCookie = decodeURIComponent(document.cookie);\n  let ca = decodedCookie.split(';');\n  for(let i = 0; i &lt;ca.length; i++) {\n    let c = ca[i];\n    while (c.charAt(0) == ' ') {\n      c = c.substring(1);\n    }\n    if (c.indexOf(name) == 0) {\n      return c.substring(name.length, c.length);\n    }\n  }\n  return \"\";\n}</code></pre><p>As for local storage, it implements the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API\">Web Storage API</a> which contains easy-to-use methods to read and write data. Here's an example of setting data in the storage and reading them:</p><pre><code class=\"language-js\">localStorage.setItem('name', 'Shahed');\n\n//later\nconst name = localStorage.getItem('name');\n</code></pre><h2 id=\"which-should-you-choose\">Which Should You Choose?</h2><p>From reading the differences and definitions this should be clear. However, to summarize it and make it even clearer:</p><ol><li>If you need to store data that is accessible for both the server and the client, use cookies. Otherwise, use local storage.</li><li>If you need to store larger data, use local storage.</li><li>If you need to store data that does not expire, use local storage.</li><li>If you need easy-to-use methods to access and modify the data stored on the client, use local storage.</li></ol><h2 id=\"conclusion\">Conclusion</h2><p>If you're interested to learn more about cookies and local storage, check out MDN's documentation for <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie\">cookies</a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\">localStorage</a> for a more thorough explanation of each. </p>","url":"https://backend.shahednasser.com/localstorage-vs-cookies-whats-the-difference/","canonical_url":null,"uuid":"47fde12d-6a2c-497f-8a8c-e66899a86bfd","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"626e658e39840e1ac2875199","reading_time":3,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>Cookies in JavaScript are used to read from and store small data related to the user on the browser.</p><p>Local Storage allows you to also read from and store data related to the user on the browser using JavaScript's <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Storage\">Storage API</a>.</p><p>In this article, you'll learn about some of the main differences between local storage and cookies and which you should choose for your websites.</p><h2 id=\"what-are-cookies\">What are Cookies?</h2><p>Cookies are pieces of data that are communicated between the server and the browser in the header of requests. This allows the server to learn more information about the user accessing the website but also gives you access in the browser to interact with that data.</p><p>An example of using cookies is storing the user's authentication token when they are logged in. The server needs to have access to that cookie to authenticate the user in later requests and retrieve data or process actions based on who the user is.</p><p>Similarly, as a developer, you'll probably need access to that token to use it for future requests to send to your server. </p><p>Cookies on the client-side (the browser) are natively accessed with <code class=\"language-text\">document.cookies</code>. When you store cookies on the browser, you can make them specific to a path in a domain name and you can add an expiry date for them.</p><h2 id=\"what-is-the-local-storage\">What is the Local Storage?</h2><p>Local Storage is used to read and write data in the browser's storage. The data is persistent and has no expiry date. The data is stored in key-value pairs. The server has no access to the client's local storage.</p><p>An example of using local storage is storing the user's color mode preference (light or dark mode). This piece of information is generally not necessary for the server to know, and is used to ensure that the user's preference is reflected on the website.</p><p>Local storage is specific to the protocol of a domain. So, the information returned for a website with HTTP protocol is different than the information returned for that same website with HTTPS protocol.</p><p>Local storage is accessed using <code class=\"language-text\">window.localStorage</code>. It's a read-only property with methods like <code class=\"language-text\">getItem</code> and <code class=\"language-text\">setItem</code> to access and modify or add data to the local storage.</p><h2 id=\"what-are-the-differences-between-cookies-and-local-storage\">What are the Differences Between Cookies and Local Storage</h2><h3 id=\"access-on-the-server\">Access on the Server</h3><p>As mentioned in the previous sections, the server can access the client's cookies but not the data stored in the client's storage.</p><p>So, in use cases where it's important for the server to have access to a set of data, you should use cookies.</p><h3 id=\"data-size\">Data Size</h3><p>There's a big difference between the size of data that cookies can hold and that of the local storage. For cookies, the maximum size is 4096 bytes, whereas for local storage it's 5MB.</p><p>For that reason, cookies should not be used to store large pieces of data. For example, if you want to store the user's details in the browser then it's best to store them in the local storage.</p><h3 id=\"data-expiry\">Data Expiry</h3><p>Cookies have an expiry date. You can set it to a very far away date, but it still expires. On the other hand, data in the local storage does not expire and will be available any time the user opens your website. The only way to clear local storage is either manually with code or if the user clears their browser storage manually.</p><h3 id=\"better-api\">Better API</h3><p>Unless you're using a JavaScript library to facilitate this, it can be a hassle to read or write cookies using <code class=\"language-text\">document.cookies</code> as there is no straight way to do it. Here's an example from <a href=\"https://www.w3schools.com/js/js_cookies.asp\">W3Schools</a> of the code you'd need to use to get and set a cookie by name:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function</span> <span class=\"token function\">setCookie</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cname<span class=\"token punctuation\">,</span> cvalue<span class=\"token punctuation\">,</span> exdays</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> d <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Date</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  d<span class=\"token punctuation\">.</span><span class=\"token function\">setTime</span><span class=\"token punctuation\">(</span>d<span class=\"token punctuation\">.</span><span class=\"token function\">getTime</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token punctuation\">(</span>exdays<span class=\"token operator\">*</span><span class=\"token number\">24</span><span class=\"token operator\">*</span><span class=\"token number\">60</span><span class=\"token operator\">*</span><span class=\"token number\">60</span><span class=\"token operator\">*</span><span class=\"token number\">1000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">let</span> expires <span class=\"token operator\">=</span> <span class=\"token string\">\"expires=\"</span><span class=\"token operator\">+</span> d<span class=\"token punctuation\">.</span><span class=\"token function\">toUTCString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  document<span class=\"token punctuation\">.</span>cookie <span class=\"token operator\">=</span> cname <span class=\"token operator\">+</span> <span class=\"token string\">\"=\"</span> <span class=\"token operator\">+</span> cvalue <span class=\"token operator\">+</span> <span class=\"token string\">\";\"</span> <span class=\"token operator\">+</span> expires <span class=\"token operator\">+</span> <span class=\"token string\">\";path=/\"</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">getCookie</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cname</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">let</span> name <span class=\"token operator\">=</span> cname <span class=\"token operator\">+</span> <span class=\"token string\">\"=\"</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">let</span> decodedCookie <span class=\"token operator\">=</span> <span class=\"token function\">decodeURIComponent</span><span class=\"token punctuation\">(</span>document<span class=\"token punctuation\">.</span>cookie<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">let</span> ca <span class=\"token operator\">=</span> decodedCookie<span class=\"token punctuation\">.</span><span class=\"token function\">split</span><span class=\"token punctuation\">(</span><span class=\"token string\">';'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">for</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&#x3C;</span>ca<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">let</span> c <span class=\"token operator\">=</span> ca<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>c<span class=\"token punctuation\">.</span><span class=\"token function\">charAt</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">==</span> <span class=\"token string\">' '</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      c <span class=\"token operator\">=</span> c<span class=\"token punctuation\">.</span><span class=\"token function\">substring</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>c<span class=\"token punctuation\">.</span><span class=\"token function\">indexOf</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span> <span class=\"token operator\">==</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> c<span class=\"token punctuation\">.</span><span class=\"token function\">substring</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">,</span> c<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">\"\"</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div><p>As for local storage, it implements the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API\">Web Storage API</a> which contains easy-to-use methods to read and write data. Here's an example of setting data in the storage and reading them:</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">localStorage<span class=\"token punctuation\">.</span><span class=\"token function\">setItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Shahed'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">//later</span>\n<span class=\"token keyword\">const</span> name <span class=\"token operator\">=</span> localStorage<span class=\"token punctuation\">.</span><span class=\"token function\">getItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div><h2 id=\"which-should-you-choose\">Which Should You Choose?</h2><p>From reading the differences and definitions this should be clear. However, to summarize it and make it even clearer:</p><ol><li>If you need to store data that is accessible for both the server and the client, use cookies. Otherwise, use local storage.</li><li>If you need to store larger data, use local storage.</li><li>If you need to store data that does not expire, use local storage.</li><li>If you need easy-to-use methods to access and modify the data stored on the client, use local storage.</li></ol><h2 id=\"conclusion\">Conclusion</h2><p>If you're interested to learn more about cookies and local storage, check out MDN's documentation for <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie\">cookies</a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\">localStorage</a> for a more thorough explanation of each. </p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cookies in JavaScript are used to read from and store small data related to the user on the browser."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Local Storage allows you to also read from and store data related to the user on the browser using JavaScript's "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Storage"},"children":[{"type":"text","value":"Storage API"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this article, you'll learn about some of the main differences between local storage and cookies and which you should choose for your websites."}]},{"type":"element","tagName":"h2","properties":{"id":"what-are-cookies"},"children":[{"type":"text","value":"What are Cookies?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cookies are pieces of data that are communicated between the server and the browser in the header of requests. This allows the server to learn more information about the user accessing the website but also gives you access in the browser to interact with that data."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"An example of using cookies is storing the user's authentication token when they are logged in. The server needs to have access to that cookie to authenticate the user in later requests and retrieve data or process actions based on who the user is."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Similarly, as a developer, you'll probably need access to that token to use it for future requests to send to your server. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cookies on the client-side (the browser) are natively accessed with "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document.cookies"}]},{"type":"text","value":". When you store cookies on the browser, you can make them specific to a path in a domain name and you can add an expiry date for them."}]},{"type":"element","tagName":"h2","properties":{"id":"what-is-the-local-storage"},"children":[{"type":"text","value":"What is the Local Storage?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Local Storage is used to read and write data in the browser's storage. The data is persistent and has no expiry date. The data is stored in key-value pairs. The server has no access to the client's local storage."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"An example of using local storage is storing the user's color mode preference (light or dark mode). This piece of information is generally not necessary for the server to know, and is used to ensure that the user's preference is reflected on the website."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Local storage is specific to the protocol of a domain. So, the information returned for a website with HTTP protocol is different than the information returned for that same website with HTTPS protocol."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Local storage is accessed using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"window.localStorage"}]},{"type":"text","value":". It's a read-only property with methods like "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"getItem"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setItem"}]},{"type":"text","value":" to access and modify or add data to the local storage."}]},{"type":"element","tagName":"h2","properties":{"id":"what-are-the-differences-between-cookies-and-local-storage"},"children":[{"type":"text","value":"What are the Differences Between Cookies and Local Storage"}]},{"type":"element","tagName":"h3","properties":{"id":"access-on-the-server"},"children":[{"type":"text","value":"Access on the Server"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As mentioned in the previous sections, the server can access the client's cookies but not the data stored in the client's storage."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, in use cases where it's important for the server to have access to a set of data, you should use cookies."}]},{"type":"element","tagName":"h3","properties":{"id":"data-size"},"children":[{"type":"text","value":"Data Size"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There's a big difference between the size of data that cookies can hold and that of the local storage. For cookies, the maximum size is 4096 bytes, whereas for local storage it's 5MB."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For that reason, cookies should not be used to store large pieces of data. For example, if you want to store the user's details in the browser then it's best to store them in the local storage."}]},{"type":"element","tagName":"h3","properties":{"id":"data-expiry"},"children":[{"type":"text","value":"Data Expiry"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cookies have an expiry date. You can set it to a very far away date, but it still expires. On the other hand, data in the local storage does not expire and will be available any time the user opens your website. The only way to clear local storage is either manually with code or if the user clears their browser storage manually."}]},{"type":"element","tagName":"h3","properties":{"id":"better-api"},"children":[{"type":"text","value":"Better API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Unless you're using a JavaScript library to facilitate this, it can be a hassle to read or write cookies using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"document.cookies"}]},{"type":"text","value":" as there is no straight way to do it. Here's an example from "},{"type":"element","tagName":"a","properties":{"href":"https://www.w3schools.com/js/js_cookies.asp"},"children":[{"type":"text","value":"W3Schools"}]},{"type":"text","value":" of the code you'd need to use to get and set a cookie by name:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setCookie"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"cname"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" cvalue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" exdays"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" d "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"Date"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  d"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setTime"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"d"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getTime"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"exdays"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"24"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"60"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"60"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1000"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" expires "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"expires=\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" d"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"toUTCString"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cookie "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" cname "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"=\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" cvalue "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\";\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" expires "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\";path=/\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getCookie"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"cname"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" name "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" cname "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"=\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" decodedCookie "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"decodeURIComponent"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cookie"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" ca "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" decodedCookie"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"split"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"';'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"ca"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"++"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" c "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" ca"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"while"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"c"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"charAt"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"' '"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      c "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" c"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"substring"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"c"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"indexOf"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" c"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"substring"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" c"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As for local storage, it implements the "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API"},"children":[{"type":"text","value":"Web Storage API"}]},{"type":"text","value":" which contains easy-to-use methods to read and write data. Here's an example of setting data in the storage and reading them:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"localStorage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setItem"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Shahed'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//later"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" name "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" localStorage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getItem"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"which-should-you-choose"},"children":[{"type":"text","value":"Which Should You Choose?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"From reading the differences and definitions this should be clear. However, to summarize it and make it even clearer:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you need to store data that is accessible for both the server and the client, use cookies. Otherwise, use local storage."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you need to store larger data, use local storage."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you need to store data that does not expire, use local storage."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you need easy-to-use methods to access and modify the data stored on the client, use local storage."}]}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're interested to learn more about cookies and local storage, check out MDN's documentation for "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie"},"children":[{"type":"text","value":"cookies"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"},"children":[{"type":"text","value":"localStorage"}]},{"type":"text","value":" for a more thorough explanation of each. "}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"what-are-cookies","heading":"What are Cookies?"},{"id":"what-is-the-local-storage","heading":"What is the Local Storage?"},{"id":"what-are-the-differences-between-cookies-and-local-storage","heading":"What are the Differences Between Cookies and Local Storage","items":[{"id":"access-on-the-server","heading":"Access on the Server"},{"id":"data-size","heading":"Data Size"},{"id":"data-expiry","heading":"Data Expiry"},{"id":"better-api","heading":"Better API"}]},{"id":"which-should-you-choose","heading":"Which Should You Choose?"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"Local-Storage-vs-Cookies-What-s-the-Difference.jpg","publicURL":"/static/28f50e0a23d8f16f69da75473f01187c/Local-Storage-vs-Cookies-What-s-the-Difference.jpg","imageMeta":{"width":1560,"height":876},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAdubgD//xAAYEAACAwAAAAAAAAAAAAAAAAAAARESIP/aAAgBAQABBQKzJef/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAXEAADAQAAAAAAAAAAAAAAAAAAATIg/9oACAEBAAY/ApZOf//EABkQAQACAwAAAAAAAAAAAAAAAAEAESAxcf/aAAgBAQABPyFsaSDOx3H/2gAMAwEAAgADAAAAEIPP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGRABAAMBAQAAAAAAAAAAAAAAAREhMQAg/9oACAEBAAE/ECAIOyXxIhOqK8//2Q==","aspectRatio":1.7857142857142858,"src":"/static/28f50e0a23d8f16f69da75473f01187c/ea4ab/Local-Storage-vs-Cookies-What-s-the-Difference.jpg","srcSet":"/static/28f50e0a23d8f16f69da75473f01187c/477ba/Local-Storage-vs-Cookies-What-s-the-Difference.jpg 175w,\n/static/28f50e0a23d8f16f69da75473f01187c/06776/Local-Storage-vs-Cookies-What-s-the-Difference.jpg 350w,\n/static/28f50e0a23d8f16f69da75473f01187c/ea4ab/Local-Storage-vs-Cookies-What-s-the-Difference.jpg 700w,\n/static/28f50e0a23d8f16f69da75473f01187c/3055e/Local-Storage-vs-Cookies-What-s-the-Difference.jpg 1050w,\n/static/28f50e0a23d8f16f69da75473f01187c/eff08/Local-Storage-vs-Cookies-What-s-the-Difference.jpg 1400w,\n/static/28f50e0a23d8f16f69da75473f01187c/81a53/Local-Storage-vs-Cookies-What-s-the-Difference.jpg 1560w","srcWebp":"/static/28f50e0a23d8f16f69da75473f01187c/89afa/Local-Storage-vs-Cookies-What-s-the-Difference.webp","srcSetWebp":"/static/28f50e0a23d8f16f69da75473f01187c/9fca7/Local-Storage-vs-Cookies-What-s-the-Difference.webp 175w,\n/static/28f50e0a23d8f16f69da75473f01187c/37a4e/Local-Storage-vs-Cookies-What-s-the-Difference.webp 350w,\n/static/28f50e0a23d8f16f69da75473f01187c/89afa/Local-Storage-vs-Cookies-What-s-the-Difference.webp 700w,\n/static/28f50e0a23d8f16f69da75473f01187c/78e7a/Local-Storage-vs-Cookies-What-s-the-Difference.webp 1050w,\n/static/28f50e0a23d8f16f69da75473f01187c/03d34/Local-Storage-vs-Cookies-What-s-the-Difference.webp 1400w,\n/static/28f50e0a23d8f16f69da75473f01187c/f5845/Local-Storage-vs-Cookies-What-s-the-Difference.webp 1560w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__6248411d39840e1ac2874da6","title":"Optional Chaining in JavaScript","slug":"optional-chaining-in-javascript","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/04/Optional-Chaining-in-JavaScript.jpg","excerpt":"In this article, you’ll learn how and when to use Optional Chaining.","custom_excerpt":"In this article, you’ll learn how and when to use Optional Chaining.","visibility":"public","created_at_pretty":"2 Apr 2022","published_at_pretty":"4 Apr 2022","updated_at_pretty":"4 Apr 2022","created_at":"2022-04-02T12:27:09.000+00:00","published_at":"2022-04-04T09:03:21.000+00:00","updated_at":"2022-04-04T09:03:21.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"murtuzaali","url":"https://backend.shahednasser.com/author/murtuzaali/","name":"Murtuzaali Surti","bio":"Front-end Web Developer, Aspiring Full Stack Developer and a Blogger","cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/04/277600836_682640706379781_1485924985509613504_n.jpg","location":null,"website":"https://murtuzaalisurti.github.io","twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"murtuzaali","url":"https://backend.shahednasser.com/author/murtuzaali/","name":"Murtuzaali Surti","bio":"Front-end Web Developer, Aspiring Full Stack Developer and a Blogger","cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/04/277600836_682640706379781_1485924985509613504_n.jpg","location":null,"website":"https://murtuzaalisurti.github.io","twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"277600836_682640706379781_1485924985509613504_n.jpg","publicURL":"/static/ed3da967db374710d628636a2659c3e0/277600836_682640706379781_1485924985509613504_n.jpg","imageMeta":{"width":600,"height":629},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAVABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHh05Wy8oWaUBGD/8QAGRAAAwEBAQAAAAAAAAAAAAAAAQIDABIE/9oACAEBAAEFAkTtq+dpjQIFLAKmRuWe3Q3/xAAVEQEBAAAAAAAAAAAAAAAAAAABIP/aAAgBAwEBPwEI/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHRAAAQQCAwAAAAAAAAAAAAAAAQAQESEiMnGRsf/aAAgBAQAGPwKFfrZI0O2mLWgHDf/EABkQAQEAAwEAAAAAAAAAAAAAAAERABAhQf/aAAgBAQABPyFoMsiHLytFfDzEWFAJWpQCGlwGG5r1r//aAAwDAQACAAMAAAAQpAgA/8QAFxEBAQEBAAAAAAAAAAAAAAAAARARIf/aAAgBAwEBPxAEWanJ/8QAFxEBAQEBAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPxBUcmD2f//EAB8QAQABAwUBAQAAAAAAAAAAAAERABAxIUFRYYGRof/aAAgBAQABPxAtn45cB6pQhAwQFjJgh3+2E5Rvrb9qYQVtMfem0JulmgnW9R/aVCXk10t//9k=","aspectRatio":0.9655172413793104,"src":"/static/ed3da967db374710d628636a2659c3e0/31709/277600836_682640706379781_1485924985509613504_n.jpg","srcSet":"/static/ed3da967db374710d628636a2659c3e0/f340b/277600836_682640706379781_1485924985509613504_n.jpg 28w,\n/static/ed3da967db374710d628636a2659c3e0/22d64/277600836_682640706379781_1485924985509613504_n.jpg 55w,\n/static/ed3da967db374710d628636a2659c3e0/31709/277600836_682640706379781_1485924985509613504_n.jpg 110w,\n/static/ed3da967db374710d628636a2659c3e0/aa249/277600836_682640706379781_1485924985509613504_n.jpg 165w,\n/static/ed3da967db374710d628636a2659c3e0/0dc33/277600836_682640706379781_1485924985509613504_n.jpg 220w,\n/static/ed3da967db374710d628636a2659c3e0/c3638/277600836_682640706379781_1485924985509613504_n.jpg 600w","srcWebp":"/static/ed3da967db374710d628636a2659c3e0/8678c/277600836_682640706379781_1485924985509613504_n.webp","srcSetWebp":"/static/ed3da967db374710d628636a2659c3e0/59cda/277600836_682640706379781_1485924985509613504_n.webp 28w,\n/static/ed3da967db374710d628636a2659c3e0/7da75/277600836_682640706379781_1485924985509613504_n.webp 55w,\n/static/ed3da967db374710d628636a2659c3e0/8678c/277600836_682640706379781_1485924985509613504_n.webp 110w,\n/static/ed3da967db374710d628636a2659c3e0/f282e/277600836_682640706379781_1485924985509613504_n.webp 165w,\n/static/ed3da967db374710d628636a2659c3e0/a7b21/277600836_682640706379781_1485924985509613504_n.webp 220w,\n/static/ed3da967db374710d628636a2659c3e0/fc91b/277600836_682640706379781_1485924985509613504_n.webp 600w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":{"base":"photo-1592609931095-54a2168ae893-2.jpeg","publicURL":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/photo-1592609931095-54a2168ae893-2.jpeg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwAEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHh6QZDjq//xAAaEAEAAwADAAAAAAAAAAAAAAABAAIREiFB/9oACAEBAAEFApQ6eO+VXFWf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQIBAT8Bp//EABoQAAICAwAAAAAAAAAAAAAAAAABECExMkH/2gAIAQEABj8CwdNXFOP/xAAcEAADAAMAAwAAAAAAAAAAAAAAAREhQVFhcYH/2gAIAQEAAT8heHx6GaR4cOQ+jrqtTQu6lgaVs//aAAwDAQACAAMAAAAQlM//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8QrH//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8QdE//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhMUFhweH/2gAIAQEAAT8QwaQHozIjaNdvYnh0/qNZJwLU36JcXxL2lqf/2Q==","aspectRatio":1.5028901734104045,"src":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/d5c54/photo-1592609931095-54a2168ae893-2.jpg","srcSet":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/65d8c/photo-1592609931095-54a2168ae893-2.jpg 260w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/c5f21/photo-1592609931095-54a2168ae893-2.jpg 520w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/d5c54/photo-1592609931095-54a2168ae893-2.jpg 1040w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/81a53/photo-1592609931095-54a2168ae893-2.jpg 1560w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/4e5f3/photo-1592609931095-54a2168ae893-2.jpg 2000w","srcWebp":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/e4875/photo-1592609931095-54a2168ae893-2.webp","srcSetWebp":"/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/dc8f3/photo-1592609931095-54a2168ae893-2.webp 260w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/2db4b/photo-1592609931095-54a2168ae893-2.webp 520w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/e4875/photo-1592609931095-54a2168ae893-2.webp 1040w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/f5845/photo-1592609931095-54a2168ae893-2.webp 1560w,\n/static/d0b2a96dbeaa1da6e72d54edc3ccc8e2/49d6b/photo-1592609931095-54a2168ae893-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"Optional Chaining in JavaScript is used to return undefined for accessing an\nobject property that doesn't exist and whose parent property is nullish (null or\nundefined).\n\nIf you are unaware that property exists or not and you want to avoid the error\nthat's being thrown, you may want to use optional chaining to get around with\nit.\n\nIn this article, you’ll learn how and when to use Optional Chaining. You’ll also\nlearn when not to use Optional Chaining in JavaScript.\n\nHow it Works\nFirst, let's explore what can go wrong when accessing a property in a nested\nobject.\n\nlet person = {\n    name: \"Murtuza\",\n    work: () => {\n        return \"Software Developer\"\n    },\n    socials: {\n        github: {\n            username: \"murtuzaalisurti\",\n            link: \"https://github.com/murtuzaalisurti\",\n            proUser: {\n                is: 'no'\n            }\n        },\n        linkedin: {\n            username: \"murtuzaali-surti\",\n            link: \"https://linkedin.com/in/murtuzaali-surti\"\n        },\n        twitter: {\n            username: \"murtuza_surti\",\n            link: \"https://twitter.com/murtuza_surti\"\n        }\n    }\n}\n\nIn the above object, let's try to access the property link nested within the\nproperty website. Can we?\n\nconsole.log(person.website.link); //an error will be thrown\n\nWe get an error,\n\nCannot read property 'link' of undefined\n\nThe property website doesn't exist in the object!\n\nBut, let's add the property website to the root object and set the value of it\nas null.\n\nwebsite: null\n\nLet's check if this works,\n\nconsole.log(person.website.link); //an error will be thrown\n\nWe get a similar error,\n\nCannot read property 'link' of null\n\nAs mentioned in the above definition, we can use optional chaining to handle\nthese types of errors! Here's how we can do that.\n\nSyntax\n// website: property to validate\n// link: property to access\nwebsite?.link\n\nThe operator ?. will check if the property on its left-hand side is null or\nundefined and if that's the case, then it will simply return undefined without\nthrowing any errors. In other words, this is also known as short-circuiting.\nOtherwise, it will return the value of the property on its right-hand side.\n\nNot just that, you can also invoke a function if it exists using optional\nchaining.\n\nperson.work?.(args)\n\nAlso, you can access properties using [] brackets.\n\nperson.socials.github?.[\"username\"]\n\nWhat You Can’t Do\n * You cannot apply optional chaining to the objects that are not declared yet.\n   For example:\n\nobject?.prop // object is not defined\n\nWe haven't declared object, thus it will throw an error.\n\n * You cannot assign a value to this expression. In other words, the optional\n   chaining expression can't be on the left-hand side.\n\nThe below code is not valid.\n\nperson.socials.github?.[\"username\"] = \"name\" // not valid\n\nWhen to Use Optional Chaining?\nIt's important to note that optional chaining should not be used when it's not\nnecessary to do so. Only use optional chaining when you know that the property\nthat you want to access is optional and not mandatory.\n\nFor example, in our object person, we can keep the social media platforms\noptional, so we are not sure if a user has a social media account or not on a\nparticular platform. For that, we can use optional chaining to check if a user\nhas a social media account on a particular platform and if it exists, get the\nusername.\n\nperson.socials.github?.[\"username\"]\n\nBut, if we place the optional chaining operator at the root object, then it\ndoesn't make any sense because the root object i.e. person must exist and if it\ndoesn't exist, we should get an error!\n\nConclusion\nIn this article, you learned what Optional Chaining in JavaScript is, how it\nworks when to use it, and when not to use it.\n\nTo learn more about how Optional Chaining works, make sure to check out the MDN\ndocumentation\n[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#specifications] \non it for more details.","html":"<p>Optional Chaining in JavaScript is used to return <code>undefined</code> for accessing an object property that doesn't exist and whose parent property is <em><strong>nullish (null or undefined).</strong></em></p><p>If you are unaware that property exists or not and you want to avoid the error that's being thrown, you may want to use optional chaining to get around with it.</p><p>In this article, you’ll learn how and when to use Optional Chaining. You’ll also learn when not to use Optional Chaining in JavaScript.</p><h2 id=\"how-it-works\">How it Works</h2><p>First, let's explore what can go wrong when accessing a property in a nested object.</p><pre><code class=\"language-js\">let person = {\n    name: \"Murtuza\",\n    work: () =&gt; {\n        return \"Software Developer\"\n    },\n    socials: {\n        github: {\n            username: \"murtuzaalisurti\",\n            link: \"https://github.com/murtuzaalisurti\",\n            proUser: {\n                is: 'no'\n            }\n        },\n        linkedin: {\n            username: \"murtuzaali-surti\",\n            link: \"https://linkedin.com/in/murtuzaali-surti\"\n        },\n        twitter: {\n            username: \"murtuza_surti\",\n            link: \"https://twitter.com/murtuza_surti\"\n        }\n    }\n}</code></pre><p>In the above object, let's try to access the property link nested within the property website. Can we?</p><pre><code class=\"language-js\">console.log(person.website.link); //an error will be thrown</code></pre><p>We get an error,</p><pre><code class=\"language-js\">Cannot read property 'link' of undefined</code></pre><p>The property website doesn't exist in the object!</p><p>But, let's add the property <code>website</code> to the root object and set the value of it as <code>null</code>.</p><pre><code class=\"language-js\">website: null</code></pre><p>Let's check if this works,</p><pre><code class=\"language-js\">console.log(person.website.link); //an error will be thrown</code></pre><p>We get a similar error,</p><pre><code class=\"language-js\">Cannot read property 'link' of null</code></pre><p>As mentioned in the above definition, we can use optional chaining to handle these types of errors! Here's how we can do that.</p><h2 id=\"syntax\">Syntax</h2><pre><code class=\"language-js\">// website: property to validate\n// link: property to access\nwebsite?.link</code></pre><p>The operator ?. will check if the property on its left-hand side is null or undefined and if that's the case, then it will simply return undefined without throwing any errors. In other words, this is also known as short-circuiting. Otherwise, it will return the value of the property on its right-hand side.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://backend.shahednasser.com/content/images/2022/04/rUOx6qB.gif\" class=\"kg-image\" alt loading=\"lazy\" width=\"1141\" height=\"139\"></figure><p>Not just that, you can also invoke a function if it exists using optional chaining.</p><pre><code class=\"language-js\">person.work?.(args)</code></pre><p>Also, you can access properties using [] brackets.</p><pre><code class=\"language-js\">person.socials.github?.[\"username\"]</code></pre><h2 id=\"what-you-can%E2%80%99t-do\">What You Can’t Do</h2><ul><li>You cannot apply optional chaining to the objects that are not declared yet. For example:</li></ul><pre><code class=\"language-js\">object?.prop // object is not defined</code></pre><p>We haven't declared <code>object</code>, thus it will throw an error.</p><ul><li>You cannot assign a value to this expression. In other words, the optional chaining expression can't be on the left-hand side.</li></ul><p>The below code is not valid.</p><pre><code class=\"language-js\">person.socials.github?.[\"username\"] = \"name\" // not valid</code></pre><h2 id=\"when-to-use-optional-chaining\">When to Use Optional Chaining?</h2><p>It's important to note that optional chaining should not be used when it's not necessary to do so. Only use optional chaining when you know that the property that you want to access is optional and not mandatory.</p><p>For example, in our object <code>person</code>, we can keep the social media platforms optional, so we are not sure if a user has a social media account or not on a particular platform. For that, we can use optional chaining to check if a user has a social media account on a particular platform and if it exists, get the username.</p><pre><code class=\"language-js\">person.socials.github?.[\"username\"]</code></pre><p>But, if we place the optional chaining operator at the root object, then it doesn't make any sense because the root object i.e. person must exist and if it doesn't exist, we should get an error!</p><h2 id=\"conclusion\">Conclusion</h2><p>In this article, you learned what Optional Chaining in JavaScript is, how it works when to use it, and when not to use it.</p><p>To learn more about how Optional Chaining works, make sure to check out the <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#specifications\">MDN documentation</a> on it for more details.</p>","url":"https://backend.shahednasser.com/optional-chaining-in-javascript/","canonical_url":"https://syntackle.live/blog/optional-chaining-in-javascript-D6SuXGtu0-K5hhtZUqqc/","uuid":"8880895a-5b7b-4f7d-9923-ef9d1b51dbb8","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"6248411d39840e1ac2874da6","reading_time":3,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"<p>Optional Chaining in JavaScript is used to return <code class=\"language-text\">undefined</code> for accessing an object property that doesn't exist and whose parent property is <em><strong>nullish (null or undefined).</strong></em></p><p>If you are unaware that property exists or not and you want to avoid the error that's being thrown, you may want to use optional chaining to get around with it.</p><p>In this article, you’ll learn how and when to use Optional Chaining. You’ll also learn when not to use Optional Chaining in JavaScript.</p><h2 id=\"how-it-works\">How it Works</h2><p>First, let's explore what can go wrong when accessing a property in a nested object.</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">let</span> person <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Murtuza\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token function-variable function\">work</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token string\">\"Software Developer\"</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">socials</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">github</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">username</span><span class=\"token operator\">:</span> <span class=\"token string\">\"murtuzaalisurti\"</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">link</span><span class=\"token operator\">:</span> <span class=\"token string\">\"https://github.com/murtuzaalisurti\"</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">proUser</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token literal-property property\">is</span><span class=\"token operator\">:</span> <span class=\"token string\">'no'</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">linkedin</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">username</span><span class=\"token operator\">:</span> <span class=\"token string\">\"murtuzaali-surti\"</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">link</span><span class=\"token operator\">:</span> <span class=\"token string\">\"https://linkedin.com/in/murtuzaali-surti\"</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">twitter</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">username</span><span class=\"token operator\">:</span> <span class=\"token string\">\"murtuza_surti\"</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">link</span><span class=\"token operator\">:</span> <span class=\"token string\">\"https://twitter.com/murtuza_surti\"</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div><p>In the above object, let's try to access the property link nested within the property website. Can we?</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>website<span class=\"token punctuation\">.</span>link<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//an error will be thrown</span></code></pre></div><p>We get an error,</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">Cannot read property <span class=\"token string\">'link'</span> <span class=\"token keyword\">of</span> <span class=\"token keyword\">undefined</span></code></pre></div><p>The property website doesn't exist in the object!</p><p>But, let's add the property <code class=\"language-text\">website</code> to the root object and set the value of it as <code class=\"language-text\">null</code>.</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token literal-property property\">website</span><span class=\"token operator\">:</span> <span class=\"token keyword\">null</span></code></pre></div><p>Let's check if this works,</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>website<span class=\"token punctuation\">.</span>link<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//an error will be thrown</span></code></pre></div><p>We get a similar error,</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">Cannot read property <span class=\"token string\">'link'</span> <span class=\"token keyword\">of</span> <span class=\"token keyword\">null</span></code></pre></div><p>As mentioned in the above definition, we can use optional chaining to handle these types of errors! Here's how we can do that.</p><h2 id=\"syntax\">Syntax</h2><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">// website: property to validate</span>\n<span class=\"token comment\">// link: property to access</span>\nwebsite<span class=\"token operator\">?.</span>link</code></pre></div><p>The operator ?. will check if the property on its left-hand side is null or undefined and if that's the case, then it will simply return undefined without throwing any errors. In other words, this is also known as short-circuiting. Otherwise, it will return the value of the property on its right-hand side.</p><figure class=\"kg-card kg-image-card\"><img src=\"https://backend.shahednasser.com/content/images/2022/04/rUOx6qB.gif\" class=\"kg-image\" alt=\"\" loading=\"lazy\" width=\"1141\" height=\"139\"></figure><p>Not just that, you can also invoke a function if it exists using optional chaining.</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">person<span class=\"token punctuation\">.</span>work<span class=\"token operator\">?.</span><span class=\"token punctuation\">(</span>args<span class=\"token punctuation\">)</span></code></pre></div><p>Also, you can access properties using [] brackets.</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">person<span class=\"token punctuation\">.</span>socials<span class=\"token punctuation\">.</span>github<span class=\"token operator\">?.</span><span class=\"token punctuation\">[</span><span class=\"token string\">\"username\"</span><span class=\"token punctuation\">]</span></code></pre></div><h2 id=\"what-you-can%E2%80%99t-do\">What You Can’t Do</h2><ul><li>You cannot apply optional chaining to the objects that are not declared yet. For example:</li></ul><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">object<span class=\"token operator\">?.</span>prop <span class=\"token comment\">// object is not defined</span></code></pre></div><p>We haven't declared <code class=\"language-text\">object</code>, thus it will throw an error.</p><ul><li>You cannot assign a value to this expression. In other words, the optional chaining expression can't be on the left-hand side.</li></ul><p>The below code is not valid.</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">person<span class=\"token punctuation\">.</span>socials<span class=\"token punctuation\">.</span>github<span class=\"token operator\">?.</span><span class=\"token punctuation\">[</span><span class=\"token string\">\"username\"</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token string\">\"name\"</span> <span class=\"token comment\">// not valid</span></code></pre></div><h2 id=\"when-to-use-optional-chaining\">When to Use Optional Chaining?</h2><p>It's important to note that optional chaining should not be used when it's not necessary to do so. Only use optional chaining when you know that the property that you want to access is optional and not mandatory.</p><p>For example, in our object <code class=\"language-text\">person</code>, we can keep the social media platforms optional, so we are not sure if a user has a social media account or not on a particular platform. For that, we can use optional chaining to check if a user has a social media account on a particular platform and if it exists, get the username.</p><div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">person<span class=\"token punctuation\">.</span>socials<span class=\"token punctuation\">.</span>github<span class=\"token operator\">?.</span><span class=\"token punctuation\">[</span><span class=\"token string\">\"username\"</span><span class=\"token punctuation\">]</span></code></pre></div><p>But, if we place the optional chaining operator at the root object, then it doesn't make any sense because the root object i.e. person must exist and if it doesn't exist, we should get an error!</p><h2 id=\"conclusion\">Conclusion</h2><p>In this article, you learned what Optional Chaining in JavaScript is, how it works when to use it, and when not to use it.</p><p>To learn more about how Optional Chaining works, make sure to check out the <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#specifications\">MDN documentation</a> on it for more details.</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Optional Chaining in JavaScript is used to return "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" for accessing an object property that doesn't exist and whose parent property is "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"nullish (null or undefined)."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are unaware that property exists or not and you want to avoid the error that's being thrown, you may want to use optional chaining to get around with it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this article, you’ll learn how and when to use Optional Chaining. You’ll also learn when not to use Optional Chaining in JavaScript."}]},{"type":"element","tagName":"h2","properties":{"id":"how-it-works"},"children":[{"type":"text","value":"How it Works"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, let's explore what can go wrong when accessing a property in a nested object."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" person "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Murtuza\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"work"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Software Developer\""}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"socials"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"github"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"username"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"murtuzaalisurti\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"link"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"https://github.com/murtuzaalisurti\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"proUser"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n                "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"is"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'no'"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"linkedin"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"username"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"murtuzaali-surti\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"link"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"https://linkedin.com/in/murtuzaali-surti\""}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"twitter"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"username"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"murtuza_surti\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n            "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"link"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"https://twitter.com/murtuza_surti\""}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the above object, let's try to access the property link nested within the property website. Can we?"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"person"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"website"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"link"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//an error will be thrown"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We get an error,"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"Cannot read property "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'link'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"of"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"undefined"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The property website doesn't exist in the object!"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"But, let's add the property "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"website"}]},{"type":"text","value":" to the root object and set the value of it as "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"website"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's check if this works,"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"person"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"website"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"link"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//an error will be thrown"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We get a similar error,"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"Cannot read property "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'link'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"of"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As mentioned in the above definition, we can use optional chaining to handle these types of errors! Here's how we can do that."}]},{"type":"element","tagName":"h2","properties":{"id":"syntax"},"children":[{"type":"text","value":"Syntax"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// website: property to validate"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// link: property to access"}]},{"type":"text","value":"\nwebsite"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?."}]},{"type":"text","value":"link"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The operator ?. will check if the property on its left-hand side is null or undefined and if that's the case, then it will simply return undefined without throwing any errors. In other words, this is also known as short-circuiting. Otherwise, it will return the value of the property on its right-hand side."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/04/rUOx6qB.gif","className":["kg-image"],"alt":"","loading":"lazy","width":1141,"height":139},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Not just that, you can also invoke a function if it exists using optional chaining."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"person"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"work"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"args"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Also, you can access properties using [] brackets."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"person"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"socials"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"github"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"username\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"what-you-can%E2%80%99t-do"},"children":[{"type":"text","value":"What You Can’t Do"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"You cannot apply optional chaining to the objects that are not declared yet. For example:"}]}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"object"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?."}]},{"type":"text","value":"prop "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// object is not defined"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We haven't declared "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"object"}]},{"type":"text","value":", thus it will throw an error."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"You cannot assign a value to this expression. In other words, the optional chaining expression can't be on the left-hand side."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The below code is not valid."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"person"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"socials"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"github"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"username\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"name\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// not valid"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"when-to-use-optional-chaining"},"children":[{"type":"text","value":"When to Use Optional Chaining?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It's important to note that optional chaining should not be used when it's not necessary to do so. Only use optional chaining when you know that the property that you want to access is optional and not mandatory."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, in our object "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"person"}]},{"type":"text","value":", we can keep the social media platforms optional, so we are not sure if a user has a social media account or not on a particular platform. For that, we can use optional chaining to check if a user has a social media account on a particular platform and if it exists, get the username."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"person"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"socials"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"github"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"username\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"But, if we place the optional chaining operator at the root object, then it doesn't make any sense because the root object i.e. person must exist and if it doesn't exist, we should get an error!"}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this article, you learned what Optional Chaining in JavaScript is, how it works when to use it, and when not to use it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To learn more about how Optional Chaining works, make sure to check out the "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#specifications"},"children":[{"type":"text","value":"MDN documentation"}]},{"type":"text","value":" on it for more details."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"how-it-works","heading":"How it Works"},{"id":"syntax","heading":"Syntax"},{"id":"what-you-can%E2%80%99t-do","heading":"What You Can’t Do"},{"id":"when-to-use-optional-chaining","heading":"When to Use Optional Chaining?"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"Optional-Chaining-in-JavaScript.jpg","publicURL":"/static/d9ed2e7558824339cb9d44e26a029146/Optional-Chaining-in-JavaScript.jpg","imageMeta":{"width":1560,"height":876},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3VAD/8QAFhABAQEAAAAAAAAAAAAAAAAAEQAg/9oACAEBAAEFAmc//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhABAQEAAAAAAAAAAAAAAAAAMQAg/9oACAEBAAY/AiM//8QAGhAAAgIDAAAAAAAAAAAAAAAAABEBUSAhQf/aAAgBAQABPyFrjXI3xYf/2gAMAwEAAgADAAAAEODP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHRABAAEDBQAAAAAAAAAAAAAAAREAICFBYaHB0f/aAAgBAQABPxBkQWNZM81h7T2kiVbGz//Z","aspectRatio":1.7857142857142858,"src":"/static/d9ed2e7558824339cb9d44e26a029146/ea4ab/Optional-Chaining-in-JavaScript.jpg","srcSet":"/static/d9ed2e7558824339cb9d44e26a029146/477ba/Optional-Chaining-in-JavaScript.jpg 175w,\n/static/d9ed2e7558824339cb9d44e26a029146/06776/Optional-Chaining-in-JavaScript.jpg 350w,\n/static/d9ed2e7558824339cb9d44e26a029146/ea4ab/Optional-Chaining-in-JavaScript.jpg 700w,\n/static/d9ed2e7558824339cb9d44e26a029146/3055e/Optional-Chaining-in-JavaScript.jpg 1050w,\n/static/d9ed2e7558824339cb9d44e26a029146/eff08/Optional-Chaining-in-JavaScript.jpg 1400w,\n/static/d9ed2e7558824339cb9d44e26a029146/81a53/Optional-Chaining-in-JavaScript.jpg 1560w","srcWebp":"/static/d9ed2e7558824339cb9d44e26a029146/89afa/Optional-Chaining-in-JavaScript.webp","srcSetWebp":"/static/d9ed2e7558824339cb9d44e26a029146/9fca7/Optional-Chaining-in-JavaScript.webp 175w,\n/static/d9ed2e7558824339cb9d44e26a029146/37a4e/Optional-Chaining-in-JavaScript.webp 350w,\n/static/d9ed2e7558824339cb9d44e26a029146/89afa/Optional-Chaining-in-JavaScript.webp 700w,\n/static/d9ed2e7558824339cb9d44e26a029146/78e7a/Optional-Chaining-in-JavaScript.webp 1050w,\n/static/d9ed2e7558824339cb9d44e26a029146/03d34/Optional-Chaining-in-JavaScript.webp 1400w,\n/static/d9ed2e7558824339cb9d44e26a029146/f5845/Optional-Chaining-in-JavaScript.webp 1560w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}]}},"pageContext":{"slug":"best-platforms-to-learn-programming-in-2021","prev":"my-horrible-experience-with-freelancer-com","next":"if-youre-a-developer-you-need-to-know-this","tag":"beginner","limit":3,"skip":0,"primaryTagCount":62,"collectionPaths":{}}},"staticQueryHashes":["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}