DEV Community: Martin Pacheco

[Boost]

Martin Pacheco — Tue, 21 Jan 2025 22:47:09 +0000

Fun with console.log() 💿

Alicia Sykes ・ Nov 20 '22

#webdev #javascript #tooling #productivity

One Tool to replace spreadsheets and more...

Martin Pacheco — Mon, 30 Sep 2024 18:56:43 +0000

I’ve got something big to share with you today, and no, it’s not another basic tutorial. It’s something that’ll change how you and your team handle sales workflows forever.

Introducing: Docusseum. Now, if you think that sounds like a fancy french word, you’re not wrong, but it’s also so much more than that. Docusseum is a game-changer for anyone tired of dealing with outdated Excel sheets (I mean, who isn't, right?) or struggling to keep up with sales chaos.

What Does Docusseum Do?

Glad you asked! Docusseum is a one-stop solution for all your sales operations. Imagine this: you’re juggling pricebooks, creating quotes, sending out orders, tracking invoices, and trying to get everything signed—without the hassle. All of that, simplified in one cloud-based platform. Yeah, that’s Docusseum.

Amazing tools that you must use to improve your work flow

Martin Pacheco — Thu, 19 Oct 2023 00:59:49 +0000

Development can be hard work, and there are a lot of tools that can make your life easy in the development world.

Here I list some tools that I use to achieve web development.

Regexr
This site lets you build regex expressions while explaining how it will behave. Supports JavaScript & PHP/PCRE RegEx. Very useful if dealing with complex expressions.
regexr.com

Built With
This page can explore other sites and describe which technologies or tools were implemented.
builtwith.com

Dummy JSON
This page provides you a lot of data in JSON format, very useful to mock up different types of data.
dummyjson.com

Metatags
This tools let you explore the metadata of a site. Can be used to enhance SEO and Open Graph information.
metatags.io

Facebook debugger web tool
Similar to metatags, this tools explore metadata information from any website.
developers.facebook.com/tools/debug

Photopea
This amazing tool lets you work with graphics. Its functionality is similar to Adobe Photoshop
www.photopea.com

Google Analytics
With this platform, you can create a Google tag or use the Analytics SDK to integrate to your website, track events and the type of your visitors. Useful to create reports and analyze util data.
https://analytics.google.com

Free Image Stocks
These websites let you get free and high-quality images.
unsplash.com
pexels.com
rawpixel.com
pond5.com

Freepik
Freepik offers a widely amount of editable files free.
freepik.com

Icon stocks
In these sites, you will find cool icon collections to use in your websites.
iconfinder.com
icons8.com
flaticon.com

Code Sandbox
In this site, you can connect with your github account and serve repositories online with other people.
https://codesandbox.io/

Deployment sites
This list makes reference to some popular sites that provide needed infrastructure where you can deploy your projects. These sites have free and paid plans.
Supabase
Heroku
Firebase
Vercel
railway.app

Request Bin
This site lets you mock up endpoints, so you can test HTTP calls.
requestbin.com

Image space Mockup
Do you need to mock an image fast without creating the graphic? Try this page. You only need to specify the width and the height at the end of the url.
Image of 1000 x 200

Tailwind Colors
Have a fast reference of the colors available in the Tailwind lib.
tailwindcss.com

JSON Viewer (Chrome Extension)
Have a pretty visualization of JSON files when they are open in your explorer.
github.com/tulios/json-viewer

What are some other cool tools or sites that should be mentioned?

I read you in the comments...

Translate Nextjs apps using next-translate

Martin Pacheco — Sat, 29 Apr 2023 19:30:23 +0000

Since there have been some changes in the versions of Nextjs (v 13.3.1 at the time of writing this post), this doc can be used as a reference to internationalize your application using the next-translate (v2.0.5) library.

1. Create an next app

npx create-next-app translation-app

Install the next-translate library

npm install next-translate

Add the plugin next-translate-plugin

npm install next-translate-plugin -D

2. Internationalization configuration file

Create a file named i18n.js in the root path of the directory. This file will specify the configuration of the supported translations. You can read more about the configuration on the documentation page.

In this case the locales array will handle English (en) and Spanish (es) languages:

i18n.js file

module.exports = {
 locales: ['en', 'es'],
 defaultLocale: 'es',
 localeDetection: false,
 pages: {
   '*': ['common'],
 },
}

You can use namespaces to define sections for the whole app, useful if handling large translations.
For this exercise the regex expression ( * ) just will share the ‘common’ namespace with all the pages.

3. Configure the next.config.js file

Add the next code to this file:

const nextTranslate = require('next-translate-plugin')

module.exports = nextTranslate({
 webpack: (config, { isServer, webpack }) => {
   return config;
 }
})

You will end up with something like this:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
}
module.exports = nextConfig

const nextTranslate = require('next-translate-plugin')
module.exports = nextTranslate({
 webpack: (config, { isServer, webpack }) => {
   return config;
 }
})

4. Create the translation files

Translations files are json files that help to manage the diferent languages for the app.

In the root directory create a folder called locales.
Then create a folder for each language: en es

For each of those folders you will need to create json files named as the namespace specified before. In this case it is common. You will end up with an structure like this:

.
├── i18n.js
├── locales
│   ├── en
│   │   └── common.json
│   └── es
│       └── common.json
├── next.config.js
├── next-env.d.ts
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── README.md
├── src
│   ├── pages
│   │   ├── api
│   │   │   └── hello.ts
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   └── styles
│       └── globals.css
├── tailwind.config.js
└── tsconfig.json

Add to each json file the key-label data needed to translate the app.

locales/common/en.json

{
   "hero-title" : "Translating Nextjs apps",
   "hero-description" : "Internationalization libraries are useful"
}

locales/common/es.json

{
    "hero-title" : "Traduciendo apps en Nextjs",
    "hero-description" : "Las librerías de internacionalización son útiles"
}

5. Display your translations.

Update your components as shown next.
Import the useTranslation function:
import useTranslation from 'next-translate/useTranslation'

Inside the components functions, call the t function:
const { t } = useTranslation('common')

For each text that you want to translate, call the t function and pass the key for your label:
{ t('hero-title') }

This is the entire component file:

// Home.tsx
import Image from 'next/image'
import { Inter } from 'next/font/google'

// useTranslation function from next-translate
import useTranslation from 'next-translate/useTranslation'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {

  // t function from useTranslation, using the common namespace
  const { t } = useTranslation('common')

  return (
    <div className='h-screen flex flex-col justify-center items-center'>
       <h1 className='text-xl font-bold'>{ t('hero-title') }</h1>
       <p>{ t('hero-description') }</p>
   </div>
 )
}

6. Run your app

Run npm run dev and got to the this different urls:

English
http://localhost:3000/en

Spanish
http://localhost:3000/es

If you want to change between languages using buttons, check the suggested methodology in the documentation

Here is an example of a component that will display all the languages options based on the locales file.

ChangeLanguage.tsx

import { locales } from '../../i18n'
import useTranslation from 'next-translate/useTranslation'
import setLanguage from 'next-translate/setLanguage'

export default function ChangeLanguage() {

    const { t, lang } = useTranslation()

    console.log( locales )

    let langs = []

    for(let l of locales){
        if( l !== lang ){
            langs.push(<button  key={l} onClick={async () => await setLanguage(l)}> { l.toUpperCase() } </button>)
        }
    }

    return (
        <div>
            { langs }
        </div>
    );
  }

At end, you can use sites like i18next to translate json files keeping the keys untouched, so translations can be easier.

Happy translations!

How to install Java in Pop!_Os

Martin Pacheco — Tue, 18 Apr 2023 19:21:35 +0000

Java is a programming language that is widely used in the development of software applications, particularly for web and mobile platforms. Pop!_OS, on the other hand, is a Linux distribution that is based on Ubuntu and is designed to be user-friendly for developers and power users.

Java can be used on Pop!_OS, just like any other operating system. You can install the Java Development Kit (JDK) on Pop!_OS, which includes the Java Virtual Machine (JVM) and other tools necessary for Java development. There are also several integrated development environments (IDEs) available for Java development on Pop!_OS, such as Eclipse, IntelliJ IDEA, and NetBeans.

To install Java on Pop!_OS using apt, you can follow these steps:

Open the terminal by pressing Ctrl+Alt+T on your keyboard.
Update the package list by running the following command:

sudo apt update

Install the default-jdk package, which includes the Java Development Kit, by running the following command:

sudo apt install default-jdk

This command will only install the default JRE – Java Runtime Environment from OpenJDK 11. To install the default JDK – Java Development Kit from OpenJDK 11, you will need to enter another command:

sudo apt install default-jdk

Verify that Java is installed correctly by checking the version number. You can do this by running the following command:

java -version

This should output information about the version of Java that is installed on your system. Congrats!.