DEV Community: Mashcuy Lab

Advanced React #1

Mashcuy Lab — Fri, 09 Aug 2024 02:30:50 +0000

In this article we are summarizing the most interesting parts of:

Nadia Makarevich - Advanced React Chapter 1 "Intro to re-renders"

Lifecycle of a component

mounting: component is created for the first time
unmounting: react removes the component when is no needed
re-rendering: updates the component with new information

Myth: components re-render when it's props change

when a change over a state happens, react will re-render all the components hierarchy, props doesn't matter
react will check props only if we use useMemo it props change it will re-render, not otherwise.

Refactoring #3

Mashcuy Lab — Fri, 09 Aug 2024 02:00:59 +0000

In this article we are summarizing the most interesting parts of:

Martin Fowler - Refactoring (2018) Chapter 7 "Encapsulation"

This chapter give us some encapsulation advices:

General idea

encapsulate mutable date in a project can give us the advantage to see when and how data structures are modified
we give the responsibility of modify it's own attributes to the class.
encapsulation means that modules need to know less about other parts of the system

Encapsulate Record

replace js objects by classes
identify how and where are they being used

Encapsulate Collection

don't publish your collections to be modified from outside your class, use methods instead (add, remove, etc)

Replace primitive with object ⭐

in early stages of development we represent simple facts as simple data items as strings or numbers. With the time those simple facts are not simple anymore.
a Linkedin url may be represented as a simple string but then we could need formatting, extracting info or many other operations
as soon as we realize that we need to do other operations than a simple print we create a new class for that bit of data.

Extract class

classes always grow in it's responsibilities, then we need to extract them in new classes

Substitute algorithm

refactor complex algorithms with simpler ones.
if you understand better the problem and can use another perspective that give more clarity to the solution, then it worth to substitute it.

Session #3

Mashcuy Lab — Fri, 09 Aug 2024 01:19:30 +0000

Summary

What I learned from 472 PRs, 130K lines of code and 1 year working for a USA startup

My first PR vs my latest PR
No, you cannot do everything
Plan your day = Be effective
Communication: inform your progress when is needed, unblock your teammates, perform QA
Is ok to not be ok
Dump your brain
- something is blocking you? explain the problem in a note
- there is a lot of things to do? make a prioritized list
Do things that gives you fulfillment
Understand what is expected from your work

How to structure a productive day

Fulfillment: mind, body & spirit
Pareto law: 80% of effects comes from 20% of causes
- Master key skills
- Prioritize key practices
- Learn key concepts
- Focus on key tasks
Laborit law: people gravitate towards the least effort path at expense of important or difficult tasks
- Prioritize more urgen + important tasks (don't focus on difficulty)
- Break complex tasks into smaller manageable tasks
Parkinson law: work expands to fill the available time
- Set strict deadlines
- Seek efficiency, not perfection

Efficient learner

create a distraction-free environment
be an active note-taker
prioritize your health
revise your knowledge actively: explain it easily

Code for 4 hours straight (with no breaks ?)

plan your work yesterday
high priority tasks => most optimal timeframe
no phone, no notifications, no emails, no slack.
drink water, exercise, sleep.

Optimize your development process

technical aspects
- follow standards
- do regular code reviews
experience aspects
- master your IDE

Session #2

Mashcuy Lab — Mon, 22 Jul 2024 17:12:44 +0000

Summary

Welcome to our new members Nicole & Marco 🎉

Getonbrd insights 2024 Q2

We recommend fastAPI or flask instead of Django.

Don't be discouraged by the increased competition; instead, use it as motivation to deepen your knowledge of JavaScript.

Patterns in the real life #1

Singleton pattern

Web streams with bun 🙉

Some excellent examples of the use of Streams here:

Keep an eye to 👀

LLM's APIs (openAI)
Most used/payed technologies (typescript, python, React, Next.js, FastAPI)

Give support ❤️ to

Refactoring #2

Mashcuy Lab — Sat, 20 Jul 2024 16:29:14 +0000

In this article we are summarizing the most interesting parts of:

Martin Fowler - Refactoring (2018) Chapter 3 "Bad Smells in Code"

This chapter helps us to detect bad code practices:

Mysterious name

you can't think of a good name for something
you are often afraid to rename things
solution a good name can save you hours

Duplicated code

solution unify code with the same structure

Long function

solution long term software is written in short functions

Long parameter list

solution depend on objects and not on attributes

Divergent change

every time there is a new user type, then I'll have to change these three/four functions
solution reduce coupling by joining similar functions together and consider them a new module

Primitive obsession

a telephone is more than a collection of characters
a url is more than a string
solution move those primitive types to it's own meaningful types

Repeated switches

if the same switch/case or if/else structure is repeated many times.
solution we should consider replace conditional with polymorphism.

Speculative Generality

over engineering a feature is very common
solution get rid of functions that handles things that aren't required yet

Middle man

is common that a class ends up delegating much of it's behavior to other classes
solution remove those classes and replace them with the actual functionality

Data class

solution instead of having classes with only fields, getters and setters, use interfaces or types

Refactoring #1

Mashcuy Lab — Sat, 20 Jul 2024 15:51:08 +0000

In this article we are summarizing the most interesting parts of:

Martin Fowler - Refactoring (2018) Chapter 6 "A First Set of Refactorings"

Extract variable

❌

return order.quantity * order.itemPrice - Math.max(0, order.quantity - 500) * order.itemPrice * 0.05 + Math.min(order.quantity * order.itemPrice * 0.1, 100)

✅

const basePrice = order.quantity * order.itemPrice;
const quantityDiscount = Math.max(0, order.quantity - 500) * order.itemPrice * 0.05; 
const shipping = Math.min(basePrice * 0.1, 100);
return basePrice - quantityDiscount + shipping;

Changing a parameter

❌

function inNewEngland(aCustomer) {
   return ["MA", "CT", "ME", "VT", "NH", "RI"].includes(aCustomer.address.state);
}

const newEnglanders = someCustomers.filter(c => inNewEngland(c));

✅

function inNewEngland(stateCode) {
   return ["MA", "CT", "ME", "VT", "NH", "RI"].includes(stateCode);
}

const newEnglanders = someCustomers.filter(c => inNewEngland(c.address.state));

Split Phase

❌

const orderData = orderString.split(/\s+/);
const productPrice = priceList[orderData[0].split("-")[1]]; const orderPrice = parseInt(orderData[1]) * productPrice;

✅

const orderRecord = parseOrder(order);
const orderPrice = price(orderRecord, priceList);

function parseOrder(aString) {
 const values = aString.split(/\s+/); 
 return ({
  productID: values[0].split("-")[1],
  quantity: parseInt(values[1]), 
 });
}

function price(order, priceList) {
 return order.quantity * priceList[order.productID]; 
}

Session #1

Mashcuy Lab — Mon, 15 Jul 2024 04:09:03 +0000

Welcome to our new members James & Alvaro 🥳

Session Summary

Dev key abilities

be a solver
automate repetitive tasks
communicate

Learn things fast

master the basics
go for real projects (not the todo list ✏️)

Signs of a bad programmer

you want to delete the whole project and start from scratch
lack of curiosity
over engineering

Regrets of an experienced engineer

not taking enough risks
not finding a good work/life balance

Question of the week

What do I need to be "ready"?

fluency in the language/framework
software architectures
stop procrastinating
organize my time better
perform more real life projects
improve soft skills
english ⭐
work/life balance