Forem: Sergio Holgado

PNPM Package Manager: What is it and Why You Should Be Using it - A Comprehensive Guide

Sergio Holgado — Sun, 30 Jul 2023 11:09:56 +0000

Everything about the new Fast, disk space efficient package manager that's taking over npm.

· PNPM: The New npm Challenger: Discover the rise of PNPM and why it's taking the development world by storm.

· Inside PNPM's Magic: Unravel the inner workings of PNPM and its unique approach to package management.

· Getting Started with PNPM: Step-by-step guide to effortlessly integrate PNPM into your projects with easy installation and setup.

· Mastering PNPM CLI: Learn essential CLI commands, configuration, and shortcuts to enhance your development workflow.

PNPM: The New NPM and Yarn Challenger

npm (Node Package Manager) has long been the industry standard, but a new contender has emerged: pnpm (Pinned Node Package Manager). Offering enhanced speed, resource efficiency, insightful logs and is 3 times more efficient, pnpm is positioning itself as a viable alternative to npm, showcasing why npm may be falling behind.

When comparing PNPM and Yarn, it becomes evident that PNPM outperforms Yarn in terms of speed, regardless of cache type (cold or hot). The key to PNPM's speed lies in its file linking approach, where it simply links files from the global store, while Yarn adopts a file copying method from its cache. Additionally, PNPM ensures efficient disk usage by never saving package versions more than once on a disk.

clean install: installed for the first time with no cache on the system;
re-install: install after the first install;
with cache and lockfile: remove node_modules and run install;
with cache: remove node_modules, lock file, and run install;
with lockfile: remove node_modules and cache, and run install;
with cache and node_modules: only remove lockfile and install gain;
with node_modules and lockfile: remove cache and run install again;
with node_modules: remove cache and lockfile, and install again.

Downsides of using PNPM

Due to its flat tree structure, pnpm does not support the lock files produced by NPM. However, there exists a convenient command that enables the conversion of NPM/Yarn lock files into a pnpm-compatible format.

It's important to note that pnpm cannot publish packages with bundledDependencies. However, it is worth mentioning that even on NPM, using bundledDependencies is not a recommended practice. Instead, the preferred approach is to employ a package bundler, such as webpack, rollup, or ESBuild, to handle the bundling process effectively. This ensures a more efficient and manageable packaging of dependencies for the project.

Inside PNPM's Magic:

When utilizing npm, having 100 projects with the same dependency would lead to 100 separate copies of that dependency being saved on the disk. However, pnpm adopts a smarter approach by storing dependencies in a content-addressable store, resulting in the following benefits:

Efficient Storage Utilization:

When depending on different versions of the same dependency, pnpm optimizes disk usage by only adding the files that differ to the store. Suppose a dependency contains 100 files, and a new version introduces changes in just one file. In that case, running "pnpm update" will only add the modified file to the store instead of cloning the entire dependency, substantially reducing storage overhead.

Centralized File Storage:

Instead of using the flatten tree structure PNPM uses a symbolic link structure, this approach results in all dependency files being consolidated into a single location on the disk. During the installation process, pnpm creates hard links from this central repository to each project, eliminating the need for redundant copies. This innovative approach allows different projects to share dependencies of the same version, saving considerable disk space.

The cumulative result of these optimizations is a significant reduction in disk space consumption, directly proportional to the number of projects and their associated dependencies. Additionally, pnpm achieves faster installations due to its streamlined approach, making it a highly efficient package manager choice for developers.

Getting Started with PNPM:

Installation

Installing with Windows Powershell:

iwr https://get.pnpm.io/install.ps1 -useb | iex

Installing with NPM
· Node.js already installed:
npm install -g pnpm
· Node.js not installed (included in package as exe)
npm install -g @pnpm/exe

Install with Chocolatey
choco install pnpm

pnpm install

The pnpm install command is used to install project dependencies. It creates a non-flat node_modules structure in a content-addressable store, optimizing storage and providing faster installations. It also supports multi-package installations in a repository.

pnpm install

pnpm add

The pnpm add command allows you to add new dependencies to your project. It automatically updates the package.json file and installs the new package.

pnpm add

pnpm update

The pnpm update command helps update dependencies to their latest versions. It efficiently updates only the changed files in the content-addressable store, reducing the disk space required.

pnpm update

pnpm remove

To remove dependencies from the project, you can use the pnpm remove command. It removes the specified packages and updates the package.json file accordingly.

pnpm remove

· pnpm list

The pnpm list command displays a tree-like view of the project's dependencies. It shows all installed packages and their respective versions.

pnpm list

· pnpm store status

The pnpm store status command provides an overview of the content-addressable store's status, displaying its size and the number of packages stored.

pnpm store status

· pnpm store prune

To optimize disk space usage, you can use the pnpm store prune command. It removes unreferenced packages from the store.

pnmp store prune

· pnpm publish

The pnpm publish command enables developers to publish their packages to registries and share them with the community. When you publish a package using PNPM, it employs the content-addressable store to optimize the publishing process.
Instead of duplicating package files for each version, PNPM links common files from the store, drastically reducing the size of the published package. This intelligent approach leads to faster publishing times and more efficient storage usage on the registry, contributing to a better overall developer experience.

pnpm publish

PNPM Workspaces

PNPM's Workspaces feature allows developers to manage multiple packages within a monorepository with remarkable ease. By defining a single package.json file at the root of the repository and specifying the individual packages as workspaces, PNPM treats them as interdependent projects.
When you run pnpm installat the root of the repository, PNPM installs dependencies for all workspaces, ensuring consistency across the entire project. This centralized approach streamlines development, facilitates code sharing, and simplifies the maintenance of complex projects.



{
 "name": "my-monorepo",
 "private": true,
 "workspaces": [
 "packages/*"
 ]
}

Rix.chat: The Ultimate AI Coding Assistant

Sergio Holgado — Wed, 05 Jul 2023 07:17:13 +0000

Rix Chat is an exceptional AI-powered search and coding assistant created exclusively for developers. With its versatility and user-friendly interface, Rix Chat is designed to enhance your coding experience. Best of all, Rix Chat is completely free, providing you with invaluable support and assistance throughout your development journey.

How does it work

To get started go to Rix.chat and sign in, then go to the search bar, there are three search modes:

Web Search: Browses the internet and returns a detailed response quoting the websites where it has extracted the information from, useful when looking for a short explanation about a very complex topic along side the code
Quick reply: retrieves information from previous answers he's given other users for the same prompt
Code Writing: Writes code along side by a step by step explanation of what the code does.

Why use Rix.chat intead of ChatGPT

Rix.Chat is trained on a large dataset of code-related content, including programming languages, frameworks, and libraries. This specialized training enables it to have a deeper understanding of code syntax, structure, and common coding patterns.
It can provide more accurate and contextually relevant code suggestions.
Rix.Chat's training includes knowledge about coding best practices and common programming pitfalls helping you write cleaner and more efficient code.
ChatGPT writes code that is not necessarily efficient or error free since it's a more general purpose AI.

How to write prompts effectively

Specify the Task or Objective:
- Start by clearly stating the task or objective you want assistance with. For example, "Write a Python function to calculate the factorial of a number."
Provide Context:
- Give any necessary context or constraints related to the task. For example, "The function should handle positive integers and return the factorial value."
Ask Direct Questions:
- Pose direct questions to prompt specific responses. For example, "What is the syntax to open a file in Python?" or "How can I sort an array in descending order using JavaScript?"
Use Placeholder Values:
- If you need to reference specific values or variables in your prompt, use placeholders. For example, "Calculate the sum of {num1} and {num2}."
Be Specific:
- Be as specific as possible when asking for code examples or explanations. Specify the programming language, relevant libraries or frameworks, and any specific requirements.
Break Down Complex Tasks:
- If the task is complex or multi-step, break it down into smaller sub-tasks. Ask for guidance or code suggestions for each sub-task to make the problem more manageable.
Use each search mode accordingly
- Choose between Search mode or code writing mode depending on your knowledge and the complexity of the code.

To stay updated with the latest developments in coding, AI, and technology, follow me for more articles, tutorials, and insights.

Happy coding!

How to fetch data before rendering in React JS

Sergio Holgado — Sun, 02 Jul 2023 15:38:35 +0000

In React.js, you can fetch data before mounting and components using various techniques, in order to display components require the fetched data before being displayed, the data must be fetched before mount, mounting means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting a component: constructor() getDerivedStateFromProps() render().

Here are a few common approaches depending on whether your react app is class based or functional:

Functional Components App

A functional component in a React app is a JavaScript function that returns JSX (JavaScript XML) to define the structure and behavior of a user interface element. It is a simpler and more lightweight alternative to class components. Functional components allow you to write reusable and stateless code by using hooks like useState and useEffect to manage component state and lifecycle effects. They are widely used in modern React development due to their simplicity and readability.

If your app is functional components based, use the useEffect hook, and fetch your data within the hook which is executed, before mount.



import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('your-api-endpoint');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  // Render the component using the fetched data
  return <div>{/* Render your component with the fetched data */}</div>;
}

Class-Based React App

For class components, you can also use async/await inside the componentDidMount method to fetch data, but it won't fetch the data before rendering, instead it will trigger a re-render, note that the method componentWillMount has been deprecated. the only way to fetch data before rendering is using the useEffect hook. Nevertheless using componentDidMount can be ideal for certain cases.



import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const jsonData = await response.json();
      this.setState({ data: jsonData });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    const { data } = this.state;

    return (
      <div>
        {/* Render your component using the fetched data */}
      </div>
    );
  }
}

export default MyComponent;

WEb3form how to avoid exposing your api key

Sergio Holgado — Thu, 29 Jun 2023 09:57:25 +0000

Web3form API keys are being exposed in html files, since any user can inspect the page and copy it, to prevent this create a process.env file and store you API key there

WEBFORM = your-api-key

Then we'll import it into the html file by adding an id to the
access key input as follows

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact us</title>
</head>
<body>
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" id="key" >
        <input type="text" name="name" required>
        <input type="email" name="email" required>
        <textarea name="message" required></textarea>
        <div class="h-captcha" data-captcha="true"></div>
        <button type="submit">Submit Form</button>
    </form>
    <script src="https://web3forms.com/client/script.js" async defer></script>
</body>
</html>

Then we'll access the value attribute through Javascript and link it to the env variable

document.getElementById('key').value = process.env.WEBFORM;

This will prevent users from inspecting the page and stealing your API key since the env file is not accesible.

If you are contributing to a Github repo or NPM make sure to add the process.env file to your gitignore file or npmignore respectively

3 Foolproof Strategies for Staying Organized in Code

Sergio Holgado — Sun, 25 Jun 2023 16:32:32 +0000

I'm not the most organized programmer, for instance my first projects used to be a complete mess, no folders, no project log, no README file. Being disorganize doesn't just make it harder for others to read your code but for you too, and it's slowing you down.
In this Post I'll talk about 5 good strategies to keep your code organized and clean.

Log files

A markdown log file is a file where you write down what you've done, what to fix and what to do, this lets you track your productivity, solve bugs more easily, don't forget any unfixed bugs or vulnerabilities, and avoid that feeling of not knowing where to start at the beginning of every code session.

Programming Log [Date] Project Update Added new feature XYZ. Refactored code in module ABC. Fixed bug in function DEF. Tested and verified compatibility with Python 3.9. Code Changes Updated main.py to improve performance. Added new helper functions in utils.py. Removed unused imports in module.py. Bug Fixes Resolved issue #123: Null pointer exception in process_data() function. Fixed memory leak in calculate() method. Next Steps Implement error handling for user inputs. Write unit tests for critical functions. Improve documentation for module interfaces.

Folders

When working with several documents, specially in frameworks separate images(assets), screens, databases, config files... in different folders.

Comment code as though another person were to read it

Proper commenting is essential in programming as it improves code readability, maintainability, and collaboration among developers. Here are some guidelines on how to comment properly:

Commenting Individual Code Lines: Inline comments should be used to clarify complex logic, explain the reasoning behind specific code decisions, or highlight important details. Place them on the same line or a line above the code they refer to. Inline comments should be concise and provide valuable insights, avoiding unnecessary redundancy with the code itself.

Documentation comments: Some languages, such as Python, support specific comment formats for generating documentation. For example, Python uses triple quotes (''' ''') for docstrings that can be automatically extracted to create documentation.

Commenting Blocks of Code: When commenting a block of code, such as a function or a complex algorithm, use a multi-line comment to provide an overview of its purpose, inputs, outputs, and any other relevant information. This helps other developers understand the functionality without delving into the implementation details immediately.

Update and Maintain Comments: Regularly review and update comments as the code evolves. Outdated comments can mislead other developers and introduce confusion. When making changes to the code, ensure that corresponding comments are also modified or removed if they become irrelevant.

Comment for Future Maintenance: Consider the future maintenance of your codebase when commenting. Explain any potential pitfalls, assumptions, or edge cases that might arise and how to handle them. This can save time and effort for developers who work on the code later.

Avoid Redundant Comments: Ensure that your comments add value and don't merely repeat what the code already expresses. Avoid excessive commenting on obvious or self-explanatory code. Focus on explaining the intent, rationale, or non-obvious aspects of the code.

7 React native libraries and packages for UI design

Sergio Holgado — Thu, 02 Mar 2023 18:45:45 +0000

React Native is a popular framework for building mobile applications that allows developers to use JavaScript to create native mobile applications for iOS and Android. One of the key benefits of React Native is its flexibility, which allows developers to use a wide range of libraries and packages to enhance the user interface and user experience of their applications. In this article, we will discuss seven React Native libraries and packages that can help developers create great user interfaces and user experiences.

React Native Elements

React Native Elements is a popular UI library that provides a set of cross-platform UI components that are easy to use and customize. It includes buttons, forms, input fields, badges, and more, and comes with a wide range of customizable options. React Native Elements also supports theming, allowing developers to easily change the look and feel of their application.

React Native Paper

React Native Paper is another popular UI library that provides a set of Material Design components for React Native. It includes buttons, cards, dialogs, progress indicators, and more, and is designed to be easy to use and customize. React Native Paper also supports theming, and provides a set of pre-built themes that can be used out of the box.

React Native Vector Icons

React Native Vector Icons is a library that provides a set of vector icons for React Native applications. It includes icons from popular icon packs like Font Awesome, Material Icons, and Ionicons, and allows developers to easily add icons to their application. React Native Vector Icons supports customization, allowing developers to change the color, size, and style of the icons.

React Native Animatable

React Native Animatable is a library that provides a set of pre-built animations that can be easily added to React Native components. It includes animations like fadeIn, slideInUp, zoomIn and more, and allows developers to create custom animations as well. React Native Animatable is designed to be easy to use and customize, and can help developers add a touch of interactivity and dynamism to their applications.

React Native Modal

React Native Modal is a package that provides a modal component for React Native applications. It allows developers to display content on top of the application's main view, and supports animations and custom styling. React Native Modal can be used to display popups, alerts, and other modal content, and is a useful tool for creating a seamless user experience.

React Native Gesture Handler

React Native Gesture Handler is a library that provides a set of gesture recognizers for React Native applications. It includes recognizers for taps, swipes, pinches, and more, and allows developers to create custom gestures as well. React Native Gesture Handler can be used to create touch-based interactions in React Native applications, and is a useful tool for enhancing the user experience.

React Native Reanimated

React Native Reanimated is a library that provides a set of tools for creating complex animations and interactions in React Native applications. It includes a powerful animation engine, a declarative API, and support for gesture handlers. React Native Reanimated can be used to create highly performant and customizable animations and interactions, and is a valuable tool for creating immersive user experiences.

In conclusion, React Native provides developers with a wide range of libraries and packages that can be used to create great user interfaces and user experiences. The seven libraries and packages discussed in this article provide a solid foundation for creating mobile applications that are intuitive, engaging, and visually appealing. By using these tools, developers can create applications that stand out in a crowded marketplace and provide a superior user experience for their customers.