![](\"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-before.png\")
I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps.
I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed.
Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it.
In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner.
Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it.
Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning.
This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities.
The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better.
This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send.
However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again.
As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget.
If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message.
I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram.
This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying.
This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better.
Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes.
To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them.
Are there other issues you found as well that are not mentioned here? Let me know!
","url":"https://backend.shahednasser.com/5-ux-issues-apple-needs-to-fix-in-the-messages/","canonical_url":null,"uuid":"df0db852-ea65-4a6f-87f6-ff376a89f5f0","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"601bff03d30862001e88d57b","reading_time":3,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps.
I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed.
Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it.
In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner.
Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it.
Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning.
This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities.
The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better.
This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send.
However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again.
As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget.
If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message.
I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram.
This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying.
This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better.
Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes.
To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them.
Are there other issues you found as well that are not mentioned here? Let me know!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"better-way-to-reply-to-specific-message"},"children":[{"type":"text","value":"Better Way to Reply to Specific Message"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"voice-messages-without-the-hassle"},"children":[{"type":"text","value":"Voice Messages Without The Hassle"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-s-"},"children":[{"type":"text","value":"The UX issue(s)"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"sending-a-photo-after-typing"},"children":[{"type":"text","value":"Sending A Photo After Typing"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-1"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"force-scrolling-when-a-message-is-received"},"children":[{"type":"text","value":"Force Scrolling When A Message Is Received"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-2"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"undo-message"},"children":[{"type":"text","value":"Undo Message"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better. "}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-3"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes. "}]},{"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":"To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Are there other issues you found as well that are not mentioned here? Let me know!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"better-way-to-reply-to-specific-message","heading":"Better Way to Reply to Specific Message","items":[{"id":"the-ux-issue","heading":"The UX Issue"}]},{"id":"voice-messages-without-the-hassle","heading":"Voice Messages Without The Hassle","items":[{"id":"the-ux-issue-s-","heading":"The UX issue(s)"}]},{"id":"sending-a-photo-after-typing","heading":"Sending A Photo After Typing","items":[{"id":"the-ux-issue-1","heading":"The UX Issue"}]},{"id":"force-scrolling-when-a-message-is-received","heading":"Force Scrolling When A Message Is Received","items":[{"id":"the-ux-issue-2","heading":"The UX Issue"}]},{"id":"undo-message","heading":"Undo Message","items":[{"id":"the-ux-issue-3","heading":"The UX Issue"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1552947602-4640901e9c67.jpg","publicURL":"/static/0edac04210c458a826788d8dd167e804/photo-1552947602-4640901e9c67.jpg","imageMeta":{"width":2000,"height":1123},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFUN8sVnjRP/8QAGxAAAQQDAAAAAAAAAAAAAAAAAQACAxEQEiH/2gAIAQEAAQUC0aIn9xVBwBkshf/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AUf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABAwUAAAAAAAAAAAAAAAAAARAhAhESMUH/2gAIAQEABj8C3lURFuMgrf/EABoQAQEBAAMBAAAAAAAAAAAAAAERACExQVH/2gAIAQEAAT8hDI+SSTT2K+HWRGTJGU5Pc5J3iwH3f//aAAwDAQACAAMAAAAQNz//xAAXEQEAAwAAAAAAAAAAAAAAAAAAARFR/9oACAEDAQE/EIxR/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAgEBPxC6Vn//xAAcEAEBAAICAwAAAAAAAAAAAAABEQAhMVFBYYH/2gAIAQEAAT8QGSwCuTgScQN3TgMhSV2SXr3iBITxMjbEAep9xRFCqKXEkwrP/9k=","aspectRatio":1.7808219178082192,"src":"/static/0edac04210c458a826788d8dd167e804/d5c54/photo-1552947602-4640901e9c67.jpg","srcSet":"/static/0edac04210c458a826788d8dd167e804/65d8c/photo-1552947602-4640901e9c67.jpg 260w,\n/static/0edac04210c458a826788d8dd167e804/c5f21/photo-1552947602-4640901e9c67.jpg 520w,\n/static/0edac04210c458a826788d8dd167e804/d5c54/photo-1552947602-4640901e9c67.jpg 1040w,\n/static/0edac04210c458a826788d8dd167e804/81a53/photo-1552947602-4640901e9c67.jpg 1560w,\n/static/0edac04210c458a826788d8dd167e804/4e5f3/photo-1552947602-4640901e9c67.jpg 2000w","srcWebp":"/static/0edac04210c458a826788d8dd167e804/e4875/photo-1552947602-4640901e9c67.webp","srcSetWebp":"/static/0edac04210c458a826788d8dd167e804/dc8f3/photo-1552947602-4640901e9c67.webp 260w,\n/static/0edac04210c458a826788d8dd167e804/2db4b/photo-1552947602-4640901e9c67.webp 520w,\n/static/0edac04210c458a826788d8dd167e804/e4875/photo-1552947602-4640901e9c67.webp 1040w,\n/static/0edac04210c458a826788d8dd167e804/f5845/photo-1552947602-4640901e9c67.webp 1560w,\n/static/0edac04210c458a826788d8dd167e804/49d6b/photo-1552947602-4640901e9c67.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"ghostPost":{"id":"Ghost__Post__6127ba1b3ed159214d382e82","title":"5 UX Issues Apple Needs To Fix In The Messages App","slug":"5-ux-issues-apple-needs-to-fix-in-the-messages","featured":false,"feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1552947602-4640901e9c67.jpg","excerpt":"The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps. ","custom_excerpt":"The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps. ","visibility":"public","created_at_pretty":"4 Feb 2021","published_at_pretty":"5 Feb 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-02-04T14:04:51.000+00:00","published_at":"2021-02-05T07:37:02.000+00:00","updated_at":"2021-08-26T17:49:47.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1493612276216-ee3925520721-2-1.jpeg","publicURL":"/static/55d051b88133a375df71095790dfd724/photo-1493612276216-ee3925520721-2-1.jpeg","imageMeta":{"width":2000,"height":2500},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAEEAwIF/8QAGAEAAgMAAAAAAAAAAAAAAAAAAAMBBAX/2gAMAwEAAhADEAAAAfTTmIpADGTfld2IQ7O//8QAHBAAAQUAAwAAAAAAAAAAAAAAAgABAxAREyEy/9oACAEBAAEFAr1DKznq1EHfITXL7//EABkRAAIDAQAAAAAAAAAAAAAAAAABAhESE//aAAgBAwEBPwHBzZlNEk4urP/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBES/9oACAECAQE/AbNQj//EABoQAAEFAQAAAAAAAAAAAAAAAAEAAhAgMRH/2gAIAQEABj8CoWz0atNP/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAQETGRIf/aAAgBAQABPyHFs6LI9owavPeKsdKaP//aAAwDAQACAAMAAAAQdBNO/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQAQIWH/2gAIAQMBAT8QXVhJGJWdn//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxC4tR0kIOX/xAAdEAACAgIDAQAAAAAAAAAAAAAAARExECFBUWFx/9oACAEBAAE/EHHojwjwQ+B45hVISYd1xThsbt5XLc4sWfEf/9k=","aspectRatio":0.8,"src":"/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg","srcSet":"/static/55d051b88133a375df71095790dfd724/65d8c/photo-1493612276216-ee3925520721-2-1.jpg 260w,\n/static/55d051b88133a375df71095790dfd724/c5f21/photo-1493612276216-ee3925520721-2-1.jpg 520w,\n/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg 1040w,\n/static/55d051b88133a375df71095790dfd724/81a53/photo-1493612276216-ee3925520721-2-1.jpg 1560w,\n/static/55d051b88133a375df71095790dfd724/4e5f3/photo-1493612276216-ee3925520721-2-1.jpg 2000w","srcWebp":"/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp","srcSetWebp":"/static/55d051b88133a375df71095790dfd724/dc8f3/photo-1493612276216-ee3925520721-2-1.webp 260w,\n/static/55d051b88133a375df71095790dfd724/2db4b/photo-1493612276216-ee3925520721-2-1.webp 520w,\n/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp 1040w,\n/static/55d051b88133a375df71095790dfd724/f5845/photo-1493612276216-ee3925520721-2-1.webp 1560w,\n/static/55d051b88133a375df71095790dfd724/49d6b/photo-1493612276216-ee3925520721-2-1.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"I use iMessage every day, and there are functionalities I always use that end up\nannoying me. The user experience in the Messages App needs more attention and\nimprovement, especially when certain features are available in easier ways in\nother apps. \n\nI will point out 5 UX issues I have faced in the Messages App and their impact\nor how they can be fixed.\n\n\n--------------------------------------------------------------------------------\n\nBetter Way to Reply to Specific Message\nEvery app that has messaging in them (except Twitter for some reason) have the\nreply feature. If you've used Instagram or Whatsapp, you'll know that you can\neasily reply to a message just by swiping it.\n\nIn Messages, you have to either double tap or long press on the message you want\nto reply to, then choose \"Reply\" and then you can reply to the message. But why?\nIt's so annoying when you use this a lot as it takes a lot of presses here and\nthere to do what can be done in a very simple manner.\n\nThe UX Issue\nUsers need 2 or 3 clicks to be able to use the feature. When you can save the\nuser even one click, then you shouldn't overlook it.\n\n\n--------------------------------------------------------------------------------\n\nVoice Messages Without The Hassle\nVoice messages in Messages (that sounds weird) is plain annoying to be\ncompletely honest. If you had to leave the app for some reason or wanted to\nlisten again to just one small part a few seconds earlier in the message, you\nhave to re-listen to the entire thing all over again to get to where you were.\nAnd if you are inside the app, you need to leave it and then open it again to be\nable to replay from the beginning. \n\nThis problem, as far as I am aware, is not found in any other messaging app. I'm\nnot sure what's next on their list for this app but I hope fixing this is one of\ntheir priorities.\n\nThe UX issue(s)\nThe users have to figure out on their own how to get something done. It should\nbe easy and accessible for the user to do something so trivial. The more you can\nmake things easier for the user, the better.\n\n\n--------------------------------------------------------------------------------\n\nSending A Photo After Typing\nThis is probably a bug rather than a UX issue, but I'm placing it here anyway.\nWhen you want to send a photo, you just click on the Photos App then choose the\nphoto you want to send. \n\nHowever, if you type out the message then you want to pick the photo you want to\nsend, it's not possible to get to the Photos app again. The arrow button next to\nthe text box does not work, so you have to remove your message to be able to add\nthe Photo, then paste or type out your message again.\n\nThe UX Issue\nAs I stated, this is probably a bug. However, for the sake of this post, the\nissue here is that we're providing hassles for the user to get to what they need\nto do. Users can be forgetful and they need a way to go back when they mess up\nor forget.\n\n\n--------------------------------------------------------------------------------\n\nForce Scrolling When A Message Is Received\nIf you are scrolling back in a chat to go back to a certain previous message,\nand the person in the chat sends a new message, the app scrolls back to the new\nmessage. This is so simple yet annoying as I have had to clearly tell the other\nperson \"STOP SENDING MESSAGES\" to be able to go back to a previous message.\n\nI'm not sure why scrolling to the new message is necessary. A better UX would be\nshowing you an arrow that when you press it takes you to the new message, like\nWhatsapp and Instagram.\n\nThe UX Issue\nThis issue implies that the team working on the Messages app probably doesn't\nunderstand users well, to be honest. Forcing users to go from one place to\nanother is just plain annoying.\n\n\n--------------------------------------------------------------------------------\n\nUndo Message\nThis one is not actually available in the app, which is the problem itself. We\nall tend to make mistakes, like sending a message to the wrong person (be\ncareful with those screenshots) or sending the wrong photo. An undo or delete\nfrom end to end is very needed to make the app better. \n\nThe UX Issue\nAgain, it's very important as part of your UX to actually understand users.\nUsers make tons of mistakes on the go, and we should make it easier for them to\ncorrect or revert their mistakes. \n\n\n--------------------------------------------------------------------------------\n\nConclusion\nTo realize the importance of fixing UX issues and improving the UX in your\napps/websites, just look back at how I kept comparing Messages to other apps\nlike Whatsapp or Instagram. When users find a better alternative for them that\nunderstands them and their patterns, they will just ditch your app for the\nalternative. That is why we need to make sure to understand our users and\nprovide the best solutions for them.\n\nAre there other issues you found as well that are not mentioned here? Let me\nknow!","html":"I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps.
I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed.
Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it.
In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner.
Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it.
Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning.
This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities.
The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better.
This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send.
However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again.
As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget.
If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message.
I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram.
This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying.
This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better.
Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes.
To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them.
Are there other issues you found as well that are not mentioned here? Let me know!
","url":"https://backend.shahednasser.com/5-ux-issues-apple-needs-to-fix-in-the-messages/","canonical_url":null,"uuid":"df0db852-ea65-4a6f-87f6-ff376a89f5f0","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"601bff03d30862001e88d57b","reading_time":3,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps.
I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed.
Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it.
In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner.
Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it.
Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning.
This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities.
The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better.
This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send.
However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again.
As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget.
If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message.
I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram.
This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying.
This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better.
Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes.
To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them.
Are there other issues you found as well that are not mentioned here? Let me know!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"better-way-to-reply-to-specific-message"},"children":[{"type":"text","value":"Better Way to Reply to Specific Message"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"voice-messages-without-the-hassle"},"children":[{"type":"text","value":"Voice Messages Without The Hassle"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-s-"},"children":[{"type":"text","value":"The UX issue(s)"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"sending-a-photo-after-typing"},"children":[{"type":"text","value":"Sending A Photo After Typing"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-1"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"force-scrolling-when-a-message-is-received"},"children":[{"type":"text","value":"Force Scrolling When A Message Is Received"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-2"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"undo-message"},"children":[{"type":"text","value":"Undo Message"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better. "}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-3"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes. "}]},{"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":"To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Are there other issues you found as well that are not mentioned here? Let me know!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"better-way-to-reply-to-specific-message","heading":"Better Way to Reply to Specific Message","items":[{"id":"the-ux-issue","heading":"The UX Issue"}]},{"id":"voice-messages-without-the-hassle","heading":"Voice Messages Without The Hassle","items":[{"id":"the-ux-issue-s-","heading":"The UX issue(s)"}]},{"id":"sending-a-photo-after-typing","heading":"Sending A Photo After Typing","items":[{"id":"the-ux-issue-1","heading":"The UX Issue"}]},{"id":"force-scrolling-when-a-message-is-received","heading":"Force Scrolling When A Message Is Received","items":[{"id":"the-ux-issue-2","heading":"The UX Issue"}]},{"id":"undo-message","heading":"Undo Message","items":[{"id":"the-ux-issue-3","heading":"The UX Issue"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1552947602-4640901e9c67.jpg","publicURL":"/static/0edac04210c458a826788d8dd167e804/photo-1552947602-4640901e9c67.jpg","imageMeta":{"width":2000,"height":1123},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFUN8sVnjRP/8QAGxAAAQQDAAAAAAAAAAAAAAAAAQACAxEQEiH/2gAIAQEAAQUC0aIn9xVBwBkshf/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AUf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABAwUAAAAAAAAAAAAAAAAAARAhAhESMUH/2gAIAQEABj8C3lURFuMgrf/EABoQAQEBAAMBAAAAAAAAAAAAAAERACExQVH/2gAIAQEAAT8hDI+SSTT2K+HWRGTJGU5Pc5J3iwH3f//aAAwDAQACAAMAAAAQNz//xAAXEQEAAwAAAAAAAAAAAAAAAAAAARFR/9oACAEDAQE/EIxR/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAgEBPxC6Vn//xAAcEAEBAAICAwAAAAAAAAAAAAABEQAhMVFBYYH/2gAIAQEAAT8QGSwCuTgScQN3TgMhSV2SXr3iBITxMjbEAep9xRFCqKXEkwrP/9k=","aspectRatio":1.7808219178082192,"src":"/static/0edac04210c458a826788d8dd167e804/d5c54/photo-1552947602-4640901e9c67.jpg","srcSet":"/static/0edac04210c458a826788d8dd167e804/65d8c/photo-1552947602-4640901e9c67.jpg 260w,\n/static/0edac04210c458a826788d8dd167e804/c5f21/photo-1552947602-4640901e9c67.jpg 520w,\n/static/0edac04210c458a826788d8dd167e804/d5c54/photo-1552947602-4640901e9c67.jpg 1040w,\n/static/0edac04210c458a826788d8dd167e804/81a53/photo-1552947602-4640901e9c67.jpg 1560w,\n/static/0edac04210c458a826788d8dd167e804/4e5f3/photo-1552947602-4640901e9c67.jpg 2000w","srcWebp":"/static/0edac04210c458a826788d8dd167e804/e4875/photo-1552947602-4640901e9c67.webp","srcSetWebp":"/static/0edac04210c458a826788d8dd167e804/dc8f3/photo-1552947602-4640901e9c67.webp 260w,\n/static/0edac04210c458a826788d8dd167e804/2db4b/photo-1552947602-4640901e9c67.webp 520w,\n/static/0edac04210c458a826788d8dd167e804/e4875/photo-1552947602-4640901e9c67.webp 1040w,\n/static/0edac04210c458a826788d8dd167e804/f5845/photo-1552947602-4640901e9c67.webp 1560w,\n/static/0edac04210c458a826788d8dd167e804/49d6b/photo-1552947602-4640901e9c67.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"prev":{"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"}}}},"next":{"id":"Ghost__Post__6127ba1b3ed159214d382e81","title":"Google In Dark Mode","slug":"google-in-dark-mode","featured":false,"feature_image":"https://res-5.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1573804633927-bfcbcd909acd.jpg","excerpt":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. So, what if Google was in Dark Mode?","custom_excerpt":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. So, what if Google was in Dark Mode?","visibility":"public","created_at_pretty":"3 Feb 2021","published_at_pretty":"4 Feb 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-02-03T14:08:22.000+00:00","published_at":"2021-02-04T07:44:01.000+00:00","updated_at":"2021-08-26T17:49:55.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":"design","url":"https://backend.shahednasser.com/tag/design/","name":"Design","visibility":"public","feature_image":null,"description":"Learn more about Web Design through tutorials, articles and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"If you're anything like me, then you must love Dark Mode on anything. It is\ncooler and classier, but also easier for the eyes. It is now getting adapted\nmore in most sites and apps, however, not all of them are going with the trend\nyet.\n\nThe website that we all use the most almost every day is one of them. Google,\neveryone's favorite search engine, does not support dark mode. So, for the fun\nof it I thought I'd try and imagine how Google's Dark Mode would look like.\n\nI will be using Material's Dark theme\n[https://material.io/design/color/dark-theme.html#properties] for the color\npalette for the dark mode.\n\n\n--------------------------------------------------------------------------------\n\nYou already know this but just for the sake of comparison, this is how Google\nlooks like by default:\n\nThe first obvious step is to change the background color of the body to a dark\ncolor, and change the color of the text in the body to a light color. Based on\nMaterial's Dark Theme, the dark color that we will be using for the body is \n#121212 and the light color for the text is #fff. \n\nSo, this is the CSS I'll be adding:\n\nbody {\n background-color: #121212;\n color: #fff;\n}\n\nAnd this is the result:\n\nMore work needs to be done. We have sections in the body that explicitly have\ntheir background color set to white. \n\nAfter inspecting the elements in Chrome's Devtools, I found that the elements\nthat have white background color are: #hdtb and .yg51vc for the navigation bar, \n#appbar for the results bar (the one that shows the number of results found), \n.sfbg for the background of the header, and .RNNXgb for the background color of\nthe input. I also noticed that #hdtb has a border bottom and the color of it is\nset to #ebebeb which is a light color, so it needs to be changed as well.\n\nI know what you are thinking, these classes and IDs must be randomly generated.\nThat's what I thought too, however, after testing it on a few tries I found that\nthey are not random. They're always the same.\n\nSo the next rules I added were as follows:\n\n#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {\n background: #121212;\n}\n\n.RNNXgb {\n background: #2b2b2b !important; /** Give it a different color than the background to stand out **/\n}\n\n.gLFyf {\n color: #fff; /** The input for the search field **/\n}\n\n#hdtb {\n border-bottom-color: #1F1B24;\n}\n\nAnd this was the result:\n\nSo, now the background is dark, but there's a lot more work to do. \n\nAlmost all of the text in the page was not affected by changing the color for\nthe body element. So, we need to inspect the elements and see how to change it.\n\nI started with the navigation bar. After inspecting it, the elements .hdtb-mitem\na, .hdtb-mitem .GOE98c and .GshZze have the color set to #5f6368. So, I added\nthe following rules:\n\n.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {\n color: #FFFFFF !important;\n}\n\nAnd this was the result:\n\nNext, the results bar. The class that had the color set to it was .LHJvCe. So I\nadded the following rules:\n\n.LHJvCe {\n color: #FFFFFF;\n}\n\nAnd this was the result:\n\nNext, I moved on to the text and links in the results. Starting with the text\nand after inspecting the elements, the elements .IsZvec and .aCOpRe em need to\nbe changed. I noticed that .aCOpRe em is used to point out the text that's\nincluded in the search query, so I decided to give it a different color.\n\nI added the following rules:\n\n.IsZvec {\n color: #adadad;\n}\n\n.aCOpRe em {\n color: #e4e4e4;\n}\n\nAs for the citation, or the links breadcrumb above the result, the element that\nneeded to change was cite. I added the following rules:\n\ncite, cite a:link, cite a:visited {\n color: #9c9c9c;\n}\n\nAnd this was the result:\n\nNow for the links of the results, Google just sets the color rule on all a \nelements. For the \"Translate this page\" link it sets the rule on a.fl:link.\nPretty simple. So I added the following rule to change the color: \n\na, a.fl:link {\n\tcolor: #BB86FC;\n}\n\na:visited {\n\tcolor: #9326ca; /** color for the visited links **/\n}\n\nAnd finally the result was:\n\nAnd we're done! Obviously, this is just for the main results page of the\nwebsite, but it looks nice.\n\nFor comparison, here's the difference between the light and dark modes:\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nWhich version did you like of Google more? And which websites or apps do you\nwish they had dark mode? Let me know!","html":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet.
The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like.
I will be using Material's Dark theme for the color palette for the dark mode.
You already know this but just for the sake of comparison, this is how Google looks like by default:
The first obvious step is to change the background color of the body to a dark color, and change the color of the text in the body to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is #121212 and the light color for the text is #fff.
So, this is the CSS I'll be adding:
body {\n background-color: #121212;\n color: #fff;\n}And this is the result:
![](\"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-first-step.png\")
More work needs to be done. We have sections in the body that explicitly have their background color set to white.
After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: #hdtb and .yg51vc for the navigation bar, #appbar for the results bar (the one that shows the number of results found), .sfbg for the background of the header, and .RNNXgb for the background color of the input. I also noticed that #hdtb has a border bottom and the color of it is set to #ebebeb which is a light color, so it needs to be changed as well.
I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same.
So the next rules I added were as follows:
#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {\n background: #121212;\n}\n\n.RNNXgb {\n background: #2b2b2b !important; /** Give it a different color than the background to stand out **/\n}\n\n.gLFyf {\n color: #fff; /** The input for the search field **/\n}\n\n#hdtb {\n border-bottom-color: #1F1B24;\n}And this was the result:
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-second-step.png\")
So, now the background is dark, but there's a lot more work to do.
Almost all of the text in the page was not affected by changing the color for the body element. So, we need to inspect the elements and see how to change it.
I started with the navigation bar. After inspecting it, the elements .hdtb-mitem a, .hdtb-mitem .GOE98c and .GshZze have the color set to #5f6368. So, I added the following rules:
.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {\n color: #FFFFFF !important;\n}And this was the result:
![](\"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-third-step.png\")
Next, the results bar. The class that had the color set to it was .LHJvCe. So I added the following rules:
.LHJvCe {\n color: #FFFFFF;\n}And this was the result:
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fourth-step.png\")
Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements .IsZvec and .aCOpRe em need to be changed. I noticed that .aCOpRe em is used to point out the text that's included in the search query, so I decided to give it a different color.
I added the following rules:
.IsZvec {\n color: #adadad;\n}\n\n.aCOpRe em {\n color: #e4e4e4;\n}As for the citation, or the links breadcrumb above the result, the element that needed to change was cite. I added the following rules:
cite, cite a:link, cite a:visited {\n color: #9c9c9c;\n}And this was the result:
![](\"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fifth-step.png\")
Now for the links of the results, Google just sets the color rule on all a elements. For the \"Translate this page\" link it sets the rule on a.fl:link. Pretty simple. So I added the following rule to change the color:
a, a.fl:link {\n\tcolor: #BB86FC;\n}\n\na:visited {\n\tcolor: #9326ca; /** color for the visited links **/\n}And finally the result was:
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-last-step.png\")
And we're done! Obviously, this is just for the main results page of the website, but it looks nice.
For comparison, here's the difference between the light and dark modes:
Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!
","url":"https://backend.shahednasser.com/google-in-dark-mode/","canonical_url":null,"uuid":"70e91e99-1748-422c-9d1a-9528e0e0f0c9","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"601aae5672ad5e001ed32c8f","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet.
The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like.
I will be using Material's Dark theme for the color palette for the dark mode.
You already know this but just for the sake of comparison, this is how Google looks like by default:
The first obvious step is to change the background color of the body to a dark color, and change the color of the text in the body to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is #121212 and the light color for the text is #fff.
So, this is the CSS I'll be adding:
body {\n background-color: #121212;\n color: #fff;\n}And this is the result:
More work needs to be done. We have sections in the body that explicitly have their background color set to white.
After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: #hdtb and .yg51vc for the navigation bar, #appbar for the results bar (the one that shows the number of results found), .sfbg for the background of the header, and .RNNXgb for the background color of the input. I also noticed that #hdtb has a border bottom and the color of it is set to #ebebeb which is a light color, so it needs to be changed as well.
I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same.
So the next rules I added were as follows:
#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {\n background: #121212;\n}\n\n.RNNXgb {\n background: #2b2b2b !important; /** Give it a different color than the background to stand out **/\n}\n\n.gLFyf {\n color: #fff; /** The input for the search field **/\n}\n\n#hdtb {\n border-bottom-color: #1F1B24;\n}And this was the result:
So, now the background is dark, but there's a lot more work to do.
Almost all of the text in the page was not affected by changing the color for the body element. So, we need to inspect the elements and see how to change it.
I started with the navigation bar. After inspecting it, the elements .hdtb-mitem a, .hdtb-mitem .GOE98c and .GshZze have the color set to #5f6368. So, I added the following rules:
.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {\n color: #FFFFFF !important;\n}And this was the result:
Next, the results bar. The class that had the color set to it was .LHJvCe. So I added the following rules:
.LHJvCe {\n color: #FFFFFF;\n}And this was the result:
Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements .IsZvec and .aCOpRe em need to be changed. I noticed that .aCOpRe em is used to point out the text that's included in the search query, so I decided to give it a different color.
I added the following rules:
.IsZvec {\n color: #adadad;\n}\n\n.aCOpRe em {\n color: #e4e4e4;\n}As for the citation, or the links breadcrumb above the result, the element that needed to change was cite. I added the following rules:
cite, cite a:link, cite a:visited {\n color: #9c9c9c;\n}And this was the result:
Now for the links of the results, Google just sets the color rule on all a elements. For the \"Translate this page\" link it sets the rule on a.fl:link. Pretty simple. So I added the following rule to change the color:
a, a.fl:link {\n\tcolor: #BB86FC;\n}\n\na:visited {\n\tcolor: #9326ca; /** color for the visited links **/\n}And finally the result was:
And we're done! Obviously, this is just for the main results page of the website, but it looks nice.
For comparison, here's the difference between the light and dark modes:
Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will be using Material's "},{"type":"element","tagName":"a","properties":{"href":"https://material.io/design/color/dark-theme.html#properties"},"children":[{"type":"text","value":"Dark theme"}]},{"type":"text","value":" for the color palette for the dark mode."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You already know this but just for the sake of comparison, this is how Google looks like by default:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-before.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first obvious step is to change the background color of the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" to a dark color, and change the color of the text in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#121212"}]},{"type":"text","value":" and the light color for the text is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#fff"}]},{"type":"text","value":". "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, this is the CSS I'll be adding:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #121212"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fff"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And this is the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-first-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"More work needs to be done. We have sections in the body that explicitly have their background color set to white. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#hdtb"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".yg51vc"}]},{"type":"text","value":" for the navigation bar, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#appbar"}]},{"type":"text","value":" for the results bar (the one that shows the number of results found), "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".sfbg"}]},{"type":"text","value":" for the background of the header, and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".RNNXgb"}]},{"type":"text","value":" for the background color of the input. I also noticed that "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#hdtb"}]},{"type":"text","value":" has a border bottom and the color of it is set to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#ebebeb"}]},{"type":"text","value":" which is a light color, so it needs to be changed as well."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So the next rules I added were as follows:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #121212"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".RNNXgb"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #2b2b2b "},{"type":"element","tagName":"span","properties":{"className":["token","important"]},"children":[{"type":"text","value":"!important"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** Give it a different color than the background to stand out **/"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".gLFyf"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fff"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** The input for the search field **/"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"#hdtb"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-bottom-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #1F1B24"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-second-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, now the background is dark, but there's a lot more work to do. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Almost all of the text in the page was not affected by changing the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"color"}]},{"type":"text","value":" for the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" element. So, we need to inspect the elements and see how to change it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I started with the navigation bar. After inspecting it, the elements "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".hdtb-mitem a"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".hdtb-mitem .GOE98c"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".GshZze"}]},{"type":"text","value":" have the color set to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#5f6368"}]},{"type":"text","value":". So, I added the following rules:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF "},{"type":"element","tagName":"span","properties":{"className":["token","important"]},"children":[{"type":"text","value":"!important"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-third-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, the results bar. The class that had the color set to it was "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".LHJvCe"}]},{"type":"text","value":". So I added the following rules:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".LHJvCe"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fourth-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".IsZvec"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".aCOpRe em"}]},{"type":"text","value":" need to be changed. I noticed that "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".aCOpRe em"}]},{"type":"text","value":" is used to point out the text that's included in the search query, so I decided to give it a different color."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I added the following rules:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".IsZvec"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #adadad"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".aCOpRe em"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #e4e4e4"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As for the citation, or the links breadcrumb above the result, the element that needed to change was "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cite"}]},{"type":"text","value":". I added the following rules:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"cite, cite a:link, cite a:visited"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #9c9c9c"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fifth-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now for the links of the results, Google just sets the color rule on all "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"a"}]},{"type":"text","value":" elements. For the \"Translate this page\" link it sets the rule on "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"a.fl:link"}]},{"type":"text","value":". Pretty simple. So I added the following rule to change the color: "}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"a, a.fl:link"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #BB86FC"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"a:visited"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #9326ca"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/** color for the visited links **/"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And finally the result was:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-last-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And we're done! Obviously, this is just for the main results page of the website, but it looks nice."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For comparison, here's the difference between the light and dark modes:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-gallery-card","kg-width-wide"]},"children":[{"type":"element","tagName":"div","properties":{"className":["kg-gallery-container"]},"children":[{"type":"element","tagName":"div","properties":{"className":["kg-gallery-row"]},"children":[{"type":"element","tagName":"div","properties":{"className":["kg-gallery-image"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-before.png","width":1844,"height":820,"loading":"lazy","alt":""},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["kg-gallery-image"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-last-step.png","width":1838,"height":823,"loading":"lazy","alt":""},"children":[]}]}]}]}]},{"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":"Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1573804633927-bfcbcd909acd.jpg","publicURL":"/static/ac4d8a92057297fd689566be0039ed6a/photo-1573804633927-bfcbcd909acd.jpg","imageMeta":{"width":2000,"height":1252},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB4dZ0Epr/xAAZEAEBAAMBAAAAAAAAAAAAAAABAAIREgP/2gAIAQEAAQUCxx3Pmlwwpdttv//EABURAQEAAAAAAAAAAAAAAAAAAAAh/9oACAEDAQE/AUf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAgEBPwGn/8QAFhABAQEAAAAAAAAAAAAAAAAAEDEA/9oACAEBAAY/Aml3/8QAGxABAQACAwEAAAAAAAAAAAAAAQBBYREhMZH/2gAIAQEAAT8h+D2YxIOJTkRbXq3L/9oADAMBAAIAAwAAABDPL//EABgRAAMBAQAAAAAAAAAAAAAAAAARIQFh/9oACAEDAQE/EIumTWf/xAAXEQADAQAAAAAAAAAAAAAAAAAAASFR/9oACAECAQE/EI0wp//EABsQAQEBAQEAAwAAAAAAAAAAAAERADEhUaHR/9oACAEBAAE/EFSknR4ZsMTvvPjQH2Zjyo4jJvQbRAVQ0/03/9k=","aspectRatio":1.5909090909090908,"src":"/static/ac4d8a92057297fd689566be0039ed6a/ea4ab/photo-1573804633927-bfcbcd909acd.jpg","srcSet":"/static/ac4d8a92057297fd689566be0039ed6a/477ba/photo-1573804633927-bfcbcd909acd.jpg 175w,\n/static/ac4d8a92057297fd689566be0039ed6a/06776/photo-1573804633927-bfcbcd909acd.jpg 350w,\n/static/ac4d8a92057297fd689566be0039ed6a/ea4ab/photo-1573804633927-bfcbcd909acd.jpg 700w,\n/static/ac4d8a92057297fd689566be0039ed6a/3055e/photo-1573804633927-bfcbcd909acd.jpg 1050w,\n/static/ac4d8a92057297fd689566be0039ed6a/eff08/photo-1573804633927-bfcbcd909acd.jpg 1400w,\n/static/ac4d8a92057297fd689566be0039ed6a/4e5f3/photo-1573804633927-bfcbcd909acd.jpg 2000w","srcWebp":"/static/ac4d8a92057297fd689566be0039ed6a/89afa/photo-1573804633927-bfcbcd909acd.webp","srcSetWebp":"/static/ac4d8a92057297fd689566be0039ed6a/9fca7/photo-1573804633927-bfcbcd909acd.webp 175w,\n/static/ac4d8a92057297fd689566be0039ed6a/37a4e/photo-1573804633927-bfcbcd909acd.webp 350w,\n/static/ac4d8a92057297fd689566be0039ed6a/89afa/photo-1573804633927-bfcbcd909acd.webp 700w,\n/static/ac4d8a92057297fd689566be0039ed6a/78e7a/photo-1573804633927-bfcbcd909acd.webp 1050w,\n/static/ac4d8a92057297fd689566be0039ed6a/03d34/photo-1573804633927-bfcbcd909acd.webp 1400w,\n/static/ac4d8a92057297fd689566be0039ed6a/49d6b/photo-1573804633927-bfcbcd909acd.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__6228bd111594e705e60e17b9","title":"Why I Transitioned From a Full-Stack Developer to a Technical Writer","slug":"why-i-transitioned-from-a-full-stack-developer-to-a-technical-writer","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/03/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp","excerpt":"In this article, I share with you how I first started technical writing, and why am I transitioning into full-time technical writing.","custom_excerpt":"In this article, I share with you how I first started technical writing, and why am I transitioning into full-time technical writing.","visibility":"public","created_at_pretty":"9 Mar 2022","published_at_pretty":"15 Mar 2022","updated_at_pretty":"27 Mar 2022","created_at":"2022-03-09T14:43:29.000+00:00","published_at":"2022-03-15T07:45:23.000+00:00","updated_at":"2022-03-27T10:36: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":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1493612276216-ee3925520721-2-1.jpeg","publicURL":"/static/55d051b88133a375df71095790dfd724/photo-1493612276216-ee3925520721-2-1.jpeg","imageMeta":{"width":2000,"height":2500},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAEEAwIF/8QAGAEAAgMAAAAAAAAAAAAAAAAAAAMBBAX/2gAMAwEAAhADEAAAAfTTmIpADGTfld2IQ7O//8QAHBAAAQUAAwAAAAAAAAAAAAAAAgABAxAREyEy/9oACAEBAAEFAr1DKznq1EHfITXL7//EABkRAAIDAQAAAAAAAAAAAAAAAAABAhESE//aAAgBAwEBPwHBzZlNEk4urP/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBES/9oACAECAQE/AbNQj//EABoQAAEFAQAAAAAAAAAAAAAAAAEAAhAgMRH/2gAIAQEABj8CoWz0atNP/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAQETGRIf/aAAgBAQABPyHFs6LI9owavPeKsdKaP//aAAwDAQACAAMAAAAQdBNO/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQAQIWH/2gAIAQMBAT8QXVhJGJWdn//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxC4tR0kIOX/xAAdEAACAgIDAQAAAAAAAAAAAAAAARExECFBUWFx/9oACAEBAAE/EHHojwjwQ+B45hVISYd1xThsbt5XLc4sWfEf/9k=","aspectRatio":0.8,"src":"/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg","srcSet":"/static/55d051b88133a375df71095790dfd724/65d8c/photo-1493612276216-ee3925520721-2-1.jpg 260w,\n/static/55d051b88133a375df71095790dfd724/c5f21/photo-1493612276216-ee3925520721-2-1.jpg 520w,\n/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg 1040w,\n/static/55d051b88133a375df71095790dfd724/81a53/photo-1493612276216-ee3925520721-2-1.jpg 1560w,\n/static/55d051b88133a375df71095790dfd724/4e5f3/photo-1493612276216-ee3925520721-2-1.jpg 2000w","srcWebp":"/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp","srcSetWebp":"/static/55d051b88133a375df71095790dfd724/dc8f3/photo-1493612276216-ee3925520721-2-1.webp 260w,\n/static/55d051b88133a375df71095790dfd724/2db4b/photo-1493612276216-ee3925520721-2-1.webp 520w,\n/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp 1040w,\n/static/55d051b88133a375df71095790dfd724/f5845/photo-1493612276216-ee3925520721-2-1.webp 1560w,\n/static/55d051b88133a375df71095790dfd724/49d6b/photo-1493612276216-ee3925520721-2-1.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"For the past 5 years, I've been working as a full-stack developer, both\nfull-time and freelance. I learned a lot through it and have become better with\ntime.\n\nA year ago I started technical writing. I wrote articles, tutorials, and\ndocumentation for my own blog as well as other websites, agencies, and clients.\nIt became a hobby of mine that I really enjoyed.\n\nToday, I start my new job as a Technical Writer at Medusa\n[https://www.medusajs.com]. This decision wasn't an easy one and it took me a\nwhile to finally make the transition.\n\nIn this article, I share with you how I first started technical writing, and why\nam I transitioning into full-time technical writing.\n\nHow it Started\nI've always loved writing in general. For a long time, I debated whether I\nshould create a blog or not. Although I have my fair share of experience as a\ndeveloper, I still considered myself an average developer. So, I didn't think\nanyone would be interested to read my content or that I had anything helpful to\nshare.\n\nI finally decided to create my own blog in December 2020. It wasn't because I\nsuddenly gained the motivation or courage. It was mostly a \"even if I fail and\nno one reads my content, what could go wrong?\" kind of decision. I tried a\ndifferent kind of content. Some got a lot of attention from other developers,\nothers not so much. However, the best part about it all was receiving feedback,\neven from one person, saying that this article or tutorial helped them\nunderstand or learn something better.\n\n Then, at the end of March 2021, I learned that you can actually get paid to\nwrite for other websites! It may seem like common knowledge to a lot of people,\nbut to me it was news. I didn't know whether my content was good enough or not,\nbut I decided to apply anyway. I applied to a lot of websites and agencies, and\nthat's what really kickstarted my technical writing journey.\n\nIn the past year, I was able to write for a lot of websites and agencies like \nSitePoint, Draft.dev, LogRocket, and more\n[https://blog.shahednasser.com/8-technical-writing-tips-i-learned-from-writing-for-sitepoint-draft-dev-and-more]\n. I was also able to work with my own clients, which was how I started my\njourney with Medusa.\n\nEven though I really loved technical writing, it took a lot of thinking and\nconsideration to finally embark on this journey and become a full-time technical\nwriter.\n\nWhy I Made the Transition\nLearn More\nAs I mentioned earlier I learned a lot from being a developer. However, when you\nare a developer a lot of time, especially if you work for a company that creates\nwebsites for other companies rather than having its own product, you end up\nprioritizing delivering features rather than the quality of the code or\narchitecture. It becomes a \"let's just get this over with\" sort of mentality. \n\nWhen I started technical writing, however, I became more curious. I started\nthinking \"ok, but how does this thing work?\" I also began diving more deeply\ninto topics rather than learning surface-level details. \n\nEven if you're not interested in writing, I recommend that you take the time to\nwrite about things as you learn them. It'll help you truly understand what\nyou're learning instead of just applying.\n\nHelp Beginners\nMy main focus when writing is making sure that my content is easily\nunderstandable by beginners. Whether it's beginners to programming in general or\nto a certain tool, framework, or programming language. \n\nI like to simplify my content, whether in the words I use or the approach I\ntake. The first tutorial or guide a beginner finds while learning something can\nbe a make-it or break-it sort of thing. If it's too complicated or doesn't give\nthe reader a real understanding of what they're doing, it's a waste of their\ntime.\n\nCloser to the Community\nI'm an introverted person. I've always struggled with communicating with people\nin general. This has also stopped me from becoming closer to the tech community\nin the past years. \n\nEver since I started sharing my content across platforms, it helped me meet new\npeople, learn from people's feedback, and have more love and support for the\ncommunity. And going back to the previous point, it made me want to make more\n(hopefully helpful) content for those in the community who do not necessarily\nhave access to paid resources.\n\nBuild the Foundation\nThis is specific to my work at Medusa. As Medusa is a fairly new platform, we\nare still lacking in terms of technical content and documentation. We are going\nto be building the documentation from the ground up to ensure that it's easy to\nunderstand by anyone who wishes to use and learn about the platform.\n\nAs I believe that Medusa will become more and more successful in the upcoming\nyears, I'm excited to be part of the team working on the foundation of the\ndocumentation of a platform that will hopefully grow with time.\n\nAlso, as an open-source platform that appreciates and works closely with its\ncommunity, Medusa's values align well with why I love writing and want to keep\ndoing it.\n\nConclusion\nThis is a personal post that maybe not many will read or be interested in. But\nthis is a very important one for me. After a long time of struggling to find my\nfooting in my career, I've finally reached a point where I understand what I\nwant and have the opportunity to get there.\n\nIf you're reading this and you're still confused about what direction you want\nto go in, give yourself some time and experiment with different projects. As\ncheesy as it sounds, with hard work and dedication you'll get there sooner or\nlater.","html":"For the past 5 years, I've been working as a full-stack developer, both full-time and freelance. I learned a lot through it and have become better with time.
A year ago I started technical writing. I wrote articles, tutorials, and documentation for my own blog as well as other websites, agencies, and clients. It became a hobby of mine that I really enjoyed.
Today, I start my new job as a Technical Writer at Medusa. This decision wasn't an easy one and it took me a while to finally make the transition.
In this article, I share with you how I first started technical writing, and why am I transitioning into full-time technical writing.
I've always loved writing in general. For a long time, I debated whether I should create a blog or not. Although I have my fair share of experience as a developer, I still considered myself an average developer. So, I didn't think anyone would be interested to read my content or that I had anything helpful to share.
I finally decided to create my own blog in December 2020. It wasn't because I suddenly gained the motivation or courage. It was mostly a \"even if I fail and no one reads my content, what could go wrong?\" kind of decision. I tried a different kind of content. Some got a lot of attention from other developers, others not so much. However, the best part about it all was receiving feedback, even from one person, saying that this article or tutorial helped them understand or learn something better.
Then, at the end of March 2021, I learned that you can actually get paid to write for other websites! It may seem like common knowledge to a lot of people, but to me it was news. I didn't know whether my content was good enough or not, but I decided to apply anyway. I applied to a lot of websites and agencies, and that's what really kickstarted my technical writing journey.
In the past year, I was able to write for a lot of websites and agencies like SitePoint, Draft.dev, LogRocket, and more. I was also able to work with my own clients, which was how I started my journey with Medusa.
Even though I really loved technical writing, it took a lot of thinking and consideration to finally embark on this journey and become a full-time technical writer.
As I mentioned earlier I learned a lot from being a developer. However, when you are a developer a lot of time, especially if you work for a company that creates websites for other companies rather than having its own product, you end up prioritizing delivering features rather than the quality of the code or architecture. It becomes a \"let's just get this over with\" sort of mentality.
When I started technical writing, however, I became more curious. I started thinking \"ok, but how does this thing work?\" I also began diving more deeply into topics rather than learning surface-level details.
Even if you're not interested in writing, I recommend that you take the time to write about things as you learn them. It'll help you truly understand what you're learning instead of just applying.
My main focus when writing is making sure that my content is easily understandable by beginners. Whether it's beginners to programming in general or to a certain tool, framework, or programming language.
I like to simplify my content, whether in the words I use or the approach I take. The first tutorial or guide a beginner finds while learning something can be a make-it or break-it sort of thing. If it's too complicated or doesn't give the reader a real understanding of what they're doing, it's a waste of their time.
I'm an introverted person. I've always struggled with communicating with people in general. This has also stopped me from becoming closer to the tech community in the past years.
Ever since I started sharing my content across platforms, it helped me meet new people, learn from people's feedback, and have more love and support for the community. And going back to the previous point, it made me want to make more (hopefully helpful) content for those in the community who do not necessarily have access to paid resources.
This is specific to my work at Medusa. As Medusa is a fairly new platform, we are still lacking in terms of technical content and documentation. We are going to be building the documentation from the ground up to ensure that it's easy to understand by anyone who wishes to use and learn about the platform.
As I believe that Medusa will become more and more successful in the upcoming years, I'm excited to be part of the team working on the foundation of the documentation of a platform that will hopefully grow with time.
Also, as an open-source platform that appreciates and works closely with its community, Medusa's values align well with why I love writing and want to keep doing it.
This is a personal post that maybe not many will read or be interested in. But this is a very important one for me. After a long time of struggling to find my footing in my career, I've finally reached a point where I understand what I want and have the opportunity to get there.
If you're reading this and you're still confused about what direction you want to go in, give yourself some time and experiment with different projects. As cheesy as it sounds, with hard work and dedication you'll get there sooner or later.
","url":"https://backend.shahednasser.com/why-i-transitioned-from-a-full-stack-developer-to-a-technical-writer/","canonical_url":null,"uuid":"e51c5272-02af-4bbb-88b8-f2fe473ccaf6","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"6228bd111594e705e60e17b9","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"For the past 5 years, I've been working as a full-stack developer, both full-time and freelance. I learned a lot through it and have become better with time.
A year ago I started technical writing. I wrote articles, tutorials, and documentation for my own blog as well as other websites, agencies, and clients. It became a hobby of mine that I really enjoyed.
Today, I start my new job as a Technical Writer at Medusa. This decision wasn't an easy one and it took me a while to finally make the transition.
In this article, I share with you how I first started technical writing, and why am I transitioning into full-time technical writing.
I've always loved writing in general. For a long time, I debated whether I should create a blog or not. Although I have my fair share of experience as a developer, I still considered myself an average developer. So, I didn't think anyone would be interested to read my content or that I had anything helpful to share.
I finally decided to create my own blog in December 2020. It wasn't because I suddenly gained the motivation or courage. It was mostly a \"even if I fail and no one reads my content, what could go wrong?\" kind of decision. I tried a different kind of content. Some got a lot of attention from other developers, others not so much. However, the best part about it all was receiving feedback, even from one person, saying that this article or tutorial helped them understand or learn something better.
Then, at the end of March 2021, I learned that you can actually get paid to write for other websites! It may seem like common knowledge to a lot of people, but to me it was news. I didn't know whether my content was good enough or not, but I decided to apply anyway. I applied to a lot of websites and agencies, and that's what really kickstarted my technical writing journey.
In the past year, I was able to write for a lot of websites and agencies like SitePoint, Draft.dev, LogRocket, and more. I was also able to work with my own clients, which was how I started my journey with Medusa.
Even though I really loved technical writing, it took a lot of thinking and consideration to finally embark on this journey and become a full-time technical writer.
As I mentioned earlier I learned a lot from being a developer. However, when you are a developer a lot of time, especially if you work for a company that creates websites for other companies rather than having its own product, you end up prioritizing delivering features rather than the quality of the code or architecture. It becomes a \"let's just get this over with\" sort of mentality.
When I started technical writing, however, I became more curious. I started thinking \"ok, but how does this thing work?\" I also began diving more deeply into topics rather than learning surface-level details.
Even if you're not interested in writing, I recommend that you take the time to write about things as you learn them. It'll help you truly understand what you're learning instead of just applying.
My main focus when writing is making sure that my content is easily understandable by beginners. Whether it's beginners to programming in general or to a certain tool, framework, or programming language.
I like to simplify my content, whether in the words I use or the approach I take. The first tutorial or guide a beginner finds while learning something can be a make-it or break-it sort of thing. If it's too complicated or doesn't give the reader a real understanding of what they're doing, it's a waste of their time.
I'm an introverted person. I've always struggled with communicating with people in general. This has also stopped me from becoming closer to the tech community in the past years.
Ever since I started sharing my content across platforms, it helped me meet new people, learn from people's feedback, and have more love and support for the community. And going back to the previous point, it made me want to make more (hopefully helpful) content for those in the community who do not necessarily have access to paid resources.
This is specific to my work at Medusa. As Medusa is a fairly new platform, we are still lacking in terms of technical content and documentation. We are going to be building the documentation from the ground up to ensure that it's easy to understand by anyone who wishes to use and learn about the platform.
As I believe that Medusa will become more and more successful in the upcoming years, I'm excited to be part of the team working on the foundation of the documentation of a platform that will hopefully grow with time.
Also, as an open-source platform that appreciates and works closely with its community, Medusa's values align well with why I love writing and want to keep doing it.
This is a personal post that maybe not many will read or be interested in. But this is a very important one for me. After a long time of struggling to find my footing in my career, I've finally reached a point where I understand what I want and have the opportunity to get there.
If you're reading this and you're still confused about what direction you want to go in, give yourself some time and experiment with different projects. As cheesy as it sounds, with hard work and dedication you'll get there sooner or later.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For the past 5 years, I've been working as a full-stack developer, both full-time and freelance. I learned a lot through it and have become better with time."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A year ago I started technical writing. I wrote articles, tutorials, and documentation for my own blog as well as other websites, agencies, and clients. It became a hobby of mine that I really enjoyed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Today, I start my new job as a Technical Writer at "},{"type":"element","tagName":"a","properties":{"href":"https://www.medusajs.com"},"children":[{"type":"text","value":"Medusa"}]},{"type":"text","value":". This decision wasn't an easy one and it took me a while to finally make the transition."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this article, I share with you how I first started technical writing, and why am I transitioning into full-time technical writing."}]},{"type":"element","tagName":"h2","properties":{"id":"how-it-started"},"children":[{"type":"text","value":"How it Started"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I've always loved writing in general. For a long time, I debated whether I should create a blog or not. Although I have my fair share of experience as a developer, I still considered myself an average developer. So, I didn't think anyone would be interested to read my content or that I had anything helpful to share."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I finally decided to create my own blog in December 2020. It wasn't because I suddenly gained the motivation or courage. It was mostly a \"even if I fail and no one reads my content, what could go wrong?\" kind of decision. I tried a different kind of content. Some got a lot of attention from other developers, others not so much. However, the best part about it all was receiving feedback, even from one person, saying that this article or tutorial helped them understand or learn something better."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" Then, at the end of March 2021, I learned that you can actually get paid to write for other websites! It may seem like common knowledge to a lot of people, but to me it was news. I didn't know whether my content was good enough or not, but I decided to apply anyway. I applied to a lot of websites and agencies, and that's what really kickstarted my technical writing journey."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the past year, I was able to write for a lot of websites and agencies like "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/8-technical-writing-tips-i-learned-from-writing-for-sitepoint-draft-dev-and-more"},"children":[{"type":"text","value":"SitePoint, Draft.dev, LogRocket, and more"}]},{"type":"text","value":". I was also able to work with my own clients, which was how I started my journey with Medusa."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Even though I really loved technical writing, it took a lot of thinking and consideration to finally embark on this journey and become a full-time technical writer."}]},{"type":"element","tagName":"h2","properties":{"id":"why-i-made-the-transition"},"children":[{"type":"text","value":"Why I Made the Transition"}]},{"type":"element","tagName":"h3","properties":{"id":"learn-more"},"children":[{"type":"text","value":"Learn More"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As I mentioned earlier I learned a lot from being a developer. However, when you are a developer a lot of time, especially if you work for a company that creates websites for other companies rather than having its own product, you end up prioritizing delivering features rather than the quality of the code or architecture. It becomes a \"let's just get this over with\" sort of mentality. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When I started technical writing, however, I became more curious. I started thinking \"ok, but how does this thing work?\" I also began diving more deeply into topics rather than learning surface-level details. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Even if you're not interested in writing, I recommend that you take the time to write about things as you learn them. It'll help you truly understand what you're learning instead of just applying."}]},{"type":"element","tagName":"h3","properties":{"id":"help-beginners"},"children":[{"type":"text","value":"Help Beginners"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"My main focus when writing is making sure that my content is easily understandable by beginners. Whether it's beginners to programming in general or to a certain tool, framework, or programming language. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I like to simplify my content, whether in the words I use or the approach I take. The first tutorial or guide a beginner finds while learning something can be a make-it or break-it sort of thing. If it's too complicated or doesn't give the reader a real understanding of what they're doing, it's a waste of their time."}]},{"type":"element","tagName":"h3","properties":{"id":"closer-to-the-community"},"children":[{"type":"text","value":"Closer to the Community"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I'm an introverted person. I've always struggled with communicating with people in general. This has also stopped me from becoming closer to the tech community in the past years. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ever since I started sharing my content across platforms, it helped me meet new people, learn from people's feedback, and have more love and support for the community. And going back to the previous point, it made me want to make more (hopefully helpful) content for those in the community who do not necessarily have access to paid resources."}]},{"type":"element","tagName":"h3","properties":{"id":"build-the-foundation"},"children":[{"type":"text","value":"Build the Foundation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is specific to my work at Medusa. As Medusa is a fairly new platform, we are still lacking in terms of technical content and documentation. We are going to be building the documentation from the ground up to ensure that it's easy to understand by anyone who wishes to use and learn about the platform."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As I believe that Medusa will become more and more successful in the upcoming years, I'm excited to be part of the team working on the foundation of the documentation of a platform that will hopefully grow with time."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Also, as an open-source platform that appreciates and works closely with its community, Medusa's values align well with why I love writing and want to keep doing it."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is a personal post that maybe not many will read or be interested in. But this is a very important one for me. After a long time of struggling to find my footing in my career, I've finally reached a point where I understand what I want and have the opportunity to get there."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're reading this and you're still confused about what direction you want to go in, give yourself some time and experiment with different projects. As cheesy as it sounds, with hard work and dedication you'll get there sooner or later."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"how-it-started","heading":"How it Started"},{"id":"why-i-made-the-transition","heading":"Why I Made the Transition","items":[{"id":"learn-more","heading":"Learn More"},{"id":"help-beginners","heading":"Help Beginners"},{"id":"closer-to-the-community","heading":"Closer to the Community"},{"id":"build-the-foundation","heading":"Build the Foundation"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp","publicURL":"/static/a480d0fc68fa0b126f4d03c77dc61317/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp","imageMeta":{"width":1000,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/webp;base64,UklGRkwAAABXRUJQVlA4IEAAAABwAwCdASoUAAgAPtFUpEuoJKOhsAgBABoJaQAAXfC3Bj8kckAA/vI7YQrOhJG2S5FQsviTY9LA8VIb6ix9CwAA","aspectRatio":2.364864864864865,"src":"/static/a480d0fc68fa0b126f4d03c77dc61317/89afa/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp","srcSet":"/static/a480d0fc68fa0b126f4d03c77dc61317/9fca7/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp 175w,\n/static/a480d0fc68fa0b126f4d03c77dc61317/37a4e/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp 350w,\n/static/a480d0fc68fa0b126f4d03c77dc61317/89afa/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp 700w,\n/static/a480d0fc68fa0b126f4d03c77dc61317/47f67/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp 1000w","srcWebp":"/static/a480d0fc68fa0b126f4d03c77dc61317/89afa/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp","srcSetWebp":"/static/a480d0fc68fa0b126f4d03c77dc61317/9fca7/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp 175w,\n/static/a480d0fc68fa0b126f4d03c77dc61317/37a4e/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp 350w,\n/static/a480d0fc68fa0b126f4d03c77dc61317/89afa/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp 700w,\n/static/a480d0fc68fa0b126f4d03c77dc61317/47f67/Why-I-Transitioned-From-a-Full-Stack-Developer-to-a-Technical-Writer.webp 1000w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__6127ba1b3ed159214d382ebe","title":"8 Technical Writing Tips I Learned From Writing For SitePoint, Draft.dev, and More","slug":"8-technical-writing-tips-i-learned-from-writing-for-sitepoint-draft-dev-and-more","featured":false,"feature_image":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg","excerpt":"After writing for these websites I learned some tips that allowed me to improve my technical writing.","custom_excerpt":"After writing for these websites I learned some tips that allowed me to improve my technical writing.","visibility":"public","created_at_pretty":"12 Aug 2021","published_at_pretty":"18 Aug 2021","updated_at_pretty":"30 Aug 2021","created_at":"2021-08-12T17:40:16.000+00:00","published_at":"2021-08-18T08:53:27.000+00:00","updated_at":"2021-08-30T11:10:35.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":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Late 2020, after writing articles sporadically, I finally created this blog.\nThrough this blog, I was able to write many articles and tutorials about \nJavascript [https://blog.shahednasser.com/tag/javascript], Browser Extensions\n[https://blog.shahednasser.com/tag/browser-extensions], Magento 2\n[https://blog.shahednasser.com/tag/magento], and more.\n\nThen, in May 2021, I branched out and applied to write for different platforms.\nI landed a couple of gigs and became an author for some notable websites or\nagencies like SitePoint [https://www.sitepoint.com], Draft.dev\n[https://draft.dev], LogRocket [https://logrocket.com], ContentLab\n[https://contentlab.io], and more. Check the My Guest Writings\n[https://blog.shahednasser.com/my-guest-writings/] page to see some of them.\n\nAfter writing for these websites or some of their clients, I learned so many\nthings regarding different technologies. I also learned some tips that allowed\nme to improve my technical writing. In this article, I'll share some of them\nwith you, and in the end, I'll add some links in case you want to apply to these\nplatforms, as well.\n\nStart with an Outline\nPreviously, I would get an idea or a concept I'd think would be good to write\nabout. Then, I'd start writing right away, or if it's a tutorial I'd start\ncoding in parallel. However, when I started writing for SitePoint, I was always\nasked to provide an outline before I start writing an article. Similarly for\nDraft.dev whenever I was assigned an article, it always starts with an outline.\n\nDefining an outline for your article organizes your thoughts and ideas before\ngetting into them. You might have a lot of useful knowledge to share, but it\ngets lost between the spontaneous sentences here and there. Outlining the\ntopic's headlines first allows you to organize where each thought, idea, or tip\nshould go.\n\nIf you're not sure how you can write an outline, there are some tutorials\n[https://www.sitepoint.com/writing-for-money-tips-for-planning-your-next-article-pitch/] \nthat can help you get started. However, you can also start with outlining\narticles in your thoughts if that's easier. Take time to plan how the article's\nstructure will look, and once you think you're confident enough in the planned\nheadings and ideas flow, you can start writing the article.\n\nSimplify Tutorials\nWhen a certain section in your tutorial requires setting up something that isn't\nactually necessary to the topic of the tutorial, simplify that as best as\npossible. Here's an example: let's say you're doing a tutorial on something\nrelated to Node.js. You might need to store the data somehow, so you end up\nchoosing MySQL as the database. So, you'll have to add setup instructions in\nyour tutorial related to setting up the database, when it's actually not\nnecessary to the tutorial.\n\nThis can cause confusion, especially if the reader doesn't know about MySQL (in\nthe example I'm giving) enough to keep up, or maybe they don't have a MySQL\nserver installed on their machine anyway. Make sure your tutorials are simple\nand to the point. Even if something seems simple to you, it might be a hurdle to\nthe reader and they end up leaving your tutorial trying to find a simpler one.\nIn the example above, if you need to use something to store the data you can try\nusing something simple like an SQLite database where there won't be any\ncomplicated configurations required. Even if the reader doesn't know anything\nabout it, then don't really need to know to keep going with the article.\n\nStay Consistent\nWhen writing an article or a tutorial, it's important to stay consistent. This\napplies to many things. First, don't use different spellings throughout the\narticle. For example, don't use Javascript at one point then use JavaScript at\nanother. Second, make sure your code is consistent. Don't use \" at some points\nthen use ' in others, or don't omit ; in some code blocks and leave it in\nothers. Although these details might not seem like they're a big deal, providing\nconsistency keeps your article organized and uniform.\n\nDon't Assume The Reader Knows\nA lot of times we use certain words, phrases, abbreviations, or overlook details\nthinking they're basics and just like we know them, the reader will know them as\nwell. It's important to cater your articles to readers in general. \n\nWhen using abbreviations, you should at least use the full word or phrase once\nwith its abbreviation, then you can use the abbreviation after that. For\nexample, if your article mentions Create React App, you might be inclined to\njust use CRA. Instead, the first time you mention it you should do it as \"Create\nReact App (CRA)\", then refer to it as CRA in the rest of your article.\n\nWhen it comes to tutorials, for example, using methods, try to link to\ndocumentation on that method even if your tutorial explains it briefly. This\nallows the reader to delve more into the details if they need to and see any\nadditional details you might have overshadowed as they don't necessarily fit\ninto the tutorial. You can link to documentation from MDN Web Docs\n[https://developer.mozilla.org/en-US/] or other websites depending on the\nprogramming language you're using.\n\nAlways Link to Sources\nSimilar to the previous section, you should always link to sources when\npossible. If you mention a survey or study results, browser limitations, quotes\nfrom other articles or books, or anything that comes from an original source,\nlink back to it. This builds your article's credibility and maintains trust with\nthe reader. Also, it allows the reader to check it out for themselves and see\nthe details if needed.\n\nCreate a Style Guide\nWhen you first start writing articles, you might not care much about following a\ncertain guideline for your articles. However, for the consistency of the blog as\na whole and to maintain a certain structure for your articles, it's good to have\na style guide. A style guide that an article must follow includes the type of\nheadings it should use, certain words or formatting of the content, and other\nrules you can add yourself that you find are helpful through your journey in\nwriting. You might be confused on how to start, but the more you write and start\nunderstanding the kind of blog you're creating, the clearer it comes.\n\nTry to start by creating a certain guideline for the content formatting. For\nexample, a new line should be added before every new section or after every\nheadline in the article. Start with simple guidelines and grow the list with\ntime.\n\nHave an Average Word Count\nA good tip I've learned by writing for all these different platforms is to keep\nan article between 1500~2000 words. You don't have to always keep the article in\nthat range, but it's good to have an average range just to keep yourself in\ncheck and know when an article can be shortened or split into parts, or when it\nshould be longer with more details.\n\nA lot of times I write a long article, then I take a second look at it and\nrealize that I repeated myself a lot of times unnecessarily. After writing an\narticle, if it's too long try to remove any unnecessary details or repeated\nstatements. Make sure the article or tutorial focuses on its main purpose rather\nthan unnecessary details. This helps the reader to get the best out of it when\nreading it and not get lost in irrelevant details. If it's a tutorial and can be\nsplit into parts, do that as it will be easier for the reader.\n\nOn the other hand, if an article is too short take a second look at it. Are\nthere ambiguous details? Is there room for confusion or misunderstandings? If\nso, take the time to re-iterate or elaborate on what you want to say or teach\nthe reader. A lot of times we think that our point is coming across well, or\nwhat we are trying to teach is easily understood, but in reality, the article\nends up missing the main point.\n\nLearn and Write\nBefore I started writing, I got to a point where I stopped learning new things.\nI just stuck to what I knew and never evolved. When I started writing, I started\nexpanding my knowledge and learning new things to write about. Especially when I\nstarted writing for platforms like SitePoint or Draft.dev. A lot of times I was\nassigned an article that I had a basic knowledge of, or some I barely knew\nanything about. However, because I had to write about it for an article, I\nresearched and went deep into the details of the topics. This helped me learn\nnew things and expand my knowledge. I wasn't only writing to help others, I was\nlearning through the process as well.\n\nBonus: Be Confident In What You Know\nA lot of people want to write but are scared that their knowledge is nothing\ncompared to others, or that it will not benefit anyone. I felt the same way too\nwhen I started this blog. I thought that what I knew everyone knew, and that\nwriting about these topics will not benefit anyone. However, after I started\nwriting about all the different topics I had knowledge of, I received so many\nmessages and emails thanking me for helping them resolve an issue they faced,\nlearn more about a topic, or help them understand some things more. Even if you\nthink your knowledge is limited, that does not mean others can't learn from you.\nNone of us know everything, and someone is bound to learn from what you have to\nshare.\n\nAdditionally, even if no one reads or benefits from your article, you'll benefit\nyourself. Every single article or tutorial I wrote I learned something new from\nit. Sometimes it's minor details when I'm trying or searching for something,\nsometimes it's the entire topic. At the end of the day, there's at least one\nperson learning from your writings, so be confident about it.\n\nConclusion\nIf you're considering writing for these platforms, don't hesitate or think you\ncan't do it. You can always apply and try, and hopefully, you'll learn through\nwriting for them as well.\n\nI'll leave the links to apply to write for these websites below. Take the time\nto go through them if it interests you.\n\n * SitePoint\n [https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjh8urvgLHyAhUE1hoKHfByDFEQFnoECAgQAw&url=https%3A%2F%2Fwww.sitepoint.com%2Fwrite-for-us%2F&usg=AOvVaw17PGRzWlDU3-SpPm2yZ1AB]\n * Draft.dev [https://draft.dev/write]\n * LogRocket\n [https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiS1oj2gLHyAhWBzoUKHUOkAZEQFnoECAMQAQ&url=https%3A%2F%2Fblog.logrocket.com%2Fbecome-a-logrocket-guest-author%2F&usg=AOvVaw21Npb2S-nFefEDCz-Rcgng]\n * ContentLab.io [https://contentlab.io/write-for-contentlab/]","html":"Late 2020, after writing articles sporadically, I finally created this blog. Through this blog, I was able to write many articles and tutorials about Javascript, Browser Extensions, Magento 2, and more.
Then, in May 2021, I branched out and applied to write for different platforms. I landed a couple of gigs and became an author for some notable websites or agencies like SitePoint, Draft.dev, LogRocket, ContentLab, and more. Check the My Guest Writings page to see some of them.
After writing for these websites or some of their clients, I learned so many things regarding different technologies. I also learned some tips that allowed me to improve my technical writing. In this article, I'll share some of them with you, and in the end, I'll add some links in case you want to apply to these platforms, as well.
Previously, I would get an idea or a concept I'd think would be good to write about. Then, I'd start writing right away, or if it's a tutorial I'd start coding in parallel. However, when I started writing for SitePoint, I was always asked to provide an outline before I start writing an article. Similarly for Draft.dev whenever I was assigned an article, it always starts with an outline.
Defining an outline for your article organizes your thoughts and ideas before getting into them. You might have a lot of useful knowledge to share, but it gets lost between the spontaneous sentences here and there. Outlining the topic's headlines first allows you to organize where each thought, idea, or tip should go.
If you're not sure how you can write an outline, there are some tutorials that can help you get started. However, you can also start with outlining articles in your thoughts if that's easier. Take time to plan how the article's structure will look, and once you think you're confident enough in the planned headings and ideas flow, you can start writing the article.
When a certain section in your tutorial requires setting up something that isn't actually necessary to the topic of the tutorial, simplify that as best as possible. Here's an example: let's say you're doing a tutorial on something related to Node.js. You might need to store the data somehow, so you end up choosing MySQL as the database. So, you'll have to add setup instructions in your tutorial related to setting up the database, when it's actually not necessary to the tutorial.
This can cause confusion, especially if the reader doesn't know about MySQL (in the example I'm giving) enough to keep up, or maybe they don't have a MySQL server installed on their machine anyway. Make sure your tutorials are simple and to the point. Even if something seems simple to you, it might be a hurdle to the reader and they end up leaving your tutorial trying to find a simpler one. In the example above, if you need to use something to store the data you can try using something simple like an SQLite database where there won't be any complicated configurations required. Even if the reader doesn't know anything about it, then don't really need to know to keep going with the article.
When writing an article or a tutorial, it's important to stay consistent. This applies to many things. First, don't use different spellings throughout the article. For example, don't use Javascript at one point then use JavaScript at another. Second, make sure your code is consistent. Don't use \" at some points then use ' in others, or don't omit ; in some code blocks and leave it in others. Although these details might not seem like they're a big deal, providing consistency keeps your article organized and uniform.
A lot of times we use certain words, phrases, abbreviations, or overlook details thinking they're basics and just like we know them, the reader will know them as well. It's important to cater your articles to readers in general.
When using abbreviations, you should at least use the full word or phrase once with its abbreviation, then you can use the abbreviation after that. For example, if your article mentions Create React App, you might be inclined to just use CRA. Instead, the first time you mention it you should do it as \"Create React App (CRA)\", then refer to it as CRA in the rest of your article.
When it comes to tutorials, for example, using methods, try to link to documentation on that method even if your tutorial explains it briefly. This allows the reader to delve more into the details if they need to and see any additional details you might have overshadowed as they don't necessarily fit into the tutorial. You can link to documentation from MDN Web Docs or other websites depending on the programming language you're using.
Similar to the previous section, you should always link to sources when possible. If you mention a survey or study results, browser limitations, quotes from other articles or books, or anything that comes from an original source, link back to it. This builds your article's credibility and maintains trust with the reader. Also, it allows the reader to check it out for themselves and see the details if needed.
When you first start writing articles, you might not care much about following a certain guideline for your articles. However, for the consistency of the blog as a whole and to maintain a certain structure for your articles, it's good to have a style guide. A style guide that an article must follow includes the type of headings it should use, certain words or formatting of the content, and other rules you can add yourself that you find are helpful through your journey in writing. You might be confused on how to start, but the more you write and start understanding the kind of blog you're creating, the clearer it comes.
Try to start by creating a certain guideline for the content formatting. For example, a new line should be added before every new section or after every headline in the article. Start with simple guidelines and grow the list with time.
A good tip I've learned by writing for all these different platforms is to keep an article between 1500~2000 words. You don't have to always keep the article in that range, but it's good to have an average range just to keep yourself in check and know when an article can be shortened or split into parts, or when it should be longer with more details.
A lot of times I write a long article, then I take a second look at it and realize that I repeated myself a lot of times unnecessarily. After writing an article, if it's too long try to remove any unnecessary details or repeated statements. Make sure the article or tutorial focuses on its main purpose rather than unnecessary details. This helps the reader to get the best out of it when reading it and not get lost in irrelevant details. If it's a tutorial and can be split into parts, do that as it will be easier for the reader.
On the other hand, if an article is too short take a second look at it. Are there ambiguous details? Is there room for confusion or misunderstandings? If so, take the time to re-iterate or elaborate on what you want to say or teach the reader. A lot of times we think that our point is coming across well, or what we are trying to teach is easily understood, but in reality, the article ends up missing the main point.
Before I started writing, I got to a point where I stopped learning new things. I just stuck to what I knew and never evolved. When I started writing, I started expanding my knowledge and learning new things to write about. Especially when I started writing for platforms like SitePoint or Draft.dev. A lot of times I was assigned an article that I had a basic knowledge of, or some I barely knew anything about. However, because I had to write about it for an article, I researched and went deep into the details of the topics. This helped me learn new things and expand my knowledge. I wasn't only writing to help others, I was learning through the process as well.
A lot of people want to write but are scared that their knowledge is nothing compared to others, or that it will not benefit anyone. I felt the same way too when I started this blog. I thought that what I knew everyone knew, and that writing about these topics will not benefit anyone. However, after I started writing about all the different topics I had knowledge of, I received so many messages and emails thanking me for helping them resolve an issue they faced, learn more about a topic, or help them understand some things more. Even if you think your knowledge is limited, that does not mean others can't learn from you. None of us know everything, and someone is bound to learn from what you have to share.
Additionally, even if no one reads or benefits from your article, you'll benefit yourself. Every single article or tutorial I wrote I learned something new from it. Sometimes it's minor details when I'm trying or searching for something, sometimes it's the entire topic. At the end of the day, there's at least one person learning from your writings, so be confident about it.
If you're considering writing for these platforms, don't hesitate or think you can't do it. You can always apply and try, and hopefully, you'll learn through writing for them as well.
I'll leave the links to apply to write for these websites below. Take the time to go through them if it interests you.
","url":"https://backend.shahednasser.com/8-technical-writing-tips-i-learned-from-writing-for-sitepoint-draft-dev-and-more/","canonical_url":null,"uuid":"92622031-d842-4f32-b594-36b8415f7b50","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"61155d00e4089a001c8474b7","reading_time":7,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Late 2020, after writing articles sporadically, I finally created this blog. Through this blog, I was able to write many articles and tutorials about Javascript, Browser Extensions, Magento 2, and more.
Then, in May 2021, I branched out and applied to write for different platforms. I landed a couple of gigs and became an author for some notable websites or agencies like SitePoint, Draft.dev, LogRocket, ContentLab, and more. Check the My Guest Writings page to see some of them.
After writing for these websites or some of their clients, I learned so many things regarding different technologies. I also learned some tips that allowed me to improve my technical writing. In this article, I'll share some of them with you, and in the end, I'll add some links in case you want to apply to these platforms, as well.
Previously, I would get an idea or a concept I'd think would be good to write about. Then, I'd start writing right away, or if it's a tutorial I'd start coding in parallel. However, when I started writing for SitePoint, I was always asked to provide an outline before I start writing an article. Similarly for Draft.dev whenever I was assigned an article, it always starts with an outline.
Defining an outline for your article organizes your thoughts and ideas before getting into them. You might have a lot of useful knowledge to share, but it gets lost between the spontaneous sentences here and there. Outlining the topic's headlines first allows you to organize where each thought, idea, or tip should go.
If you're not sure how you can write an outline, there are some tutorials that can help you get started. However, you can also start with outlining articles in your thoughts if that's easier. Take time to plan how the article's structure will look, and once you think you're confident enough in the planned headings and ideas flow, you can start writing the article.
When a certain section in your tutorial requires setting up something that isn't actually necessary to the topic of the tutorial, simplify that as best as possible. Here's an example: let's say you're doing a tutorial on something related to Node.js. You might need to store the data somehow, so you end up choosing MySQL as the database. So, you'll have to add setup instructions in your tutorial related to setting up the database, when it's actually not necessary to the tutorial.
This can cause confusion, especially if the reader doesn't know about MySQL (in the example I'm giving) enough to keep up, or maybe they don't have a MySQL server installed on their machine anyway. Make sure your tutorials are simple and to the point. Even if something seems simple to you, it might be a hurdle to the reader and they end up leaving your tutorial trying to find a simpler one. In the example above, if you need to use something to store the data you can try using something simple like an SQLite database where there won't be any complicated configurations required. Even if the reader doesn't know anything about it, then don't really need to know to keep going with the article.
When writing an article or a tutorial, it's important to stay consistent. This applies to many things. First, don't use different spellings throughout the article. For example, don't use Javascript at one point then use JavaScript at another. Second, make sure your code is consistent. Don't use \" at some points then use ' in others, or don't omit ; in some code blocks and leave it in others. Although these details might not seem like they're a big deal, providing consistency keeps your article organized and uniform.
A lot of times we use certain words, phrases, abbreviations, or overlook details thinking they're basics and just like we know them, the reader will know them as well. It's important to cater your articles to readers in general.
When using abbreviations, you should at least use the full word or phrase once with its abbreviation, then you can use the abbreviation after that. For example, if your article mentions Create React App, you might be inclined to just use CRA. Instead, the first time you mention it you should do it as \"Create React App (CRA)\", then refer to it as CRA in the rest of your article.
When it comes to tutorials, for example, using methods, try to link to documentation on that method even if your tutorial explains it briefly. This allows the reader to delve more into the details if they need to and see any additional details you might have overshadowed as they don't necessarily fit into the tutorial. You can link to documentation from MDN Web Docs or other websites depending on the programming language you're using.
Similar to the previous section, you should always link to sources when possible. If you mention a survey or study results, browser limitations, quotes from other articles or books, or anything that comes from an original source, link back to it. This builds your article's credibility and maintains trust with the reader. Also, it allows the reader to check it out for themselves and see the details if needed.
When you first start writing articles, you might not care much about following a certain guideline for your articles. However, for the consistency of the blog as a whole and to maintain a certain structure for your articles, it's good to have a style guide. A style guide that an article must follow includes the type of headings it should use, certain words or formatting of the content, and other rules you can add yourself that you find are helpful through your journey in writing. You might be confused on how to start, but the more you write and start understanding the kind of blog you're creating, the clearer it comes.
Try to start by creating a certain guideline for the content formatting. For example, a new line should be added before every new section or after every headline in the article. Start with simple guidelines and grow the list with time.
A good tip I've learned by writing for all these different platforms is to keep an article between 1500~2000 words. You don't have to always keep the article in that range, but it's good to have an average range just to keep yourself in check and know when an article can be shortened or split into parts, or when it should be longer with more details.
A lot of times I write a long article, then I take a second look at it and realize that I repeated myself a lot of times unnecessarily. After writing an article, if it's too long try to remove any unnecessary details or repeated statements. Make sure the article or tutorial focuses on its main purpose rather than unnecessary details. This helps the reader to get the best out of it when reading it and not get lost in irrelevant details. If it's a tutorial and can be split into parts, do that as it will be easier for the reader.
On the other hand, if an article is too short take a second look at it. Are there ambiguous details? Is there room for confusion or misunderstandings? If so, take the time to re-iterate or elaborate on what you want to say or teach the reader. A lot of times we think that our point is coming across well, or what we are trying to teach is easily understood, but in reality, the article ends up missing the main point.
Before I started writing, I got to a point where I stopped learning new things. I just stuck to what I knew and never evolved. When I started writing, I started expanding my knowledge and learning new things to write about. Especially when I started writing for platforms like SitePoint or Draft.dev. A lot of times I was assigned an article that I had a basic knowledge of, or some I barely knew anything about. However, because I had to write about it for an article, I researched and went deep into the details of the topics. This helped me learn new things and expand my knowledge. I wasn't only writing to help others, I was learning through the process as well.
A lot of people want to write but are scared that their knowledge is nothing compared to others, or that it will not benefit anyone. I felt the same way too when I started this blog. I thought that what I knew everyone knew, and that writing about these topics will not benefit anyone. However, after I started writing about all the different topics I had knowledge of, I received so many messages and emails thanking me for helping them resolve an issue they faced, learn more about a topic, or help them understand some things more. Even if you think your knowledge is limited, that does not mean others can't learn from you. None of us know everything, and someone is bound to learn from what you have to share.
Additionally, even if no one reads or benefits from your article, you'll benefit yourself. Every single article or tutorial I wrote I learned something new from it. Sometimes it's minor details when I'm trying or searching for something, sometimes it's the entire topic. At the end of the day, there's at least one person learning from your writings, so be confident about it.
If you're considering writing for these platforms, don't hesitate or think you can't do it. You can always apply and try, and hopefully, you'll learn through writing for them as well.
I'll leave the links to apply to write for these websites below. Take the time to go through them if it interests you.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Late 2020, after writing articles sporadically, I finally created this blog. Through this blog, I was able to write many articles and tutorials about "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/tag/javascript"},"children":[{"type":"text","value":"Javascript"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/tag/browser-extensions"},"children":[{"type":"text","value":"Browser Extensions"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/tag/magento"},"children":[{"type":"text","value":"Magento 2"}]},{"type":"text","value":", and more."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, in May 2021, I branched out and applied to write for different platforms. I landed a couple of gigs and became an author for some notable websites or agencies like "},{"type":"element","tagName":"a","properties":{"href":"https://www.sitepoint.com"},"children":[{"type":"text","value":"SitePoint"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"https://draft.dev"},"children":[{"type":"text","value":"Draft.dev"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"https://logrocket.com"},"children":[{"type":"text","value":"LogRocket"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"https://contentlab.io"},"children":[{"type":"text","value":"ContentLab"}]},{"type":"text","value":", and more. Check the "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/my-guest-writings/"},"children":[{"type":"text","value":"My Guest Writings"}]},{"type":"text","value":" page to see some of them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After writing for these websites or some of their clients, I learned so many things regarding different technologies. I also learned some tips that allowed me to improve my technical writing. In this article, I'll share some of them with you, and in the end, I'll add some links in case you want to apply to these platforms, as well."}]},{"type":"element","tagName":"h2","properties":{"id":"start-with-an-outline"},"children":[{"type":"text","value":"Start with an Outline"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Previously, I would get an idea or a concept I'd think would be good to write about. Then, I'd start writing right away, or if it's a tutorial I'd start coding in parallel. However, when I started writing for SitePoint, I was always asked to provide an outline before I start writing an article. Similarly for Draft.dev whenever I was assigned an article, it always starts with an outline."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Defining an outline for your article organizes your thoughts and ideas before getting into them. You might have a lot of useful knowledge to share, but it gets lost between the spontaneous sentences here and there. Outlining the topic's headlines first allows you to organize where each thought, idea, or tip should go."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're not sure how you can write an outline, there are "},{"type":"element","tagName":"a","properties":{"href":"https://www.sitepoint.com/writing-for-money-tips-for-planning-your-next-article-pitch/"},"children":[{"type":"text","value":"some tutorials"}]},{"type":"text","value":" that can help you get started. However, you can also start with outlining articles in your thoughts if that's easier. Take time to plan how the article's structure will look, and once you think you're confident enough in the planned headings and ideas flow, you can start writing the article."}]},{"type":"element","tagName":"h2","properties":{"id":"simplify-tutorials"},"children":[{"type":"text","value":"Simplify Tutorials"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a certain section in your tutorial requires setting up something that isn't actually necessary to the topic of the tutorial, simplify that as best as possible. Here's an example: let's say you're doing a tutorial on something related to Node.js. You might need to store the data somehow, so you end up choosing MySQL as the database. So, you'll have to add setup instructions in your tutorial related to setting up the database, when it's actually not necessary to the tutorial."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This can cause confusion, especially if the reader doesn't know about MySQL (in the example I'm giving) enough to keep up, or maybe they don't have a MySQL server installed on their machine anyway. Make sure your tutorials are simple and to the point. Even if something seems simple to you, it might be a hurdle to the reader and they end up leaving your tutorial trying to find a simpler one. In the example above, if you need to use something to store the data you can try using something simple like an SQLite database where there won't be any complicated configurations required. Even if the reader doesn't know anything about it, then don't really need to know to keep going with the article."}]},{"type":"element","tagName":"h2","properties":{"id":"stay-consistent"},"children":[{"type":"text","value":"Stay Consistent"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When writing an article or a tutorial, it's important to stay consistent. This applies to many things. First, don't use different spellings throughout the article. For example, don't use Javascript at one point then use JavaScript at another. Second, make sure your code is consistent. Don't use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":" at some points then use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"'"}]},{"type":"text","value":" in others, or don't omit "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" in some code blocks and leave it in others. Although these details might not seem like they're a big deal, providing consistency keeps your article organized and uniform."}]},{"type":"element","tagName":"h2","properties":{"id":"dont-assume-the-reader-knows"},"children":[{"type":"text","value":"Don't Assume The Reader Knows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A lot of times we use certain words, phrases, abbreviations, or overlook details thinking they're basics and just like we know them, the reader will know them as well. It's important to cater your articles to readers in general. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using abbreviations, you should at least use the full word or phrase once with its abbreviation, then you can use the abbreviation after that. For example, if your article mentions Create React App, you might be inclined to just use CRA. Instead, the first time you mention it you should do it as \"Create React App (CRA)\", then refer to it as CRA in the rest of your article."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When it comes to tutorials, for example, using methods, try to link to documentation on that method even if your tutorial explains it briefly. This allows the reader to delve more into the details if they need to and see any additional details you might have overshadowed as they don't necessarily fit into the tutorial. You can link to documentation from "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/"},"children":[{"type":"text","value":"MDN Web Docs"}]},{"type":"text","value":" or other websites depending on the programming language you're using."}]},{"type":"element","tagName":"h2","properties":{"id":"always-link-to-sources"},"children":[{"type":"text","value":"Always Link to Sources"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Similar to the previous section, you should always link to sources when possible. If you mention a survey or study results, browser limitations, quotes from other articles or books, or anything that comes from an original source, link back to it. This builds your article's credibility and maintains trust with the reader. Also, it allows the reader to check it out for themselves and see the details if needed."}]},{"type":"element","tagName":"h2","properties":{"id":"create-a-style-guide"},"children":[{"type":"text","value":"Create a Style Guide"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you first start writing articles, you might not care much about following a certain guideline for your articles. However, for the consistency of the blog as a whole and to maintain a certain structure for your articles, it's good to have a style guide. A style guide that an article must follow includes the type of headings it should use, certain words or formatting of the content, and other rules you can add yourself that you find are helpful through your journey in writing. You might be confused on how to start, but the more you write and start understanding the kind of blog you're creating, the clearer it comes."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Try to start by creating a certain guideline for the content formatting. For example, a new line should be added before every new section or after every headline in the article. Start with simple guidelines and grow the list with time."}]},{"type":"element","tagName":"h2","properties":{"id":"have-an-average-word-count"},"children":[{"type":"text","value":"Have an Average Word Count"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A good tip I've learned by writing for all these different platforms is to keep an article between 1500~2000 words. You don't have to always keep the article in that range, but it's good to have an average range just to keep yourself in check and know when an article can be shortened or split into parts, or when it should be longer with more details."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A lot of times I write a long article, then I take a second look at it and realize that I repeated myself a lot of times unnecessarily. After writing an article, if it's too long try to remove any unnecessary details or repeated statements. Make sure the article or tutorial focuses on its main purpose rather than unnecessary details. This helps the reader to get the best out of it when reading it and not get lost in irrelevant details. If it's a tutorial and can be split into parts, do that as it will be easier for the reader."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On the other hand, if an article is too short take a second look at it. Are there ambiguous details? Is there room for confusion or misunderstandings? If so, take the time to re-iterate or elaborate on what you want to say or teach the reader. A lot of times we think that our point is coming across well, or what we are trying to teach is easily understood, but in reality, the article ends up missing the main point."}]},{"type":"element","tagName":"h2","properties":{"id":"learn-and-write"},"children":[{"type":"text","value":"Learn and Write"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before I started writing, I got to a point where I stopped learning new things. I just stuck to what I knew and never evolved. When I started writing, I started expanding my knowledge and learning new things to write about. Especially when I started writing for platforms like SitePoint or Draft.dev. A lot of times I was assigned an article that I had a basic knowledge of, or some I barely knew anything about. However, because I had to write about it for an article, I researched and went deep into the details of the topics. This helped me learn new things and expand my knowledge. I wasn't only writing to help others, I was learning through the process as well."}]},{"type":"element","tagName":"h2","properties":{"id":"bonus-be-confident-in-what-you-know"},"children":[{"type":"text","value":"Bonus: Be Confident In What You Know"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A lot of people want to write but are scared that their knowledge is nothing compared to others, or that it will not benefit anyone. I felt the same way too when I started this blog. I thought that what I knew everyone knew, and that writing about these topics will not benefit anyone. However, after I started writing about all the different topics I had knowledge of, I received so many messages and emails thanking me for helping them resolve an issue they faced, learn more about a topic, or help them understand some things more. Even if you think your knowledge is limited, that does not mean others can't learn from you. None of us know everything, and someone is bound to learn from what you have to share."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Additionally, even if no one reads or benefits from your article, you'll benefit yourself. Every single article or tutorial I wrote I learned something new from it. Sometimes it's minor details when I'm trying or searching for something, sometimes it's the entire topic. At the end of the day, there's at least one person learning from your writings, so be confident about it."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're considering writing for these platforms, don't hesitate or think you can't do it. You can always apply and try, and hopefully, you'll learn through writing for them as well."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I'll leave the links to apply to write for these websites below. Take the time to go through them if it interests you."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjh8urvgLHyAhUE1hoKHfByDFEQFnoECAgQAw&url=https%3A%2F%2Fwww.sitepoint.com%2Fwrite-for-us%2F&usg=AOvVaw17PGRzWlDU3-SpPm2yZ1AB"},"children":[{"type":"text","value":"SitePoint"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://draft.dev/write"},"children":[{"type":"text","value":"Draft.dev"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiS1oj2gLHyAhWBzoUKHUOkAZEQFnoECAMQAQ&url=https%3A%2F%2Fblog.logrocket.com%2Fbecome-a-logrocket-guest-author%2F&usg=AOvVaw21Npb2S-nFefEDCz-Rcgng"},"children":[{"type":"text","value":"LogRocket"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://contentlab.io/write-for-contentlab/"},"children":[{"type":"text","value":"ContentLab.io"}]}]}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"start-with-an-outline","heading":"Start with an Outline"},{"id":"simplify-tutorials","heading":"Simplify Tutorials"},{"id":"stay-consistent","heading":"Stay Consistent"},{"id":"dont-assume-the-reader-knows","heading":"Don't Assume The Reader Knows"},{"id":"always-link-to-sources","heading":"Always Link to Sources"},{"id":"create-a-style-guide","heading":"Create a Style Guide"},{"id":"have-an-average-word-count","heading":"Have an Average Word Count"},{"id":"learn-and-write","heading":"Learn and Write"},{"id":"bonus-be-confident-in-what-you-know","heading":"Bonus: Be Confident In What You Know"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg","publicURL":"/static/83fef51e7789498cab4732f0bff0d685/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg","imageMeta":{"width":1920,"height":1280},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAa9U0pDnBv8A/8QAGhAAAwADAQAAAAAAAAAAAAAAAQIDABITBP/aAAgBAQABBQKib5tyPqI6zqXnd+SFiT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAACAgMBAAAAAAAAAAAAAAAAEQECAxJBgf/aAAgBAQAGPwLbhXFVPp4V4bJzA5P/xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhYTFB/9oACAEBAAE/IQ9UHLuFEJ7j2M7BcUK1mTP/AAL7HTWus//aAAwDAQACAAMAAAAQjB//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QYcL/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAEBAAIDAQEAAAAAAAAAAAABEQAhMUFxUcH/2gAIAQEAAT8QeXMEO5NGAdBLQv55MKmkL1t/TJY0IXGJGMlpHk43BdHtz//Z","aspectRatio":1.4957264957264957,"src":"/static/83fef51e7789498cab4732f0bff0d685/ea4ab/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg","srcSet":"/static/83fef51e7789498cab4732f0bff0d685/477ba/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg 175w,\n/static/83fef51e7789498cab4732f0bff0d685/06776/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg 350w,\n/static/83fef51e7789498cab4732f0bff0d685/ea4ab/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg 700w,\n/static/83fef51e7789498cab4732f0bff0d685/3055e/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg 1050w,\n/static/83fef51e7789498cab4732f0bff0d685/eff08/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg 1400w,\n/static/83fef51e7789498cab4732f0bff0d685/74fd5/corinne-kutz-tMI2_-r5Nfo-unsplash-2.jpg 1920w","srcWebp":"/static/83fef51e7789498cab4732f0bff0d685/89afa/corinne-kutz-tMI2_-r5Nfo-unsplash-2.webp","srcSetWebp":"/static/83fef51e7789498cab4732f0bff0d685/9fca7/corinne-kutz-tMI2_-r5Nfo-unsplash-2.webp 175w,\n/static/83fef51e7789498cab4732f0bff0d685/37a4e/corinne-kutz-tMI2_-r5Nfo-unsplash-2.webp 350w,\n/static/83fef51e7789498cab4732f0bff0d685/89afa/corinne-kutz-tMI2_-r5Nfo-unsplash-2.webp 700w,\n/static/83fef51e7789498cab4732f0bff0d685/78e7a/corinne-kutz-tMI2_-r5Nfo-unsplash-2.webp 1050w,\n/static/83fef51e7789498cab4732f0bff0d685/03d34/corinne-kutz-tMI2_-r5Nfo-unsplash-2.webp 1400w,\n/static/83fef51e7789498cab4732f0bff0d685/6833b/corinne-kutz-tMI2_-r5Nfo-unsplash-2.webp 1920w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__6127ba1b3ed159214d382ea6","title":"Why Facebook Deserves To Be Dropped For Once And For All","slug":"why-facebook-deserves-to-be-dropped-for-once-and-all","featured":false,"feature_image":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/IMG_4797.jpg","excerpt":"Facebook has yet to show that it actually cares about its users","custom_excerpt":"Facebook has yet to show that it actually cares about its users","visibility":"public","created_at_pretty":"24 May 2021","published_at_pretty":"24 May 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-05-24T18:10:48.000+00:00","published_at":"2021-05-24T19:33:07.000+00:00","updated_at":"2021-08-26T17:38:53.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1493612276216-ee3925520721-2-1.jpeg","publicURL":"/static/55d051b88133a375df71095790dfd724/photo-1493612276216-ee3925520721-2-1.jpeg","imageMeta":{"width":2000,"height":2500},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAEEAwIF/8QAGAEAAgMAAAAAAAAAAAAAAAAAAAMBBAX/2gAMAwEAAhADEAAAAfTTmIpADGTfld2IQ7O//8QAHBAAAQUAAwAAAAAAAAAAAAAAAgABAxAREyEy/9oACAEBAAEFAr1DKznq1EHfITXL7//EABkRAAIDAQAAAAAAAAAAAAAAAAABAhESE//aAAgBAwEBPwHBzZlNEk4urP/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBES/9oACAECAQE/AbNQj//EABoQAAEFAQAAAAAAAAAAAAAAAAEAAhAgMRH/2gAIAQEABj8CoWz0atNP/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAQETGRIf/aAAgBAQABPyHFs6LI9owavPeKsdKaP//aAAwDAQACAAMAAAAQdBNO/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQAQIWH/2gAIAQMBAT8QXVhJGJWdn//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxC4tR0kIOX/xAAdEAACAgIDAQAAAAAAAAAAAAAAARExECFBUWFx/9oACAEBAAE/EHHojwjwQ+B45hVISYd1xThsbt5XLc4sWfEf/9k=","aspectRatio":0.8,"src":"/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg","srcSet":"/static/55d051b88133a375df71095790dfd724/65d8c/photo-1493612276216-ee3925520721-2-1.jpg 260w,\n/static/55d051b88133a375df71095790dfd724/c5f21/photo-1493612276216-ee3925520721-2-1.jpg 520w,\n/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg 1040w,\n/static/55d051b88133a375df71095790dfd724/81a53/photo-1493612276216-ee3925520721-2-1.jpg 1560w,\n/static/55d051b88133a375df71095790dfd724/4e5f3/photo-1493612276216-ee3925520721-2-1.jpg 2000w","srcWebp":"/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp","srcSetWebp":"/static/55d051b88133a375df71095790dfd724/dc8f3/photo-1493612276216-ee3925520721-2-1.webp 260w,\n/static/55d051b88133a375df71095790dfd724/2db4b/photo-1493612276216-ee3925520721-2-1.webp 520w,\n/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp 1040w,\n/static/55d051b88133a375df71095790dfd724/f5845/photo-1493612276216-ee3925520721-2-1.webp 1560w,\n/static/55d051b88133a375df71095790dfd724/49d6b/photo-1493612276216-ee3925520721-2-1.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"In May 2021 Facebook's rating keeps dropping reaching 1.7 stars on the App Store\nand 2.4 on the Google Play Store (at the time of writing this article). Facebook\neven requested from the App Store to remove the negative reviews, but Apple\nrefused their request\n[https://www.businessinsider.com/apple-refused-request-remove-negative-ratings-for-facebook-app-2021-5]\n.\n\nThis is not the first time Facebook has been under heat, and most probably won't\nbe the last time. Over the years, Facebook kept disappointing its users with\nproblems ranging from security issues to profiting from user's data to now\nconstricting their user's opinions and allowing only the views they believe are\ncorrect.\n\nWhen you look at everything that happened with Facebook throughout the past few\nyears, you'll realize how surprising it still has users to begin with.\n\nWe won't go over every single scandal Facebook had, but there are some that not\nonly strongly affect Facebook's image as a leading tech company, but also harm\ntheir relationship with their users.\n\nIn 2018, It was revealed that Facebook basically gave away user's data\n[https://www.theatlantic.com/technology/archive/2018/12/facebooks-failures-and-also-its-problems-leaking-data/578599/] \nwithout their knowledge or permission. Of course, we all remember this scandal\nand what happened, and how much it damaged Facebook's image at the time.\nFacebook sacrificed their user's data, which they trusted them with, for their\nown benefit and for political reasons. \n\nIn 2019 it was revealed that for many years Facebook stored the user's password\nin plain text files\n[https://www.independent.co.uk/life-style/gadgets-and-tech/news/facebook-passwords-plain-text-instagram-admission-a8833941.html#:~:text=Facebook%20stored%20hundreds%20of%20millions,its%20internal%20data%20storage%20systems.]\n. Even though Facebook says there was no evidence of these passwords being\nabused, it still doesn't change the fact that these passwords were visible to\nthousands of their employees. Facebook clearly didn't value the user's security\nor privacy.\n\nIn May 2021, Facebook yet again was under fire as users were noticing that they\nhad no freedom of speech on the platform anymore. When freely stating their\nopinions that are Pro-Palestine, they noticed that their posts were being\nremoved or reported as harmful or dangerous. This backfired at Facebook, as\nusers resorted to another way of freely voicing their opinion by giving the app\nbad reviews that made its rating drop tremendously. \n\nAs more time passes by, Facebook seems to be insistent on making sure every last\none of its users loses their trust in it. By signing up to Facebook you're\nhighly likely signing up for your data being abused and breached by the platform\nitself, for poor security and almost no privacy, and for your voice to be\nsilenced unless it matches the platform's own opinion and beliefs. \n\nThere's no denying that Facebook was one of the very first social media\nplatforms that changed the game and how people perceived social media. It played\na big role in making social media what it is today. However, it seems that its\nrole has been diminished and changed into what's politically best for the\ncompany. It's no longer interested in what the users want, it's only interested\nin how to use these users to make money and fight for their own agenda.\n\nWhile companies like Apple\n[https://www.highlandernews.org/82516/apples-stronger-stance-for-user-privacy-works-to-the-advantage-of-their-consumers/]\n, DuckDuckGo\n[https://www.thedrum.com/news/2021/05/17/duckduckgo-firefox-github-say-no-flocing-way-google-s-privacy-updates]\n, Mozilla\n[https://techcrunch.com/2021/02/24/mozilla-beefs-up-anti-cross-site-tracking-as-chrome-still-lags-on-privacy/]\n, and others are working hard to maintain user's privacy, it's a shame we still\nhave companies like Facebook who are fighting against that\n[https://www.cnet.com/news/apples-privacy-battle-with-facebook-just-became-all-out-war/]\n. It's a shame, but it's not surprising at all coming from Facebook, as it has\nyet to show that it actually cares about its users.\n\nTo still be waiting for that after 17 years since its launch, I think it's\nhopeless. There's no point in waiting for the platform to start respecting its\nusers and valuing them. I think it's time to label Facebook as \"Use at your own\nrisk.\"","html":"In May 2021 Facebook's rating keeps dropping reaching 1.7 stars on the App Store and 2.4 on the Google Play Store (at the time of writing this article). Facebook even requested from the App Store to remove the negative reviews, but Apple refused their request.
This is not the first time Facebook has been under heat, and most probably won't be the last time. Over the years, Facebook kept disappointing its users with problems ranging from security issues to profiting from user's data to now constricting their user's opinions and allowing only the views they believe are correct.
When you look at everything that happened with Facebook throughout the past few years, you'll realize how surprising it still has users to begin with.
We won't go over every single scandal Facebook had, but there are some that not only strongly affect Facebook's image as a leading tech company, but also harm their relationship with their users.
In 2018, It was revealed that Facebook basically gave away user's data without their knowledge or permission. Of course, we all remember this scandal and what happened, and how much it damaged Facebook's image at the time. Facebook sacrificed their user's data, which they trusted them with, for their own benefit and for political reasons.
In 2019 it was revealed that for many years Facebook stored the user's password in plain text files. Even though Facebook says there was no evidence of these passwords being abused, it still doesn't change the fact that these passwords were visible to thousands of their employees. Facebook clearly didn't value the user's security or privacy.
In May 2021, Facebook yet again was under fire as users were noticing that they had no freedom of speech on the platform anymore. When freely stating their opinions that are Pro-Palestine, they noticed that their posts were being removed or reported as harmful or dangerous. This backfired at Facebook, as users resorted to another way of freely voicing their opinion by giving the app bad reviews that made its rating drop tremendously.
As more time passes by, Facebook seems to be insistent on making sure every last one of its users loses their trust in it. By signing up to Facebook you're highly likely signing up for your data being abused and breached by the platform itself, for poor security and almost no privacy, and for your voice to be silenced unless it matches the platform's own opinion and beliefs.
There's no denying that Facebook was one of the very first social media platforms that changed the game and how people perceived social media. It played a big role in making social media what it is today. However, it seems that its role has been diminished and changed into what's politically best for the company. It's no longer interested in what the users want, it's only interested in how to use these users to make money and fight for their own agenda.
While companies like Apple, DuckDuckGo, Mozilla, and others are working hard to maintain user's privacy, it's a shame we still have companies like Facebook who are fighting against that. It's a shame, but it's not surprising at all coming from Facebook, as it has yet to show that it actually cares about its users.
To still be waiting for that after 17 years since its launch, I think it's hopeless. There's no point in waiting for the platform to start respecting its users and valuing them. I think it's time to label Facebook as \"Use at your own risk.\"
","url":"https://backend.shahednasser.com/why-facebook-deserves-to-be-dropped-for-once-and-all/","canonical_url":null,"uuid":"3dae9a1d-8d24-4b1c-afb1-20de1e80d037","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"60abec289169c1001e9aed65","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"In May 2021 Facebook's rating keeps dropping reaching 1.7 stars on the App Store and 2.4 on the Google Play Store (at the time of writing this article). Facebook even requested from the App Store to remove the negative reviews, but Apple refused their request.
This is not the first time Facebook has been under heat, and most probably won't be the last time. Over the years, Facebook kept disappointing its users with problems ranging from security issues to profiting from user's data to now constricting their user's opinions and allowing only the views they believe are correct.
When you look at everything that happened with Facebook throughout the past few years, you'll realize how surprising it still has users to begin with.
We won't go over every single scandal Facebook had, but there are some that not only strongly affect Facebook's image as a leading tech company, but also harm their relationship with their users.
In 2018, It was revealed that Facebook basically gave away user's data without their knowledge or permission. Of course, we all remember this scandal and what happened, and how much it damaged Facebook's image at the time. Facebook sacrificed their user's data, which they trusted them with, for their own benefit and for political reasons.
In 2019 it was revealed that for many years Facebook stored the user's password in plain text files. Even though Facebook says there was no evidence of these passwords being abused, it still doesn't change the fact that these passwords were visible to thousands of their employees. Facebook clearly didn't value the user's security or privacy.
In May 2021, Facebook yet again was under fire as users were noticing that they had no freedom of speech on the platform anymore. When freely stating their opinions that are Pro-Palestine, they noticed that their posts were being removed or reported as harmful or dangerous. This backfired at Facebook, as users resorted to another way of freely voicing their opinion by giving the app bad reviews that made its rating drop tremendously.
As more time passes by, Facebook seems to be insistent on making sure every last one of its users loses their trust in it. By signing up to Facebook you're highly likely signing up for your data being abused and breached by the platform itself, for poor security and almost no privacy, and for your voice to be silenced unless it matches the platform's own opinion and beliefs.
There's no denying that Facebook was one of the very first social media platforms that changed the game and how people perceived social media. It played a big role in making social media what it is today. However, it seems that its role has been diminished and changed into what's politically best for the company. It's no longer interested in what the users want, it's only interested in how to use these users to make money and fight for their own agenda.
While companies like Apple, DuckDuckGo, Mozilla, and others are working hard to maintain user's privacy, it's a shame we still have companies like Facebook who are fighting against that. It's a shame, but it's not surprising at all coming from Facebook, as it has yet to show that it actually cares about its users.
To still be waiting for that after 17 years since its launch, I think it's hopeless. There's no point in waiting for the platform to start respecting its users and valuing them. I think it's time to label Facebook as \"Use at your own risk.\"
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In May 2021 Facebook's rating keeps dropping reaching 1.7 stars on the App Store and 2.4 on the Google Play Store (at the time of writing this article). Facebook even requested from the App Store to remove the negative reviews, "},{"type":"element","tagName":"a","properties":{"href":"https://www.businessinsider.com/apple-refused-request-remove-negative-ratings-for-facebook-app-2021-5"},"children":[{"type":"text","value":"but Apple refused their request"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is not the first time Facebook has been under heat, and most probably won't be the last time. Over the years, Facebook kept disappointing its users with problems ranging from security issues to profiting from user's data to now constricting their user's opinions and allowing only the views they believe are correct."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you look at everything that happened with Facebook throughout the past few years, you'll realize how surprising it still has users to begin with."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We won't go over every single scandal Facebook had, but there are some that not only strongly affect Facebook's image as a leading tech company, but also harm their relationship with their users."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In 2018, It was revealed that Facebook basically "},{"type":"element","tagName":"a","properties":{"href":"https://www.theatlantic.com/technology/archive/2018/12/facebooks-failures-and-also-its-problems-leaking-data/578599/"},"children":[{"type":"text","value":"gave away user's data"}]},{"type":"text","value":" without their knowledge or permission. Of course, we all remember this scandal and what happened, and how much it damaged Facebook's image at the time. Facebook sacrificed their user's data, which they trusted them with, for their own benefit and for political reasons. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In 2019 it was revealed that for many years Facebook stored the user's password in "},{"type":"element","tagName":"a","properties":{"href":"https://www.independent.co.uk/life-style/gadgets-and-tech/news/facebook-passwords-plain-text-instagram-admission-a8833941.html#:~:text=Facebook%20stored%20hundreds%20of%20millions,its%20internal%20data%20storage%20systems."},"children":[{"type":"text","value":"plain text files"}]},{"type":"text","value":". Even though Facebook says there was no evidence of these passwords being abused, it still doesn't change the fact that these passwords were visible to thousands of their employees. Facebook clearly didn't value the user's security or privacy."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In May 2021, Facebook yet again was under fire as users were noticing that they had no freedom of speech on the platform anymore. When freely stating their opinions that are Pro-Palestine, they noticed that their posts were being removed or reported as harmful or dangerous. This backfired at Facebook, as users resorted to another way of freely voicing their opinion by giving the app bad reviews that made its rating drop tremendously. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As more time passes by, Facebook seems to be insistent on making sure every last one of its users loses their trust in it. By signing up to Facebook you're highly likely signing up for your data being abused and breached by the platform itself, for poor security and almost no privacy, and for your voice to be silenced unless it matches the platform's own opinion and beliefs. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There's no denying that Facebook was one of the very first social media platforms that changed the game and how people perceived social media. It played a big role in making social media what it is today. However, it seems that its role has been diminished and changed into what's politically best for the company. It's no longer interested in what the users want, it's only interested in how to use these users to make money and fight for their own agenda."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While companies like "},{"type":"element","tagName":"a","properties":{"href":"https://www.highlandernews.org/82516/apples-stronger-stance-for-user-privacy-works-to-the-advantage-of-their-consumers/"},"children":[{"type":"text","value":"Apple"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"https://www.thedrum.com/news/2021/05/17/duckduckgo-firefox-github-say-no-flocing-way-google-s-privacy-updates"},"children":[{"type":"text","value":"DuckDuckGo"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"https://techcrunch.com/2021/02/24/mozilla-beefs-up-anti-cross-site-tracking-as-chrome-still-lags-on-privacy/"},"children":[{"type":"text","value":"Mozilla"}]},{"type":"text","value":", and others are working hard to maintain user's privacy, it's a shame we still have companies like Facebook "},{"type":"element","tagName":"a","properties":{"href":"https://www.cnet.com/news/apples-privacy-battle-with-facebook-just-became-all-out-war/"},"children":[{"type":"text","value":"who are fighting against that"}]},{"type":"text","value":". It's a shame, but it's not surprising at all coming from Facebook, as it has yet to show that it actually cares about its users."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To still be waiting for that after 17 years since its launch, I think it's hopeless. There's no point in waiting for the platform to start respecting its users and valuing them. I think it's time to label Facebook as \"Use at your own risk.\" "}]}],"data":{"quirksMode":false}},"tableOfContents":[]},"featureImageSharp":{"base":"IMG_4797.jpg","publicURL":"/static/f2f7eca3c0ccf83d0e1beb30c230400b/IMG_4797.jpg","imageMeta":{"width":1350,"height":900},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAVoTpheMAv/EABkQAAMAAwAAAAAAAAAAAAAAAAABAhEhIv/aAAgBAQABBQLdNyzopYYpR//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAMAAwAAAAAAAAAAAAAAAAABESAhMf/aAAgBAQAGPwJ7LUdWH//EAB0QAAICAQUAAAAAAAAAAAAAAAABESExQVFhgZH/2gAIAQEAAT8hqIrssyuJ0EoDKLYykWc+n//aAAwDAQACAAMAAAAQPC//xAAXEQADAQAAAAAAAAAAAAAAAAAAARFR/9oACAEDAQE/EKsKj//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/EIr/xAAbEAEBAAMAAwAAAAAAAAAAAAABEQAhMUFRkf/aAAgBAQABPxBhD1RrnrmDdjUR5ifcOSkJXeDW1pomM7Cs7ioTVmsf/9k=","aspectRatio":1.4957264957264957,"src":"/static/f2f7eca3c0ccf83d0e1beb30c230400b/ea4ab/IMG_4797.jpg","srcSet":"/static/f2f7eca3c0ccf83d0e1beb30c230400b/477ba/IMG_4797.jpg 175w,\n/static/f2f7eca3c0ccf83d0e1beb30c230400b/06776/IMG_4797.jpg 350w,\n/static/f2f7eca3c0ccf83d0e1beb30c230400b/ea4ab/IMG_4797.jpg 700w,\n/static/f2f7eca3c0ccf83d0e1beb30c230400b/3055e/IMG_4797.jpg 1050w,\n/static/f2f7eca3c0ccf83d0e1beb30c230400b/ecc74/IMG_4797.jpg 1350w","srcWebp":"/static/f2f7eca3c0ccf83d0e1beb30c230400b/89afa/IMG_4797.webp","srcSetWebp":"/static/f2f7eca3c0ccf83d0e1beb30c230400b/9fca7/IMG_4797.webp 175w,\n/static/f2f7eca3c0ccf83d0e1beb30c230400b/37a4e/IMG_4797.webp 350w,\n/static/f2f7eca3c0ccf83d0e1beb30c230400b/89afa/IMG_4797.webp 700w,\n/static/f2f7eca3c0ccf83d0e1beb30c230400b/78e7a/IMG_4797.webp 1050w,\n/static/f2f7eca3c0ccf83d0e1beb30c230400b/15480/IMG_4797.webp 1350w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}]}},"pageContext":{"slug":"5-ux-issues-apple-needs-to-fix-in-the-messages","prev":"how-i-improved-my-css-skills","next":"google-in-dark-mode","tag":"my-experience","limit":3,"skip":0,"primaryTagCount":13,"collectionPaths":{}}},"staticQueryHashes":["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}