Forem: Mateo Garcia

¿Qué demonios es desarrollo web? 🇪🇸 🤷‍♀️🤷‍♂️

Mateo Garcia — Wed, 30 Mar 2022 20:25:57 +0000

Hola a todos 👋

Estaré usando este blog para compartir tutoriales y pensamientos acerca de mi carrera como Software Engineer, esto podría ser de ayuda para ti o tus allegados. Si puedes seguirme en mis redes y reaccionar a mis artículos me motivaría a continuar.

La vida no es fácil, muchas personas han tenido que empezar de nuevo por una mala decisión, una calamidad, o por una pandemia como esta. Mi motivación para escribir este artículo es compartir a personas que necesiten un nuevo rumbo, una alternativa con la cual puedan obtener bienestar y abundancia para ellos y sus familias. Si encontraste por ti mismo este artículo puede que ya sepas de qué va todo esto, posiblemente conozcas a alguien que esté buscando algo nuevo que emprender, compártele este post y cambiemos vidas.

Como motivación para el lector, aquí hay algunos aspectos que considero ciertos de la industria del desarrollo:

No necesitas un título universitario para convertirte en desarrollador (la mayoría del tiempo).
Una computadora gama media con Windows, Linux o Mac es suficiente para empezar.
Trabajar en desarrollo/tecnología habilita beneficios que no son tan comunes en otras disciplinas (Hablaremos de ellas posteriormente).

Mi nombre es Mateo Garcia, tengo 25 años, y trabajo como desarrollador web desde hace 7 años, mi paso por la academia no fue brillante, sin embargo, la industria tecnológica me abrió las puertas para trabajar como desarrollador sin pedirme un título profesional, después de todo este tiempo sigo convencido de que cualquier persona hubiera podido lograr lo mismo sin el diploma, y por eso estamos aquí hoy.

Cómo sacarle provecho a este artículo

Tomate el tiempo de entender cada concepto sin afán, no es necesario que lo entiendas todo en el primer intento, avanza cuando estés listo.
Toma buenas notas, una estrategia para interiorizar los conceptos es tomar buenos apuntes, puedes usar un cuaderno físico o uno digital.
Usa los recursos que están anexos al contenido y practica por tu propia cuenta, no te preocupes si las cosas no salen bien en las primeras ocasiones, practicar es avanzar.
No pierdas la motivación. Aunque no lo percibas, estás avanzando solo decidiendo leer este artículo, estudia, practica, busca ayuda y repite. Somos una comunidad y estamos para apoyarnos a cumplir los objetivos.

Tabla de Contenido

Los beneficios del desarrollador
¿Qué significa ser desarrollador?
¿Qué significa ser desarrollador web?
Quiero ser desarrollador web!
Conceptos Fundamentales
1. Dominio de la computadora
2. Editor de código
3. HTML
4. CSS
5. Javascript
6. Escoge un framework
¡No pares de aprender!
Y ahora qué?

Los beneficios del desarrollador

La industria tecnológica es bien conocida por los beneficios que le otorga a sus empleados, es difícil hablar de ello sin sonar como un engreído. Sin embargo, creo que es uno de los factores que más influyen para que las personas se interesen en esta disciplina y es por ello que quiero que conozcas algunas de los beneficios que podrías disfrutar trabajando en tecnología:

Salarios superiores a los de otras disciplinas de ingeniería, en ocasiones con pagos en dólares.
Formar parte de un equipo con excelentes profesionales
Planes adicionales de salud, subsidios de Internet, bonos para mejorar tu oficina, presupuesto para educación formal e informal, etc.
Trabajar a distancia, parcialmente a distancia, o en oficinas deslumbrantes.
Vacaciones ilimitadas (toma los días que necesites) o días adicionales a los establecidos por ley en tu país.

¿Qué significa ser desarrollador?

Los desarrolladores son personas que adquieren conocimientos para crear software (programas, aplicaciones, apps). Son contratados para crear un producto con un propósito en el mercado. Cuando alguien está desarrollando, hay una comunicación entre una máquina y un ser humano a través de un conjunto de reglas o sintaxis llamada lenguaje de programación, que es escrito en un documento tal y como si estuvieras escribiendo una carta o un guión en un documento de word.

Existen diferentes tipos de desarrolladores, cada uno se enfoca en los usos que le damos a la tecnología en nuestras vidas. Un desarrollador móvil trabajó en el nivel de Candy Crush que acabas de pasar, un desarrollador web creó la funcionalidad con la que subiste un producto en Amazon, un desarrollador de controladores programó la lavadora con la que lavaste tu ropa y estos son solo algunos ejemplos.

¿Qué significa ser desarrollador web?

La web nació en 1989 gracias a la visión que tuvo Tim Berners-Lee de automatizar la transmisión de documentos científicos entre universidades. Diez años más tarde su invento pasó a ser usado para impulsar el comercio digital; grandes empresas estaban haciendo llegar sus productos y servicios a más personas, todos querían estar en Internet.

Volviendo al presente, nos resulta sospechoso e incluso absurdo que una empresa no tenga presencia en Internet, es por eso que casi todas ellas buscan tener presencia digital, llegar a más clientes y generar más ventas. Las páginas web funcionan como herramientas que pueden ayudar a un producto a crecer y mejorar, por lo cual surge la necesidad de contar con una persona que pueda desarrollar un sitio o una aplicación web. Ahí es donde aparecemos nosotros, los desarrolladores web.

Los desarrolladores web son personas que han especializado sus habilidades de desarrollo en los navegadores web como Chrome, Mozilla, Firefox y Safari (Si en los teléfonos móviles también 💪). Se han capacitado a través de diferentes recursos en Internet, gratuitos y/o de pago, después de un tiempo han aplicado a su primer trabajo en tecnología y ahí están, revolucionando el mercado.

Quiero ser desarrollador web!

Como lo mencioné anteriormente, no tener un título universitario no es un limitante para incursionar en el mundo del desarrollo, te resultará curioso saber la cantidad de gente que trabaja en Tech sin un título o con uno en una área diferente a este. Pienso que esta es la industria de las segundas oportunidades.

No obstante, quiero ser franco contigo: Para triunfar vas a tener que ser consciente y proactivo de tu proceso, administrar tu propio tiempo, escoges tu material de estudio, descubrirás tu metodología de aprendizaje, y serás tu quien determine si estás avanzando.

Si has decidido aceptar mi invitación, el siguiente paso será comprender los conceptos fundamentales que todo desarrollador web debe conocer, el objetivo de este artículo no es hacerte un desarrollador en 30 minutos o en 1 hora. Es motivarte y brindarte las herramientas con las cuales, usando tu tiempo, te permitan convertirte en un desarrollador y le des ese impulso a tu vida para hacer algo nuevo.

Conceptos Fundamentales

Existe una larga lista de conceptos que los desarrolladores experimentados terminan cargando en su mochila, no te voy a mentir, es extensa, sin embargo, muchos de ellos se aprenden en la marcha y hacen parte del aprendizaje continuo que forja la carrera. Desde mi perspectiva, estos son los conceptos más importantes que todo desarrollador web debería de dominar para aplicar a su primer trabajo:

Dominio de la computadora

No es un secreto que una gran porción de la población mundial no sabe cómo usar una computadora y es totalmente entendible. En la actualidad, las computadoras siguen siendo un artículo de lujo y es más fácil dominarlas cuando las usas desde la infancia. Aprende a usar una, mejora tu mecanografía, agiliza tu capacidad para moverse entre aplicaciones, aprende como hacer una buena búsqueda en Google (Busca soluciones en Inglés, si no lo sabes usa un traductor).

Foto por fauxels de Pexels

Editor de código

Un editor de código es el lienzo en el cual los desarrolladores escriben sus programas, sitios o aplicaciones. Es un simple editor de texto como el Bloc de Notas o Microsoft Word pero con capacidades especiales para usar lenguajes de programación, técnicamente podrías escribir un sitio web con tu Bloc de Notas (No lo hagas, por favor).

Foto por Kevin Ku de Pexels

Cada desarrollador escoge su editor de texto y lo personaliza de manera que se sienta cómodo usándolo como herramienta del día a día. Ahora es tu turno, échale un vistazo a los editores más usados y escoge el tuyo!

Visual Studio Code (Recomendación personal)
Atom
Sublime Text

HTML

El desarrollo web es la evolución del contenido impreso. Las revistas y los periódicos llevan años difundiendo información que hoy, los sitios buscan ocupar. Es por eso que la analogía más básica de un sitio web puede ser una revista o un periódico (Con super poderes).

Foto por Evi de Pexels

Antes de producir una revista debe existir una definición de contenido, cada página tiene secciones que se repiten y algunas que son únicas, tenemos títulos, párrafos, imágenes, etc. Usando HTML, podemos hacer la definición del contenido, establecemos en cada página el contenido que queremos compartir.

Para darte una idea de que puedes hacer, estos son algunos usos que podrías darle a un documento HTML:

Definir los títulos o encabezados del sitio
Agregar párrafos de texto que describen los encabezados
Añadir imágenes y/o videos que agreguen significado a la información compartida
Implementar formularios que almacenen información de los usuarios

En este punto nuestro sitio no tiene buen aspecto visual, ni tampoco interactividad, solo posee el contenido “crudo” y el siguiente paso es hacer que visualmente se vea bien, y así llamar la atención de los clientes.

A continuación te dejaré algunos de los recursos gratuitos con los cuales podrás aprender HTML y ganar experiencia:

HTML Basics - Mozilla Developer Network
How to create a Web Page with HTML - The Practical Dev
HTML Basics Start From Zero - The Practical Dev
HTML tutorial for Beginners - Programming with Mosh

CSS

El aspecto estético de cualquier producto o servicio puede impactar en su rentabilidad, es más fácil vender algo bonito que algo que no lo es. CSS aporta la estética del sitio, nos permite definir colores de texto, colores de fondo, tamaños, espaciados, distribuciones y mucho más; para usarlo solo debes crear una hoja de estilos y seleccionar los elementos HTML que quieres modificar.

Foto por Greta Hoffman de Pexels

Para darte una idea de que puedes hacer, estos son algunos usos que podrías darle a un documento CSS:

Cambiar el color o el tamaño de la letra
Especificar tamaños específicos o relativos
Ajustar la distribución de un conjunto de elementos
Aparecer o desaparecer elementos según el tamaño del dispositivo

En este punto nuestro sitio tiene un mejor aspecto visual, no es interactivo, pero puede captar la atención de los clientes y puede transmitir cualquier mensaje con estética. Podrías vender un sitio solo con HTML y CSS, sin embargo no es tan común ya que generalmente se prefiere la interacción pero existen muchos sitios en internet que están hechos solo con estas dos tecnologías.

A continuación te dejaré algunos de los recursos gratuitos con los cuales podrás aprender CSS:

CSS Basics - Mozilla Developer Network
Learn to style HTML using CSS - Mozilla Developer Network
HTML and CSS crash course - Scrimba
What the flexbox - Wes Bos

Javascript

Eventualmente, los sitios web empiezan a necesitar interactividad, no te puedes quedar haciendo sitios estáticos (HTML + CSS) cuando tienes a tu disposición la capacidad de responder a los eventos de los usuarios, enviar datos dinámicos o realizar conversiones directas en línea. Las empresas avanzan rápidamente y ninguna se quiere quedar con el sitio menos innovador del mercado, es por eso que este lenguaje de programación juega un papel fundamental en el desarrollo de sitios y aplicaciones modernas.

Javascript es un lenguaje de programación que habilita la interactividad de los sitios y aplicaciones web modernas. Conecta el documento HTML con lógica de programación generando experiencias de usuario más enriquecedoras y sitios web más poderosos.

Foto por Alexandre Bringer de Pexels

Para darte una idea de que puedes hacer, estos son algunos usos que podrías darle a un documento Javascript:

Buscar un elemento HTML y cambiar alguna propiedad como el color, el tamaño, o el contenido.
Quedarse escuchando cuando un botón sea clickeado, una tecla sea presionada o haya un scroll (Usar la rueda del mouse) y hacer algo.
Almacenar información única de un usuario y generarla en caliente en el futuro (Escribir HTML dinámicamente).

En este punto tienes un sitio web con mucho más potencial, puedes transmitir información a través de contenido escrito y multimedia, puedes hacerlo de manera estética y atractiva, y finalmente puedes agregar interactividad para que la experiencia vaya más allá de solo leer una revista o un periódico digital.

A continuación te dejaré algunos de los recursos gratuitos con los cuales podrás aprender Javascript:

Javascript Basics - Mozilla Developer Network
Learn Javascript Online
Eloquent Javascript
Javascript 30 - Wes Bos

Escoge un framework

Algunos de los aspectos más valiosos, desde mi perspectiva, acerca de la industria tecnológica son el ecosistema y las comunidades. Vas a encontrar personas mejorando las herramientas de trabajo, ayudando desarrolladores atascados en su código, o aportando a comunidades de aprendizaje como meetups, blogs o vlogs.

Hablemos de herramientas de trabajo (los frameworks web). Posiblemente habrás escuchado el dicho “no re-inventar la rueda”, en desarrollo web la rueda ha evolucionado para solucionar los problemas más comunes a la hora de crear sitios y aplicaciones web. Un framework web es una abstracción para solucionar problemas comunes de manera administrada/guiada.

Foto por Roman Odintsov de Pexels

HTML, CSS y Javascript siguen vigentes, puedes hacer un sitio totalmente asombroso solo con esos tres ingredientes. Los frameworks solo cambian el paradigma en el cual se combinan los tres ingredientes.

No opinaré de ninguno para no sesgar, pero aquí hay una lista de los frameworks más usados en el mercado (en ese orden). Es tu decisión escoger el que más te guste, practicarlo con proyectos personales, y finalmente conseguir tu primer trabajo en tecnología 💪.

React

Documentación oficial: https://reactjs.org/docs/getting-started.html

Cursos gratuitos:

React Course - FreeCode Camp
React Crash Course - Traversy Media
React for Beginners - Dave Gray

Vue

Documentación oficial: https://vuejs.org/guide/introduction.html

Cursos gratuitos:

Vue Course - FreeCode Camp
The best way to learn Vue - Vue Mastery
Vue JS Crash Course - Traversy Media

Svelte

Documentación oficial: https://svelte.dev/docs

Cursos gratuitos:

Svelte Course - FreeCode Camp
Svelte Crash Course - Traversy Media
Svelte Crash Course - Evan Does Tech

No pares de aprender

La tecnología se mueve rápido, lo has notado con la velocidad en la que los teléfonos, los electrodomésticos o las aplicaciones evolucionan o se hacen obsoletos, dando paso a nuevas e innovadoras soluciones. Esto mismo ocurre con el desarrollo web, nuevas funcionalidades, librerías, frameworks, o conocimientos que no has adquirido empiezan a aparecer en tu lista de prioridades y depende de ti priorizar lo más importante.

No necesitas aprender todo, lo que necesitas es estar vigente en el mercado. HTML, CSS y Javascript son los tres pilares fundamentales y es importante dominarlos. Más tarde depende de ti identificar cuales son las herramientas adicionales que te acercarán a tu trabajo ideal y organizarte tu tiempo para dominarlas.

Foto por RF._.studio de Pexels

Y ahora qué?

Es el final de este artículo, pero el inicio de una nueva aventura. Ahora que sabes en qué consiste ser desarrollador web y entiendes lo que se necesitas para alcanzarlo, es el momento de que te lo creas y te visualices alcanzando el éxito.

Invierte tu tiempo y tu dinero (si es posible) en realizar actividades que te ayuden a ser un mejor desarrollador.
Crea tu cuaderno de notas en el cual estén todos los conceptos que has aprendido.
Realiza proyectos personales y présentalos como tú portafolio.
Participa en comunidades digitales como Dev.to o Hashnode.com.
Encuentra un mentor que te ayude a mejorar tus habilidades.
Resiste ante la frustración y vuelve a empezar si es necesario.

Quiero agradecerte seguir esta guía, espero que impacte positivamente tu carrera y puedas cumplir el propósito de ser un desarrollador. Déjame saber que te ha parecido y compártelo con alguien a quien le pueda servir.

Hasta la próxima 👋.

What the heck is web development? 🇺🇸 🤷‍♀️🤷‍♂️

Mateo Garcia — Wed, 30 Mar 2022 20:23:28 +0000

🇪🇸 Spanish Version

Hi everyone 👋

I will be using this blog to share tutorials and thoughts about my career as a Software Engineer. It may be helpful for you or your close ones. If you can follow me on my networks and react to this post, it would motivate me to continue.

Life is not easy many people have had to start over because of a wrong decision, a calamity, or a pandemic like this one. My motivation for writing this article is to share with people who need a new direction, an alternative with which they can obtain well-being and abundance for themselves and their families.

If you found this article for yourself, you may already know what this is all about. However, you may know someone looking for something new to undertake, share this post and let's change lives. As motivation for the reader, here are some aspects that I consider actual of the development industry:

You don't need a college degree to become a developer (most of the time).
A mid-range computer running Windows, Linux, or Mac is enough to get started.
Working in development/technology enables benefits that are not as common in other disciplines (we'll talk about them later).

My name is Mateo Garcia. I am 25 years old, and I have been working as a web developer for seven years. My time in the academy was not brilliant; The technology industry opened the doors for me to work as a developer without asking for a professional degree. After all this time, I am convinced that anyone could have achieved the same without the diploma, and that's why we are here today.

How to take advantage of this article

Take the time to understand each concept without being anxious. It is not necessary to understand everything on the first try. Move forward when you are ready.
Take good notes. A strategy to internalize the concepts is to take good notes. You can use a physical or digital notebook.
Use the resources attached to the content and practice by yourself. Don't worry if things don't go well the first few times. Practicing is progress.
Do not lose motivation. Even if you don't realize it, you are moving forward just by deciding to read this article, study, practice, look for help and repeat. We are a community, and we are here to support each other to achieve our goals.

The benefits of the programmer
What does it mean to be a programmer?
What does it mean to be a web programmer?
I want to be a web developer!
Fundamental Concepts
1. Computer Proficiency
2. Code editor
3. HTML
4. CSS
5. Javascript
6. Choose a framework
Don't stop learning!
What's next?

The benefits of the programmer

The technology industry is well known for the benefits it gives to its employees, it's hard to talk about it without sounding like a braggart. However, I believe that it is one of the most influential factors in getting people interested in this discipline and that is why I want you to know some of the benefits that you could enjoy working in technology:

Higher salaries than other engineering disciplines, sometimes with payments in dollars.
Being part of a team with excellent professionals
Additional health plans, Internet subsidies, bonuses to improve your office, budget for formal and informal education, etc.
Working remotely, partially remote, or in dazzling offices.
Unlimited vacation (take as many days as you need) or additional days beyond those established by law in your country.

What does it mean to be a developer?

From the verb to develop, developers are people who acquire knowledge to create software (programs, applications, apps) and from that, they are hired to create a product with a purpose in the market. When someone is developing, communication occurs between a machine and a human being through a set of rules or syntax called programming language, which is written in a document as if you were writing a letter or a script in a word document.

There are different types of developers, each focused on the uses we make of technology in our lives. A mobile developer worked on the Candy Crush level you just passed. A web developer created the functionality with which you uploaded a product on Amazon. A driver developer programmed the board of the washing machine with which you washed your clothes. These are just a few examples.

What does it mean to be a web developer?

The web was born in 1989 thanks to Tim Berners-Lee's vision of automating the transmission of scientific documents between universities. Ten years later, his invention was used to boost digital commerce; large companies were making their products and services reach more people, everyone wanted to be on the Internet, the feeling was incredible.

Returning to the present, we find it suspicious and even absurd that a company does not have a presence on the Internet. That is why almost all of them seek to have a digital presence, reach more customers and generate more sales. Web sites work as tools that can help a product grow and improve, so the need arises to have a person who can program a website or a web application. That's where we appear, the web developers.

Web developers are people who have specialized their development skills in web browsers like Chrome, Mozilla, Firefox, and Safari (Yes, in mobile too 💪). They have trained through different free or paid resources on the Internet. After a while, they have applied for their first job in technology (with no professional experience), and there they are, revolutionizing the market.

I want to be a web developer!

As I mentioned before, not having a college degree is not a limiting factor to entering the development world. You would be curious to know how many people work in Tech without a degree or with one in a different area. I think this is the industry of second chances.

Nevertheless, I want to be honest with you: To succeed, you will have to be conscious and proactive in your process. You will manage your own time, will choose your study material, will discover your learning methodology, and will be the one to determine if you are making progress.

If you have decided to accept my invitation, the next step will be to understand the fundamental concepts that every web developer should know. The goal of this article is not to turn you into a developer in 30 minutes or 1 hour. It is for motivating you and giving you the tools that, using your time, will allow you to become a developer and bring that impulse to your life to do something new.

Fundamental Concepts

There is a long list of concepts that experienced developers end up carrying in their backpacks. I'm not going to lie to you is extensive. Many of those are learned on the fly and are part of the continuous learning that forges the career. From my perspective, these are the most important concepts that every web developer should master to apply to their first job:

Computer Proficiency

It is no secret that a large portion of the world's population does not know how to use a computer and it is understandable. Nowadays, computers are still luxury items, and it is easier to master them when you have been using them since childhood. Learn how to use one, improve your typing, speed up your ability to move between applications, learn how to do a good Google search (look for solutions in English, if you don't know it use a translator).

Pic by fauxels from Pexels

Code Editor

A code editor is a canvas on which developers write their programs, sites, or applications. It is a simple text editor like Notepad or Microsoft Word but with special capabilities to use programming languages, technically you could write a website with your Notepad (Don't do it, please).

Pic by Kevin Ku from Pexels

Every developer chooses their text editor and customizes it to feel comfortable using it as a day-to-day tool. Now it's your turn to take a look at the most used editors and choose yours!

Visual Studio Code (Personal recommendation)
Atom
Sublime Text

HTML

Web development is the evolution of printed content. Magazines and newspapers have been disseminating information for years, which today, sites seek to occupy. That is why the most basic analogy of a website can be a magazine or a newspaper (with superpowers).

Pic by Evi from Pexels

Before producing magazines, there must be a content definition, each page has sections repeated and some that are unique, it has titles, paragraphs, images, etc. Using HTML, we can make the content definition, establishing on each page the content we want to share.

To give you an idea of what you can do, here are some uses you could put an HTML document to:

Define site titles or headings
Adding paragraphs of text describing the headings
Adding images and videos that add meaning to the information shared
Implementing forms that store user information

At this point our site does not have a good visual aspect or interactivity, it only has "flat" content and the next step is to make it look good visually, and thus attract the attention of customers.

Here are some of the free resources with which you can learn HTML and gain experience:

HTML Basics - Mozilla Developer Network
How to create a Web Page with HTML - The Practical Dev
HTML Basics Start From Zero - The Practical Dev
HTML tutorial for Beginners - Programming with Mosh

CSS

The aesthetic aspect of any product or service can impact its profitability, it is easier to sell something beautiful than something that is not. CSS provides the aesthetics of the site. It allows us to define text colors, background colors, sizes, spacing, distributions, and much more; to use it, you only have to create a style sheet and select the HTML elements you want to modify.

Pic by Greta Hoffman from Pexels

To give you an idea of what you can do, here are some uses you could make of a CSS document:

Change the color or size of the font.
Specify specific or relative sizes
Adjust the layout of a set of elements
Appear or disappear elements according to device size

At this point our site has a better visual aspect, it is not interactive, but it can capture the attention of customers and can convey any message with aesthetics. You could sell a site only with HTML and CSS, however, it is not so common since the interaction is generally preferred but there are many sites on the Internet that are made only with these two technologies.

Here are some of the free resources with which you can learn CSS:

CSS Basics - Mozilla Developer Network
Learn to style HTML using CSS - Mozilla Developer Network
HTML and CSS crash course - Scrimba
What the flexbox - Wes Bos

Javascript

Eventually, websites start needing interactivity. We can't stay making static sites (HTML + CSS) when you have at your disposal the ability to respond to user events, send dynamic data, or perform direct online conversions. Companies are moving fast, and no one wants to have the least innovative site on the market. That's why this programming language plays a fundamental role in modern sites and applications development.

Javascript is a programming language that enables the interactivity of modern websites and applications, connects the HTML document with programming logic generating richer user experiences and vigorous sites.

Pic by Alexandre Bringer from Pexels

To give you an idea of what you can do, here are some uses you could make of a Javascript document:

Search for an HTML element and change some properties such as color, position, size, content, etc.
Listen when a button is clicked, when a key is pressed, or when there is a scroll (Use the mouse wheel) and do something.
Store unique information about a user and generate it on the fly in the future (Write HTML dynamically).

At this point you have a website with much more potential, you can transmit information through written and multimedia content, you can do it aesthetically and attractively, and finally, you can add interactivity so that the experience goes beyond just reading a magazine or a digital newspaper.

Here are some of the free resources with which you can learn Javascript:

Javascript Basics - Mozilla Developer Network
Learn Javascript Online
Eloquent Javascript
Javascript 30 - Wes Bos

Choose a framework

Some of the most valuable aspects, from my perspective, of the tech industry, are the ecosystem and communities. You'll find people improving tools, helping developers stuck in their code, or perhaps contributing to learning communities like meetups, blogs, or vlogs.

Let's talk about working tools (web frameworks). You may have heard the saying "don't reinvent the wheel", in web development, the wheel has evolved to solve the most common problems when creating websites and web applications. A web framework is an abstraction to solve common issues in a managed/guided way.

Pic by Roman Odintsov from Pexels

HTML, CSS, and Javascript are still valid, you can make an amazing site with just those three ingredients. Frameworks just change the paradigm in which the three ingredients are combined.

I won't give my opinion about any of them to avoid bias, but here is a list of the most used frameworks in the market (in that order). It's up to you to choose the one you like the most, practice it with personal projects, and finally get your first job in technology 💪.

React

Official Docs: https://reactjs.org/docs/getting-started.html

Free Courses:

React Course - FreeCode Camp
React Crash Course - Traversy Media
React for Beginners - Dave Gray

Vue

Official Docs: https://vuejs.org/guide/introduction.html

Free Courses:

Vue Course - FreeCode Camp
The best way to learn Vue - Vue Mastery
Vue JS Crash Course - Traversy Media

Svelte

Official Docs: https://svelte.dev/docs

Free Courses:

Svelte Course - FreeCode Camp
Svelte Crash Course - Traversy Media
Svelte Crash Course - Evan Does Tech

Don’t stop learning!

Technology moves fast, you've noticed it with the speed at which phones, appliances or applications evolve or deprecate, giving way to new and innovative solutions. The same happens with web development. New functionalities, libraries, frameworks, or knowledge that you have not acquired starts to appear in your list of priorities. It is up to you to prioritize what is most important.

You don't need to learn everything. What you need is to be current in the market. HTML, CSS, and Javascript are the three fundamental pillars; it is crucial to master them. Later it is up to you to identify additional tools that will get you closer to your ideal job and organize your time to learn how to use them.

Pic by RF._.studio from Pexels

Now what?

It is the end of the article but the beginning of a new adventure. Now that you know what it is to be a web developer and understand what it takes to be one, it's time for you to believe it and visualize yourself achieving success.

Invest your time and money (if possible) in activities that will help you become a better developer.
Create your notebook with all the concepts you have learned.
Create personal projects and present them as your portfolio.
Participate in digital communities such as Dev.to or Hashnode.com.
Find a mentor to help you improve your skills.
Resist frustration and start over if necessary.

I want to thank you for following this guide, I hope it positively impacts your career, and you can fulfill the purpose of being a developer. Let me know how you liked it and share it with someone who may find it helpful.

See you next 👋.

Understanding Rendering in React ♻ ⚛️

Mateo Garcia — Sun, 31 Jan 2021 14:34:20 +0000

Hey there! 👋🏼

I'm Mateo Garcia, I co-organize a community in Medellin, Colombia called React Medellin. This year I started a series of posts called 'Coding with Mateo'; My first post was about 6 ways to write a React component.

Today I want to share with you what I have researched for a couple of weeks about how rendering works in React. To begin with, I will say that the concept of rendering in React is a little different from how we know it. Let's find out why.

1.Introduction
2.VirtualDOM
3.Render
4.Reconciliation
5.Commit
6.An example

Introduction

You are probably here because you have worked with React, interacted with their APIs, changed the state of your components, and seen the magic happen. However, it is sometimes useful to go into a little more detail about how React does what it does. Performance problems can appear when your React application is continuously re-rendering, the application has scaled considerably and, the components are complex and expensive to represent. That's why Understanding rendering in React is something that all of us who use this library should understand.

To understand why React is so fast it is important to know these four concepts:

Virtual DOM.
Render.
Reconciliation.
Commit.

Let's get started

VirtualDOM

The Virtual DOM was a strategy that appeared to solve the modifications or mutations that the DOM suffers when using a web or mobile application. Rendering the entire document tree is too costly as applications become more complex; by mutations, we can understand any change that the DOM can undergo: an insertion/modification/deletion of an element or its properties.

Thus, the Virtual DOM came to represent the DOM tree in memory. Perform calculations using the state and props and finally decide which elements of the actual DOM (the browser one, I mean haha) should be mutated. From the official React website:

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

Initially, I said that the concept we normally know as rendering is different in React, I personally considered rendering as the procedure of synchronizing changes in the DOM. React synchronizes the changes in the DOM through three steps.

Render

Rendering is a process that is triggered by a change of state in some component of your application, when a state change occurs React:

It will collect from the root of your App all the components that requested a re-render because their state or their props changed.
It will invoke these components
1. If you use function components it will invoke the function itself, something like Header(props).
2. If you use class components it will invoke YourComponent.render().

Even when the process's name is rendering, at this point, the DOM has not been modified or altered, which could be a little tricky if you think as I did, about the meaning of render.

Since we normally use JSX, the code will be transformed to React.createElement(...). The output of the createElement will describe how the application should look like in the next version of the render through the next stage called:

Reconciliation

Once the re-rendering has happened, React has the context of two versions of the React.createElement output, the version executed before the state change occurred, and the version executed after the state has changed.

At this point two objects are describing the UI, React through a heuristic algorithm of order O(n^3) will be able to determine which elements need to be represented again.

Among technical details the React team tells us some aspects about how React identifies which elements were affected:

Elements that changed type must be recreated.
Changes within the attributes of an element are replaced, without unmounting the element.
Upgrades within the element's children recreate all children
Updates within child elements that use key as attributes are compared and only new items are represented.

Commit

After React calculated all the changes that should be made in the application tree, react-dom appears for the browser and react-native for the mobile platforms, which make the modifications to the browser or mobile app API (finally! 🥳). Synchronously React will clean up the past layout effects, run the new layout effects, then the browser will paint the DOM, after that, React will clean up the past effects and mount the new ones; when I talk about effects I refer to the lifecycles method such as useLayoutEffect and useEffect.

To explain the lifecycles method part a little bit more, I bring to you this wonderful graph that Donavon West and his contributors created. This is the project repo, check it out!

Before moving on to the example, it is important to understand that under normal conditions, if a component calls render, it will automatically do so for all its children. However it is possible to prevent certain components from being re-rendered under certain special cases, I have in my plans to talk about it, however, you can read about React.PureComponent, React.memo, React.useMemo, and React.useCallback.

Example

Consider the following example.

Here's the code



import * as React from "react";
import { useRenderTimes } from '../../utils';

function getRandomHEX() {
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

function Header() {
  const [color, setColor] = React.useState("#111");
  const count = useRenderTimes();
  return (
    <header style={{ backgroundColor: color }}>
      <p>Header component has re-rendered {count} times</p>
      <button onClick={() => setColor(getRandomHEX())}>Click</button>
    </header>
  );
}

function Footer() {
  const count = useRenderTimes();
  return (
    <footer>
      <p>Footer component has re-rendered {count} times</p>
    </footer>
  );
}

function App() {
  const count = useRenderTimes();
  return (
    <>
      <Header />
      <main>
        <p>Hey, nice to see you again 👋🏼</p>
        <p>The App component has re-rendered {count} times</p>
      </main>
      <Footer />
    </>
  );
}

export { App };
}

useRenderTimes is a hook that will allow us to accumulate the number of times a component is re-rendered. I saw it in a post by Kent C Dodds, so thanks!



import * as React from 'react';

function useRenderTimes() {
  const renderRef = React.useRef(0);

  React.useEffect(() => {
    renderRef.current = renderRef.current + 1;
  });

  return renderRef.current;
}

export { useRenderTimes };

The <Header /> component has its own state, which will be changing once we start pressing the button. Let's take a look

What just happened here is:

An event in the <Header /> component triggered a state change. A render was scheduled.
VirtualDOM started analyzing which components were marked as needing to be re-rendered. Only <Header /> needed it.
Through the reconciliation step, it was identified that the style of the <header></header> was changing.
Dispatched a commit to DOM.
Boom, we see the change of the background color.

Final thoughts

Although rendering in React is a process that can become complex, we must recognize the excellent work done by the entire React Team to improve the day to day experience in web development. Knowing the deeper parts of a tool can be useful for people who are just starting to discover it, as well as for people who have been using it for a long time and want to understand what was going on behind the scenes.

I want to thank the experts who continually strive to share all the knowledge in the most understandable way possible, some of them are Mark Erikson and Kent C Dodds. I leave you the link to their blogs. Each article is a gold mine and needs to be recognized.

If you found this post useful and would like to see more content, you could react to this post, which would make me very happy. If you have any comments or corrections that could improve this post, I would be glad to receive them. Thank you for your time 👋🏼 💙.

6 ways to write a React component (TS Included)

Mateo Garcia — Sun, 03 Jan 2021 16:44:21 +0000

Hello everyone, my name is Mateo and like many of you, I have set some goals now that a new year has begun. Sharing, documenting, and applying my knowledge are some of them so I have decided to open this space called Coding with Mateo.

The first post I will write is a compilation of different ways you can write a React component. Additionally, I will leave its version in Typescript in case it is useful to clarify how to annotate the functions in its different presentations, let's start.

React has gradually become the paradigm/technology we think of when it comes to frontend development. Watch some videos, buy some Udemy courses, make your first task list, finally master the main concepts. However, the diversity of syntax provided by Javascript makes that at some point we don't understand why some people write components one way and others another way.

It is important to remember that:

A React component is a function that thanks to the composition can contain internal functions, including new components.
Javascript functions are objects with the difference that they can be executed through parentheses.
Even if you are still maintaining/writing class components, those components are interpreted, transposed, and executed as ES5 functions since those classes are only syntactic sugar of recent EcmaScript features.

Whether you are working on a project by yourself or in a team, defining a syntax to declare your utility functions and React components can help to simplify the fatigue caused by the rapid growth of the project structure.

Below, I show you different ways to write a React component using a button as an example.

1.Using a regular function.



   // Button.jsx
   function Button (props) {
      return <button>{props.children}</button>
   }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   function Button (props: ButtonProps) {
      return <button>{props.children}</button>
   }

2.Using a function expression.



   // Button.jsx
   const Button = function (props) {
      return <button>{props.children}</button>
   }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   const Button = function (props: ButtonProps) {
      return <button>{props.children}</button>
   }

3.Using an arrow function with const.



   // Button.jsx
   const Button = (props) => {
      return <button>{props.children}</button>
   }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   const Button = (props: ButtonProps) => {
      return <button>{props.children}</button>
   }

4.Using an arrow function with let.



   // Button.jsx
   let Button = (props) => {
       return <button>{props.children}</button>
   }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   let Button = (props: ButtonProps) => {
       return <button>{props.children}</button>
   }

5.Using an explicit return



   // Button.jsx
   let Button = (props) => <button>{props.children}</button>
   // or
   const Button = (props) => <button>{props.children}</button>

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   let Button = (props: ButtonProps) => <button>{props.children}</button>

6.Using a class.



    // Button.jsx
    class Button extends React.Component {
      render () {
         return <button>{this.props.children}</button>
      }  
    }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   class Button extends React.Component<ButtonProps> {
      render() {
         return <button>{this.props.children}</button>;
      }
   }

Finally, I must say that, all the ways of writing them work well. There is no one better than another, feel free to use the one you like best.

However, I would like to clarify that:

The class components are being progressively deprecated.
Declaring components with a let can be useful when performing conditional rendering based on the props of a parent component.



   function ThisOrThat (props) {
      /* 
        Maybe some difficult logic.     
        Of course, that code does not smell good, however, it's 
        important to know that's possible to do this.
      */
      let renderedComponent = getComplexComponent(props); // 
      if (!renderedComponent) {
         renderedComponent = <FallbackComponent />
      }
      return <section>{renderedComponent}</section>
   }

I would love to know your opinion and what topics you would like to see in my blog posts. Also if you can react to this blog that would make me very happy.

Thank you very much and happy new year 🎉🥳

Forem: Mateo Garcia

¿Qué demonios es desarrollo web? 🇪🇸 🤷‍♀️🤷‍♂️

Hola a todos 👋

Cómo sacarle provecho a este artículo

Tabla de Contenido

Los beneficios del desarrollador

¿Qué significa ser desarrollador?

¿Qué significa ser desarrollador web?

Quiero ser desarrollador web!

Conceptos Fundamentales

Dominio de la computadora

Editor de código

HTML

CSS

Javascript

Escoge un framework

React

Vue

Svelte

No pares de aprender

Y ahora qué?

What the heck is web development? 🇺🇸 🤷‍♀️🤷‍♂️

Hi everyone 👋

How to take advantage of this article

Table of Contents

The benefits of the programmer

What does it mean to be a developer?

What does it mean to be a web developer?

I want to be a web developer!

Fundamental Concepts

Computer Proficiency

Code Editor

HTML

CSS

Javascript

Choose a framework

React

Vue

Svelte

Don’t stop learning!

Now what?

Understanding Rendering in React ♻ ⚛️

Table of Contents

Introduction

VirtualDOM

Render

Reconciliation

Commit

Example

Final thoughts

6 ways to write a React component (TS Included)