Hey Fam, so today I dealt with tons of problems today and it was extremely satisfying to make things work on your own without any tutorials.

This would be my first blog on this site and I am so proud of myself for starting this journey as I committed earlier. I will be recording my 100DaysofCode journey here writing every day in sha Allah ( with God’s will ) about the struggles I face while learning and sharing my joy with you all.

What did I do today

So after waking up fairly early at 10 in the morning (yeah that’s early for me 🙈) I started working on my Fab Notes App project without even having breakfast because I had some solution in mind which I dreamed about LOL.

Tailwind - I was trying to set up a workflow with a webpack and use tailwind with postcss and purgecss, I made work last night and it was working well but someone told me that tailwind now gives an option to configure purge option for the unused tailwind classes. I tried so hard to make it work but I was having the same problem that although my code was working, the purge wasn’t working. After contacting one of my mates Duane who helped me to find some similar GitHub issue where some people faced the same situation, so after a few hours of trying some provided suggestions, I found two solutions to my problem.

So the problem was, for some stupid reason webpack wasn’t setting the NODE_ENV equal to production in which the purge tailwind configuration works. At first, the easiest solution that I found was to use cross-env npm package and put the cross-env before the webpack script and setting the mode to production like —mode=production in the script and HOLA it worked like a charm ✨. But like the person I am I wasn’t satisfied with using an npm package for it so I dug a bit more and eventually went back to the first issue and BOOM, there was written to pass arguments env and option to module.export in webpack configuration file like :

module.exports = (env, options) => {
  process.env.NODE_ENV = options.mode
  return {
    mode: "production", // rest of the code
  }
}

and then it worked without a cross-env script, so YEAH I’M PROUD OF MYSELF FOR FIGURING IT ALL OUT although it took me 3 days in total but mehhh.

Gatsby Blog Site - Well I watched a video yesterday by Tanay Pratap on how to host Gatsby Blog under 30 minutes and thought to launch my blog as well to record next 100 days of my journey regularly and some more stuff. It wasn’t as easy as I thought because I had to struggle a lot to get the setup working in my local environment as code sandbox was having some issues to fetch changes from Github. After a few hours later I got it to work on my environment. I didn’t know how to work with Gatsby’s project as I never worked with it before so it took me some time to set it all up.

However, when I made it work it was having some issues with git and remote repo but again being the awesome person I am I made it work again!!! After that, I configured the config files and tested if it works by pushing a commit or not, and DAMN it worked after solving a few issues.

Now I was stuck with getting images to center in markdown, which took me hours to figure out and I found that I can use inline HTML in markdown file to wrap a div around an image and use flexbox to center the image and that worked but again I wasn’t satisfied with having divs in markdown so I reached out to Konnor Rogers whose article helped me in getting tailwind-webpack setup work. He helped me with this problem because he used Gatsby for his blogs as well. Thank you, Konner. So after discussing it with him one thing that worked for me was to create a global.css file in the src folder and import it in gatsby-browser.js and then wrapping the image in h4 and using flexbox on h4 in global.css and HOLA it worked!

After that, I wrote this blog finally before my day ended and that’s it for my day. It was hectic as I didn’t take a nap or rest even because my mind wanted to make things work and it did (stubborn mind).

All in all the day was hectic but I enjoyed it a lotttt! I worked things out and that is awesome right?! Ofc it is cuz I am Fab 🔥😎.

If you are reading this blog and made it this far, THANK YOU SO MUCH for taking out time to read my blog. I truly appreciate you💙. Have a Good day and take care!👊🤗