Forem: Leonel Mandarino

Building a Wordle helper with Vue.js 3.0

Leonel Mandarino — Tue, 17 Jan 2023 01:31:49 +0000

Howdy, stranger🤠. How you doin'? I'm in the process of learning Vue.js and as an easy project to get started with the main concepts I'll be building a Wordle helper.
So... since you are here, you might as well stick around and take this as an introductory article to Vue or as a project idea if you will 😁.

But first let's get...

The basic idea 🌠

How does this "Wordle helper" works? First you need to know what Wordle is... okay I'll give you 2 secs, go google it quick... here let me help you.
Right! It would be very helpful to have a list of Wordle words because I haven't memorized the near 13000 words on the game. Also it would be VERY helpful to filter these words as needed based on the guesses we make in the game.

For example we could have this interface:

Please take a breath and be sure to not get your mind blown...

Getting our hands dirty

Okay we have everything we need to start coding fun stuff. Now let's create a simple Vue app:

npm init vue@latest

And after removing the files of the default Vue greeting, I've come up with this directory structure:

Hey but wait a second, what are those folders and files? We'll get there.

Showing the words

First we need the dataset with all the words from Wordle. After 3 intense seconds on the browser I found this repo. Let's define a function to fetch the words, also let's extract this function to it's own file just to remove some unncesessary logic from the main file and keep things simple.

// src/api/wordList.js

export async function retrieveWords() {
  let words_txt = await fetch(
    "https://raw.githubusercontent.com/tabatkins/wordle-list/main/words"
  ).then((res) => res.text());

  // This is useful because it will return an array of just words
  return words_txt.split("\n");
}

We need a way to show the list of possible words given the letters on the inputs. This should do the trick for now.

// src/App.vue

<script setup>
import { ref } from "vue";
import { retrieveWords } from "./api/wordList.js";

retrieveWords().then((data) => {
  total_words = m_words.value = data;
});

// I've kept the the main list with all the words on it's own variable.
// But I've defined another array which will contain the *filtered* words
// after inserting letters on the inputs.

let total_words = [];
const m_words = ref(null);

</script>

<div>
  <h3>Possible words: {{ m_words.length }}</h3>
  <ul>
    <li v-for="(word, index) in m_words" :key="index">{{ word }}</li>
  </ul>
</div>

Inputs

We need to add the inputs that we'll use to filter the list of words! We need to treat each letter on the input as an independent box because the order of the letters matter. So let's define the green, yellow and grey filters.

const word_filters = ref({
  green_letters: ["", "", "", "", ""],
  yellow_letters: ["", "", "", "", ""],
  grey_letters: "",
});

And... we need to render this on the template

  <div>
    <h3>Green letters:</h3>
    <input
      v-for="n in 5"
      :key="n"
      v-model.trim="word_filters.green_letters[n - 1]"
      maxlength="1"
      size="1"
      placeholder="_"
    />
  </div>
  <div>
    <h3>Yellow letters:</h3>
    <input
      v-for="n in 5"
      :key="n"
      v-model.trim="word_filters.yellow_letters[n - 1]"
      maxlength="1"
      size="1"
      placeholder="_"
    />
  </div>
  <div>
    <h3>Grey letters:</h3>
    <input v-model.trim="word_filters.grey_letters" />
  </div>

Filtering

Let's take a 5 minute break from Vue. Before we continue we need to define the pieces that will do the actual computation and filtering. We'll need the following:

filterMatching words, for the green letters on the correct position
filterContains words, for the yellow letters contained in the word but not in the position specified
filterExcludes words, for the grey letters that should not be in the word.

No need to think too hard... final result:

// src/lib/matcher.js

// Exporting the functions that we will use
export function filterMatching(words, letters) {
  const matching_words = words.filter((word) =>
    isMatchingWord(word, normalize_letters(letters))
  );
  return matching_words;
}

export function filterContains(words, letters) {
  const matching_words = words.filter((word) =>
    hasLetters(word, normalize_letters(letters))
  );
  return matching_words;
}

export function filterExcludes(words, letters) {
  const matching_words = words.filter((word) =>
    excludeWithLetters(word, normalize_letters(letters))
  );
  return matching_words;
}


// ==============Helper functions===================
function normalize_letters(letters) {
  return Array.from(letters).map((letter) => letter.toLowerCase());
}

function isMatchingWord(word, match) {
  for (let index = 0; index < 5; index++) {
    const match_letter = match[index];
    const word_letter = word[index];

    if (match_letter === "") {
      continue;
    }

    if (match_letter !== word_letter) {
      return false;
    }
  }

  return true;
}

function hasLetters(word, contains) {
  for (let i = 0; i < contains.length; i++) {
    const letter = contains[i];
    if (!word.includes(letter) || word[i] === letter) {
      return false;
    }
  }
  return true;
}

function excludeWithLetters(word, exclude) {
  for (let i = 0; i < exclude.length; i++) {
    const letter = exclude[i];
    if (word.includes(letter)) {
      return false;
    }
  }
  return true;
}

Connecting the dots

Now we need to put all of this together. Let's also define a function to fire the filters and another to reset the list with all the words

<script setup>
// ...

function handleReset() {
  m_words.value = total_words;
}

function handleSubmit() {
  let words = m_words.value;
  const filters = word_filters.value;
  words = filterExcludes(words, filters.grey_letters);
  words = filterContains(words, filters.yellow_letters);
  words = filterMatching(words, filters.green_letters);

  m_words.value = words;
}
</script>

And the template:

<template>
  <h1>Wordle helper!</h1>
  <!-- ... -->
  <div>
    <button @click="handleReset">Reset</button>
    <button @click="handleSubmit">Save</button>
  </div>

  <div>
    <h3>Possible words: {{ m_words.length }}</h3>
    <ul>
      <li v-for="(word, index) in m_words" :key="index">
        {{ word }}
      </li>
    </ul>
  </div>
</template>

Running the extra mile

There is a little flaw in our app. As you might have noticed the app lags a bit when loading the 30000 words, that's because we are rendering 30000 <li> items on the HTML when the page loads.

To fix this, we can opt for using a Virtual Scroller (luckly for us there is one for Vue 3.0) this will keep our page for rendering so many HTML tags and it will create a smooth and clean experience for our users.

Here is the final piece of script

<script setup>
// ...

// This is used by the template to put 3 words per row.
// These "rows" are generated dynamically on scroll by the RecycleScroller component
function sliceIntoChunks(arr, chunkSize) {
  const res = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    const chunk = arr.slice(i, i + chunkSize);
    res.push(chunk);
  }
  return res;
}
</script>

And template

<template>
  <h1 class="display-1">Wordle helper!</h1>

  <div v-if="m_words !== null" class="words-container">
    <h3 class="display-6">Possible words: {{ m_words.length }}</h3>
    <RecycleScroller
      class="scroller"
      :items="sliceIntoChunks(m_words, 3)"
      :item-size="45"
      :keyField="null"
      page-mode
      v-slot="{ item }"
    >
      <va-button
        class="word-option"
        :rounded="false"
        color="info"
        gradient
        v-for="(word, index) in item"
        :key="index"
      >
        {{ word }}
      </va-button>
    </RecycleScroller>
  </div>
  <div v-else class="loading-div">
    <va-progress-circle indeterminate />
  </div>
</template>

Also it would be nice to add some extra css to make things pretty and some quality of life changes to filter the words on each keypress. You can check the final result on my github repo!

Skydler / wordler

Wordler

Wordle helper because all the others weren't that nice

View on GitHub

AWS Hyperplane: Are Lambdas inside a VPC slow?

Leonel Mandarino — Sun, 15 Jan 2023 01:46:29 +0000

By default, when your Lambda function is not associated to your own VPCs, the function can access anything available on the public internet such as other AWS services, HTTPS endpoints for APIs, or services and endpoints outside AWS. The function then has no way to connect to your private resources inside your VPC.

Connecting to a VPC

The way for your Lambdas to connect to private resources is by associating them with the VPC your resources reside in. This association is translated to an elastic network interface that lets traffic flow between function and VPC.

Problem?

With this model, there are a number of challenges that you might face. The time taken to create and attach new network interfaces can cause longer cold-starts, increasing the time it takes to spin up a new execution environment before your code can be invoked.

As your function’s execution environment scales to handle an increase in requests, more network interfaces are created and attached to the Lambda infrastructure. The exact number of network interfaces created and attached is a factor of your function configuration and concurrency.

Also, each elastic network interface (ENI) uses an IP address of your VPC subnets so you could possibly reach a limit on the available IPs of your subnet, preventing you from creating additional resources.

Solution?

So what should we do? Should we surrender to these trade-offs? Should we go for a different architecture?

I've been there, I've done my research and I've tested that none of that happens currently. There are a lot of outdated posts about it that generate a lot of misconceptions. That's the motivation of this post.

Since 2019 AWS launched a new (internal) service called Hyperplane, this service address the issues and drawbacks of putting lambdas inside private VPCs!

But... how?

On a high level it's pretty simple and interesting, at least if you have some idea of how NAT works on a network. The idea it's basically the same, you have a bunch of lambdas living in the AWS infrastructure, but when you need to associate them with your VPC they all go through a NAT-ish service that translate each different lambda request to a resource by using only one ENI.

It's very magical, and very convenient service. Because now, the difference in response times of VPC-ed Lambdas and normal Lambdas is almost negligible. I've tested this personally with my infrastructure but you can also see here a comparison made by AWS (with a more detailed explanation)

How to successfully create habits

Leonel Mandarino — Sat, 14 Jan 2023 21:39:23 +0000

There are four rules that are needed to successfully form a new habit, and the opposites of these rules will break or prevent an existing habit.

Disclaimer! All the information is taken from Atomic Habits by James Clear so if you find this interesting you should check the book!

01: Make it obvious

The main idea is to make your habits stand out, make them specific. Once you decide a time and a place to do them, you don't have to wait for inspiration to kick in. There is no need to make a decision. Simply follow your predetermined plan.

The simple way to apply this strategy to your habits is to fill out this sentence:
I will [BEHAVIOR] at [TIME] in [LOCATION].

Another good trick to make them unavoidable it's called habit stacking. Rather than pairing your new habit with a particular time and location, you pair it with a current habit.

The habit stacking formula is:
After [CURRENT HABIT], I will [NEW HABIT].

The key is to tie your desired behavior into something you already do each day. Once you have mastered this basic structure, you can begin to create larger stacks by chaining small habits together.

Environmental cues:

The cues that trigger a habit can start out very specific, but over time your habits become associated not with a single trigger but with the entire context surrounding the behavior. A stable environment where everything has a place and a purpose is an environment where habits can easily form.

If you predispose your surroundings with the stuff that makes you remember your habit, you will probably be inclined toward that habit, even subconsciously. When you are at a party drinking with friends you probably drink more that if you are alone, that's because your context at that time makes it attractive to drink more. And that take us to our next rule.

02: Make it attractive

Habits are a dopamine-driven feedback loop. Every behavior that is highly habit-forming—taking drugs, eating junk food, playing video games, browsing social media—is associated with higher levels of dopamine.

But dopamine isn't released only when you experience pleasure, but also when you anticipate it. And when dopamine rises, so does your motivation to act. It is the anticipation of a reward—not the fulfillment of it—that gets us to take action.

Culture:

We are drawn to behaviors that earn us respect, approval, admiration, and status. The culture we live in determines which behaviors are attractive to us. We tend to adopt habits that are praised and approved of by our culture because we have a strong desire to fit in and belong to the tribe.
One of the most effective things you can do to build better habits is to join a culture where your desired behavior is the normal behavior and you already have something in common with the group. So for example, if you want to start jogging more often, you could start by jogging with other people and making runner friends.

03: Make it easy

To make a habit easy is to stop pressuring yourself to archive big goals in short periods of time. You don't need to start from zero to two hours at the gym every day. Just being there every day (or three times a week, whatever) it's enough to start, even if it's just 10 minutes.

Habits are the automation of repeated tasks, so when forming a habit it's better to make a lot of simple repetitions than a few hard ones. Then, when you have form the habit, you can focus on improvement.

Human behavior follows the Law of Least Effort. We will naturally gravitate toward the option that requires the least amount of work. Create an environment where doing the right thing is as easy as possible and doing the wrong thing is as hard as possible. If you want to stop using your phone each morning when you wake up, why not put the phone away or in another room?

Decisive moments

Every day, there are a handful of moments that deliver an outsized impact. The moment you decide between ordering takeout or cooking dinner. The moment you choose between driving your car or riding your bike. The moment you decide between starting your homework or grabbing the video game controller. These choices are a fork in the road.

We are limited by where our habits lead us. This is why mastering the decisive moments throughout your day is so important. Each day is made up of many moments, but it is really a few habitual choices that determine the path you take. These little choices stack up, each one setting the trajectory for how you spend the next chunk of time.

Procrastination

The idea is to make your habits as easy as possible to start. Anyone can meditate for one minute, read one page, or put one item of clothing away. And, as we have just discussed, this is a powerful strategy because once you’ve started doing the right thing, it is much easier to continue doing it. A new habit should not feel like a challenge.

The secret is to always stay below the point where it feels like work.

If you show up at the gym five days in a row—even if it’s just for two minutes—you are casting votes for your new identity. You’re not worried about getting in shape. You’re focused on becoming the type of person who doesn’t miss workouts. You’re taking the smallest action that confirms the type of person you want to be.

04: Make it statisfying

We are more likely to repeat a behavior when the experience is satisfying because the human brain evolved to prioritize immediate rewards over delayed rewards. The Cardinal Rule of Behavior Change says that what is immediately rewarded is repeated and what is immediately punished is avoided.

One of the most satisfying feelings is the feeling of making progress, for this reason one way to feel like progress is by using some kind of habit tracker. A habit tracker is a simple way to measure whether you did a habit—like marking an X on a calendar. Habit trackers and other visual forms of measurement can make your habits satisfying by providing clear evidence of your progress.

Atomic Habits

Leonel Mandarino — Sat, 14 Jan 2023 21:34:22 +0000

Hi folks! I'll be covering the fundamentals of habits and some ideas, important lessons and quotes from the book Atomic Habits by James Clear, so please if you find this interesting I highly recommend reading the book.

Why habits matter?

It is so easy to overestimate the importance of one defining moment and underestimate the value of making small improvements on a daily basis. Too often, we convince ourselves that massive success requires massive action.

Like everything that's good, it takes time to see the results. Habits are the compound interest of self-improvement. The same way that money multiplies through compound interest, the effects of your habits multiply as you repeat them.

Habits are important because they free us of thinking every step of an action. They give us space to think in a higher level, habits let us ignore the tiny details that are automated on each repetition. When we start driving we are very conscious about every action we take to prevent crashing the car. As we gain experience and drive more often, we stop thinking about "putting the right shift" or "turning on the turn signal" and we start thinking about interactions with other cars and the subtle actions of people walking.

Systems and goals

Goals are about the results you want to achieve. Systems are about the processes that lead to those results. Goals are good for setting a direction, but systems are best for making progress. A handful of problems arise when you spend too much time thinking about your goals and not enough time designing your systems.

Winners and losers have the same goals: We concentrate on the people who end up winning and mistakenly assume that ambitious goals led to their success, while overlooking all the people who had the same objective but didn’t succeed.
Achieving a goal is only a momentary change: Usually when chasing a goal, we treat the symptom without addressing the cause. For example, if you summon the energy to organize your room, you will have a clean room... for now. But if you keep your usual disorganized habits, it won't be long until your room is all cluttered again.
Goals restrict your happiness: The implicit assumption behind any goal is this: “Once I reach my goal, then I’ll be happy.” The problem with a goals-first mentality is that you’re continually putting happiness off until the next milestone. Furthermore, goals create an “either-or” conflict: either you achieve your goal and are successful or you fail and you are a disappointment. This is totally misguided as there are many ways to success and life is unpredictable.
Goals are the enemy of long-term progress: A goal-oriented mind may limit your motivation. Many runners work hard for months, but as soon as they cross the finish line, they stop training. The race is no longer there to motivate them. When all of your hard work is focused on a particular goal, what is left to push you forward after you achieve it? This is why many people find themselves reverting to their old habits after accomplishing a goal.

Habits < -- shape -- > Identity

It's bidirectional, habits shape your identity and your identity shapes your habits. As was said earlier, we need to change the system that drives us every day to change the outcomes we get. The beliefs and assumptions about ourselves shape our system and interactions.

If you don't start to think about yourself as a runner, you won't be running daily. Behavior that is incongruent with the self will not last. You may want more money, but if you identify as someone who consumes rather than creates, then you’ll continue to be pulled toward spending rather than earning. It’s hard to change your habits if you never change the underlying beliefs that led to your past behavior. You have a new goal and a new plan, but you haven’t changed who you are.

Ultimately, your habits matter because they help you become the type of person you wish to be. They are the channel through which you develop your deepest beliefs about yourself. Quite literally, you become your habits.

Deadlocks in OS explained

Leonel Mandarino — Thu, 16 Jul 2020 19:12:26 +0000

An operating system is a complex and big software. It always amazed me all the stuff that's going on inside of it.
So today I'm going to talk a bit about the management of system resources on processes (e.g. CPU, memory, I/O), specifically about deadlock.

What is deadlock?

Deadlock is a state that occurs when two or more processes block themselves simultaneously during the access of a resource.
Let's put it in an example:

Process 1 is using R1 and it's waiting for R2 to keep running. On the other side Process 2 is using R2 and it's waiting for R1.

This can lead to a deadlock propagation, because more and more processes keep requesting resources which are blocked by processes in deadlock state and so on. Eventually this could end in the system crashing or rebooting.

Coffman conditions

There are four conditions that must hold true at the same time for a deadlock to happen. These conditions were first described by Edward G. Coffman

Mutual exclusion: In an instant of time, only one process can use an instance of the resource.
Hold and wait: The processes must hold their assigned resources and wait for new ones.
No preemption: Resources can only be freed voluntarily by the process holding it.
Circular wait: The process takes part in a circular list in which each process of the list is waiting for at least other resource assigned to other process in the same list

This means that we need to find a way to attack at least one of these conditions to stop deadlock from happening.

Deadlock treatment

There are 3 main ways to stop deadlock and in many modern operating systems this algorithms are mixed.

Use a protocol that assures that deadlock will never happen

This scheme is based on two concepts:

Prevention

We need to prevent at least one of Coffman conditions from happening so let's analyze each one.

Mutual exclusion: Here we can't do very much because some resources are non-shareable by nature.
Hold and wait: To prevent this, we must ensure every process that solicits a new resource doesn't hold any other resource. Another protocol could be to make every process request every resource that's going to use during his lifetime before his execution. This way the OS can administrate the processes and assign resources safely. But there is a problem. This protocols are difficult to ensure given the dynamic nature of the requirements, also this could lead to starvation and make the OS very slow in order to keep up with all this "extra processing".
No preemption: One way to solve this would be to make each resource of each process appropriable on demand. Usually this approach makes the execution of processes really slow and doesn't scale very well because of the constant interruptions.
Circular wait: Approaches that avoid circular waits include disabling interrupts during critical sections and using a hierarchy to determine a partial ordering of resources.

Avoidance

This method searches for ways to avoid deadlock limiting the way resources are requested.
For this to work we need to assume that the OS has all the information on what resources the processes are gonna need before execution. Given this information, it's possible to run an algorithm that assures the system will never be in deadlock.
This type of algorithms examine dynamically the state of allocation of resources to avoid a circular wait between processes. A lot of these algorithms differ in the amount and type of information needed to work properly. Some of them are Banker’s Algorithm, Resource allocation graph (RAG).

Allow deadlock and then recover if it occurs

In this scheme we will focus on different techniques that allow us to determine if a deadlock is currently happening and if that's the case, to recover from it.

For detection we need to analyze the state of the system periodically to know soon as possible if the system is in deadlock. An algorithm that tracks the resource allocation and process states is employed.
Once deadlock is detected it can be eliminated by process termination, resource preemption or ultimately by giving a prompt to the user asking to determine which process must be closed to stop it.

The difficulty of this approach resides in knowing when to run these algorithms because they are very expensive in relation to time. Also we need to know which process is the most indicated to choose as victim for the recover algorithms.

Ignore the problem and hope it never happens 🙂

This scheme considers that the probability of a deadlock happening is too low and if it were to happen it's not a big deal. Worst case scenario the system will reboot and everything will be fine as always.

Conclusion

The truth is in general operating systems take the "ignore the problem" approach because the other would slow the system a lot for very little gain.
Still, there are components that need more protection than others. For this the OS uses a combination of the previous algorithms, usually trying to break the circular wait somehow.