DEV Community: CallmeHongmaybe

Cheatsheet for frontend interviews

CallmeHongmaybe — Fri, 11 Aug 2023 04:21:25 +0000

For coding interviews, I think the biggest problem would be encountering unfamiliar questions (I guess this should be obvious) and deciding on which approach works best given the time constraints.

What I am trying to accomplish in this article is to lay out patterns that occurs in certain sets of questions, so that when we deal with its derivative questions in the future, we can at least don't have to do too much guesswork before we even start talking about solutions.

Before we start, I want to mention that this only focuses on Javascript coding questions only, not UI questions since they can be varied and difficult to discern patterns.

As I'm preparing for my upcoming interviews, here is a tentative list of different question types with concepts and possible patterns.

Promise programming

Like the title suggests, this tests our ability to do async programming, by reinventing the wheels like Promise.any and Promise.all so that we know how it works under the hood.

Patterns:

In all cases you will loop through the iterables

promiseAny(iterable) // function similar to Promise.any
promiseAll(iterable) // similar to Promise.all

function promiseAll(iterable) {
   // ... 
   iterable.forEach(async (item, index) => {
      try {
        const value = await item;
        iterable[index] = value 
        // if function is promiseAny instead then resolve(value) 
      }
      catch (err) {
        reject(err)
      } 
   })
   // ....
}

Then the pseudocode would be as follows:

promiseAll(iter) or promiseAny(iter) { 
    for each element in `iter`, wait for it to load
    if you return all promises, transform the input with results fetched from the elements 
    else resolve the iter as soon as it's fetched
}

Rewriting `Array.prototype` methods

The goal of this part is really for us to get used to the workflow of the function.

Patterns:

Callback functions accept at most four parameters prev, curr, index, array
Callbacks in Array.prototype.filter and Array.prototype.map will return a Boolean in order to transform the array calling the methods (denoted as this)

Array.prototype.filter = function(callbackFn) {
  let copyArr = []

    for (let i = 0; i < this.length; i++) { 
        if (!this[i]) continue; 
        else if (callbackFn.call(thisArg, this[i], i, this)){ 
          copyArr.push(this[i])
        }
    }

    return copyArr 
}

For Array.prototype.reduce the callback function will return a callback result based on previous callback result.

// in Array.prototype.reduce function 
Array.prototype.myReduce = function(callbackFn, initVal) { 
   let startingIndex = ... 

   for (let i = startingIndex; i < this.length; i++) {
      if (!this[i]) continue 
      result = callbackFn(result, this[i], i, this)
   }

   return result 
}

The general pseudocode for doing such questions would be:

arrayMethod = function (prev, curr, index, array){ 
   declare vars 
   for each element in this list
       - for reduce update `prev` value using the callback function every time taking current `prev`value as input
       - for others transform `this` array 
}

Rewriting DOM APIs

Even though front end interview questions put less emphasis on data structures and algorithms, a handful of such questions still remain for us, such as rewriting getElementsByTagName and getElementsByClassName using DOM traversal and the likes of it.

Patterns:

Using the function traverse(element) recursively for the elements and its offspring to check the condition of each element, for both getElementsByTagName and getElementsByClassName

export default function getElementsByTagName(rootElement, tagNameParam) {
  const elements = [];
  const tagName = tagNameParam.toUpperCase();

  function traverse(element) {
    if (element == null) return;

    if (element.tagName === tagName) elements.push(element);

    for (const child of element.children) {
      traverse(child);
    } // recursing through its children
  }

  for (const child of rootElement.children) {
    traverse(child); // recursing through its root children 
  }

  return elements;
}

function isSubset(a, b) {
  return Array.from(a).every((value) => b.contains(value));
}

export default function getElementsByClassName(rootElement, classNames) {
  const elements = [];
  const classNamesSet = new Set(classNames.trim().split(/\s+/));

  function traverse(element) {
    if (element == null) {
      return;
    }

    if (isSubset(classNamesSet, element.classList)) {
      elements.push(element);
    }

    for (const child of element.children) {
      traverse(child);
    }
  }

  for (const child of rootElement.children) {
    traverse(child);
  }

  return elements;
}

Hence the closest pseudocode describing the commonality between the two DOM APIs would be:

getElementsByAttr(rootElement, tagName = undefined, classNames = undefined) { 
     declaring empty list of elements 
     traverse(el) { 
        check if el satisfies a condition, for ex. its tag name matches or is contained by classNames
        if so push it to the new el list
        traverse every child of el and its descendants 
     }
     traverse through root elements' offsprings 
     return updated list of elements
}

Functional programming

Coding questions would come in all forms and shapes, but they will demonstrate the same set of concepts including closures, this keyword, using setTimeout/setInterval and Invoking functions via Function.prototype.apply()/Function.prototype.call()

Patterns:

For debounce/throttle questions, you might image the test cases to look like this. Sort of like when you try to press the elevator button and after a certain time passed since you last pressed it, the door finally shuts itself. As for throttling, you use it when you want to prevent rage clicking, meaning that you could only click once every x seconds. Just like in Discord's slowmode chat.

let i = 0, j = 0;
function increment(val) {
  val++; 
}
const debouncedIncrement = debounce(increment(i), 100);
const throttledIncrement = throttle(increment(j), 100);

// t = 0
debouncedIncrement(); // i = 0
throttledIncrement(); // j = 1

// t = 50: i is still 0 because 100ms have not passed, throttled remains moot until t=100ms
debouncedIncrement(); // i = 0
throttledIncrement(); // j = 1 

// t = 150: Because 100ms have passed since the last debouncedIncrement() at t = 50, increment was invoked and i is now 1
throttledIncrement(); // j = 2

Notice that in 2 functions, the variable timeoutId can only be assessed and modified through debouncedIncrement or simply debounce(increment(i), 100)(). Closure hides variables behind a veil and prevent outside actors to play with it unless they know the keyword (namely which function) to access it.

export default function debounce(func, wait) {
    var timeoutId = null; 

    return (...args) => {
      clearTimeout(timeoutId)
      timeoutId = setTimeout(() => func.call(this, ...args), wait)
    }
}

export default function throttle(func, wait) {
    let canBeToggledAgain = true;

    return (...args) => {
      if (canBeToggledAgain) {
        func.apply(this, args)
        canBeToggledAgain = false
        setTimeout(() => canBeToggledAgain = true, wait)
      }    
    }
}

Without further ado, here's the pseudocode for the 2 function s above


md
function throttle || debounce () { 
  set timeoutId or toggle boolean 
  return function if timeout ends ( clear timer if necessary ) or when condition to do so is right
}

I once built a open source project like Google Trends

CallmeHongmaybe — Thu, 27 Jul 2023 08:06:11 +0000

What are the features that make it unique ? How is it compared to existing products ?

There’s nothing inherently unique about this project, given that I borrowed a huge deal of inspiration from Google Trends, ProductHunt and DEV to some extent.

In detail, I’d say it’s a combination of the leaderboard from Google Trends and upvoting scheme in ProductHunt. I'd say that mods are able to filter out bad poll submissions and trending items just like in DEV.

As for how it really works, the business logic of the app is as follows:

Anyone can see the trending leaderboard and nomination poll for movies and games for each country but cannot cast votes
A registered user can cast votes in the leaderboard but cannot cast vote for nomination polls unless they are from the country of the poll.
A moderator has all the privileges of a normal user, plus the ability to remove inappropriate content from the polls and leaderboards ( still in the works )

May I know how this is built ?

I start building this project around the onset of COVID-19 ( circa spring of 2020 ). It was built primarily in the first 4 months where I learned to fit the business logic of the project with Next.js and Tailwind CSS.

I remember myself making React polls for the first time and doing all sorts of CRUD operations with MongoDB/Mongoose.

About authentication, I record hashed passwords in the DB and compare the input password with it. Then my cookies will record the JWT token of the account info once they are signed in.

How did you test your site ? And are there still bugs on your site ?

As far I as know, console logs are the most reliable way to get feedback from Next.js, but I'm curious to know how e2e testing tools like Cypress makes the project better.

ATM there aren't any majors bugs and mostly visual bugs here and there. For example the carousel looks ugly before it loads completely.

The project would be more complete if I have the resource to finish the all the use cases distinct to moderator users.

Why you may enjoy contributing to this open source project

I can say there are some benefits for contributing to this:

The problems are basic to moderate in difficulty and all of the heavy work in the project is already done.
You don't have to wait for days or weeks just to get replies about your PRs
Suitable for fellow frontend developers who are either looking for frontend projects to contribute to regularly, or wanting to do side projects but unable to find time and resources to build from scratch

Introducing Climatology

CallmeHongmaybe — Sat, 06 May 2023 09:20:17 +0000

What I built

Essentially I built a search engine of climate data for over 120,000 locations.

Category Submission:

Due to the sheer amount of people NOT using this, this would definitely qualify as a Wacky Wildcard project.

App Link

Live Demo

Screenshots

I have no good screenshots but I hope a video would suffice.

Description

Climatology is a web app that provides comprehensive climate and weather data for over 120,000 locations around the world with a population of over 1,000. The app features three main sections: Climate, Monthly Averages, and Basic Forecast.

Link to Source Code

GitHub Repository

Permissive License

MIT License

Background

The fascination with cold weather inspired me to build an app that simulates how weather patterns can affect an area. My goal was to create a catalog of meteorological information for every location in the world that has a population over 1,000, providing users with an alternative to other weather apps on the market.

How I built it

I built Climatology using Next.js, MongoDB, Python, and R for data processing. GitHub Actions and Codespaces played a significant role in streamlining the development process, allowing me to test design ideas and REST APIs quickly.

During the development process, I learned a great deal about Next.js, MongoDB, using Postman for API testing, and scientific computing. I also improved my skills in handling Git version control and working with geolocation features.

Additional Resources/Info

For more detailed information about the development process and the journey I took to create Climatology, you can read my 4-part blog series describing the project's conception and final product.

Introducing Browser Flashcards

CallmeHongmaybe — Wed, 03 May 2023 14:25:57 +0000

What I built

What I built is an automatically generated flashcard repository for language learners, that lives in their browsers.

Category Submission:

No doubt this is gonna be a Wacky Wildcards submission, and possibly Phone Friendly since the app will adapt its layout accordingly to each screen size, even though it's not yet qualified as a PWA yet.

App Link

https://lingohelper.vercel.app/

Will change the domain name soon in accordance with the new name

Screenshots

For your better understanding, you can check out the videos below:

Description

Browser Flashcards (formerly Lingohelper ) is an automatic flashcard generator for language learners, designed to live right in your browser. You can input a short paragraph or a comma-separated list of words, and the app will take you to a flashcard editor where you can make edits before saving to your browser storage. The project was born out of a desire to provide an efficient vocabulary learning tool that doesn't require a subscription or registration.

No signup required, no ads, no cookies, no paywall, just flashcards. For your own benefit.

Link to Source Code

https://github.com/CallmeHongmaybe/browser-flashcards

Permissive License

The project's license is Apache 2.0

Background (What made you decide to build this particular app? What inspired you?)

Aside from my day job as a dev, one of my lesser known side hustle is teaching people languages online. By studying their learning experience and preferences, I thought it might be cool if there is an app that can help them learn vocabulary efficiently without having to pay for a subscription in Quizlet and without any registration whatsoever.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I built this project using Next.js, Tailwind CSS and Dexie.js (Which is React wrapper for IndexedDB, the kind of database that lives in browsers)

Obviously the project is hosted on Vercel, which I'm grateful for due to the seamless hosting experience provided without charge.

One thing I liked about this project is the amount of technical creativity I've never got to express before in any of my past personal projects, through management of mouse events and state management between different components inside the flashcard editor.

Like when you click a star button, the flashcard's gonna turn gold. Or when you add a new card, the input fields will reset to empty and the deck will be scrolled to the position of the new card.

I knew sometime before that GitHub Codespace is very similar to Gitpod, and I'd only need to tell Codespace which repo to host on its cloud.

Additional Resources/Info

The sortation and categorization of English words comes from a library/npm package called natural.

Removing clunky node_modules folder with Terminal

CallmeHongmaybe — Wed, 15 Mar 2023 15:15:08 +0000

TLDR - node_modules takes a good chunk of your disk space ( up to the tunes of 10s of GBs ) and given a set of commands I believe I'm able to turn the situation around.

Motivation for removing clunky node_modules

So, a little bit of backstory...I tried contributing to FreeCodeCamp's codebase, but the current macOS version I'm in doesn't allow me to upgrade node to the version I'd wanted. Therefore, to make the backup process as swiftly as possible, I decided to take the tedious work of removing storage space.

It took days of tedium to make sense why the disk space always seem to miscalculate system storage size. At one point it bloated to over 77 GB, and I scoured my computer drive for bulky folders.

Even after deleting a bunch of junk folders out, the figure still hovers at around 50 something GBs.

How I realized it's time to remove those clunky folders

Among all of those burdensome clusters of data, I just found just how cluttered npm storage has become. Turns out there are node_modules all over my projects folder. All of this contributed a whopping 3.38 GBs.

So I concentrated all archived projects into one folder called web projs & stuff, and then I did two things:

Remove package-lock.json, because those files are being contained inside node_modules
Then proceed with node_modules

find ./Desktop/"web projs & stuff" -type d -name "node_modules"

find ./Desktop/"web projs & stuff" -type f -name "package-lock.json"

!! -exec rm -rf '{}' +

After that it drops down to 1.52 GB.

Is it helpful to talk about your Stack Overflow reputation during job interviews ?

CallmeHongmaybe — Thu, 02 Feb 2023 10:47:49 +0000

Also: Is it helpful to include in your Stack Overflow reputation along with the profile link on your CV ?

How do you guys deal with wandering mind at work ?

CallmeHongmaybe — Thu, 02 Feb 2023 06:53:04 +0000

When it comes to tackling hard coding questions or hard tasks at work, I often find my mind wandering somewhere else.
In situations like these, I could only hold about 5-10 minutes max, and every time I wander I often feel guilty and even anxious. That my performance would drop because of it.
I looked around my colleagues and all of them seemed to be attuned with their work. But I guess they wouldn't survive a day without cups of coffee on their desks.
But do any of you feel the same way and how do you stay focused when confronted by difficult work ?

Is it normal to fail QC after you submitted your task ?

CallmeHongmaybe — Mon, 30 Jan 2023 03:14:12 +0000

Do people expect you to pass all the tests as a junior developer and are people as forgiving when you only get some points wrong ?

Dealing with possible job termination/layoff (part 1)

CallmeHongmaybe — Wed, 25 Jan 2023 05:36:30 +0000

People say layoffs is a universal constant that keeps the modern economy mathematically valid, but yet we try to distance ourselves from thinking about it as much as possible.

For one reason or another, if judgment day becomes imminent, we scramble to put things back together and correct every possible little things that may and will contribute to our fall from grace.

So I turned off Netflix, sat myself in a corner, silently reflecting the ways to "cushion the blow" after the New Year holiday is over.

Emotionally dealing with the problem

Needlessly, I self-questioned everything from hard skills to my own sanity, procrastinated over the chain of mistakes and errors leading to my downfall. Yet, I reminisced the times when conversations with the manager were lighter and the initial optimism after probation period ends successfully.

In truth, I have better days checkered with worse days. And the impermanence of things in life teaches me there is always an end to the start, regardless of performance and luck. Counterintuitive that it may sound, it is the obsession of control, not perfection, that gets to me.

It's really easy to apply self help content from people on the same boat as you are, and while I can't deny that it's mental medicine, I'm not impervious to events that can invalidate everything I thought as right, and that will take a while for me to surface back up. But that's okay...at least for me.

The boring part...making a failsafe plan

The most obvious thing I can do right now is to browse LinkedIn and every listings/job boards I can think of.

But personally, the important thing to do right now is to transfer what I learned from my present job in terms of technical knowledge and soft skills to my Notion, or notebook.

Once I have everything in one place, then should I start tinkering with my CV.

As a P/S, from The Book of Disquiet by Fernando Pessoa, he wrote:

"Trying to attain full understanding of one self is like letting yourself fall into a bottomless rabbit hole, since you could be an entirely different person in different circumstances."

"Reality is just as deluded and false as our vivid dreams we had last night. Dissolved as soon as we woke up, never to be known and thought of again."

Introducing my open source language flashcard app

CallmeHongmaybe — Sat, 07 Jan 2023 03:54:00 +0000

TLDR; In the most basic definition, the app automatically generates flashcard decks for language learners, that lives in their browsers. You supply either a short paragraph or a comma separated list of words, and the app will redirect you to an flashcard editor where you can make further edits before saving it in browser storage. I'm looking forward to improving it, like supporting more languages and making a chrome extension for the app, but I'm not terribly sure if I can ever accomplish them all alone.

Inspiration behind the project

Aside from my job, one of my lesser known side hustle is teaching people languages online. By studying their learning experience and preferences, I thought it might be cool if there is an app that can help them learn vocabulary efficiently without having to pay for a subscription in Quizlet and without any registration whatsoever.

That's when I called the new project as Lingohelper ( Because I kinda suck at coining project names, so if you guys have a better idea, go to the comments please :) )

What's inside the project

The app is built with the tech stack I mentioned in my very first blog post, that is JAM stack plus TailwindCSS.

In addition to that, I also made use of a neat React wrapper for IndexedDB called Dexie.js.

UI/UX-wise, it's an app that contains the deck collections, the input to put in the words, and the editor to make customizations to the new deck.

How to use it

First, you create your new set of flashcards by inputting a list of new words, or a paragraph if you're particularly lazy.

After pressing the Create Deck button, you'll be led to editor where you can create a new flashcard, delete or star any of the existing ones.

If you make any changes to the deck, remember to press Enter to make sure the changes are saved.

Of course, one picture can explain more than a thousand words, and so it goes, one video can explain 60 pictures a second.

As the project is still in its MVP stage, the Chinese translations shown in the video are by no means correct. The generated words came from a random word API that I stumbled across on Github.

What are the features that make it unique ? How is it compared to existing products ?

Anki and Quizlet are the first ones that came to my mind when building it. Pretty much Lingohelper possesses the look/feel of Quizlet and the versatility of Anki. As well as its' offline uses.

Quizlet charges people for importing CSV and Excel files to the deck. While Anki offers a cloud storage solution which obviously costs money.

Despite the advantage of privacy and simplicity Lingohelper possesses, the largest drawback of the site is the translation API itself.

DeepL apparently has a generous plans for this kind of hobby project, but since I don't live in the global North, I'd be hard pressed to find a better solution.

What else do you need help with ?

I wondered for a long time if I could download Anki flashcards from the saved decks.

And I'd love it if there's some sort of a flipping animation whenever you edit with the contents of the card or star it.

Last but not least...

The source code is available on GitHub

My favorite tech stack for building every personal project

CallmeHongmaybe — Mon, 02 Jan 2023 06:26:02 +0000

TLDR - I'm talking about the tech stack that works for my life situation. I'm not a fan of working with databases, and even if I do, I'd only use it to store large amounts of data and write them. Therefore my tech stack can be described as somewhere between JAM and serverless. You decide.

My frustration with tech stacks

As a preface, I'd be remiss not mentioning just how many framework out there is for us to even comprehend. Many times I had to make online trips to tech forums asking for advice on tech stacks.

What's really frustrating about it is that most of the tech out there does relatively the same job, especially for the needs of my personal projects at that time. In short, it took me almost 2 weeks to find all the answers needed.

As much as I hated to admit this, but for a college freshman like me then, it's cool to have a broad knowledge of different frameworks, languages and even better, to constantly update your existing knowledge with the advent of new releases.

But it was only when I was in my new job that all of my naive beliefs came into dust.

You need a great product, not great technology. It is only the means to an end, while the management/technical skills you demonstrate is the end itself.

It doesn't matter how you can build a clone in 12 hours with the shiniest tech stack, or how learning them can give you an edge in the job marketplace, the content always takes the
throne.

The nature of projects that I built

The end goal of this is to show employers what I can do and how these projects stand for my interests.

For example, it could be a browser side flashcard storage app, a rating app, or something as esoteric as a catalog of different climate zones.

When it comes to size and scope, I expect my end product to neither be too lightweight, nor to be hindered by too much challenges. To do so, I filtered out use cases or requirements that require substantial engineering effort, like say, implementing a customized e-commerce site, or too much novelty, like simulating the impact of desert conditions on a 3D tree.

I'd say it's a combination of not reinventing the wheel, but improving the spokes on the wheel.

The tech stack

In any given time of day, I'm left with only 2 to 3 hours to spare each day.

That means I need a combination of tools that should be few in numbers, but diverse enough to cover most of project requirements. All without ending up with a bloated list of technology that can lengthen the time to finish the project.

Usually I'd just need some endpoints, a frontend framework and browser storage to begin with.

Regarding SSG/SSR frameworks, Next.js pretty much abstracts API handling while allowing you to do extra logic on server side, all without having to use databases once.

As Next.js is also built along with React, it saves me from having to learn more Node.js frameworks and I can just code in React or Node in the same file.

Together with TailwindCSS, I never had to switch to a new file type again.

While the downside is that the file looks uglier and more verbose, I don't like the idea of having to switch between files to edit a specific component and strain my working memory.

Conclusion

Again, this is just another piece of my mind when being asked about my favorite tech stack. What about yours ? And how does it make your development experience better ?

Any mini web app ideas ?

CallmeHongmaybe — Tue, 18 Aug 2020 15:35:23 +0000

Long story short, I'm a Logistics and SCM student learning web development on free time.
I still don't know much about web dev even though I've self-taught for over a year now. My skill is somewhere between
amateur level and junior dev level.
For the past few months I felt like going nowhere in the web dev world, and until recently I started growing fond of aerospace engineering and physics. But at the same time I was afraid of letting go of web dev. I've already made this far and I can never imagine forgetting them all. I also have to deal with the possibility of spreading myself too thin.
So, before I give myself the green light to embark on a new journey, I need to have some bit-sized projects to remind myself web dev basics.
Any answer is greatly appreciated ! Mad love to you guys.

DEV Community: CallmeHongmaybe

Cheatsheet for frontend interviews

Promise programming

Patterns:

Rewriting Array.prototype methods

Patterns:

Rewriting DOM APIs

Patterns:

Functional programming

Patterns:

I once built a open source project like Google Trends

What are the features that make it unique ? How is it compared to existing products ?

May I know how this is built ?

How did you test your site ? And are there still bugs on your site ?

Why you may enjoy contributing to this open source project

Introducing Climatology

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

Permissive License

Background

How I built it

Additional Resources/Info

Introducing Browser Flashcards

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

Permissive License

Background (What made you decide to build this particular app? What inspired you?)

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

Additional Resources/Info

Removing clunky node_modules folder with Terminal

Motivation for removing clunky node_modules

How I realized it's time to remove those clunky folders

Is it helpful to talk about your Stack Overflow reputation during job interviews ?

How do you guys deal with wandering mind at work ?

Is it normal to fail QC after you submitted your task ?

Dealing with possible job termination/layoff (part 1)

Emotionally dealing with the problem

The boring part...making a failsafe plan

As a P/S, from The Book of Disquiet by Fernando Pessoa, he wrote:

Introducing my open source language flashcard app

Inspiration behind the project

What's inside the project

How to use it

What are the features that make it unique ? How is it compared to existing products ?

What else do you need help with ?

Last but not least...

My favorite tech stack for building every personal project

My frustration with tech stacks

The nature of projects that I built

The tech stack

Conclusion

Any mini web app ideas ?

Rewriting `Array.prototype` methods