<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Jose Latines</title>
    <description>The latest articles on Forem by Jose Latines (@joselatines).</description>
    <link>https://forem.com/joselatines</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F854335%2F9a45fe5a-de9f-45dc-bd78-8cee5e23c08c.jpg</url>
      <title>Forem: Jose Latines</title>
      <link>https://forem.com/joselatines</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/joselatines"/>
    <language>en</language>
    <item>
      <title>Mi camino hacia el backend - El lado oscuro de la fuerza</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Tue, 19 Dec 2023 22:35:35 +0000</pubDate>
      <link>https://forem.com/joselatines/mi-camino-hacia-el-backend-el-lado-oscuro-de-la-fuerza-4fna</link>
      <guid>https://forem.com/joselatines/mi-camino-hacia-el-backend-el-lado-oscuro-de-la-fuerza-4fna</guid>
      <description>&lt;p&gt;🚀 Este año, he dedicado mucho tiempo a la búsqueda de empleo, enfocándome en encontrar oportunidades como programador, ya sea en el backend o frontend. Agradezco a Dios que, después de la primera mitad del año, logré asegurar un empleo como Team Leader en Maybach International Group LLC , donde me siento muy cómodo con mi equipo de trabajo.&lt;/p&gt;

&lt;p&gt;👨‍💻 Sin embargo, mi objetivo siempre ha sido convertirme en programador, y es por eso que para el 2024, estoy trazando un plan para fortalecer mis habilidades en el área de backend. ¿Por qué el backend? Considero que ya poseo un buen conocimiento en el frontend, pero encontrar trabajo como junior frontend se ha vuelto desafiante debido al gran número de aspirantes.&lt;/p&gt;

&lt;p&gt;Por ello, he decidido adentrarme en el lado oscuro de la fuerza.&lt;/p&gt;

&lt;p&gt;💡 Aquí están algunas de las cosas que he decidido aprender en el 2024 en mi camino hacia el backend:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Aprender PHP&lt;/li&gt;
&lt;li&gt;Arquitectura de Software: Explorar modelos como MVC, MVP, MVVM, Clean Architecture, Hexagonal Architecture, Event-Driven Architecture, y Microservices, entre otros.&lt;/li&gt;
&lt;li&gt;Patrones de Diseño: Estudiar y comprender diversos patrones de diseño.&lt;/li&gt;
&lt;li&gt;Programación Funcional: Adquirir conocimientos en programación funcional.&lt;/li&gt;
&lt;li&gt;Programación Orientada a Objetos: Dominar los principios y prácticas de la programación orientada a objetos.&lt;/li&gt;
&lt;li&gt;Microservicios: Comprender y aplicar los conceptos de programación basada en microservicios.&lt;/li&gt;
&lt;li&gt;Seguridad: Familiarizarse con conceptos básicos como autenticación, autorización, encriptación, hashing, firewalls, ataques DDoS, inyección SQL, cross-site scripting, etc.&lt;/li&gt;
&lt;li&gt;Testing: Entender los fundamentos de las pruebas, incluyendo pruebas unitarias, pruebas de integración, pruebas de aceptación, pruebas de carga, pruebas de estrés, etc.&lt;/li&gt;
&lt;li&gt;Despliegue (Docker): Explorar los conceptos básicos de despliegue, incluyendo servidores web, servidores de aplicaciones, contenedores, orquestadores de contenedores, plataformas como servicio (PaaS), infraestructura como servicio (IaaS), etc.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;¡Emocionado por este viaje de aprendizaje y crecimiento profesional! 🌐✨ #DesarrolladorBackend #Meta2024 #CrecimientoProfesional&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>career</category>
      <category>learning</category>
    </item>
    <item>
      <title>20 Sites to deploy any application (Paid/Free alternatives)</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Sun, 01 Oct 2023 11:13:40 +0000</pubDate>
      <link>https://forem.com/joselatines/sites-to-deploy-any-application-paidfree-alternatives-3em8</link>
      <guid>https://forem.com/joselatines/sites-to-deploy-any-application-paidfree-alternatives-3em8</guid>
      <description>&lt;p&gt;In the fast-evolving world of tech, deploying applications efficiently and securely is a crucial aspect of any developer's journey. With a plenty of deployment platforms available, each one attack to specific needs and preferences, let's take a closer look at some prominent players in the field:&lt;/p&gt;

&lt;h2&gt;
  
  
  1. AWS Amazon 🚀
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Paid version&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  2. Github Pages (Recommended for status websites) 🌐
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: GitHub Pages provides a hassle-free way to host static websites directly from your GitHub repository. It's an excellent choice for open-source projects and personal websites.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3. Microsoft Azure ☁️
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Paid version&lt;/li&gt;
&lt;li&gt;Overview: Azure offers a comprehensive cloud computing platform with services ranging from virtual computing to analytics. It's a go-to solution for enterprise-level deployments.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  4. Google Cloud ☁️
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Paid version&lt;/li&gt;
&lt;li&gt;Overview: Google Cloud is known for its robust and scalable infrastructure, making it ideal for large-scale applications. It provides a variety of services, including computing, storage, and machine learning.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  5. Firebase 🔥
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Firebase, owned by Google, is a mobile and web application development platform. It offers real-time database, authentication, and hosting services, making it a one-stop solution for app development.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  6. Flo 💼
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Paid version&lt;/li&gt;
&lt;li&gt;Overview: Flo focuses on automating deployment workflows, ensuring seamless processes for developers. It's designed to optimize deployment pipelines for increased efficiency.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  7. Fleek 🚀
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Fleek is a decentralized hosting platform built on IPFS (InterPlanetary File System). It allows developers to deploy and host websites without relying on traditional servers.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  8. Fly.io ✈️
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Fly.io is a platform that enables developers to deploy applications globally with low-latency. It's built to handle modern, distributed applications.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  9. Heroku (Recommended for dynamic websites) 🚀
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Known for its simplicity, Heroku is a cloud platform that enables developers to build, deploy, and scale applications effortlessly. It supports multiple programming languages.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  10. Netlify (Favorite for dynamic websites) 🌐
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Netlify is a popular choice for hosting static websites and JAMstack applications. It integrates seamlessly with version control systems like Git.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  11. Oracle Cloud ☁️
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Paid version&lt;/li&gt;
&lt;li&gt;Overview: Oracle Cloud provides a comprehensive suite of cloud services, including computing, storage, and databases, catering to enterprise-level requirements.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  12. Cloudflare Pages 🌐
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Cloudflare Pages offers global CDN (Content Delivery Network) services, making it an excellent choice for fast and secure website deployments.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  13. PythonAnywhere (Recommended for python scripts) 🐍
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: PythonAnywhere is a platform for hosting and running Python scripts and web apps. It's particularly useful for Python developers looking for a simple deployment solution.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  14. Railway.app 🚄
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Railway focuses on simplifying the deployment process for developers. It supports various frameworks and languages.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  15. Render.com 🚀
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Render is a cloud platform that automates the deployment and scaling of applications.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  16. Replit.com 🔄
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Replit is an online IDE and collaborative platform that allows developers to write, share, and deploy code in multiple languages.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  17. Scaleway Elements ☁️
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Scaleway Elements provides a range of cloud services, including virtual servers and object storage, with a focus on simplicity and cost-effectiveness.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  18. Streamlit Sharing 🚀
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Streamlit Sharing is a platform for deploying Streamlit apps effortlessly. It's tailored for data scientists and engineers working on data-centric applications.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  19. Supabase.io 🚀
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Supabase is an open-source alternative to Firebase, providing real-time database and authentication services for web and mobile applications.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  20. Vercel 🌐 (Favorite for Frameworks web apps)
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Deployment Type: Free and Paid version&lt;/li&gt;
&lt;li&gt;Overview: Vercel is a popular platform for deploying web applications, offering features like serverless functions and automatic CI/CD (Continuous Integration/Continuous Deployment).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Choosing the right deployment platform depends on factors like project requirements, scalability, and budget. Explore these options to find the perfect fit for your next project! 🚀🌐💻&lt;/p&gt;

&lt;p&gt;If you find this content helful please like this article, and follow me on &lt;a href="https://www.linkedin.com/in/joselatines/"&gt;LinkedInd &lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>deploy</category>
      <category>programming</category>
      <category>development</category>
    </item>
    <item>
      <title>Top Websites to Practice Programming 🚀</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Wed, 02 Aug 2023 02:25:58 +0000</pubDate>
      <link>https://forem.com/joselatines/top-websites-to-practice-programming-45h5</link>
      <guid>https://forem.com/joselatines/top-websites-to-practice-programming-45h5</guid>
      <description>&lt;p&gt;Looking to sharpen your coding skills and take on exciting challenges? Look no further! Check out these amazing websites that offer a plethora of opportunities to practice and enhance your programming prowess:&lt;/p&gt;

&lt;h2&gt;
  
  
  CodeSignal (Real Tests)
&lt;/h2&gt;

&lt;p&gt;CodeSignal provides real-world coding tests that simulate actual job interviews. It's a fantastic platform to assess and improve your coding abilities in a real-life context.&lt;/p&gt;

&lt;h2&gt;
  
  
  Exercism (Logic Puzzles)
&lt;/h2&gt;

&lt;p&gt;Exercism offers a collection of logic puzzles and coding exercises to challenge your problem-solving skills. The platform provides feedback from experienced mentors to help you learn and grow.&lt;/p&gt;

&lt;h2&gt;
  
  
  CodeWars (Coding Challenges)
&lt;/h2&gt;

&lt;p&gt;CodeWars is home to a vast library of coding challenges, allowing you to tackle problems of varying complexity. It's a great place to interact with a community of developers and learn from their solutions.&lt;/p&gt;

&lt;p&gt;These platforms offer a stimulating environment for continuous learning and improvement, no matter your skill level. The more you practice, the more confident and proficient you'll become in tackling real-world coding challenges.&lt;/p&gt;

&lt;p&gt;If you found this list helpful, I'd greatly appreciate your support! Please like and share this post to help others discover these fantastic resources. Let's build a strong community of passionate programmers who love to learn and create amazing content together! 🤗💻&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How to Perfectly Center a Div: A Complete Guide 🎯</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Wed, 02 Aug 2023 02:19:20 +0000</pubDate>
      <link>https://forem.com/joselatines/how-to-perfectly-center-a-div-a-complete-guide-3d3k</link>
      <guid>https://forem.com/joselatines/how-to-perfectly-center-a-div-a-complete-guide-3d3k</guid>
      <description>&lt;p&gt;Centering a div can be a bit tricky, but fear not! I'll walk you through two fantastic methods to perfectly center a div within its parent element.&lt;/p&gt;

&lt;h2&gt;
  
  
  Method 1: Using Flexbox 📏
&lt;/h2&gt;

&lt;p&gt;HTML:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div class="parent"&amp;gt;
            &amp;lt;div class="child"&amp;gt;I am a div 🤐&amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;CSS:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With the above CSS, the .parent div will become a flex container, and the justify-content: center; and align-items: center; properties will ensure its child div (.child) is perfectly centered both horizontally and vertically. Voilà! 🌟&lt;/p&gt;

&lt;h2&gt;
  
  
  Method 2: Utilizing CSS Grid 📐
&lt;/h2&gt;

&lt;p&gt;HTML:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div class="parent"&amp;gt;
            &amp;lt;div class="child"&amp;gt;I am a div 🤐&amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;CSS:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.parent {
    display: grid;
    place-items: center;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By using CSS Grid, you can achieve the same result with even fewer lines of code! The .parent div becomes a grid container, and the place-items: center; property centers its child div (.child) in both directions. How cool is that? 😎&lt;/p&gt;

&lt;p&gt;Feel free to choose whichever method suits your project or personal preference. Both Flexbox and CSS Grid are powerful tools to have in your web development toolkit.&lt;/p&gt;

&lt;p&gt;Remember, mastering these techniques will help you create stunningly centered divs in your projects and impress your fellow developers! Keep coding and happy centering! 💻🎉&lt;/p&gt;

&lt;h1&gt;
  
  
  WebDevelopment #CSSCentering #Flexbox #CSSGrid #CodingTips
&lt;/h1&gt;

</description>
      <category>webdev</category>
      <category>css</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Why Can't I Land a Programming Job Despite 3 Years of Experience? 🤔😱</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Wed, 05 Jul 2023 01:03:22 +0000</pubDate>
      <link>https://forem.com/joselatines/why-cant-i-land-a-programming-job-despite-3-years-of-experience-10ph</link>
      <guid>https://forem.com/joselatines/why-cant-i-land-a-programming-job-despite-3-years-of-experience-10ph</guid>
      <description>&lt;p&gt;I am experiencing a hard time 😔 to find a job as a programmer and I don't know why. Let's see what I am doing wrong. 🤔&lt;/p&gt;

&lt;p&gt;I have been programming for &lt;strong&gt;3 years&lt;/strong&gt; ⏱️, I started in 2020. Since then, I have only got one "job" experience in a company. I used &lt;strong&gt;colons&lt;/strong&gt; 📆 because it was more like a freelance job where every month I get a little pay 💰 but without a contract, so it is more like a freelance experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Don't get me wrong&lt;/strong&gt; ❗, I have had a few freelance jobs, from landing pages to CRUD frontend apps, but nothing really amazing, just freelance jobs to buy some stuff, less than $300 💸.&lt;/p&gt;

&lt;p&gt;People that I know, who know &lt;strong&gt;less&lt;/strong&gt; than me about code, are getting their first job and I am really enjoying that. I am &lt;strong&gt;very proud&lt;/strong&gt; 🙌, but I'd like to know why things happen, so I made comparisons with them.&lt;/p&gt;

&lt;h1&gt;
  
  
  Let's take an example of one of my friends:
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;He knows only a few JavaScript, HTML, and CSS, with nothing fancy.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I have made a bunch of really good projects with complicated designs using frameworks, libraries, etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;His CV is literally two pages and is full of Udemy courses with nothing interesting and any experience.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;My CV is really user-friendly, and many people have told me that it looks nice.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;My CV:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qOFOQyWc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ab1mid5gqkwnc948g0i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qOFOQyWc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ab1mid5gqkwnc948g0i.png" alt="jose latines curriculum full stack developer" width="658" height="751"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;He does not have a portfolio.&lt;/li&gt;
&lt;li&gt;I have a really good-looking portfolio. 😎&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://www.joselatines.com/"&gt;See portfolio&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Xd-NrDfj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luj17zb55bd4wabqz4mu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Xd-NrDfj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luj17zb55bd4wabqz4mu.png" alt="joselatines portfolio" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;He doesn't create content for social media.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I create content for social media (Like this. 😉)&lt;br&gt;
Follow me!&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;He doesn't have a good LinkedIn profile.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I think that I have a good LinkedIn profile.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://www.linkedin.com/in/joselatines/"&gt;See my LinkedIn&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I also send a bunch of CVs to any position, write on Discord communities, and send messages to recruiters on LinkedIn.&lt;/p&gt;

&lt;p&gt;So, there are a bunch of reasons that make me think. Maybe he is luckier than me, and well... I cannot handle that, but I really want to know what I am doing wrong because I have to be doing something wrong for not getting any job in &lt;strong&gt;3 years&lt;/strong&gt; ⌛.&lt;/p&gt;

&lt;p&gt;I am &lt;strong&gt;happy&lt;/strong&gt; 😃 that my friends are getting really good jobs, but I want to as well because I love programming, and just thinking of working on this makes me full of excitement and keeps me working.&lt;/p&gt;

&lt;p&gt;So, my question for you is... What do you think I am doing wrong? What do you recommend to me? 😕🤔&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>discuss</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Create React form auto validated using formik and yup</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Sun, 02 Jul 2023 23:22:57 +0000</pubDate>
      <link>https://forem.com/joselatines/create-react-form-auto-validated-using-formik-and-yup-49c1</link>
      <guid>https://forem.com/joselatines/create-react-form-auto-validated-using-formik-and-yup-49c1</guid>
      <description>&lt;p&gt;Formik and Yup are two powerful libraries in the React ecosystem that streamline form handling and validation. Let's dive into what makes them special and why they can greatly enhance your development experience! 🚀&lt;/p&gt;

&lt;h3&gt;
  
  
  📝 Understanding Formik
&lt;/h3&gt;

&lt;p&gt;Formik is a flexible and intuitive library that helps you manage form state, validation, and submission in React applications. It simplifies the process of handling complex forms by providing an elegant API and seamless integration with React components. 📊&lt;/p&gt;

&lt;h3&gt;
  
  
  📋 Introducing Yup
&lt;/h3&gt;

&lt;p&gt;Yup is a JavaScript schema validation library that works seamlessly with Formik. It allows you to define validation rules and constraints for your form inputs, ensuring that user input meets your specified requirements. With Yup, form validation becomes more efficient and reliable. ✅&lt;/p&gt;

&lt;h3&gt;
  
  
  🤔 Why Should You Use Formik and Yup?
&lt;/h3&gt;

&lt;p&gt;By utilizing Formik and Yup, you can significantly reduce the boilerplate code traditionally associated with form management in React. These libraries provide a declarative approach to form handling, making your code more readable, maintainable, and efficient. ⚡️&lt;/p&gt;

&lt;h3&gt;
  
  
  💡 The Best Approach: A Closer Look
&lt;/h3&gt;

&lt;p&gt;While there are various methods to create Formik forms, let me share my personal favorite for its simplicity and readability. By following this approach, you'll be able to build forms more efficiently and save time during development. 🎯&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
import { useFormik } from "formik";
import * as Yup from "yup";

const validationSchema = Yup.object({
    email: Yup.string().label("Email is required").email().required(),
});

const initialValues = {
    email: "",
};

function FormikForm() {
    const handleSubmit = async credentials =&amp;gt; {
        try {
            alert("Credentials received");
            console.log(credentials);
        } catch (error) {
            console.error(error);
        }
    };

    const formik = useFormik({
        validationSchema,
        initialValues,
        onSubmit: handleSubmit,
    });
    return (
        &amp;lt;form
            onSubmit={formik.handleSubmit}
            className="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7"
        &amp;gt;
            &amp;lt;div&amp;gt;
                &amp;lt;div className="mb-4"&amp;gt;
                    &amp;lt;label
                        className="block text-gray-700 text-sm font-bold mb-2"
                        htmlFor={"email"}
                    &amp;gt;
                        Email
                    &amp;lt;/label&amp;gt;
                    &amp;lt;input
                        className={`${
                            formik.touched["email"] &amp;amp;&amp;amp; formik.errors["email"]
                                ? "border-red-400"
                                : "border-gray-300"
                        }`}
                        type="text"
                        name={"email"}
                        id={"email"}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        value={formik.values["email"]}
                    /&amp;gt;

                    {formik.touched["email"] &amp;amp;&amp;amp; formik.errors["email"] &amp;amp;&amp;amp; (
                        &amp;lt;span className="text-red-400"&amp;gt;{formik.errors["email"]}&amp;lt;/span&amp;gt;
                    )}
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;

            &amp;lt;div className="relative"&amp;gt;
                &amp;lt;button
                    type="submit"
                    disabled={formik.isSubmitting}
                    className={`btn ${formik.isSubmitting &amp;amp;&amp;amp; "disabled"}`}
                &amp;gt;
                    Login
                &amp;lt;/button&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/form&amp;gt;
    );
}

export default FormikForm;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you found this content helpful and informative, please let me know in the comments section. Don't forget to follow me on Instagram @gregglatines for more exciting content! 😊👍&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Upload Photos with React and Express using Multer: A Comprehensive Guide</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Sun, 02 Jul 2023 23:06:25 +0000</pubDate>
      <link>https://forem.com/joselatines/upload-photos-with-react-and-express-using-multer-a-comprehensive-guide-403d</link>
      <guid>https://forem.com/joselatines/upload-photos-with-react-and-express-using-multer-a-comprehensive-guide-403d</guid>
      <description>&lt;h2&gt;
  
  
  1. 🚀 Install the necessary dependencies on your server
&lt;/h2&gt;

&lt;p&gt;To get started, install the &lt;code&gt;multer&lt;/code&gt; package by running the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install multer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  2. 🌐 Add endpoints for image upload and access
&lt;/h2&gt;

&lt;p&gt;We will create two endpoints: &lt;code&gt;POST /api/images&lt;/code&gt; for uploading images from our frontend and &lt;code&gt;GET /images/{imageName}&lt;/code&gt; to access the uploaded images.&lt;/p&gt;

&lt;p&gt;Here's an example code snippet for these endpoints:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// index.js
import { createReadStream } from "fs";
import multer from "multer";
const upload = multer({ dest: "images/" });

// app.use('/images', express.static('images'))
app.get("/images/:imageName", (req, res) =&amp;gt; {
    // do a bunch of if statements to make sure the user is
    // authorized to view this image, then

    const imageName = req.params.imageName;
    const readStream = createReadStream(`images/${imageName}`);
    readStream.pipe(res);
});

app.post("/api/images", upload.single("image"), (req, res) =&amp;gt; {
    const imageName = req.file.filename;
    const description = req.body.description;

    // Save this data to a database probably

    console.log(description, imageName);
    return res.send({ description, imageName });
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  React code
&lt;/h1&gt;

&lt;h2&gt;
  
  
  1. ✨ Create an image uploader component in React
&lt;/h2&gt;

&lt;p&gt;In the component, we will define a submit function that makes the API request in the parent component. This makes the component reusable. &lt;br&gt;
The submit function should accept the event (e), the file, and a description of the image.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// components/FileUploader.jsx
import { useState } from "react";

function FileUploader({ submit }) {
    const [file, setFile] = useState();
    const [description, setDescription] = useState("");

    return (
        &amp;lt;div className="row"&amp;gt;
            &amp;lt;form onSubmit={e =&amp;gt; submit(e, file, description)}&amp;gt;
                &amp;lt;input
                    filename={file}
                    onChange={e =&amp;gt; setFile(e.target.files[0])}
                    type="file"
                    accept="image/*"
                &amp;gt;&amp;lt;/input&amp;gt;
                &amp;lt;input
                    onChange={e =&amp;gt; setDescription(e.target.value)}
                    type="text"
                &amp;gt;&amp;lt;/input&amp;gt;
                &amp;lt;button type="submit"&amp;gt;Submit&amp;lt;/button&amp;gt;
            &amp;lt;/form&amp;gt;
        &amp;lt;/div&amp;gt;
    );
}

export default FileUploader;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  2. ✨ Implement the component
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import axios from "axios";
import FileUploader from "./Components/FileUploader";

function App() {
    const sendImage = async (e, file, description) =&amp;gt; {
        e.preventDefault();

        const formData = new FormData();
        formData.append("image", file);
        formData.append("description", description);

        const result = await axios.post(
            "http://localhost:8080/api/images",
            formData,
            {
                headers: { "Content-Type": "multipart/form-data" },
            }
        );
        console.log(result.data);
    };
    return (
        &amp;lt;&amp;gt;
            &amp;lt;FileUploader submit={sendImage} /&amp;gt;
        &amp;lt;/&amp;gt;
    );
}

export default App;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Enjoy!
&lt;/h1&gt;

&lt;p&gt;Now it's time to turn on your servers and start using this image uploader in your application. 🎉&lt;/p&gt;

&lt;p&gt;Note: The multer package has multiple configurations, such as handling multiple files, setting file size limits, and more. In this tutorial, we will keep it simple and focus on the basics.&lt;/p&gt;

&lt;p&gt;If you found this content helpful, please let me know in the comments section and don't forget to follow me on Instagram &lt;a href="https://www.instagram.com/gregglatines/"&gt;@gregglatines&lt;/a&gt;. 😊&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Cómo implementar multiidioma en react en 3 pasos</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Tue, 13 Jun 2023 13:07:31 +0000</pubDate>
      <link>https://forem.com/joselatines/como-implementar-multiidioma-en-react-en-3-pasos-12j7</link>
      <guid>https://forem.com/joselatines/como-implementar-multiidioma-en-react-en-3-pasos-12j7</guid>
      <description>&lt;p&gt;Aprende a utilizar la librería react-i18next para implementar la funcionalidad de múltiples idiomas en nuestras aplicaciones de React.&lt;/p&gt;

&lt;h2&gt;
  
  
  Paso 1: Instalar react-i18next
&lt;/h2&gt;

&lt;p&gt;Para instalar la dependencia, ejecutamos el siguiente comando en nuestra terminal:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install react-i18next i18next --save&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Paso 2: Agregar i18n a toda la aplicación
&lt;/h2&gt;

&lt;p&gt;Dirígete al archivo principal donde se renderiza toda tu aplicación, que podría ser _app.tsx o main.tsx si estás utilizando Vite.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import englishContent from "./lang/en.json";
import spanishContent from "./lang/es.json";

i18n.use(initReactI18next).init({
    resources: {
        en: englishContent,
        es: spanishContent,
    },

    fallbackLng: "en",

    interpolation: {
        escapeValue: false, // react already safes from xss =&amp;gt; https://www.i18next.com/translation-function/interpolation#unescape
    },
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    &amp;lt;React.StrictMode&amp;gt;
        &amp;lt;App /&amp;gt;
    &amp;lt;/React.StrictMode&amp;gt;
);



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  Paso 2.1: Agrega tus traducciones
&lt;/h2&gt;

&lt;p&gt;Crea una carpeta &lt;code&gt;src/lang&lt;/code&gt; y agrega tus respectivos idiomas. Por ejemplo, si el contenido de tu archivo JSON está en español, nómbralo como es.json:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

{
  "translation": {
    "home": {
      "welcome": "Bienvenido a este tutorial"
    },
    "blog": {
      "description": "Este post te será de mucha ayuda"
    }
  }
}


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Paso 3: Listo, ahora solo queda probarlo&lt;br&gt;
En tu componente App.tsx, puedes utilizar el hook useTranslation de &lt;code&gt;react-i18next&lt;/code&gt; para acceder a las traducciones.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

import { useTranslation } from "react-i18next";

function App() {
    const { t } = useTranslation();

    return (
        &amp;lt;main&amp;gt;
            &amp;lt;h2&amp;gt;{t("home.welcome")}&amp;lt;/h2&amp;gt;;
        &amp;lt;/main&amp;gt;
    );
}

export default App;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h1&gt;
  
  
  ¡Característica adicional! Selector de idioma!
&lt;/h1&gt;

&lt;p&gt;Puedes implementar un selector de idioma para permitir a los usuarios cambiar el idioma de tu aplicación fácilmente. Primero, crea el componente:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

import { useEffect, useState } from "react";
import ReactFlagsSelect from "react-flags-select";
import { useTranslation } from "react-i18next";

function LangSelector() {
    const { i18n } = useTranslation();
    const [lang, setLang] = useState("EN");

    const getUserBrowserLanguage = () =&amp;gt; {
        const lang = window.navigator.language;

        if (lang.includes("es")) return "es";
        if (lang.includes("en")) return "en";

        return "en";
    };

    const countryCodeToLangCode = (countryCode: string) =&amp;gt; {
        const country = countryCode.toLowerCase();

        if (country.includes("us")) return "en";
        if (country.includes("es")) return "es";

        return "en";
    };

    const handleLangSelect = (countryCode: string) =&amp;gt; {
        const currentLang = countryCodeToLangCode(countryCode);
        i18n.changeLanguage(currentLang);

        setLang(countryCode);
    };

    useEffect(() =&amp;gt; {
        const userBrowserLang = getUserBrowserLanguage();

        i18n.changeLanguage(userBrowserLang);
        setLang(userBrowserLang);
    }, []);

    return (
        &amp;lt;ReactFlagsSelect
            countries={["US", "ES"]}
            customLabels={{ US: "EN", ES: "ES" }}
            selected={lang.toUpperCase()}
            onSelect={handleLangSelect}
        /&amp;gt;
    );
}

export default LangSelector;



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Ahora puedes colocarlo en cualquier sitio de tu aplicacion! &lt;/p&gt;

&lt;p&gt;Este componente cuando se cargue la página cargara por defecto el idioma predeterminado del navegador.&lt;/p&gt;

&lt;p&gt;Con esto tendrás todo lo necesario para que tu aplicación funcione. Si este artículo te ha sido útil, ¡no dudes en dejar un "me gusta" ❤️!&lt;/p&gt;

&lt;p&gt;Asi se deberia de ver la estructura de la aplicacion:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6etrcv0obsswolujxjc3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6etrcv0obsswolujxjc3.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to Generate API Documentation with Insomnia</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Thu, 04 May 2023 22:45:44 +0000</pubDate>
      <link>https://forem.com/joselatines/how-to-generate-api-documentation-with-insomnia-18fg</link>
      <guid>https://forem.com/joselatines/how-to-generate-api-documentation-with-insomnia-18fg</guid>
      <description>&lt;p&gt;Insomnia is a powerful REST client that can help you test and debug your APIs. But did you know that you can also use it to generate API documentation? In this tutorial, we'll show you how to do just that.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Create your Insomnia Project
&lt;/h2&gt;

&lt;p&gt;First, you'll need to create an Insomnia project. If you're not familiar with Insomnia, you can download it for free from the &lt;a href="https://insomnia.rest/" rel="noopener noreferrer"&gt;official website&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6sbztrmbyftk9jigz0yk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6sbztrmbyftk9jigz0yk.png" alt="Insomnia project creation screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Export your project in JSON format
&lt;/h2&gt;

&lt;p&gt;Once you've created your project, you'll need to export it in JSON format. To do this, go to &lt;code&gt;File&lt;/code&gt; &amp;gt; &lt;code&gt;Export Data&lt;/code&gt; &amp;gt; &lt;code&gt;Insomnia v4 (JSON)&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvfds52248ng313f4aij7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvfds52248ng313f4aij7.png" alt="Exporting the Insomnia project screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4vghmpsm1rn4bqbjyedx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4vghmpsm1rn4bqbjyedx.png" alt="Choosing the export destination screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Generate the documentation
&lt;/h2&gt;

&lt;p&gt;Before you can generate the documentation, you'll need to install Node.js on your system.&lt;/p&gt;

&lt;p&gt;Once you have Node.js installed, open your command prompt or terminal and navigate to the folder where your JSON file is located.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyxoo5hpkir5i00qz5b6c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyxoo5hpkir5i00qz5b6c.png" alt="Navigating to the folder where the JSON file is located screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Execute the following command:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

npx insomnia-documenter --config &amp;lt;name of the file&amp;gt;.json --output &amp;lt;name of the documentation&amp;gt;.json


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F22gdnmoo0aap9utv0589.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F22gdnmoo0aap9utv0589.png" alt="Generating the documentation screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. See your documentation
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Local Documentation
&lt;/h3&gt;

&lt;p&gt;If you want to see your documentation on your local machine, you'll need to run a server. To do this, navigate to the folder where your documentation was generated and execute the following command:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

npx serve


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmeyjcy3aip4vc8tpf255.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmeyjcy3aip4vc8tpf255.png" alt="Running the server screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fml4n1ei7w4pkeqsmjnxs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fml4n1ei7w4pkeqsmjnxs.png" alt="Viewing the local documentation screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Online Documentation
&lt;/h3&gt;

&lt;p&gt;If you want to share your documentation on the internet, you'll need to upload it to a deploy website. We recommend using &lt;a href="https://www.netlify.com/" rel="noopener noreferrer"&gt;Netlify&lt;/a&gt; because it's easy and fast.&lt;/p&gt;

&lt;p&gt;If this article was helpful, please give a ❤️ to make more content like this.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>tutorial</category>
      <category>node</category>
      <category>api</category>
    </item>
    <item>
      <title>How to Fix Missing Tkinter Library Error When Creating Executable in Tkinter</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Tue, 21 Feb 2023 16:32:57 +0000</pubDate>
      <link>https://forem.com/joselatines/how-to-fix-missing-tkinter-library-error-when-creating-executable-in-tkinter-2hjj</link>
      <guid>https://forem.com/joselatines/how-to-fix-missing-tkinter-library-error-when-creating-executable-in-tkinter-2hjj</guid>
      <description>&lt;h2&gt;
  
  
  🤔 Have you ever encountered an error when creating an executable of your Tkinter app?
&lt;/h2&gt;

&lt;p&gt;👨‍💻 I faced a similar issue where some windows were not showing up. After some investigation, I discovered that the problem was due to the absence of the Tkinter library in the executable file.&lt;/p&gt;

&lt;p&gt;👍 Luckily, the solution was simple. By running the command &lt;code&gt;pyinstaller --onefile --hidden-import tkinter hello.py&lt;/code&gt; when creating the executable, I was able to include the missing library and resolve the issue. Hope this tip helps fellow Tkinter developers out there!&lt;/p&gt;

&lt;h2&gt;
  
  
  Options
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;📁 --onefile&lt;/code&gt; is to just creating a .exe file&lt;br&gt;
&lt;code&gt;🔍 --hidden-import &amp;lt;library&amp;gt;&lt;/code&gt; is for import the libray&lt;br&gt;
&lt;code&gt;🙈 -w&lt;/code&gt; is for not showing the console when the executable runs&lt;/p&gt;

</description>
      <category>career</category>
      <category>community</category>
      <category>developer</category>
    </item>
    <item>
      <title>Domine el objeto Console de JavaScript: 5 técnicas esenciales para ahorrar tiempo y evitar errores</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Wed, 15 Feb 2023 00:07:46 +0000</pubDate>
      <link>https://forem.com/joselatines/domine-el-objeto-console-de-javascript-5-tecnicas-esenciales-para-ahorrar-tiempo-y-evitar-errores-3580</link>
      <guid>https://forem.com/joselatines/domine-el-objeto-console-de-javascript-5-tecnicas-esenciales-para-ahorrar-tiempo-y-evitar-errores-3580</guid>
      <description>&lt;p&gt;Si eres programador de JavaScript, es muy probable que hayas utilizado el método &lt;code&gt;console.log&lt;/code&gt; en numerosas ocasiones para visualizar información y solucionar errores en tu código. Sin embargo, el objeto console ofrece mucho más que simplemente mensajes en la consola. En este artículo, te presentamos cinco métodos del objeto console que pueden ayudarte a ahorrar tiempo y evitar dolores de cabeza al programar.&lt;/p&gt;

&lt;h2&gt;
  
  
  Console.log() con un objeto
&lt;/h2&gt;

&lt;p&gt;Aunque &lt;code&gt;console.log&lt;/code&gt; es el método más básico que todos conocemos, en ocasiones puede ser difícil visualizar grandes cantidades de información. Para mejorar la visualización de los datos, puedes utilizar objetos {} en conjunto con &lt;code&gt;console.log.&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Estilos CSS
&lt;/h2&gt;

&lt;p&gt;¿Sabías que puedes aplicar estilos CSS en la consola para mejorar la presentación de tus mensajes? Con esta herramienta podrás darle un toque de estilo y personalización a tus mensajes, lo que hará que sea más fácil encontrar lo que necesitas.&lt;/p&gt;

&lt;h2&gt;
  
  
  Advertencias con console.warn
&lt;/h2&gt;

&lt;p&gt;En ocasiones, cuando la consola imprime mucha información, puede ser difícil encontrar lo que buscas. Para solucionar este problema, te recomendamos utilizar console.warn, que coloreará tus mensajes en amarillo para hacerlos más fáciles de identificar.&lt;/p&gt;

&lt;h2&gt;
  
  
  Console.error
&lt;/h2&gt;

&lt;p&gt;En nuestro día a día, es común utilizar &lt;code&gt;console.log&lt;/code&gt; con un mensaje de error después de hacer llamadas HTTP. Sin embargo, si quieres obtener más información sobre el error, debes utilizar console.error. Este método proporcionará más información y marcará el error en rojo para evitar que se pierda información importante.&lt;/p&gt;

&lt;h2&gt;
  
  
  Console.table
&lt;/h2&gt;

&lt;p&gt;¿Cuántas veces has mostrado una lista de elementos para visualizar la información que te trae la API? Con console.table, puedes mejorar la visualización de esta información de manera atractiva y fácil de entender. Esta herramienta te permitirá ver los datos en una tabla, lo que hará que sea más fácil analizar y entender la información.&lt;/p&gt;

&lt;p&gt;Comparte estos trucos con tus colegas programadores para que todos puedan optimizar su trabajo con el objeto console de JavaScript. ¡Mejora tus habilidades de programación con estas herramientas y facilita tu trabajo!&lt;/p&gt;

</description>
      <category>watercooler</category>
      <category>jokes</category>
      <category>devmeme</category>
    </item>
    <item>
      <title>Cómo crear un entorno virtual en Python (Fácil y rápido)</title>
      <dc:creator>Jose Latines</dc:creator>
      <pubDate>Mon, 12 Dec 2022 19:26:37 +0000</pubDate>
      <link>https://forem.com/joselatines/como-crear-un-entorno-virtual-en-python-facil-y-rapido-1h16</link>
      <guid>https://forem.com/joselatines/como-crear-un-entorno-virtual-en-python-facil-y-rapido-1h16</guid>
      <description>&lt;h1&gt;
  
  
  1. Instalación del entorno virtual
&lt;/h1&gt;

&lt;p&gt;En la carpeta raíz de tu proyecto abre la consola y ejecuta el siguiente comando &lt;code&gt;virtualenv -p python env&lt;code&gt;&lt;/code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Se creará una carpeta con nombre "env". &lt;/p&gt;

&lt;p&gt;Siendo "env" el nombre de la carpeta, nombre qué es opcional pero que acostumbra ser "env" por enviroment o "venv" por virtual env.&lt;/p&gt;

&lt;h1&gt;
  
  
  2. Activar entorno virtual
&lt;/h1&gt;

&lt;p&gt;Ahora, en la consola ejecuta el comando &lt;code&gt;.\env\Scripts\activate&lt;code&gt;&lt;/code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Si has hecho todo bien y n la consola en la linea de comando te aparece un "env" significa que ya está funcionando el entorno virtual.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4hSDN5NE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty0mwqz2dag2owgghb5l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4hSDN5NE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty0mwqz2dag2owgghb5l.png" alt="Image description" width="723" height="163"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ahora todos los comandos que ejecutes y paquetes que instales funcionaran en tu entorno virtual del proyecto.&lt;/p&gt;

&lt;h1&gt;
  
  
  3. Desactivar entorno virtual
&lt;/h1&gt;

&lt;p&gt;Para desactivar nuestro entorno sólo deberás ejecutar este comando &lt;code&gt;deactivate&lt;code&gt;&lt;/code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Si te ha servido esta lectura sígueme en mis redes sociales @gregglatines&lt;/p&gt;

&lt;p&gt;Consejos:&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Requirements.txt
&lt;/h2&gt;

&lt;p&gt;Cómo en javascript tenemos el package.json en Python tenemos el requirements.txt.&lt;/p&gt;

&lt;p&gt;El requirements.txt permite almacenar las dependencias que necesita un proyecto.&lt;/p&gt;

&lt;p&gt;Este archivo txt lo podemos crear una vez estando activado nuestro entorno virtual ejecutando el codigo &lt;code&gt;pip freeze &amp;gt; requirements.txt&lt;code&gt;&lt;/code&gt;&lt;/code&gt;&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
