DEV Community: Juanse Mastrangelo

Si eres desarrollador de Javascript debes conocer esta extensión de VS Code

Juanse Mastrangelo — Fri, 11 Mar 2022 18:53:01 +0000

Me enamoré de esta extensión de vsCode y en este post te mostraré por qué.
La extensión es Node.js Notebooks (REPL).

Si quieres:

Probar la salida de tu código javascript.
Conocer el tiempo de ejecución de la compilación (ms)
Previsualizar las librerías
Ejecutar parte del código
Ver el rendimiento de tu código

Esta extensión vscode es para ti!.

Gracias por leer mi artículo, he escrito otros artículos y puedes verlos en la barra de la derecha .

If you are Javascript developer you must know this VS Code extension

Juanse Mastrangelo — Fri, 11 Mar 2022 15:57:47 +0000

I fell in love with this vsCode extension and in this post I'll show you why.
The extension is Node.js Notebooks (REPL).

If you want to:

Test the output of your javascript code.
Know the compilation runtime (ms)
Preview the libraries
Execute part of the code
See the performance of your code

This crazy vscode extension is for you!.

Thank you for reading my article, I have written other articles and you can see them on the right bar .

Extremely useful Chrome extensions for developers 2022

Juanse Mastrangelo — Thu, 03 Mar 2022 14:14:22 +0000

Hi, in this new post i'll show you extremely useful chrome extensions 2022.

Remember to read my latest article about Extensions recommended by seniors (VScode) 2022

Project Naptha

Highlight, copy, edit, and translate text from any image on the web. 4/5 🌟

BlackBox

Fastest Way to Copy Text from Videos & Images. 5/5 🌟

GoFullPage - Full Page Screen Capture

The simplest way to take a full page screenshot of your current browser window. 5/5 🌟

Fake Filler A form filler that fills all inputs on a page with fake/dummy data. Fake Filler is THE form filler to fill all input fields on a page with randomly generated fake data. This productivity boosting extension is a must for developers and testers who work with forms as it eliminates the need for manually entering values in fields. 5/5 🌟

Pic-in-pic for Chrome browser

Picture-in-picture button for web videos. Watch videos in picture in picture mode!. 5/5 🌟

Screen Recorder

Chrome extension to record a video from the camera or capture it from the screen (desktop, specific application window or Chrome tab). 5/5 🌟

ColorPick Eyedropper

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more. 5/5 🌟

Lighthouse

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.
When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

Wappalyzer - Technology profiler

Wappalyzer is a technology profiler that shows you what websites are built with.

Extras

Volume Master: Up to 600% volume increase. The simplest and most reliable volume amplifier.
svg-grabber - get all the svg's from a site: A tool to quickly preview and get all the svg assets from a website.
Quickly preview and copy or download all the SVG assets from a website.
Dark Reader: Dark mode for every website. Take care of your eyes, use dark theme for night and daily browsing.
Detailed SEO Extension: Get SEO insights at the click of a button to any website you're currently on. Built by full-time SEO's for daily analysis.
Redux DevTools: The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

Extensions recommended by seniors (VScode) 2022

Juanse Mastrangelo — Tue, 15 Feb 2022 13:43:03 +0000

Hi devs, I'm Juanse and this is my list of extensions I find helpful for day to day coding:

Material Icon Theme Material Design Icons for Visual Studio Code. 5/5 ⭐

Git Graph and Git Lens 5/5 ⭐

Cardenas Search and save algorithms easily with this open source extension. 4/5 ⭐ (Beta)

Live Share Real-time collaborative development from the comfort of your favorite tools. 5/5 ⭐

Settings Sync Keeps your vscode settings. Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. 5/5 ⭐

Tabnine AI AI Code completion plugin. Tabnine makes developers more productive by auto-completing their code. 5/5 ⭐

Error Lens 4/5 ⭐

Json2Ts Convert a JSON from clipboard to TypeScript interfaces. 3/5 ⭐

Shades of Purple 🦄 A professional theme suite with hand-picked & bold shades of purple for your VS Code editor and terminal apps. One of the excellent, most downloaded, and top-rated VSCode Themes on the marketplace. Part of VSCode.pro course. 4/5 ⭐

Code Runner Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim. 4/5 ⭐

Bracket Pair Colorizer This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. 5/5 ⭐

Import Cost

Bonus

Break Time Set a timer and a message to remind you to take a break!

VS Code Pets

Cardenas VS code extension: Save and search algorithms

Juanse Mastrangelo — Sun, 13 Feb 2022 16:27:30 +0000

Hey there 👋 I’m Juanse, a frontend developer passionate about open source.

I created an extension for visual studio code when you can search and save algorithms in any coding language. The project is Open Source and you can take a look the code here and the service here.

Usage

Download the extension.
Save your code in a file clicking in “Upload code using Cardenas” at the right-bottom.

Select if it is Template or Algorithm

Set a description for your code to find easly in the search section.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag “enhancement”. Don’t forget to give the project a star! Thanks again!

Fork the Project

Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

Thanks

Awesome, you made it till the end! Thank you for reading, I hope you found something useful in here.

MercadoLibre Clone Free Using React Native (ecommerce)

Juanse Mastrangelo — Thu, 08 Jul 2021 13:49:33 +0000

Free Download MercadoLibre Clone App
https://github.com/JuanseMastrangelo/MercadoLibreClone

App Features:

Login with Google Auth
Integration with MercadoPago. Enabled debit and credit card payments, or cash payments with rapipago y pagofacil. See more: https://www.mercadopago.com.ar/ayuda/medios-de-pago-cuotas-promociones_264
Uploading and update products from the administration panel at http://paback.host/

Shipments with any shipping service. (Correo Argentino, MercadoEnvio, Andreani, among others).
Categories
Universal. The application adapts to the country.
Product statistics.
Comments
Real time chat with users to provide immediate attention.

Como crear un streaming con Android Studio

Juanse Mastrangelo — Wed, 29 Jan 2020 09:27:00 +0000

Hace unos dias cree un streaming para Android utilizando Android Studio con Kotlin como lenguajes, es resultado es mas que aceptable.
Aquí te voy a enseñar como se hace.

Para crear un streaming lo primero que necesitas es un servidor RTMP y un HTTP para esto usé Ngxinx el cual permite crear servidores;

Demo:

Documentación del repositorio:
Repositorio para Descargar gratis: https://github.com/JuanseMastrangelo/Streaming-con-Android-RTMP

Dentro de la carpeta "nginx/conf" veremos un archivo llamado nginx.conf el cual almacena los servidores que necesitamos crear al ejecutar el servicio. Veremos que dentro hay un servidor HTTP (puerto: 81) y un RTMP (puerto: 1935).
El streaming se realiza mediante el protocolo RTMP (Real Time Messaging Protocol - Protocolo de mensajería en tiempo real) el cual transfiere pequeños videos de x segundos al servidor de ngxinx guardando estos pequeños fragmentos de videos (.ts) en la carpeta "nginx/hls". Junto a estos archivos existe el principal con extensión .m3u8 el cual crea un lista de reproduccion interna para ordenar los fragmentos (.ts).
El nombre de estos archivos de la carpeta "nginx/hls" se da a partir de la llamada a la url que vemos mas adelante.

Luego tenemos el servidor HTTP el cual se encargará de extraer mediante el index.html (dentro de la carpeta "nginx/html") el archivo con extensión .m3u8 (dentro de la carpeta "nginx/hls") utilizando los servicios de video.js.

Como podemos imaginar, el cliente desarrollado con Android Studio utilizando la libreria RtmpPublisher enviará los videos (.ts) al servidor utilizando la variable url en MainActivity.kt donde reemplazaremos ###.###.### por nuestra IPV4. Como vimos anteriormente el ejemplo de url posee en su ultima parte el nombre stream, este es el nombre por el cual se llamarán los archivos en el servidor (si se quiere cambiar tambien tienes que cambiar el index.html -> src de la etiqueta video).

Instalación:
Para instalar necesitamos tirar la carpeta nginx dentro del disco local C: y abrir con android Studio la carpeta dentro del .rar. Una vez abierto el projecto en Android necesitamos reemplazar de MainActivity.kt la variable url, donde está ###.###.### reemplazaremos por nuestra IPV4 (usar dentro de la console el comando: ipconfig para revelar nuestra ipv4). Una vez cambiada nuestro cliente Android ya esta listo para usarse.
Para dar comienzo al servidor necesitaremos abrir una consola o terminal dirigirnos a donde tenemos el nginx, en este caso en usaremos el comando "cd C:/nginx". Luego colocaremos el comando nginx.exe para ejecutar el exe (esto lo hacemos para saber si hay errores) si no aparece nada en consola quiere decir que ya esta abierto el servidor exitosamente.

Para ver nuestro stream necesitaremos comenzar a grabar con nuestro dispositivo Android y podemos mirarlo en la url: http://localhost:81. Cabe mencionar que tiene un delay de 30 segundos asique tener paciencia.

Si queremos enviar desde nuestra pc como hariamos en caso de un directo en Youtube o Facebook necesitaremos OBS (https://obsproject.com/es)

Para cerrar el servidor ejecutar el archivo stop.bat dentro de "C:/nginx".

Muchas gracias por leer este articulo, cualquier consulta mi mail es juansmastrangelo@gmail.com