Forem: Justin Ho

How To Use The Map Object In Javascript For Filtering API Results 🗺️

Justin Ho — Sat, 31 Oct 2020 01:24:34 +0000

The map data structure and its related keyed collections siblings are handy tools to have in your hypothetical pocket for Javascript development. Maps are key-value stores that allow us to access data using a unique key without iterating through every element (this is a key difference, hah) which makes it faster than an array for search and retrieval in certain scenarios.

For those of you who have only ever used indexed collections such as arrays or lists, you may be wondering why you would use this over a Javascript object.

The MDN documentation actually has a detailed comparison chart comparing maps and objects so take a look there for more in-depth information.

In summary, maps can offer more flexibility and performance because of its ability to use types other than strings and symbols as a key as well as its optimizations for frequent additions and deletions.

Let's take a look at a real scenario where maps may come in handy.

A Realistic Scenario Consuming APIs

So I know I just bashed native objects, but the reality is that many APIs produce results in JSON, which is then transformed into, that's right, objects.

Now let's say we just retrieved multiple arrays of objects from an API endpoint, perhaps it's the list of users who commented on each of a certain blog's articles.

const userResults = [
    {
        "id": 1,
        "slug": "how-to-cook-chicken",
        "comments": [
            {
                "userid": 1,
                "name": "sally",
                // other fields
            },
            // other users
        ],
        // other fields
    },
    // other articles
];

We now have the data we want, but there may be duplicates. Some users may have commented on multiple articles, but we really have no guarantee.

Moving on, we may want to obtain some information about each of these users we have just retrieved and we will call another API endpoint with the user's id.

There are several ways to tackle this issue, with the least effort being to just ignore it and bombard the API with duplicate requests and relying on some form of cache either on the endpoint or on our server to minimize load times. (Please do not do this)

Let's look at some real solutions. As is, we can merge our results then sort the array of objects. There are numerous good solutions for removing duplicate objects in arrays each with their own advantages and drawbacks. (Sets will not filter out duplicates as each object is technically different)

Example

Feb 8 '10 Comments: 7 Answers: 78

945

I have an object that contains an array of objects.

obj = {};

obj.arr = new Array();

obj.arr.push({place:"here",name:"stuff"});
obj.arr.push({place:"there",name:"morestuff"});
obj.arr.push({place:"there",name:"morestuff"});

I'm wondering what is the best method to remove duplicate objects from an array. So for example, obj.arr would become...

{place:"here",name:"stuff"},
{place:"there",name:"morestuff"}

Open Full Question

However, I'm here to offer an alternative using maps.

Most data are structured in some way, especially from an API. Rarely will you get results without some sort of a unique identifier or composite key. In this case, we have the user's id field. This is how we can use this structure to our advantage.

The Solution with Maps

As I mentioned at the start of the article, maps can only contain unique keys.

Our results have unique keys.

Putting this together, we can filter out duplicate results by inserting our results into a map using the id (or any unique key) as the key field and the entire object as the value.

Note that the value is actually overridden and not discarded so this assumes that the values are exact duplicates.

/* Map<id, user> */
const uniqueUsers = new Map();
/**
 * Store users into a map object filtered by user's id.
 *
 * @param {Map} map - map to store in
 * @param {Array} users - user objects
 */
const filterUsersWithMap = (map, users) => users.forEach(user => map.set(user.id, user));
userResults.forEach(results => filterUsersWithMap(uniqueUsers, results["comments"]));

Please note that while we have a guaranteed time complexity of O(n) (with regards to the users) for filtering our duplicates, our space complexity has now increased to O(n^2), so watch out if you have memory constraints.

The Advantage of Using Map

We get several benefits by using a map here, the first being that it is an iterable, meaning we can still loop over it to fetch data from another API endpoint like so:

// values is the object we stored earlier
// ***the results are retrieved in the order they are inserted
[...uniqueUsers].values().forEach(user => fetch(`/api/users/${user.id}`));

Secondly, we have basically created an in-memory cache for fast access to users by their id! If we don't need a database, we can just append additional user data to the object value and always check for it before our API calls.

/**
 * Retrieve user data from API or cache.
 *
 * @param {number} userId - user to query for
 * @param {string} detail - object field in user data
 * @param {Map} allUsers - in-memory store of users
 * @returns user object with details
 */
const getUserDetailById = (userId, detail, allUsers = undefined) => {
    const cachedUser = allUsers.get(userId);
    if (cachedUser !== undefined && cachedUser.hasOwnProperty(detail)) {
        return cachedUser.detail;
    }
    // =================================
    // send API request for user details...
    // add data to a new user object...
    // =================================
    allUsers.set(userId, user); // the value will be overriden at that key
    return user.detail;
};

Afterwords

I hope I was able to help someone out with their sorting algorithm because I know that I personally reach for hash maps (the technical term for the underlying map data structure) way too much as a space-time tradeoff.

I wanted to write about a real-world application of hash maps as there are plenty of articles explaining how hash maps work under the hood.

Finally, you can keep up with my coding tidbits on Twitter @justinhodev!

Bonus

Scaling

This technique is also scalable by moving the in-memory datastore onto an external server. You may have heard of Redis, an example of a dedicated in-memory data store that can be used as a replacement (more accurately an extension as Redis offers far more features) to our technique here if we want multiple Node servers to retrieve users concurrently.

Optimizations

A possible optimization when calling multiple APIs endpoints asynchronously is to execute filterUsersWithMap as a promise and start inserting our user data at the end of each API call instead of waiting for all promises to resolve first. (Someone who is more knowledgeable can correct me if Javascript maps cannot be accessed or written asynchronously, I could not find any results on this topic. If we cannot, Redis and other solutions do provide locking mechanisms.)

Implementation

Under the hood, the Javascript map is an example of the abstract data type hash map which uses a hashing function on the key to determine where (in memory) to store our value objects. With this hashing function, we can on average achieve an O(1) time complexity for search, insert, and delete operations which have helped me tons during coding challenges.

Credit

Cover Photo by Марьян Блан | @marjanblan on Unsplash

I Tried Livestreaming My Code

Justin Ho — Thu, 22 Oct 2020 04:20:41 +0000

Hello DEVs,

Today I tried out live-streaming my coding session on Twitch!

Twitch VOD on Youtube

I'm actually not a stranger to streaming my code. My weekend job is to teach youths games programming and since we moved to online due to Covid-19, I've basically been live streaming my code.

However, the biggest difference is that I have lesson plans and preparation code done for my class beforehand, whereas live streaming on Twitch was more figure-it-out-along-the-way kind of deal.

This brings about 2 big challenges:

Viewers can pop in and out of the stream, which makes it hard for them to catch up on things they missed
I can't assume everyone is on the same skill level and require more or less explanation for what I'm doing

So how can I overcome these issues?

I don't have a definitive answer but I do have some ideas.

For the first problem, it helps if the project is open source as the viewers can go browse the code themselves. However, people come to streams to relax and maybe your changes aren't pushed yet so it would be nice to have some folder structure or architectural diagram up at all times.

As for changing up the level of skill? I think the only way is to assume everyone is a beginner and explain everything all the time. I don't think I did so this first stream but I am looking to improve my explanation skills.

Do you have any suggestions or ideas for consuming programming content? Let me know!

If you're interested in watching me live stream coding, I am streaming my development of a Java-based brick breaker clone on Twitch, 3:00 PM - 5:00 PM PST!

Socials

Twitch
Twitter
GitHub

Brick Breaker Repo

jcsho / brick-breaker-java

Brick Breaker Clone built with Java and Processing Graphics Library

Brick Breaker

Brick Breaker Clone build with Java and Processing Graphics Library

Getting Started

Download binary from releases

Building from source

Required Dependencies

Java OpenJDK 8+ (built with 11)
Gradle v6.6.3+
(Optional) NodeJS v12+ (for husky and commitizen)

Clone and Build

$ git clone https://github.com/justinhodev/brick-breaker.git
$ ./gradlew check build
# compile to exe if needed or just use the one from GitHub release
# ./gradlew createExe

Run on JRE

# build files are in build/distributions/
# setup in build/scriptsShadow/

License

View on GitHub

Top CLI Programs Which Finally Solved My Fear Of The Terminal ⌨️

Justin Ho — Mon, 19 Oct 2020 00:34:45 +0000

This post is for those who are scared of using the command line.

I have switched back and forth between Windows and various Linux distributions for the better part of 3 years.

Frustration about lack of hardware or software support, inability to play some games, and most importantly, using the terminal, were some of the biggest factors which made me go back to Windows from Linux every time.

It wasn't like I was not touching the terminal at all; installing NPM dependencies, changing directory, even simple editing with VI are not the challenges with using the terminal.

The issue was leaving the terminal to search for a command I just used 5 minutes ago or forgetting the correct flag for a certain command that did not have a detailed man page.

So I was stuck in eternal limbo, bouncing back and forth with operating systems and other command tools.

That was until I found the subreddit that changed my view of the terminal (literally) - r/unixporn

Customizing My Terminal

After spending way too much time researching and testing out various terminal emulators, colour themes, and fonts, this is my current terminal start-up view.

Let's dive into some programs which helped me use the terminal for programming!

Fuzzy Search 🔍

You open a terminal, and bam, you're faced with a black screen with a blinking white line.

What do you do next? Why is the white line blinking? What do you type?

The oncoming feelings of confusion and helplessness can be overwhelming and many stop there.

Searching is familiar, we're all used to using a search engine to solve our problems, and most searches gives many matching options and even account for our spelling errors.

The default terminal doesn't have any of those, so here are my favourite programs that can help you find the file or line you need.

FZF + FD And FZF + RipGrep

While fd (file finder) and ripgrep (text searcher) can be used by themselves, I felt the real power came from using them in conjunction with fzf, the fuzzy finder. The combination of these tools allows a filter-based workflow where you can change the search input and the results will dynamically change. My favourite is using it within Neovim.

FZF in Neovim

Ripgrep in Neovim

Auto-complete ✅

Another useful tool for everyday use in the command line is auto-complete. Sometimes we just forget what we need to type or forgot the full command.

In these scenarios, zsh-autosuggestions come in handy. This plugin for ZSH by default checks your command history for a command that matches what you're typing and you can bind that to any keyboard short-cut to auto-complete.

If you mistype frequently and don't have the self-control to not press enter, here's a program which might tickle your fancy: thef*ck

nvbn / thefuck

Magnificent app which corrects your previous console command.

The Fuck

The Fuck is a magnificent app, inspired by a @liamosaur tweet that corrects errors in previous console commands.

Is The Fuck too slow? Try the experimental instant mode!

More examples:

➜ apt-get install vim
E: Could not open lock file /var/lib/dpkg/lock - open (13: Permission denied)
E: Unable to lock the administration directory (/var/lib/dpkg/), are you root?

➜ fuck
sudo apt-get install vim [enter/↑/↓/ctrl+c]
[sudo] password for nvbn:
Reading package lists... Done
...

➜ git push
fatal: The current branch master has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin master


➜ fuck
git push --set-upstream origin master [enter/↑/↓/ctrl+c]
Counting objects: 9, done.
...

➜ puthon
No command 'puthon' found, did you mean
 Command 'python' from package 'python-minimal' (main)
 Command 'python' from package 'python3' (main)

…

View on GitHub

Thef*ck has an interesting history, originating from Twitter and gone on to amassing 56 thousand plus stars on GitHub. It's essentially an auto-correct for your previous command based on a set of rules for common CLI programs (you can find the full list of supported programs on their README). While I don't personally use this, it's really cool in the sense that it was inspired by the community and reminds me of what open-source is about.

Coloured Outputs 🌈

This section is about blinging up your terminal. ✨

As you can tell, I already customized the colour scheme and fonts of my current terminal. However, this section is for the other parts of using the terminal which usually lacks coloured outputs such as cat or man.

For starters, I use zsh-syntax-highlighting, a plugin to highlight commands and strings in your input. To be honest, I think this is why I don't need thef*ck most of the time, if I see the program command highlighted in red it either means I miss-typed it or it doesn't exist on my system.

Next, there is bat and one of its add-ons: batman which provides git diff support, syntax highlighting and vim-style navigation on top of the base command of cat and man.

Finally, a common workflow I found myself doing was running git status and having to print the files out to see what I changed. Instead, there is a program known as forgit which gives interactive previews to common git operations. Powered by fzf and optionally bat, you can see the actual diffs of files before you add them or when looking at previous commits.

Tabs + Split Screen 👥

Wrapping up all my terminal programs is tmux, a split-screen, multi-tab, terminal session manager can be manipulated all in one window. It's basically how I can have "one" terminal window open all the time, only alt-tabbing for browser and other GUI apps.

Tmux honestly has too much going for it (including paired programming) that I am not really doing it justice saying it's just for split-screen and tabs.

For example, it has its own plugin ecosystem, including tmux-resurrect which can store and restore your session, tabs and splits included, allowing you to pick up your work where you left off!

Wrapping up

So these are my favourite command-line programs which helped me start using the terminal on a day-to-day basis!
I hope you found something interesting and let me know if you have any suggestions in the comments!

Follow me on Twitter @justinhodev to keep up with my daily code bits!

Bonus - Dotfile Management

To manage all of these program's configuration can be a massive pain. Instead, because all of the configurations are managed in files (usually preceded by a dot), people have figured out to just store them as a git repository to make it portable and all the other advantages. If you read posts from r/unixporn, you'll find people talking about "dots" or "dotfiles" which is referring to these configuration files. Here's an article I followed to set up my own dotfile repository: The best way to store your dotfiles: A bare Git repository.

List of all the programs

I Tested These GitHub Apps So You Don't Have To

Justin Ho — Sat, 17 Oct 2020 18:38:10 +0000

Cover Photo by Markus Winkler on Unsplash

GitHub is one of the most well-known repository hosting platforms in the open-source community. One feature that they provide over other hosting platforms is the discovery, ease-of-use and integration of 3rd party apps. Some of these apps are for project management, continuous integration, and even issue labelling. With so many apps to choose from, which one should you use for your next project?

To save you the trouble, I compiled a list of apps that are free for open-source projects and have good integration with GitHub.

Dependency Management ⚙️

Managing dependencies can be a pain, you don't want to "reinvent the wheel" and write everything yourself. At the same time, you're not sure which version of the project is usable or has vulnerabilities. Fortunately, these apps automate updating your dependencies with the update details while scanning CVEs for known vulnerabilities in their code base.

Dependabot

Dependabot has recently been integrated into GitHub directly and provides seamless feedback in pull requests, dependency scanning, and vulnerability scanning. The process of setting it up is so simple I'd encourage all of your GitHub projects to have it set up!

Dependabot automatically opens a pull request to update your project dependencies based on your requirements

Code Quality🔥

If you're just starting your programming journey, you may not have experienced the gruelling feeling of submitting a pull request and having a peer or senior review your code. Worry not, now you can have a robot tell you how bad it is! Jokes aside, static analysis for code has come a long way, and these apps below utilize common linters and rules to determine the "quality" of code (as in how much of the rules you have not broken, yet).

Codacy

Codacy was the first automated code quality analysis tool I have used (in 2 projects) and I like its website view with many detailed charts and breakdowns as well as custom integration to GitHub pull requests.

Codacy can break down your pull request issues and hotspots to understand how "quality" it is

* I have not tried the second and third options but they seem to provide the same functionality as codacy

Code Coverage 🔍

Coverage is the percentage determined by a code analysis tool for the amount of code that has test cases. To be honest, I would ignore the percentage for your personal projects but it's nice to have.

Codacy

Codacy provides an all-in-one analysis suite that includes an optional coverage report aggregator. Either manually or using its GitHub actions to send our code coverage report to their site allows a visual representation of your codebase coverage changes overtime!

Codacy stores the submitted coverage reports to produce charts of code coverage trends over time

Security 🔒

Security is a sensitive topic which everyone talks about after the product has been shipped. Instead, these apps automate analysis for common vulnerabilities to integrate DevSecOps (development/security/operations) directly into your development pipeline.

Accessibility ♿

Make the web accessible for everyone! This app is super neat in that it analyzes HTML-style code for missing attributes and tags such as an alt attribute for image tags or <label> tags for input fields.

AccessLint

Licensing 📜

Do you know the licenses of your dependencies? Maybe they're not all as permissive or FOSS as you might think.

Fossa is a policy engine for gathering the details of open-source licenses from your dependencies to warn you about incompatibilities and other legal stuff. Mostly for the enterprise but their badge looks really aesthetic 😎

Fossa gives a rundown of the types of licenses associated with your dependencies

Displaying All Your Badges ✨

An additional benefit of integrating these apps with your GitHub repository is that you get to show how much care you put into your codebase as badges. I'm not saying that's why I use these services, but these badges definitely make me happy looking at my repository.

Most of the services listed have their own badge system but if not, there's always shields.io.

Blinging up my repository readme with some badges

Wrapping Up

Which GitHub app will you integrate into your next project? Do you have one that you would like others to try? Let me know in the comments!

If you found the use of these cool, give my new personal project, a brick breaker clone, a look and a star ⭐ would be much appreciated 🙏

jcsho / brick-breaker-java

Brick Breaker Clone built with Java and Processing Graphics Library

Brick Breaker

Brick Breaker Clone build with Java and Processing Graphics Library

Getting Started

Download binary from releases

Building from source

Required Dependencies

Java OpenJDK 8+ (built with 11)
Gradle v6.6.3+
(Optional) NodeJS v12+ (for husky and commitizen)

Clone and Build

$ git clone https://github.com/justinhodev/brick-breaker.git
$ ./gradlew check build
# compile to exe if needed or just use the one from GitHub release
# ./gradlew createExe

Run on JRE

# build files are in build/distributions/
# setup in build/scriptsShadow/

License

View on GitHub

Follow me on Twitter @justinhodev to keep up with my daily code bits!

What Keyboard Layout Do You Prefer?

Justin Ho — Wed, 07 Oct 2020 18:57:42 +0000

Last week I commented on this discussion asking what keyboards the DEV community uses.

What keyboard do you use?

maxdevjs ・ Sep 30 '20 ・ 1 min read

#discuss #productivity

I showed my Tokyo60 keyboard with the HHKB variant of the QWERTY layout because it stressed my pinky less without having to reach for the bottom left corner. Instead, I replaced the usual capslock key with CTRL and put it on another layer. I still rarely use capslock though.

So whether it be for ergonomics or style, what keyboard layouts have you tried or prefer?

Some example of layouts other than QWERTY or its variants:

The Scrabbling String Problem

Justin Ho — Wed, 07 Oct 2020 04:40:32 +0000

I got a chance to solve a "whiteboard" question (a jargon for data structures and algorithms question done on a whiteboard usually at interviews) the other day and wanted to break it down for anyone who might come across this in their interviews. This was labelled medium difficulty on the website.

The Whiteboard Question

Given 2 strings, wordToBeFound and lettersInHand, return true if the characters in lettersInHand can be arranged to form wordToBeFound and false if it cannot.

A Sample Output

lettersInHand = "heulselo";
wordToBeFound = "hello";
console.log(canScrabbleString(wordToBeFound, lettersInHand));
// returns true because lettersInHand contains "h", "e", "l", "l", "o"

Approaching Whiteboard Problems

Depending on your experience, this can either completely freak you out or you just let out a sigh of relief for how easy it is.

If you're freaking out, the first thing I'd do is stop, take a breath, and read the question a second time.

Do not start writing an answer, especially if you're freaking out.

Next step is to talk (and write) out your thought process. Ask yourself what are your known variables? What's the challenge here?

For this question, I noted that I have 2 string variables and it didn't matter if either are null or empty as I'm returning a boolean. Next, I noted that the challenge was identifying if a character existed x number of times in lettersInHand as there are in wordToBeFound.

Next I translated my rough idea into pseudo code

For each letter in wordToBeFound, search lettersInHand for a corresponding letter
If a matching letter is not found, return false
If a matching letter is found, remove the letter to track duplicates
If every letter has been found return true

First Pass - Minimal Viable Code

So I've analyzed the problem and identified a solution. It could be wrong. But if the interviewer doesn't stop to correct you, don't second guess yourself right now.

On my first attempt, I try to simplify the problem and my solution. For example, I'll assume there are no duplicate letters and that there's at least 1 letter in each string, and I will not try to optimize for complexity; I found myself not being able to come up with a solution when I attempt to solve the bigger problem and optimize for complexity right from the get-go.

Assuming no duplicates, I came up with a naive solution using a nested for loop.

/*
 * Determines if characters in lettersInHand can be used to form wordToBeFound
 * Time complexity - O(n^2)
 * 
 * @param {string} wordToBeFound - not null string with no duplicate letters
 * @param {string} lettersInHand - not null string
 */
function scrambleString(wordToBeFound, lettersInHand) {
  for (let wordIndex = 0; wordIndex < wordToBeFound.length; wordIndex++) {
    let stringFound = false;
    for (let letterIndex = 0; letterIndex < lettersInHand.length; letterIndex++) {
      if (wordToBeFound[wordIndex] === lettersInHand[letterIndex]) {
        stringFound = true;
      }
    }
    if (!stringFound) return false;
  }
  return true;
}

You do not have to use long for-loop variable names, I used i and j as the for-loop variable names for my actual submission but I changed it up to make it clear here.

Next, you should either manually test it (if you're actually on a whiteboard) or test it in a browser (advantage of using Javascript) or web editor.

Since this is an initial solution, I just came up with some inputs that I knew the output for.

Example:

console.log("should be true - result: " + scrambleString("helo", "heklio"));
console.log("should be false - result: " + scrambleString("fairy", "level"));
// Output:
// should be true - result: true
// should be false - result: false

Second Pass - Solves the Problem

Now that this solution works for a simple case, we can move on to accounting for duplicate letters. A simple approach is to just remove the letter from the string when it's matched. Since our function will return false once there are no more copies of the letter, the function should still work.

...
      if (wordToBeFound[wordIndex] === lettersInHand[letterIndex]) {
        stringFound = true;
        // ==================================
        // remove the character found from the string
        lettersInHand = lettersInHand.replace(lettersInHand[letterIndex], "");
        // ends the inner for-loop to prevent removing additional characters 
        // or out of bounds error
        break; 
        // ==================================
      }
...

How To Make The Solution Better

This next step might trip some beginners up because they are either not sure what to do next or not sure how to proceed to the next step.

In my opinion, after you have a working solution, there are only 3 distinct categories for improvement at this point that is useful to the interview:

code quality - code structure, consistent name casing and tense, useful comments
efficiency - the "Big O"
handling errors - catching nulls or undefined, incorrect type

What you choose to prioritize and how you go about it will depend on time constraints and your ability as a developer.

In this problem, I will only demo improvement of the efficiency in my solution.

Time Complexity

In case you do not know about time complexity, it's a metric to measure the time it takes for an algorithm to complete. I won't go in depth here but basically our first solution has a time complexity of O(n^2) because we have a nested for-loop that has no other complex operation inside. The loops iterate over the first string s1.length times but iterate over the second string s1.length * s2.length times. Since Big O notation usually account for worst case, we use the inner measure and take all input as n, we get n*n or n^2.

Trading Memory for Speed

A common way to make your algorithms more efficient is to use a suitable data structure. There are many different data structures and arrays are by far the most known one. Arrays are space efficient and everything is ordered, but it's not very efficient for searching a known value. Instead, there are more search efficient alternatives such as hash tables or binary trees which should be easy enough to implement in an interview setting.

For this problem, I have the luxury of using the native hash table equivalent in Javascript: Map.

You can search up how to implement your own hash table in Javascript afterwards so I'll just show my final solution.

My Final Solution

/*
 * Determines if characters in lettersInHand can be used to form wordToBeFound
 * Time complexity - O(n)
 * 
 * @param {string} wordToBeFound - not null string with no duplicate letters
 * @param {string} lettersInHand - not null string
 */
function scrambleString(wordToFind, lettersInHand) {  
  let stringMap = new Map();

  for (let index = 0; index < lettersInHand.length; index++) {
    if (stringMap.has(lettersInHand[index])) {
      let copies = stringMap.get(lettersInHand[index]) + 1;
      stringMap.set(lettersInHand[index], copies);
      continue;
    }
    stringMap.set(lettersInHand[index], 1);
  }

  for (let index = 0; index < wordToFind.length; index++) {
    if (!stringMap.has(wordToFind[index])) {
      return false;
    }
    let copies = stringMap.get(wordToFind[index]) - 1;
    if (copies === 0) stringMap.delete(wordToFind[index]);
  }

  return true;
}

The reason this is more efficient is because the Map object in Javascript has an average retrieval of O(1) compared to using a loop to search for the value in an array (O(n)). By breaking the nested loops, we have improved the worst-case complexity to O(n).

Wrapping Up

Thanks for reading! I hope you learned more about answering whiteboard questions today.

To be quite honest, I still struggle at them and I am only this confident after going back to review what I did wrong so don't feel discouraged if this stumped you or you felt like you can't do this.

Instead, I challenge you to go try solving a whiteboard question on any website!

Let me know if you have any suggestions in the comments below.

Follow me on Twitter @justinhodev if you want to keep up with my daily coding!

Bonus

So if any reader is familiar with JavaScript functions, they may have looked at String.indexOf() instead of a nested for-loop in my first or second solution. I couldn't find any reference for its time complexity but I will assume it's the same as Array.indexOf() and based on this source (and its corresponding links), it's just a cleaner syntax but the implementation is still a for-loop so the complexity should still be O(n^2). If you happen to know the answer, let me know in the comments!

Writing An Unnecessarily Complex Function in Notion

Justin Ho — Tue, 06 Oct 2020 03:33:33 +0000

What Is Notion?

If you have not heard of Notion, it's an "all-in-one workspace" or as I liked to call it, a better EverNote. The application is essentially a fully-featured markdown editor, allowing editing of each page using standard markdown and Latex in "blocks". In addition, Notion has integrations such as free images from Unsplash, mockups in your Figma, files in your Google Drive, and even code from CodePen.

Okay, enough praise for this thing, what does this have to do with programming?

Formulas In Notion

The programming-related part of Notion is its ability to use a query language called "Formulas" to create new spreadsheet columns. If you have ever worked with SQL or Excel functions, this will be familiar to you. Formulas allow the Notion user to define a single output based on other fields in the database, using relations much like in relational algebra.

The Problem

So I'm currently using Notion to write and sort my blog posts, but I came across a cool spreadsheet that uses Notion as a subscription tracker. I thought "wow, I use subscriptions, I should list out the total costs side-by-side".

So I duplicate this onto my own Notion workspace (jargon for your account), but I realized that the "Renewal Date" field had to be manually entered in. I thought to myself: "if all subscriptions are recurring on the same date each month or year, why can't this be automatically calculated by the subscription start date?".

And so I wasted a few hours automating one thing that probably should take 2 seconds to find and click each month or year. The beauty of automation.

The Formula

You might be wondering why it took so long for me to figure it out. It's because the formula editor for Notion is not great, and because there was no easy way to build a date field from separate integers like "year + month + date".

So I ended up with my final formula looking like this:

In case you wanted better formatting and easier for you to copy and paste, I structured it like GraphQL nodes down here:

formatDate(
  dateAdd(
    dateAdd(
      dateAdd(
        now(), 
        subtract(
          date(prop("Start Date")), 
          date(now())
        ), 
        "days"
      ), 
      if(
        and(
          equal(
            prop("Billing"), 
            "Monthly"
          ), 
          smallerEq(
            date(prop("Start Date")), 
            date(now())
          )
        ), 
        1, 
        if(
          equal(
            prop("Billing"), 
            "Yearly"
          ), 
          subtract(
            month(prop("Start Date")),
            month(now())
          ),0
        )
      ), 
      "months"
    ), 
    if(
      and(
        equal(
          prop("Billing"), 
          "Yearly"
        ), 
        smaller(
          month(prop("Start Date")), 
          month(now())
        )
      ), 
      1, 
      0
    ), 
    "years"
  ),
  "MMMM D, YYYY"
)

How I Got To This Formula

Let's break this chunk of formula down.

There are only a few constants I could use without adding extra fields to the database: now() for the current time, prop(field) for a column in the database, and then the rest are self-descriptive functions.

Calculating The Day

First, I had to figure out the correct day of the month. Since I would always know the very first renewal date of each subscription, the simplest way is to just add the difference between the current day and the renewal day, which would look like this: current_day + (start_day - current_day)

After turning it into a Notion formula:

I guess date() is not self-explanatory because it actually returns the day of the month.

Calculating The Month

Next, I will need to figure out the correct month with only the output from the previous query. There are now 2 branching options: if its a monthly subscription and the current day is larger than the initial subscription day, then I would need to increase the month by 1, otherwise increase it by 0.

I'm going to refer to the previous formula section as $day

By the way, for those wondering why we use operators instead of add() or and() this is basically why.

Of course, this didn't exactly work because of the yearly subscriptions. Whereas the month increases in a monthly subscription, the month of the yearly subscription don't exactly change every year. We can solve this by adding a nested if-statement for the else clause (the third argument in the if() function), and we'll end up with the correct month for both types of subscriptions.

I highlighted the added part in purple

Calculating The Year

Finally, the year is quite simple to calculate, since adding the month in the previous step will take care of the year transition. Instead, this part is mostly adding the year when its a yearly subscription and formatting it without the time it normally comes with. Again, I will use $month to signify the result from the previous step.

Wrapping Up

So this wasn't a complete waste of time, now I only have to input the date at which my first payment occurs and viola, automated next due date. I guess one thing I've learned is that spacing and indent really helps and that math operators are too ingrained into my head compared to reading these named functions. I hope you enjoyed my struggle and make use of this function for your own spreadsheet! Let me know if you write notes on paper or if you have another program to take notes in the comments below.

Bonus

In case anyone wondered, I actually only turned it to light mode for the screenshots but normally I use it in dark mode.

Also, if you want to make cool code screenshots as I did above (please only use it in conjunction with the actual code snippets), it's on carbon.now.sh

Follow me on Twitter @justinhodev if you'd like to keep up with my daily coding!

Why I Chose Laravel As My Backend Framework

Justin Ho — Mon, 05 Oct 2020 03:29:23 +0000

Photo by Marcus Lenk on Unsplash

What is Laravel?

Laravel is an open-source back-end web development framework using the PHP programming language. The beauty of Laravel is its expansive and vetted ecosystem of packages which were all built to compliment the base framework.

For those coming from NodeJS like myself, you begin the appreciate the "convention over configuration" mindset this framework brings as you sift through its thorough documentation with examples for every possible thing you want to do.

No more webpack vs gulp, typescript or no typescript, or eslint vs some new code linter. Laravel brings me a feeling of calm because the ecosystem is uniform and each package is responsible for one thing and one thing only.

What this Article is about

Despite the title, this post isn't really a step by step guide on setting up Laravel, the documentation is very thorough on that. Instead, what I want to highlight is the different approach Laravel takes to development if you are coming from a NodeJS or another back-end framework.

The Development Experience

An important aspect of programming that is often ignored is the experience for the developer writing the code. How easy does the software allow you to make changes? What kind of friction does the developer encounter? I'll be going over a few things the framework has built-in for a smoother experience.

Development Environment

It's currently 2020, Agile and DevOps should not be buzzwords anymore. As a developer, you should be conscious of the production environment as early as possible, and that means using tools to ensure your development environment is as reproducible and free of unnecessary dependencies as possible.

Laravel offers a fully documented method of a development environment through the use of a Vagrant managed virtual machine called Homestead. For those unfamiliar with Vagrant, it's a development environment configuration and management tool which can work with local virtual machines or even resources on the cloud. The benefit of Homestead is that you get an ephemeral virtual machine which will always be the same when you turn it on. The only drawback with this approach is that your host machine (the base computer) will still need the PHP, Composer, and Vagrant dependencies to make it work.

Package Management

Just like the NodeJS NPM ecosystem, PHP has its own package manager known as Composer, which works almost the exact same way: using a configuration JSON file to include versioned dependencies for your project.

The Artisan CLI Tool For Web Artisans

Artisan, a CLI Tool, is where Laravel starts differentiating itself from other fragmented frameworks. In many NodeJS frameworks, you have to install a new CLI tool to work with custom commands for scaffolding; for example, create-react-app, gatsby-cli, etc. With artisan, it's the ONLY CLI tool you need to use (other than composer for package commands) to scaffold and interact with your Laravel application.

If you need to test, php artisan test automatically links to PHPUnit (the default testing framework). If you need to create a new Eloquent ORM model, there is php artisan make:model. If you add an extra package such as Livewire for dynamic interfaces? Artisan now has extra commands to interact with that too.

The Ecosystem

Finally, this part is where Laravel excels, having separate packages for authentication + authorization, integration with other systems such as stripe and OAuth providers, as well as hosting providers in both cloud and serverless form.

I looked through all the package documentation and found that it was consistently of good quality (other than the newest member, Jetstream) and provided examples that integrated itself with Laravel.

Closing Thoughts

Although NodeJS has an enormous NPM ecosystem, sometimes it can feel very fragmented and the quality is very hit or miss with both the functionality and the documentation of the packages. On the other hand, Laravel works within the confines of its ecosystem and provides an "it just works" mentality to all its included packages, while still allowing you to extend its capabilities through composer for additional packages.

I hope this gave you some insight into the Laravel framework and why it could be your choice for your next project.

If you want to read more, see my project series where I refactor a vanilla PHP app onto Laravel.

Feel free to connect with me on Twitter @justinhodev.

Refactoring JQuery to ES6

Justin Ho — Sun, 04 Oct 2020 01:36:45 +0000

Cover Photo by Markus Spiske on Unsplash

A Little Look At The History Of JQuery

The big bang of web development

Between 2006 and 2015, JQuery was revolutionary. It was a library which did everything that developers had a hard time maintaining code for: standardized API to select elements in HTML, and cross browser support.

Now in 2020, you as a reader might scoff at these features. But this was the reality for front end web developers before the appearance of ECMAscript 6 (ES6) and other important features in CSS3 you may take for granted.

Why You Might Want To Remove JQuery As A Dependency

Over-reliance can be an addiction

Dependencies are not a bad thing, we as developers do not need to code everything from scratch and "reinvent the wheel" every single time. However, I would argue that most usages of JQuery are trivial to accomplish in vanilla Javascript and do not require importing the entire JQuery library into your client's browser. In other words, we might want to remove this dependency to increase load speed and make better use of native browser capabilities if we can.

The Demo Code

Lead by example

So today I will be showing how I refactored several JQuery functions from my HypeTracker project into vanilla Javascript.

// private/js/ajax.js
// run functions after document has loaded
$('document').ready(function() {
    // ajax update shown products after select value changes
    $('#brand').change(function() {
        var brand_id = $(this).val();
        $.ajax({
            url: "./load_data.php",
            method: "POST",
            data: {brand_id : brand_id},
            success: function (data) {
                $('#show_product').html(data);
            }
        });
    });

    // update view if user enters characters into search box
    $('#sneaker_search').unbind().keyup(function(e) {
        var value = $(this).val();
        if (value.length >= 1) {
            search_sneaker(value);
        } else {
            $('#search_result').hide();
            $('#show_product').show();
        }
    });

    // ajax post call to return search results from search box
    function search_sneaker(val) {
        $('#show_product').hide();
        $('#search_result').show();
        $.post('./load_data.php', {
            'search_data' : val
        }, function(data) {
            if (data != "") {
                $('#search_result').html(data);
            } else {
                // default view if no results
                $('#search_result').html("<div class=\"row pl-3\"><div class=\"col-3\">No Result Found...</div></div>");
            }
        });
    }
});

I apologize in advance because the code is not great but it was also written several years ago and I've learned to write better code. The reason I'm using this code instead of a contrived example though is because it is code from an actual project with constraints, and there are already resources which tell you exact Javascript functions to use in place of JQuery (which I will link at the end).

Breaking The Code Down

Making it bite-sized

As with any project, even an old one I wrote myself, the first thing is having an understanding of what it does or is trying to accomplish. Reading through the code, I listed out the gist of what each section does:

An event is called when the value of a select element with the id brand changes
- event: sends an AJAX POST request to load_data.php which returns some data to be shown in an element with the id show_product
An event is called when the input field with id sneaker_search is focused and a key from a detected keyboard is released
- it calls a search_sneaker function when there are characters detected in the input field
- otherwise it shows the element show_product and hides the element search_result
The function search_sneaker sends an AJAX POST request to load_data.php and renders the return values in an element with the id search_result
Everything above is wrapped inside a helper function to make sure all code will not run until the document has fully loaded

Tackling Changes One By One

Baby steps, one at a time

To begin, I will start by extracting the AJAX requests. If you have not noticed, there are two instances in my breakdown above where I noted "sends an AJAX POST request to load_data.php". This means that I'm violating the DRY (don't repeat yourself) principle and can refactor it into one reusable function.

Asynchronous Javascript And XML

A powerful proposition of JQuery was its streamlined AJAX request and response functions over the native XMLHttpRequest. However, the introduction of the fetch API changes this because it too was fairly easy to use, and supported the promise-based syntax. The last point makes it even better when you don't have to support IE with the introduction of the async / await keywords in the browser.

Since I'm not supporting anyone, really, I'll be making use of both the fetch API and the async / await to create my AJAX function.

First, I will use the fetch equivalent for JQuery's $post(url, data), which is fetch(url, { method: 'POST'}).

Next, we can encode our data in two ways,

Manually encode it ourselves (ex. field1=data1&field2=data2)
Use the FormData interface to do it for us

Using the FormData interface, we will end up with a new function like this:

async function searchSneaker(type, value) {

  let searchData = new FormData();
  searchData.append(type, value);

  const response = await fetch('./load_data.php', {
    method: 'POST',
    body: searchData
  });

  if (!response.ok) {
    throw new Error(response.status);
  }

  const text = await response.text();
  return text;
}

As a quick side note, the fetch promise object does not throw errors on bad HTTP status by default. Instead, checking if the promise object's ok property is true (for HTTP status codes 200-299) or manually checking the return code of the status property.

Element Selectors

The second part is relatively short but it'll help us consolidate our selectors in Javascript variables.

In JQuery, elements can be selected with the $(element) function. On the other hand, vanilla Javascript has querySelector and getElementById. Switching syntax and identifying the elements I needed from above, I will end up with these global variables:

const products = document.getElementById('show_product');
const searchResult = document.getElementById('search_result');
const searchBox = document.getElementById('sneaker_search');
const brandSelector = document.getElementById('brand');

Event Listeners

The final step to finish the refactoring is to use native event listeners. In JQuery, we chained together element selectors along with event listeners such as $(element).on(...) or $(element).change(...). The native event listener interface is not too different other than having to specify the type of event as an argument.

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    searchBox.addEventListener('input', filterBySearch);
    brandSelector.addEventListener('change', filterByBrand);
  }
}

The filterBySearch and filterByBrand variables are actually functions passed as an argument. In this case, the corresponding functions will receive an Event object as a parameter. This chunk of code takes care of making sure no AJAX functions are dispatched until the document has fully loaded by attaching the event listeners at that time.

The Completed Code

Glad you made it this far

After making changes in these 3 categories and using JSDoc style comments, I ended up with code like this:

const products = document.getElementById('show_product');
const searchResult = document.getElementById('search_result');
const searchBox = document.getElementById('sneaker_search');
const brandSelector = document.getElementById('brand');

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    searchBox.addEventListener('input', filterBySearch);
    brandSelector.addEventListener('change', filterByBrand);
  }
}

/*
 * Limit Products by Brand Select
 *
 * @param {Event} brand - value from select event
 * @return {void} updates product html
 *
 */
async function filterByBrand(brand) {
  brandId = brand.target.value;
  const sneakers = await searchSneaker('brand_id', brandId);
  if (sneakers === null) return;
  products.innerHTML = sneakers;
}

/*
 * Limit Products by Search Phrase
 *
 * @param {Event} search - value from input event
 * @return {void} updates search result html
 *
 */
async function filterBySearch(search) {

  let searchValue = search.target.value;

  if (searchValue.length <= 0) {
    searchResult.style.display = 'none';
    products.style.display = 'block';
    return;
  }

  const sneakers = await searchSneaker('search_data', searchValue);

  if (sneakers !== "") {
    searchResult.innerHTML = sneakers;
    return;
  }

  searchResult.innerHTML = "<div class=\"row pl-3\"><div class=\"col-3\">No Result Found...</div></div>";
}

/*
 * Send an async request with search term
 *
 * @param {string} type - search type
 * @param {string} value - search value
 * @return {text} the formatted HTML with data
 *
 */
async function searchSneaker(type, value) {

  let searchData = new FormData();
  searchData.append(type, value);

  const response = await fetch('./load_data.php', {
    method: 'POST',
    body: searchData
  });

  if (!response.ok) {
    throw new Error(response.status);
  }

  const text = await response.text();
  return text;
}

I omitted explaing the filterByBrand and filterBySearch functions since they're basic Javascript. One last note is that the innerHTML property is the same as the html property in JQuery.

Wrapping Up

I hoped you learned something from reading about my process in refactoring this code, whether it be that you can write better code or that it's pretty easy to convert from JQuery to native Javascript.

I'll leave some links for reference and further readings in case you were still confused.

Feel free to connect with me on Twitter @justinhodev and happy coding!

Resources

History of JQuery
You Might Not Need JQuery
Essential Cheatsheet: Convert JQuery to Javascript
How to use fetch with async / await

How Do You Feel About Open Source Culture?

Justin Ho — Fri, 02 Oct 2020 18:26:06 +0000

It's currently Hacktoberfest 2020, and developer communities are in an uproar about the impact (both positive or negative) this event brings to open source projects. Just take a look at some of these tweets for context.

// Detect dark theme var iframe = document.getElementById('tweet-1311692006775758853-831'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1311692006775758853&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1311838404699729922-312'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1311838404699729922&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1311590839756427265-935'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1311590839756427265&theme=dark" }

That being said, this post isn't just about Hacktoberfest. The third tweet alludes to what open source software (OSS) maintainers face frequently year round: harassment in the form of demands and feature requests.

Now let me make it clear that I am not a current maintainer of any OSS repository and I have only infrequently made pull requests to different repositories on various platforms. But I do keep notifications on the projects I use and some of the users can make some outrageous demands.

The Meaning of Open Source

// Detect dark theme var iframe = document.getElementById('tweet-1311629463529152513-608'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1311629463529152513&theme=dark" }

For context, I do believe that user demands are normal and sometimes even healthy for the direction of the project. I believe that it is the attitude and approach that some of these users are using to treat OSS as the same as a paid commercial product is the crux of the issue. But how can we address this as a community?

Potential Solutions

Better support for communities in OSS repository platforms

For example, I think the 'issues' tab on GitHub has become too all-encompassing, where users are filing every little problem in the issues tab when its usually meant for bugs or feature requests. Now this may not be a problem for bigger projects with dedicated support members, but for any small - mid sized project, this can complete clog up the work tasks. I don't know what form this takes yet, maybe you think a separate instant message platform already fulfills this role, but I think improvements could be made directly on the platform.

More impactful punishments for abuse on public platforms

This second one is a bit more controversial but I believe that people should take responsibilities for their actions and that goes for abusing others on the internet. Platforms such as GitHub and GitLab have outgrown their initial goals as just a hosting platform for public repositories, with people's job searching criteria being linked to these platforms. I believe there should be a call out for blatantly abusive behavior on these platforms, by the platform, so when potential recruiters see the person's online behavior, they would think twice about working with them.

What do you think about open source? Do you agree or disagree with my suggestions? Are you taking the point of view from a maintainer or contributor?

Update (10/03/2020 - 2:30AM UTC)

DigitalOcean has made Hacktoberfest repositories opt-in only!

// Detect dark theme var iframe = document.getElementById('tweet-1312220884665536512-372'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1312220884665536512&theme=dark" }

Happy Coding

Justin

Programming On The Go When You Only Have A Phone

Justin Ho — Fri, 02 Oct 2020 00:39:43 +0000

Cover Photo by Mika Baumeister on Unsplash

This is a follow-up / extension of my other post, Using the Cloud As Your Mobile Workstation, check it out if you haven't!

Article No Longer Available

What This Post Is About

No this is not a tutorial to code an Android app

Last week I happened to be away from home all day and only left with an ultra-thin laptop to work on. The laptop's battery would not have lasted me the whole day if I ran my virtual machines. As I pointed out in my post above, my solution was using a cloud virtual machine as a workstation, because it was inexpensive for the amount of compute power you get running it for one day and it preserved my laptop's battery.

Today's post however, goes one step further, and details how you can work on your programming projects using an Android device.

Why Would You Want To Do This?

"...your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should."

In the current COVID-19 pandemic of 2020, many businesses and establishments do not offer their regular sit-in / walk-in spaces. So imagine my surprise when I went to drop off my car for a check-up only to find out it would take 2 hours instead of 20 minutes. And there was nowhere to sit. And I only had my phone on me.

"Why don't you go to the (fast-food place with a clown) down the road?"

Photo by Jonas Jacobsson on Unsplash

So there I was, sitting on the counter, sipping on my iced coffee and scrolling through social media all by myself, when a thought hit me: "why don't I work on my project?"

The How I Did It

The process is actually easier than you might think, and there are even software as a service platforms such as GitPod which offers a VSCode instance in a chrome browser. However, I was more comfortable using a command line and using short-cuts for VIM on a touch keyboard felt more natural than on VSCode. But how do I get a terminal on my phone?

Enter Termux

Termux is an open source terminal emulator for Android, providing a sand-boxed Linux-like environment for you to access using a console interface. It doesn't require me to root my phone (which I couldn't have without another machine) and it was available on F-Droid. It's a truly wonderful project, and perfect for what I wanted to do.

Now, I wasn't about to install all my project dependencies on my phone. The bandwidth of public Wifi combined with my phone's battery would make sure I never finish setting up the project before my car was ready.

Instead, I just reused what I had in my last post: a cloud-based virtual machine to work on, but this time, with my phone as a thin client.

The Cloud, Round 2

Last time, I created a snapshot (a copy in time) of both the virtual machine with my development environment and the block storage with my project. The benefit of these snapshots is that I can just bring it back online and it will be the same as when I shut it down.

So after I generated my SSH key in Termux and uploaded it to my cloud provider, I recreated the virtual machine and SSH-ed in, and viola, a perfectly usable, and powerful, development machine.

How My Cloud Development Machine Looks In Termux On My Android Device

or is it?

There Is Always A But

I'm not going to lie to you and say that this was a perfect experience and that everyone should be coding on their phones. No no no, this was by far the worst experience short of using punched cards and a single-key keyboard to type in Morse code, plus at least those would be kind of fun.

Between the small screen real estate (without an external keyboard) and constant context-switching, it can be insufferable to work on for most people, me included. If I were to do it again though, a wireless keyboard would definitely help here.

Takeaways

If it's such a bad experience, why am I recommending it?

I would not say recommending but more so showing readers who have not explored the capabilities of their everyday devices that programming is possible on a wide array of electronics and not just a powerful desktop machine. In addition, I want this to be a motivation that you can, in fact, program on the go if you put your mind to it.

Afterwords

Next time I'll program on top of Everest or something

That's it!

Follow or reach out to me on Twitter @justinhodev for my daily coding titbits!

If you're interested in the project I'm working on, here is the repository:

jcsho / hype-tracker

Full stack web application to read data from public APIs (Twitter, Reddit) and form visualizations

HypeTracker is a data aggregator application for social media 'impressions' on sneakers bought and sold in the aftermarket.

See my blog detailing what HypeTracker is and why I am refactoring it

Changelog / Goals for V2

~~migrate database schema~~ see PR #4
~~migrate internal sneakers API~~ see PR #7
~~migrate front-end see PR~~ #17
deploy as demo / push as v2
add social media api scraping

Getting Started

Requirements

Homestead

PHP ^7.3
Composer ^1.10.13
Vagrant ^2.2.10 (with your choice of virtualization layer)
(example) VirtualBox ^6.1.14 (with Vagrant's VirtualBox provider)

$ git clone https://github.com/justinhodev/hype-tracker.git
$ cd hype-tracker

# Install Composer Dependencies
$ composer install

# Prepare config for Homestead
$ composer homestead

# Provision the VM
$ vagrant up

# SSH into Vagrant Box
$ vagrant ssh

Docker

coming soon

Database Entity Relationship Model

License

View on GitHub

How do You do testing?

Justin Ho — Thu, 01 Oct 2020 08:01:53 +0000

I'm currently working through adding livewire (a server side framework) to my laravel app - HypeTracker, but I decided to stop and think about how some of you DEV members approach testing for small or personal projects because a lot of testing posts have been popping up lately.

It was easy for my backend parts as I was fairly comfortable writing unit tests for API and functions. But do you guys do any browser testing as well before writing the visual portions? Mostly talking about pet projects.