👨🏼‍💻

khriztianmoreno's Blog

Home Tags About |

Posts with tag tutorial

Node.js Corepack: Version Control for Package Managers

2024-12-10
javascriptnodejstutorial

The Problem with Traditional Package ManagersFor years, npm has been the de facto package manager for Node.js. While it offers robust features like private package access and two-factor authentication, it also comes with some drawbacks:Slow installation speeds: npm can be notoriously slow, especially for large projects.Bloated node_modules directories: These directories can consume significant disk space.Complex configuration: npm's configuration can be intricate and challenging to master.To address these issues, alternative package managers like Yarn and pnpm have emerged. Yarn is known for its speed, while pnpm optimizes disk space by sharing dependencies.What is Corepack?Corepack is a new experimental feature in Node.js that allows you to manage the versions of package managers on your machines and environments. This means that all team members will use the same version of the package manager, which can help avoid compatibility issues.{ "name": "my-project", "scripts": { "start": "node index.js" }, "packageManager": "pnpm@8.5.1" // what is this? (Corepack) }Getting Started with CorepackTo enable Corepack, you can run the following command:corepack enableOnce Corepack is enabled, to set your project’s package manager, run corepack use. This command updates your package.json automatically.corepack use pnpm@8.x # sets the latest 8.x pnpm version in the package.json corepack use yarn@* # sets the latest Yarn version in the package.jsonWhy Use Corepack?Corepack can help you avoid compatibility issues by ensuring that all team members use the same version of the package manager. It can also help you manage package manager versions across different environments, such as development, production, and testing.The Future of CorepackCorepack represents a significant step forward in Node.js package management. By providing a unified interface for different package managers, it simplifies the development workflow and reduces the complexity associated with managing dependencies. As Corepack matures, it has the potential to become the standard way to manage Node.js packages.ReferencesCorepack DocumentationCorepack : Managing the Package ManagersHow To Use CorepackI hope this has been helpful and/or taught you something new!Profile@khriztianmoreno �

Unlock your creativity with Google Gemini and JavaScript - A practical guide

2024-06-12
javascriptaitutorial

Hello! Today I bring you a new tool that will boost your creativity to another level: Google Gemini. This artificial intelligence API allows you to generate high-quality text in Spanish, from simple phrases to complete stories, with just a few lines of code.What is Google Gemini?Google Gemini is a state-of-the-art language model developed by Google AI. It has been trained with a massive dataset of text and code, allowing it to understand and generate natural language with impressive accuracy.What can we do with Google Gemini and JavaScript?The possibilities are endless. Here are some examples:Generate creative content: Write poems, stories, scripts, blog posts, or any type of textual content you can imagine.Translate languages: Translate texts from one language to another quickly and accurately.Answer questions: Get answers to your questions in an informative and complete way.Create chatbots: Develop conversational chatbots that interact with users naturally.Automate tasks: Automate the generation of reports, emails, and other tasks that require natural language processing.How to get started?To get started with Google Gemini with JavaScript, you only need:A Google Cloud Platform account: https://cloud.google.com/Enable the Google Gemini API: https://ai.google.dev/Practical example:In this example, we are going to generate a poem using Google Gemini and JavaScript.const { GoogleGenerativeAI } = require("@google/generative-ai"); // Access your API key as an environment variable (see "Set up your API key" above) const genAI = new GoogleGenerativeAI(process.env.API_KEY); async function run() { // For embeddings, use the embedding-001 model const model = genAI.getGenerativeModel({ model: "embedding-001" }); const text = "Escribe un poema sobre la naturaleza"; const result = await model.embedContent(text); const embedding = result.embedding; console.log(embedding.values); } run();For text generation we use the getGenerativeModel method of the genAI object.Example of a generated poem:The green earth, the blue sky, the sun shines with crystal light. The flowers bloom in the garden, the birds sing with sweet trill. The wind rustles through the leaves, the bees buzz among the flowers. Nature is a divine gift, a place of peace and harmony.Conclusion:Google Gemini and JavaScript are a powerful combination that allows you to unlock your creativity and develop amazing applications. With this practical guide, you are ready to start exploring the endless possibilities of this technology.Additional Resources:Google Gemini Documentation: https://ai.google.dev/docsGoogle Gemini Tutorials: https://m.youtube.com/watch?v=TXvbT8ORI50Google Gemini Code Examples: https://m.youtube.com/watch?v=jTdouaDuUOAFeel free to experiment with Google Gemini and JavaScript! Share your creations in the comments and let me know what you think of this tool.I hope this has been helpful and/or taught you something new!Profile@khriztianmoreno �

Pimp my Term - Mac

2020-05-03
tutorialbashterminal

As a Mac OS user, I enjoy working with the terminal and find it a particularly powerful tool. Therefore, I spent quite a bit of time customizing it and here is my ultimate guide to terminal customization.Alt TextAt first I thought I would just create a short post with some of the settings I like. But I had so many things I wanted to show that this started to turn into a considerably long post. So I've decided to post it now, with as many tips as I can write, and I'll update it with new tips and tricks.My terminalRecommended installationsiTerm2Nerd fonts - Hack Boldzshzsh extensions:autosuggestionssyntax-highlightingPowerlevel10klsd: The next gen ls commandccat: Colorizing catlolcatNeofetch: A command-line system information tool written in bash 3.2+Let's start configuring all the tools we will need.PrerequisitesFirst, you must install iTerm2.Then install brew.Now install oh-my-zsh, open iTerm2 and paste the following command:sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"After we have these couple of things installed let's get more into it.Patched fontsI want to start talking about patched fonts, since many of the customizations I will explain later may depend on them. Patched fonts consist of regular fonts to which some additional symbols have been added. That way, you can display special icons (like your operating system icon) or add new shapes to your prompt.The most successful project is nerd-fonts, which includes many of the most commonly used fonts and a favorite of this project is Hack BoldNerd fontsNerd Fonts is a project that patches developer-driven fonts with a large number of glyphs (icons). Specifically to add a large number of additional glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons and others.Nerd fontsThen to install these fonts on your Mac OS you can use brew:brew tap homebrew/cask-fonts brew cask install font-hack-nerd-fontI have seen that sometimes it does not install the fonts with cask, here is another option:brew install --cask font-hack-nerd-fontNow, if you look in the folder where you just installed it, you will see that it appears there: ls ~/Library/Fonts.Configure your terminalOnce you have downloaded Nerd Fonts, you can configure your terminal to use it. Configure iTerm2 to use the font by going to:iTerm2 -> Preferences -> Profiles -> Text -> Font -> Change FontSelect the Hack Regular Nerd Font and adjust the size if desired. Also check the Use a different font for non-ASCII text box and select the font again. It should display the new font and icons in the application.iTerm2 Text nerd fontsDon't worry if you don't see a significant change in your terminal, this will set the stage for the next steps.Colorize the terminalOn the road to the ultimate terminal, there is nothing that will improve its appearance more than customizing its color scheme, so this will be our starting point. By searching the Internet, you will be able to find many themes, but the easiest way to apply them is to use Gogh.This tool requires no installation and allows you to choose your favorite colors from a long list of different pre-built schemes.Simply copy and paste the command: bash -c "$(curl -sLo- https://git.io/vQgMr)"After selecting a theme, it will be installed and available for selection on your terminal.iTerm2 -> Preferences -> Profiles -> Colors -> Color PresetsLSD, LOLcat y ccatSome of the following tools to make them look better you need your iterm2 to have a minimum contrast.lsd is very much inspired by the supercolor project but with some small differences. For example, it is written in RUST and not in ruby, which makes it much faster.LSDIt is necessary to install the patched powerline fonts nerd-font and/or font-awesome.To install LSD just use brew and execute this line in your terminal:brew install lsdlolcat 🤣️ It gets rainbows and unicorns everywhere! This tool appears commonly used together with Neofetch, adding a stunning rainbow effect to your prompt.LOLcatTo install LOLcat just use brew and execute this line in your terminal:brew install lolcatTo verify that it is installed and working correctly you can run in the terminalls | lolcatccat This is the cat coloring. It works similarly to cat but displays content with syntax highlighting.asciicastTo install ccat just use brew and execute this line in your terminal:brew install ccatCustomize the bash promptIn case you have installed a patched font as described above, you can now use any kind of symbols to build your prompt. These sources include many powerline symbols that will allow you to fully customize your terminal without having to install any external plugins.Powerlevel10kThis is a fast reimplementation of POWERLEVEL9K with even some additional features. It even keeps the same variable names, so you won't need to change your configuration if you are coming from POWERLEVEL9k.One thing I love about POWERLEVEL10K is that, if you don't already have settings, when you first start it up, it will show you a guide that asks you for your preferences. During this process, it shows several examples, making it much easier to customize.Powerlevel10kTo install it on Mac we have two ways, the first one can be using brew or the second one that will be the one we will use is with Oh My Zsh, paste the following line in your terminal.git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10kNow you must tell zsh which will be the theme to use, for that edit the file ~/.zshrc, you can use any editor of your preference and look for the theme property and change it to ZSH_THEME="powerlevel10k/powerlevel10k.We must reload this file to see the changes in our terminal.source ~/.zshrcConfiguration WizardType p10k configure to access the built-in configuration wizard directly from your terminal.Powerlevel10k wizardAt the end of the wizard you will have a more personalized terminal and you will be very happy :)Now let's continue adding more high glamour details to our terminal.Some aliasesSome of the commands you have already installed do, in fact, support color highlighting, for example: ls, grep and diff. In case you want these commands to always have the color option enabled, you can write aliases in your terminal configuration file (.bashrc /.zshrc) to force them.alias l='ls -l' alias la='ls -a' alias lla='ls -la' alias lt='ls --tree' alias cat=ccatZsh customizationsZsh is a much more configurable shell with tons of plugins and themes that will make your terminal look amazing and even improve your workflow. For this shell, the customization possibilities are almost limitless, so now I will simply explain the configuration I use.One key difference with Zsh is that it doesn't come with preconfigured settings like other shells such as bash or fish, so I would suggest copying some of my settings as a starting point, particularly if you are installing it for the first time.Configuring keybindings - keybindingsOne of the first things I quickly noticed when using Zsh is that many of the keybindings and shortcuts I was used to, coming from bash, would not work at all or would cause unexpected behavior. Even the HOME and END keys didn't work. So here are all the key combination settings I use:bindkey '^[[2~' overwrite-mode bindkey '^[[3~' delete-char bindkey '^[[H' beginning-of-line bindkey '^[[1~' beginning-of-line bindkey '^[[F' end-of-line bindkey '^[[4~' end-of-line bindkey '^[[1;5C' forward-word bindkey '^[[1;5D' backward-word bindkey '^[[3;5~' kill-word bindkey '^[[5~' beginning-of-buffer-or-history bindkey '^[[6~' end-of-buffer-or-historyUseful add-onsAutosuggestions Suggests commands as you type based on history and completions.Syntax highlighting This package provides syntax highlighting for the Zsh shell. It allows highlighting commands as they are typed at a Zsh prompt in an interactive terminal. This helps to check commands before executing them, particularly for syntax errors.That's it, we're done with setting up our terminal, I hope this has been useful and/or made you learn something new!Profile@khriztianmoren

Introduction to Apollo Client with React for GraphQL

2020-01-30
javascriptreactgraphqltutorial

GraphQL has become popular recently and is likely to replace the Rest API. In this tutorial, we will use the Apollo Client to communicate with GitHub's GraphQL API. We will integrate Apollo Client with ReactJS, but you can also use it with other platforms (VueJS, Angular, etc).

Flux Standard Action (FSA)

2020-01-20
reactjavascriptreduxtutorial

It is a lightweight specification that defines the structure of an action, to be implemented in libraries that use the Flux pattern or architecture.Compliance with FSA helps developers create abstractions that can work with different implementations of Flux.Flux Standard Action — ExampleFlux Standard Action — ExampleIt all started after Facebook published its architecture/pattern Flux, many libraries implemented the Flux philosophy, Redux was one of them.Flux can be divided into several concepts Dispatcher, Store, Action, and View. But in this post, we are going to learn about the Action part and how to work with them in a more standardized way, so later we can use other libraries that implement the FSA philosophy.Before delving deeper into today's main topic, let's get to know the concept of Action and how it is defined by flux:Actions define the internal API of your application. They capture the ways to interact with your application. They are simple objects that consist of a “type” field and data.The specification would lead to the following object:{ type: 'ADD_TODO', text: 'TODO content' }The only problem with this simple example is that the developer can choose any property name for the values. All the following names are valid: title, name, text, todoName, etc. It is impossible to know what properties to expect from ADD_TODO in the Redux reducer.It would be much easier to work with Flux actions if we could make certain assumptions about their shape. Maybe defining a minimum common standard for these patterns would allow us to have the necessary abstraction to communicate our actions with the reducer. This is something that Flux Standard Action (FSA) comes to solve.To go into a bit more detail about FSA, it is necessary to start from the following premise that Flux Standard Action provides us about actions:An action MUST:be a plain JavaScript object.have a type property.An action MAYhave an error property.have a payload property.have a meta property.An action MUST NOT include properties other than type, payload, error, and meta.But then what does each of these properties that our JavaScript object can contain mean?Let's see each of thesetypeThe required property type identifies the nature of the action that has occurred to the consumer, type is a constant of type StringpayloadThe optional payload property MAY be any type of value. It represents the action's payload. Any information about the action that is not the type or the status of the action should be part of the payload field.By convention, the payload SHOULD be an object.errorThe optional error property MAY be set to true if the action represents an error.An action whose error is true is analogous to a rejected Promise. By convention, the payload SHOULD be an error object.If the error has any value other than true, including undefined and null, the action MUST NOT be interpreted as an error.metaThe optional meta property MAY be any type of value. It is intended for any additional information that is not part of the payload.The Flux Standard Action (FSA) concept is used by some libraries that can help us reduce the repetitive text we have to create for our actions.Librariesredux-actions — a set of helpers to create and handle FSA actions in Redux.redux-promise — A middleware that supports FSA actions.redux-rx — RxJS utilities for Redux, including a middleware that supports FSA actions.I hope to have the opportunity to give an introduction on how to reduce Redux boilerplate with Redux-Actions in a future occasion.I hope this has been useful and/or taught you something new!Profile@khriztianmoreno �

NodeSchool Learn on your own

2020-01-02
javascriptnodejstutorial

When it comes to learning a new technology or understanding the features of a language, we always look for tutorials on the internet that teach us its concepts. That's why today I want to talk to you about NodeSchool.io, an initiative that aims to teach these topics through self-guided workshops.