Speed Matters: Why PNPM and Yarn Outpace npm in Package Management

Muhammad Abdullah — Wed, 24 Apr 2024 16:06:16 +0000

pnpm and yarn are often perceived as faster alternatives to npm due to several key factors:

Concurrency:

Both pnpm and yarn leverage parallelization and concurrency to execute operations more efficiently. They can perform multiple tasks simultaneously, such as downloading dependencies or building packages, which speeds up the overall process.

Package Deduplication:

npm installs packages into the node_modules directory of each project, which can lead to duplication of packages across different projects. pnpm and yarn use a shared global package store and symlink-based approach, reducing disk space usage and installation times by avoiding redundant downloads.

Caching:

pnpm and yarn cache packages locally, reducing the need to re-download dependencies when installing them in subsequent projects or environments. This caching mechanism can significantly improve installation times, especially for large projects or when working in environments with limited internet connectivity.

Offline Mode:

Both pnpm and yarn have an offline mode that allows developers to install packages without an internet connection, provided that the necessary dependencies are already cached locally. This feature is particularly beneficial for scenarios where internet access is unreliable or unavailable.

Network Efficiency:

yarn and pnpm optimize network usage by fetching packages in a more efficient manner compared to npm. They employ strategies such as parallel fetching, selective fetching, and intelligent HTTP request management to minimize the time spent waiting for network responses during dependency installation.

Overall, while npm remains a popular choice for package management in Node.js projects, pnpm and yarn offer performance improvements and additional features that make them attractive alternatives, particularly for projects with complex dependency graphs or performance-sensitive requirements.

Roadmap to become a Front-End developer :

Muhammad Abdullah — Tue, 05 Sep 2023 16:11:45 +0000

Embarking on a journey to become a front-end developer? This post lays out a comprehensive roadmap to guide you through the exciting world of web development. From essential skills and practical tips for success, this roadmap will help you chart a clear path towards becoming an entry-level front-end developer.

1) Learn the fundamentals of web:
. Difference between Client Side and Server Side
. How websites work?
. Basics of HTTP.

2) Learn HTML and CSS
. Working with divs, tables and sections.
. Creating forms with HTML.
. Using Images,Videos and audio files in HTML.
. Basic styling properties in CSS.
. Id,Classes and other selectors in CSS.
. Flexbox and grid.
. Media queries
. BEM (Block Element Modifier) methodology.

NOTE : CSS is an extensive field, and when you're just beginning, there's no need to strive for mastery right away. Focus on grasping the fundamentals until you feel confident in creating visually appealing web pages. Mastery of CSS will naturally come with experience. Avoid immediately diving into libraries like Bootstrap, Tailwind, or Material. Instead, start by working on projects using vanilla CSS. Once you've gained proficiency, you can explore the convenience of utilizing these libraries.

3) Learn Javascript (The fun part).
. Basic Syntax (Variables, Objects ,arrays, Functions, Data Types, Loops , Conditionals etc.)
. Learn DOM manipulation (Selecting Elements, Dealing with clicks, keyboard events and using the event parameter )
. Animations with JS and CSS.
. Developer tools in browsers (I recommend Firefox)
. Learn about Local and Session Storage
. Learn AJAX and working with JSON data.
. Learn different console methods(Many people don’t do this But I think it helps a lot in debugging.
Fun Fact : There are 20+ console methods.)
. Difference between Reference and object types and how they work behind the scenes
. Learn Es6 Syntax (Arrow functions, Template literals , Promises , Fetch API , Spread operator, Destructuring)
. OOP in JavaScript.
. REST APIs (You can use a fake rest Api such as JSON server for that)
. It is highly recommended that you also do DS and algorithms in JavaScript. It will really sharpen your problem solving skills.
. Optional things : JavaScript Engines (V8, SpiderMonkey etc.)

4) Finally Learn a JavaScript framework (React,Vue or Angular)

I will write the roadmaps of these three technologies later and I will make sure to post the link in the comments.
Keep Grinding and Happy Hacking.