DEV Community: Marcos Molina

What a World-Famous Violinist Can Teach Developers About Overcoming Limitations and Building Creative Solutions

Marcos Molina — Fri, 20 Sep 2024 16:24:07 +0000

For developers wrestling with legacy code, outdated frameworks, or incomplete documentation, the struggle can often feel overwhelming. We face challenges that can seem insurmountable, where the tools at our disposal don’t quite match the task at hand. Additionally, in a fast-paced environment, it’s not always possible to refactor or implement ideal solutions on the fly. But rather than focusing on the obstacles, there’s a powerful mindset we can adopt: the "Can Do" approach.

One story that beautifully illustrates this mindset is that of a renowned violinist. Known not only for his musical genius but also for his resilience and ability to navigate physical limitations, this artist offers a profound lesson for developers and problem-solvers alike.

The Itzhak Perlman Story: Mastery in the Face of Adversity

During one memorable performance, in front of a packed audience, Perlman experienced an unexpected setback: one of the strings on his violin snapped. Instead of stopping the performance or asking for a new instrument, he made a decision. He adjusted his approach, adapted his playing style, and continued to deliver a breathtaking performance using only the remaining three strings. At the end of the performance, Perlman said:

"Our job is to make music with what remains."

This statement resonates deeply with what developers face on a daily basis. I would say:

"Our job is to make the business work with what remains."

The Importance of a "Can Do" Approach in Development

As developers, it's easy to feel frustrated when things don’t go according to plan. Maybe a library lacks a specific function, or perhaps an API doesn’t return the data in the format we need. These moments can be disheartening, but they’re also opportunities to build resilience and creativity.

Adopting a "Can Do" approach means:

Focusing on solutions instead of problems: Rather than getting bogged down by the limitations, shift your mindset to explore alternative paths.
Embracing creativity: Just like Perlman found a way to make beautiful music with three strings, developers can find clever ways to solve problems, even when the tools at hand aren’t ideal.
Building adaptability: Technology is always changing, and being adaptable is a crucial skill. Flexibility allows developers to overcome unexpected challenges and deliver value under any circumstance.

Common Pitfalls in Problem-Solving

While the "Can Do" mindset is empowering, it’s also important to recognize common pitfalls. One stands out above all the others:

1. Not Communicating the Challenge

This is the most common pitfall developers fall into. Often, when faced with a limitation, developers instinctively jump into problem-solving mode, adapting and finding workarounds. However, failing to communicate these challenges to key stakeholders—such as managers, product managers, or project managers—can lead to major issues down the line. Without this transparency, misaligned expectations, potential roadblocks, or inefficient solutions may occur, impacting the project in ways that could have been avoided.

2. Overcomplicating Solutions

In our quest to adapt, we might overengineer solutions. Keep it simple—focus on solving the immediate problem without creating unnecessary complexity.

3. Ignoring Available Resources

While it’s good to be creative, don’t forget to leverage all the tools and resources at your disposal. Often, an existing tool or resource may solve the problem, and you just need to look at it differently.

4. Burnout from Over-Adapting

Continuously working in non-ideal conditions can lead to fatigue. While it’s admirable to push through tough challenges, it’s also important to advocate for improvements in your tools and processes when necessary.

Best Practices for Cultivating a "Can Do" Approach

Here are some tips to help you develop and sustain a "Can Do" mindset as a developer:

Research and Offer Solutions: The best practice when facing a limitation is to first research thoroughly. Look for potential solutions, understand the constraints, and explore alternative approaches. Once you've identified possible options, communicate these findings to your manager or relevant stakeholders. This collaborative process ensures that everyone is aware of the challenge and can help make an informed decision on the best course of action. Offering solutions that fit within the system's constraints shows initiative and problem-solving while keeping the project aligned.
Reframe Challenges as Opportunities: When faced with a limitation, ask yourself, “What can I create with the tools I have right now?” This helps shift your perspective from frustration to curiosity.
Practice Problem-Solving in Different Contexts: Try solving problems outside your immediate domain. For example, explore a new language or framework in a side project. The more experience you have solving diverse problems, the more adaptable you’ll become.
Celebrate Small Wins: When you successfully adapt to a difficult situation, acknowledge it. These small victories build confidence and reinforce your ability to handle future challenges.
Stay Curious and Keep Learning: Itzhak Perlman couldn’t have accomplished what he did without the mindset and the years of learning that built his expertise. As a developer, it’s crucial to adopt this same mindset and continually learn. Constant learning—whether it’s about new tools, techniques, or frameworks—enriches your ability to tackle challenges with a "Can Do" approach.

Final Thoughts

Just like a world-famous violinist created beautiful music with only three strings, developers can craft innovative solutions even when conditions aren't ideal. The "Can Do" approach is all about leveraging the resources at hand, embracing constraints, and using them as a springboard for creativity. But always remember: the most crucial aspect of this approach is communication. Research potential solutions, engage your stakeholders, and ensure everyone is aligned on the path forward.

Next time you encounter a hurdle, think of the violinist's resilience. Don’t wait for the perfect tool or setup. Instead, ask yourself: What can I achieve with what I have? And remember, by continually learning and adapting, we prepare ourselves to handle these challenges as they arise. Once you’ve identified your options, communicate them clearly. You might surprise yourself with what you can accomplish.

I’d love to hear your thoughts! How have you navigated challenges in your work? Share your experiences in the comments below!

Sets in JavaScript — the only explanation you will ever need

Marcos Molina — Sun, 16 May 2021 00:27:11 +0000

This post contains technical information, code examples and real use cases.

Introduction

What Sets are in general?

There is a branch of mathematical logic called "Set theory" and that studies sets( OMG 😱, I can't believe!), which can be informally described as unordered collections of distinct element.
Distinct, meaning every element appears only once.
Unorder, in this case, refers to the order not being important.
The elements that make up a set can be any kind of thing: people, letters of the alphabet, numbers, points in space, lines, other geometrical shapes, variables, or even other sets.

Example

Properties of set

Length / Cardinality: number of elements of the set. A set can be empty, finite, or infinite. For example:
Subset/ Superset: a set A is a subset of a set B if all elements of A are also elements of B; B is then a superset of A. For example, all odd numbers set is a subset of all numbers set. All number sets are a superset of odd numbers set.

Operations on sets

Union: is the set of all elements that are members of both sets.
Intersection: is the set of all things that are members of both A and B.
Complement: is the set of all elements that are members of A, but not members of B.
Symmetric difference: is the set of elements that are part of the sets, but not in their intersection.

Content

Sets in JavaScript

Definition

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection. MDN

Creating a set

The constructor takes an iterable object, eliminates all duplicated items, and returns an instance of Set.
Don't remember what iterables are ? check it

How JS check if an item is duplicated?

The operator === is used. There are some "edge cases" like +0 is equal to -0? NaN is equal to Nan? that behavior a little different. Click for more information.
Let's check it.

const setExample = new Set([1, '1']);
console.log(setExample);
// Set(2) { 1, '1' }

Since

console.log(1 === '1');
// false

Be careful since comparing objects, since you are comparing the pointer to the object and not the value

const objA1 = { a: 'a' };
const objA2 = { a: 'a' };
const exampleSet = new Set([objA1, objA2]);
console.log(exampleSet)
// Set(2) { { a: 'a' }, { a: 'a' } }

Set methods / properties

size : returns the length / cardinality of the set.
add(value): append the value to the set, checking if exists. Returns the same pointer to the original set with added value.
clear(): removes all the elements. Returns undefined.
delete(value) : removes the element associated to the value. Returns true if the values was deleted else returns false.
has(value) : returns true is the value exists in the set, else returns false.

const exampleSet = new Set([1]);
console.log(exampleSet);
// Set(1) { 1 }
const afterAddMethod = exampleSet.add(2);
// returned pointer to exampleSet. Are you sure? let's check it.
console.log(exampleSet === afterAddMethod);
// true
exampleSet.add(3);
const wasDeleted = exampleSet.delete(1);
console.log(wasDeleted);
// true
console.log(exampleSet);
// Set(2) { 2, 3 }
console.log(exampleSet.has(2));
// true
console.log(exampleSet.has(1));
// false
exampleSet.clear();
console.log(exampleSet);
//Set(0) {}

The follow iteration methods can be used with sets

const exampleSet = new Set([1, "2", 3, "4", 4]);
console.log(exampleSet.keys());
// [Set Iterator] { 1, '2', 3, '4', 4 }
console.log(exampleSet.values());
// [Set Iterator] { 1, '2', 3, '4', 4 }
console.log(exampleSet.entries());
/* [Set Entries] {
    [1, 1],
    ['2', '2'],
    [3, 3],
    ['4', '4'],
    [4, 4]
} */
exampleSet.forEach(value => console.log(value));
// 1, 2, 3, 4, 4

MDN Implementation of basic set operations.

After explaining about operation on sets, we check the code implementation.

function isSuperset(set, subset) {
    for (let elem of subset) {
        if (!set.has(elem)) {
            return false
        }
    }
    return true
}

function union(setA, setB) {
    let _union = new Set(setA)
    for (let elem of setB) {
        _union.add(elem)
    }
    return _union
}

function intersection(setA, setB) {
    let _intersection = new Set()
    for (let elem of setB) {
        if (setA.has(elem)) {
            _intersection.add(elem)
        }
    }
    return _intersection
}

function symmetricDifference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        if (_difference.has(elem)) {
            _difference.delete(elem)
        } else {
            _difference.add(elem)
        }
    }
    return _difference
}

function difference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        _difference.delete(elem)
    }
    return _difference
}

Edit #1:

Alex Lohr suggested the following implementations:

const isSuperset = (set, superset) => [...set].every((item) => superset.has(item))
const union = (set1, set2) => new Set([...set1, ...set2])
const intersection = (set1, set2) => new Set([...set1].filter((item) => set2.has(item)))
const symmetricDifference = (set1, set2) => new Set([...set1, ...set2].filter((item) => set1.has(item) ^ set2.has(item)))
const difference = (set1, set2) => new Set([...set1].filter((item) => !set2.has(item)))

Examples

const setA = new Set([1, 2, 3])
const setB = new Set([3, 4, 5, 6])
console.log(isSuperset(setA, setB))          // returns true
console.log(union(setA, setB))              // returns Set { 1, 2, 3, 4, 5, 6 }
console.log(intersection(setA, setB))       // returns Set { 3 }
console.log(symmetricDifference(setA, setB)) // returns Set { 1, 2, 4, 5, 6 }
console.log(difference(setA, setB))     // returns Set { 1, 2 }

When can I use Sets?

Abstract examples

*Removing duplicate values of an array.

const someArray = [1, 1, 2, 2, 3, 3, 4, 5, 5, 6, 7];
const afterRemovingDuplicatedValues = [...new Set(someArray)];

*Given two arrays, return an array with the common values once.

const setA = new Set([31, 141, 245, 22]);
const setB = new Set([1, 22, 12, 33])
console.log(intersection(setA, setB));

*Given two arrays, return an array with every value once.

const setA = new Set([31, 141, 245, 22]);
const setB = new Set([1, 22, 12, 33])
console.log(join(setA, setB));

More specifics examples

*Tags. If everyone can add a tag, I think is a good idea to avoid duplicated tags. Set of tags.
*Did I see this IP in the last hour? Set of IPs
*Is the user online? Set of users ids.
*Has this URL been banned? Set of URLs.

Summary

Set is a collection of unique values. It "adds" additional capabilities to arrays and simplifies working on scenarios where the values should be unique.

I hope I could share with you some knowledge.
Did you learn something new? Let me know in the comments. ❤️
Do you know another use cases? 👆🏽
Did you love it? Share it with your friends. 👏🏽
Don't be afraid to post your thoughts. I'm here to learn from you. 😇
Networking? LinkedIn 🤝🏽

Thank you for reading.

Sources:
1) Wikipedia
2) MDN

Enums in JavaScript

Marcos Molina — Tue, 27 Apr 2021 22:53:20 +0000

Prologue

A few words about me

My name is Marcos Molina, a passionate Web Developer based in Israel.

What is my goal?

Sharing knowledge, the purpose of each of my posts is to share a solution to a real problem I faced in the industry, side projects, or open-source contributions.

Why?

Because seeing real examples always have helped me more than "To-Do List" examples.

Content

Enums?

They are a data type that allows us to specify a list of values for a type.
In my side project "Askii" that allows users to answer questions, send it to their friend and see all the answers I used enums for "type" all the possible kinds of questions.
Binary question: Yes or No.
Numeric questions: 1 ,2, etc.
Text questions: Yes, I do love coffee.

What they do?

They force you to think about all the possible values that a variable can take.
Once I create an enum on my project, I know that I need to handle three different scenarios in the front-end and in the back-end: binary, numeric, and text questions.

Enums vs list of numbers.

Enums are a constant rather than a list of numbers, increasing the readability of the code.
*This point will be demonstrated in the code example.

When should we use enums?

We should use enums if there are a definite number of fixed values for a variable.

How enums can be implemented?

JavaScript doesn't support enums "built-in", therefore there are some ways to implement them.

Let's build the solution
Note: by convention we use Uppercase letters, written 'binary' but should be 'BINARY'

Edit 1:
Jon Randi wrote and I think he is right:
"Might be better to just do"**

const checkAnswerType = type => answerTypeEnum.hasOwnProperty(type)

Edit 2:
mao.zheng wrote that he prefers the next syntax:

const Color = Object.freeze({
    RED  :  Symbol("red"),
    BLUE :  Symbol("blue"),
    GREEN:  Symbol("green")
});

Why?

"Because this will force you to use the enum object defined above. you can't just use string(number) literal to make a comparison. It keeps the consistency of the codes your wrote"

Edit 3:
It is also possible to use numbers as values, actually is the default values in others programming languages.

const IssueStatusesEnum= Object.freeze({
    OPEN :  0,
    CLOSED:  1
});

Summary

With the presented solution, the power of enums can be achieved as there is in some programming languages. For example TypeScript, Java, and C#.

I hope I could share with you some knowledge.
Did you learn something new ? Let me know in the comments. ❤️
Do you know another solution? 👆🏽
Did you love ? Share it with your friends. 👏🏽
Don't be afraid to post your thoughts. I'm here to learn from you. 😇
Networking? LinkedIn 🤝🏽

const moodsEnum = Object.freeze({ 
  GOOD : 'GOOD',
  AMAZING : 'AMAZING',
  SATISFACTORY: 'SATISFACTORY',
  ...
}

Thank you for reading.
Have an moodsEnum.AMAZING day!