Forem: Martins Gouveia

[Boost]

Martins Gouveia — Mon, 26 Jan 2026 10:39:41 +0000

🚀 Top 10 Vercel Alternatives for 2026 🌐

Martins Gouveia ・ Aug 25 '23

Game-Changing Tools Reshaping Frontend Engineering 🤩

Martins Gouveia — Fri, 03 Oct 2025 19:47:14 +0000

1. Web Components

Web Components are a suite of web platform APIs that allow for the creation of reusable, encapsulated, and interoperable custom elements in web applications. These custom elements extend the functionality of standard HTML elements by enabling developers to define their own unique tags with custom behavior and styling.

The core technologies comprising Web Components include:

Custom Elements: APIs that enable the definition of new HTML elements, including their lifecycle callbacks and custom methods and properties. This allows for creating new, semantic HTML tags like .
Shadow DOM: Provides a way to encapsulate a component's internal DOM structure and styling, preventing conflicts with the rest of the document's styles and scripts. This creates a "shadow tree" that is isolated from the main document.
HTML Templates: (<template> and <slot> elements) allow for defining reusable HTML fragments that are not rendered immediately but can be cloned and inserted into the DOM when needed, often within Custom Elements.

Key benefits of using Web Components:

Reusability: Components can be easily reused across different projects and frameworks, promoting consistency and reducing development time.
Encapsulation: Shadow DOM ensures that a component's internal structure and styles are isolated, preventing unintended interactions with other parts of the application.
Interoperability: Being based on web standards, Web Components work natively in any modern browser without requiring external libraries or frameworks for their core functionality.
Maintainability: Updates to a component can be centralized, simplifying maintenance and reducing the risk of introducing bugs in other areas of the application.

While Web Components provide a low-level, browser-native way to build components, they can also be integrated with popular JavaScript frameworks like React or Vue to leverage their respective component models and development ecosystems.

Discuss & share web componentss: (https://www.webcomponents.org/)

2. WebAssembly

WebAssembly (Wasm) is a portable binary-code format designed for executable programs, serving as a compilation target for high-level languages like C, C++, Rust, and Go. It aims to enable high-performance applications on the web and in other environments.

Key characteristics of WebAssembly:

Binary Format: Wasm modules are distributed in a compact binary format, allowing for efficient transmission and parsing.
Near-Native Performance: It runs within a stack-based virtual machine, providing execution speeds close to native code.
Language Agnostic: Wasm is a compilation target, meaning code written in various languages can be compiled into Wasm and run in compatible environments.
Sandboxed Execution: Wasm operates within a secure, sandboxed environment, preventing direct access to the host system and enhancing security.
Interoperability with JavaScript: Wasm modules can be loaded and interacted with using JavaScript APIs, allowing developers to leverage the strengths of both technologies.
Beyond the Browser: While initially designed for the web, Wasm's portability and security features make it suitable for use in server-side applications, blockchain, and other environments.
Open Standard: Wasm is being developed as an open web standard by the W3C WebAssembly Working Group and Community Group, with support from major browser vendors.

Benefits of WebAssembly:

Performance: Enables demanding applications like games, image/video editing, and scientific simulations to run efficiently in web browsers.
Code Reusability: Allows existing codebases written in languages like C++ or Rust to be brought to the web.
New Capabilities: Facilitates the development of client-side applications that were previously not feasible in the browser due to performance limitations.
Portability: Wasm modules can run in various environments, including web browsers, serverless functions, and desktop applications.

3. Headless CMS

A headless CMS separates content management (the "body") from content delivery (the "head"), providing a backend-only system that stores content and delivers it via APIs to various front-end platforms like websites, mobile apps, and smart devices. This architectural choice allows developers to use any preferred technology to build the user-facing "head" and enables content to be published and reused across multiple channels, offering greater flexibility and scalability than traditional CMS platforms.

How it works

Content Hub (Backend): A headless CMS acts as a content repository, where content is created, managed, and stored in a raw, structured format.
API Delivery: Content is then exposed through APIs (like REST or GraphQL) to any desired channel or device.
Decoupled Frontends: Developers can build any number of front-end "heads" or presentation layers using different technologies (such as web frameworks, mobile apps, or smart devices) to consume and display the content from the API.

Key Benefits

Omnichannel Content Delivery: Deliver the same content to diverse platforms, from websites to wearables, smart devices, and even AI assistants.
Developer Flexibility: Developers are free to choose their preferred frameworks and technologies for building the front-end, without being tied to the CMS's built-in templating system.
Future-Proofing: The content is kept separate from its presentation, making it easier to adapt to new devices and technologies as they emerge.
Improved Performance: By decoupling the frontend, developers can optimize each part of the system for speed and efficiency.
Content Reusability: Create content once and reuse it across multiple digital touchpoints, reducing duplication and streamlining workflows.

How it differs from a Traditional CMS

A traditional CMS tightly couples the content and its presentation. Content is often tied to specific website pages and templates, making it difficult to repurpose content for other channels. A headless CMS breaks this connection, focusing solely on providing content through APIs to be displayed wherever needed.

Related Blogs

React Context: The Magic Portal for Your App's Data ⛩️✨

Martins Gouveia — Thu, 02 Oct 2025 21:35:00 +0000

React Context is a feature that allows you to share data across your component tree without having to manually pass props down through every level. This helps solve a problem known as "prop drilling", where a parent component passes data through many intermediate components that don't need it, just so a deeply nested child can receive it.

This is particularly useful for "global" data, such as themes, authenticated user information, or preferred language, which might be needed by many components at different nesting levels.

How Context works

Using React Context involves three main steps:

Create the context: You create a context object using createContext() from React.
Provide the context: You use the Context.Provider component to wrap the section of your component tree where you want the data to be available. The provider accepts a value prop, which contains the data to be shared.
Consume the context: Any component nested within the provider can access the shared data. In modern React, this is done using the useContext hook

Common use cases

Context is ideal for data that is considered "global" to a component tree, such as:

Theming: Storing the current theme (e.g., light or dark mode) and making it available to all components.
User authentication: Holding the current user's login status and information.
Localization: Providing the active language for the application.
Global state: For managing a state that affects many different parts of the application, often combined with the useReducer hook.

Example of React Context

1. Create the context
Create a file, ThemeContext.js, to define the context.

// src/contexts/ThemeContext.js
import { createContext, useState, useContext } from 'react';

// Create a new Context with a default value
const ThemeContext = createContext();

// Create a Provider component that will manage the state
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// Create a custom hook for easier access to the context
export const useTheme = () => useContext(ThemeContext);`

2. Provide the context
Wrap your application's components with the in your main App.js file.

// src/App.js
import React from 'react';
import { ThemeProvider } from './contexts/ThemeContext';
import Header from './components/Header';
import Content from './components/Content';

function App() {
  return (
    <ThemeProvider>
      <div>
        <Header />
        <Content />
      </div>
    </ThemeProvider>
  );
}

export default App;

3. Consume the context
Now, any component nested inside can use the useTheme hook to access the current theme and toggle it.

// src/components/Header.js
import React from 'react';
import { useTheme } from '../contexts/ThemeContext';

function Header() {
  const { theme, toggleTheme } = useTheme();

  return (
    <header style={{ background: theme === 'dark' ? '#333' : '#eee' }}>
      <h1>My App</h1>
      <button onClick={toggleTheme}>
        Toggle to {theme === 'dark' ? 'Light' : 'Dark'} Mode
      </button>
    </header>
  );
}

export default Header;

// src/components/Content.js
import React from 'react';
import { useTheme } from '../contexts/ThemeContext';

function Content() {
  const { theme } = useTheme();

  return (
    <main style={{ color: theme === 'dark' ? 'white' : 'black' }}>
      <p>The current theme is {theme}.</p>
    </main>
  );
}

export default Content;

When to Use React Context:

Context is suitable for data that is considered "global" or needed by many components at various depths in the component tree. For localized state or prop passing between directly related components, traditional prop passing is often a more straightforward and explicit solution.

Context vs. state management libraries

Context is an effective solution for simple global state and avoiding prop drilling. However, for complex state management, larger applications, or if you need features like advanced debugging, performance-critical updates, or middleware, a dedicated state management library like Redux, Zustand, or MobX may be a better choice.

🔥Top 5 React Vibe Coding Tools

Martins Gouveia — Sat, 09 Aug 2025 16:26:35 +0000

This tutorial provides you with valuable information on a set of tools to use for vibe coding in React.

Vibe coding is a term coined by Andrej Karpathy in February 2025. He said, “Where you fully give in to the vibes, embrace exponentials, and forget that the code even exists … I just see stuff, say stuff, run stuff, and copy/paste stuff, and it mostly works.”

AI tools are everywhere, and it seems like five new ones pop up every day. Let’s take a look at some of the more helpful tools to help you vibe code in React.

1. GitHub Copilot

GitHub Copilot is an AI assistant that lives inside your code editor. It reads your comments or code and suggests complete functions, snippets or tests. GitHub Copilot is especially useful when it comes to:

Writing repetitive or boilerplate code.
Getting suggestions for functions or snippets based on simple descriptions.
Learning how to use new libraries or APIs.
Prototyping ideas without starting from scratch.

2. v0.dev

v0 is a pair programmer that lets you describe your ideas in natural language and generates both the code and UI for your project. Anything you create with v0 can be deployed to Vercel.

You can use v0 to build anything from a basic landing page to a full-stack app:

Landing pages
Full-stack apps
Blogs
Chatbots
Data analysis
Customer support
Solve problems
Generate ideas
Research keywords
Draft email campaigns

v0 is free to use and you can get started with it by creating an account on v0.dev. v0 offers additional Premium and Ultra plans.

3. Bolt

Bolt is an AI-powered builder for websites, web apps, and mobile apps.

Simply type your idea into the chat, click the arrow icon, and Bolt will transform your idea into a working product in minutes.

With a single prompt, you can build:

Stunning websites like landing pages, personal and corporate websites, e-commerce shops, and more
Powerful web apps such as project management tools, job boards, CRMs, SaaS platforms, booking platforms, and beyond
Versatile mobile apps including games, productivity tools, social apps, workout planners, and whatever you imagine next

What can you build?

You can use a wide range of JavaScript-based web frameworks and integrations with other tools to build your app. Bolt integrates with:

Figma for design.
Netlify for publishing and hosting.
Supabase for databases, authentication, and file storage.
GitHub for version control, backups, and collaboration.
Expo for mobile application development.
Stripe for payment handling.

4. Cursor

Cursor is a version of VS Code that comes with a built-in AI assistant. It can edit, refactor or explain your code whenever you ask. Since Cursor is a code editor, you can install it directly on your machine. Cursor is especially helpful for:

Improving and cleaning up existing code.
Adding features like async functions or error handling.
Debugging tricky parts of larger projects.
Keeping your code organized and easy to maintain.

5. Prompt Boost

Transform simple prompts into powerful, context-rich instructions that help GitHub Copilot understand exactly what you need. This extension enhances your prompts by adding relevant technical context, best practices, and specific requirements that lead to better, more accurate responses.

Why Prompt Boost?

🚀 Turn basic prompts into comprehensive instructions
💡 Get more accurate and relevant responses from GitHub Copilot
⏱️ Save time by automating prompt enhancement
🎯 Improve consistency in AI-generated code

Conclusion

Vibe coding helps you quickly turn ideas into working code without getting lost in syntax or boilerplate. It’s about collaborating with AI to speed up development and keep your focus on what matters most: building cool stuff.

[Boost]

Martins Gouveia — Wed, 12 Mar 2025 21:22:11 +0000

🚀 Top 10 Vercel Alternatives for 2025 🌐

Martins Gouveia ・ Aug 25 '23

#webdev #beginners #javascript #react

😎 Top React Native ESSENTIALS Tech Stack for 2026 🫵⛳️

Martins Gouveia — Thu, 06 Mar 2025 07:13:57 +0000

Core

Expo: Create amazing apps that run everywhere

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

🚀 Quick Start:

npx create-expo-app@latest

Typescript: JavaScript with syntax for types

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Training in playground here.

Style

Paper: Making your React Native apps look and feel native

React Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases.

Interactions, animations and accessibility.
React-native-paper takes care of the details and your UI logic, so you can focus on your users.

NativeWind

NativeWind allows you to use Tailwind CSS to style your components in React Native.

import { Text } from "react-native";

export function MyText({ bold, italic, lineThrough, ...props }) {
  const classNames = [];

  if (bold) classNames.push("font-bold");
  if (italic) classNames.push("italic");
  if (lineThrough) classNames.push("line-through");

  return <Text className={classNames.join(" ")} {...props} />;
}

Simple setup with plugins for improved intellisense support and automatic TypeScript configuration.

Shadcn

Universal shadcn/ui for React Native featuring a focused collection of components - Crafted with NativeWind v4 and accessibility in mind.

Animation

Reanimated: Create smooth animations with an excellent developer experience

React Native Reanimated is a powerful animation library built by Software Mansion.

function App() {
  const width = useSharedValue(100);
  const handlePress = () => {
    width.value = withSpring(width.value + 50);
  };
  return <Animated.View style={{ ...styles.box, width }} />
}

Animate every React Native prop on iOS, Android and the Web up to 120 fps.

Moti

Moti is the universal animation package for React Native, made by Fernando Rojo.

<MotiView
  from={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
/>

Moti uses Reanimated 3 under the hood to drive high-performance animations on iOS, Android and Web.

Installation

npm i moti --legacy-peer-deps

State Managment

Zustand

A small, fast, and scalable bearbones state management solution. Zustand has a comfy API based on hooks. It isn't boilerplatey or opinionated, but has enough convention to be explicit and flux-like.

Installation

npm install zustand
# Or, use any package manager of your choice.

TanstackQuery

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

Installation

npm i @tanstack/react-query

Testing

RN Testing

Installation

npm install -D @testing-library/react-native

The React Native Testing Library (RNTL) is a comprehensive solution for testing React Native components. It provides React Native runtime simulation on top of react-test-renderer, in a way that encourages better testing practices.

Must-have packages

RN MMkv

⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!

React Hook Form

Installing React Hook Form only takes a single command and you're ready to roll.

npm install react-hook-form

FlashList

FlashList is a React Native component that allow you to render large lists of data efficiently.

Installation

npx expo install @shopify/flash-list expo-dev-client

Zeego

Beautiful, native menus for React Native + Web, inspired by Radix UI.

Clerk: The most comprehensive User Management Platform

Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.

RevenueCat

The world's best apps use RevenueCat to power in-app purchases, manage customer data, and grow revenue across iOS, Android, and the web.

React Native Gesture Handler

React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.

Mastering Web APIs: Device Memory API 💿

Martins Gouveia — Wed, 05 Feb 2025 18:05:31 +0000

In the ever-evolving world of web development, optimizing user experience has become a critical priority. The Device Memory API is a powerful tool in the arsenal of web developers, enabling more efficient and targeted performance optimizations. But what exactly is the Device Memory API, and how can it be leveraged to create better web applications?

What is the Device Memory API?

The Device Memory API provides an estimate of the amount of RAM available on a user's device. This information is invaluable for developers seeking to tailor their web applications to perform optimally on a wide range of devices, from high-end desktops to budget smartphones.

Traditionally, developers had to rely on heuristics or user agent strings to infer device capabilities, which often resulted in less accurate estimations. The Device Memory API, however, offers a more direct approach by allowing developers to access the Navigator.deviceMemory or WorkerNavigator.deviceMemory properties. These properties return the approximate amount of device memory in gigabytes, providing a clearer picture of the device's capabilities.

How to Use the Device Memory API

Implementing the Device Memory API in your web application is straightforward. Here's a simple example in JavaScript:

const deviceMemory = navigator.deviceMemory;
console.log(`This device has approximately ${deviceMemory} GB of RAM.`);

This snippet retrieves the approximate RAM capacity and logs it to the console. Armed with this information, developers can make informed decisions about resource allocation and performance optimization.

Client Hints for Device Memory

Another approach to accessing device memory information is through Client Hints. By using the Device-Memory HTTP header, developers can retrieve the same approximate RAM capacity. This method allows for more seamless integration with existing server-side logic.

Here's an example of how to use the Device-Memory directive in an HTTP request:

GET / HTTP/1.1
Host: example.com
Device-Memory: 8

Why It Matters

Understanding the amount of RAM available on a user's device enables developers to create more responsive and efficient applications. For instance, on devices with limited memory, developers can reduce the number of concurrent processes or lower the resolution of images to prevent performance degradation. Conversely, on high-end devices, developers can offer richer, more resource-intensive experiences.

Browser Compatibility

The Device Memory API is supported by most modern browsers, including Chrome, Edge, and Opera. However, it is important to note that not all browsers and devices may support this API, so developers should implement fallback strategies to ensure a consistent user experience.

Conclusion

The Device Memory API is a significant advancement in web development, offering a more accurate and efficient way to gauge device capabilities. By leveraging this API, developers can enhance the performance and user experience of their web applications, ensuring they run smoothly on a wide range of devices. As web technologies continue to evolve, tools like the Device Memory API will play an increasingly important role in creating high-performance, adaptive web applications.

Explore more in the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API

🔥Top 3 Amazing Next.js Alternatives To Try 🫨

Martins Gouveia — Sat, 01 Feb 2025 13:00:02 +0000

I recently had the idea of creating my portfolio to serve as an online resume. And I had the idea of using a different framework, simply to get out of my comfort zone. I use Next.js and React a lot both at work and on freelance projects. It would be faster to create my portfolio using React or Next.js, but as it's a personal project and I won't have anyone to hold me to deadlines, I decide to choose a different framework, for that, I decide to look for frameworks similar to Next.js as an alternative, and this one post is the result of my little research. I had a little taste of each one and at the end I will tell you which one I will use to build my repository.

Choosing the right framework can make or break your project. Next.js has emerged as a popular choice for many developers, but it's not always the perfect fit for every scenario. This article dives into the world of Next.js alternatives, helping you navigate the options and find the best solution for your specific needs.

What is Next.js?

Next.js is a powerful React framework that's taken the web development world by storm. Created by Vercel, it's designed to make building fast, SEO-friendly web applications a breeze. But what exactly makes Next.js stand out?

At its core, Next.js extends React's capabilities by offering server-side rendering (SSR), static site generation (SSG), and automatic code splitting out of the box. These features address common pain points in React development, such as SEO challenges and initial load times.

1. Astro: The web framework for content-driven websites

Astro is a modern static site builder that allows you to use your favorite JavaScript framework (or vanilla JavaScript) to build faster websites with less client-side JavaScript. It's designed to deliver lightning-fast performance by default.

Key Features

Multi-Framework Support: Astro allows the use of React, Vue, Svelte, or other frameworks — or mix and match them in the same project.
Static Site Generation (SSG): Generates static HTML at build time for excellent performance and SEO. SSG in Astro allows for efficient caching and distribution of content.
Markdown Support: Built-in support for Markdown content, making it great for blogs and documentation sites. Astro's Markdown support includes syntax highlighting and the ability to integrate with various Markdown plugins.
File-based Routing: Similar to Next.js and SvelteKit, Astro uses a file-based routing system. his system simplifies navigation setup, making it easier to manage and organize routes without complex configurations.

Ideal for: Content-focused websites that prioritize performance and minimal JavaScript, especially when working with multiple frameworks.

2. Remix: Focused on web standards and modern web app UX.

Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. Built by the creators of React Router, Remix is designed to leverage web standards and modern browser features.

Key Features

Nested Routing: Leverages a powerful nested routing system, allowing for more intuitive and efficient code organization.
Server-Side Rendering (SSR): Provides out-of-the-box SSR for improved performance and SEO. This ensures that pages are pre-rendered on the server, leading to faster initial loads and better search engine indexing.
Data Loading: Offers a unique approach to data loading, tying it directly to routes for efficient and predictable data fetching.
Error Handling: Built-in error handling at the route level, making it easier to manage and display errors.

Ideal for: Complex web applications that require robust server-side rendering and data loading strategies.

3. Laravel: The PHP Framework for Web Artisans

Laravel is a well-known open-source PHP web framework praised for its elegant syntax and developer-friendly features. It streamlines the creation of trustworthy and scalable web applications by providing various tools, libraries, and conventions.

Key Features

Routing: A simple and expressive routing system. Developers can define routes for web and API endpoints, group routes, and apply middleware to routes for enhanced functionality.

Authentication and Authorization: Easy to implement authentication (login, registration) and authorization (permissions, roles) with built-in features like guards, providers, and policies.

Localization: Easy to build multilingual applications by providing tools for managing translations and language files.

Templating Engine: Blade templating engine is lightweight yet powerful. It allows developers to create dynamic views with features like template inheritance, sections, and components.

Summary

After small tests with each framework on the list, the winner was Astro, as it fits best for what I want to build.

Remember, the best framework is the one that aligns with your project's needs and your team's skills. It's worth taking the time to evaluate these options carefully, considering factors like performance, scalability, learning curve, community support, and ecosystem.

🔁 Direct Call or Arrow Function? Making the Right Choice in React OnClick 👆

Martins Gouveia — Mon, 27 Jan 2025 09:22:41 +0000

In React, handling onClick events can be done in two common ways: using a direct call or an arrow function. Understanding the differences between these approaches can help you write cleaner and more efficient code.

Approach 1: Direct Call

<button onClick={handleClick}>Click Me</button>

Props and Con:

Execution: The function is passed as a reference and is only called when the event occurs.
Performance: More efficient as it does not create a new function on every render.
Use Case: Ideal for simple event handlers that do not require additional arguments.

Approach 2: Arrow Function:

<button onClick={() => handleClick()}>Click Me</button>

Execution: Creates a new function on every render, which then calls the specified function.
Performance: Less efficient due to the creation of a new function each time the component re-renders.
Use Case: Useful when you need to pass arguments to the event handler or bind the function to a specific context.

In summary, while direct calls are generally more performant, arrow functions offer flexibility in passing arguments and binding context. Choosing the right approach depends on the specific needs of your application

Why Every Developer Should Learn Vim 💻🫵

Martins Gouveia — Wed, 22 Jan 2025 15:29:10 +0000

No matter if you are a sysadmin or a software developer, if you work in the Linux terminal, you would face the situation where you need to edit text files in the terminal

What is Vim?

Vim is a powerful text editor used in Unix/Linux systems, known for its efficiency and flexibility. It operates in different modes, each serving a specific purpose. Here are some essential Vim commands to help you get started:

Modes in Vim

Vim has three primary modes:

Command Mode: This is the default mode when you start Vim. You can navigate, delete, and copy text in this mode.

Insert Mode: Used for inserting text into the file. Enter this mode by pressing i, a, I, A, o, or O.

Visual Mode: Allows you to select text using the arrow keys.

Basic Commands

Entering Insert Mode

i: Insert before the cursor.
a: Insert after the cursor.
I: Insert at the beginning of the line.
A: Insert at the end of the line.
o: Open a new line below the current line.
O: Open a new line above the current line.

Navigating in Vim

h: Move left.
j: Move down.
k: Move up.
l: Move right.
gg: Move to the beginning of the file.
G: Move to the end of the file.
nG: Move to line number n.

Editing Text

x: Delete the character under the cursor.
X: Delete the character before the cursor.
dd: Delete the current line.
dw: Delete from the cursor to the end of the word.
d$: Delete from the cursor to the end of the line.
dG: Delete from the cursor to the end of the file.

Copying and Pasting

yy: Copy the current line.
yw: Copy from the cursor to the end of the word.
y$: Copy from the cursor to the end of the line.
yG: Copy from the cursor to the end of the file.
p: Paste after the cursor.
P: Paste before the cursor.

Undo and Redo

u: Undo the last change.
Ctrl + r: Redo the undone change.

Searching and Replacing

/search_term: Search for search_term.
n: Move to the next match.
N: Move to the previous match.
:%s/foo/bar/g: Replace all occurrences of foo with bar in the entire file.
:%s/foo/bar/gc: Replace all occurrences with confirmation.

Saving and Quitting

:w: Save the file.
:wq: Save and quit.
:q: Quit (if no changes have been made).
:q!: Quit without saving changes.

These commands cover the basics of using Vim effectively. For more advanced usage, refer to the detailed guides and cheat sheets available online

Top 4 FREE 🎉 Certificates For 2025 👍

Martins Gouveia — Thu, 09 Jan 2025 11:35:26 +0000

1. Microsoft UX Design Professional Certificate

Launch Your Career in UX/UI Design. Build job-ready UX design skills through hands-on projects and learn to use industry leading tools like Figma. No degree or experience required.

What you'll learn

Define the core principles of UX, Human-Centered Design, and design thinking frameworks, and identify UX team roles and user research methods.
Adapt design ideas into interactive prototypes using wireframing, mockups, prototyping tools, and leverage design systems and style guides.
Apply visual design principles and craft high-fidelity mockups that adhere to platform best practices and ensure accessibility for all.

Link for enroll: https://www.coursera.org/professional-certificates/ux-design

2. IBM Product Manager Professional Certificate

Prepare for a career as a product manager. Gain the in-demand skills and hands-on experience to get job ready in less than 3 months. No prior experience required.

What you'll learn

Apply key product management skills, tools, and techniques to engage and manage key stakeholders and clients.
Identify product strategy development and implementation methods and best practices to ensure the right product is produced.
Develop a working knowledge of Agile and adaptive methodologies used to expedite product solutions to market.

Link for enroll: https://www.coursera.org/professional-certificates/ibm-product-manager

3. Front End Development Libraries

Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.

In the Front End Development Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how to add logic to your CSS styles and extend them with Sass.

What you'll learn

Bootstrap: Bootstrap is a front end framework used to design responsive web pages and applications. It takes a mobile-first approach to web development, and includes pre-built CSS styles and classes, plus some JavaScript functionality.
jQuery: jQuery is one of the most widely used JavaScript libraries in the world.
** React**: React is a popular JavaScript library for building reusable, component-driven user interfaces for web pages or applications.

Link for enroll: https://www.freecodecamp.org/learn/front-end-development-libraries/

4. JavaScript Algorithms and Data Structures

Developers use HTML and CSS to control the content and styling of a page. And they use JavaScript to make that page interactive.

In this JavaScript Algorithm and Data Structures Certification, you'll learn the JavaScript fundamentals like variables, arrays, objects, loops, functions, the DOM and more.

What you'll learn

You will learn the main Data Structures, like: Stack, LinkedList and etc...

You'll also learn about Object Oriented Programming (OOP), Functional Programming, algorithmic thinking, how to work with local storage, and how to fetch data using an API.

Link for enroll: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/

What do you plan to learn in 2025? Share our comments.

✌🏽4 Graphics Libraries Tools for React Developers in 2025 💹📊

Martins Gouveia — Sat, 28 Dec 2024 13:15:43 +0000

Creating interactive and visually appealing charts is an essential skill for developers working on modern web applications.

In this article I've compiled some of the most useful React Data Visualization and graphics libraries that you could use to speed up your development.

1. Chart.js

Chart.js provides a set of frequently used chart types, plugins, and customization options. In addition to a reasonable set of built-in chart types, you can use additional community-maintained chart types.

Why Chart.js?

Chart.js is highly customizable with custom plugins to create annotations, zoom, or drag-and-drop functionalities to name a few things.
Chart.js is currently the most popular one according to GitHub stars (~60,000) and npm downloads (~2,400,000 weekly).

Source: https://www.chartjs.org/

2. D3

D3 (or D3.js) is a free, open-source JavaScript library for visualizing data.

Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.

Looking for a good D3 example? : https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=hero&utm_campaign=try-observable

Source: https://d3js.org/

3. Recharts

Recharts is a composable, reliable and powerful charting library built on React components and D3 submodules. It allows you to customize your chart by tweaking component props and passing in custom components.

Source: https://recharts.org/en-US/

4. Victory Charts

Victory Charts are composable React components for building interactive data visualizations.

Designed by Formidable, Victory provides an easy-to-use yet powerful interface for crafting sophisticated charts with React.

Crafting Your First Victory Component

<VictoryPie
  data={[
    { x: "Cats", y: 35 },
    { x: "Dogs", y: 40 },
    { x: "Birds", y: 55 }
  ]}
/>

Source: https://www.npmjs.com/package/victory-chart