DEV Community: Edwin Torres

Fundamentals of Software Architecture Book - Part 2

Edwin Torres — Sat, 12 Aug 2023 11:02:40 +0000

Fundamentals of Software Architecture

Book Details

📖 Title: Fundamentals of Software Architecture
✍️ Author: Mark Richards, Neal Ford
📆 Publication Year: 2020

Summary

Here I have the relevant points to me of the book Fundamentals of Software Architecture by Mark Richards and Neal Ford. This part is focused on Architecture characteristics and fitness functions.

Chapter 5: Identifying Architecture Characteristics

1. Give a reason why it is a good practice to limit the number of characteristics (“-ilities”) an architecture should support.

🤓 It's good practice to limit the number of "-ilities" because each characteristic can introduce complexity into the architecture, potentially affecting its performance, maintainability, and other aspects. Moreover, some characteristics can conflict with others, making it a balancing act to satisfy all needs. Focusing on the most critical characteristics ensures a lean and effective architecture.

2. True or false: most architecture characteristics come from business requirements and user stories.

🤓 False. While business requirements and user stories do influence the architecture characteristics, they are not the sole sources. Architecture characteristics are often also derived from technical constraints, non-functional requirements, or the strategic direction of the organization.

3. If a business stakeholder states that time-to-market (i.e., getting new features and bug fixes pushed out to users as fast as possible) is the most important business concern, which architecture characteristics would the architecture need to support?

🤓 The architecture would need to support characteristics such as

Agility (for ease of implementing new features and fixing bugs)
Deployability (for fast and efficient deployment processes)
Testability (to quickly verify new features and bug fixes).

4. What is the difference between scalability and elasticity?

🤓 Scalability is the ability of a system to handle increased load by adding more resources or using existing resources more efficiently. Elasticity, on the other hand, is the ability of a system to dynamically scale up and down based on the demand, often realized through cloud-based infrastructures.

5. You find out that your company is about to undergo several major acquisitions to significantly increase its customer base. Which architectural characteristics should you be worried about?

🤓 The significant increase in the customer base would mean you should be particularly concerned about :

Scalability (to handle the increased load)
Performance (to ensure system responsiveness under increased load)
Interoperability (if the acquisitions involve integrating with other systems).

Chapter 6: Measuring and Governing Architecture Characteristics

1. Why is cyclomatic complexity such an important metric to analyze for architecture?

🤓 Cyclomatic complexity is a measure of the number of linearly independent paths through a program's source code, essentially assessing its complexity. High cyclomatic complexity often indicates that a system might be hard to maintain, understand, and modify. Thus, it can serve as an early warning signal for potential architectural problems, encouraging refactoring or redesign to ensure simplicity and maintainability.

2. What is an architecture fitness function? How can they be used to analyze an architecture?

🤓 An architecture fitness function is a way to quantitatively measure an architectural characteristic to determine how well the architecture aligns with the intended design principles. They serve as a guide to developers by enforcing architectural constraints and driving architectural decisions. Fitness functions can be used to continually assess and validate that the evolving architecture remains fit for its purpose throughout its lifecycle.

3. Provide an example of an architecture fitness function to measure the scalability of an architecture.

🤓 An example of a fitness function for scalability could be the response time of the system as load increases. You could simulate a certain number of users (for instance, 10,000 users) hitting your system simultaneously, and measure the response time. If the response time stays within acceptable boundaries, your system can be considered scalable to that extent.

4. What is the most important criteria for an architecture characteristic to allow architects and developers to create fitness functions?

🤓 The most important criteria for an architecture characteristic is that it must be quantifiable and measurable. Fitness functions are objective metrics, so the architectural characteristic they are measuring must be translated into something that can be measured consistently and accurately. If a characteristic can't be measured, it can't be tracked or evaluated through a fitness function.

Chapter 7: Scope of Architecture Characteristics

1. What is an architectural quantum, and why is it important to architecture?

🤓 An architectural quantum is the smallest independent, deployable unit in an architecture. The quantum often corresponds to a microservice in a microservices architecture. The concept is important because it helps architects design systems that are modular, loosely coupled, and can evolve independently.

2. Assume a system consisting of a single user interface with four independently deployed services, each containing its own separate database. Would this system have a single quantum or four quanta? Why?

🤓 This system would have four quanta. Each of the four services is independently deployable and contains its own database, thus each service is an architectural quantum.

3. Assume a system with an administration portion managing static reference data (such as the product catalog, and warehouse information) and a customer-facing portion managing the placement of orders. How many quanta should this system be and why? If you envision multiple quanta, could the admin quantum and customer-facing quantum share a database? If so, in which quantum would the database need to reside?

🤓 This system would most likely have two quanta - one for the administration portion and one for the customer-facing portion. Each has distinct responsibilities and could evolve independently. While the two quanta could technically share a database, it would be better for each to have its own to maintain the principle of independent deployability. Sharing a database would introduce a level of coupling that could inhibit the ability to deploy and scale each quantum independently. If they were to share a database, it would reside in neither quantum specifically, but would become a shared resource, which would need to be carefully managed to avoid conflicts and ensure consistency.

Chapter 8: Component-Based Thinking

1. We define the term component as a building block of an application—something the application does. A component usually consist of a group of classes or source files. How are components typically manifested within an application or service?

🤓 Components are usually manifested within an application or service as distinct units of functionality. They can be organized as modules, packages, or services, each encapsulating a set of related functionalities. In object-oriented languages, a component can comprise multiple classes, interfaces, or packages. In a microservices architecture, each microservice can be considered a component.

2. What is the difference between technical partitioning and domain partitioning? Provide an example of each.

🤓 Technical partitioning organizes components based on their technical role (like UI, business logic, data access), while domain partitioning organizes components based on business functionality or domain concepts. An example of technical partitioning could be a three-tier architecture with separate layers for presentation, business logic, and data storage. An example of domain partitioning could be a microservices architecture where each service corresponds to a specific business capability, like customer management or order processing.

3. What is the advantage of domain partitioning?

🤓 Domain partitioning aligns the software system with the business domain, making the system easier to understand and modify according to business changes. It facilitates independent development and deployment of different business capabilities, which can improve speed, scalability, and resilience.

4. Under what circumstances would technical partitioning be a better choice over domain partitioning?

🤓 Technical partitioning might be a better choice when building simple or monolithic applications where business functionality is not complex or diversified enough to justify the overhead of domain partitioning. It might also be preferred when the team's technical expertise significantly outweighs their understanding of the business domain.

5. What is the entity trap? Why is it not a good approach for component identification?

🤓 The entity trap is a common mistake made when identifying components based on entities in the business domain, which often leads to anemic domain models with components that lack meaningful behavior. This approach is problematic because it encourages a data-centric view of the system rather than focusing on the behavior and responsibilities of components, which can lead to poor encapsulation and high coupling.

6. When might you choose the workflow approach over the Actor/Actions approach when identifying core components?

🤓 The workflow approach might be preferred when the system's primary purpose is to facilitate a complex series of steps or transactions, where the sequence and interaction of operations are critical. On the other hand, the Actor/Actions approach could be better when the system is more centered around user interactions or when you have distinct user roles performing different actions on the system. The best choice depends on the specific context and requirements of the system.

Fundamentals of Software Architecture Book - Part 1

Edwin Torres — Mon, 07 Aug 2023 15:34:26 +0000

Fundamentals of Software Architecture

Book Details

📖 Title: Fundamentals of Software Architecture
✍️ Author: Mark Richards, Neal Ford
📆 Publication Year: 2020

This year 2023 I've started to read more books, and I've decided to write a summary of each book I read. This is the first one, and I hope you enjoy it.

Summary

This book is a great introduction to software architecture, it covers the basics of software architecture, and it's a great starting point for anyone who wants to learn more about software architecture. Here are some of the topics covered in this book and I want to answer the self-assessment questions for each chapter.

Chapter 1: Introduction

1. What are the four dimensions that define software architecture?

Architecture characteristics: Define the success criteria of a system, which is generally orthogonal to the functionality of the system. Notice that all of the characteristics listed do not require knowledge of the functionality of the system, yet they are required in order for the system to function properly.
Architecture Decisions: Define the rules for how a system should be constructed. For example, an architect might make an architecture decision that only the business and services layers within a layered architecture can access the database.
Structure: Refers to the type of architecture style (or styles) the system is implemented in (such as microservices, layered, or microkernel)
Design principles: Define a guideline of principles rather than a hard-and-fast rule.

2. What is the difference between an architecture decision and a design principle?

Architecture decisions form the constraints of the system and direct the development teams on what is and what isn’t allowed.
Design principles are guidelines that help development teams make decisions about how to implement the system.

3. List the eight core expectations of a software architect

🤓 The eight core expectations of a software architect are:

Make architecture decisions
Continually analyze the architecture
Keep current with latest trends
Ensure compliance with decisions
Diverse exposure and experience
Have business domain knowledge
Possess interpersonal skills
Understand and navigate politics

4. What is the First Law of Software Architecture?

Everything in software architecture is a trade-off. -- First Law of Software Architecture

Why is more important than how. -- Second Law of Software Architecture

Chapter 2: Architectural Thinking

1. Describe the traditional approach of architecture versus development and explain why that approach no longer works.

🤓 The traditional approach implies that architecture is something that is fully defined up front and then merely implemented by developers. However, this approach has been found to have several major drawbacks:

Lack of Flexibility: Once the architecture is defined, it can be very difficult to change. However, software development is often a highly unpredictable process, and changes in requirements or technologies may necessitate changes in the architecture.
Communication Breakdown: Because architects and developers often work in isolation from each other, there can be a lack of understanding and communication between the two groups. Architects may make decisions without fully understanding the implementation implications, and developers may struggle to implement an architecture they had no part in designing.
Reality Gap: Architectural designs often look good on paper but may not work as well when actually implemented. This gap between design and reality can lead to problems and delays.

2. List the three levels of knowledge in the knowledge triangle and provide an example of each.

🤓 Our knowledge pyramid illustrates how fundamentally different the role of architect compares to developer. Developers spend their whole careers honing expertise, and transitioning to the architect role means a shift in that perspective, which many individuals find difficult. The architect role requires a different set of skills, and the knowledge pyramid illustrates this shift.

3. Why is it more important for an architect to focus on technical breadth rather than technical depth?

🤓 Focusing on technical breadth means acquiring a wide-ranging understanding of various technologies, patterns, languages, platforms, and principles. This breadth allows architects to:

See the Big Picture: Understand how different components and technologies fit together and influence each other. This is essential when designing complex systems where decisions in one area can significantly impact other areas.
Make Informed Decisions: Choose the most suitable technologies and designs for the system's requirements. A broad knowledge allows architects to consider a wider range of options and make more informed decisions.
Communicate Effectively: Communicate with different stakeholders, including developers, project managers, business stakeholders, and others. Each group may have different areas of expertise and concerns, and a broad understanding helps architects bridge these gaps.
Adapt to Change: Stay adaptable and resilient in the face of changing requirements, technologies, and business environments. A wide knowledge base allows architects to learn and adopt new technologies more easily.

For example, as an architect, it is more beneficial to know that five solutions exist for a particular problem than to have singular expertise in only one.

4. What are some of the ways of maintaining your technical depth and remaining hands-on as an architect?

🤓 Coding: Try to spend some of your time coding. This could be writing prototypes, creating proofs of concept, fixing bugs, or contributing to critical parts of the system. This not only helps maintain your coding skills but also gives you firsthand experience with the technologies you're using.
Education: Continually educate yourself about new technologies, languages, and methodologies. This can involve reading books, articles, or research papers, attending conferences or webinars, or taking online courses.
Personal Projects: Work on personal projects outside of your day-to-day work. This can be a great way to learn new technologies, experiment with different architectures, or just keep your coding skills sharp.
Code Reviews: Participate in code reviews. This gives you a chance to see how the architecture is being implemented, spot potential issues, and provide valuable feedback to developers.
Pair Programming: Occasionally pair program with developers. This is another great way to stay familiar with the codebase and the challenges that developers face.
Prototyping: When considering a new technology or architectural approach, create a small prototype. This can provide valuable insights that you wouldn't get from reading about it alone.
Stay Connected with the Developer Community: Participate in tech meetups, online forums, open-source projects, and other communities. This can keep you updated on new technologies and best practices, and provide opportunities to learn from others.

By staying hands-on and maintaining technical depth, you'll be a more effective architect. You'll understand the challenges that developers face, make better architectural decisions, and be able to communicate more effectively with your team.

Chapter 3 - Modularity

1. What is meant by the term connascence?

🤓 Connascence is a metric used to describe the coupling or the degree of interdependence between two or more parts of a software system.

2. What is the difference between static and dynamic connascence?

🤓 Static connascence is coupling that can be determined by examining the source code, while dynamic connascence is coupling that can only be determined when the code is running.

3. What does connascence of type mean? Is it static or dynamic connascence?

🤓 Connascence of type is when multiple parts of a program must agree on the type of an entity. It is a form of static connascence.

4. What is the strongest form of connascence?

🤓 Connascence of Identity is the strongest form of connascence. It refers to when multiple parts of the system depend on a mutable entity's identity.

5. What is the weakest form of connascence?

🤓 Connascence of Name, where multiple parts of the system must agree on the name of an entity, is considered the weakest form of connascence.

6. Which is preferred within a code base—static or dynamic connascence?

🤓 Static connascence is generally preferred within a code base as it is easier to identify and manage than dynamic connascence.

Chapter 4 - Modularity

1. What three criteria must an attribute meet to be considered an architecture characteristic?

🤓 An attribute must be testable, contribute to the architecture of the system, and provide a way to measure and quantify it.

2. What is the difference between an implicit characteristic and an explicit one? Provide an example of each.

🤓 An implicit characteristic is one that is required or assumed but not explicitly stated, like usability. An explicit characteristic is one that is directly stated and designed for, such as response time.

3. Provide an example of an operational characteristic

🤓 An example of an operational characteristic is availability, which refers to the system's ability to be in a state to perform its designated function during operation.

4. Provide an example of a structural characteristic.

🤓 An example of a structural characteristic is modularity, referring to the degree to which a system's components may be separated and recombined.

5. Provide an example of a cross-cutting characteristic.

🤓 An example of a cross-cutting characteristic is security, which is the system's ability to resist unauthorized attempts at usage or behavior modification, affecting multiple components of the system.

6. Which architecture characteristic is more important to strive for—availability or performance?

🤓 The importance of availability versus performance depends on the specific needs of the system being developed. For a critical system where downtime could be costly, availability may be more important. For a system where speed is crucial for user satisfaction, performance may be more important. The context and requirements of the system dictate which characteristic is more important to strive for.

How to succeed behavioral questions

Edwin Torres — Mon, 27 Mar 2023 03:42:01 +0000

Practicing behavioral questions is essential for interview preparation because they allow the interviewer to assess your interpersonal and problem-solving skills, work ethic, and cultural fit with the company. Here are some tips and strategies for preparing for behavioral questions:

Understand the purpose

Behavioral questions are designed to evaluate your soft skills, such as teamwork, communication, leadership, adaptability, and conflict resolution. Recognize that interviewers are looking for specific examples from your past experiences to gauge your potential for success in the role.

Use the STAR method

The STAR method is a widely used technique for answering behavioral interview questions. It helps structure your response by focusing on a specific example from your past experiences and demonstrating your skills and abilities in a clear, concise manner. The acronym STAR stands for:

Situation: Begin by describing the context or background of the situation you faced. Provide enough detail to help the interviewer understand the circumstances, but be concise. This sets the stage for the rest of your answer and helps the interviewer visualize the scenario.

*Example: *

"In my previous role as a software developer, I was working on a project with a tight deadline, and one of my team members fell ill, leaving us short-staffed."

Task: Explain the specific task or goal you needed to accomplish in that situation. This part highlights your responsibility and the challenge you faced.

*Example: *

"As the team lead, my task was to ensure we met the deadline without compromising the quality of the project, while also managing the increased workload due to my colleague's absence."

Action: Describe the specific actions you took to address the task or challenge. Focus on your role and the steps you took, showcasing your skills, abilities, and decision-making process.

*Example: *

"I assessed the remaining tasks and prioritized them based on importance and time sensitivity. I then redistributed the workload among the team members, making sure to assign tasks based on individual strengths and availability. I also communicated the situation to our manager and requested additional resources. To keep the team motivated, I held daily check-ins to monitor progress and address any concerns."

Result: Explain the outcome of your actions, emphasizing the positive impact you had on the situation. Quantify your results whenever possible to demonstrate the tangible benefits of your actions.

Example:

"As a result, we were able to complete the project on time and within budget, despite being short-staffed. Our manager praised the team for our effective communication and adaptability, and our client was satisfied with the quality of the final product."

By following the STAR method when answering behavioral questions, you can ensure that your response is well-structured, focused, and clearly demonstrates your skills and abilities. This technique helps you showcase your problem-solving and decision-making skills, making it easier for the interviewer to assess your fit for the role.

Research common behavioral questions

Familiarize yourself with common behavioral questions, such as:

Tell me about a time when you faced a difficult problem. How did you handle it?
Describe a situation where you had to collaborate with a difficult colleague.
Can you provide an example of when you had to lead a team or project? What challenges did - you face, and how did you overcome them?
How do you handle stressful situations or tight deadlines?
Prepare specific examples: Reflect on your past experiences (professional, academic, or personal) and identify situations that demonstrate your soft skills. Prepare detailed examples for each situation that follow the STAR method.

Practice your delivery

Rehearse your answers out loud to ensure your responses are clear, concise, and well-structured. Consider practicing with a friend, family member, or mentor who can provide feedback and ask follow-up questions.

Tailor your answers to the company and role

Research the company's values, culture, and expectations for the role you're interviewing for, and tailor your answers to align with their priorities. This demonstrates your understanding of the company and showcases your fit within the organization.

Be honest and authentic

While it's essential to present yourself in the best light, avoid exaggerating or fabricating your experiences. Interviewers can often tell when a candidate is not being genuine, which could harm your credibility.

Show self-awareness and growth

When discussing challenging situations or mistakes, emphasize what you learned from the experience and how you've grown as a result. This shows your ability to learn from your mistakes and adapt in the future.

By practicing behavioral questions using these strategies, you'll be better prepared to demonstrate your soft skills and showcase your fit within the company during the interview process.

Speed Coding Toptal

Edwin Torres — Mon, 04 Jul 2022 15:15:40 +0000

¿Cómo abordé un reto de Speed Coding creado por Toptal?

Hace unos días estuve en el CollisionConf (Collision is one of the world’s biggest tech conferences), donde participaron muchas startups, vinieron speakers de talla mundial, habían inversores buscando oportunidades, CEO/CTO/Directores/Estudiantes con una historia y muchas ganas de aprender.

Justo faltando un día para que acabara el evento, me encontré en un stand de la empresa Toptal, donde estaba ofreciendo un premio por ganar la mayor cantidad de puntos en una competencia de Speed Coding. Jamás había escuchado de esto, y como la competencia era en JavaScript, me emocioné y decidí participar.

¿Cómo era la prueba?

La prueba consistia en resolver en menos de 3 minutos (apróximadamente) unos 15 ejercicios de programación en Javascript, los cuales salían de forma aleatoria, empezando por los fáciles y terminando por el que más complejidad tenía. La interfaz gráfica usaba Ace Editor para ingresar el código esperado, ejecutar los Unit Test y enviar la solución.

Por cada ejercicio solucionado te dan una serie de puntos, y también dependiendo la cantidad de segundos que te sobren te van dando una bonificación.

Primera estrategia - Copiando y Pegando

Dado que era mi primer acercamiento al Speed Coding, abordé el tema como todo un novato, empecé a familiarizarme con la interfaz gráfica, fue explorando los ejercicios que tenían, y empecé a guardar las preguntas para solucionarlas una a una con más tiempo. Una vez tenía todas las preguntas y respuestas, decidí empezar a copiar y pegar las respuestas (ya que es imposible escribir ese código manualmente en ese tiempo).

Haciendo esto llegué a ganar alrededor de unos 300 puntos, (sin embargo los primeros lugares tenían un poco más de 4000 puntos). En ese momento supe que no era la mejor estrategia y tenia que buscar algo más efectivo.

Segunda estrategia - Automatizando envios en la interfaz gráfica

Dado que ya había tenido automatizando flujos en Javascript (En propio navegador usando SetInterval y SetTimeout) y usando algunas herramientas como Selenium o Puppeteer, decidí escoger una de estas.

En este punto hice varias cosas como:

Identifiqué los selectores del botón enviar.
Minifiqué y pasé todas las soluciones de JavaScript a un objeto (Map) para identificarlas con el nombre del problema y obtener la solución
Use una expresión regular para identificar en los selectores cuál era el nombre del problema a resolver.
Moví el cursor a la primera línea para poner ahí el código de la solución.
Simulaba un click sobre botón Submit que ejecutaba las pruebas.
Simulaba un click sobre botón Submit para enviar el ejercicio y moverme al siguiente hasta terminar.

Ver código fuente - speed-coding.js

Esta estrategia me permitió subir a un puntaje apróximadamente de unos 1,500 puntos.

Tercera estrategia - Haciendo peticiones directamente al API

No podía quedarme con la duda, de como abordar mejor este problema así que encontré un articulo creado por Toptal - Coding Challenge Retrospective, el cuál me dió una nueva idea y es que en vez de gastar tiempo en la interfaz gráfica, podría reducir significativamente el tiempo haciendo peticiones directamente en el API. De esta manera vi algunos ejemplos que mostraban en el articulo y decidí adaptarlo a mi manera.

En este punto realicé las siguientes cosas:

Identifiqué en el navegador la forma en que el API hacia las peticiones (eran peticionces POST usando un form-data).
Creé una función para iniciar el challenge y otra que de manera recursiva empezaba a enviar soluciones hasta que el isChallengeEntryFinished fuera verdadero.
Me dí cuenta que lo más importante en el API era enviar en sus datos las respuestas de los test con el valor correcto, y esto significaba que tenía que ejecutar localmente las validaciones con mis funciones generadas para cada problema.
En este punto lo más retante fue identificar la mejor forma de ejecutar las funciones con parámetros variables y ajustar el formato de la respuesta en la petición, como por ejemplo los test_cases y el code.

Ver código fuente - speed-coding-api.js

Esta estrategia me permitió subir a un puntaje apróximado de 3928 puntos.

Luego de esto, hice algunas optimizaciones en el código, llegando finalmente a un puntaje de 4041 puntos, quedando en el puesto 14 de la competencia, quedando a unos 18 puntos del primer puesto.

Conclusión

Después de invertir al menos unas 6 horas 😅 de la madrugada en este reto, tuve una grata experiencia y disfruté demasiado poder abordar diferentes soluciones, aprendí cosas sobre como mejorar el performance y está claramente que jugando directamente con el API hace una reducción bastante grande en el tiempo, ya que la interfaz gráfica en su renderización, quita milisegundos valiosos.

Para un futuro, probablemente abordaré la estrategia 1 y 3, adicionandole un valor agregado con la implementación de multiples threads en Nodejs, e incluso contemplando el uso otros lenguajes de programación como Go.

Types of Software Developer

Edwin Torres — Sat, 19 Mar 2022 20:32:28 +0000

Did you know the term "Software Developer" is too general to describe what does a Software Developer nowadays?.
Well, here I've created the next mind map to let you know the big picture about the different types of Software Developers you can find in the industry.

Here you can find the full version of the mind map. Types of Software Developer

Types of Software Developers, salaries and jobs

🤯 How to generate pixel art in your Github activity

Edwin Torres — Mon, 25 May 2020 19:12:09 +0000

Do you have lots of white spaces in your Github activity and would you like to fill them with something interesting like pixel art?. Then this article is for you.

To review the original post, you can go here ➡️.

What you will learn here?

How to create commits in past 🤯
How to use the Date.toLocaleDateString method.
How to play with regular expressions
How to fill those boring and white Github spaces in your activity. 😏

How to create commits in past 🤯

Okay, I think this is maybe the most important thing in this article 😅, given that it was the main question I made me when I've decided to fill out my white spaces in Github.

Here you will find a short answer in StackOverflow.
The long answer is: You need to create a commit adding the date when the commit happened. For more information, please review the Git documentation.

git commit --amend --no-edit --date="Fri Nov 6 20:00:00 2015 -0600"

// Explanation
git commit  // Record changes to the repository 
  --amend   // Replace the tip of the current branch by creating a new commit.
  --no-edit  // Use the selected commit message without launching an editor
  --date="Fri Nov 6 20:00:00 2015 -0600" // ⭐️ Override the author date used in the commit.

How to format the days?

Well, once you know how to create a commit in pass we need to create the correct format for the amount of commits we want. (Are we developers, aren't we? and we like to save time).
In order to avoid extract every part of the date and create boring code repetitions, we can use the power of 💪🏼 built-in functions, like toLocaleDateString. This function allows to create a formatted date (in String), just passing an object with the options.

Once formatted the day as we want, the format is not 100% equals to our desired date in the git commit command. So we need to replace a couple of things.
So that, we can use the String.replace function and the power of regular expressions 💛 and as we are developers and we like the fancy things, we can also use the String.concat function, in order to create immutable strings 😏

On Internet you can find some pages to play with your regular expressions like regexr.com and Rubular. Enjoy them!

const getFormattedDay = (stringDate) => {
    const date = new Date(stringDate);
    const options = {
      weekday: 'short', 
      month: 'short', 
      day: 'numeric' ,
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      year: 'numeric', 
    };
    const dateFormatted = date.toLocaleDateString('en-US', options);

    return dateFormatted
        .replace(/,/ig, '')
        .replace(/\d\d\d\d /i, '')
        .replace(/PM|AM/ig, '')
        .concat(date.getFullYear())
        .concat(' -0500');
}

How to generate the commit text based on the desired days?

Alright! so far, we have done many things (I guess) so, only it is remaining to paint the Github Activity. To paint our grid we need to know the next things.

The height of the grid is 7 rects/squares.
Review in the Github Activity the days we want to mark.
An array with all dates we want to mark.

const getCommitText = (days) => {
    return days.map(day => `git commit --amend --no-edit --date="${getFormattedDay(day)}"` 
    + ` && git push origin master --force`);
};

const letterE = [
// Top stick letter E
'2019-11-17 20:00',
'2019-11-24 20:00',
'2019-12-01 20:00',
'2019-12-08 20:00',
// Bottom stick letter E
'2019-11-23 20:00',
'2019-11-30 20:00',
'2019-12-07 20:00',
'2019-12-14 20:00',
// Left stick letter E
'2019-11-10 20:00',
'2019-11-11 20:00',
'2019-11-12 20:00',
'2019-11-13 20:00',
'2019-11-14 20:00',
'2019-11-15 20:00',
'2019-11-16 20:00',
'2019-11-18 20:00',
'2019-11-19 20:00',
'2019-11-20 20:00',
'2019-11-21 20:00',
'2019-11-22 20:00',
// Middle stick letter E
'2019-11-27 20:00',
'2019-12-04 20:00',
'2019-12-11 20:00'
];

const letterT = [
// Top stick letter T
'2019-12-22 20:00',
'2019-12-29 20:00',
'2020-01-05 20:00',
'2020-01-12 20:00',
'2020-01-19 20:00',
'2020-01-26 20:00',
// Middle stick letter T
'2020-01-06 20:00',
'2020-01-07 20:00',
'2020-01-08 20:00',
'2020-01-09 20:00',
'2020-01-10 20:00',
'2020-01-11 20:00',
'2020-01-13 20:00',
'2020-01-14 20:00',
'2020-01-15 20:00',
'2020-01-16 20:00',
'2020-01-17 20:00',
'2020-01-18 20:00',
];

// Magic happends here
getCommitText(letterE).join('\n\r');
getCommitText(letterT).join('\n\r');

Creating the commits

Congratulations! 🙌🏼 now you can run this commits in your empty repo created in Github and play with the white spaces in your Github Activity.

git commit --amend --no-edit --date="Sun Dec 22 08:00:00 2019 -0500" && git push origin master --force                                                                      ─╯
git commit --amend --no-edit --date="Sun Dec 29 08:00:00 2019 -0500" && git push origin master --force
git commit --amend --no-edit --date="Sun Jan 5 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Sun Jan 12 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Sun Jan 19 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Sun Jan 26 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Mon Jan 6 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Tue Jan 7 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Wed Jan 8 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Thu Jan 9 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Fri Jan 10 08:00:00 2020 -0500" && git push origin master --force
git commit --amend --no-edit --date="Sat Jan 11 08:00:00 2020 -0500" && git push origin master --force

Finally, don't forget "With a great power comes a great responsibility".

Shut up! and show me the code.

Okay my dear friend. Here you will find my Gist ♥️ . I hope you can fill those horrible white spaces in your Github Activity and create awesome pixel arts. Here some ideas for you.

Here also you will find a nice project to get the patterns you want.

PS: Would you like to learn how to do more of these types of things? If you’re new to learning to code, I recommend you join the ZTM community and start by taking The Complete Web Developer course.

Cheers and keep learning! 🍻

🔥 Roadmap Web Developer Front End 2020

Edwin Torres — Fri, 22 May 2020 21:16:01 +0000

These notes are part of the recommendations of Andrei Neagoie in the Real Web Developer Roadmap 2020. I invite you to review The complete web developer in 2020 course or if you have some experience The complete junior to senior web developer in 2020 course and get your own insights. So, this an awesome feedback about what should we focus on in this 2020 as Web Developers. This first part covers the FrontEnd point of view in the roadmap, the BackEnd part is coming 😅.

Important note: The links and notes marked with the 🚀 are highly recommend

General recommendations

Master your IDE
Improve your basic fundamentals
- Git / Github
- Terminal skills
- Learn to upload your files to your hosting and create your own domain
- Learn more about JSON / gRPC

Front End

Web APIS provided by the browser 🚀

State Managment

SSR 🚀

Helpers 🚀

Build Tools

NPM Scripts 🚀
Bundlers

Web Components

Package Management

Popular libraries

JAM Stack 🚀

Static Sites
- Hugo
- Jekyll
- Scully
- Gatsby 🚀
- Gridsome
CMS

Unit Test

End to End Test

Continuous Integration / Continuous Delivery

Back End

Static Hosting

Managed Hosting

Cloud

Web Servers

Nginx 🚀 and [Nginx Load Balancing](http://nginx.org/en/docs/(http/load_balancing.html)
Caddy 2 🚀
Apache
CDN Cloudfare 🚀

Serverless

Node.js

🦕 Deno

Python 🚀

Flask
Django

API Consumption

Authentication

Containers

Docker 🚀

Relational Databases 🚀

NoSQL Databases 🚀

Managed Databases

AirTable 🚀
Firebase 🚀
Prisma
AWS / GCP / Azure

Mobile

Desktop

Electron

Machine Learning

Prebuild Models 🚀 like cloudML / Firebase ML / Clarify / IBM ML / AWS ML
Brain.js
Tensorflow.js 🚀

Web Assembly 🚀

Blazor

PS: If you are starting your Web Development career, I suggest you can start with this Complete Web Developer 2020 Course by ZTM and get a 10% discount using that link.

PS2: To review more post like this, I invite you to my blog 🤖.

Cheers and keep learning! 🍻

💅 How to create a triangle in CSS

Edwin Torres — Wed, 20 May 2020 03:49:15 +0000

A couple of days before, I had to face this common challenge, however, there are many solutions (using images, using divs, and using pseudo-elements with and empty content). For me, the best solution was using pseudo-elements, so that here is my solution.

If you want to read more about this common pattern, please review this article in CSS Tricks (One of the best pages for CSS Content).

Understanding ::before and ::after pseudo-elements in CSS

In few words a pseudo-element is :

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

Creating the triangle

After understanding the above concept, it means we can add some content, or create another element given a selector.
In our case, if we define a border-width and we have an empty content, the border will start from the center of the element.

Then, pretty much we need to play with the border-color, border-width and the position:absolute to create our triangle. Below, you will find a couple of examples in my codepen.

What's the next?

Well, I think that's all using a short example. Given the above examples, you can add letters, transformations, animations, and whatever you can imagine, using the pseudo-elements.

To get a complete list, please check the documentation and don't forget review the compatibility with browsers.

If you want to see my original post, you're welcome here.

Cheers and keep learning! 🍻

🔥 The Complete Web Developer in 2020

Edwin Torres — Fri, 08 May 2020 21:07:00 +0000

As part of my personal training, I've decided to re force my knowledge in web development, so I bought one of the best courses (in my personal opinion), The Complete Web Developer in 2020 by Andrei Neagoie and here are my notes. These notes are just the most relevant parts or resources for me, so I recommend you review the course for more details. If you want to read the original post, you can review this link.

1. How the internet works

IP Address
ISP: Internet Service Provider
DNS: Domain Name Server
Magical blue cable - The submarine cable map
People think that data is in the cloud, but it’s not. It’s in the ocean.
Video about how works the submarine cable in Spanish
- How the internet works? Well explained

2. History of the Web

Tim Berners-Lee was working at CERN, and then in 1989 created the first approach of Internet WWW
40 maps that explain internet
Some videos of Crash Course Computer Sciences Computer: Networks, Internet and the World Wide Web .

3. HTML

MDN Official resources to review anything.
Use the Rubber Duck Technique.
HTMLs Quizzes by w3schools
Free codecamp exercises

4. CSS

An awesome site which explains how works the font types
One of the best resources is CSS Tricks and CSS Tricks Almanacs for properties.
In this site you will understand the balance and complement color.
CSS Selectors : start *, class, id, element, element nested, greater than, plus
What selectors win out in the cascade depends on? Specificity, Importance, Source order. Specificity calculator.
Game to practice the specificity concepts.
Google Fonts.
CSS Quizzes by w3schools.
CSS Minifier to reduce the Critical Render Path.
Critical Render Path MDN and Critical rendering path explained.
Playing with Froggy for Flexbox.
Mastering Transitions and Transforms.
With Can I Use we can review if our attributes are supported by browsers.
Always Playground for CSS, Javascript and other Web stuffs with.

Bootstrap and templates

To create landing pages and campaigns with Mailchimp
Animate CSS
The Creative Tim Templates
Mashup Free Templates
Bootstrap Templates 1
Bootstrap Templates 2
Templates for startups

CSS Grid and Flex

Flex is really useful if you have layout with one dimension, CSS Grid is useful when you have layouts with two dimensions (Row, Columns).
Despite CSS grid is not 100% supported in all browsers, the support is greater every time. Can I Use CSS Grid and Can I Use Flexbox.
CSS Grid cheat sheet.
Game for CSS Grid.
CSS Grid Exercise 1 solution
CSS Grid Exercise 2 solution
Site to get free illustrations for your projects.

Career of Developer

Glassdoor to get Reviews and information about companies and salaries in the industry.
Jetbrains research about the Developer Survey 2019.
Stackoverflow Developer Survey 2019.
Stackoverflow Trends.
Github Octoverse statistics.
JavaScript Roadmap.
State of salaries by Hired.
Become in a Freelance in Upwork.
Zero to Mastery Community.
Front-End Learning path in ZTM
CSS Grid generator by Sarah Drasner

JavaScript

Eloquent JavaScript Ebook
You don’t know JavaScript Series
JavaScript modern tutorial
Data Structures: Arrays, Object, Map, Set, WeakMap, WeakSet
Playgrounds Jsbin codepen
DOM === document.
Document selector and performance
DOM event list
You might not need jQuery
The keyword this represents where the object is inside of.

Advance JavaScript

BabelJS
Array Explorer with some examples by Sarah Drasner
Object explorer with some examples by Sarah Drasner
JavaScript Coercion and JavaScript Equality Table.
Iterating: Arrays and Strings
Enumerating : Objects
JavaScript Engine Memory Heap: Limited memory (variables)
JavaScript Engine Call Stack: Allocates execution blocks and calls.
To generate a Maximum call stack sized exceed.

(function a() { a() })();
To crash the browser :

let drunk = []; while(true) { drunk.push['🍻'] }
Call Stack, Web API, Callback Queue, Event Loop

Command Line

Git + Github + Open Source

Pull Request to become in contributor for ZTM in Github organization.
Pull Request to add my profile in the ZTM Board Job.
Zero To Mastery Job Board.
Zero To Mastery Resources.
Create your Developer Portoflio by @cobidev
Github Corner logo

A Day in the life Developer

NPM Scripts

Semantic Versioning Calculator

React

Atomic Design Concepts for Web Components
Virtual DOM vs DOM
React CHANGELOG
Create React App
Tachyons Create fast interfaces with few CSS
API Robot
React Fragment and semantic
Redux for management state, share data between containers and predictable using the 3 principles.
3 Redux Principles: Single source of true, state is read only, changes use pure functions.
Redux action: Something that user does.
Redux reducer: A pure function which update the state (immutable)
Redux store: An object which represents the single source of true
Redux based on Architecture Flux pattern
Redux offers a way to replace the state and transform to props to the components.
To connect redux wieth react, it implements HoF (Hight order Functions)
useState performance and good practices
React Router
RamdaJs, A practical functional library for JavaScript programmers.
React Styled components, Use the best bits of ES6 and CSS to style your apps without stress 💅.
React CSS Modules.
Gatsby, Fast in every way that matters.
Semantic UI, User Interface is the language of the web.
ImmutableJS collections for JavaScript.
MDB with React

HTTP/JSON/AJAX + Asynchronous JavaScript

A great list for Http Status Dog and Http Status Cat and Http Reference.
Query Strings vs Query Params
Why you require HTTPS
JSON format and JSON Reference)
JSONP.
AJAX.
Fetch API and Response Object.
Promises has 3 states: Fulfilled, rejected, pending
Async await looks syntactic sugar.
ECMAScript update list with examples

APIs

Face Recognition Project

NodeJS + ExpressJS

JavaScript Robotic and IoT
NodeJS Documentation
NodeJS Globals
From the 12.12.x and higher the imports in NodeJS can use the ES6 way, instead of CommonJS.
Common libraries most used in NodeJS: fs, path, http, nodemon
ExpressJS
Most used attributes in express request: body, params, query, headers.
Most used attributes in express response: status, send
Most used methods with fs : readFile, readFileSync, appendFile, writeFile, unlink
Contest Happens every December

Databases

Relational: MySQL, PostgreSQL, Oracle, MSSQL, Sybase, Derby, SQlite
Non Relational (NoSQL) : Redis, MongoDB, Cassandra, CouchDB, Apache HBASE, Rick
SQL Query builder for JavaScript

Deployment

Github Awesome Profiles

PS: Would you like to learn how to do more of these types of things? If you’re new to learning to code, I recommend you join the ZTM community and start by taking The Complete Web Developer course.

Cheers and keep learning! 🍻

🤯 Learning to learn

Edwin Torres — Sat, 02 May 2020 01:33:41 +0000

Recently I've started a huge personal challenge that I will describe with more details in the next months, however a really critical part of this challenge is, How can I learn faster?. Well, I've bought a really nice course in Udemy, Learning to learn by Andrei Neagoie and these are my notes.

Also I want to mention that I love the productivity stuffs, and I admire people like Bill Gates, and Tim Ferris.

You can also read the original article here

The principles

The method of Loci about memory enhacement.
- https://deck.of.cards/
Learning vs Winning to the system, by Paul Grahan
- http://paulgraham.com/lesson.html
What is success?. This is subjective meaning, however it can be achieved with the next characteristics.
- Drive
- Persistence
- Going a good learner
The obstacle & The dip
1. Seth Godin
2. Sometimes we have to know when to turn around and pick the right path in order to use our resources efficiently.
Compound learning
1. The principle behind is: You don’t have to dedicate many hours one day to learning something, you need instead to learning at least 20 - 30 minutes per day, everyday to compound the learning in your mind.
2. Improve by 1% a day, and in 70 days you’re twice a good. - Alan Wiss P.h D
3. https://www.calculatorsoup.com/calculators/financial/compound-interest-calculator.php
4. https://www.bankrate.com/calculators/savings/compound-savings-calculator-tool.aspx
Failures don’t count on you
1. Every time you make a mistake, any time you fail you are learning, it gives you feedback on why you should do next time.
Choice vs Chore
1. Chores are temporary and they won’t last long, but if you start to shift your focus and realize that learning is a choice you can not do anything today
It’s all in the frame.
1. Not everything in life is objective, rather than is subjective and everything depends of perspective, so we can reframe that.
2. Shift your focus, shift your perspective on you can control, instead of you can not control.
Pareto principle
1. Also know as the 80/20 rule. The law of vital few.
2. 80 percent of sales comes from 20 percent of clients.
3. 80 percent of code comes from 20 percent of programmers.
4. It’s about eliminating things.
5. Composition by Pietro monad. $50 Million Dollars
6. Is this the best use of my time?
Skill Staking
- Mastering by Robert Greene says there are 3 keys.
  1. Curiosity
  2. Value of learning
  3. Staking your skills in different unique ways.
- For example, if you are a programmer and you combine your programming skills with business skills, or communication skills you will be more valuable.
- It’s not about being the greatest in one thing, you just need to be pretty good at list of useful skills that when combined, make you truly one of a kind.
Happiness Factors
- To be an efficient learner, you need to enjoy what you’re doing to learning.
- What are the things that make you happy in your life?
- Create monitor factors and monitor them.
Productivity time
- What is your most productivity time? Morning ? Night ?
- Every person is different and your job is to figure out what your productivity times are.
Self learning paradigm
1. The core of self learning, is this idea of personal autonomy to become a self learner and efficient learner.
2. This is a choice you have to make, based on your mainly motivation.

The lies

There are a couple of lies in the world and the learning process you need to know.

Follow your passion
- Become so good they can't ignore you by Carl Newport.
- Passion is simple overrated, many people who actually love what they do don’t have a passion for it.
- More than passion you need creativity, control and impact. Learning is a craft and you can learn to love the process.
You can avoid risk
- Risk is part of the process, and you have to be able to tolerate and enjoy taking risk.
- If you really want to be good, you need to stretch your boundaries, and people who don’t take risks in their life, are going to be left behind by those that take risk.
Trust this one person
- Don’t follow one single person and think that everything he or she says is true, and is right for us.
- Each person give advices based on the experiences in their life.
- Create your option based on different opinions and your own experiences, because there can be charlatans.
- The people who tell you that they know everything are often the ones that know the least.
10.000 hours rule
- It’s a popular rule by Malcom Gladwell, however is not totally true.
- The more you practice the better you get, but it means that you won’t need at least 10.000 hours to achieve it.
- Remember there are a lot of variables that makes difference in this topic ( Genetic, Environment, Country). And stay focus is more relevant.

The Pillars

Everything is a game
- One of the most important pillar to being an efficient learner.
- Everything you do or you want to learn, cab be learned, there is where the growth mindset is really important and the game to create a strategy makes sense.
- If you have the Locus of control, you start being aware you have the control of your life and the are prepared to be a better learner.
Feyman Technique
- It was mentioned by Richard Feynman, a famous Novel Prize in Physicist
- You need to explain the things you learn in the most simple way. The idea is to become in a good learner to understand a topic you want to be able to explain it in simple terms.
Trunk based knowledge
- Instead of working from the leafs we should start learning at the roots at the trunk and form that trunk in those leafs.
- If you want to have a long term learning, you should start from the principles, fundamentals at that topic.
- Article Be Prepared To Lose Your Job In The Future… If You Don’t Learn This One Skill Now
Efficiency trumps grit
- Being busy just shows that you have lack of time management skills and you’ll discover that efficient learning isn’t about being the absolute hardest worker, it’s about being smart with your time. 🙈
- We have limited time in our life, we have limited skills that we can acquire in our life. So we want to be as efficient as possible with our time.

The Science

Focus vs Diffuse mode
- Barbara Oakey learning how to learn . Two states that our brain can be in: Focus and Diffuse mode.
- Focus mode, our brain has the 100% of attention in one thing. It activates the prefrontal cortex in your brain.
- Diffuse mode, your brain is thinking in several things. It activates many regions in your brain. Things like going for a talk or even sleeping.
- As you can’t become expert overnight the best strategy is combine the two modes creating connections and Myelin. So multitasking is an awful strategy.
The Science of sleep
- For long term learning, lack of sleep is just a horrible strategy, because it creates toxic products in our brain.
- When you sleep your brain actually cell shrink and fluids flow through these gaps and they clear these toxins for you.
- The idea is to find a balance, don't sleep too much, and don't sleep too little.
Brain Training
- When two neurons are connected this is call synapses.
- The brain is like a muscle, never has the same state.
- Physical exercise creates estimates and help our brain, because relax it and makes the brain stays in the diffuse mode.
The Science of feedback
- Feedback is an integral part of learning. Either be positive or negative. However, getting negative feedback indicates, what we need to fix.
- Here is the importance of mentors or coaches that can accelerate your learning.
Procrastination
- Procrastination is an issue with managing our emotion and not our time.
- To get rid of procrastination we need to take the initiative and start doing the task.
- This is a useful tool to control our procrastination in Internet. https://www.inmotion.app/
Short and Long term memory
- Long term memory is created by practice and practice, like riding bicycle. Usually you put fundamental concepts and principles that guide your life.
- Short term memory is also known as working memory. To move from the Short term memory to Long term memory, you can use spaced repetition technique (several days).
- Article about those concepts. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2657600/
Active and Passive Learning
- Passive learning is when you do the easy things, like watch videos, listen podcast or just reading something.
- Active learning involves the practice, take notes, take action, teach to someone.
- The idea behind is combine them. Passive + Active. One hour of test is better than one hour of studying.
The Science of Motivation
- Intrinsic motivation: Things you believe or you are. Three main motivators Autonomy, Mastery and Purpose.
- External motivation: Things like money, status, gifts. This extrinsic motivation can generate side effects.
Goals
- Amygdala is the part of our brain which handles our emotions and detects fear. And when there is something huge or challenging it can allow us to run or fight.
- Robert Maurer in his book the Kaizen Method. Wrotes that the idea is to take a big challenge in small steps day by day, to hack the amygdala and eliminates the fear.
- A nice technique is to use SMART goals. Here video describe how to properly set goals or you can review this detail guide about SMART goals.
It pays to not be busy
- Nowadays in this world being busy means “good” but, at the end it shows a lack of management time.
- We have a region in the brain called the hippocampus which is crucial for learning, and if we want to strengthen the neurons there we need to do exercise, then if we are busy we won’t find time to it.
Chunking
- When we focus on something we create chunks of knowledge, we create patterns and connect them with existing patterns.
- Bottom up learning and Top down learning, to connect chunks, creating a mind map.
How to solve problems
- This is the most demand skill guarantee for the next 20 years (even more years). Because people pay for solving problems, and if you have a unique skill to solve problems you become more valuable.
- Some problems requires you stay in focus mode for structured problems or diffuse mode for intuitive or creative problems.
Deliberate practice
- The most effective and most powerful types of practice in any field work by harnessing the adaptability of the human body and brain to create, step by step, the ability to do things that were previously not possible. Taken rom this article .
- Anders Ericsson wrote a book about learning.
- Deliberate practices is we are right on the edge of our limits, and then come back and practice until get a level up, and repeat that cycle. Masters can visualize and create experience in their minds.
- To get deliberate practice we need to define specific goals, intense focus, immediate feedback. It takes place outside of comfort zone.
- The good news are, the better you get at something the more enjoyable it becomes.
Spaced repetition
- Repeat things after few days is the best way to build strengthen the synaptic connections in our neurons.
- A wonderful comic about spaced repetition. https://ncase.me/remember/
Habits as energy savers
- Research has shown that writing your daily list the evening before such as your goals actually helps to accomplish your goals the next day.
- The habits saves energy to your brain, because you don’t have to think too much about the thing you’re doing. It becomes easier and easier.
Be adventurous
- We remember things when we’re in an adventurous state when our emotions are high.
Have and endpoint
- Define an end-point and an end-point to finish something that helps your brain to stay focus.
Be bored
- To be bored sometimes is good, given it allows that diffuse mode of thinking happens.
- This video explains the importance to be bored

The Techniques

Pomodoro Technique
- This technique was developed by Francisco Cirillo
- 25 minutes on (no interruptions) focus, 5 minutes off. 25 minutes focus mode, 5 minutes diffuse mode.
- Here you can find some options to use the pomodo online. https://www.marinaratimer.com/
Chunk the subject
- Chunking is related to habits to get the autopilot. Each chunk of knowledge leads to further and further progress.
- Here comes the technique Divide and Conquer.
- Some examples are, Dueling for language learning, Khan Academic for Maths, and this one about computation. https://www.youtube.com/watch?v=SzJ46YA_RaA
Spaced repetition revised
- Over-learning = not good, so you need to take some breaks and repeat again after.
- After certain point those neuron connection get strong enough that don’t have to repeat as often. This is called as brain consolidation.
Dliberated practice revised
- Doing the things that are hard but also work smart.
- The idea of deliberate practice is to avoid the the easy stuffs and then take challenging projects. Expanding our comfort zone.
Create a roadmap
- Define your goals is really important to understand why are you learning something. This should be aligned with your internal motivations / intrinsic motivations.
- Once you have identified your goal, create a roadmap with the strategy to achieve it. Be careful and select the best content and resource in your road.
- These are tools to create your roadmap. Coggle and Miro.
Interleaving
- Mix up your learning by being creative and flexible. The idea is instead of practicing one skill over and over and over, you want to shift three or more different skills.
- Learning three similar but in a different way.
- Article The Interleaving Effect: Mixing It Up Boosts Learning
Einstellung
- Here is the Einstellung effect
- It’s a rigid mindset where you don’t use new ideas to solve problems.
- To solve that problem you need to accept there is other points and alternatives to solve a problem.
Importance of community
- Stay and community and share similar things, getting motivation from others and receive feedback it’s really valuable in your learning process.
- You’re the average of the five people you hang out with most, so be surrounded by people that you like to be.
Habits revised
- The power of habits book.
- The habits are formed by the cue, the routine, the reward and the belief.
- Atomic habits book
- There are four laws for habits. Obvious, easy, attractive and satisfying.
- Some tools https://habitica.com/static/home
System vs Goals
- Goals are good but systems are better. How to fail at almost everything
- Create a system defines rules and uses chunks to achieve a goal. e.g. SMART goals.
- https://www.youtube.com/watch?v=NVGuFdX5guE
The power of the Senses
- The senses play an important role in the memories.
- Humans are bad remembering facts, but are good remembering stories and emotions. So try to be stimulated and your senses.
- Create analogies or metaphors in your mind.
Method of Loci
- https://www.nototo.app/
Pareto Principle
- What the critical skills are needed to accomplish something in the most efficient way.
- The Pareto Principle is about of selection, If you focus in the 20% of the most relevant things you will get the 80% of results.
- If you want to learn any language here is the Pareto Principle in action https://mostcommonwords.co/
Parkinson's Law
- Work expands so as to fill the time available for its completion.
- If you put deadlines you can get the benefits of Parkinson’s Law.
- Deep work by Carl Newport
Stakes and Rewards
- Focus on small rewards system. Intrinsic vs extrinsic.
- This is a community to focus on your Stakes https://www.stickk.com/
Concepts vs Facts
- Concepts are more important than facts. Facts are easy to find in Google, but concepts are high-level topics.
- That’s why is more important to get the foundations and the concepts. Trunk-based learning.
Test Yourself
- You need to practice and put yourself into your limits. Active learning.
- You need to quiz yourself and to be honest about what have you learned.
The first 20 hours and ultra learning.
- The first 20 hours
- Ultralearning

PS: If you want to take the course, you can use this link
Learning to Learn in ZTM.

Cheers and keep learning! 🍻

🎉 Creating my blog with Gatsby and Github Pages

Edwin Torres — Fri, 01 May 2020 03:47:40 +0000

Alright! Today is a great day, many years after I lost my old blog, I've decided to start from scratch
and create again one blog to publish my experiences and don't fall in the inertia. Here I will describe my experience creating my own blog using Gatsby and Github Pages.

This article will be structured in

What you will learn?

Overview of Gatsby and GitHub Pages
Creating your project with Gatsby
Publishing your project in Github Pages
Adding Travis CI to automate the deploy process
Next steps

1. Overview of Gatsby and GitHub Pages

First things first. Before to explain you, how to create your site I will tell you more about Gatsby and Github Pages, if you alreay know about them, go ahead to the next step.

Taken from the official website Gatsby is:

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

So we can use the power of
React, GraphQL, Markdown and some data sources
to create really fast web sites, re-using lots of plugins and publishing in many Web hosting, in my case I will deploy in Github Pages.

In other words Github Pages is a free option to deploy hosted repositories
in Github, also it give us an easy way to automate this process with some platforms like Travis CI.

2. Creating your project with Gatsby

After I reviewd some tutorials and content in Internet, about how to create my own site with Gatsby, here are my steps.

Follow the quick-start with Gatsby to install the gatsby-cli.
Once you have installed the Gatsby CLI can create your Gatsby project based on some Gatsby templates. To be honest, the simplest way to create your own site is using a template instead of creating everything from scratch. Also you can find some examples made with Gatsby and other technologies.
In my case I've created my site based on the beautiful narative theme. Once of the benefits of using this template are:
Really good structure to add author and post
Can be integrated with Contentful to create dynamic post instead of static post (commits in Github)
Can be integrated with Mailchimp to reuse tue Subscriptions for newsletter
The styles can be modifies based on the theme-ui
The metadata and social networks can be modified in a simple way.
Is open source.

If you want to see more templates, you can visit this link.

3. Publishing your project in Github Pages

I will no describe the step by step to publish your site in Github Pages, because in the official page is described really well.
However I can provide you some learned lessons.

I recommend to install the gh-pages dependency to avoid doing many manual things.
Don't forget to create the gh-pages branch in your repo.
If you are trying to select your gh-pages branch, please follow the next link.
Please review the How Gatsby works with Github pages.

4. Adding Travis CI to automate the deploy process

In few words, Travis CI is

Easily sync your projects with Travis CI and you’ll be testing your code in minutes!

To be honest, this have changed my perspective and life when is needed to automate the deploy process based on commits in a branch.
To deploy your site using Travis CI you need to create a .travis.yml file in your root folder project and add the next configuration.

language: node_js
cache:
  directories:
    - ~/.npm
notifications:
  email:
    recipients:
      - [THE EMAIL WHERE WILL BE SENT THE NOTIFICATIONS]
    on_success: always
    on_failure: always
node_js:
  - '12.13.1'
git:
  depth: 3
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  keep_history: true
  github_token: $GITHUB_TOKEN
  local_dir: public
  on:
    branch: master

You also can follow this article to get more details.

You can achieve the same result using Circle CI

5. Next steps

It's hard to tell you all things you can do with Gatsby, however you can start reviwing:

Review Gatsby Plugins
Review Gatsby Resources
Connect Gatsby with Contentful in five minutes
Publish your site in other hosting like netlify
Improve the GraphQL setup with Gatsby
Add Gatsby Integrations
Improve your SEO and Analytics tracking.

6. Demo

If you want to see my site, this is the demo:

https://codesandtags.github.io/blog/

Cheers 🍻

DEV Community: Edwin Torres

Fundamentals of Software Architecture Book - Part 2

Fundamentals of Software Architecture

Book Details

Summary

Chapter 5: Identifying Architecture Characteristics

Chapter 6: Measuring and Governing Architecture Characteristics

Chapter 7: Scope of Architecture Characteristics

Chapter 8: Component-Based Thinking

Fundamentals of Software Architecture Book - Part 1

Fundamentals of Software Architecture

Book Details

Summary

Chapter 1: Introduction

Chapter 2: Architectural Thinking

Chapter 3 - Modularity

Chapter 4 - Modularity

How to succeed behavioral questions

Understand the purpose

Use the STAR method

Research common behavioral questions

Practice your delivery

Tailor your answers to the company and role

Be honest and authentic

Show self-awareness and growth

Speed Coding Toptal

¿Cómo abordé un reto de Speed Coding creado por Toptal?

¿Cómo era la prueba?

Primera estrategia - Copiando y Pegando

Segunda estrategia - Automatizando envios en la interfaz gráfica

Tercera estrategia - Haciendo peticiones directamente al API

Conclusión

Types of Software Developer

Types of Software Developers, salaries and jobs

🤯 How to generate pixel art in your Github activity

What you will learn here?

How to create commits in past 🤯

How to format the days?

How to generate the commit text based on the desired days?

Creating the commits

Shut up! and show me the code.

🔥 Roadmap Web Developer Front End 2020

General recommendations

Front End

Web APIS provided by the browser 🚀

HTML5 🚀

CSS3 🚀

JavaScript

State Managment

SSR 🚀

Helpers 🚀

Build Tools

Web Components

Package Management

Popular libraries

JAM Stack 🚀

Unit Test

End to End Test

Continuous Integration / Continuous Delivery

Back End

Static Hosting

Managed Hosting

Cloud

Web Servers

Serverless

Node.js

Python 🚀

API Consumption

Authentication

Containers

Relational Databases 🚀

NoSQL Databases 🚀

Managed Databases

Mobile

Desktop

Machine Learning

Web Assembly 🚀

💅 How to create a triangle in CSS

Understanding ::before and ::after pseudo-elements in CSS

Creating the triangle