DEV Community: Diego Letelier

Using WAVE as new terminal.

Diego Letelier — Sun, 03 Nov 2024 20:20:36 +0000

Hi everyone, Diego here. For a while, I’ve been looking to switch to a different terminal on Windows because the standard shells offer limited accessibility and customization. I was really drawn to terminals like Warp, but unfortunately, I couldn’t use it since it’s only available for Linux and macOS.

Recently, though, I discovered a new terminal called Wave. After using it, here’s what I’ve learned about it so far.

First Look

At the top of the window, you can see tabs, allowing you to open as many as you need. On the right side, there are several tools that you can attach to each tab window, such as an AI assistant, a web page viewer, file access, or system info display.

Another feature is the ability to have four terminals open at once, or even more, thanks to the option to create additional tabs. It's a high-productivity tool because it allows you to share the same workspace with different types of elements.

Cool Stuff to do

One main command I learned — and there are many more available in the documentation or demos — is wsh. This command lets you view files within the shell and, for code files, even opens a built-in code editor right inside the terminal. So, as you can see in the image, I used wsh page.tsx from my Next.js project.

Just Starting

So, for now, this has been my journey using this new terminal, which I believe is high-quality. It really boosts productivity and offers many handy features that can be useful for a developer. I hope you can give it a look; I’ve included the link below for you to check it out and try it out.

Cheers, my friends, and happy coding!

Link to the terminal:
Wave Terminal

Making your First Project with Deno 2.0

Diego Letelier — Tue, 15 Oct 2024 19:49:11 +0000

To introduce this topic, let's start by defining what deno is. Deno is a runtime environment for JavaScript, TypeScript and WebAssembly, developed by Ryan Dahl, the creator of Node.js. It uses Chrome's V8 engine and is written in Rust12.'

Advantages.

Security by default: Deno has no access to files, networks or environments unless explicitly granted. This reduces the risk of security vulnerabilities.
Native TypeScript support: Deno runs TypeScript natively without additional configuration, which simplifies development and improves productivity.
Standard modules: Deno includes a set of reviewed and audited standard modules, which reduces dependency on external packages and improves code security and stability.
Integrated tools: Comes with useful tools such as a dependency inspector, a code formatter and a linter, which facilitates code maintenance and quality.
Dependency handling: Deno uses URLs to import modules, eliminating the need for a package.json file and a package manager like npm. This simplifies dependency management.
WebAssembly support: Deno supports WebAssembly, allowing you to run high-performance code written in other languages.

Creating your first project

To start with a deno project, use the following command:

 deno init <project_name>

This will create a project that will have the following

- project_name/
  |- main.ts
  |- deno.json
  |- main_test.ts

And that's it, you have created your first deno project.

About modules and imports

When you used to create a project in astro, next.js and others, you installed the dependencies via npm, pnpm, bun, etc. Now this is no longer necessary.

Ways to import

With deno, there are two main ways to import packages. The first is to simply import from that package whether it's npm or another package you use.

In some Next.js, Vite or Astro file of yours for example, one would install the required package and then import it into the file. Now, with deno, instead of installing the package, you simply import it by naming your package manager before the package you require. For example if we wanted to use express, it would be done like this:

  import express from “npm:express”

This indicates that you want to import express, from the npm express package, so, repeating what has already been said, you don't need to install it, just import it!!!!

Or secondly, instead of having to import it with the nomenclature of “npm:”, what we do is edit the created deno.json file, where to this you add the following:

  “imports": {
  “express": ”npm:express”
}

With the code added to deno.json you can now import from wherever you want with just the word express like this:

  import express from “express”

Run your first deno project

Finally, to run the project you no longer need to use npm run, now you use the tasks as shown as follows in the deno.json:

 “tasks": {
    “dev": ‘deno run --watch main.ts’, //it comes by default
  }

This tells us that to run the project, we would simply have to do:

deno task dev

You will be running your deno project with typescript natively.

I hope this mini tutorial has helped you and that you enjoy this new way of making projects with a very promising native typescript runtime.

Haciendo tu Primer Proyecto con Deno 20

Diego Letelier — Mon, 14 Oct 2024 22:27:06 +0000

Para introducir este tema, hay que comenzar definiendo que es deno. Deno, es un entorno de ejecución (runtime) para JavaScript, TypeScript y WebAssembly, desarrollado por Ryan Dahl, el creador de Node.js. Utiliza el motor V8 de Chrome y está escrito en Rust12.´

Ventajas

Seguridad por defecto: Deno no tiene acceso a archivos, redes o entornos a menos que se le otorgue explícitamente. Esto reduce el riesgo de vulnerabilidades de seguridad.
Soporte nativo para TypeScript: Deno ejecuta TypeScript de manera nativa sin necesidad de configuración adicional, lo que simplifica el desarrollo y mejora la productividad.
Módulos estándar: Deno incluye un conjunto de módulos estándar revisados y auditados, lo que reduce la dependencia de paquetes externos y mejora la seguridad y estabilidad del código.
Herramientas integradas: Viene con herramientas útiles como un inspector de dependencias, un formateador de código y un linter, lo que facilita el mantenimiento y la calidad del código.
Manejo de dependencias: Deno utiliza URLs para importar módulos, eliminando la necesidad de un archivo package.json y un gestor de paquetes como npm. Esto simplifica la gestión de dependencias.
Compatibilidad con WebAssembly: Deno soporta WebAssembly, lo que permite ejecutar código de alto rendimiento escrito en otros lenguajes.

Creando tu primer proyecto

Para partir con un proyecto de deno, hay que usar el siguiente comando:

 deno init <project_name>

Esto creara un proyecto que tendrá lo siguiente

- project_name/
  |- main.ts
  |- deno.json
  |- main_test.ts

Y listo, ya tienes creado tu primer proyecto de deno.

Acerca de los modulos e importaciones

Cuando se creaba un proyecto en astro, next.js y otros, se instalaban las dependencias vía npm, pnpm, bun, etc. Ahora esto ya no es necesario.

Formas de importar

Con deno, hay dos principales formas de importar paquetes. La primera es simplemente importando desde ese paquete ya sea npm u otro que utilices.

En algún archivo tuyo de Next.js, Vite o Astro por ejemplo, uno debia instalar el paquete requerido y luego importarlo dentro del archivo. Ahora, con deno, en vez de instalar el paquete, simplemente se importa dando como nombre su gestor de paquetes antes del paquete a requerir. Por ejemplo si quisiéramos utilizar express, se realizaría de esta manera:

  import express from "npm:express"

Esto indica que quieres importar express, del paquete npm express, por lo que, repitiendo lo ya dicho, no necesitas instalarlo, simplemente importarlo!!!

O en segundo lugar, en vez de tener que importarlo con la nomenclatura de "npm:", lo que hacemos es editar el archivo deno.json creado, donde a este le agrega lo siguiente:

  "imports": {
  "express": "npm:express"
}

Con el codigo agregado a deno.json ahora podras importar desde donde quieras solo con la palabra express de esta manera:

  import express from "express"

Corre tu primer deno project

Finalmente, para correr el proyecto ya no se necesita usar npm run, ahora se usan los task como se muestra de la siguiente manera en el deno.json:

 "tasks": {
    "dev": "deno run --watch main.ts", //viene por defecto
  }

Esto nos indica que para correr el proyecto, simplemente habría que hacer:

deno task dev

Ya estarás corriendo tu proyecto de deno con typescript nativamente.

Espero te haya servido este mini tutorial y que disfrutes de esta nueva manera de hacer proyectos con un runtime de typescript nativo muy prometedor.