DEV Community: James Cardona

Claves para romper la barrera del Seniority

James Cardona — Thu, 05 Dec 2024 17:00:00 +0000

Este post hace parte de la newsletter Breakthecode.

Muchas personas quieren convertirse en seniors developers algún día, sin duda esto será un viaje y una experiencia nueva.

Es frecuente que en ese proceso muchos fallen o se demoren más del tiempo que quieren, ¿por qué?; hay muchos factores y uno de ellos lo vimos en la edición pasada un enfoque de tiempo y energía incorrecto.

Por eso debes empezar por un plan con objetivos medibles y probablemente esto suene muy obvio, un plan no garantiza el éxito, pero nos ayuda a minimizar el fracaso.

Estrategias para Despegar tu carrera

Toma decisiones rápidas, se activó y proactivo en buscar ese plan y objetivos ideales para ti, esos objetivos son personales y muy específico a tus sueños o deseos, ejemplo: Ser promovido, aumentar mi salario, tener personas a cargo.

La fórmula se complementa si sabes en qué nivel estás respecto a tus compañeros o personas en tu mismo rol, con eso puedes tener más claridad si tus objetivos son realistas.

Estableciendo metas realistas

Es importante que establezcas metas alcanzables y realistas. Por ejemplo, podrías proponerte aprender un nuevo framework en seis meses o asumir un rol de mentor para un Junior en el próximo año. Mantén un registro de tu progreso y ajusta tu plan según sea necesario.

Luego debemos crear un sistema que nos ayude a ejecutar un plan desde el punto donde estoy, un sistema es lo que conecta la intención con el objetivo, básicamente es el pegamento que mantiene mi atención en el largo plazo, este plan no es algo que puedas completar en poco tiempo, requiere energía, tiempo y disciplina.

Lo que necesitamos en el sistema son los puntos de control que me ayudan a evaluar si realmente estoy avanzando, si tengo el foco puesto en lo importante para alcanzar un siguiente paso y hacer cambios si es necesario.

Aprendizaje continuo:

Los mejores ingenieros se ven a sí mismos como aprendices constantes, siempre buscando mejorar. Esa transición de junior a senior es un proceso continuo que requiere dedicación, esfuerzo y una disposición para aprender y adaptarse continuamente. Recuerda que movernos implica sentirnos incómodos con nuevas obligaciones.

Al trabajar en un proyecto o empresa, seguro estemos aprendiendo mucho, pero cuando salimos de esa "burbuja", nos damos cuenta de que para mi rol en otras empresas están requiriendo cosas que no sé, el conocimiento en general en software avanza mucho a una velocidad muy alta y por eso debo ser consiente que ser desarrollador es un camino largo.

No quiero que entiendas que debes abordar todo o aprender muchas cosas, en pocas palabras: Aprender y reforzar mis bases.

Enfóquese en construir una base técnica sólida,
Desarrollar sus habilidades blandas.

Toma la delantera

1- Arquitecturas y patrones de diseño

A medida que avanzas en tu carrera, es esencial comprender arquitecturas y patrones de diseño. Esto no solo mejora la calidad del código que produces, sino que también te permite participar en discusiones técnicas más complejas y ser visto como un líder en el equipo.

2-La importancia del testing

El testing es otra área que debes dominar. Las empresas valoran a los desarrolladores que comprenden cómo implementar pruebas unitarias, pruebas de integración y pruebas de interfaz de usuario(si aplica). Esto garantiza que el código sea robusto y menos propenso a errores.

3- Frameworker

Ser ingeniero significa profundizar en los fundamentos y no solo depender de frameworks, es claro que los frameworks no definen la habilidad de un developer.

Yo creo que saber un framework puede ser el primer paso para conseguir un trabajo o mejorar tu puesto actual, pero en algún punto depender de un framework va a limitar las oportunidades y el crecimiento profesional.

Ya lo hemos abordado mucho, pero recuerda, la programación no es solo escribir código, sino también comprender cómo y por qué funciona.

4- Sigue tu pasión

En algún punto puede que la motivación no te ayude a continuar tu camino, pero es ahí donde debes tirar del carro de la pasión, si tu pasión se alinea con tu rol, te garantizo que vas a mantener la curiosidad para solucionar, explorar o mejorar algo. Esa curiosidad en mi caso me ha ayudado mucho.

5- Tu empresa, el negocio, los clientes

Aprende no solo a realizar código, aprende sobre el impacto de su trabajo en la empresa y en sus clientes, entre más entienda esto, podrás alimentar el punto anterior, y es un ciclo que se alimenta y te ayudará a crecer.

Conozco casos de developers, que con profundizar en la empresa, en lo que hacen, en los puntos de dolor y empezar a aportar pudieron subir de seniority muy rápido aún con algunas habilidades técnicas por desarrollar.

Conclusión

La transición de desarrollador junior a senior es un viaje, no un destino. En esta serie vimos muchas cosas que seguro te van a ayudar a avanzar a senior developer.

Si tienes preguntas o necesitas más consejos sobre cómo avanzar en tu carrera como desarrollador, déjalos en los comentarios.

¡Ahora es tu turno! ¿Qué pasos tomarás para avanzar en tu carrera como desarrollador? Comparte tus pensamientos en los comentarios.

Break the Code: Un Nuevo Comienzo

James Cardona — Tue, 12 Nov 2024 17:30:00 +0000

Mi viaje para crear una carrera exitosa en tecnología.
Te invito a leer y subscribirte acá: Substack

¿Cómo llegué hasta acá?

Hola, a quien me esté leyendo, quisiera empezar contándote un poco de mí. Soy ingeniero de software desde hace 10 años, en su totalidad trabajando para startups. He trabajado en diferentes industrias, áreas y stacks, pero principalmente he construido mi carrera en desarrollo móvil. Me acuerdo pasar de Eclipse a la primera beta de Android Studio 👴.

Ha sido un camino más que interesante, una montaña rusa como me imagino que a todos les ha pasado, cometiendo errores, aprendiendo de otras personas, creciendo y descubriendo lo maravilloso de ser ingeniero de software.

Llegó un momento de curiosidad, de construir algo más, compartir mis conocimientos con otros, así que empecé un camino de hacer muchas cosas aparte de mi trabajo normal y escribir algunos post, realmente me gusto mucho, pero lo que más me gusto, es descubrir una de mis grandes pasiones la investigación.

Sin embargo, en 2024, experimenté un verdadero agotamiento. Me sentía cansado, con los ojos fatigados al trabajar y estudiar, y con poca energía para desarrollar proyectos. Decidí hacer una pausa, reducir mi carga laboral y cambiar algunos hábitos en mi vida. Tomé un tiempo para respirar, reconectarme conmigo y con mi familia, y me fui de vacaciones. Al regresar, aunque no tenía toda la energía, mi mente estaba más despejada.

Después de ese periodo, durante aproximadamente tres meses, estuve tranquilo, sin hacer "mucho", digamos que solo estuve completando tareas, me dediqué a crear algunos hábitos en mi vida.
Hasta que llego el momento de iniciar algo nuevo, luego y así nacen Break the Code y SinIdeas, dos espacios que inicialmente son para mí, son una excusa para seguir desarrollando mi carrera.

¿Por qué escribo esta newsletter?:

Break the Code es un viaje personal, la verdad es que esto es algo nuevo para mí. No soy un ~~fancy~~ ingeniero de una big tech, solo un tipo real con sueños y dispuesto a aportar valor.

Quiero empujar los límites de mi conocimiento, disciplina y mi impacto. Hoy mi compromiso es crear algo asombroso y útil, aquí intento escribir para ti y para el futuro James 🤭.

Sigo buscando muchas cosas en mi viaje como profesional, pero sin duda, sé que ya he ganado al lanzarme a hacer algo fuera de mi zona de confort, esto puede ser un poco egoísta, pero daré mi 100% para que tú también puedas ganar.

El enfoque de Break the Code

Break the Code no solo se centrará en la programación, sino que también explorará herramientas, liderazgo y técnicas que pueden ayudar a los desarrolladores a mejorar su productividad, con el objetivo de crecer tu carrera, el contenido semanal serán consejos prácticos para mejorar tus habilidades como desarrollador y crear una carrera exitosa en tecnología.

También me gustaría contar con personas en este espacio a su debido momento y que podamos aprender de líderes de la industria.

👀 ¿Qué esperar?

Lecciones aprendidas, ¿qué desafíos estoy enfrentando, qué errores cometí? Estoy en la misma posición, enfrentando problemas reales.
No solo código - cubriré más temas relacionados con la creación de una carrera exitosa. (🤞 - estoy en este camino)
Tips: Mi objetivo es compartir consejos prácticos. (al menos en la mayoría de las ediciones 🙃).
Ideas de side projects o proyectos que te ayuden a crecer.
Consejos respaldados por experiencia personal.

Lo siguiente 🚀

El primer capítulo ya está programado y listo para salir, Mejora tu productividad: AI's esenciales para developers. En ella, compartiré las herramientas de inteligencia artificial que utilizo, cómo las uso y su propósito.

📖 TL;DR

La importancia de tomar un descanso, tomarse un tiempo para descansar y reconectar con uno mismo es fundamental en cualquier carrera.
Disciplina para ejecutar nuestros proyectos.
Break the Code es un proyecto que busca descubrir y entender aspectos del desarrollo de software.
Tips prácticos basados en mi experiencia en la industria.

Gracias por leer hasta aquí. Te invitamos a que te una en este emocionante viaje y a explorar el contenido que se lanzará cada jueves. ¡No te lo pierdas!

Considera darle un me gusta, compartirlo y estar atento a futuros artículos.

Subscribirte acá: Substack

Building a side project for developers - Part 2

James Cardona — Fri, 24 May 2024 13:40:03 +0000

Introduction

In the first part of this series, I talked about the basic things about side projects, you can read it here. In this part, I will talk about the ideation process how to use the tools to create a plan, and how to start with the project.
Maybe you are thinking, why do I need to create a plan? The answer is simple, the plan is the first step to start with the project, and it's a way to have a clear idea of what you want to achieve. This part is a little bit more visual and the technical solution is going to be in the next post.

Start with this project

What is the problem that I'm solving?: I'm building an AI application, that will help me and help people to improve their productivity when they are working to grow their social media.
Why did I choose this idea?: Two main reasons, because I want to learn some new technologies and is something that I'm facing in my daily life.
What is the goal of this project?: The idea is to have a working application for mobile and web. The main goal is for this app to use AI to create better social media content focused on LinkedIn and Twitter.

With the latest questions, I can start to create a plan, the first step is to create an MVP around one single idea, and after that, I can improve it, add more features, and make it better.

Problem and Solution

Focus on the Problem, Not Just the Solution

Many side projects initially aim to create the next "big company" or an "automation tool for Y," leading to a fixation on a single solution. However, adopting a mindset centered around understanding the problem rather than fixating on a specific solution offers more flexibility.

I'm going to write the problem description, possible features, and solution; write as much as possible, and later remove the things that are not important.

⚡Problem

Many individuals and businesses struggle to effectively grow their audience on social media platforms, hindering their ability to reach and engage with a broader audience. Despite recognizing the importance of social media presence for brand visibility and engagement, navigating the complexities of audience growth remains a significant challenge.

Factors contributing to this challenge include:

Limited Resources: Many users lack the time, expertise, or resources to devise and implement effective audience growth strategies.
Lack of Insight: Users often struggle to understand their target audience, preferences, and the most effective content strategies to attract and retain followers.
Content Management: Managing multiple social media platforms, creating engaging content consistently, and scheduling posts can be overwhelming and time-consuming.
Competition: The crowded social media landscape makes it difficult to stand out and attract attention amidst competition from other users and brands.
Analytical Complexity: Understanding the effectiveness of audience growth efforts through analytics and metrics can be daunting for many users.

✅ Solution

Developing a comprehensive tool or app to address the challenge of audience growth on social media platforms requires a multifaceted approach. The solution should integrate various features and functionalities to cater to the diverse needs of users seeking to expand their reach and engagement. Key components of the solution include:

Audience Insights: Implement features that provide users with valuable insights into their target audience demographics, preferences, and behavior. This could include analytics dashboards, audience segmentation tools, and trend analysis capabilities.
Content Creation and Scheduling: Offer robust content creation tools that enable users to produce high-quality, engaging content tailored to their audience. Additionally, provides scheduling features to allow users to plan and automate their social media posts for optimal timing and consistency.
Cross-Platform Integration: Ensure compatibility with multiple social media platforms, allowing users to manage their presence across various channels seamlessly. This includes support for popular platforms such as Twitter, Facebook, Instagram, LinkedIn, and more.
Engagement Tools: Incorporate features to facilitate user engagement, such as comment management, direct messaging, and audience interaction tracking. This encourages meaningful interactions with followers and enhances community building.
Performance Tracking: Provide comprehensive analytics and reporting functionalities to help users track the effectiveness of their audience growth efforts. Metrics such as follower growth, engagement rates, and content performance should be easily accessible and actionable.
Educational Resources: Offer tutorials, guides, and best practices to educate users on effective audience growth strategies and social media marketing techniques. Empowering users with knowledge and expertise enhances their ability to leverage the platform effectively.
Customization and Personalization: Allow users to tailor the tool to their specific needs and preferences through customizable settings, personalized recommendations, and adaptive algorithms.

Market competitors

Search market competitors, this part is easy, you can use ProductHunt, SideProjectors, Github, and Twitter. You can find a lot of projects that are similar to your idea, and you can learn from them, what they are doing right, what they are doing wrong, and how you can improve it.

Why do we need to do this? The answer is simple, you need to know what is the market, what the competition is, and how you can improve your project. The idea is not to copy the project but to learn from them, and make it better.

MVP or MVE

Maybe you have heard about MVP, if not, here is a simple explanation:
Various interpretations exist for what constitutes an MVP, but generally, it refers to a product with the fewest features necessary to address the core problem.
Confining development efforts to the MVP is crucial for two primary reasons.

1) It prevents undue investment of time in building a product before confirming its market demand and user utility.

2) It guards against the temptation to endlessly add features and refine the product, potentially delaying its release by months or even years.

MVE (Minimum Viable Experiment) is a concept that emphasizes validating your idea with the least amount of effort. It involves creating a simple experiment to test your hypothesis and gather feedback from users. By focusing on the core assumptions of your idea and testing them quickly, you can validate your concept and make informed decisions about its viability.

To solve/create this side project, I created two diagrams to explain the process and how I can solve this problem.

The first one is using some frameworks and APIs to create the AI model and solve the problems in each step.
The second one is using No-Code tools to solve the problem, here the major challenge is to create a login to use with no-code tools.

Which of these two options is the best for me? I choose the first one and the second one, let me explain why:

The first one is the best option because I want to learn new technologies, and I want to have more control over the project. Here the idea is simple create a first version with a single feature, that feature is something you can do directly with ChatGPT or other AI tools, but we can start collecting feedback and improve it from here. After the first launch, we can start building more features and start testing some features that are good candidates to be a premium feature.

The second one is the best option because I want to have a fast MVP, and I want to have a working project as soon as possible. The second solution is something "straightforward", using make.com as the main tool to coordinate other tools and continue with the integration of more tools, something that I want to do quickly is use the prompts that I mentioned in the first solution, and I can use the same prompts in the second solution. I can test and improve the prompts while I'm ready to start with the first solution.

With this in mind, I'm going to start with solution 2, both solutions use the same tools and I can reuse part of the things that I created with solution 2 in solution 1, and I want to start testing the idea in my social media.

Be fast

Time is of the essence, especially when considering monetizing your side project. The digital landscape is constantly evolving, and speed can be a significant advantage in gaining traction and establishing your presence. Rapid execution allows you to capitalize on emerging trends, capture market opportunities, and stay ahead of competitors.

In today's fast-paced environment, being first to market often translates to a competitive edge. By swiftly bringing your side project to fruition, you can attract early adopters, generate buzz, and start generating revenue sooner. Additionally, acting swiftly enables you to iterate based on user feedback, refine your offering, and adapt to evolving market dynamics more effectively.

Moreover, don't shy away from researching and analyzing potential competitors. Understanding their strategies, strengths, and weaknesses can provide valuable insights for refining your approach and positioning your side project for success. Embrace competition as a source of inspiration and motivation to continuously improve and differentiate your offering in the marketplace.

In essence, speed is a vital component of success in monetizing your side project. Embrace agility, seize opportunities, and stay ahead of the curve to maximize your chances of achieving your goals.

UI inspiration

To this, you can do a lot of things, you can use Dribbble, Behance, Pinterest, or even some projects that you found in ProductHunt. The idea is to have a visual idea of how you want your project to look like. You can create a mood board or a simple sketch, the idea is to have a visual idea of how you want your project to look like.
After the inspiration, you can create some low-fidelity wireframes (We are going to do this in another post), and after that, you can create high-fidelity wireframes or find someone who that create them for you.

Some importantly, if you are not good with design, don't stop here your progress, the value of a project is not only driven by the design.

Conclusion

In conclusion, laying the groundwork for a successful side project involves meticulous planning and strategic decision-making. In this part of the series, we need to go deeper into the crucial steps of ideation, creating a plan, and initiating the project. Understanding the problem at hand and devising a solution that addresses its core challenges is fundamental. By focusing on the problem rather than fixating on a specific solution, we ensure flexibility and adaptability throughout the development process.

Market research and competitor analysis provide invaluable insights into the existing landscape, allowing us to identify opportunities for improvement and differentiation. Establishing a Minimum Viable Product (MVP) enables us to validate our idea efficiently while avoiding unnecessary investment of time and resources.

Choosing between alternative approaches, such as leveraging new technologies versus utilizing no-code tools, requires careful consideration of factors like learning objectives, time constraints, and desired outcomes. Ultimately, prioritizing speed and agility can be a significant advantage in seizing market opportunities and staying ahead of the competition.

Moreover, seeking inspiration from UI designs and visualizing the project's aesthetic direction adds depth and clarity to our vision. While design is important, it's essential not to let it overshadow the project's core value proposition.

TIP

Prioritize Flexibility

In the early stages of product development, customer needs can change rapidly. Build flexibility into your architecture to accommodate evolving requirements as you iterate with your customers. Focus on delivering a functional product first, then refine and scale later. Don't get bogged down with elaborate processes.

Prioritize building and shipping quickly, then refine and optimize as needed based on the validation of your hypothesis.

Thank you for reading this far. Consider giving it a like, sharing it, and staying tuned for future articles. Feel free to contact me via LinkedIn.

References

Flutter Chrome Extension - Part 2

James Cardona — Wed, 01 May 2024 21:05:04 +0000

This post continues our journey to create a Chrome Extension with Flutter. In the last post, we created the base of the extension and we covered how to communicate between the extension components.

We have a pending goal in order to continue the summary using ChatGPT API, we want to summarize the selected text of the current page.

First part: Link

Goal of the post

The goal of this post is based on the following points:

Use dart interop to call native JS code and communicate between the extension components.
Extends the knowledge on how to communicate between the extension components.

Repository

Dart interop?

What is dart interop?

This library facilitates smooth interaction between JavaScript (JS) and Dart by providing a comprehensive JS interop solution. It's important to note that the JS types defined in this library offer static guarantees only. This means that while they provide assurances at compile time, the actual types at runtime may vary depending on the backend being used.

Dart interop is included in the Flutter SDK, so we don't need to add any dependency to use it and now we can use some JS-types to convert between Dart and JS.

Why is it useful?

This allows us to call "JS" functions from the Dart code, note that we are not calling JS functions directly, we are calling the JS functions from the Dart code and we need to continue following the Chrome Extension rules to communicate between the components.

index.js

Do you remember in the last post we created a function to get the current page URL?
We use something like this: using the js package to call the JS function from the Dart code.



@JS('chrome')
library main;

import 'package:js/js.dart';

@JS('tabs.query')
external Future<List<Tab>> query(ParameterQueryTabs parameterQueryTabs);

Now we are going to use the interop to call the JS function from the Dart code.
1) Create a new file index.js in the web folder.



async function getPageUrl() {
  console.log("getPageUrl -- web/index.js");
  const tabs = await chrome.tabs.query({ 'active': true });
  console.log("Return from chrome.tabs.query", tabs[0].url);
  return tabs[0].url;
}

2) Create a dart file, in our example we called raw_interop.dart
Here we are going to put the definition of the JS function.



@JS()
library flutter_medellin_extension;

import 'dart:js_interop';

@JS()
external JSPromise<JSString> getPageUrl();

3) Create a second dart file, in our example, we called js_interop.dart
Here we are going to implement the call to the JS function.




import 'dart:js_interop';

import 'raw_interop.dart' as interop;

abstract class JsInterop {
  static Future<String> getPageUrl() async {
    return (await interop.getPageUrl().toDart).toDart;
  }
}

What is toDart? This is a method that is used to convert the JS type to a Dart type.
If you see the name of the dart function and JS function should be the same and is important to run JS code.

1) Use the JsInterop class to getPageUrl.



String pageUrl = await JsInterop.getPageUrl();
print('Page URL: $pageUrl');

Implement the selected text function

In the index.js file, we are going to add a new function to get the selected text of the current page, but the problem is here we can't call window object, we need to execute this code in the background.js.

If you remember the way that we use in the latest post to communicate between components is sending messages, so we are going to use the same way to get the selected text.

To send a message to the background.js we are going to use the chrome.runtime.sendMessage and also we need to use the callback function to receive the return value, finally, we need to use a Promise to wait before we return the code to dart side.

We are going to write this in parts, first, we are going to write the JS code to get the selected text.



async function getSelectedText() {
  console.log("selectedText -- web/index.js");
  chrome.runtime.sendMessage({ type: "selectedText" }, function (response) {});
}

Use a promise to resolve the response from the background.js and wait for the promise to return the selected text.



const promise = new Promise(function (resolve, reject) {
  chrome.runtime.sendMessage({ type: "selectedText" }, function (response) {
    resolve(response);
  });
})

const selection = await promise;

Finally, the code looks like this:



async function getSelectedText() {
  console.log("selectedText -- web/index.js");

  const promise = new Promise(function (resolve, reject) {
    chrome.runtime.sendMessage({ type: "selectedText" }, function (response) {
      resolve(response);
    });

  })

  const selection = await promise;
  if (selection) {
    return selection[0].result ?? '';
  }
  return '';
}

Update the background.js

Here in the background, we are going to listen to the message, and also here we need to use the Promise to return the selected text.



if (message.type === "selectedText") {
    const promise = new Promise(function (resolve, reject) {})

    promise.then((response) => {
      sendResponse(response);
    });
    return true;
  }

Two important things here:

We can't use the await in the background.js, we need to use the Promise to wait for the response.
We need to return true to indicate that we are going to use the sendResponse to send the response.

What is the code to get the selected text? (This code should be called inside the Promise)



chrome.tabs.query({ active: true, currentWindow: true }, async function (tabs) {
  const tabId = tabs[0].id;
  const text = await chrome.scripting.executeScript({
    target: { tabId: tabId },
    function: () => getSelection().toString()
  });
  resolve(text);
});

Call the JS function from Dart

Use the same way that we use to write and call the getPageUrl function.

raw_interop.dart



@JS()
external JSPromise<JSString> getSelectedText();

js_interop.dart



static Future<String> getSelectedText() async {
  return (await interop.getSelectedText().toDart).toDart;
}

chrome_home_page.dart



Future<void> _summarySelectedText() async {

  print('Summary Selected Text');

String selectedText = await JsInterop.getSelectedText();

  print('Selected Text: $selectedText');

setState(() {

    isLoading = true;

  });

summary = await summaryApiClient.getTextSummary(selectedText) ?? 'Error fetching summary';

setState(() {

    isLoading = false;

  });

}

Result:

This is the result of the current page URL and the selected text.

This is a quick sneak peek at what other things we can do following this post and the previous post.

In this case, we are using the communication to the contentScript.js:



const w = await chrome.windows.getCurrent()

  const tabs = await chrome.tabs.query({ active: true, windowId: w.id });

  chrome.tabs.sendMessage(tabs[0].id, { "type": "selectedText" }, function (response) {

    resolve(response);

  });

What's next?

In this post, we covered how to use the Dart interop to call JS functions from the Dart code, and how to communicate between the extension components. I still have some pending goals to achieve using the extension. When I finish them, I will write something on my LinkedIn or Twitter.

End words

Creating a Chrome Extension is a challenge due to the lack of documentation and API limitations, but it's good if you want to create something quickly without needing a lot of interaction with the HTML page.

Thank you for reading this far. Consider giving it a like, sharing it, and staying tuned for future articles. Feel free to contact me via LinkedIn.

References

https://api.dart.dev/stable/3.3.0/dart-js_interop/dart-js_interop-library.html

Building a side project for developers - Part 1

James Cardona — Thu, 25 Apr 2024 15:08:40 +0000

Introduction

What is the idea of this series?, I'll be talking about my experience, and I will share my journey of building a side project. I will share the process, the challenges, the learnings, and the outcomes. I started this journey because I wanted to learn new technologies, improve my skills, and have fun. I hope this series will inspire you to start your side project.

Most importantly, even though I'm not an expert, I'm still learning. The idea is to create an AI SaaS application. I will share the process of finding the idea, the technologies that I will use, the architecture, the design, the development, the deployment, and most importantly my goals.

What is a side project? A side project is a project that you work on in your free time. It can be a hobby, a way to build auto-discipline, that is the first reason that I started this journey; I want to have something to push me to learn, to explore new things, not only developer things. Something that you can have in mind, a side project is not only to get money; it's a way to improve yourself.

For who?

This question can have multiple answers. But the short answer is everyone can build a Side Project, you don't need to have technical skills. In my short experience, the only skill that you need is the "desire to learn and explore new things", because you will find a lot of challenges, Do you have time? Do you have a good idea? Do you have the right skills? Do you have a bunch of projects that you started but never finished?

I know this could be overwhelming, but where do you begin? What should you create? How you can balance your time? All of these questions are part of the challenge but try not to overthink, just start, just do it. So are you ready to start your side project? Let's go!

Why side projects?

There are a lot of reasons to start a side project, this is not part of your main job, but you can use this like a "takeoff ramp" to your career, here are some reasons to start:

Improving Skills
Portfolio Building
Problem-Solving
Networking
Create a passive income

The experience that you'll get after creating or building a side project is something that can use to improve your main job or get new opportunities, the goal is to have a goal, try to achieve it, and learn with the process.
Not all side projects are to get money, some side projects can be a way to explore things that you can't do in your daily.

How to find ideas?

The truth is I don't have a strong answer for this, but the reality is that you can find ideas everywhere.
Here are some tips to find ideas:

The first place to start is what problems are you facing in your daily life.
Follow people who are building side projects, you can find a lot of inspiration.
Don't be afraid to look for inspiration in other projects, you can improve it, make it better, or more easy to use.
If you are looking to change your developer career, you can start with a small project.

What I'm doing right now, is solving a problem that I have and following some small project looking to learn new technologies.

How to start?

Everyone needs to create a framework that helps to start and finish the project. I'm going to share my current framework, but you can create your own, the most important thing is things that help me may not help you.

1) what is the goal of building a side project, do you want to create an income or do you want to improve your skills?

2) Choose the goal of your project, what do you want to achieve?
Image your project with all the features that you want to have, and after that, you can start to create an MVP (Minimum Viable Product) which is a version of a new product that allows you to collect the maximum amount of validated learning about customers with the least effort. That MVP can be one or two main features of your project.

3) You need to create a routine to work on your project, you need to be consistent start with a small goal, and increase the complexity.
Example: start with one hour per day. You can divide that hour into small fragments of time, don't need to be one hour straight. Thing what is the best way to be productive and in balance with your life?

4) Use tools to help you to collect data, track your progress, and help you to be more productive.
Examples: Notion, Trello, Excalidraw, Miro, Figma, ClickUp, etc.

5) Write a list of your skills
We need to know what we are good at, and what we need to improve, this list can help you to find the right project for you, also we want to be faster in the execution, so if we have a good idea of what is easy for me we can start with that.

6) Create a Budget
Do you need to spend money on this project? If yes, how much? Can you use tools to help me to reduce the costs?

7) Start sharing your progress, to collect feedback.

My personal Notion Setup

1) Ideas Book: This space is dedicated to jotting down ideas that come to mind or are stumbled upon. The approach is simple: record the idea without overthinking it, knowing that refinement can come later. Sometimes, only the title of the problem is noted initially, with plans to revisit and enhance it later.

2) Control tower: Here I have a board with many things related to my side project, here the ideas became projects.

A page to track the progress and task.
A page to write some important notes from learning videos, posts, or books.
Track the expenses
Save other tools that help me to build the projects.

3) When starting a project, a new page is typically created with the next basic structure.

⚡ Problem: This section outlines the problem or pain point that your project aims to address. It provides context for why your project or product exists in the first place.
✅ Solution: Here, you describe the solution you propose to solve the problem identified in the previous section. This could include features, technologies, or methodologies that you plan to implement.
❓ Define the Why: This section dives deeper into the motivations behind your project. It explores the underlying reasons why addressing this particular problem is important, both to you as the creator and to potential users or stakeholders.
👮 Market competitors: Here, you analyze the competitive landscape surrounding your project. This includes identifying existing solutions or competitors in the market, understanding their strengths and weaknesses, and determining how your project differentiates itself.
🌟 Value-Props: This section highlights the unique value propositions of your project. It articulates the key benefits or advantages that users will gain by using your solution, helping to communicate its value effectively.
💻 MVP: MVP stands for Minimum Viable Product. In this section, you outline the core features and functionalities that constitute the minimum version of your product needed to address the problem and deliver value to users. It focuses on essential elements to validate your idea and gather feedback.
🚀 Launch strategy: Here, you detail your plan for launching your project or product to the market. This includes considerations such as target audience, marketing channels, timing, and any promotional activities or events.
🔄 Iterate (after 🚀 Launch): This section emphasizes the importance of ongoing iteration and improvement even after the initial launch. It highlights the iterative nature of product development, where feedback from users and market insights inform continuous refinement and enhancement.
📪 Associated tasks: This section lists any additional tasks or actions related to the project that need to be addressed. (Todo, In-progress, Done)

Conclusion

In conclusion, embarking on a side project journey offers a plethora of opportunities for personal and professional growth. Whether it's to enhance skills, build a portfolio, solve problems, network, or even generate passive income, the benefits are manifold.

Finding ideas may seem daunting, but they can stem from everyday challenges, inspiration from others' projects, or a desire to innovate.

Establishing a structured approach, like the framework shared here, helps to navigate the complexities of side project development, from setting goals to leveraging tools for productivity and feedback. Ultimately, the journey of building a side project is as much about the process as it is about the outcome, offering valuable lessons and experiences along the way. So, if you're ready to embark on your side project adventure, remember: to just start, embrace the challenges, and enjoy the ride.

Tip

To succeed in your side project, assess your available time and resources realistically. It's important to acknowledge that the project may take longer than anticipated, but the flexibility of launching it on your own schedule can be advantageous.

If you can allocate time for your project, here are practical ways to track your availability:

Establish a schedule: Utilize time tracking software to designate blocks of time for personal activities, work, and your side project.
Rise earlier: Consider waking up an hour earlier each day to carve out extra time for your side project without compromising your primary job commitments.
Prioritize your time to achieve your MVP.

Sneak Peek of Part 2

Thank you for reading this far. Consider giving it a like, sharing it, and staying tuned for future articles. Feel free to contact me via LinkedIn.

References

Flutter Chrome Extension - Part 1

James Cardona — Sun, 24 Mar 2024 14:52:01 +0000

The post will provide a comprehensive exploration of how to create a Chrome Extension Flutter; covering fundamental concepts.

The true power of Flutter is its ability to create cross-platform applications allowing it to expand to the web and Chrome extension, but some important questions about creating more powerful extensions continue as a mystery for me; for that reason, this post is the beginning of the journey for me to understand how to do it.

Part 2: Link

Goal of the post

Before you start we need to choose the goal of the extension; in this case, we are going to create a Chrome Extension that summarizes the text of the current page using ChatGPT.

In order to achieve this goal, we need to understand the following concepts:

Basic setup for a Flutter Chrome Extension;
How to communicate between the extension and the background script;
How to inject HTML and CSS into the current page;

Create the Extension: Basic Setup

- manifest.json

1) Create a new Flutter project;
2) In the web folder, update the manifest.json with the following content:

{
    "name": "flutter_chrome_extension_demo",
    "short_name": "flutter_chrome_extension_demo",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#0175C2",
    "theme_color": "#0175C2",
    "description": "A new Flutter project.",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,
    "content_security_policy": {
        "extension_pages": "script-src 'self' ; object-src 'self'"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "/icons/Icon-192.png"
    },
    "manifest_version": 3
}

If you want to know more about the manifest.json file, you can check the official documentation.

- index.html

3) Update the width and height on index.html

<!DOCTYPE html>
<html style="height: 650px; width: 350px;">

<head>
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <title>flutter_chrome_extension_demo</title>
  <link rel="manifest" href="manifest.json">

  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>

<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

4) Run the extension with the following command to ensure that the extension is working properly:

flutter build web --web-renderer html --csp

5) Update Chrome dev tools to load the extension, and then load the extension from the build/web folder.

6) Current result:

How does a Chrome Extension work?

Before we continue, let's understand how a Chrome Extension works and the different parts that make up an extension.
A Chrome Extension consists of several parts that work together to provide the desired functionality.

We are going to update the basic project to launch a popup when the counter action is clicked; in order to do that we need to update the manifest.json file.

  {
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "contentScript.js"
            ]
        }
    ],
  }

Background Script:

Always running, handles long-term tasks (listeners, API calls).
Limited access to webpage (no direct interaction).
Communicates with content script for webpage actions.

chrome.tabs.onUpdated.addListener(
  (tabId, changeInfo, tab) => {
    console.log('Updated to URL:', tab.url)
  }
)

Content Script:

Injects into webpages.
Directly controls content (add, remove, modify).
Runs user-facing tweaks.

How to communicate Extension components?

The previous image is a good representation of how the extension components communicate with each other, but you can follow the official documentation to have the full picture.

Also, these two posts in StackOverflow help me to understand how to communicate between the extension components:

Steps to launch the popup

We need to communicate using the sendMessage function; in order for that work, we need to create a listener to receive the message.

Add permissions to the manifest.json file:

"permissions": [
  "tabs",
  "activeTab"
],

1) Create a new file background.js inside the web folder with the following content:


function sendMessage(message) {
  chrome.windows.getCurrent(w => {
    chrome.tabs.query({ active: true, windowId: w.id }, tabs => {
      const tabId = tabs[0].id;
      chrome.tabs.sendMessage(tabId, { "type": "notifications", "data": message });
    });
  });
}

2) Create a new file contentScript.js inside the web folder with the following content:

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.type == "notifications") {
    create_popup(message.data);
  }
});

Also, we need to create the create_popup function to show the popup.
You can check the create_popup code in the official repository

1) Finally, we need to update the main.dart file to call the sendMessage function when the counter is clicked.
In order to do that, we need to add the js package; as the description says: "Annotations to create static Dart interfaces for JavaScript APIs.

Create a file called: chrome_api.dart inside the lib folder with the following content:

@JS('chrome')
library main; // library name can be whatever you want

import 'package:js/js.dart';

@JS('runtime.sendMessage')
external sendMessage(ParameterSendMessage parameterSendMessage);

@JS()
@anonymous
class ParameterSendMessage {
  external String get type;
  external String get data;

  external factory ParameterSendMessage({String type, String data});
}

Then, update the main.dart file with the following content:

void _incrementCounter() {
    sendMessage(ParameterSendMessage(type: "counter", data: _counter.toString()));
    setState(() {
      _counter++;
    });
  }

Result:

With this you can see how the popup is launched when the counter is clicked; and how the components communicate with each other.

This is the basic setup and how to communicate between components.

Start summary Extension

1) Create a ChatGPT request to summarize the text of the current page.

import 'package:projectile/projectile.dart';

import 'config/env.dart';

class GPTClient {
  final projectile = Projectile(client: HttpClient(config: const BaseConfig(enableLog: false)));

  Future<String?> getPageSummary(String url) async {
    final response = await projectile
        .request(
          ProjectileRequest(
            method: Method.POST,
            target: 'https://api.openai.com/v1/chat/completions',
            headers: {
              HeadersKeys.authorization: 'Bearer ${Env.openAIKey}',
              HeadersKeys.contentType: ContentType.json,
            },
            body: {
              'model': 'gpt-3.5-turbo',
              'messages': [
                {
                  'role': 'system',
                  'content': 'You are text summarizer tool',
                },
                {
                  'role': 'user',
                  'content': 'Please summarize this article: $url',
                }
              ]
            },
          ),
        )
        .fire();

    if (response.isFailure) {
      return null;
    }

    final json = response.data as Map<String, dynamic>;
    final completions = json['choices'] as List<dynamic>;

    return completions[0]['message']['content'] as String;
  }
}

2) Create the UI to show the summary:

class _ChromePopupState extends State<ChromeHomePage> {
  bool isLoading = false;
  final GPTClient summaryApiClient = GPTClient();

  String? summary;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Row(
          children: [
            FlutterLogo(size: 32),
            Text('Chrome Demo Extension'),
          ],
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: Column(
          children: [
            const Text('Choose which option to summarize'),
            const SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blueAccent,
                  ),
                  onPressed: _summaryAllPage,
                  child: const Text(
                    "All page",
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.white,
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blueGrey,
                  ),
                  onPressed: _summarySelectedText,
                  child: const Text(
                    "Selected text",
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 10),
            const Text(
              'Summary',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 10),
            Expanded(
              child: SingleChildScrollView(
                child: Container(
                  margin: const EdgeInsets.only(bottom: 20),
                  child: isLoading ? const Center(child: CircularProgressIndicator()) : Text(summary ?? ''),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _summarySelectedText() async {}

  Future<void> _summaryAllPage() async {
    print('Summary all page');
    String url = await selectUrl();

    setState(() {
      isLoading = true;
    });

    summary = await summaryApiClient.getPageSummary(url) ?? 'Error fetching summary';

    setState(() {
      isLoading = false;
    });
  }

  Future<String> selectUrl() async {
    List tab = await promiseToFuture(
      query(ParameterQueryTabs(active: true, lastFocusedWindow: true)),
    );
    return tab[0].url;
  }
}

What's next?

In this post, we have covered the basic setup for a Flutter Chrome Extension, how to communicate between the extension components, and how to inject HTML and CSS into the current page.

Additionally, we see how to use Flutter to call the ChatGPT API to summarize the text of the current page.

Summarizing the selected text needs to be added; in the next post, we'll cover how to do that. I tried to do it in this post but needed some help with the interaction of some current JS APIs; also communicating the background/contentScript with the Extension is a challenge with Flutter.

Conclusion

For me creating a Chrome Extension with Flutter is a challenge; but I think that is a good way to learn more about the Flutter framework and how to use it in different scenarios.

If you are thinking of creating a Chrome Extension that uses a lot of interaction with JS API; I recommend not using Flutter; in that case, it is better to use another framework.

If you plan to create an extension that uses the Flutter UI; I recommend you to use Flutter; which is a good way to create a cross-platform extension.

Official Github Repository: Link

Thank you for reading this far. Consider giving it a like, sharing it, and staying tuned for future articles. Feel free to contact me via LinkedIn.

References

Decoding Isolates: Basic to advanced concepts - Part3

James Cardona — Sun, 24 Mar 2024 00:02:21 +0000

DEMO

Thank you for being here in the last part of this series.
Surely if you got this far you are like this:

I'll explain the problem and add any specific comments as needed, This use case are things that I wrote in the past to solve a problem in real apps.
1- Image processing
Create a solution to compress an image; move it to the internal folder of the device and show the compressed image.

Solution:

Use a compute/Isolate.run because is a single operation
Pick an image from the UI (MainIsolate) and send the image path to the Isolate
Use a compress algorithm
Move the isolate to the internal folder
Return the new Path to the Main Isolate

From Dart 3.7 you can use background Isolates; this is a subject that I don't cover here but you can check more information here. P1.
The operation of obtaining the internal directory of the application is an operation that requires us to use BackgroundIsolates to be able to use plugins that are not written in Dart.
If you don't want to use BackgroundIsolates you can send the internal folder as a param.
Trigger event:

var rootToken = RootIsolateToken.instance!;
// get the file location
newPath = await Isolate.run(
  () => ImageProcessingIsolate.compressImage(
      FileInfo(
        maxSize: 1 * 1024 * 1024, // <<1MB
        fileLocation: originalPath!,
      ),
      token: rootToken,
    ),
  );

Isolate:

static Future<String?> compressImage(FileInfo info, {RootIsolateToken? token}) async {
    if (token != null) {
      BackgroundIsolateBinaryMessenger.ensureInitialized(token);
    }

    final helper = CompressImageService(info);

    final fileBytes = await _loadBytes(info.fileLocation);
    final newFileBytes = await helper.executeCompression(fileBytes);
    final internalFolder = await _getInternalFolder();

    return MoveFiles.saveInAppSystem(newFileBytes, internalFolder);
}

For isolate to work it is not necessary to know what the compression and file-moving functions do, but you can explore the solutions in the repository.

2- Upload images to the server.
Upload the images to the server as a String in Base64; you can pick the images and go to another screen; the upload will be kept in the background and all screens need to listen to the updates.
Maybe this approach is not the best way, but in one application that I wrote in the past, this was the way provided from the backend.

Solution:
Use a Spawn Isolate to send images to Isolates
Starts uploading images as you select images
Inform when the upload Start
Inform when the Image completes the Upload
Change the Image state - Uploading/ Completed
Show progress in the UI (How many images are left?)
Use a provider to listen and send messages to the isolate.

The messages for the entrypoint:
sealed class IsolateMessage {}

class IsolateMessageData extends IsolateMessage {
  final List<AttachmentInfo> data;

  IsolateMessageData(this.data);
}

class IsolateMessageClose extends IsolateMessage {}

Provider; the provider is used to share the IsolateController instance between different screens.

class UploadImageProvider extends ChangeNotifier {
  final Map<String, AttachmentInfo> _attachments = {};
  IsolateControllerForUpload<IsolateMessage, AttachmentInfo>? _isolateController;
  StreamSubscription? _subscription;

  void init() async {
    _isolateController = await IsolateControllerForUpload.create();
    _subscription = _isolateController?.broadcastRp.listen((attachment) {
      _attachments[attachment.id] = attachment;
      notifyListeners();
    });
  }

  void addAttachments(List<AttachmentInfo> attachments) {
    for (final attachment in attachments) {
      _attachments[attachment.id] = attachment;
    }
    _isolateController?.send(IsolateMessageData(attachments));

    notifyListeners();
  }

  List<AttachmentInfo> get attachments => _attachments.values.toList();

  int get completedCount => _attachments.values.where((element) => element.state == AttachmentInfoState.completed).length;
  int get totalCount => _attachments.length;

  @override
  void dispose() {
    super.dispose();
    _subscription?.cancel();
    _isolateController?.dispose();
  }
}

The only difference between this IsolateControllerForUpload and the controller from the second post is the entrypoint and the In/Out models; other parts remain as in the previous implementation.

Entrypoint
When the message has a list of attachments; In this demo, we are going to process them as if they were messages with a single attachment; For that, I am going to use SwitchMap to convert the list of attachments into a list of messages with a single attachment

final messages = rp.takeWhile((element) => element is IsolateMessage)
  .cast<IsolateMessage>()
  .switchMap(
    (message) {
      if (message is IsolateMessageData) {
        return Stream.fromIterable(message.data).map((event) => IsolateMessageData([event]));
      } else {
        return Stream.value(message);
      }
    },
);

final base64Converter = ConvertImageToBase64();
final mockUploadImage = MockUploadImage();

await for (final message in messages) {
  switch (message) {
    case IsolateMessageData _:
      // Early the original list of messages; was converted into multiple messages with a single item per list.
      // This help me to achieve a better control of the state of each item.
      // You can use another approach to achieve the same result.
      final data = message.data.first;
      sendPort.send(data.updateState(AttachmentInfoState.uploading));
      final base64 = await base64Converter.convert(data.fileLocation);

      mockUploadImage.uploadImage(base64).then((value) {
        print('Uploaded');
        sendPort.send(data.updateState(AttachmentInfoState.completed));
      }).catchError((error) {
        sendPort.send(data.updateState(AttachmentInfoState.failed));
      });
      break;
    case IsolateMessageClose _:
      Isolate.exit(sendPort, 'closed');
  }
}

A possible improvement for this code is to set a limit at the same time the uploadImage method is called so as not to overwhelm the server using a queue or a similar solution.
Now in the UI, you can use the provider to show on every screen the totalCount and the completedCount

Padding(
    padding: const EdgeInsets.symmetric(vertical: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Images: ${_provider.totalCount}'),
        const SizedBox(width: 20),
        Text('Completed ${_provider.completedCount}'),
      ],
    ),
  ),

Thank you for reading this far. Consider giving it a like, sharing it, and staying tuned for future articles. Feel free to contact me via LinkedIn.

References

Decoding Isolates: Basic to advanced concepts - Part2

James Cardona — Sat, 23 Mar 2024 23:59:36 +0000

In the previous post, we learned the basics of isolates and how to spawn them.
In this post, we will learn how to communicate between isolates and some best practices to keep in mind when working with isolates.

Communicate between two isolates

If you read the previous section, you should have a basic understanding of the Actor Model and how isolates work. Now, let's see how to communicate between two isolates using SendPort and ReceivePort.

First of all, let's understand what is a SendPort and a ReceivePort.

ReceivePort: It is a reference to a message queue. You can use it to receive messages from another isolate.
SendPort: You can use it to send messages to another isolate.

A SendPort object is associated with exactly one ReceivePort. But a ReceivePort can have multiple SendPort objects associated with it.

We have two ways to create a ReceivePort; RawReceivePort and ReceivePort. The difference between them is that RawReceivePort is a low-level API and ReceivePort is an API that implements the Stream interface.

If the message object is mutable; Isolate the values to avoid changing the original.
If the object is immutable; Isolate the reference to the object.

Steps to exchange the SendPort between isolates

Create a ReceivePort before you Spawn the isolate.
Pass the SendPort as an argument to the Spawned isolate. (in the entrypoint of the isolate)
Create a ReceivePort in the Spawned isolate.
Send the SendPort from the Spawned isolate using the SendPort to the Main Isolate.
In the Main Isolate, listen to the ReceivePort or wait for the SendPort.

The Same code as before to explain the steps in Spawn isolates.
I'm going to add the entry point

  void spawn() async {
    print('Spawn');
    final rcvPort = ReceivePort(); // --> Step 1

    // --> Step 2
    final isolate = await Isolate.spawn(_doSomethingForSpawn, rcvPort.sendPort);

    final completer = Completer<SendPort>();
    rcvPort.listen((message) {

      // --> Step 5
      if (message is SendPort) completer.complete(message);

      print(message);

      if (message is! SendPort) {
        rcvPort.close();
        isolate.kill();
      }
    });

    final send2Isolate = await completer.future;
    send2Isolate.send(1000000000);
  }

We receive the SendPort from the main isolate as an argument in the entrypoint of the isolate.

  void _doSomethingForSpawn(SendPort sendPort) {
  final rcvPort = ReceivePort(); // --> Step 3
  sendPort.send(rcvPort.sendPort); // --> Step 4

  rcvPort.listen((bigNumber) {
    var sum = 0;
    for (var i = 0; i <= bigNumber; i++) {
      sum += i;
    }

    sendPort.send(sum);
  });
}

In this case, we wait for the SendPort from the SpawnedIsolate; using a completer and the first event in the Isolate listener. Later we are going to exchange this in other ways using the same concept.

Best practices with isolates

The following are some best practices to keep in mind when working with isolates; we will cover these in the next examples.

Error handling: Always handle errors in isolates to prevent crashes.
Kill isolates: Always kill isolates when they're no longer needed.
Limit communication: Avoid sending large objects between isolates.

How to structure?

In the last example, we saw how to exchange the SendPort between isolates, but we can improve the structure of the code. We can explore more in-depth the concept of exchanging the SendPort between isolates.

In order to follow this section; we are using the next example to explain the concept and you need to know about Streams and Futures.

/// TODO

What does this example do?

We send a Random number from the MainIsolate to the SpawnedIsolate.
The SpawnedIsolate converts that number to a String and sends it back to the MainIsolate.

Start with the entrypoint; you can change the await for to listen if you want.

void _entryPoint(SendPort sendPort) async {
  final rp = ReceivePort();
  sendPort.send(rp.sendPort);

  final messages = rp.takeWhile((element) => element is int).cast<int>();

  await for (final message in messages) {
    final r = generateRandomString(message);
    sendPort.send(r);
  }
}

The UI shows the data and the button to send the random number to the SpawnedIsolate.

class BidirectionalExample extends StatefulWidget {
  ...
}

class _BidirectionalExampleState extends State<BidirectionalExample> {
  List<String> encodedData = [];
  int? lastRandomNumber;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            TextButton(
              onPressed: () {
              },
              child: const Text('Random number'),
            ),
            const SizedBox(height: 20),
            if (lastRandomNumber != null) Text('Last random number: $lastRandomNumber'),
            const SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: encodedData.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(encodedData[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// TODO
You can find the function to generate the random number and the string in the next file.

Step 1

Create the new variables to handle the isolates and the subscription to the messages.

We need the StreamSubscription to cancel the subscription when the widget is disposed and Completer to wait for the SendPort from the SpawnedIsolate.

Also we keep the Isolate reference to kill the Isolate when the widget is disposed.

  StreamSubscription? subscription;
  final completer = Completer<void>();
  SendPort? send2Isolate;
  Isolate? isolate;

Step 2
Create a function to run in the initState; and Spawn the isolate and create the subscription to receive messages to update the UI

  @override
  void initState() {
    super.initState();
    createIsolate();
  }

  void createIsolate() async {
    final receivePort = ReceivePort();
    isolate = await Isolate.spawn(_entryPoint, receivePort.sendPort);

    final broadcastRp = receivePort.asBroadcastStream();
    send2Isolate = await broadcastRp.first;

    initSubscriptions(broadcastRp);
  }


  void initSubscriptions(ReceivePort receivePort) {
    subscription = receivePort.listen((message) {
      if (message is SendPort) {
        initSendPort(message);
        completer.complete();
      } else if (message is String) {
        encodedData.add(message);
        setState(() {});
      }
    });
  }

Step 3

Create the onPressed function to send the random number to the SpawnedIsolate.

  void sendRandomNumber() async {
    lastRandomNumber = generateRandomNumber();
    setState(() {});
    await completer.future;
    send2Isolate?.send(lastRandomNumber);
  }

The completer indicates when the isolate is ready to receive messages; when is ready we receive the SendPort from the SpawnedIsolate and then we can send the random number.

With this basic structure, we separate the logic to create the isolates and the logic that handles receiving messages.

Optional implementation
We want to avoid using a completer. We can use a Stream to listen to the SendPort from the SpawnedIsolate.
If you remember ReceiverPort is a Stream and we can use the Stream methods to listen to the SendPort from the SpawnedIsolate.

You need to convert the receivePort to a broadcast stream in order to get the first event that is the SendPort from the SpawnedIsolate. (Check the second line in the entrypoint)

  void createIsolate() async {
    final receivePort = ReceivePort();
    isolate = await Isolate.spawn(_entryPoint, receivePort.sendPort);

    final broadcastRp = receivePort.asBroadcastStream();
    send2Isolate = await broadcastRp.first;

    _sendPortController.add(send2Isolate!);
    initSubscriptions(broadcastRp);
  }

  // Also we can change the initSubscriptions to something like this
  void initSubscriptions(Stream<dynamic> receivePort) {
    subscription = receivePort //
        .takeWhile((element) => element is String)
        .cast<String>()
        .listen((message) {
      encodedData.add(message);
      setState(() {});
    });
  }

What is missing?

Error handling
Kill isolate

We are going to cover these in the next section.

Create a Wrapper/Controller

The main goal is to create something to handle the isolate creation; the messages and the error handling.
We are going to use the same example to explain the concept.


class IsolateController<T> {
  final Isolate _isolate;
  final ReceivePort _receivePort;
  final Stream<dynamic> _broadcastRp;
  final SendPort _sendPort;

  static Future<IsolateController<T>?> create<T>();

  Stream<dynamic> get broadcastRp;

  void send(T message);

  void close();

}

Step 1
Use the same code that we have in the previous example to create the isolates.


static Future<IsolateController<T>?> create<T>() async {
  final receivePort = ReceivePort();

  try {
    final isolate = await Isolate.spawn(
      _entryPoint,
      receivePort.sendPort,
      errorsAreFatal: true,
    );

    final broadcastRp = receivePort.asBroadcastStream();
    final send2Isolate = await broadcastRp.first;

    return IsolateController._(
      isolate: isolate,
      receivePort: receivePort,
      broadcastRp: broadcastRp,
      sendPort: send2Isolate,
    );
  } on Object {
    receivePort.close();
    return null;
  }

The main difference is that we are using a try/catch to handle the errors and close the receivePort if something goes wrong.

Step 2

Create other methods to handle the messages and close the isolates.

  Stream<dynamic> get broadcastRp => _broadcastRp;

  void send(T message) {
    _sendPort.send(message);
  }

  void close() {
    _receivePort.close();
    _isolate.kill();
  }

Step 3

How does the UI code change according to the new implementation?

  // New variables
  StreamSubscription? subscription;
  IsolateController<int>? isolateController;

  // Create the Isolate from the initState
  void createIsolate() async {
    isolateController = await IsolateController.create();
    subscription = isolateController?.broadcastRp.listen((message) {
      encodedData.add(message);
      setState(() {});
    });
  }

  @override
  void dispose() {
    isolateController?.close();
    subscription?.cancel();
    super.dispose();
  }

OnPressed function to send the random number to the SpawnedIsolate.

  void sendRandomNumber() async {
    lastRandomNumber = generateRandomNumber();
    setState(() {});

    isolateController?.send(lastRandomNumber!);
  }

How to improve the IsolateController?

In this implementation, we keep the instance of the Isolate to kill it when the widget is disposed. We can implement something to close the Isolate from inside.
We can parametrize the In and Out data types. We can change the In to use Sealed classes to handle the different types of messages that we can send to the SpawnedIsolate.

Create a Wrapper/Controller V2

In this implementation you can see a different way to exchange the SendPort between isolates.
If you want to see the full implementation using completer check this branch spawcontroller2-with-completer

This implementation uses Completer to wait for the SendPort from the SpawnedIsolate.
What is better; use a Stream or a Completer; it depends on the use case my goal here is to show you the different ways to exchange the SendPort between isolates.

The controller structure

class IsolateController<I, O> {
  final SendPort _commands;
  final ReceivePort _responses;

  final StreamController<O> _controller = StreamController<O>.broadcast();
  late final StreamSubscription<O> _subscription;

  static Future<IsolateController<I, O>?> create<I, O>();

  Stream<O> get broadcastRp;

  void send(I message);

  void dispose();
}

How is the SealedClass and the new implementation of the entrypoint?

// Create many classes to handle the different types of messages that we can send to the SpawnedIsolate.
sealed class IsolateMessage {}

class IsolateMessageData extends IsolateMessage {
  final int data;

  IsolateMessageData(this.data);
}

class IsolateMessageClose extends IsolateMessage {}


void _entryPoint(SendPort sendPort) async {
  ...// same as before
  await for (final message in messages) {
    switch (message) {
      case IsolateMessageData _:
        ...
        break;
      case IsolateMessageClose _:
        ...
    }
  }
}

In this case to exchange the SendPort; use a completer to get from the first message in the ReceivePort; and use RawReceivePort this class doesn't implement the Stream interface.

  static Future<IsolateController<I, O>?> create<I, O>() async {
    final initPort = RawReceivePort();
    final connection = Completer<SendPort>.sync();

    /// Use a callback to get the SendPort from the SpawnedIsolate
    /// The SendPort is the first message in the ReceivePort
    initPort.handler = (initialMessage) {
      connection.complete(initialMessage as SendPort);
    };

    try {
      await Isolate.spawn(
        _entryPoint,
        initPort.sendPort,
        errorsAreFatal: true,
      );

      /// Wait to the completer
      final SendPort sendPort = await connection.future;

      return IsolateController._(ReceivePort.fromRawReceivePort(initPort), sendPort);
    } catch (e) {
      initPort.close();
      print(e);
      return null;
    }
  }

With this implementation how do we close the Isolate from inside?
Send a IsolateMessageClose close the Isolate.

  void dispose() {
    _commands.send(IsolateMessageClose());
    _subscription.cancel();
    _responses.close();
  }

In the entryPort close the Isolate when we receive the IsolateMessageClose. Use one of these two options.

Isolate.exit(); // This method allows to send a last message to the MainIsolate
rp.close();

  void _entryPoint(SendPort sendPort) async {
    ...

    await for (final message in messages) {
      switch (message) {
        ...
        case IsolateMessageClose _:
          Isolate.exit(sendPort, 'Closed'); // or rp.close();
          break;
      }
    }
  }

Update the UI:

Call the dispose isolate method in the dispose method of the widget.
The send method needs to send an IsolateMessageData to the SpawnedIsolate.

  void sendRandomNumber() async {
    ...
    isolateController?.send(IsolateMessageData(lastRandomNumber!));
  }

  @override
  void dispose() {
    isolateController?.dispose();
    subscription?.cancel();
    super.dispose();
  }

Conclusion

Using controller v1 or v2 will depend on how you wait to develop; in the v2 to kill the Isolate; the Isolate needs to receive a message to close.
Use Stream or Completer depending on what is easier for you in terms the complexity.
Take in mind this is a basic structure; you can add more complexity according to your necessities.

DEMO

The truth of Demo use cases is I'll explain the problem and add any specific comments as needed, but you can access to demo code directly from the GitHub repository.

The code is inside the demo folder;

1- Image processing

Use a compute/Isolate.run because is a single operation
Pick an image from the UI (MainIsolate) and send the image path to the Isolate
Use a compress algorithm
Move the isolate to the internal folder
Return the new Path to the Main Isolate

1- Upload images to the server.

Use a Spawn Isolate to send images to Isolates
Starts uploading images as you select images
Inform when the Upload Start
Inform when the Image completes the Upload
Change the Image state - Uploading/ Completed
Show progress in the UI (How many images are left?)

Decoding Isolates: Basic to advanced concepts - Part1

James Cardona — Sat, 23 Mar 2024 23:56:39 +0000

The post will provide a comprehensive exploration of Dart isolates, covering fundamental concepts and advanced techniques. It will delve into the basics of isolates, their role in concurrency, and how they relate to futures and streams. The discussion will extend to advanced topics, such as message passing, isolates communication, and optimizing performance also I'll show two practical demos.

This post is the first part of two; in this part, we are going to see the theory in deep to understand Isolates.

The second part introduces a way to create an Isolate Wrapper/Controller and shows the three demos around Isolates.

What are isolates?

An Isolate in Dart enables concurrent processing, allowing multiple tasks to run simultaneously. It operates as a "thread" with its event loop and separate memory space(it's a thread wrapper).

One of the differences with threads is Isolates don't share memory and communicate with each other through messages using the Actor Model (We'll visit this later).

In Flutter, they're used to perform intensive tasks in a separate space other than the main one, preventing delays in the user interface.

Isolates enable Dart code execution separate from the main UI.
They facilitate concurrent operations without blocking the UI.
Isolates operate as distinct Dart VM instances enabling parallelism processing.
Each isolate has its own memory space, state, and event loop.

Why do we need them?

Before we get into this, we first need to understand how async-await and the event handling.

Event Loop

Dart is single-threaded, which means it can only execute one task at a time. This is where the event loop comes in. The event loop is a queue of tasks that are executed in order.

Imagine you're in a busy coffee-shop where a barista handles orders efficiently. The barista represents Flutter's event loop, constantly processing orders (events) from customers (user interactions). Just like the barista ensures everyone gets served promptly, Flutter's event loop keeps the app responsive to user actions and updates.

Async-Await

Async doesn't mean parallel, it means non-blocking. When you call an async function, it returns a Future immediately. The function continues to execute, and when it's done, it completes the Future. This is the basis of the event loop, which is a queue of tasks that are executed in order.

Suppose you have an I/O operation to read a JSON file, the event loop will work like this:

1- We receive the request to read the file.
2- The event loop will add the task to the queue.
3- The event loop will continue to process other tasks.
4- When the file is read, the event loop will execute the callback.

More information about this can be found in the Dart Futures - Flutter in Focus.

Event handling

Isolate encapsulates a wrapper around thread; each isolate ha with its event loop managing queued events. Events, representing user interactions, are processed by the event loop in a FIFO manner. This ensures the timely execution of app actions.

For a moment let's imagine that we have to do an I/O operation like reading a JSON; that this file is very large and the task takes a long time to complete. Now the event queue and the event loop look similar to the image below.

Since the main isolate struggles to promptly process events, our animations or UI may freeze, frustrating users and causing significant drop-offs. Here's where creating a new isolate or a worker isolate becomes crucial.

Let’s get back to Isolates.; why do we need them?

Concurrency: Execute Dart code simultaneously, without affecting the main thread.
Isolation: Each isolate has its memory, avoiding data issues.
Parallelism: Run code on multiple CPU cores for better performance.
Communication: Isolates exchange messages to share information.
Background Processing: Run time-consuming tasks in the background without UI impact.
Heavy task: Like image processing or data fetching.

How to implement Isolates?

Basically, there are two ways to create an isolate:

Compute Isolate (This use Isolate.run)
Spawn Isolate (This use Isolate.spawn)

As we mentioned before, Isolates unlike threads, don't share memory, and communicate with each other through messages using the Actor Model. This means that you can't share data between isolates, you need to send messages to communicate between them.

The entry point of an isolate is a function and must be a top-level or static function. Depending on the method you use to create an isolate, you can pass arguments to the function.

Here is the link to the code if you want to follow along.

Image you need to calculate a progressive sum of a number.

void doSomething(var bigNumber) {
  final timer = Stopwatch()..start();
  print('Doing something');

  var sum = 0;
  for (var i = 0; i <= bigNumber; i++) {
    sum += i;
  }
  print('finished ${sum}');
  print('InitializeAppData Completed in ${timer.elapsedMilliseconds} ms');
  timer.stop();
}

If you try to execute this function without using an isolate, you will notice that the UI will freeze for a few seconds. This is because the main isolate is busy calculating the sum, and it can't process any other events.

Compute Isolate

The compute or Isolate.run function creates an isolate and runs the specified function in it. This is useful for short-lived tasks that don't require continuous communication between isolates.

You can use compute or Isolate.run to execute the function in a separate isolate. Both methods return a Future that completes with the result of the function.

  void computeIsolate() {
    print('Compute');
    compute(doSomething, 1000000000);
  }

  void runIsolate() {
    print('Run');
    Isolate.run(() => doSomething(1000000000));
  }

Spawn Isolate

The spawn function creates an isolate and runs the specified function in it. This is useful for long-lived tasks that require continuous communication between isolates.

  void spawn() async {
    print('Spawn');
    final rcvPort = ReceivePort();

    final isolate = await Isolate.spawn(_doSomethingForSpawn, rcvPort.sendPort);

    final completer = Completer<SendPort>();
    rcvPort.listen((message) {
      if (message is SendPort) completer.complete(message);

      print(message);

      if (message is! SendPort) {
        rcvPort.close();
        isolate.kill();
      }
    });

    final send2Isolate = await completer.future;
    send2Isolate.send(1000000000);
  }

In the next image, you can see the difference between the do the execution in main isolate and use an isolate.

// TODO
The code of this specific example is here link; inside the learning 1 folder.

I'll return later to explain the steps of the spawn function also we need to cover what is a SendPort and a ReceivePort, and how to use them to communicate between isolates; before that, I want to give you a brief explanation of the Actor Model.

Actor Model

If you want to understand in more detail what the paradigm is that drives how isolates work?, this section is a summary of it; As a personal appreciation, this helped me understand how to create good architecture around the Isolates; but you are free to skip to the next session.

Concurrency models

Processes
Threads
Futures
Coroutines
Actor
etc

What is the Actor Model?

The actor model is a concurrent programming that is based on the concept of actors. An actor is an entity that encapsulates state and behavior, communicates with other actors by sending and receiving messages, and processes messages sequentially.

Key concepts:

Actors are persistent.
Encapsulate internal state (Private).
Actors are asynchronous.
Communication through messages.
Independence between actors.
Supervision.

What can actors do?

Create new actors.
Send messages to other actors.
Receive messages and in-responses.
Process exactly one message at a time.

“Do not communicate by sharing memory; instead, share memory by communicating" | Effective Go

Properties of communication

NO channels or intermediaries.
“best effort” delivery.
Messages can take an arbitrarily long time to deliver.
No message ordering guarantees.

Address

Each actor has an address.
Actors can communicate with other actors using their addresses (Use SendPort to send messages).
The actor receives addresses from other actors in messages (Listen ReceivePort).
One actor can have more than one address.
Address != identify; this means two actors with the same identity can have different addresses.

Supervision
The running state of an actor is monitored and managed by another

Constantly monitors the running state of the actor (is alive, restart)
Can perform actions based on the state of the actor (eg unhandled error)

Isolates similarities

ReceiverPort is a similar concept to Actor Mailbox.
The Mailbox is a message queue.
SendPort is a similar address concept in the actor.

This is the basic concept of the Actor Model, and it's the base of how isolates work. With this in mind, we can understand how to use SendPort and ReceivePort to communicate between isolates.

Here is a summary of the difference between Isolates and Threads that are provided by the Actor Model.

Isolation of memory: Isolates don’t share memory and the data is passed through messages.
Lightweight: You can create thousands of isolates.
Safe concurrency: Isolates provide a safe way to perform concurrent operations, minimizing the risk of common concurrency issues like deadlocks.

Communicate between two isolates

If you read the previous section, you should have a basic understanding of the Actor Model and how isolates work. Now, let's see how to communicate between two isolates using SendPort and ReceivePort.

First of all, let's understand what is a SendPort and a ReceivePort.

ReceivePort: It is a reference to a message queue. You can use it to receive messages from another isolate.
SendPort: You can use it to send messages to another isolate.

A SendPort object is associated with exactly one ReceivePort. But a ReceivePort can have multiple SendPort objects associated with it.

We have two ways to create a ReceivePort; RawReceivePort and ReceivePort. The difference between them is that RawReceivePort is a low-level API and ReceivePort is a high-level API that this implements the Stream interface.

If the messages object is mutable; Isolates the values to avoid change the original.
If the object is immutable; Isolates the reference to the object.

Steps to exchange the SendPort between isolates

Create a ReceivePort before you Spawn the isolate.
Pass the SendPort as argument to the Spawned isolate. (in the entrypoint of the isolate)
Create a ReceivePort in the Spawned isolate.
Send the SendPort from the Spawned isolate using the SendPort to the Main Isolate.
In the Main Isolate, listen to the ReceivePort or wait for the SendPort.

Same code as before to explain the steps in Spawn isolates.
I'm going to add the entry point

  void spawn() async {
    print('Spawn');
    final rcvPort = ReceivePort(); // --> Step 1

    // --> Step 2
    final isolate = await Isolate.spawn(_doSomethingForSpawn, rcvPort.sendPort);

    final completer = Completer<SendPort>();
    rcvPort.listen((message) {

      // --> Step 5
      if (message is SendPort) completer.complete(message);

      print(message);

      if (message is! SendPort) {
        rcvPort.close();
        isolate.kill();
      }
    });

    final send2Isolate = await completer.future;
    send2Isolate.send(1000000000);
  }

We receive the SendPort from the main isolate as argument in the entrypoint of the isolate.

  void _doSomethingForSpawn(SendPort sendPort) {
  final rcvPort = ReceivePort(); // --> Step 3
  sendPort.send(rcvPort.sendPort); // --> Step 4

  rcvPort.listen((bigNumber) {
    var sum = 0;
    for (var i = 0; i <= bigNumber; i++) {
      sum += i;
    }

    sendPort.send(sum);
  });
}

In this case we wait for the SendPort from the SpawnedIsolate; using a completer and the first event in the Isolate listener. Later we are going to exchange this in other ways using the same concept.

Best practices with isolates

Error handling: Always handle errors in isolates to prevent crashes.
Kill isolates: Always kill isolates when they're no longer needed.
Limit communication: Avoid sending large objects between isolates.

See you in the next part where we will apply concepts from the Actor model to create a Wrapper/Controller for our Isolates

Thank you for reading this far. Consider giving it a like, sharing it, and staying tuned for future articles. Feel free to contact me via LinkedIn.

References

Git para todos. Parte 4 - Deshacer errores

James Cardona — Wed, 25 May 2022 00:00:00 +0000

Los errores pueden pasar, el desarrollo de software es un proceso creativo y que involucra personas, las personas cometemos errores.
Para eso es git, es nuestro helper, nuestra muralla para combatir errores.

La recomendación para sacar el máximo provecho a este tutorial es preparar un ambiente para ver en acción como operan las diferentes condiciones.
Con todo lo que has aprendido hasta acá va a ser muy fácil para ti preparar ese ambiente de trabajo. Puedes usar este cómo base para iniciar github

1 Descartar todos los cambios en un archivo (uncommitted)

Pre: Edita un archivo que estemos traqueando y que no hayamos confirmado los cambios

-> git restore <file-name> o
-> git checkout <filename>

2 Restaurar un archivo eliminado (uncommitted)

Pre: Elimina un archivo que estemos traqueando y que no hayamos confirmado el borrado

-> git restore <file-name>

3 Descartar algunas líneas de un archivo (uncommitted)

Pre: Edita un archivo que estemos traqueando diferentes líneas de código y que no hayamos confirmado los cambios

-> git restore -p <file-name>

4 Descartar todos los cambios en local (uncommitted)

Pre: Edita multiples archivo que estemos traqueando diferentes líneas de código y que no hayamos confirmado los cambios

-> git restore .

5 Arreglar el último commit

Pre: Has un commit y copia mal el mensaje o deja algunos archivos sin completar

-> git commit --amend -m <new-message>

Si quieres agregar algo que olvidaste
-> git add .
-> git commit --amend -m <new-message> o git commit --amend --no-edit

amend es un comando que reescribe el historial y si lo reescribimos debemos tener cuidado con los cambios en remoto

6 Revertir un commit en la mitad del proceso

Pre: Busca un estado previo(hash) de un commit para restaurar a ese estado

-> git revert <hash>
Cuando se hace esto git va a crear un nuevo commit con el estado del revert

7 Resetear a una versión anterior

Pre: Busca un estado previo(hash) de un branch para resetear a ese estado

-> git reset --hard <#hash>
Cuidado que el --hard va a eliminar los commits después del hash destino

-> git reset --mixed <#hash>
Mantienen los cambios descartados como cambios locales, para que puedas trabajar con ellos, modificarlos, etc.

8 Resetear un archivo a versión anterior

Pre: Busca un estado previo(hash) de un branch para resetear a ese estado

-> git restore --source <#hash> <file-name>

9 Recuperar commits borrados

Pre: Después de realizar el punto #8 puedes buscar el hash desde donde partiste para hacer el reset

-> git reflog search the hash o HEAD# antes del reset
-> git branch <branch-name> <#hash>

10 Recuperar una rama borrada

Pre: Buscar el hash desde donde partiste para borrar la rama

-> git reflog search the hash o HEAD# de la rama
-> git branch <branch-name> <#hash>

11 Mover un commit a una nueva rama

Pre: Crea un commit en una branch

-> git branch <branch-name>
-> git reset HEAD~1 --hard

12 Mover un commit a una rama diferente

Pre: Crea dos branch con al menos un commit en cada una, mueve uno de los commit a la otra rama

-> movernos a la rama destino switch o checkout
-> git cherry-pick <hash>
-> movernos a la rama origen de donde movimos el commit
-> git reset HEAD~1 --hard

Conclusiones

Si llegaste hasta acá gracias por todo.
Puedes consultar más casos acá, adicional te invito a dejarme nuevos casos y si quieres que hagamos algunos más.
Puedes buscarme en Linkedin

Referencias

Version control Git - Book

Video

Gracias por llegar hasta acá, considera dar un like, compartir y nos vemos en un próximo artículo.

Git para todos. Parte 3 - Uso avanzado

James Cardona — Sat, 21 May 2022 00:00:00 +0000

Si llegaste hasta acá, estoy seguro que ya tienes dominado gran parte de lo que se requiere para ser un pro en git.
En este tutorial y el próximo vamos a ver algunas situaciones particulares y como las podemos gestionar con git.
Ese es el objetivo poder entrar a entender y resolver situaciones difíciles.

Volvamos a lo básico - Un buen commit

¿Cómo definimos un buen commit? ¿Por qué me debo preocupar por esto ?
La verdad la razón base por volver a tratar este tema acá es que cuando estoy desarrollando debo pensar como solucionar problemas que pueda tener el "yo futuro"

Una de la forma de hacerlo es creando commits adecuados que me permitan solucionar problemas futuros.

Compacto: Los cambios deben ser específicos o relacionados.
Descriptivo: Debe ser legible la solución, los pendientes y que hiciste
Pensar en el futuro: Un buen commit va a ayudar hacer un tracking de posibles errores en el futuro

Propuesta para los commits:

<type>: <description>
[optional body]

[] List of changes

[optional scope]

Ejemplo:

fix: fix the animation for drawer

[X] Add new flag to control the state when is open
[X] Test on android and iOS
[ ] is pending interact with ....

TOK-1766 Jira

Esto fue tomado de acá: https://udacity.github.io/git-styleguide/

Stash

¿Qué pasa si tengo trabajo iniciado y debía hacer algo antes de iniciar?
Tengo que ayudar a alguien y necesito "descartar" mi trabajo temporal. En cualquier caso similar no quiero perder mi avance y tampoco quiero hacer un commit.

Git nos da la posibilidad de usar un "sub-espacio" temporal, esto es lo que se conoce como stash, esté espacio temporal nos permite guardar cambios sin llevarlos al historial de commits.

Comandos básicos

git stash: Para guardar cambios sin commit
git stash list: Para listar los que tenemos en el stash
git stash show: Muestra el último stash
git stash show stash@{1}: Muestra un stash específico
git stash pop: Aplica los cambios a nuestro workspace
git stash drop: Descarta los cambios
git stash clear: Descarta todos los cambios
git stash branch <branch-name>: Crear una rama nueva desde el último stash
git stash branch <branch_name> stash@{#}: Crear una rama nueva desde un stash específico

Cuando usamos el comando git stash list sale algo parecido a esto:

Entendamos está información:

Stash@{0}– esto es solo una referencia oculta. Se refiere al stash particular. De forma predeterminada, Stash@{0}siempre es el último stash.
WIP On rama– rama es solo un nombre de branch como cualquier otra branch y WIP significa Work In Progress.
8177255 <...> es el hash de confirmación y un breve encabezado

Reset

Esté es un comando muy peligroso porque puede dañar nuestro trabajo si se utiliza mal, pero es muy útil para muchas cosas.
El reset es básicamente volver a un estado anterior, una branch, un archivo, un commit.

Generalmente, es usado para devolver el estado de una branch que se dañó luego de un merge o algún cambio no deseado. Por el momento vamos a ver este comportamiento y ampliaremos más su uso en el próximo tutorial.

Recuerdas el concepto de HEAD, cuando hacemos un merge y queremos devolvernos al estado anterior de ese merge podemos usar:
<destino> para este ejemplo puede ser un hash o un HEAD.

git reset --hard <destino>: Restablece el estado destino. Cualquier cambio en los archivos ya committed en el árbol de trabajo son descartados. En palabras simples, borra todos los commits hasta el hash/HEAD destino.

git reset --mixed: Restablece el estado destino. Preserva los archivos hasta 1el hash/HEAD destino pero debes hacer algo con ellos, borrarlos, eliminarlos o agregarlos nuevamente al árbol de commits.

Cherry pick

Básicamente, el cherry pick es un comando que nos permite integrar, desde una branch B, un único commit a la rama destino. Esto es útil cuando tenemos una funcionalidad compartida que aun no se ha integrado en la rama destino, pero se require para poder seguir el ciclo de desarrollo.
Otro caso de uso es cuando tenemos un hotfix por medio de un cherry pick podemos traer el cambio del hotfix a una rama destino.

Uso del reflog

El reflog es el 'diario', el journal donde se registran todas las interacciones con git.
Es fácil de usar, pero poderoso para que podamos complementar nuestro trabajo a la hora de buscar y encontrar diferentes acciones realizadas previamente

En el siguiente tutorial veremos varios usos de este comando.

Conclusiones

Después de hacer este tutorial, estamos listos para iniciar el último y más retador, donde veremos más de 10 casos y situaciones a resolver con todo lo aprendido hasta ahora.

Referencias

Version control Git - Book

Git para todos. Parte 2 - Branches

James Cardona — Tue, 17 May 2022 00:00:00 +0000

Git nos facilita el trabajo proporcionando las branches, esa poderosa herramienta para poder interactuar en "sub-espacios" de trabajo.
Con esto gestionar equipos distribuidos y crear diferentes flujos de trabajo no es un problema.
Esta funcionalidad tiene sus consideraciones y por eso se han inventado diferentes workflows para establecer reglas que nos ayuden a trabajar sobre un marco común para el equipo.

¿Qué son las Branch?

Una branch es espacio de memoria separado donde podemos crear, modificar y eliminar parte de nuestro trabajo sin que el espacio principal se vea afectado hasta que decidamos unir ambos espacios en uno solo.
Su uso se extiende para poder dejar versiones 'seguras/fiables' del código, crear workflows para trabajo en equipo, hacer pruebas de concepto, solucionar errores específicos, entre otras cosas.
Una branch nos permite independizar el trabajo y enfocarnos en pequeñas unidades de trabajo (features).

¿Cómo interactuamos con ellas?

git branch <name>: Para crear una branch desde la 'posición' donde estamos
- usa -u para que la branch siga un tracking con la branch remota.
git switch <name>: Para cambiarnos de espacio de trabajo
git branch -m <new-name>: Para cambiar el nombre de la branch
git branch -d <name>: Para borrar la branch
- usa -D cuando quieras forzar el borrado

¿Qué es el HEAD?

Git almacena nuestro trabajo enlazando la historia de nuestros commits por medio de hash, pero para facilitarnos parte de como se visualiza o no tener que acordarnos de los hash nos provee un indicador que se llama HEAD, entonces la parte superior del historial tiene un HEAD~0, a medida que descendemos vamos aumentando el índice: HEAD~1, HEAD~2, HEAD~n.

Git siempre crea nuestras branch a partir del HEAD donde estemos ubicados.
Si queremos crear una branch desde una posición concreta podemos usar:

git branch <name> #hash o git branch <name> #head

Cuando borramos una branch, lo que estamos haciendo es borrar el tag que apunta a esa dirección de memoria.

¿Qué son los conflictos?

Cuando unimos dos branches diferentes, git se encarga de unir la mayor cantidad de código en uno solo usando estrategias automáticas, pero cuando ambas branches hacen modificaciones sobre lines o archivos donde git no pueda decidir como es la mejor forma de resolver esas diferencias va a mostrar una alerta que se conoce como conflictos.

Esto es un ejemplo de un conflicto

¿Cómo se resuelven?

Realmente es trivial lo que voy a escribir, pero simplemente eligiendo/decidiendo como unir esas diferencias.

Para ver las diferencias de un archivo git diff <filename>
La recomendación para mezclar conflictos es usar una herramienta externa integrada a tu IDE de desarrollo o una GUI para git.

Merge vs Rebase

Hay varias estrategias para unir branches, pero podemos decir que estás dos son las más famosas, es importante entender que no es que una sea mejor que la otra, simplemente son diferentes en su forma de como queda el historial o gráfico de commits.
Su uso depende de las estrategias del equipo o los requisitos del proyecto.

Merge

Es una estrategia muy usada y su ejecución es sencilla, simplemente crea un nuevo punto llamado merge commit donde está la unión y resultado final de la unión. Adicional, preserva el historial conectando la branch que estamos mezclando.

Rebase

Es una estrategia no tan común y con algunas consideraciones adicionales, en la estrategia de merge no se sobrescribe el historial, simplemente se enlaza y se inicia desde un punto nuevo llamado merge commit. El rebase si sobrescribe el historial y su forma de hacer la unión, se hace en tres pasos.

step 1: Busca el ancestro común de ambas branches, luego "remueve" temporalmente los commits de la branch A (destino)
step 2: Coloca cronológicamente los commits de la branch B (origen) en secuencia en la branch A (destino)
step 3: Une (Rebasa) los commits de la branch A (destino) después del último commit de la branch B (origen)

En esta secuencia se puede ver que el historial se sobrescribe y se crean uno nuevo.

Advertencia No usar rebase sobre commits que ya están compartidos en una branch remota

Git flujos de trabajo

Ya hemos avanzado mucho aprendiendo sobre branches, pero nos falta un eslabón para que los equipos puedan trabajar ordenadamente, respetando reglas y siguiendo flujo común, esto se conoce como Git-Workflow.

Puedes crear tu propio marco de trabajo o usar uno que sea ampliamente usado por la comunidad.
En este caso tenemos algunos de ellos:

Gitflow
Github flow
Trunk-Based-Development
Git release flow
Gitlab flow
Master only flow

Vamos a ver la diferencias entre dos de estos.

Gitflow

Este es el más conocido y el más usado por muchas empresas dada la facilidad de uso.

Es un flujo para trabajos de equipos compactos, parte de la idea que creamos una branch principal (main), es nuestra branch segura y de acá derivamos la estrategia creando branches de soporte.

Desarrollo: Features branches
Pre-prod: Develop
Prod: Releases branches
Zona segura: main

Es útil para proyectos que tienen un ciclo de publicación programado. Un trabajo basado en publicaciones.

¿Cómo funciona?

Vamos a establecer las dos branches principales, Main y Develop para llevar el historial del proyecto, son branches de larga duración. La branch main se usa para almacenar el historial de publicación. La branch develop se usa para la integración de nuevos features.

1) Branches de features

Son para crear un historial nuevo para pequeñas funcionalidades que se van a desarrollar en el ciclo de desarrollo. Las branches nuevas deben partir de la branch develop y cuando la feature esta terminada se debe integrar nuevamente a develop.

2) Branches de release

Cuando se acerque la fecha de release o tengamos suficientes características integradas debemos bifurcar las características en una branch de release, cuando se crea esta branch ya no pueden añadirse nuevas funcionalidades a la branch de release y esta branch solo deben producirse la solución de errores(hotfix).

Cuando el release esta listo se debe enviar a la branch main y adicional a la branch develop.

3) Branches de hotfix

Son branches que sirven para reparar errores en producción, siempre deben salir de la branch main. Cuando se termine la corrección debe integrarse a main y a develop.

Trunk-Based Development

Es un poco más moderno y su poder se basa en construir equipos más maduros. Donde todo se integra en una branch principal y desde ahí salen las features. Evitamos tener branches de larga duración.

Desarrollo: Features branches
Prod: Main o Tag-references

¿Cómo funciona?

Es una estrategia donde se usa una branch principal main, en esta branch todo el equipo se integra haciendo push a esta branch. La branch main-trunk se puede usar para hacer release donde se requiera, como por ejemplo a ambientes de pre-productivos, local, etc. Su veracidad y respaldo la dan los tags o etiquetas. Se dice que las branches de features solo deben durar pocos días.

1) ¿Qué se requiere que un equipo trabaje con TBD?

Madurez sin esto esta estrategia se verá impactada por múltiples conflictos que a su vez se evidencia en fallos de la aplicación. Madurez personal como técnica.

2) ¿Cuándo usarlo?:

Si la frecuencia de release es alta, trunk based development es la estrategia adecuada.
Equipos maduros y productos establecidos, con sus tiempos y fechas de release bien definidos, es probable que no lo necesiten

Conclusiones

Esté camino, apenas empieza, hay muchas cosas por aprender y explorar, pero básicamente con este tutorial ya tienes lo necesario para gestionar tu trabajo de equipo y adicional poder proponer soluciones a la hora de trabajar con diferentes workflows.

Referencias

Version control Git - Book

Gracias por llegar hasta acá, considera dar un like, compartir y nos vemos en un próximo artículo.