Forem: Manu Castrillon

Lessons I learned as a GitHub Campus Expert

Manu Castrillon — Tue, 21 Feb 2023 23:09:50 +0000

More than a year ago, I finished college. With all the challenges and opportunities that this accomplishment means to my life, this also means that now I’ll be transitioning from GitHub Campus Expert to GitHub Campus Expert Alumni.

My time as a student wouldn’t have been the same without the communities' impact on my career. Thanks to the tech communities, I’ve had the opportunity to live unique experiences, travel to different countries, give talks at local and international events, meet people I deeply admire, and challenge myself numerous times; As a late closure of this stage of my life, I want to share with you some of the most memorable moments that I’ve had during this road and the lessons that I learned. Hopefully, they can also help you on your road.

I joined a tech community for the first time (Pioneras Dev 🧡) in 2016 because a friend from University (Cami G 👩‍💻) invited me. I immediately felt so engaged that I attended a second and a third time, and then I started helping with small staffing tasks like helping with the snacks, organizing chairs, and the setup for the speaker. I gave my first talk and progressively acquired more responsibilities until becoming part of the organizing team, and then even created a community and organized events.

This process helped me to learn not only about organizing tech events but also a more significant lesson that I apply in all my projects:

✨ START SMALL

Sometimes we get frustrated because we want to run big events and speak at huge conferences from the beginning, but starting with baby steps helps us build the confidence and skills needed to do it on a bigger stage.

This also helped me when I was building my community at college; recruiting members for the organizing team is challenging. Still, when we start delegating small tasks to different people, they can gain the confidence to become leaders later.

Two years later, I won a scholarship to participate in JSConf Europe in Germany; I was thrilled to have this opportunity, but at the same time, I was TERRIFIED because it was going to be my first international trip (I’m from Colombia); I was traveling alone, I don’t speak German, and I didn’t feel that my English was good enough to survive in a different country. Even with all the insecurities I had, I made this trip. It was a wonderful experience, and that’s when I learned that I could not let fear stop me.

✨ DON’T LET FEAR STOP YOU

If you feel afraid of doing something, just do it. In the worst scenario, you are just going to learn how not to do something.

After returning from this event, I was so inspired that I decided to create a tech community at college to discuss web technologies. We didn’t do it right from scratch, made many mistakes, and needed to re-invent the community and iterate over what we were not doing right. Eventually, the work I was doing with this community allowed me to become a GitHub Campus Expert; it’s not possible to predict the future and the opportunities you are going to have as a consequence of the things you are building today; you should just do one thing at the time. And as we’ve probably heard a lot of times:

✨ PROGRESS, NOT PERFECTION

We often get stuck in certain areas just because we are afraid of not doing it right, and in the end, we make more progress doing one little thing every day than waiting a year to do a big one. If you want to create a course, organize an event, or speak in a meetup, just go for it, start one step at a time, even if it’s not perfect, all the lessons you learn will help you improve it next time.

And to close up, one of the biggest lessons that I’ve had, I learned even before starting in the tech industry, but I realized it years later:

✨ NEVER UNDERESTIMATE YOUR KNOWLEDGE

In high school, we had a class about programming where we learned how to do basic HTML, not CSS, JS, or any kind of algorithms, just HTML. You don’t need to be a web expert to explain how to add a title and an image on a website, but this teacher completely changed my life because he opened my world to a career that I hadn’t even considered, and I feel I couldn’t have made a better choice for my career.

So don’t let the impostor syndrome underestimate everything you know; you don’t need to wait until feeling like an expert to share what you already know because some people don’t have that knowledge, and you can have a massive impact on their life by sharing it.

And remember

✨ YOU ARE NOT ALONE

There are companies, communities, and mentors willing to give you a hand. Programs like GitHub Campus Experts are great spaces to develop the necessary skills to become a better leader and exchange experiences.

I definitely recommend GCE after being part of it, but there are different ambassador programs for students, and you can join the one that better suits your goals.

How to become a GitHub Campus Expert and my experience in the program

Manu Castrillon — Wed, 06 May 2020 17:16:45 +0000

What is GitHub Campus Experts?

GitHub Campus Experts is a GitHub Education initiative focused on providing leadership and community skills to student leaders on their campuses. A GCE (GitHub Campus Expert) is a student with the ability to improve the technical skills of its community.

📌Note: A GitHub Campus Expert is not a Git or GitHub expert or GitHub ambassador, that's a common misconception.

Responsibilities

Our responsibility as GitHub Campus Experts is to build a strong technical community on our campuses. This can be achieved by running events, hackathons, meetings, workshops, study groups, or any other events where the students can improve their technical skills.

Benefits

GitHub is always providing tools and content that can help us build a better community and become better leaders, that’s why we constantly have webinars and trainings to improve our technical and soft skills, led by people from the industry but also by Campus Experts (yes, we also share the knowledge amongst us). Another important part of the GCE journey is the events, where GitHub supports us with swag and budget, the devs are always motivated with cool swag and delicious food 😅 . We also learn about how to run good events by attending even bigger ones, for instance, we have the opportunity to attend the GitHub's global events such are GitHub Satellite and GitHub Universe.

How to become a GCE

Now, I want to tell you a bit about my process of becoming a GCE and my experience through it ✨.

Requirements

To become a GCE you need to fulfill three requirements:

To be studying at the university (I'm currently studying Software Engineering at Universidad de Antioquia).
To be passionate about community building and technology (I'll tell you later about my campus community).
To be at least 1 year away from your graduation.

Application

The first step is the online application. If you have the 3 requirements, you can fill the online application on GitHub's Education website. in this stage, you will be asked about some basic info related to your community and your motivation to be a GCE.

Online training

The second stage is the online training, on your email, you will receive an invitation to join a GitHub repository where you will find up to 7 different training modules focused mostly on soft skills and questions about your community, after completing the training someone from the GitHub Staff will check your solutions and give advice if you have something to improve, this process normally takes from 2-3 revision before your training is ready to be merged. In my case, those rounds of review took around two weeks each, and the whole training process around 3 months (Right now, they are taking around 6 months).

📌Note: Take into account that a few months can pass between the application and the online training, due to the high number of applications it can take a while, so, be patient if you don't receive a quick answer.

Videochat

The third and last stage is a zoom video call with the GCE program manager, this call is for you two to meet and to get to know more about you and your community. It's not an interview, so don't be nervous about tricky questions about Git 😅.

And that's it, you are now ready to be a GitHub Campus Expert 🥳

Now, I want to tell you more about my campus community and my experience being part of the program

My campus community: Codex

Three years ago, after participating in some local tech communities in the city and experiencing the impact it had in our careers, a friend and I decided to bring those kinds of spaces to our university, where students can share what they know, and improve both their tech skills and soft skills. At the beginning of this journey, the biggest challenge was to motivate the students to participate as speakers (sometimes we have the false belief that we need to be experts in something to talk about it). My friend and I ended up being the speakers for almost all of the meetings during the first year 🤓. Later we obtained support from local companies, and really talented people from the industry came to share their knowledge and to inspire the students. Now, 3 years later, about 1 in every 5 software engineering students in the university is a part of this group.

"Thanks to Codex I have known the wide experience of people from their personal and professional point of view, also some techniques that have helped me in programming, as well as different languages, workshops, exercises, challenges that make me love the infinite possibilities of the systems. Thanks Codex."
Danny "Pacho" Hernandez

"I like Codex because it's a space where you can learn and share with your friends about everything about technology💻 , soft skills💬, Interviews👨🏻‍💻, and more. In codex we can communicate freely in a friendly environment☕. For me, the best part about it is everyone tries to improve their skills using what we learn during the meeting, and if you want to be a speaker the organizing team is always there to give you a hand! 🆘, to sum it up Codex is great!
PST: The food is also great"
Santiago Sanchez

My GCE journey

I became a 🚩GitHub Campus Expert on march of 2019, and it has definitely been my best experience as a student. I've met a lot of smart and talented students from all continents, cultures, and tech backgrounds. Seeing what they do inspires me every day to keep moving forward on the tech community 💪.

Carlo is really good doing visual thinking, and summarizing tech events and conferences with drawings 🎨. His passion, has become a life project (with a really nice story behind it) called Visual Partnership. Juanpa runs an annual huge hackathon (~500 people) at his university 🧑‍💻. Fer rocks in all hackathons where she participates with her team "Bravers" 🏆, she also won the "Premio Estatal de la Juventud" (State youth award) in her city for the "academy and technology" category. Those are only a few examples from the amazing people from the GCE community. In total, we are ~200 around the globe, each one with an amazing story and different talents.

During this time, I've run and supported different activities on my community, most of them focused on Women in Tech 👩🏻‍💻 with Pioneras Developers, Vue Vixens and She Codex Angular.

At my university, besides our regular meetings, we also have had workshops, we've learned about open source and how to contribute, online activities during quarantine, and of course... about git and GitHub.

We can also support each others events, like Rodrigo, who came from 🇲🇽Mexico to give a talk at Campus Party Colombia last year.

I've also had the opportunity to participate in two GitHub's conferences, the first one, was GitHub Satellite, in Berlin, where I got to meet other campus experts for the first time. The day before the conference, we had a meetup where we shared different talks and had time to just hang out.

The second one was GitHub Universe, in San Francisco, where we attended the conference but we also had the chance to share some time on outings at night, after the event.

The day before the conference, we had the 'Diversity and inclusion' panel. There, I met the 'Octogatos' (Latinxs employes at GitHub), they invited me to the GitHub office, and we talked about Latinxs in the tech community.

The day after the conference, we had the 'GitHub's Education Day' at the GitHub office, where we shared talks and shared time with some people from the GitHub Education Staff.

After this amazing experience I returned to my country, inspired and with new ideas, like running a conference about Git, which next year will be a reality.

This year, due to the pandemic situation GitHub Satellite was virtual, and we had an online watching party, where we watched the event together, and also had the opportunity to talk with some speakers and people from the GitHub Staff who joined the video call.

Thanks to the GCE program, I also had the opportunity to attend Grace Hopper Conference, in Orlando - Florida, the biggest gathering of Women In Tech around the globe (~20000 people), during 3 days we attend talks, ranging from career development to quantum computing, events, dinners, and parties hosted by the event sponsors, and met a lot of female inspiring leaders from all the world 🌎.

At this time, I'm the only GCE in 🇨🇴Colombia, and one of my goals is to empower more young leaders. I hope this motivates you and I invite you to build a community, in and out of your campus.

Hit me up if you have any questions about the program, or if I can help you build your community. ✨

Reconocimiento de imágenes en la web utilizando TensorFlow.js

Manu Castrillon — Fri, 01 May 2020 00:36:35 +0000

De las primeras cosas que descubrí al empezar en el mundo del ML (Machine Learning) fue que además de la matemática, estadística y teoría que abarca esta área, también debo aprender un nuevo lenguaje de programación (Python) y sentí realmente abrumador toda esta cantidad de información que debía absorber. Investigando un poco mas, descubrí que en JavaScript hay herramientas con las que se puede lograr esto y hacer más amigable mi entrada al mundo del ML, y decidí explorar este camino, ya que JavaScript es un lenguaje que conozco, y así puedo enfocarme más en las bases teóricas (que es mi prioridad en este momento) y dejar en segundo plano aprender un nuevo lenguaje para aplicarlas.

Spoiler… resulta que hacer ML con JavaScript tiene más ventajas a parte de hacerme la vida más fácil, pero hablaremos de eso mas adelante. 🤫

En este post quiero mostrarles como con JavaScript, podemos reconocer e identificar imágenes en nuestro navegador haciendo uso de TensorFlow.js, así como las bases teóricas necesarias para lograrlo.

Para empezar, debemos hablar sobre el modelo computacional sobre el cual construiremos este proceso.

Redes neuronales

Son modelos computacionales que emulan el comportamiento del cerebro humano (o por lo menos, como se creía hasta hace unos años que este funcionaba, porque el cerebro humano hasta ahora sigue siendo todo un misterio) para lograr aprender a resolver problemas computacionales el cual, con neuronas conectadas entre sí, refuerzan sus conexiones para lograr aprender a través de su experiencia, experiencia que se adquiere con los datos que se le entrega a la red para realizar el entrenamiento.

Una red neuronal está conformada de la siguiente manera:

Neurona

Son la unidad básica de construcción de una red neuronal.
La neurona es una unidad que dadas ciertas entradas retorna una salida. Por ejemplo: si queremos saber si ganamos un curso, le podemos enviar a una neurona las calificaciones y si la nota final es mayor que 3, retorna 1 (ganamos la materia), de lo contrario, retorna 0.

Capa

Una capa es un conjunto de neuronas, cada capa es capaz de reconocer patrones simples.

Red

La red neuronal es la unión de varias capas. Que trabajando en conjunto, son capaces reconocer patrones complejos.

Ahora que sabemos cómo esta construida una Red Neuronal, podemos hablar del tipo de redes neuronales que nos sirven para abordar un problema de reconocimiento de imágenes.

Redes neuronales convolucionales

Hoy trabajaremos con las redes neuronales que sirven para el reconocimiento y clasificación de imágenes, este tipo de red neuronal es llamado “Red neuronal convolucional” (CNN por sus siglas en inglés) y lo que tiene de especial este tipo de red es que asume que las entradas van a ser arreglos de grandes dimensiones, y esto le permite optimizar sus cálculos.

Por qué es esto necesario?

Las imágenes son matrices de pixeles de colores representados en los canales RGB (por lo general, también podrían ser Grayscale, HSV, CMYK, entre otros) y cada uno de estos valores en los pixeles serán los parámetros de entrada para la red (número entre 0 y 255 para el caso de la representación RGB), así, si tenemos una imagen por ejemplo de 32px*32px, tendríamos un total de 3072 (32*32*3) parámetros, que es un número muy grande para una imagen tan pequeña, ahora imaginen procesar una imagen en alta definición (2048*1536*3) tendríamos una imagen de 9'437.814 parámetros por cada una de las imágenes, y esto, computacionalmente es un número muy difícil de manejar, entonces el objetivo de las CNN es reducir ese número de parámetros a través de la aplicación de filtros que extraigan características relevantes de la imagen, por ejemplo, pueden haber filtros encargados de extraer bordes, sombras, esquinas…etc

Y se acuerdan que ya habíamos hablado de que las redes neuronales están formadas por capas? Pues para el caso de las redes neuronales convolucionales, las capas que la conforman pueden ser de 3 tipos diferentes:

Capa de convolución

Son las capas que le dan el nombre a la red, y se lo merecen ya que son las que realizan el trabajo computacional más pesado, están directamente conectadas con las entradas y a través de una operación llamada convolución genera mapas de activación para reconocer la imagen.

Estas capas también cuentan con una función de activación para reducir la linearidad de las imágenes (transición entre pixeles, bordes, colores…) y de esta manera aumentar su capacidad de generalización.

Capas de pooling

Estas capas realizan un submuestreo de las entradas, por lo cual, su misión es disminuir la cantidad de parámetros disminuyendo así el volumen de la capa.

Capas completamente conectadas

Son capas en las que cada neurona esta conectada con todas las salidas de la capa anterior.

Este es en realidad un acercamiento muy vago al funcionamiento de una red neuronal convolucional, ya que explicar toda la magia que en realidad sucede en estas redes tomaría incluso más de un post 😅, pero es lo necesario para entender lo que veremos a continuación.

Y ahora que sabemos cómo reconocer una imagen (en la teoría), podemos conocer la herramienta que nos va a permitir hacerlo realidad haciendo uso de JavaScript.

TensorFlow

TensorFlow es uno de las frameworks más usados para Machine Learning, donde la estructura básica de datos es el Tensor (un tensor es una generalización para hablar de vectores y matrices), y se especializa en realizar operaciones matemáticas con ellos.

Una aplicación de Machine Learning es el resultado de calcular de forma repetida operaciones matemáticas complejas, y en TensorFlow estas operaciones son representadas utilizando un grafo llamado “Data Flow Graph” donde cada nodo del grafo representa una operación matemática y las esquinas representan tensores a los que le serán aplicadas estas operaciones.

Esto nos trae ventajas en cuanto a:

Paralelismo: Utilizando relaciones de dependencias entre las operaciones, es más fácil para el sistema identificar aquellas que pueden ser ejecutadas en forma paralela.
Ejecución distribuida: Ya que las esquinas contienen lo valores explícitos para el flujo de trabajo, TensorFlow tiene la capacidad de dividir el programa entre múltiples dispositivos (CPUs, GPUs, TPUs) que pueden estar ligados a diferentes máquinas. TensorFlow se encarga también de agregar los canales de comunicación necesarios entre ellos.
Compilación: El compilador de TensorFlow, puede utilizar información del grafo para generar código más rápido.
Portabilidad: La representación de data flow graph es independiente del lenguaje, por lo cual, se puede construir por ejemplo en Python y ser guardado para abrirlo en otro lenguaje como C++.

TensorFlow.js

Y como resulta que JavaScript es la lengua madre de la internet, pues no se podía quedar por fuera de la revolución del Machine Learning, y si, como ya se lo podían imaginar, también se puede desarrollar TensorFlow en JavaScript.

Por qué utilizar TensorFlow en el navegador?

Privacidad de datos: Ya que toda la información se va a manejar a través del navegador, la información no va a ser en ningún momento almacenada en servidores, esto nos ayuda mucho cuando nuestra aplicación hace uso de datos sensibles.
Aplicaciones interactivas de baja latencia: Debido a que no es necesario un canal de comunicación con el servidor, el tiempo de respuesta es menor.
No es necesario instalar drivers adicionales
Interactividad con el usuario
Computación en el dipositivo

API

Layers API: Ofrece los diferentes tipos de capas con los cuales podemos construir nuestra red.
Ops API: Ofrece las diferentes operaciones que podemos aplicar a los tensores.

TensorFlow.js ofrece 2 API, una para correr únicamente en el navegador y otra que se puede ejecutar desde Node.js:

Browser: Haciendo uso de WebGL, TensorFlow puede acceder a la GPU del computador y utilizar su capacidad de computo para realizar los cálculos necesarios.
Server: A través de Node.js se puede aprovechar la capacidad de cómputo de una CPU, GPU o TPU para realizar los cálculos.

Manos a la obra

Ahora, te voy a presentar 3 formas de implementar esto en el navegador con TensorFlow.js

CNN from scratch

La primer forma es haciendo uso del API ‘Layers’ que ofrece TensorFlow.js con el cual puedes construir tu red neuronal desde cero, en este caso haremos nuestro ejemplo haciendo uso del dataset ‘Iris’ cuyo objetivo es reconocer el tipo de planta de una de las tres clases de plantas ‘Iris’ (setosa, versicolor o virginica) con base en el largo y grosor de sus pétalos.

Se importan las bibliotecas necesarias:



const tf = require('@tensorflow/tfjs');
const irisTraining = require('./data/training.json');
const irisTesting = require('./data/testing.json');

Los datos se tranforman en tensores:



const trainingData = tf.tensor2d(irisTraining.map(item=> [
  item.sepal_length, item.sepal_width, item.petal_length, item.petal_width
]),[130,4]);

const testingData = tf.tensor2d(irisTesting.map(item=> [
  item.sepal_length, item.sepal_width, item.petal_length, item.petal_width
]),[14,4]);

const outputData = tf.tensor2d(irisTraining.map(item => [
  item.species === 'setosa' ? 1 : 0,
  item.species === 'virginica' ? 1 : 0,
  item.species === 'versicolor' ? 1 : 0
]), [130,3]);

Se construye la red neuronal haciendo uso del API ‘Layers’ de TensorFlow.js:



const model = tf.sequential();

model.add(tf.layers.dense({
  inputShape: [4],
  activation: 'sigmoid',
  units: 10
}));

model.add(tf.layers.dense({
  inputShape: [10],
  activation: 'softmax',
  units: 3
}));

model.compile({
  loss: 'categoricalCrossentropy',
  optimizer: tf.train.adam()
});

Se realiza el entrenamiento del modelo:



async function train_data(){
  for(let i=0;i<15;i++){
     const res = await model.fit(trainingData,
                 outputData,{epochs: 40});
     console.log(res.history.loss[0]);
  }
}

async function main() {
  let train = await train_data();
  model.predict(testingData).print();
}

main();

Al ejecutar el script, obtenemos como resultado un tensor, el cual indica las probabilidades que cada elemento tiene de pertenecer a una clase

Modelos pre-entrenados

TesnsorFlow.js ofrece una serie de modelos pre-entrenados listos para realizar predicciones o ser usados en un proceso de transfer learning.

PoseNet: Estimación de poses del cuerpo humano.
BodyPix: Segmentación de partes del cuerpo humano.
Toxicity: Calificación del impacto que puede causar un comentario.
Universal Sentence encoder: Modelo para realizar procesamiento de lenguaje natural.
Coco SSD: Detección de objetos.
Speech commands: Clasifica audios de un segundo dentro de una serie de palabras definidas.
KNN Classifier: Algoritmo de K vecinos mas cercanos para realizar transfer learning.
MobileNet: Clasificación de imagenes con las etiquetas de ImageNet.

Para este ejemplo, utilizaremos KNN Classifier y MobileNet para realizar un entrenamiento en el navegador.



const classifier = knnClassifier.create();

async function app() {
  net = await mobilenet.load();
  await setupWebcam();

  document.getElementById('class-1').addEventListener('click', () => addExample(1));
  document.getElementById('class-2').addEventListener('click', () => addExample(2));
  document.getElementById('class-3').addEventListener('click', () => addExample(3));

  const addExample = classId => {
    const activation = net.infer(videoElement, 'conv_preds');
    classifier.addExample(activation, classId);
  }
}

A través de la cámara del dispositivo vamos a capturar imágenes, y cada que se presione un botón, se agregará una muestra de esa respectiva clase, con la cual se irá ajustando el modelo en tiempo real para realizar la predicción de esta misma.

Bibliotecas externas

La tercer forma que te quiero presentar es haciendo uso de alguna api o biblioteca externa, en este caso haremos uso de FaceAPI una biblioteca para reconocimiento facial.

Importación de la biblioteca:



<script defer src="face-api.min.js"></script>

Se cargan los modelos que vamos a utilizar:



Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
  faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
  faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
  faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL),
]).then(setupWebcam);

Se realiza la detección y se dibujan los resultados en un elemento canvas en el navegador:



function drawDetections(el) {
  const displaySize = faceapi.matchDimensions(canvas, videoElement, false);

  setInterval(async () => {
    const detections = await faceapi
                              .detectAllFaces(videoElement, new faceapi.TinyFaceDetectorOptions())
                              .withFaceLandmarks()
                              .withFaceExpressions();

    const resizedDetections = faceapi.resizeResults(detections, displaySize);

    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

    faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
    faceapi.draw.drawFaceLandmarks(canvas, detections);
    faceapi.draw.drawDetections(canvas, detections);
  }, 100);
}

Puedes encontrar el código de los ejemplos realizados en este repositorio de GitHub

Recursos:

Entendiendo la coerción en JavaScript

Manu Castrillon — Thu, 30 Apr 2020 22:43:10 +0000

JavaScript es un lenguaje extraño… En el podemos encontrar cosas como

console.log(1 == 1)      //true
// pero...
console.log([] == [])    //false
console.log([] == "")    //true

console.log(3 - "1")     //2
// pero...
console.log(3 + "1")     //"31"

console.log(NaN === NaN)              //false
console.log([1, 2, 3] + [4, 5, 6])    //"1,2,34,5,6"
console.log([] + {})                  //"[object Object]"
// y como olvidarnos de
console.log("b" + "a" + +"a" + "a")   // "baNaNa"

Pero… esto no es tan extraño como parece! No son bugs, ni detalles que dejaron pasar y tampoco nadie se quedó dormido sobre el teclado mientras escribía las especificaciones del lenguaje (eso espero 😅), todas estas cosas tienen sentido y suceden por algo llamado coerción.

En JavaScript, la coerción es una característica que fuerza a una variable de cierto tipo a tener el comportamiento de una diferente

Por ejemplo:

console.log("3" - 1)  //2

En este caso, el string "3" está siendo forzado a comportarse como un número para poder completar correctamente la operación matemática esperada.

🤔 Por qué necesitamos esto?

JavaScript es un lenguaje débilmente tipado, eso quiere decir, que no tienes que especificar el tipo de variables porque el lenguaje va a inferirlo de manera automática. Esto también quiere decir, que el tipo de la variable va a estar asociado con su valor.

Esto es también llamado “Duck typing”. Este nombre viene de un test utilizado en razonamiento inductivo atribuido a James Whitcomb Riley que dice “Si camina como un pato y grazna como un pato, entonces debe ser un pato”, a lo que el autor se refiere con esto, es que podemos identificar la naturaleza de un objeto solamente observando sus características, y esto es justo lo que hacen los lenguajes de programación que permiten tipados dinámicos, donde solo debemos preocuparnos por lo que la variable va a hacer y no por su tipo.

Pero esto no es tan bueno en todos los escenarios, ya que podemos terminar haciendo cosas extrañas…

var duck = true;
var peanuts = 10;
var sum = duck + peanuts  // true + 10... WHAT!? 🤯

Para evitar arrojar errores en estos casos, como muchos otros lenguajes lo harían, JavaScript establece a través de la coerción algunas reglas para manejar estos escenarios.

Operador de igualdad (==)

Este operador compara los valores que hay al lado izquierdo y derecho de el, cuando son del mismo tipo compara los valores y de ser iguales retorna true y de lo contrario false.

Cuando al utilizar este operador se tengan a ambos lados de la operación diferentes tipos de datos, el comportamiento será:

x	y	resultado
null	undefined	true
undefined	null	true
number	string	x == toNumber(y)
string	number	toNumber(x) == y
boolean	any	toNumber(x) == y
any	boolean	x == toNumber(y)
string, number, or symbol	Object	x == toPrimitive(y)
Object	string, number, or symbol	toPrimitive(x) == y
otros casos		false

Ejemplos:

1 == "1"              //true
1 == "one"            //false
true == 1             //true
false == "zero"       //false
"test" == {x:"test"}  //false

Puedes encontrar mas información en la especificación de ECMA

Operador de adición (+)

Al utilizar el operador de adición, si ambos lados de la operación son números, se realizará la operación matemática suma, de lo contrario, se concatenarán los valores de ambos lados como Strings.

Ejemplos:

1 + 1                       //2
1 + "1"                     //11
"hello" + " world"          //"hello world"
"It's " + true              //"It's true"
"pizza" + {cheese: "extra"} //"pizza [object Object]

Puedes encontrar mas información en la especificación de ECMA

Operador de sustracción (-)

Este operador siempre realizará la operación matemática restar, en el caso de que ambos lados no sean números, los strings y booleans son convertidos a números y se realiza la operación matemática, en otros casos el resultado será NaN (Not a Number).

Ejemplos:

3 - 2      //1
"3" - 2    //1
3 - true   //2
1 - {x:3}  //NaN
"fun" - 2  //NaN

Puedes encontrar mas información en la especificación de ECMA

Truthy y Falsy

Un valor truthy es aquel que evaluado en un contexto booleano da como resultado true, del mismo modo, un valor falsy es aquel que evaluado en un contexto booleano da como resultado false, en JavaScript todos los valores son true excepto:

false
0
""
''
null
undefined
NaN

Casos especiales: Objetos

En JavaScript también nos encontramos con esto:

[] + {}   //[object Object]
{} + []   //0

Probablemente despues de leer las reglas de coerción del operador de adición sigas sin entender porque sucede esto, y es porque este es un caso especial.

Primer caso: `[] + {}`

[] + {}
String([]) + String({}) //Ambos lados de la operación son      convertidos a string para ser concatenados
'' + '[object Object]'  //Se concatenan los resultados
'[object Object]'       //Valor resultante

Segundo caso: `{} + [] = 0`

En este caso, lo que sucede es que los brackets vacíos al inicio {} son interpretados como bloque de código vacío, por lo cual son ignorados por JS.

{} + []
+[]                   //JS ignora el lado izquierdo de la operación
Number([])            //El lado restante es convertido a número
0                     //Valor resultante

Conclusión

La coerción es una de las características mas curiosas de JavaScript y la considero de gran importancia para aprender ya que hay resultados que muchas veces no sabemos como explicar y podemos pasar mucho tiempo pensando que es un error en la lógica de nuestro código, cuando en realidad, es una característica del lenguaje.
Y finalmente… JavaScript no es tan raro después de todo ✨

Reto

Deja en los comentarios cuales de las siguientes lineas de código van a ser mostradas (no se vale utilizar la consola 😅).

if('3' + 2 == 5) { console.log("Pizza"); }

if([]) { console.log("Cheese"); }

if( 4 + "1" == 5) { console.log("Spaghetti"); }

if(0) { console.log("Yogurt"); }

if(5 + true == 6) { console.log("Carrot"); }

if(!undefined) { console.log("Bunny"); }

if({} == {}) { console.log("Panda"); }

if(["3"] - 1 == 2) { console.log("Salt"); }

if('' == []) { console.log("Cookie"); }

Referencias:

React Hooks 101

Manu Castrillon — Thu, 30 Apr 2020 21:28:34 +0000

El pasado 25 de octubre durante React conf Dan Abramov y Sophie Alpert anunciaron una nueva propuesta para react: ‘React Hooks’. así como un RFC (Request for comments) para esta misma propuesta, con la cual el objetivo es que los desarrolladores de React después de leer la propuesta y experimentar con ella, brinden su retroalimentación.

¿Qué está mal con React?

La propuesta de React Hooks busca abordar 3 problemas que tiene React:

1. Reutilización de la lógica entre componentes

Para solucionar este problema, inicialmente se propusieron los mixins, que fueron deprecados en 2016 porque causaba más problemas de los que estaban resolviendo. En este momento, para solucionar este problema se utilizan utilizan 2 estrategias: ‘High order components’ que lo que hacen básicamente es tener un componente contenedor el cual contiene otros componentes, la función del componente contenedor es enviarle a los componentes que contiene el estado que necesitan para su renderización; la otra alternativa es ‘Render props’ que lo que permite es compartir información entre componentes enviando funciones como props.

Estas alternativas implican agregar mucho código a la aplicación e incluso modificar la estructura del proyecto y como consecuencia, también nos forman un ‘Wrapper Hell’ por la cantidad de componentes que toca anidar para lograr compartir la lógica que queremos.

2. Componentes gigantes

La lógica suele no estar distribuida coherentemente, en un mismo método del ciclo de vida podemos tener varias líneas de código de lógica que no tiene nada que ver una con la otra y la lógica que si está directamente relacionada, termina estando repartida entre diferentes métodos.

3. Uso de clases

Para aprender react debemos también aprender cómo funcionan las clases en Javascript (esto implica también el funcionamiento de this), lo cual le agrega más complejidad al proceso de aprendizaje. Y no solo es difícil para las personas... para las máquinas también es difícil aprender clases, porque cuando deben minificar el código no lo hacen de la mejor manera.

Otro problema a la hora de desarrollar es que no tenemos claro cuándo desarrollar function components (stateless) o class components (stateful), porque si desarrollamos un function component y en algún momento del desarrollo surge la necesidad de que tenga estado, lo debemos refactorizar totalmente para convertirlo en clase, y para evitarnos la fatiga… terminamos dejando todos nuestros componentes como clases.

¿Cómo lo solucionamos?

Este problema es causado porque la forma más simple que tiene React para manejar un componente que tenga estado es usando clases (y ya vimos que hacerlo de esta forma nos puede generar problemas en algunos casos).

Para solucionar estos problemas… llegan 🥁 Hooks 🎉

¿Que son los Hooks?

Los Hooks son funciones que permiten organizar la lógica en los componentes de forma aislada y ‘engancharlos’ al estado y ciclo de vida del componente. Estos, nos permiten utilizar todos los features de react y tener componentes con estado sin necesidad de crear clases.

React provee algunos Hooks, pero nosotros también podemos crear nuestros nuestros propios Hooks personalizados.

¿Cuales Hooks provee React?

Hooks básicos

useState: Retorna un valor con estado y una función para actualizarlo.

  const [newToDo, setNewToDo] = useState('');

  function updateNewToDo(e) {
    setNewToDo(e.target.value);
  }

useEffect: Recibe una función que va a ser ejecutada cada vez que hay cambios en el DOM.

  const [toDoList, setToDoList] = useState(['Eat healthy', 'Pet my dog']);

  useEffect(() =>{
    document.title = `${toDoList.length} tasks`;
  });

useContext: Recibe el objeto retornado por React.createContext y retorna el contexto actual.

  const context = useContext(Context);

Hooks adicionales

useReducer
useCallback
useMemo
useRef
useImperativeMethods
useMutationEffect
useLayoutEffect

Hooks personalizados

También podemos crear nuestros propios Hooks compartir su lógica entre componentes 🙌

  // function component
  export default function ToDoApp() {

    const [newToDo, setNewToDo] = useState('');
    const magicNumber = useMagicNumber(newToDo);
    ...
  }

  // custom hook
  function useMagicNumber(param) {
    const [number, setNumber] = useState();
    var date = new Date();
    var day = date.getDate();
    var month = date.getMonth()+1;

    useEffect(() => {
      setNumber(param.length * day + month / 12.34);
    });

    return number;
  }

Reglas de los Hooks 👮‍♂️

Para poder utilizar los Hooks hay que seguir un par de reglas:

Solo llama a los Hooks en el ‘Top Level’ del componente, no los llames en ciclos, condicionales, o funciones anidadas, esto asegura que los Hooks se van a llamar siempre en el mismo orden cuando la aplicación es renderizada. 🙅🏻‍♀️:

  import React, { useState } from 'react';

  export default function Search(id) {
    ...
    if(id > 1000) {
      const [superValue, setSuperValue] = useState(id);
    }
  }

Llama a los Hooks solo desde function components o custom Hooks 🙅🏻‍♀️:

  import React, { useState, Component } from 'react';

  class Search extend Component {
    ...
    const [superValue, setSuperValue] = useState(this.props.id);
  }

Al crear un custom hook, su nombre siempre debe iniciar con la palabra ‘use’ 🙅🏻‍♀️:

  import React, { useState, Component } from 'react';

  function myCustomHook(param) {
    ...
  }

Recomendación: Utilizar eslint-plugin-react-hooks un plugin para eslint que te obliga a seguir las reglas anteriormente mencionadas. Para el caso de la tercera regla, lo que hace el plugin es asumir que todas las funciones que inician con use son hooks.

¿Cuándo utilizar Hooks?

Las clases van a continuar existiendo en React y no hay planes de deprecarlas, ambos tipos de componentes pueden coexistir sin ningún problema en la misma aplicación. La recomendación es empezar a utilizar Hooks en todos nuestros nuevos componentes, no se recomienda reescribir los componentes antiguos ya que puede ser un poco confuso migrar la lógica, además, debemos tener en cuenta el hecho de que los Hooks aún se encuentran en versión alpha y podrían tener algunos cambios.

Hooks aún no cumple con todos los casos de uso que podría tener un componente de React ni tiene equivalentes para algunos métodos del ciclo de vida, sin embargo, ya están trabajando en esto y la visión es que a futuro los hooks puedan reemplazar todos los métodos del ciclo de vida. Para el caso de HOC y Render props, siguen siendo útiles para trabajar algunos casos de uso muy concretos, pero la mayoría de ellos ya es posible hacerlos con Hooks.

Para finalizar… Yo no tengo mucha experiencia desarrollando en React (apenas estoy aprendiendo) y siento que se me ha hecho sencillo aprenderlo utilizando Hooks, para quienes llevan más tiempo manejando React, no se que tan brusco será el cambio, pero personalmente me gusta el concepto de encapsular toda la lógica que esta relacionada porque considero que es lo más limpio a la hora de hacer código, haciéndola mas fácil de reutilizar y testear.

Me gustaría conocer su experiencia de cómo fue cambiar de class components a hooks.

Recursos:

Diversity and inclusion issues in Colombia… What are we doing? ✨

Manu Castrillon — Thu, 30 Apr 2020 00:59:18 +0000

When I was in high school, I used to play music. More specifically, the percussion instruments and those are instruments played mostly by men. During the four years that I was in bands and orchestras, I was the only girl in the percussion section. Later, in University, I decided to study Software Engineering, where the proportion of women and men is very similar to the one I used to see in my music lessons. This time I wasn’t the only girl studying that, but the women were fewer than men. Since I began university, I always have been considered myself very feminist and empowered, but there’s a comment that I used to say to my friends “It seems that I like boy things.” (🤦‍♀️) A few years later, I realized that that’s not true — that these things (and all things) are for everyone. But culturally, what can we do to make all things, for everyone?

So, let’s start by talking about diversity and inclusion. Diversity is to gather a lot of distinct people, for example for their nationalities, gender, sexual orientation, religion, the way to dress, to think, to get involved, etc. But, in my opinion, this word should always be balanced with the word ‘inclusion’. As a quote by Verna Myers says, “Diversity is being invited to the party; inclusion is being asked to dance.” So, bearing that in mind, diversity and inclusion is not just the gathering of diverse people, it is that all people are accepted and included. The real challenge is not to have a party, it’s to dance with everyone.

But… why is diversity important in the tech industry? 🤷‍♀️

The people who work in tech are constantly building solutions that could impact a lot of people, and all people are very different, so, if we have different people with diverse perspectives building a solution, we can create products with everyone in mind. If I don’t have an idea of your problems and context, it’s hard create a solution adjusted to your needs, we don’t have anything against white American men (that’s ridiculous) it’s just that to build a world for EVERYONE we need to listen to EVERYONE.

Nobody who is reading this will be surprised if I write that women are a minority in tech, or the fact that in many spaces people are working on efforts to promote diversity. But, would you believe me if I say that today I’ll tell you the solution to all diversity issues worldwide? Hmm…. Definitely Not… All countries and cultures are facing different challenges and difficulties, for instance, it’s not the same to talk about feminism in Canada or Afghanistan or to talk about homosexuality in France or Saudi Arabia where being gay can be punishable by the death penalty because it’s something considered immoral.

But I won’t write about these countries today. Today, I’ll tell you about Colombia, the country where I was born and where unfortunately the socioeconomic status of your family can almost determine your future, because the social gap is huge. In fact, according to the World Bank it’s the second country with the highest social gap in Latin America and the fourth in the world. If I had been born, for example, in the Guajira, the second poorest region in Colombia (according to the DANE’s 2017 white paper on poverty in Colombia) where the kids have so few opportunities that they are actually dying by malnutrition, the probabilities to be who I am (professionally), are so few. The big boundary that I have been identifying in my country for people to enter the tech industry is the lack of opportunities to access education. Only the people with enough money can pay for professional education. We have public universities and they are excellent, but the capacity is really limited. For example, in 2012 when I did the exam to be accepted at public university, I was competing with 1187 people and only 95 of us were admitted. If you go deeper, the people that have higher chances to do well on entrance exams are those who received a good basic education and these people tend to come from private high schools because public high schools are not so good. We have private universities too, but they are really expensive and families acquire huge debts to pay tuition. As a consequence, in Colombia, only 48% of young people (between 18 and 24 years old) go to university and it’s estimated that only 50% of these people will finish their studies.

Related to education, the Colombian tech communities are doing the following actions:

ColombiaDev 🇨🇴

We have a mostly self-managed tech online community, gathering on Slack more than 1300 Colombian developers ready to share their knowledge, and for almost any topic, you will find someone that will help you, from technical topics to job offers, languages and mental health. This Slack has a strict code of conduct, whose purpose is to provide a friendly, safe and welcoming environment for all, regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status, and religion (or lack thereof).

Inclusive Meetups

One of the first tech communities in Colombia was BogotaJS, founded in 2011. A year later,MedellinJS was created, followed by the creation of other communities such as Google Developer Group, React, Vue, Pioneras Dev, QuibdoJS, Angular Med, Codies, and Python among others. These are some actions that the inclusive meetups are doing to promote the inclusion:

All our meetups are free so they are accessible for a lot of people.
All our meetups have a strict code of conduct, most of them are using the ColombiaDev code of conduct.

We are also working on new challenges, for example, to reach the people that are living in rural areas. A special sample of effort and social change is QuibdoJS, who is reaching the most economically vulnerable region of the country. They giving to this community, where some people might not have their own computer, a new opportunity to find a professional career.

Exclusive Meetups

We are clear about the fact that we don’t want just diverse people, we want diverse people technically good and prepared to face the challenges in the industry, for this, the exclusive meetups are spaces where minorities can learn but also:

Enter the tech industry through an environment where you can be safe and secure.
Find people whom you can feel identified with (‘If they can, for sure me too!’ 💪), role models and inspiration. In Colombia, our exclusive meetups are mostly for women, we have Codies, Pyladies, GeekGirls and Pioneras Developers.

Conferences

Some of the conferences that we have In Colombia annually are: JSConf, ScaleConf, RubyConf and NgColombia. One of the main goals of these conferences (and at the same time the biggest challenge) is to keep the tickets at an affordable cost without decreasing the quality of the event. In the U.S. The average ticket price is $600 US. In Colombia the tickets have an average cost of $150 US, that is only 25% of the regular cost, but the cost of running a conference aren’t so different in relation to other countries, speakers travel and accommodation, food, venue, conference experiences, etc… And to obtain sponsorship from local companies is really hard because they aren’t used to supporting community initiatives. The result is that volunteer organizing team need to create really good and strong alliances with key companies so our conferences don’t go broke.

Opportunity scholarships: Our conferences have scholarship programs that are not exclusively for underrepresented groups, as the name says, these also for people with less opportunities to attend the conference. For instance, last year JSConf granted around 15% of the tickets to opportunity scholarships, they reserved tickets for people from Chocó where is the city with highest poverty index in the country (Quibdó, According to the DANE) and from Venezuelan that as we know, is a country that is suffering an economic crisis. The scholarships include transportation and accommodation if needed.
Supporting each other’s events: For example, when RubyConf was created the organizing team received all the support, experience and help from the organizing team of JSConf.
Language: Even though the English is a global language and I could say that is the official language in the tech world, we know that not all people speak English, for this reason, our conferences offer translation devices that are used by ~40% of the assistants.
Local talent: We want to promote the local talent and empower the people to share their knowledge at these international events.

Training Programs

Bootcamps: These are spaces for non engineers to learn about programming. We have two Bootcamps in the country: World Tech Makers and Make It Real.
Coderise: This program, trains people from low income families, that are between 13 and 18 years old, it’s an eight-week Bootcamp, where the goal is not only to learn about development, but also to meet young people interested in technology. The mentorship team is formed by people mostly from the tech communities in the city — people that are willing to share their knowledge. This helps attendees learn and also learn how to teach, with the objective of creating a snowball effect and that they will be who will teach the next generation. This program was born in 2011 and has been done in 4 cities from Colombia (Medellín, Popayán, Sabaneta and Cartagena) and 3 Latin American countries (Colombia, Peru and Honduras) having an impact on more than 150 young people. 150 teenagers who now have a new road of professional opportunities.

Now, some companies are also executing diversity programs. Personally, I hate the job offers that say “We are looking for women for the X job”, I consider that hiring process should be for merit… it’s not fair to hire someone just because they are a woman, a person of color, homosexual… or part of some minority. And it’s not profitable for a company to hire someone just to have a ‘token’ employee and demonstrate something, I think is better to have an employee that is the best option for the position independently of their gender, sexual identity, nationality, religion, etc… At least the companies that are doing this are conscious that we need to do something related to diversity and inclusion, but I think it’s not the best approach. Instead, I suggest to do two things if you want to promote diversity and inclusion at your company:

Promote and support educational spaces, in this way you are contributing to train potential new workforce and your company will have more visibility in the dev community… in this way, you will not need to search for devs, they will just come to you.
Don’t scare away people… Pursue an inclusive culture where each one can feel part of the environment and where all people have something to contribute.

Finally, if you want to do actions related to diversity in your community, don’t be afraid to do it, just keep this actions focused on your context and needs. For me, the Colombian communities are an excellent case of that, and I feel very happy and proud watching how people by their own initiative with help from the community, are working in this unpaid job to make the tech world a more inclusive and safe space for everyone.

Hagamos CSS con SASS

Manu Castrillon — Thu, 30 Apr 2020 00:37:19 +0000

La gran cantidad de problemas que podemos abordar en nuestros sitios web hace que los desarrolladores nos tengamos que adaptar a los requerimientos que estos implican, y esto involucra no solamente a los frameworks, arquitecturas, bases de datos… sino también a cómo luce el sitio (los estilos), ya te podrás imaginar, que no es lo mismo escribir estilos para la página de presentación de una panadería local que hacerlo para una gran aplicación bancaria.

Entonces, en un mundo web donde todo es dinámico, mantenible y escalable (o esa es la idea) nuestros estilos también deberían serlo, y para esto, nacen los preprocesadores de CSS, herramientas que nos permiten extender la sintaxis de nuestras hojas de estilo agregándole un montón de superpoderes como el uso de variables, funciones, mixins y anidación. Esta sintaxis, es posteriormente traducida al CSS que todos conocemos y que los navegadores saben interpretar.

Existen varios preprocesadores de CSS, entre ellos Sass, Stylus y Less, que después de conocerlos no queremos volver a saber de 'Vanilla CSS', eso sí, aunque estos nos ofrecen un montón de ventajas, si aún estás iniciando en el desarrollo web, te aconsejo primero dominar los conceptos claves de CSS antes de aprender el camino con atajos.

Por su sintaxis, funciones y comunidad, yo me quedo con SASS (Syntactically Awesome Style Sheets), y en este articulo aprenderemos un poco más sobre el.

¿Como utilizar Sass?

Instalación

Como la sintaxis de Sass no puede ser interpretada por los navegadores, se requiere un traductor que nos convierta el código en CSS, para esto, debemos instalar la gema de Ruby correspondiente para esto.

Guía de Instalación

Si estás construyendo tu aplicación con el CLI de algún framework o biblioteca, algunos de estos ya tienen la opción de agregar Sass al crear el proyecto, entonces te recomiendo consultar la documentación de estos.

Sintaxis

Para escribir tu código con Sass tienes dos opciones:

SASS: Tus archivos SASS deben tener la extensión .sass. A diferencia de CSS esta sintaxis no hace uso de llaves ni punto y coma, la jerarquía se da haciendo uso de la identacion.

  div
    border-radius: 5px
    background-color: #FF0000

SCSS: Tus archivos Sass deben tener la extensión .scss. Esta sintaxis surgió a partir de la versión 3 del preprocesador, requiere el uso de llaves y punto y coma.

  div {
    border-radius: 5px;
    background-color: #FF0000;
  }

Cual de las dos elegir? Con la que te sientas mas comodx

Superpoderes

Variables

Como en los lenguajes de programación, te permite almacenar valores para reutilizarlos en la hoja de estilos.

scss:

$font-name: Roboto, sans-serif;
$primary-color: #668cff;

.title {
  font-family: $font-name;
  color: $primary-color;
}

css:

.title {
  font-family: Roboto, sans-serif;
  color: #668cff;
}

Anidación

Permite organizar los estilos de forma jerárquica. Ten precaución de no abusar del uso de este porque puede terminar siendo una mala practica.

scss:

.card {
  border-radius: 5px; padding: 10px;

  &-title {
    font-size: 16px;
  }

  img {
    width: 100%;
  }
}

css:

.card {
  border-radius: 5px;
  padding: 10px;
}

.card-title {
  font-size: 16px;
}

.card img {
  width: 100%;
}

Import

Con @import puedes hacer uso de un archivo dentro de otro scss. La ventaja de importar los archivos con Sass en lugar de hacerlo con el import de CSS es que al hacerlo con CSS, este genera un llamado http para solicitar cada archivo, mientras Sass al ser compilado previamente, genera un solo archivo que contiene todo lo que fue importado, evitando así estas llamadas.

scss:

// _variables.scss
$color-primary: #ff80bf;

// main.scss
@import 'variables';

.title {
  color: $color-primary;
  font-size: 18px;
}

css:

.title {
  color: #ff80bf;
  font-size: 18px;
}

Archivos parciales

Puedes crear archivos con pequeños trozos de código con el objetivo de modularizar tu código, para esto, solo necesitas crear un archivo que en el nombre contenga al inicio el símbolo _, como por ejemplo _estilos.scss y con esto, Sass sabrá que es un archivo parcial y lo podrás agregar a otro archivo haciendo uso de @import.

Mixins

Los mixins nos permiten reutilizar un trozo de código, agrupando una serie de lineas que pueden ser insertadas posteriormente en otro lugar del CSS, con valores que pueden ser dinámicos haciendo uso de parámetros. Los mixins son de gran utilidad, por ejemplo, cuando tenemos una propiedad a la que se le debe agregar el prefijo correspondiente para cada navegador (-webkit, -moz, -ms…).

scss:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

css:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Forem: Manu Castrillon

Lessons I learned as a GitHub Campus Expert

✨ START SMALL

✨ DON’T LET FEAR STOP YOU

✨ PROGRESS, NOT PERFECTION

✨ NEVER UNDERESTIMATE YOUR KNOWLEDGE

✨ YOU ARE NOT ALONE

How to become a GitHub Campus Expert and my experience in the program

What is GitHub Campus Experts?

Responsibilities

Benefits

How to become a GCE

Requirements

Application

Online training

Videochat

My campus community: Codex

My GCE journey

Reconocimiento de imágenes en la web utilizando TensorFlow.js

Redes neuronales

Neurona

Capa

Red

Redes neuronales convolucionales

Por qué es esto necesario?

Capa de convolución

Capas de pooling

Capas completamente conectadas

TensorFlow

TensorFlow.js

Por qué utilizar TensorFlow en el navegador?

API

Manos a la obra

CNN from scratch

Modelos pre-entrenados

Bibliotecas externas

Recursos:

Entendiendo la coerción en JavaScript

🤔 Por qué necesitamos esto?

Operador de igualdad (==)

Operador de adición (+)

Operador de sustracción (-)

Truthy y Falsy

Casos especiales: Objetos

Primer caso: [] + {}

Segundo caso: {} + [] = 0

Conclusión

Reto

Referencias:

React Hooks 101

¿Qué está mal con React?

1. Reutilización de la lógica entre componentes

2. Componentes gigantes

3. Uso de clases

¿Cómo lo solucionamos?

¿Que son los Hooks?

¿Cuales Hooks provee React?

Hooks básicos

Hooks adicionales

Hooks personalizados

Reglas de los Hooks 👮‍♂️

¿Cuándo utilizar Hooks?

Diversity and inclusion issues in Colombia… What are we doing? ✨

ColombiaDev 🇨🇴

Inclusive Meetups

Exclusive Meetups

Conferences

Training Programs

Hagamos CSS con SASS

¿Como utilizar Sass?

Instalación

Sintaxis

Superpoderes

Variables

Anidación

Import

Archivos parciales

Mixins

Primer caso: `[] + {}`

Segundo caso: `{} + [] = 0`