Hi everyone! 👋 I just published a new blog post, and I think it’s one that many of you might find useful! I have seen a lot of YouTube videos regarding the Next.js deployment but it quickly gets complicated. So thought why not write a blog about this? This setup is not unique but yeah I did some research coming up with this and having all things in a single place is good to have. I came up with this problem when my next js application wasn't able to get deployed on Vercel because of my need. Vercel is the easiest way to deploy a next.js application. But I needed more RAM and more storage which is at least not possible with the free tier plan of Vercel. So I used a digital ocean droplet to deploy. Which was enough to run my application. It was working well. But the problem for me was to automate this. It's cumbersome to rebuild the application by logging into the droplet each time I make the changes. And this led to the writing of this blog post. I wrote all about next.js deployment and successfully had a ci/cd pipeline and modern approach with docker deployment I tried explaining things but yeah maybe some areas needed more detailed info. Anyway, whoever is following if you have any doubts do ask me in the comment section I keep an eye on this. 👉 Check out the post here: https://lnkd.in/gC3EicT2 #NextJS #CICD #GitHubActions #Docker #DigitalOcean #WebDev #DevOps #TechCommunity

Brush up on Redux and its toolkit for State Management in React with this new course! https://lnkd.in/ggkU9NFQ #redux #toolkits #javascript #react

𝙇𝙞𝙗𝙪𝙫 - 𝙏𝙝𝙚 𝙐𝙣𝙨𝙪𝙣𝙜 𝙃𝙚𝙧𝙤 𝙤𝙛 𝙉𝙤𝙙𝙚.𝙟𝙨 We all know that the JavaScript engine (V8) is designed to execute synchronous code. But have you ever wondered how JavaScript performs so well with asynchronous operations? The credit goes to Libuv for making asynchronous I/O so seamless! Libuv is the powerhouse behind the scenes, handling tasks like file reading, API calls, timers, and promises. It does this by interacting directly with the server or system's OS. But how does it hand these tasks back to the JavaScript engine? Enter our mini-superhero: the event loop (or "I/O loop"). The event loop continuously checks if the JS engine is busy and if there are any ready-to-go callback functions in one of its many callback queues. This loop operates in phases: 𝗧𝗶𝗺𝗲𝗿 𝗣𝗵𝗮𝘀𝗲 – 𝗘𝘅𝗲𝗰𝘂𝘁𝗲𝘀 𝘁𝗶𝗺𝗲𝗿𝘀 𝗹𝗶𝗸𝗲 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁. 𝗣𝗼𝗹𝗹 𝗣𝗵𝗮𝘀𝗲 – 𝗧𝗵𝗲 𝗺𝗼𝘀𝘁 𝗰𝗿𝘂𝗰𝗶𝗮𝗹 𝗽𝗵𝗮𝘀𝗲, 𝘄𝗵𝗲𝗿𝗲 𝗮𝗹𝗹 𝗜/𝗢 𝗼𝗽𝗲𝗿𝗮𝘁𝗶𝗼𝗻𝘀 𝗮𝗿𝗲 𝗵𝗮𝗻𝗱𝗹𝗲𝗱. 𝗖𝗵𝗲𝗰𝗸 𝗣𝗵𝗮𝘀𝗲 – 𝗘𝘅𝗲𝗰𝘂𝘁𝗲𝘀 𝘀𝗲𝘁𝗜𝗺𝗺𝗲𝗱𝗶𝗮𝘁𝗲 𝗰𝗮𝗹𝗹𝗯𝗮𝗰𝗸𝘀. 𝗖𝗹𝗼𝘀𝗲 𝗣𝗵𝗮𝘀𝗲 – 𝗧𝗮𝗸𝗲𝘀 𝗰𝗮𝗿𝗲 𝗼𝗳 𝗰𝗹𝗲𝗮𝗻𝘂𝗽 𝗽𝗿𝗼𝗰𝗲𝘀𝘀𝗲𝘀 But that’s not all it does! It even processes process.nextTick() and promise resolutions before each phase. The loop keeps on ticking until there are no more processes to handle, then it halts at the poll phase. Wait, there's more! Libuv also comes with a thread pool. By default, it has four threads or processes, allowing us to handle four asynchronous tasks concurrently. Need more power? You can customize the number of threads to suit your server’s requirements by setting: 𝗽𝗿𝗼𝗰𝗲𝘀𝘀.𝗲𝗻𝘃.𝗨𝗩_𝗧𝗛𝗥𝗘𝗔𝗗_𝗣𝗢𝗢𝗟_𝗦𝗜𝗭𝗘 = 𝟭𝟬; So, here's a question for you- 𝙄𝙨 𝙉𝙤𝙙𝙚.𝙟𝙨 𝙨𝙞𝙣𝙜𝙡𝙚-𝙩𝙝𝙧𝙚𝙖𝙙𝙚𝙙 𝙤𝙧 𝙢𝙪𝙡𝙩𝙞-𝙩𝙝𝙧𝙚𝙖𝙙𝙚𝙙 ? 𝙎𝙝𝙖𝙧𝙚 𝙮𝙤𝙪𝙧 𝙩𝙝𝙤𝙪𝙜𝙝𝙩𝙨 𝙞𝙣 𝙩𝙝𝙚 𝙘𝙤𝙢𝙢𝙚𝙣𝙩𝙨 𝙗𝙚𝙡𝙤𝙬! Isn’t it fascinating? We often think writing high-level JavaScript is challenging, but just look at how intricate and beautifully abstracted Node.js is, thanks to Libuv. And here’s the best part: Libuv is open-source! If you're curious to dive deeper, you can explore the implementation in C. Interested? Check out the source code and documentation through the link below:

#Day6 of #React #Native Hmm after getting data from endpoints, sometimes the endpoints put bodyguards as they only allow request with API keys without API key they refused to serve data to frontend. so to buy that Id cards i.e API keys we need pay,that is like weather API. Google Maps API ,so we must protect them from git control and centralized them for easily change,so for that in thisI have learned how to create env variables using config "Hmm, after fetching data from endpoints, sometimes these endpoints (APIs) have bodyguards 🛡️, only allowing requests with API keys. Without an API key, they refuse to serve data to the frontend. So to get these 'ID cards' (API keys 🪪), we often need to pay, like for Weather APIs or Google Maps APIs. So, it's crucial to protect them from version control systems like Git and need to centralize them for easy management and updates. That's why in this task I learned how to create environment variables using dotenv library! 💡🔐" #ReactNative #MobileDevelopment #JavaScript #Programming #AppDevelopment #FrontendDevelopment #MobileApps #Tech #Code #ReactJS #DeveloperCommunity #CrossPlatform #APIs #EnvironmentVariables #CodingTips #SoftwareEngineering #OpenSource #WebDevelopment #TechInnovation #DeveloperTools

TypeScript shines when it comes to catching errors early and keeping your code organized. However, as our projects become more complex, the use of TypeScript alone might not be enough to ensure everything is running smoothly 🤔 That's where Zod steps in as your data validation hero 🦸♂️ This handy tool works with TypeScript to make sure your code stays solid. It's like having a shield for your code, ensuring that unexpected changes in APIs, user input, or databases don't catch you off guard ✨ Our blog dives deeper into how Zod works and how it can empower your development experience! Check it out 👉 https://lnkd.in/dtkyHJvs #Zod #TypeScript #WebDevelopment #BlogPost

Introducing Hono OpenAPI: Simplifying API Documentation for HonoJS #HonoJS #OpenAPI #APIDocumentation #JavaScript #APIManagement #SoftwareDevelopment #WebDevelopment #DevOps #APIFirstDevelopment https://lnkd.in/gSsyrEuT

🚀 New article about injecting environmentvariables in statically built web applications with Vite and Nginx In this article, I explore methods for injecting environment variables into statically built web applications using Vite and Nginx. You'll learn how to automate this process using a Docker container and the envsubst tool to replace variables at runtime. Each step from project creation to container deployment is thoroughly explained and illustrated with code examples. I've also included a link to the repository with the complete source code. Let’s read! #webdevelopment #docker #vite #nginx #devops #programming #envsubst #react #frontend #quadcode

🚀 Exploring NPM: The Node.js Package Manager and Its Importance 🚀 As I dive deeper into Node.js, I’ve come to appreciate one of its most powerful tools – NPM (Node Package Manager). It’s an essential part of the Node.js ecosystem and plays a critical role in managing and sharing packages. What is NPM? NPM is the default package manager for Node.js. It allows developers to install, share, and manage libraries and tools that make development faster and easier. With its massive registry of open-source packages, it’s an invaluable resource for any Node.js project. Why is NPM So Important? 1. Access to a Vast Ecosystem NPM provides access to thousands of packages and modules that can be easily integrated into your projects. Whether you need a library for handling HTTP requests, connecting to a database, or working with authentication, chances are there's an NPM package for it. 2. Dependency Management NPM helps manage project dependencies efficiently. By listing the packages your project needs in a package.json file, NPM can automatically handle the installation and versioning of these dependencies, ensuring compatibility and reducing conflicts. 3. Ease of Sharing and Reuse NPM makes it simple to share your own packages with the community. Publishing packages to NPM allows other developers to use your work, contributing to the collaborative nature of the open-source ecosystem. 4. Script Management NPM isn’t just for managing packages; it also allows you to define and run custom scripts. You can automate tasks like testing, building, and deploying your application using simple commands defined in the package.json file. Getting Started with NPM To start using NPM, you can install packages with: npm install <package-name> And to initialize a new project with a package.json file: npm init Understanding and leveraging NPM has been a game-changer in my development process, making it easier to manage dependencies, automate tasks, and tap into a rich ecosystem of tools. How has NPM impacted your projects? Share your experiences and tips below! 😊 #NPM #Nodejs #WebDevelopment #JavaScript #PackageManagement #Coding #TechTools

🚀 Just published my latest article on Medium: Simplifying API Routes in Next.js: A Modern Approach! I walk through how to streamline API development with Next.js, from setting up routes to handling errors and more. Check it out and let me know what you think! #NextJS #APIs #WebDevelopment #JavaScript #FullStack

After over two years of development, I'm thrilled to announce the release of #Counterfact 1.0! This open-source project tackles a key pain point in front-end development. One of the biggest challenges in front-end code work is the time spent waiting on APIs - from code and configuration to data loading. Traditional mocks can be useful but often lack statefulness and are challenging to maintain. #Counterfact addresses these issues by creating stateful mocks that replicate real back-end behavior. In just seconds, it transforms an OpenAPI/Swagger spec into a functional server with TypeScript types and interfaces, ensuring seamless synchronization between your front-end code and API. Explore it here: https://lnkd.in/erfRrAPn #FrontEndDevelopment #OpenSource #Testing #JavaScript #TypeScript