![](\"https://res-5.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/chrome-qr-feature.png\")
In Chrome's new release for Android and Desktop, you can now generate a QR code for any URL or Image with one click. This feature was available before as an experimental feature.
On your laptop or Android phone, go to any URL, then click on the URL box and you will see a new QR icon
Once you click on the QR icon, You will see the QR code with your URL, and you can choose to download the QR code. It will be downloaded as PNG.
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/Chrome-QR-Feature-2.png\")
Then you can just share the QR Code with anyone you want or any social media platform!
To get a QR Code for any image, right click on the image then click \"Create QR code for this image\"
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/chrome-qr-image.png\")
Then a pop up will show with the QR Code for the image. You can download it as well.
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/chrome-qr-image-2.png\")
In Chrome's new release for Android and Desktop, you can now generate a QR code for any URL or Image with one click. This feature was available before as an experimental feature.
On your laptop or Android phone, go to any URL, then click on the URL box and you will see a new QR icon
Once you click on the QR icon, You will see the QR code with your URL, and you can choose to download the QR code. It will be downloaded as PNG.
Then you can just share the QR Code with anyone you want or any social media platform!
To get a QR Code for any image, right click on the image then click \"Create QR code for this image\"
Then a pop up will show with the QR Code for the image. You can download it as well.
In Chrome's new release for Android and Desktop, you can now generate a QR code for any URL or Image with one click. This feature was available before as an experimental feature.
On your laptop or Android phone, go to any URL, then click on the URL box and you will see a new QR icon
Once you click on the QR icon, You will see the QR code with your URL, and you can choose to download the QR code. It will be downloaded as PNG.
Then you can just share the QR Code with anyone you want or any social media platform!
To get a QR Code for any image, right click on the image then click \"Create QR code for this image\"
Then a pop up will show with the QR Code for the image. You can download it as well.
In Chrome's new release for Android and Desktop, you can now generate a QR code for any URL or Image with one click. This feature was available before as an experimental feature.
On your laptop or Android phone, go to any URL, then click on the URL box and you will see a new QR icon
Once you click on the QR icon, You will see the QR code with your URL, and you can choose to download the QR code. It will be downloaded as PNG.
Then you can just share the QR Code with anyone you want or any social media platform!
To get a QR Code for any image, right click on the image then click \"Create QR code for this image\"
Then a pop up will show with the QR Code for the image. You can download it as well.
A few years ago, I discovered Atom, an open source text and source code editor developed by GitHub. I was so amazed by it as it was lightweight and fully customizable. It quickly became my favorite code editor.
Fast forward to now, and I am using Visual Studio Code, a free source code editor developed by Microsoft. This might seem like a normal change, however, I remember that while I was using Atom my colleague and I were having a discussion and I strictly stated \"I'm not a fan of Microsoft products.\"
So what made me switch from Atom to VS Code?
When I first started using Atom, it was fast and as I mentioned lightweight. However, when you compare it to VS Code, it's load time can be pretty slow. Especially if you're opening somewhat large or long files. Atom can get pretty laggy and the wait becomes annoying.
It should be noted that both editors are built on Electron, a framework that helps you built cross-platform desktop app using HTML, Javascript, and CSS. There's a lot of dispute when it comes to Electron's speed, so you'd think that both editors would be inherently slow. However, it seems that VS Code sets an example of how to use Electron without the lag.
Atom's main charm is that it's customizable. You can add whatever extensions and linters and anything you want. However, especially if you're a beginner in a language and not sure what kind of extensions or linters you might want, it can be a hassle using it. Even if you do find the extensions you need, there's no guarantee that these extensions will do the job well (I'll talk about extensions next).
Not only does VS Code come ready with support, debuggers and linters for most popular languages, but when you use a new or not so popular language, it recommends the extension you need right away. It saves you time and makes sure you are using what you need in your development.
Extensions in Atom are tricky. You'll find really good extensions that will be helpful in your development process, but you'll also find extensions that will create more bugs in your editor and makes your life a living hell. This is understandable, as most extensions are made by the open source community, so some extensions might be outdated or get discontinued, or just have a lot of bugs.
The more extensions you add to Atom, the more you'll face bugs while using it and hassles. And you can't really use Atom without loads of extensions, since using Atom as it is is like walking in the dark.
As for VS Code, I have been using it for a while now and I have yet to face any problems with its extensions. Every extension that I have added was helpful and very much needed. Nothing affected the quality of the editor.
Debugging in Atom is, again, dependent on what extensions you add. There's nothing built in the editor itself. However, in VS Code, your access to debugging is easier. There's the debugging tab ready for you on the left and it provides what you need based on the environment of the project you're working on. This is another part of the out of the box features in VS Code that Atom lacks in.
With time, Atom became an annoyance to me. Every time I needed to add an extension, the entire editor seemed to be crumbling. The load time was slow and the performance got worse. However, VS Code is proving to be a stable editor that can handle your main development need, while still keeping the performance optimal.
","url":"https://backend.shahednasser.com/why-i-switched-from-atom-to-vs-code/","canonical_url":null,"uuid":"7cd11ddf-6767-492c-89cc-6e233d4b23b7","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"6022588499216d001edfd530","reading_time":3,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"A few years ago, I discovered Atom, an open source text and source code editor developed by GitHub. I was so amazed by it as it was lightweight and fully customizable. It quickly became my favorite code editor.
Fast forward to now, and I am using Visual Studio Code, a free source code editor developed by Microsoft. This might seem like a normal change, however, I remember that while I was using Atom my colleague and I were having a discussion and I strictly stated \"I'm not a fan of Microsoft products.\"
So what made me switch from Atom to VS Code?
When I first started using Atom, it was fast and as I mentioned lightweight. However, when you compare it to VS Code, it's load time can be pretty slow. Especially if you're opening somewhat large or long files. Atom can get pretty laggy and the wait becomes annoying.
It should be noted that both editors are built on Electron, a framework that helps you built cross-platform desktop app using HTML, Javascript, and CSS. There's a lot of dispute when it comes to Electron's speed, so you'd think that both editors would be inherently slow. However, it seems that VS Code sets an example of how to use Electron without the lag.
Atom's main charm is that it's customizable. You can add whatever extensions and linters and anything you want. However, especially if you're a beginner in a language and not sure what kind of extensions or linters you might want, it can be a hassle using it. Even if you do find the extensions you need, there's no guarantee that these extensions will do the job well (I'll talk about extensions next).
Not only does VS Code come ready with support, debuggers and linters for most popular languages, but when you use a new or not so popular language, it recommends the extension you need right away. It saves you time and makes sure you are using what you need in your development.
Extensions in Atom are tricky. You'll find really good extensions that will be helpful in your development process, but you'll also find extensions that will create more bugs in your editor and makes your life a living hell. This is understandable, as most extensions are made by the open source community, so some extensions might be outdated or get discontinued, or just have a lot of bugs.
The more extensions you add to Atom, the more you'll face bugs while using it and hassles. And you can't really use Atom without loads of extensions, since using Atom as it is is like walking in the dark.
As for VS Code, I have been using it for a while now and I have yet to face any problems with its extensions. Every extension that I have added was helpful and very much needed. Nothing affected the quality of the editor.
Debugging in Atom is, again, dependent on what extensions you add. There's nothing built in the editor itself. However, in VS Code, your access to debugging is easier. There's the debugging tab ready for you on the left and it provides what you need based on the environment of the project you're working on. This is another part of the out of the box features in VS Code that Atom lacks in.
With time, Atom became an annoyance to me. Every time I needed to add an extension, the entire editor seemed to be crumbling. The load time was slow and the performance got worse. However, VS Code is proving to be a stable editor that can handle your main development need, while still keeping the performance optimal.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A few years ago, I discovered "},{"type":"element","tagName":"a","properties":{"href":"https://atom.io/"},"children":[{"type":"text","value":"Atom"}]},{"type":"text","value":", an open source text and source code editor developed by "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":". I was so amazed by it as it was lightweight and fully customizable. It quickly became my favorite code editor."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Fast forward to now, and I am using "},{"type":"element","tagName":"a","properties":{"href":"https://code.visualstudio.com/"},"children":[{"type":"text","value":"Visual Studio Code"}]},{"type":"text","value":", a free source code editor developed by "},{"type":"element","tagName":"a","properties":{"href":"https://www.microsoft.com/en-lb"},"children":[{"type":"text","value":"Microsoft"}]},{"type":"text","value":". This might seem like a normal change, however, I remember that while I was using Atom my colleague and I were having a discussion and I strictly stated \"I'm not a fan of Microsoft products.\""}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So what made me switch from Atom to VS Code?"}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"performance"},"children":[{"type":"text","value":"Performance"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When I first started using Atom, it was fast and as I mentioned lightweight. However, when you compare it to VS Code, it's load time can be pretty slow. Especially if you're opening somewhat large or long files. Atom can get pretty laggy and the wait becomes annoying."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It should be noted that both editors are built on "},{"type":"element","tagName":"a","properties":{"href":"https://www.electronjs.org/"},"children":[{"type":"text","value":"Electron"}]},{"type":"text","value":", a framework that helps you built cross-platform desktop app using HTML, Javascript, and CSS. There's a lot of dispute when it comes to Electron's speed, so you'd think that both editors would be inherently slow. However, it seems that VS Code sets an example of how to use Electron without the lag."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"out-of-the-box-features"},"children":[{"type":"text","value":"Out of the Box Features"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Atom's main charm is that it's customizable. You can add whatever extensions and linters and anything you want. However, especially if you're a beginner in a language and not sure what kind of extensions or linters you might want, it can be a hassle using it. Even if you do find the extensions you need, there's no guarantee that these extensions will do the job well (I'll talk about extensions next). "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Not only does VS Code come ready with support, debuggers and linters for most popular languages, but when you use a new or not so popular language, it recommends the extension you need right away. It saves you time and makes sure you are using what you need in your development."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"extension"},"children":[{"type":"text","value":"Extension"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Extensions in Atom are tricky. You'll find really good extensions that will be helpful in your development process, but you'll also find extensions that will create more bugs in your editor and makes your life a living hell. This is understandable, as most extensions are made by the open source community, so some extensions might be outdated or get discontinued, or just have a lot of bugs. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The more extensions you add to Atom, the more you'll face bugs while using it and hassles. And you can't really use Atom without loads of extensions, since using Atom as it is is like walking in the dark. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As for VS Code, I have been using it for a while now and I have yet to face any problems with its extensions. Every extension that I have added was helpful and very much needed. Nothing affected the quality of the editor."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"debugging"},"children":[{"type":"text","value":"Debugging"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Debugging in Atom is, again, dependent on what extensions you add. There's nothing built in the editor itself. However, in VS Code, your access to debugging is easier. There's the debugging tab ready for you on the left and it provides what you need based on the environment of the project you're working on. This is another part of the out of the box features in VS Code that Atom lacks in."}]},{"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":"With time, Atom became an annoyance to me. Every time I needed to add an extension, the entire editor seemed to be crumbling. The load time was slow and the performance got worse. However, VS Code is proving to be a stable editor that can handle your main development need, while still keeping the performance optimal."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"performance","heading":"Performance"},{"id":"out-of-the-box-features","heading":"Out of the Box Features"},{"id":"extension","heading":"Extension"},{"id":"debugging","heading":"Debugging"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1498050108023-c5249f4df085.jpg","publicURL":"/static/f6b4d4620d213392f2a6bbbba17b86b5/photo-1498050108023-c5249f4df085.jpg","imageMeta":{"width":2000,"height":1331},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAWZHbZpCj//EABsQAAIBBQAAAAAAAAAAAAAAAAIDAQAEEhMh/9oACAEBAAEFAgZihbRMqtp2itIhMv7/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABsQAAICAwEAAAAAAAAAAAAAAAACAREQITFh/9oACAEBAAY/AvYKhawyNwuDSwf/xAAZEAADAQEBAAAAAAAAAAAAAAAAAREhQVH/2gAIAQEAAT8hRfYKouJjaVcJUGvM9ZJ1Ej//2gAMAwEAAgADAAAAEOsf/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEh/9oACAEDAQE/ENV//8QAFREBAQAAAAAAAAAAAAAAAAAAECH/2gAIAQIBAT8Qh//EABkQAQEBAQEBAAAAAAAAAAAAAAERACFB8P/aAAgBAQABPxAa68qTzrlLgfQrXAEEDhiH2BtfvMlNoYIhmPaTqt3/2Q==","aspectRatio":1.5086206896551724,"src":"/static/f6b4d4620d213392f2a6bbbba17b86b5/ea4ab/photo-1498050108023-c5249f4df085.jpg","srcSet":"/static/f6b4d4620d213392f2a6bbbba17b86b5/477ba/photo-1498050108023-c5249f4df085.jpg 175w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/06776/photo-1498050108023-c5249f4df085.jpg 350w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/ea4ab/photo-1498050108023-c5249f4df085.jpg 700w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/3055e/photo-1498050108023-c5249f4df085.jpg 1050w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/eff08/photo-1498050108023-c5249f4df085.jpg 1400w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/4e5f3/photo-1498050108023-c5249f4df085.jpg 2000w","srcWebp":"/static/f6b4d4620d213392f2a6bbbba17b86b5/89afa/photo-1498050108023-c5249f4df085.webp","srcSetWebp":"/static/f6b4d4620d213392f2a6bbbba17b86b5/9fca7/photo-1498050108023-c5249f4df085.webp 175w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/37a4e/photo-1498050108023-c5249f4df085.webp 350w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/89afa/photo-1498050108023-c5249f4df085.webp 700w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/78e7a/photo-1498050108023-c5249f4df085.webp 1050w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/03d34/photo-1498050108023-c5249f4df085.webp 1400w,\n/static/f6b4d4620d213392f2a6bbbba17b86b5/49d6b/photo-1498050108023-c5249f4df085.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__6127ba1b3ed159214d382e83","title":"How I Improved My CSS Skills","slug":"how-i-improved-my-css-skills","featured":false,"feature_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1500933964569-522caa01ca2e.jpg","excerpt":"CSS for me was what I couldn't do with Bootstrap. So, I decided I'd up my game by looking up challenges online.","custom_excerpt":"CSS for me was what I couldn't do with Bootstrap. So, I decided I'd up my game by looking up challenges online.","visibility":"public","created_at_pretty":"5 Feb 2021","published_at_pretty":"6 Feb 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-02-05T13:54:31.000+00:00","published_at":"2021-02-06T10:47:03.000+00:00","updated_at":"2021-08-26T17:49:20.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":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1610986603166-f78428624e76-2.jpeg","publicURL":"/static/2e4062ead6b64acea03c5c5ba3437c96/photo-1610986603166-f78428624e76-2.jpeg","imageMeta":{"width":2000,"height":1352},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABymIKxiv/xAAaEAACAgMAAAAAAAAAAAAAAAAAEQECEBIh/9oACAEBAAEFAqolalUcx//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AUf/xAAZEAACAwEAAAAAAAAAAAAAAAAQIQABEYH/2gAIAQEABj8CcVd0M//EABsQAAIDAAMAAAAAAAAAAAAAAAABESExEFGB/9oACAEBAAE/IdKGJM+nDWSDSdkH/9oADAMBAAIAAwAAABCL7//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EAY//8QAGhABAQADAQEAAAAAAAAAAAAAAREAITEQYf/aAAgBAQABPxAsEuSsxwBHaV8nMjhCkPIbwwjTs8f/2Q==","aspectRatio":1.4772727272727273,"src":"/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg","srcSet":"/static/2e4062ead6b64acea03c5c5ba3437c96/65d8c/photo-1610986603166-f78428624e76-2.jpg 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/c5f21/photo-1610986603166-f78428624e76-2.jpg 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/81a53/photo-1610986603166-f78428624e76-2.jpg 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/4e5f3/photo-1610986603166-f78428624e76-2.jpg 2000w","srcWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp","srcSetWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/dc8f3/photo-1610986603166-f78428624e76-2.webp 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/2db4b/photo-1610986603166-f78428624e76-2.webp 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/f5845/photo-1610986603166-f78428624e76-2.webp 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/49d6b/photo-1610986603166-f78428624e76-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"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},{"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":"Two years ago, I had just gotten employed at my job and we were going through an\nin between projects and contacts phase. Basically, as a developer, I was bored. \n\nI didn't want to waste my time, so I decided to improve my CSS skills. Back then\nCSS for me was what I couldn't do with Bootstrap. It was just simple properties\nI added here and there. So, I decided I'd up my game by looking up challenges\nonline.\n\nSuggested Read: CSS Variables and How to Use Them\n[https://blog.shahednasser.com/css-variables-and-how-to-use-them/]\n\n\n--------------------------------------------------------------------------------\n\nCodepen Challenges\nThe first place I went to for challenges was Codepen\n[https://codepen.io/challenges]. Codepen has a new theme of challenges every\nmonth, and every week of that month there would be a challenge revolving around\nthe theme.\n\nThe first challenge I did was for for a ghosts challenge (It was October at the\ntime and the theme was Halloween).\n\n See the Pen Nice Ghost [https://codepen.io/shahednasser/pen/NOGYLO] by Shahed\nNasser (@shahednasser [https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nPretty lame to be completely honest. But, with time I moved on to something like\nthis:\n\n See the Pen Tiger Pattern on Hover List - #CodePenChallenge\n[https://codepen.io/shahednasser/pen/xQpBJb] by Shahed Nasser (@shahednasser\n[https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nAnd this\n\n See the Pen Focus Table / Hover Table\n[https://codepen.io/shahednasser/pen/EdyrRX] by Shahed Nasser (@shahednasser\n[https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nLooking back at it, I found these two so hard to do. My skills were so much\nlacking that designing a table with a hover effect seemed like it was too much.\n\nCodepen was not enough though, as the challenges were just once a week and I\nneeded to do more. So, I had to look through other challenges online.\n\n\n--------------------------------------------------------------------------------\n\nDaily CSS Images\nDaily CSS Images\n[https://gist.github.com/MeFoDy/067daabf9c3ea0e554f045fc067e23b0] takes a more\nfun approach at learning CSS. Basically, everyday you create a certain object or\nanimal, but with CSS. At the time I thought \"how would learning how to make a\nbear be helpful?\" but after time I realized that it's not about what you were\nmaking, it's about how you make it and what you learn in the process.\n\nSo, I made a bear with CSS.\n\n See the Pen CSS Bear Cub - #DailyCSSImages\n[https://codepen.io/shahednasser/pen/bmgZdO] by Shahed Nasser (@shahednasser\n[https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nI learned how to use rotate and transform through this one. I remember I was so\nconfused trying to make the ears in particular. After I was done though, I felt\nso proud of it.\n\nAnother one I did was a clock. Now this one I needed a tutorial to help me\nbecause I didn't know how to make the clock hands move without Javascript.\nBefore doing this, I thought it was impossible to do it with only CSS.\n\n See the Pen CSS Alarm Clock - #DailyCSSImages Challenge\n[https://codepen.io/shahednasser/pen/wYpJdP] by Shahed Nasser (@shahednasser\n[https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nThrough making this one it was my first time even hearing about transform-origin\n. I also expanded my knowledge a lot with using transform and animations. This\none was a big step up for me.\n\nI also did an elephant, a beaver, a jellyfish, and a rose. Daily CSS Images\nChallenge helped me understand more about animations and transforms and\nperspective in CSS. \n\nDaily CSS Images Challenge also helped me step up my CodePen Challenges game!\n\n See the Pen CodePen Challenge - Panda\n[https://codepen.io/shahednasser/pen/VVPYLK] by Shahed Nasser (@shahednasser\n[https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nAlthough these challenges helped, I needed to move on to something more\nrealistic. A challenge where I would make something that I would actually make\nin a real project.\n\n\n--------------------------------------------------------------------------------\n\n100 Days CSS Challenge\n100 Days CSS Challenge [https://100dayscss.com/] was my favorite challenge to be\na part of. First off, their website featured the works of developers who\nparticipated on CodePen, so it was a nice boost for me. Also, their challenges\nlooked so beautiful to me, and in a lot of cases, something I'd love to do on a\nnext project of mine.\n\nThe first challenge I did was this:\n\n See the Pen #100daysCSSChallenge [https://codepen.io/shahednasser/pen/wYJxvx] \nby Shahed Nasser (@shahednasser [https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nA simple grid of images that shows a heart on hover. Yes, it is simple, but\nagain because I lacked in my skills it was helpful.\n\nI also did this Search bar:\n\n See the Pen Search Bar - 100 Days CSS Challenge\n[https://codepen.io/shahednasser/pen/XxOPOQ] by Shahed Nasser (@shahednasser\n[https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nAnd this counter:\n\n See the Pen Counter - 100 Days CSS Challenge\n[https://codepen.io/shahednasser/pen/PygOzB] by Shahed Nasser (@shahednasser\n[https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nAgain, all simple concepts, but it was still really helpful. I learned how to\nmake prettier designs. CSS isn't just about knowing how to do something or\nmemorizing the properties, it's also about utilizing what you know to make a\nvisually pleasing design.\n\nThese challenges also had Javascript in them so it was helpful to practice\nJavascript as well.\n\n\n--------------------------------------------------------------------------------\n\nCodevember\nAnother challenge I took on as well was Codevember [http://codevember.xyz/].\nCodevember ran from 2016 till 2019, and it would show a list of challenges for\nevery day in November.\n\nCodevember's challenges were simple. Each day would have a keyword and you have\nto create something that relates to it. This helps shift  your perspective from\njust coding with CSS to using your imagination to find an idea, then think how\nwould I bring this idea to life with CSS.\n\nSo, at first when the concept was Infinity, I took a pretty simple approach to\nit:\n\n See the Pen #codevember - 01 - infinity\n[https://codepen.io/shahednasser/pen/eQZGbX] by Shahed Nasser (@shahednasser\n[https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nBut when the concept was Web, I made a spider sitting on a web (with the help of\nSVG):\n\n See the Pen #codevember - 03 - Web [https://codepen.io/shahednasser/pen/pQNRKO] \nby Shahed Nasser (@shahednasser [https://codepen.io/shahednasser])\non CodePen [https://codepen.io].\n\nIt helped me think more creatively and then try to find a way to do it with CSS,\nwhile maintaining what I learned from 100 Days CSS Challenge to make it visually\npleasing.\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nEveryone knows that to improve your skill in any programming language, you need\nto practice. Even if it seems hard in the beginning, with time you will improve\nand you will learn new concepts and ways of thinking as well. Whether it's CSS\nor any other programming language, look online for motivating challenges to keep\nyou going and practicing to become a better developer.","html":"Two years ago, I had just gotten employed at my job and we were going through an in between projects and contacts phase. Basically, as a developer, I was bored.
I didn't want to waste my time, so I decided to improve my CSS skills. Back then CSS for me was what I couldn't do with Bootstrap. It was just simple properties I added here and there. So, I decided I'd up my game by looking up challenges online.
Suggested Read: CSS Variables and How to Use Them
The first place I went to for challenges was Codepen. Codepen has a new theme of challenges every month, and every week of that month there would be a challenge revolving around the theme.
The first challenge I did was for for a ghosts challenge (It was October at the time and the theme was Halloween).
\n See the Pen \n Nice Ghost by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nPretty lame to be completely honest. But, with time I moved on to something like this:
\n See the Pen \n Tiger Pattern on Hover List - #CodePenChallenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nAnd this
\n See the Pen \n Focus Table / Hover Table by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nLooking back at it, I found these two so hard to do. My skills were so much lacking that designing a table with a hover effect seemed like it was too much.
Codepen was not enough though, as the challenges were just once a week and I needed to do more. So, I had to look through other challenges online.
Daily CSS Images takes a more fun approach at learning CSS. Basically, everyday you create a certain object or animal, but with CSS. At the time I thought \"how would learning how to make a bear be helpful?\" but after time I realized that it's not about what you were making, it's about how you make it and what you learn in the process.
So, I made a bear with CSS.
\n See the Pen \n CSS Bear Cub - #DailyCSSImages by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nI learned how to use rotate and transform through this one. I remember I was so confused trying to make the ears in particular. After I was done though, I felt so proud of it.
Another one I did was a clock. Now this one I needed a tutorial to help me because I didn't know how to make the clock hands move without Javascript. Before doing this, I thought it was impossible to do it with only CSS.
\n See the Pen \n CSS Alarm Clock - #DailyCSSImages Challenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nThrough making this one it was my first time even hearing about transform-origin. I also expanded my knowledge a lot with using transform and animations. This one was a big step up for me.
I also did an elephant, a beaver, a jellyfish, and a rose. Daily CSS Images Challenge helped me understand more about animations and transforms and perspective in CSS.
Daily CSS Images Challenge also helped me step up my CodePen Challenges game!
\n See the Pen \n CodePen Challenge - Panda by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nAlthough these challenges helped, I needed to move on to something more realistic. A challenge where I would make something that I would actually make in a real project.
100 Days CSS Challenge was my favorite challenge to be a part of. First off, their website featured the works of developers who participated on CodePen, so it was a nice boost for me. Also, their challenges looked so beautiful to me, and in a lot of cases, something I'd love to do on a next project of mine.
The first challenge I did was this:
\n See the Pen \n #100daysCSSChallenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nA simple grid of images that shows a heart on hover. Yes, it is simple, but again because I lacked in my skills it was helpful.
I also did this Search bar:
\n See the Pen \n Search Bar - 100 Days CSS Challenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nAnd this counter:
\n See the Pen \n Counter - 100 Days CSS Challenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nAgain, all simple concepts, but it was still really helpful. I learned how to make prettier designs. CSS isn't just about knowing how to do something or memorizing the properties, it's also about utilizing what you know to make a visually pleasing design.
These challenges also had Javascript in them so it was helpful to practice Javascript as well.
Another challenge I took on as well was Codevember. Codevember ran from 2016 till 2019, and it would show a list of challenges for every day in November.
Codevember's challenges were simple. Each day would have a keyword and you have to create something that relates to it. This helps shift  your perspective from just coding with CSS to using your imagination to find an idea, then think how would I bring this idea to life with CSS.
So, at first when the concept was Infinity, I took a pretty simple approach to it:
\n See the Pen \n #codevember - 01 - infinity by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nBut when the concept was Web, I made a spider sitting on a web (with the help of SVG):
\n See the Pen \n #codevember - 03 - Web by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nIt helped me think more creatively and then try to find a way to do it with CSS, while maintaining what I learned from 100 Days CSS Challenge to make it visually pleasing.
Everyone knows that to improve your skill in any programming language, you need to practice. Even if it seems hard in the beginning, with time you will improve and you will learn new concepts and ways of thinking as well. Whether it's CSS or any other programming language, look online for motivating challenges to keep you going and practicing to become a better developer.
","url":"https://backend.shahednasser.com/how-i-improved-my-css-skills/","canonical_url":null,"uuid":"e67ccf1a-1e48-43d1-9a48-e1a6ffac5808","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"601d4e174dedf3001e558feb","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Two years ago, I had just gotten employed at my job and we were going through an in between projects and contacts phase. Basically, as a developer, I was bored.
I didn't want to waste my time, so I decided to improve my CSS skills. Back then CSS for me was what I couldn't do with Bootstrap. It was just simple properties I added here and there. So, I decided I'd up my game by looking up challenges online.
Suggested Read: CSS Variables and How to Use Them
The first place I went to for challenges was Codepen. Codepen has a new theme of challenges every month, and every week of that month there would be a challenge revolving around the theme.
The first challenge I did was for for a ghosts challenge (It was October at the time and the theme was Halloween).
\n See the Pen \n Nice Ghost by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nPretty lame to be completely honest. But, with time I moved on to something like this:
\n See the Pen \n Tiger Pattern on Hover List - #CodePenChallenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nAnd this
\n See the Pen \n Focus Table / Hover Table by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nLooking back at it, I found these two so hard to do. My skills were so much lacking that designing a table with a hover effect seemed like it was too much.
Codepen was not enough though, as the challenges were just once a week and I needed to do more. So, I had to look through other challenges online.
Daily CSS Images takes a more fun approach at learning CSS. Basically, everyday you create a certain object or animal, but with CSS. At the time I thought \"how would learning how to make a bear be helpful?\" but after time I realized that it's not about what you were making, it's about how you make it and what you learn in the process.
So, I made a bear with CSS.
\n See the Pen \n CSS Bear Cub - #DailyCSSImages by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nI learned how to use rotate and transform through this one. I remember I was so confused trying to make the ears in particular. After I was done though, I felt so proud of it.
Another one I did was a clock. Now this one I needed a tutorial to help me because I didn't know how to make the clock hands move without Javascript. Before doing this, I thought it was impossible to do it with only CSS.
\n See the Pen \n CSS Alarm Clock - #DailyCSSImages Challenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nThrough making this one it was my first time even hearing about transform-origin. I also expanded my knowledge a lot with using transform and animations. This one was a big step up for me.
I also did an elephant, a beaver, a jellyfish, and a rose. Daily CSS Images Challenge helped me understand more about animations and transforms and perspective in CSS.
Daily CSS Images Challenge also helped me step up my CodePen Challenges game!
\n See the Pen \n CodePen Challenge - Panda by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nAlthough these challenges helped, I needed to move on to something more realistic. A challenge where I would make something that I would actually make in a real project.
100 Days CSS Challenge was my favorite challenge to be a part of. First off, their website featured the works of developers who participated on CodePen, so it was a nice boost for me. Also, their challenges looked so beautiful to me, and in a lot of cases, something I'd love to do on a next project of mine.
The first challenge I did was this:
\n See the Pen \n #100daysCSSChallenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nA simple grid of images that shows a heart on hover. Yes, it is simple, but again because I lacked in my skills it was helpful.
I also did this Search bar:
\n See the Pen \n Search Bar - 100 Days CSS Challenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nAnd this counter:
\n See the Pen \n Counter - 100 Days CSS Challenge by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nAgain, all simple concepts, but it was still really helpful. I learned how to make prettier designs. CSS isn't just about knowing how to do something or memorizing the properties, it's also about utilizing what you know to make a visually pleasing design.
These challenges also had Javascript in them so it was helpful to practice Javascript as well.
Another challenge I took on as well was Codevember. Codevember ran from 2016 till 2019, and it would show a list of challenges for every day in November.
Codevember's challenges were simple. Each day would have a keyword and you have to create something that relates to it. This helps shift  your perspective from just coding with CSS to using your imagination to find an idea, then think how would I bring this idea to life with CSS.
So, at first when the concept was Infinity, I took a pretty simple approach to it:
\n See the Pen \n #codevember - 01 - infinity by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nBut when the concept was Web, I made a spider sitting on a web (with the help of SVG):
\n See the Pen \n #codevember - 03 - Web by Shahed Nasser (@shahednasser)\n on CodePen.\n
\nIt helped me think more creatively and then try to find a way to do it with CSS, while maintaining what I learned from 100 Days CSS Challenge to make it visually pleasing.
Everyone knows that to improve your skill in any programming language, you need to practice. Even if it seems hard in the beginning, with time you will improve and you will learn new concepts and ways of thinking as well. Whether it's CSS or any other programming language, look online for motivating challenges to keep you going and practicing to become a better developer.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Two years ago, I had just gotten employed at my job and we were going through an in between projects and contacts phase. Basically, as a developer, I was bored. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I didn't want to waste my time, so I decided to improve my CSS skills. Back then CSS for me was what I couldn't do with Bootstrap. It was just simple properties I added here and there. So, I decided I'd up my game by looking up challenges online."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Suggested Read: "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/css-variables-and-how-to-use-them/"},"children":[{"type":"text","value":"CSS Variables and How to Use Them"}]}]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"codepen-challenges"},"children":[{"type":"text","value":"Codepen Challenges"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first place I went to for challenges was "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/challenges"},"children":[{"type":"text","value":"Codepen"}]},{"type":"text","value":". Codepen has a new theme of challenges every month, and every week of that month there would be a challenge revolving around the theme."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first challenge I did was for for a ghosts challenge (It was October at the time and the theme was Halloween)."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"265","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"NOGYLO","style":"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"Nice Ghost"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/NOGYLO"},"children":[{"type":"text","value":"\n Nice Ghost"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pretty lame to be completely honest. But, with time I moved on to something like this:"}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"656","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"xQpBJb","style":"height: 656px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"Tiger Pattern on Hover List - #CodePenChallenge"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/xQpBJb"},"children":[{"type":"text","value":"\n Tiger Pattern on Hover List - #CodePenChallenge"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And this"}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"585","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"EdyrRX","style":"height: 585px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"Focus Table / Hover Table"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/EdyrRX"},"children":[{"type":"text","value":"\n Focus Table / Hover Table"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Looking back at it, I found these two so hard to do. My skills were so much lacking that designing a table with a hover effect seemed like it was too much."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Codepen was not enough though, as the challenges were just once a week and I needed to do more. So, I had to look through other challenges online."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"daily-css-images"},"children":[{"type":"text","value":"Daily CSS Images"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://gist.github.com/MeFoDy/067daabf9c3ea0e554f045fc067e23b0"},"children":[{"type":"text","value":"Daily CSS Images"}]},{"type":"text","value":" takes a more fun approach at learning CSS. Basically, everyday you create a certain object or animal, but with CSS. At the time I thought \"how would learning how to make a bear be helpful?\" but after time I realized that it's not about what you were making, it's about how you make it and what you learn in the process."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, I made a bear with CSS."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"659","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"bmgZdO","style":"height: 659px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"CSS Bear Cub - #DailyCSSImages"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/bmgZdO"},"children":[{"type":"text","value":"\n CSS Bear Cub - #DailyCSSImages"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I learned how to use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":" through this one. I remember I was so confused trying to make the ears in particular. After I was done though, I felt so proud of it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another one I did was a clock. Now this one I needed a tutorial to help me because I didn't know how to make the clock hands move without Javascript. Before doing this, I thought it was impossible to do it with only CSS."}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"415","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"wYpJdP","style":"height: 415px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"CSS Alarm Clock - #DailyCSSImages Challenge"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/wYpJdP"},"children":[{"type":"text","value":"\n CSS Alarm Clock - #DailyCSSImages Challenge"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Through making this one it was my first time even hearing about "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"transform-origin"}]},{"type":"text","value":". I also expanded my knowledge a lot with using transform and animations. This one was a big step up for me."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I also did an elephant, a beaver, a jellyfish, and a rose. Daily CSS Images Challenge helped me understand more about animations and transforms and perspective in CSS. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Daily CSS Images Challenge also helped me step up my CodePen Challenges game!"}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"769","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"VVPYLK","style":"height: 769px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"CodePen Challenge - Panda"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/VVPYLK"},"children":[{"type":"text","value":"\n CodePen Challenge - Panda"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although these challenges helped, I needed to move on to something more realistic. A challenge where I would make something that I would actually make in a real project."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"100-days-css-challenge"},"children":[{"type":"text","value":"100 Days CSS Challenge"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://100dayscss.com/"},"children":[{"type":"text","value":"100 Days CSS Challenge"}]},{"type":"text","value":" was my favorite challenge to be a part of. First off, their website featured the works of developers who participated on CodePen, so it was a nice boost for me. Also, their challenges looked so beautiful to me, and in a lot of cases, something I'd love to do on a next project of mine."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first challenge I did was this:"}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"542","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"wYJxvx","style":"height: 542px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"#100daysCSSChallenge"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/wYJxvx"},"children":[{"type":"text","value":"\n #100daysCSSChallenge"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A simple grid of images that shows a heart on hover. Yes, it is simple, but again because I lacked in my skills it was helpful."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I also did this Search bar:"}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"560","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"XxOPOQ","style":"height: 560px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"Search Bar - 100 Days CSS Challenge"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/XxOPOQ"},"children":[{"type":"text","value":"\n Search Bar - 100 Days CSS Challenge"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And this counter:"}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"530","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"PygOzB","style":"height: 530px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"Counter - 100 Days CSS Challenge"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/PygOzB"},"children":[{"type":"text","value":"\n Counter - 100 Days CSS Challenge"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Again, all simple concepts, but it was still really helpful. I learned how to make prettier designs. CSS isn't just about knowing how to do something or memorizing the properties, it's also about utilizing what you know to make a visually pleasing design."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These challenges also had Javascript in them so it was helpful to practice Javascript as well."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"codevember"},"children":[{"type":"text","value":"Codevember"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another challenge I took on as well was "},{"type":"element","tagName":"a","properties":{"href":"http://codevember.xyz/"},"children":[{"type":"text","value":"Codevember"}]},{"type":"text","value":". Codevember ran from 2016 till 2019, and it would show a list of challenges for every day in November."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Codevember's challenges were simple. Each day would have a keyword and you have to create something that relates to it. This helps shift  your perspective from just coding with CSS to using your imagination to find an idea, then think how would I bring this idea to life with CSS."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, at first when the concept was Infinity, I took a pretty simple approach to it:"}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"486","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"eQZGbX","style":"height: 486px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"#codevember - 01 - infinity"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/eQZGbX"},"children":[{"type":"text","value":"\n #codevember - 01 - infinity"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"But when the concept was Web, I made a spider sitting on a web (with the help of SVG):"}]},{"type":"comment","value":"kg-card-begin: html"},{"type":"element","tagName":"p","properties":{"className":["codepen"],"dataHeight":"477","dataThemeId":"dark","dataDefaultTab":"result","dataUser":"shahednasser","dataSlugHash":"pQNRKO","style":"height: 477px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;","dataPenTitle":"#codevember - 03 - Web"},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{},"children":[{"type":"text","value":"See the Pen "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser/pen/pQNRKO"},"children":[{"type":"text","value":"\n #codevember - 03 - Web"}]},{"type":"text","value":" by Shahed Nasser ("},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/shahednasser"},"children":[{"type":"text","value":"@shahednasser"}]},{"type":"text","value":")\n on "},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io"},"children":[{"type":"text","value":"CodePen"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"script","properties":{"async":true,"src":"https://cpwebassets.codepen.io/assets/embed/ei.js"},"children":[]},{"type":"comment","value":"kg-card-end: html"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It helped me think more creatively and then try to find a way to do it with CSS, while maintaining what I learned from 100 Days CSS Challenge to make it visually pleasing."}]},{"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":"Everyone knows that to improve your skill in any programming language, you need to practice. Even if it seems hard in the beginning, with time you will improve and you will learn new concepts and ways of thinking as well. Whether it's CSS or any other programming language, look online for motivating challenges to keep you going and practicing to become a better developer."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"codepen-challenges","heading":"Codepen Challenges"},{"id":"daily-css-images","heading":"Daily CSS Images"},{"id":"100-days-css-challenge","heading":"100 Days CSS Challenge"},{"id":"codevember","heading":"Codevember"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1500933964569-522caa01ca2e.jpg","publicURL":"/static/c04f2dcd48f58b78933988cee9d09586/photo-1500933964569-522caa01ca2e.jpg","imageMeta":{"width":2000,"height":1331},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAY9uOG9AH//EABoQAAICAwAAAAAAAAAAAAAAAAIDAAEQERP/2gAIAQEAAQUCFq50XLIN5//EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAgBAwEBPwGNP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AUf/xAAYEAACAwAAAAAAAAAAAAAAAAABECAxQf/aAAgBAQAGPwLVRh//xAAbEAACAQUAAAAAAAAAAAAAAAAAEQEgITGBof/aAAgBAQABPyGDngfCu9UUM//aAAwDAQACAAMAAAAQw/8A/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQBBcf/aAAgBAwEBPxBBlxf/xAAXEQEBAQEAAAAAAAAAAAAAAAABAEFx/9oACAECAQE/EEXbq//EABsQAQACAgMAAAAAAAAAAAAAAAEAESGREEFh/9oACAEBAAE/EKwp9RL7MshWRuPbprhbqCO5/9k=","aspectRatio":1.5086206896551724,"src":"/static/c04f2dcd48f58b78933988cee9d09586/ea4ab/photo-1500933964569-522caa01ca2e.jpg","srcSet":"/static/c04f2dcd48f58b78933988cee9d09586/477ba/photo-1500933964569-522caa01ca2e.jpg 175w,\n/static/c04f2dcd48f58b78933988cee9d09586/06776/photo-1500933964569-522caa01ca2e.jpg 350w,\n/static/c04f2dcd48f58b78933988cee9d09586/ea4ab/photo-1500933964569-522caa01ca2e.jpg 700w,\n/static/c04f2dcd48f58b78933988cee9d09586/3055e/photo-1500933964569-522caa01ca2e.jpg 1050w,\n/static/c04f2dcd48f58b78933988cee9d09586/eff08/photo-1500933964569-522caa01ca2e.jpg 1400w,\n/static/c04f2dcd48f58b78933988cee9d09586/4e5f3/photo-1500933964569-522caa01ca2e.jpg 2000w","srcWebp":"/static/c04f2dcd48f58b78933988cee9d09586/89afa/photo-1500933964569-522caa01ca2e.webp","srcSetWebp":"/static/c04f2dcd48f58b78933988cee9d09586/9fca7/photo-1500933964569-522caa01ca2e.webp 175w,\n/static/c04f2dcd48f58b78933988cee9d09586/37a4e/photo-1500933964569-522caa01ca2e.webp 350w,\n/static/c04f2dcd48f58b78933988cee9d09586/89afa/photo-1500933964569-522caa01ca2e.webp 700w,\n/static/c04f2dcd48f58b78933988cee9d09586/78e7a/photo-1500933964569-522caa01ca2e.webp 1050w,\n/static/c04f2dcd48f58b78933988cee9d09586/03d34/photo-1500933964569-522caa01ca2e.webp 1400w,\n/static/c04f2dcd48f58b78933988cee9d09586/49d6b/photo-1500933964569-522caa01ca2e.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__625ad95c39840e1ac2874ea3","title":"10+ Awesome Islamic Tools and Projects","slug":"10-awesome-islamic-tools-and-projects","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/04/10--Awesome-Islamic-Tools-and-Projects.jpg","excerpt":"As we are halfway through Ramadan, I want to take a chance to shed light on some cool Islamic tools and projects. ","custom_excerpt":"As we are halfway through Ramadan, I want to take a chance to shed light on some cool Islamic tools and projects. ","visibility":"public","created_at_pretty":"16 Apr 2022","published_at_pretty":"18 Apr 2022","updated_at_pretty":"18 Apr 2022","created_at":"2022-04-16T14:57:32.000+00:00","published_at":"2022-04-18T09:27:54.000+00:00","updated_at":"2022-04-18T09:27:54.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}],"plaintext":"As we are halfway through Ramadan, I want to take a chance to shed light on some\ncool Islamic tools and projects. \n\nSome of these are open source and you can use them in your own projects as well.\n\nAl Quran Cloud\nAl Quran Cloud [https://alquran.cloud] is a web app that you can use to read\nQuran, listen to it with your favorite reciters, and check translations in many\nlanguages.\n\nWhat's cooler about this project is that it provides free APIs that you can use\nto add Quran verses to your own projects. You can use it to add the Quran verses\nboth are text and audio, as well as display translations of it.\n\nI personally have utilized these APIs in my Chrome extension Quran in New Tab.\n[https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg?hl=en]\n\nYou can also support this project on GitHub\n[https://github.com/islamic-network/alquran.cloud].\n\nSalat Vue\nSalat Vue [https://salat-vue.netlify.app] is a simple Web app that shows you\nprayer times in any country and city. It also shows you the next prayer and how\nmuch time is left remaining.\n\nYou can support this tool on GitHub\n[https://github.com/ELATTARIYassine/Salat-vue].\n\nhijri-date\nhijri-date [https://abdennour.github.io/hijri-date/] is an NPM package that you\ncan use to get the Hijri date. It provides a HijriDate class that you can use to\nhandle hijri dates with an API similar to JavaScript's Date. You can also use it\nto convert to Gregorian date and vice versa.\n\nYou can support this tool on GitHub [https://github.com/abdennour/hijri-date].\n\nQuran.com\nQuran.com [https://quran.com] is an organization that provides web apps and\nmobile apps to easily have access to the Quran and read it, as well as listen to\nit. It's actively maintained and uses modern technologies.\n\nYou can support this project on GitHub [https://github.com/quran]. You can also \ndonate to their organization [https://donate.quran.com] for more support.\n\nazkar-db\nazkar-db [https://github.com/osamayy/azkar-db] is a GitHub repository that has a\nwide set of azkar in a SQLite database, JSON format, and CSV format. It includes\nMorning azkar and Evening azkar, as well as other types.\n\nUnfortunately, this one is all in Arabic only.\n\nMuslim Mate\nMuslim Mate [http://muslimmate.islam-db.com] is a dashboard with the necessary\ninformation for Muslims. It includes prayer times, a calendar of Islamic events,\nAzkar, and weather stats among other things. It's available as a website and as\nan Android app.\n\nIt's also fully customizable as you can remove or change the places of items in\nyour dashboard.\n\nYou can support this project on GitHub\n[https://github.com/fekracomputers/MuslimMateWebsite].\n\nAl-Adhan\nBy the creator of Al Quran Cloud, this website [https://aladhan.com] provides\nyou with information about prayer times, as well as a Hijri calendar with\nevents.\n\nThis project also has a free API that you can use in your projects. You can use\nit to get the Hijri calendar of a Gregorian month, prayer times at a specific\nlongitude and latitude, and much more.\n\nYou can support this project and contribute to it on GitHub\n[https://github.com/islamic-network/api.aladhan.com].\n\nQuran-Flutter\nQuran-Flutter [https://github.com/SadaqaWorks/Quran-Flutter] is an open-source\nflutter project that allows you to read the Quran cross-platforms. This project\nis still in its development phase but at the moment it's a responsive Quran\nreader for any device.\n\nIt's Salah Time\nIt's Salah Time [https://its-salah-time.vercel.app/] is a beautiful web app that\nshows you prayer times based on your location. It's also a PWA so you can add it\nto your mobile device and view it as an app.\n\nYou can support and contribute to this project on GitHub\n[https://github.com/murtuzaalisurti/salah].\n\nSunnah.com\nSunnah.com [https://sunnah.com] is a website you can use to view the Hadith of\nProphet Muhammad. You can also search for it. It supports 3 languages: Arabic,\nEnglish, and Urdu.\n\nIt also provides free-to-use APIs\n[https://sunnah.api-docs.io/1.0/getting-started/introduction] to use these\nresources in your projects.\n\n You can support and contribute to them on GitHub\n[https://github.com/sunnah-com/api].\n\npyIslam\npyIslam is a Python library that you can use to calculate prayer times, hijri\ndates, qiblad direction, Zakat calculation, and more.\n\nYou can support and contribute to the project on GitHub\n[https://github.com/abougouffa/pyIslam].\n\nQuran CLI\nQuran CLI [https://github.com/sarfraznawaz2005/quran-cli] is an NPM package that\nyou can install locally by cloning the GitHub repository. It allows you to view\nthe Quran right from your terminal.\n\nYou can read as well as search the Quran right from your CLI. You can view the\nverses in both English and Arabic.\n\nMore Awesome Tools\nTo check out more awesome Islamic tools, check out the following repositories:\n\n 1. Awesome-Islam [https://github.com/AhmedKamal/awesome-Islam]\n 2. Awesome-Muslims [https://github.com/choubari/Awesome-Muslims]","html":"As we are halfway through Ramadan, I want to take a chance to shed light on some cool Islamic tools and projects.
Some of these are open source and you can use them in your own projects as well.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.03.31-PM.png\")
Al Quran Cloud is a web app that you can use to read Quran, listen to it with your favorite reciters, and check translations in many languages.
What's cooler about this project is that it provides free APIs that you can use to add Quran verses to your own projects. You can use it to add the Quran verses both are text and audio, as well as display translations of it.
I personally have utilized these APIs in my Chrome extension Quran in New Tab.
You can also support this project on GitHub.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.07.41-PM.png\")
Salat Vue is a simple Web app that shows you prayer times in any country and city. It also shows you the next prayer and how much time is left remaining.
You can support this tool on GitHub.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.09.00-PM.png\")
hijri-date is an NPM package that you can use to get the Hijri date. It provides a HijriDate class that you can use to handle hijri dates with an API similar to JavaScript's Date. You can also use it to convert to Gregorian date and vice versa.
You can support this tool on GitHub.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.12.49-PM.png\")
Quran.com is an organization that provides web apps and mobile apps to easily have access to the Quran and read it, as well as listen to it. It's actively maintained and uses modern technologies.
You can support this project on GitHub. You can also donate to their organization for more support.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.15.38-PM.png\")
azkar-db is a GitHub repository that has a wide set of azkar in a SQLite database, JSON format, and CSV format. It includes Morning azkar and Evening azkar, as well as other types.
Unfortunately, this one is all in Arabic only.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.25.23-PM.png\")
Muslim Mate is a dashboard with the necessary information for Muslims. It includes prayer times, a calendar of Islamic events, Azkar, and weather stats among other things. It's available as a website and as an Android app.
It's also fully customizable as you can remove or change the places of items in your dashboard.
You can support this project on GitHub.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.30.14-PM.png\")
By the creator of Al Quran Cloud, this website provides you with information about prayer times, as well as a Hijri calendar with events.
This project also has a free API that you can use in your projects. You can use it to get the Hijri calendar of a Gregorian month, prayer times at a specific longitude and latitude, and much more.
You can support this project and contribute to it on GitHub.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.34.13-PM.png\")
Quran-Flutter is an open-source flutter project that allows you to read the Quran cross-platforms. This project is still in its development phase but at the moment it's a responsive Quran reader for any device.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-17-at-6.29.51-PM.png\")
It's Salah Time is a beautiful web app that shows you prayer times based on your location. It's also a PWA so you can add it to your mobile device and view it as an app.
You can support and contribute to this project on GitHub.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.44.58-PM.png\")
Sunnah.com is a website you can use to view the Hadith of Prophet Muhammad. You can also search for it. It supports 3 languages: Arabic, English, and Urdu.
It also provides free-to-use APIs to use these resources in your projects.
You can support and contribute to them on GitHub.
![](\"https://backend.shahednasser.com/content/images/2022/04/Screen-Shot-2022-04-16-at-6.50.29-PM.png\")
pyIslam is a Python library that you can use to calculate prayer times, hijri dates, qiblad direction, Zakat calculation, and more.
You can support and contribute to the project on GitHub.
![](\"https://backend.shahednasser.com/content/images/2022/04/screen1.png\")
Quran CLI is an NPM package that you can install locally by cloning the GitHub repository. It allows you to view the Quran right from your terminal.
You can read as well as search the Quran right from your CLI. You can view the verses in both English and Arabic.
To check out more awesome Islamic tools, check out the following repositories:
","url":"https://backend.shahednasser.com/10-awesome-islamic-tools-and-projects/","canonical_url":null,"uuid":"9b652a4a-357b-441c-a909-c6f89716b7f3","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"625ad95c39840e1ac2874ea3","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"As we are halfway through Ramadan, I want to take a chance to shed light on some cool Islamic tools and projects.
Some of these are open source and you can use them in your own projects as well.
Al Quran Cloud is a web app that you can use to read Quran, listen to it with your favorite reciters, and check translations in many languages.
What's cooler about this project is that it provides free APIs that you can use to add Quran verses to your own projects. You can use it to add the Quran verses both are text and audio, as well as display translations of it.
I personally have utilized these APIs in my Chrome extension Quran in New Tab.
You can also support this project on GitHub.
Salat Vue is a simple Web app that shows you prayer times in any country and city. It also shows you the next prayer and how much time is left remaining.
You can support this tool on GitHub.
hijri-date is an NPM package that you can use to get the Hijri date. It provides a HijriDate class that you can use to handle hijri dates with an API similar to JavaScript's Date. You can also use it to convert to Gregorian date and vice versa.
You can support this tool on GitHub.
Quran.com is an organization that provides web apps and mobile apps to easily have access to the Quran and read it, as well as listen to it. It's actively maintained and uses modern technologies.
You can support this project on GitHub. You can also donate to their organization for more support.
azkar-db is a GitHub repository that has a wide set of azkar in a SQLite database, JSON format, and CSV format. It includes Morning azkar and Evening azkar, as well as other types.
Unfortunately, this one is all in Arabic only.
Muslim Mate is a dashboard with the necessary information for Muslims. It includes prayer times, a calendar of Islamic events, Azkar, and weather stats among other things. It's available as a website and as an Android app.
It's also fully customizable as you can remove or change the places of items in your dashboard.
You can support this project on GitHub.
By the creator of Al Quran Cloud, this website provides you with information about prayer times, as well as a Hijri calendar with events.
This project also has a free API that you can use in your projects. You can use it to get the Hijri calendar of a Gregorian month, prayer times at a specific longitude and latitude, and much more.
You can support this project and contribute to it on GitHub.
Quran-Flutter is an open-source flutter project that allows you to read the Quran cross-platforms. This project is still in its development phase but at the moment it's a responsive Quran reader for any device.
It's Salah Time is a beautiful web app that shows you prayer times based on your location. It's also a PWA so you can add it to your mobile device and view it as an app.
You can support and contribute to this project on GitHub.
Sunnah.com is a website you can use to view the Hadith of Prophet Muhammad. You can also search for it. It supports 3 languages: Arabic, English, and Urdu.
It also provides free-to-use APIs to use these resources in your projects.
You can support and contribute to them on GitHub.
pyIslam is a Python library that you can use to calculate prayer times, hijri dates, qiblad direction, Zakat calculation, and more.
You can support and contribute to the project on GitHub.
Quran CLI is an NPM package that you can install locally by cloning the GitHub repository. It allows you to view the Quran right from your terminal.
You can read as well as search the Quran right from your CLI. You can view the verses in both English and Arabic.
To check out more awesome Islamic tools, check out the following repositories:
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As we are halfway through Ramadan, I want to take a chance to shed light on some cool Islamic tools and projects. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Some of these are open source and you can use them in your own projects as well."}]},{"type":"element","tagName":"h2","properties":{"id":"al-quran-cloud"},"children":[{"type":"text","value":"Al Quran Cloud"}]},{"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/Screen-Shot-2022-04-16-at-6.03.31-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2380,"height":1246},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://alquran.cloud"},"children":[{"type":"text","value":"Al Quran Cloud"}]},{"type":"text","value":" is a web app that you can use to read Quran, listen to it with your favorite reciters, and check translations in many languages."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What's cooler about this project is that it provides free APIs that you can use to add Quran verses to your own projects. You can use it to add the Quran verses both are text and audio, as well as display translations of it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I personally have utilized these APIs in my Chrome extension "},{"type":"element","tagName":"a","properties":{"href":"https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg?hl=en"},"children":[{"type":"text","value":"Quran in New Tab."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also support this project on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/islamic-network/alquran.cloud"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"salat-vue"},"children":[{"type":"text","value":"Salat Vue"}]},{"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/Screen-Shot-2022-04-16-at-6.07.41-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1150,"height":1178},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://salat-vue.netlify.app"},"children":[{"type":"text","value":"Salat Vue"}]},{"type":"text","value":" is a simple Web app that shows you prayer times in any country and city. It also shows you the next prayer and how much time is left remaining."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can support this tool on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/ELATTARIYassine/Salat-vue"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"hijri-date"},"children":[{"type":"text","value":"hijri-date"}]},{"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/Screen-Shot-2022-04-16-at-6.09.00-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2112,"height":870},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://abdennour.github.io/hijri-date/"},"children":[{"type":"text","value":"hijri-date"}]},{"type":"text","value":" is an NPM package that you can use to get the Hijri date. It provides a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"HijriDate"}]},{"type":"text","value":" class that you can use to handle hijri dates with an API similar to JavaScript's Date. You can also use it to convert to Gregorian date and vice versa."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can support this tool on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/abdennour/hijri-date"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"qurancom"},"children":[{"type":"text","value":"Quran.com"}]},{"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/Screen-Shot-2022-04-16-at-6.12.49-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2760,"height":962},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://quran.com"},"children":[{"type":"text","value":"Quran.com"}]},{"type":"text","value":" is an organization that provides web apps and mobile apps to easily have access to the Quran and read it, as well as listen to it. It's actively maintained and uses modern technologies."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can support this project on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/quran"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":". You can also "},{"type":"element","tagName":"a","properties":{"href":"https://donate.quran.com"},"children":[{"type":"text","value":"donate to their organization"}]},{"type":"text","value":" for more support."}]},{"type":"element","tagName":"h2","properties":{"id":"azkar-db"},"children":[{"type":"text","value":"azkar-db"}]},{"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/Screen-Shot-2022-04-16-at-6.15.38-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2504,"height":1058},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/osamayy/azkar-db"},"children":[{"type":"text","value":"azkar-db"}]},{"type":"text","value":" is a GitHub repository that has a wide set of azkar in a SQLite database, JSON format, and CSV format. It includes Morning azkar and Evening azkar, as well as other types."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Unfortunately, this one is all in Arabic only."}]},{"type":"element","tagName":"h2","properties":{"id":"muslim-mate"},"children":[{"type":"text","value":"Muslim Mate"}]},{"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/Screen-Shot-2022-04-16-at-6.25.23-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2758,"height":1534},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://muslimmate.islam-db.com"},"children":[{"type":"text","value":"Muslim Mate"}]},{"type":"text","value":" is a dashboard with the necessary information for Muslims. It includes prayer times, a calendar of Islamic events, Azkar, and weather stats among other things. It's available as a website and as an Android app."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It's also fully customizable as you can remove or change the places of items in your dashboard."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can support this project on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/fekracomputers/MuslimMateWebsite"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"al-adhan"},"children":[{"type":"text","value":"Al-Adhan"}]},{"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/Screen-Shot-2022-04-16-at-6.30.14-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2338,"height":1542},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By the creator of Al Quran Cloud, "},{"type":"element","tagName":"a","properties":{"href":"https://aladhan.com"},"children":[{"type":"text","value":"this website"}]},{"type":"text","value":" provides you with information about prayer times, as well as a Hijri calendar with events."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This project also has a free API that you can use in your projects. You can use it to get the Hijri calendar of a Gregorian month, prayer times at a specific longitude and latitude, and much more."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can support this project and contribute to it on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/islamic-network/api.aladhan.com"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"quran-flutter"},"children":[{"type":"text","value":"Quran-Flutter"}]},{"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/Screen-Shot-2022-04-16-at-6.34.13-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1756,"height":1102},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/SadaqaWorks/Quran-Flutter"},"children":[{"type":"text","value":"Quran-Flutter"}]},{"type":"text","value":" is an open-source flutter project that allows you to read the Quran cross-platforms. This project is still in its development phase but at the moment it's a responsive Quran reader for any device."}]},{"type":"element","tagName":"h2","properties":{"id":"its-salah-time"},"children":[{"type":"text","value":"It's Salah Time"}]},{"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/Screen-Shot-2022-04-17-at-6.29.51-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":608,"height":1418},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://its-salah-time.vercel.app/"},"children":[{"type":"text","value":"It's Salah Time"}]},{"type":"text","value":" is a beautiful web app that shows you prayer times based on your location. It's also a PWA so you can add it to your mobile device and view it as an app."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can support and contribute to this project on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/murtuzaalisurti/salah"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"sunnahcom"},"children":[{"type":"text","value":"Sunnah.com"}]},{"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/Screen-Shot-2022-04-16-at-6.44.58-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2796,"height":1272},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://sunnah.com"},"children":[{"type":"text","value":"Sunnah.com"}]},{"type":"text","value":" is a website you can use to view the Hadith of Prophet Muhammad. You can also search for it. It supports 3 languages: Arabic, English, and Urdu."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It also provides "},{"type":"element","tagName":"a","properties":{"href":"https://sunnah.api-docs.io/1.0/getting-started/introduction"},"children":[{"type":"text","value":"free-to-use APIs"}]},{"type":"text","value":" to use these resources in your projects."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" You can support and contribute to them on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sunnah-com/api"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"pyislam"},"children":[{"type":"text","value":"pyIslam"}]},{"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/Screen-Shot-2022-04-16-at-6.50.29-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2066,"height":1548},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"pyIslam is a Python library that you can use to calculate prayer times, hijri dates, qiblad direction, Zakat calculation, and more."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can support and contribute to the project on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/abougouffa/pyIslam"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"quran-cli"},"children":[{"type":"text","value":"Quran CLI"}]},{"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/screen1.png","className":["kg-image"],"alt":"","loading":"lazy","width":724,"height":597},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/sarfraznawaz2005/quran-cli"},"children":[{"type":"text","value":"Quran CLI"}]},{"type":"text","value":" is an NPM package that you can install locally by cloning the GitHub repository. It allows you to view the Quran right from your terminal."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can read as well as search the Quran right from your CLI. You can view the verses in both English and Arabic."}]},{"type":"element","tagName":"h2","properties":{"id":"more-awesome-tools"},"children":[{"type":"text","value":"More Awesome Tools"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To check out more awesome Islamic tools, check out the following repositories:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/AhmedKamal/awesome-Islam"},"children":[{"type":"text","value":"Awesome-Islam"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/choubari/Awesome-Muslims"},"children":[{"type":"text","value":"Awesome-Muslims"}]}]}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"al-quran-cloud","heading":"Al Quran Cloud"},{"id":"salat-vue","heading":"Salat Vue"},{"id":"hijri-date","heading":"hijri-date"},{"id":"qurancom","heading":"Quran.com"},{"id":"azkar-db","heading":"azkar-db"},{"id":"muslim-mate","heading":"Muslim Mate"},{"id":"al-adhan","heading":"Al-Adhan"},{"id":"quran-flutter","heading":"Quran-Flutter"},{"id":"its-salah-time","heading":"It's Salah Time"},{"id":"sunnahcom","heading":"Sunnah.com"},{"id":"pyislam","heading":"pyIslam"},{"id":"quran-cli","heading":"Quran CLI"},{"id":"more-awesome-tools","heading":"More Awesome Tools"}]},"featureImageSharp":{"base":"10--Awesome-Islamic-Tools-and-Projects.jpg","publicURL":"/static/536816f1ec08d643b496e09903988f82/10--Awesome-Islamic-Tools-and-Projects.jpg","imageMeta":{"width":1560,"height":876},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe5dCKP/xAAXEAEAAwAAAAAAAAAAAAAAAAARASAh/9oACAEBAAEFAmXa/wD/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAWEAEBAQAAAAAAAAAAAAAAAAAxACD/2gAIAQEABj8CIz//xAAbEAACAQUAAAAAAAAAAAAAAAAAEQEgMUFx8f/aAAgBAQABPyG0fY+hDzCo/9oADAMBAAIAAwAAABAjz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAAIDAQEAAAAAAAAAAAAAAAERACExIFH/2gAIAQEAAT8QsDUdFCb1kyDY8b4//9k=","aspectRatio":1.7857142857142858,"src":"/static/536816f1ec08d643b496e09903988f82/ea4ab/10--Awesome-Islamic-Tools-and-Projects.jpg","srcSet":"/static/536816f1ec08d643b496e09903988f82/477ba/10--Awesome-Islamic-Tools-and-Projects.jpg 175w,\n/static/536816f1ec08d643b496e09903988f82/06776/10--Awesome-Islamic-Tools-and-Projects.jpg 350w,\n/static/536816f1ec08d643b496e09903988f82/ea4ab/10--Awesome-Islamic-Tools-and-Projects.jpg 700w,\n/static/536816f1ec08d643b496e09903988f82/3055e/10--Awesome-Islamic-Tools-and-Projects.jpg 1050w,\n/static/536816f1ec08d643b496e09903988f82/eff08/10--Awesome-Islamic-Tools-and-Projects.jpg 1400w,\n/static/536816f1ec08d643b496e09903988f82/81a53/10--Awesome-Islamic-Tools-and-Projects.jpg 1560w","srcWebp":"/static/536816f1ec08d643b496e09903988f82/89afa/10--Awesome-Islamic-Tools-and-Projects.webp","srcSetWebp":"/static/536816f1ec08d643b496e09903988f82/9fca7/10--Awesome-Islamic-Tools-and-Projects.webp 175w,\n/static/536816f1ec08d643b496e09903988f82/37a4e/10--Awesome-Islamic-Tools-and-Projects.webp 350w,\n/static/536816f1ec08d643b496e09903988f82/89afa/10--Awesome-Islamic-Tools-and-Projects.webp 700w,\n/static/536816f1ec08d643b496e09903988f82/78e7a/10--Awesome-Islamic-Tools-and-Projects.webp 1050w,\n/static/536816f1ec08d643b496e09903988f82/03d34/10--Awesome-Islamic-Tools-and-Projects.webp 1400w,\n/static/536816f1ec08d643b496e09903988f82/f5845/10--Awesome-Islamic-Tools-and-Projects.webp 1560w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__6258204839840e1ac2874e74","title":"How to Install Python 2 on macOS 12.3+","slug":"how-to-install-python-2-on-mac-12-3","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/04/B7973617-B25E-4E6A-9C4B-DB17F090A267.png","excerpt":"Learn how to install Python 2 on macOS 12.3+","custom_excerpt":"Learn how to install Python 2 on macOS 12.3+","visibility":"public","created_at_pretty":"14 Apr 2022","published_at_pretty":"14 Apr 2022","updated_at_pretty":"14 Apr 2022","created_at":"2022-04-14T13:23:20.000+00:00","published_at":"2022-04-14T13:34:57.000+00:00","updated_at":"2022-04-14T13:34:57.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":"python","url":"https://backend.shahednasser.com/tag/python/","name":"Python","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"As of macOS 12.3+\n[https://developer.apple.com/documentation/macos-release-notes/macos-12_3-release-notes#Python]\n, Python 2 which was installed by default at /usr/bin/python have been removed.\nThis can lead to a lot of issues for developers that need to use Python 2 or\nthat use other tools that depend on it.\n\nInstall Python 2\nTo install Python2 again, simply download the macOS universal installer from\nPython's website\n[https://www.python.org/ftp/python/2.7.18/python-2.7.18-macosx10.9.pkg]\n\nAfter downloading the installer run it to install Python 2. This will\nautomatically install Python in /usr/local/python as well.\n\nTest it Out\nYou can run Python 2 in your terminal now and other tools using it will no\nlonger have issues:\n\npython","html":"As of macOS 12.3+, Python 2 which was installed by default at /usr/bin/python have been removed. This can lead to a lot of issues for developers that need to use Python 2 or that use other tools that depend on it.
To install Python2 again, simply download the macOS universal installer from Python's website
After downloading the installer run it to install Python 2. This will automatically install Python in /usr/local/python as well.
You can run Python 2 in your terminal now and other tools using it will no longer have issues:
pythonAs of macOS 12.3+, Python 2 which was installed by default at /usr/bin/python have been removed. This can lead to a lot of issues for developers that need to use Python 2 or that use other tools that depend on it.
To install Python2 again, simply download the macOS universal installer from Python's website
After downloading the installer run it to install Python 2. This will automatically install Python in /usr/local/python as well.
You can run Python 2 in your terminal now and other tools using it will no longer have issues:
pythonSomething I constantly see on Twitter is threads that list people's jobs in the technical fields that don't require a lot or any technical knowledge. Some of those threads include Technical Writing.
I'm a technical writer, I had been a freelance technical writer for almost a year and now I'm working full-time. In this article, I'll give you a bit of summary about what we do and whether or not you need technical knowledge for the job.
Documentation generally is a huge part of your work as a technical writer. Most, if not all, companies hire a technical writer to write documentation about their software.
The reason I'm saying most and not all is that some companies hire technical writers exclusively for blog content, especially if that company works as a digital marketing or content provider for other software companies. I'll get to the blog posts later on.
There are two types of documentation: user documentation and developer documentation. Some companies need you to write both. Some companies need you to write one or the other, depending on the type of solution they provide.
Writing documentation for developers requires you to sift through code written by other people to understand many things such as how something is done, how something is actually implemented, or why something is done a certain way.
This deep dive into the code requires you to have some knowledge of programming, especially in the language you're working with. The level of that knowledge depends on the type of software you're working on.
You can also rely on the technical team by asking them questions if anything is unclear or you need to confirm some details.
Working with documentation also requires you to actually build with the software at times to be able to explain the process, including code snippets, and test things out yourself.
Writing documentation might require less technical knowledge than that required for writing for developers. When you write documentation for users, it's often done in a way to simplify how to use a process. Users don't necessarily care about the code or how it's implemented.
Another aspect of being a technical writer is writing articles. There are many types of articles you can work on, and again it depends on what type of company you're in.
One type is tutorial articles. You have to guide developers on how they can do something using the software. Those obviously require technical knowledge as you'll be building the solution yourself while writing about it.
Another type is general articles that might explain topics and concepts related to the product your company provides or programming in general. Although those might not have code snippets in them or might not require you to build anything throughout the article, they require a deep understanding of the topic at hand.
As it is a technical topic, you should have some technical knowledge to be able to write about it correctly.
Technical Writing jobs can vary from one company to another, but generally speaking, the technical part is a prominent part of it. If you're interested in technical writing, make sure you also develop your technical knowledge and skills as well.
","url":"https://backend.shahednasser.com/does-technical-writing-require-technical-knowledge/","canonical_url":null,"uuid":"3dbe43fd-219b-4eb7-8ddc-9aa0fe800a66","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"6251920039840e1ac2874dff","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Something I constantly see on Twitter is threads that list people's jobs in the technical fields that don't require a lot or any technical knowledge. Some of those threads include Technical Writing.
I'm a technical writer, I had been a freelance technical writer for almost a year and now I'm working full-time. In this article, I'll give you a bit of summary about what we do and whether or not you need technical knowledge for the job.
Documentation generally is a huge part of your work as a technical writer. Most, if not all, companies hire a technical writer to write documentation about their software.
The reason I'm saying most and not all is that some companies hire technical writers exclusively for blog content, especially if that company works as a digital marketing or content provider for other software companies. I'll get to the blog posts later on.
There are two types of documentation: user documentation and developer documentation. Some companies need you to write both. Some companies need you to write one or the other, depending on the type of solution they provide.
Writing documentation for developers requires you to sift through code written by other people to understand many things such as how something is done, how something is actually implemented, or why something is done a certain way.
This deep dive into the code requires you to have some knowledge of programming, especially in the language you're working with. The level of that knowledge depends on the type of software you're working on.
You can also rely on the technical team by asking them questions if anything is unclear or you need to confirm some details.
Working with documentation also requires you to actually build with the software at times to be able to explain the process, including code snippets, and test things out yourself.
Writing documentation might require less technical knowledge than that required for writing for developers. When you write documentation for users, it's often done in a way to simplify how to use a process. Users don't necessarily care about the code or how it's implemented.
Another aspect of being a technical writer is writing articles. There are many types of articles you can work on, and again it depends on what type of company you're in.
One type is tutorial articles. You have to guide developers on how they can do something using the software. Those obviously require technical knowledge as you'll be building the solution yourself while writing about it.
Another type is general articles that might explain topics and concepts related to the product your company provides or programming in general. Although those might not have code snippets in them or might not require you to build anything throughout the article, they require a deep understanding of the topic at hand.
As it is a technical topic, you should have some technical knowledge to be able to write about it correctly.
Technical Writing jobs can vary from one company to another, but generally speaking, the technical part is a prominent part of it. If you're interested in technical writing, make sure you also develop your technical knowledge and skills as well.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Something I constantly see on Twitter is threads that list people's jobs in the technical fields that don't require a lot or any technical knowledge. Some of those threads include Technical Writing. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I'm a technical writer, I had been a freelance technical writer for almost a year and now I'm working full-time. In this article, I'll give you a bit of summary about what we do and whether or not you need technical knowledge for the job."}]},{"type":"element","tagName":"h2","properties":{"id":"documentation"},"children":[{"type":"text","value":"Documentation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Documentation generally is a huge part of your work as a technical writer. Most, if not all, companies hire a technical writer to write documentation about their software."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The reason I'm saying most and not all is that some companies hire technical writers exclusively for blog content, especially if that company works as a digital marketing or content provider for other software companies. I'll get to the blog posts later on."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are two types of documentation: user documentation and developer documentation. Some companies need you to write both. Some companies need you to write one or the other, depending on the type of solution they provide."}]},{"type":"element","tagName":"h3","properties":{"id":"developer-documentation"},"children":[{"type":"text","value":"Developer Documentation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Writing documentation for developers requires you to sift through code written by other people to understand many things such as how something is done, how something is actually implemented, or why something is done a certain way."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This deep dive into the code requires you to have some knowledge of programming, especially in the language you're working with. The level of that knowledge depends on the type of software you're working on."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also rely on the technical team by asking them questions if anything is unclear or you need to confirm some details."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Working with documentation also requires you to actually build with the software at times to be able to explain the process, including code snippets, and test things out yourself."}]},{"type":"element","tagName":"h3","properties":{"id":"user-documentation"},"children":[{"type":"text","value":"User Documentation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Writing documentation might require less technical knowledge than that required for writing for developers. When you write documentation for users, it's often done in a way to simplify how to use a process. Users don't necessarily care about the code or how it's implemented."}]},{"type":"element","tagName":"h2","properties":{"id":"articles-and-blogs"},"children":[{"type":"text","value":"Articles and Blogs"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another aspect of being a technical writer is writing articles. There are many types of articles you can work on, and again it depends on what type of company you're in."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"One type is tutorial articles. You have to guide developers on how they can do something using the software. Those obviously require technical knowledge as you'll be building the solution yourself while writing about it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another type is general articles that might explain topics and concepts related to the product your company provides or programming in general. Although those might not have code snippets in them or might not require you to build anything throughout the article, they require a deep understanding of the topic at hand."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As it is a technical topic, you should have some technical knowledge to be able to write about it correctly."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Technical Writing jobs can vary from one company to another, but generally speaking, the technical part is a prominent part of it. If you're interested in technical writing, make sure you also develop your technical knowledge and skills as well."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"documentation","heading":"Documentation","items":[{"id":"developer-documentation","heading":"Developer Documentation"},{"id":"user-documentation","heading":"User Documentation"}]},{"id":"articles-and-blogs","heading":"Articles and Blogs"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"Does-Technical-Writing-Require-Technical-Knowledge-2.jpg","publicURL":"/static/2a412602419b450246a9d574f73d01c8/Does-Technical-Writing-Require-Technical-Knowledge-2.jpg","imageMeta":{"width":1560,"height":876},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAEDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe20EUf/xAAXEAADAQAAAAAAAAAAAAAAAAAAAREg/9oACAEBAAEFAqyvP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAQEBAAAAAAAAAAAAAAAAADIAIP/aAAgBAQAGPwIxz//EABoQAQEAAgMAAAAAAAAAAAAAAAERACAhMZH/2gAIAQEAAT8hSZTg729ws5Jp/9oADAMBAAIAAwAAABDDz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQEAAgMAAAAAAAAAAAAAAAERACAhUWH/2gAIAQEAAT8QUCJgic5ET9QY1VHVun//2Q==","aspectRatio":1.7857142857142858,"src":"/static/2a412602419b450246a9d574f73d01c8/ea4ab/Does-Technical-Writing-Require-Technical-Knowledge-2.jpg","srcSet":"/static/2a412602419b450246a9d574f73d01c8/477ba/Does-Technical-Writing-Require-Technical-Knowledge-2.jpg 175w,\n/static/2a412602419b450246a9d574f73d01c8/06776/Does-Technical-Writing-Require-Technical-Knowledge-2.jpg 350w,\n/static/2a412602419b450246a9d574f73d01c8/ea4ab/Does-Technical-Writing-Require-Technical-Knowledge-2.jpg 700w,\n/static/2a412602419b450246a9d574f73d01c8/3055e/Does-Technical-Writing-Require-Technical-Knowledge-2.jpg 1050w,\n/static/2a412602419b450246a9d574f73d01c8/eff08/Does-Technical-Writing-Require-Technical-Knowledge-2.jpg 1400w,\n/static/2a412602419b450246a9d574f73d01c8/81a53/Does-Technical-Writing-Require-Technical-Knowledge-2.jpg 1560w","srcWebp":"/static/2a412602419b450246a9d574f73d01c8/89afa/Does-Technical-Writing-Require-Technical-Knowledge-2.webp","srcSetWebp":"/static/2a412602419b450246a9d574f73d01c8/9fca7/Does-Technical-Writing-Require-Technical-Knowledge-2.webp 175w,\n/static/2a412602419b450246a9d574f73d01c8/37a4e/Does-Technical-Writing-Require-Technical-Knowledge-2.webp 350w,\n/static/2a412602419b450246a9d574f73d01c8/89afa/Does-Technical-Writing-Require-Technical-Knowledge-2.webp 700w,\n/static/2a412602419b450246a9d574f73d01c8/78e7a/Does-Technical-Writing-Require-Technical-Knowledge-2.webp 1050w,\n/static/2a412602419b450246a9d574f73d01c8/03d34/Does-Technical-Writing-Require-Technical-Knowledge-2.webp 1400w,\n/static/2a412602419b450246a9d574f73d01c8/f5845/Does-Technical-Writing-Require-Technical-Knowledge-2.webp 1560w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}]}},"pageContext":{"slug":"chrome-88-new-feature-sharing","prev":"why-i-switched-from-atom-to-vs-code","next":"how-i-improved-my-css-skills","tag":"tips","limit":3,"skip":0,"primaryTagCount":45,"collectionPaths":{}}},"staticQueryHashes":["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}