Jubayer Al Mamun — Writing

2024 Year in Review and Setting Goals for 2025

Tue, 31 Dec 2024 00:00:00 GMT

The year 2024 was a great year, but it didn’t go as planned for me. I had some goals set for the year, but I wasn’t able to accomplish most of them. While I managed to achieve a few of my goals, it obviously wasn’t enough. To be honest, I’m not happy with my progress this year. However, I finally took the time to sit down, reflect on the year, and set goals for the next one. I hope 2025 will be in my favor, and I’ll see some positive progress in my life. ## 2024 Highlights Reflecting on the key moments of 2024: - Designed and developed a product MVP single-handedly and launched it for my company. - Explored domestic destinations like [St. Martin's Island](https://en.wikipedia.org/wiki/St._Martin%27s_Island) and [Tanguar Haor](https://en.wikipedia.org/wiki/Tanguar_Haor) with friends. - Maintained consistent grades at university. - Expanded my circle by making new friends on campus. ## 2024 Evaluation An assessment of the goals set for 2024: 1. Build better personal habits. 2. Write at least one line of code every day. 3. Spend at least 15 hours weekly on coding side projects. 4. Contribute to OSS. 5. Write at least 5-10 blog posts. 6. Regularly engage in physical exercise, preferably at a gym. 7. Learn to recite the Quran with proper tajweed. I couldn’t accomplish most of the goals I set for 2024. Although I tried, I wasn’t able to fix my sleep schedule properly. I also tried to stay consistent with coding, but it wasn’t possible to code every day. The biggest [Student Movement](https://en.wikipedia.org/wiki/2024_Bangladesh_quota_reform_movement) in Bangladesh left us mentally exhausted; the internet was shut down for a long time, and I couldn’t work properly. I failed to start any side projects or contribute to OSS. I didn’t even write a single blog post this year—I almost forgot about this blog site! Other goals, like going to the gym, losing weight, and learning to recite the Quran with proper tajweed, were also left unaccomplished. These unachieved goals will be carried forward to my next year’s checklist. Let’s see if I can turn them into reality this time. # 2025 Goals Setting ambitious targets for the upcoming year: **_No new goals are added. The unaccomplished goals from 2024 will be carried forward to 2025._** ## 1. Build better personal habits Priorities include maintaining a consistent sleep schedule, adopting a healthier diet, and incorporating regular exercise. My primary goal is to establish a routine that starts each day after the Fajr prayer, emphasizing consistency. ## 2. Spend at least 15 hours weekly on coding side projects From building projects to solving real-world problems, I’ve learned that this is the best way to learn effectively. While I’ve worked on some side projects in the past, I need to be more consistent. I will dedicate at least 15 hours weekly to working on side projects to create something impactful. ## 3. Contribute to OSS I’ve contributed a negligible amount to OSS in the past, and I must do more. I’ve listed some projects of interest and will try to contribute to them. I’ll also explore and contribute to other interesting projects I come across. ## 4. Write at least 5-10 blog posts To build a regular writing habit, I planned and launched this blog site in November 2023. So far, I’ve written three blog posts. My goal is to write at least 5–10 blog posts in 2025. I already have some ideas—I just need to work on them incrementally. ## 5. Regularly engage in physical exercise, preferably at a gym I’ve gained significant weight in the past few years. I need to lose weight and get in shape. My plan is to visit the gym four days a week to shed some weight and gain muscle. A healthy diet will also be crucial. ## 6. Learn to recite the Quran with proper tajweed While I know how to recite the Quran, I haven’t mastered proper tajweed. I’ve learned some of the rules but need further guidance from a teacher. ## 7. Plan and go on a international trip I’ve visited several places within the country but have never traveled abroad. I have been planning to visit [Nepal](https://en.wikipedia.org/wiki/Nepal) or [India](https://en.wikipedia.org/wiki/India) for a long time. I hope to make it happen this year and perhaps visit other countries if possible. ## 8. Become a better developer This year, I explored cloud computing and advanced front-end concepts. I’ve learned and worked with tools like Astro and Svelte. My focus in 2025 will be to delve deeper into backend development and cloud technologies. ## 9. Improve communication skills I’ve made progress in improving my communication skills, such as speaking with people more confidently and making new friends. I’ve also improved my writing skills slightly. However, there’s still room for significant growth, particularly in maintaining a healthy routine and consistent diet and exercise. # Conclusion 2024 was a year of mixed emotions. While I experienced some great moments, I also faced challenges. I couldn’t accomplish most of my goals, but I learned a lot from my failures. I’ve carried forward my unachieved goals to 2025, and I hope not to move them forward again! I aim to make 2025 a year of success and positivity. To follow my journey, stay tuned to this blog or connect with me on [Blusky](https://bsky.app/profile/jubayeramb.bsky.social), [X](https://x.com/jubayeramb), or [GitHub](https://github.com/jubayeramb). Wishing you all a very happy and prosperous New Year 2025! 🎉

2023 Year in Review and Next Goals

Sun, 31 Dec 2023 00:00:00 GMT

The year 2023 posed several challenges for me. I navigated through two job changes within the same year, finally securing a position that brings stability. Amidst juggling work, university, and other commitments, I haven't been as productive as I would have liked to be. I have been able to accomplish some of my goals. But it seems to have done a bit better than the previous year. ## 2023 Highlights Reflecting on the key moments of 2023: - Successfully securing a position in a company that aligns with my preferences, bringing satisfaction. - Exploring domestic destinations like [Sylhet](https://en.wikipedia.org/wiki/Sylhet) and [Sitakunda](https://en.wikipedia.org/wiki/Sitakunda) with friends. - Maintaining consistent grades at university. - Expanding my circle by making new friends on campus. - The decision to establish and develop this blog site. ## 2023 Evaluation An assessment of the goals set for 2023: 1. Become a better developer. 2. Improve my communication skills. 3. Build better personal habits. I'd say I have been able to accomplish the first goal a bit. I have been able to learn a lot of new things and have been able to apply them in my work. I have also tried to improve my communication skills. I have been able to talk to people more and have been able to make some new friends. I have also been able to improve my writing skills a bit. But still, I have a long way to go. I have also been able to build some better personal habits but not all. But I still need to work on my diet, my sleep schedule and regular exercise. # 2024 Goals Setting ambitious targets for the upcoming year: ## 1. Build better personal habits Priorities include maintaining a consistent sleep schedule, adopting a healthier diet, and incorporating regular exercise. The primary goal is to establish the routine of commencing each day after Fajr prayer, emphasizing consistency. ## 2. Write at least one line of code every day Committing to daily coding, regardless of project size, to foster consistency, productivity, and continuous learning. ## 3. Spend at least 15 hours weekly on coding side projects What I learnt is from building projects to solve real-wold problems and this is the best way to learn something effectively. I have been able to work on some side projects in the past but I need to be more consistent. I will dedicately spend at least 15 hours per week working on side projects to build some cool stuff. ## 4. Contribute to OSS I have contributed a negligible amount to OSS in the past. I must need to contribute more. So, I listed some projects of my interest and will try to contribute to them. I will also try to contribute to some other projects that I find interesting. ## 5. Write at least 5-10 blog posts In order to build a regular writing habit, I planned to build this blog site and got it done in November 2023. So far I have written 3 blog posts. So I have a goal to write at least 5-10 blog posts in the year 2024. I have some ideas for blog posts, I just need to write them down inchmeal. ## 6. Regularly engage in physical exercise, preferably at a gym I have gained a good amount of weight in the past few years. I need to lose some weight and get in shape. I have plan to go to a gym 4 days a week to lose some weight and gain some muscle. I also need to maintain a healthy diet. ## 7. Learn to recite the Quran with proper tajweed I have been able to recite the Quran but I don't know how to recite it properly. I need to learn to recite the Quran with proper tajweed. I have been able to learn some of the rules of tajweed but I need to learn more from a teacher. ## 8. Plan and go on a international trip I have been to some places in the country but I have never been to any other country. I want to go on a international trip with my friends. I have been planning to go to [India](https://en.wikipedia.org/wiki/India) for a long time. I hope I will be able to go there this year and also visit some other countries if possible. ## 9. Become a better developer I have learnt some cloud stuffs in the past year and also gained some knowledge on advanced frontend concepts. I have learned and work with Astro and Svelte. I want to learn more backend stuff and cloud technologies this year. ## 10. Improve communication skills Continuing the journey to enhance communication, focusing on increased interaction, forging new connections, and refining writing skills through increased social media and blog engagement. # Conclusion These goals for 2024 are ambitious, and I'm eager to see them materialize. A year-end review post will evaluate the outcomes, aiming for accomplishment and growth. Follow my journey on [Twitter](https://twitter.com/jubayeramb) and [GitHub](https://github.com/jubayeramb). Here's to a promising year ahead! 🤞 Thanks for reading! 🙏 Happy New Year! 🎉

Handle JavaScript Promises in a Better Way

Sat, 09 Dec 2023 00:00:00 GMT

If you're familiar with what promises are, you can skip the next section and jump straight to the [approaches](#initial-setup). Otherwise, read on! ## What are Promises? The word "Promise" itself describes the concept of a commitment, signifying that something will occur in the future. A promise is a value that may not be available immediately but could be in the future. In JavaScript, a promise is an object that represents the eventual completion or failure of an asynchronous operation and its resulting value. The program's execution does not halt while waiting for the promise to resolve; instead, it continues to execute the next line of code. The promise will be resolved or rejected at a later point. For example, a promise can be used to fetch data from an API. The promise will be resolved when the data is available, and the program can continue its execution. If an error occurs, the promise will be rejected, and the error can be handled appropriately. The promise object has three states: _Pending_, _Fulfilled_, and _Rejected_. Consequently, handling the fulfilled and rejected states of the promise is crucial to maintaining the smooth execution of our program. There are various ways to handle promises in JavaScript. In this article, we'll explore some of the most common approaches to handling data and errors in promises, discussing the pros and cons of each approach. Let's get started! ## Initial Setup Suppose we have a function that returns a promise named `sayHi`. This function takes a boolean parameter called `shouldReject`. If `shouldReject` is `true`, the function returns a rejected promise; otherwise, it returns a resolved promise. ```js function sayHi(shouldReject) { return new Promise((resolve, reject) => { if (shouldReject) { reject("No, I won't say Hi! 😡"); } resolve("Hi! 😊"); }); } ``` ## Approach 1: Using `then`/`catch` The first approach is to use the `then`/`catch` method. The `then` method handles the resolved data (usually), while `catch` deals with errors in promises. But both resolved data and errors can be handled in a single call using the `then` method. ```js sayHi().then( (result) => console.log(result), (error) => console.log(error) ); ``` ``` Hi! 😊 ``` This approach is concise and convenient for simple scenarios. However, for complex chains with multiple promises, separate `then` and `catch` calls can enhance code readability and maintainability. This separation improves code organization, making success and error-handling logic clearer. For instance: ```js sayHi(true) .then((result) => { console.log(result); }) .catch((error) => { console.log(error); }); ``` ``` No, I won't say Hi! 😡 ``` While the `then`/`catch` method is common, it has some drawbacks. For instance, if multiple promises are used, the `catch` block captures errors from any point in the promise chain, leading to a lack of granularity in error handling. ```js sayHi(true) .then((result) => { console.log(result); }) .then(() => { console.log("This will not be executed"); throw new Error("This will not be caught by the next catch block"); }) .catch((error) => { console.log(error); }); ``` ``` No, I won't say Hi! 😡 ``` This problem can be mitigated by using the `catch` method on each promise, but this results in more verbose code. Nesting too many `then`/`catch` blocks can also lead to "promise hell," making the code challenging to read and maintain. ```js sayHi(true) .then((result) => { console.log(result); }) .catch((error) => { console.log(error); }) .then(() => { console.log("This will be executed"); throw new Error("This will be caught by the next catch block"); }) .catch((error) => { console.log(error.message); }); ``` ``` No, I won't say Hi! 😡 This will be executed This will be caught by the next catch block ``` While `then` and `catch` are still widely used, some developers prefer the cleaner and more concise syntax of `async`/`await` for handling promises, especially in scenarios where a more synchronous-looking code is desired. ## Approach 2: Using `async`/`await` The second approach involves using `async`/`await`. The `async` keyword defines an asynchronous function, while `await` is used to wait for a promise to resolve. The `await` keyword can only be used inside an `async` function and will pause the function's execution until the promise is resolved. It also catches any errors thrown by the promise, which can be handled using a `try`/`catch` block. ```js async function asyncWrapper() { try { const result = await sayHi(); console.log(result); } catch (error) { console.log(error); } } asyncWrapper(); ``` ``` Hi! 😊 ``` The `async`/`await` syntax can be combined with the `catch` method syntax: ```js const message = await sayHi(true).catch((error) => { console.log(error); }); console.log(message); ``` ``` No, I won't say Hi! 😡 ``` However, a drawback is that if a rejection occurs, the execution of the next line where `message` is being used cannot be stopped. Additionally, outside the `catch` block, there is no access to the `error` object, making it impossible to check for errors before the execution of the next line. Despite these limitations, the `async`/`await` syntax is more concise and easier to read than the `then`/`catch` syntax. It allows for more granular error handling using the `try`/`catch` block and includes a `finally` block to execute code after the promise is resolved or rejected. ```js async function asyncWrapper() { try { const result = await sayHi(true); console.log(result); } catch (error) { console.log(error); } finally { console.log("This will be executed regardless of the promise's state"); } } asyncWrapper(); ``` ``` No, I won't say Hi! 😡 This will be executed regardless of the promise's state ``` We can also go with kinda `callback` pattern we're used to within Node.js. We can get both the data and the error from a single call and can easily handle them. ```js async function asyncWrapper(promise) { try { const result = await promise; return [result]; } catch (error) { return [, error]; } } const [message, error] = await asyncWrapper(sayHi()); if (error) { console.log(error); } else { console.log(message); } ``` ``` Hi! 😊 ``` > Note: `null` or `undefined` can be returned instead of an empty array, for example, `return [result, null]` or `return [result, undefined]`. Another approach utilizing the `Promise.allSettled` method will be discussed shortly. ## Approach 3: Using `Promise.allSettled` Concurrent promises can be handled using the `Promise.all` and `Promise.allSettled` methods. `Promise.allSettled` is used to wait for all promises to be settled. It takes an array of promises as an argument and returns a promise that is resolved when all promises are settled. The promise returned includes an array of objects, each with a `status` property and a `value` when fulfilled or a `reason` when rejected. ```js Promise.allSettled([sayHi(true), sayHi(false)]).then((results) => { console.log(results); }); ``` ``` [ { status: 'rejected', reason: 'No, I won\'t say Hi! 😡' }, { status: 'fulfilled', value: 'Hi! 😊' } ] ``` If promises depend on each other, and immediate rejection is desired if any fails, `Promise.all` can be used. This method waits for all promises to be resolved and is rejected immediately if any promise is rejected. Errors can be handled using the `catch` method. ```js Promise.all([sayHi(false), sayHi(false), Promise.resolve("Resolved!! 😁")]) .then((results) => { console.log(results); }) .catch((error) => { console.log(error); }); ``` ``` [ 'Hi! 😊', 'Hi! 😊', 'Resolved!! 😁' ] ``` ```js Promise.all([sayHi(true), sayHi(false), sayHi(false)]) .then((results) => { console.log(results); }) .catch((error) => { console.log(error); }); ``` ``` No, I won't say Hi! 😡 ``` The `async`/`await` syntax for handling data and errors in a single call can be achieved using the `Promise.allSettled` method: ```js function asyncWrapper(promise) { return Promise.allSettled([promise]).then(([{ value, reason }]) => [ value, reason, ]); } const [message, error] = await asyncWrapper(sayHi()); if (error) { console.log(error); } else { console.log(message); } ``` ``` Hi! 😊 ``` This approach appears more concise and readable than the `async`/`await` syntax! > Other methods such as `Promise.race` and `Promise.any` exist to handle concurrent promises. You can read more about these [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#promise_concurrency). ## Conclusion In this article, we explored different ways to handle errors in JavaScript promises, discussing the pros and cons of each approach. I hope you found this article useful. Thanks for reading! 😊

Tailwind CSS Dark Mode without `dark:` Prefixes

Fri, 10 Nov 2023 00:00:00 GMT

A quick guide on how to add dark mode to your Astro (or whatever) website using Tailwind CSS without `dark:` prefixes. Also supports `prefers-color-scheme` media query.
In this blog, I will show you how to add dark mode to a Astro website. This will also work with any other framework or even vanilla HTML/CSS/JS.
You can check the complete source code of this blog on [GitHub](https://github.com/jubayeramb/astro-tailwind-dark-theme). ### 1. Initial setup Initialize an Astro project by running the following command in your terminal: ```bash npm create astro@latest ``` > You can use your preferred package manager (`yarn` or `pnpm`) instead of `npm` if you want. You can choose to use the default template or any other template you want. I will be using the default template for this blog. You can go with or without TypeScript. Once your project is initialized and dependencies are installed, you can start the dev server by running: ```bash npm run dev ``` The default dev server will be running on `localhost:4321`. ### 2. Add Tailwind CSS You can add Tailwind CSS to your project by running the following command in your terminal: ```bash npx astro add tailwind ``` The `astro add` CLI command will automatically install the required dependencies and add the required Tailwind configuration to your project. So you're now good to go with Tailwind CSS! > You can also add Tailwind CSS manually by following the [Manual Tailwind CSS installation documentation](https://docs.astro.build/en/guides/integrations-guide/tailwind/#manual-install) on Astro doc. ### 3. Clean up the project (optional) If you chose the empty template, you don't need to follow this step. But if you chose any other template, you can clean up the project by removing the unnecessary files and code. You can remove the following files and folders: - `src/pages/index.astro` - `src/components/Card.astro` Now create a new file `src/pages/index.astro` and add the following code: ```astro --- import Layout from "../layouts/Layout.astro"; ---

Welcome To Your Site

``` Also replace the content of `src/layouts/Layout.astro` with the following code: ```astro --- interface Props { title: string; } const { title } = Astro.props; --- {title} ``` > **Notice** defining the `Props` type helps you getting type support for the component incoming props. If you didn't choose TypeScript, you can remove the `Props` interface. Now you can save the files and check the browser (make suer the dev server is running). You should see a page with a title "Welcome To Your Site" placed in the center of the page. _**Notice that the Tailwind CSS is already working.**_ ### 4. Add dark mode Now we will add dark mode to our website. We will be using the `prefers-color-scheme` media query to detect the user's system preference by default and then we will add a toggle button to switch between light and dark mode. To skip the `dark:` prefixes, we will take advantage of the Tailwind color palette customization and CSS variables. First we will declare two color variable in our `./src/styles/global.css` file and define the colors in the `tailwind.config.js` file and then we will use the `bg-[color]` and `text-[color]` classes to apply the colors to the elements. #### 4.1. Add color variables Create a `global.css` file in the `./src/styles/` directory and add the following code: ```css @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root, :root[data-theme="light"] { --color-bgColor: 221 230 237; --color-contentColor: 34 40 49; --sun-fill: rgb(0, 0, 0); --moon-fill: transparent; } @media (prefers-color-scheme: dark) { :root { --color-bgColor: 34 40 49; --color-contentColor: 238 238 238; --sun-fill: transparent; --moon-fill: rgb(255, 255, 255); } } :root[data-theme="dark"] { --color-bgColor: 34 40 49; --color-contentColor: 238 238 238; --sun-fill: transparent; --moon-fill: rgb(255, 255, 255); } } ``` > Here we are using the `--color-bgColor` and `--color-contentColor` variables to define the background and content colors. We are also using the `--sun-fill` and `--moon-fill` variables to define the fill color of the sun and moon icons. We will use these variables in the `tailwind.config.js` file to define the colors. > **Notice** that we are using the `:root[data-theme="light"]` and `:root[data-theme="dark"]` selectors to define the colors. We will use the `data-theme` attribute to switch between light and dark mode. We're also using the `prefers-color-scheme` media query to detect the user's system preference by default. #### 4.2. Add color definitions Now open the `tailwind.config.cjs` file and add the following code: ```js /** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { extend: { colors: { bgColor: "rgb(var(--color-bgColor) / )", contentColor: "rgb(var(--color-contentColor) / )", }, }, }, plugins: [], }; ``` #### 4.3. Import global styles Usually you will be using the `Layout.astro` component to wrap your other pages. So import the `global.css` file in the `./src/layouts/Layout.astro` file frontmatter (otherwise add it to the `index.astro` file, if you're not using the `Layout.astro` component) like this: ```astro --- interface Props { title: string; } const { title } = Astro.props; import "../styles/global.css"; --- ``` Now all you need to do is to use the `bg-bgColor` and `text-contentColor` classes to apply the colors to the elements. For example, you can replace the `` element of the `./src/layouts/Layout.astro` wrapper file with the following code: ```astro ``` **Wohoo! You have successfully added dark mode to your website!** 🔥
Now your site will respond to the user's system preference. Toggle your System theme to see the effect on your site. But we still need to add a toggle button for the user to switch between light and dark mode manually. #### 4.4. Add a toggle button Now we will add a toggle button to switch between light and dark mode manually. We will use the `data-theme` attribute to switch between light and dark mode. We will also use the `--sun-fill` and `--moon-fill` variables to define the fill color of the sun and moon icons. We will use the `bg-bgColor` and `text-contentColor` classes to apply the colors to the elements. Create a `ThemeIcon.astro` file into the `./src/components/` directory and add the following code: ```astro --- --- ``` > Here we are using a SVG icon to toggle between light and dark mode (you can update the icon as of your choice). We are also using the `localStorage` API to store the user's preference. We are using the `data-theme` attribute to switch between light and dark mode. We are also using the `--sun-fill` and `--moon-fill` variables to define the fill color of the sun and moon icons. We are using the `bg-bgColor` and `text-contentColor` classes to apply the colors to the elements. Now you can import the `ThemeIcon.astro` component in the `./src/layouts/Layout.astro` file and place it anywhere you want. For example, you can place it in the `` element of the `./src/layouts/Layout.astro` wrapper file like this: ```astro

``` > You can create a Nav component and place the `ThemeIcon.astro` component in the Nav component. **Congratulations! You did it! You Added a dynamic dark theme to your site!** 🎉
You don't even need to add the `dark:` prefixes to the every Tailwind CSS classes where you need to add dark theme variant. You can use the `bgColor` and `contentColor` color variant to apply the colors to the elements and the site will automatically adjust the theme color.
Now you can save the files and check the browser (make suer the dev server is running). You should see a toggle button in the center of the page. Click on the button to switch between light and dark mode. Thanks for reading! 🙏