DEV Community: Cindy Lam

IntelliJ IDEA: How to rename variables in multiple places in a file? ~~if you find Shift + F6 does not work...

Cindy Lam — Tue, 06 Aug 2024 05:12:55 +0000

It is my first time using IntelliJ IDEA for learning Java. While trying to familiarize myself with the tool, one keyboard shortcut took me some time to figure out - how to rename variables that appear in multiple locations in a file.

Refactor/Rename

UI: Right Click on the variable, that you would like to refactor, select Refactor, and then select Rename. You will also see the keyboard shortcut there as well.
Keyboard Shortcut: As you find additional info in the JetBrains documentation here, you should be able to use the shortcut shift F6 for Mac and Windows.
Replace: You can use command r to do either a single replacement or all replacements on the variable you would like to refactor

KEYNOTE - if you are using a MacBook Pro Keyboard, please make sure to use the shortcut shift fn F6 with a fn key.

Hope this helps! Enjoy exploring IntelliJ IDEA! 😆

How to Fix SyntaxError: Unexpected token { encountered when running `npm start`

Cindy Lam — Thu, 08 Sep 2022 03:35:21 +0000

You may have already updated the node version to the latest LTS and then encountered this error.

This particular error is coming from the webpack-dev-server node module. In order to resolve this syntax error, you just need to update the version of your npm package to the latest version, as below:

npm install -g npm@latest

If you need additional guidance on updating node/npm to latest version, read more here.

It is a really quick fix, but took me slightly longer than expected to figure out this issue. Hope this will help you out if you are going through the similar experience! p^v^q

Heroku Error: item could not be retrieved unauthorized

Cindy Lam — Mon, 20 Jun 2022 04:08:08 +0000

It has taken me a while to figure out why I got this particular error (displaying in red at the top right corner under my profile image in Heroku) since I did not find any relevant info in Google search.

The error means that there is an issue with an authorization specifically on your Github account (this could be due to, I guess, inactivity in the deployment of GitHub projects linked with Heroku).

The solution is pretty straight forward:
(1) Click on the Deploy section in Heroku
(2) Scroll to App connected to GitHub
(3) Click on the Disconnect... button
(4) Allow the authorization in the connection between Github and Heroku -> Enter your Github password
(5) Reconnect to your Github project
(6) Then you should be able to deploy successfully in the Manual deploy or Automatic deploys sections!!

Hope this helps if you also encounter the similar issue! :)

Linked List - Basics

Cindy Lam — Mon, 21 Mar 2022 00:18:18 +0000

Linked List Brief Intro:

Linear collection data structure
Chain of nodes ⛓ - "each node contains a value and a pointer to the next node in the chain."

Singly Linked List (one direction only)

1 -> 2 -> 3 -> 4 -> null (when the pointer gets to null, it has reached the end of the linked list) 
^
Head: beginning of the linked list

//Linked List Node Class Declaration
class ListNode { 
   constructor(value = 0, next = null) { 
      this.value = value; 
      this.next = next; 
   }
}

In this Linked List series, I will be using curr (stands for current) as the main pointer to move through a Linked List.

//Using curr allows us to remember the head to return it at the end of the function

let curr = head;

1 -> 2 -> 3 -> 4 -> null
^
curr

curr = ListNode { 
          value: 1, 
           next: ListNode { 
                   value: 2, 
                    next: ListNode { 
                             value: 3, 
                              next: ListNode {
                                     value: 4, 
                                      next: null
                                   }
                          }
                 }
       }
curr.value = 1

1 -> 2 -> 3 -> 4 -> null
^ ->
curr.next (the next node based on the current node) 

curr.next = ListNode{2, ListNode{3, ListNode{4}}}
curr.next.value = 2

How to move to the next node in a Linked List?

//assigning curr to the next node 
curr = curr.next;

Here is an example:

while(curr) { //keep iterating as long as curr is not null
   curr = curr.next; 
}

While 'curr' is not null: 

1 -> 2 -> 3 -> 4 -> null
^ ->
curr.value = 1
curr.next.value = 2

curr = curr.next;

__

While 'curr' is not null: 

1 -> 2 -> 3 -> 4 -> null
     ^ ->
curr.value = 2
curr.next.value = 3

curr = curr.next;

__

While 'curr' is not null: 

1 -> 2 -> 3 -> 4 -> null
          ^ ->
curr.value = 3
curr.next.value = 4

curr = curr.next;

__

While 'curr' is not null: 

1 -> 2 -> 3 -> 4 -> null
               ^ ->
curr.value = 4
curr.next = null

curr = curr.next; 

__

1 -> 2 -> 3 -> 4 -> null
                     ^ ->
'curr' is null, stop the iteration. 
The pointer has now moved through the entire Linked List.

References & Additional Resources:

Linked List - Core Algos Overview

Cindy Lam — Mon, 21 Mar 2022 00:17:56 +0000

Based on my learnings at Formation, I have learned 11 core algorithms for this Linked List data structure. I have grouped them up by similarities:

Group #1: Accumulating elements in a Linked List

Count Elements in a Linked List
Sum Element Values in a Linked List

Group #2: Finding without the need of a pointer

Find a Highest/Max Element Value in a Linked List
Find an Element in a sorted Linked List

Group #3: Finding with 2 pointers

Find a Middle Element in a Linked List in One Pass
Find Kth Element from the End of a Linked List in One Pass

Group #4: Adding element(s)

Append an element with a target value to a Linked list
Insert a target element in a sorted Linked List (with sentinel*)

Group #5: Removing element(s)

Remove a target element in a sorted Linked List (with sentinel*)
Remove all elements with a target value in a Linked List (with sentinel*)

Group #6: Reversing elements

Reverse a Linked List

Group #7: Summing Linked Lists

Sum Two Linked Lists of Equal Length (with sentinel*)

*Sentinel node = It is a node that does not hold any reference/data to a Linked List (can be any value). We will have the pointer points to this node first. This is especially commonly used for inserting and removing Linked List problems

Core Algos

Cindy Lam — Mon, 21 Mar 2022 00:17:28 +0000

I have recently started my journey at Formation as a Frontend Engineering Fellow. I have decided to document down what I have learned and shared with my future me and whoever who is in the DSA learning journey.

Learning Core Algos is the first round in my Formation journey. There are 30+ basic algos are given to me to learn and an assessment to complete within a time limit of 45 mins. It has been intensive, but I have recently passed the assessment and super glad to be able to document down what I have learned. Based on these basic algos, here are the 3 data structures that will be focusing on in this Core Algos series:

Linked List
Binary Tree (and Binary Search Tree)
Array

String .split() Method

Cindy Lam — Mon, 31 Jan 2022 01:26:30 +0000

In MDN, the definition is - "The .split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array".

We use this method to split a string with a pattern stated in the first parameter, and limits in the second parameter. But they are not required.

From the examples below, please use console.log(splits) to see the output in the console.

const words = 'Hello, I am a Split!'; 

let splits = words.split(); //no parameters
//Output: ['Hello, I am a Split!']

let splits = words.split(' '); //a whitespace
//Output: ['Hello,', 'I', 'am', 'a', 'Split!']

let splits = words.split(','); //a comma
//Output: ['Hello', ' I am a Split!']

let splits = words.split(' ', 3);
//Output: ['Hello,', 'I', 'am']

Split method can also have `multiple parameters`:

We need to use slashes instead of quotations within the split method when there are multiple parameters since we are using regex (Regular Expressions).

const words = 'Hello, I am a Split!'; 

//Using Regex - brackets '/[]/'
let splits = words.split(/[,\s!]/); //comma, whitespace ('\s'), exclamation
//Output: ['Hello', '', 'I', 'am', 'a', 'Split', '']

//Using Regex - pipes '/|/'
let splits = words.split(/,|\s|!/);
//Output: ['Hello', '', 'I', 'am', 'a', 'Split', '']

Additional Notes:

As you noticed there are some empty elements generated from the output, you can use Array filter() method to get rid of them, as below:

const filters = splits.filter(element => element); 
//Output: ['Hello', 'I', 'am', 'a', 'Split']

Welcome!

Cindy Lam — Sat, 29 Jan 2022 19:59:00 +0000

Hi everyone! After learning and practicing on Exercism (JavaScript track) for almost 50 days now, I have completed close to 50 questions out of a total 138 questions so far.

I have decided to create a series blog posts to document down different methods in JavaScript, some good practices that I have learned from the mentors at Exercism, as well as any things related to JavaScript that I find interesting.

I will keep practicing on Exercism and document down what I have learned along the way.

Hope this documentation can somewhat help you out in your JavaScript learning journey! p^^q

Exercism CLI Setup & Install JavaScript locally: Possible Errors on a Mac

Cindy Lam — Tue, 14 Dec 2021 03:51:04 +0000

When working on Exercism exercises, you can either solve the problems using the online editor or working on them locally in your own favorite IDE and submit them through the CLI (Command Line Interface) on terminal. While installing Exercism locally on my MacOS, I have encountered several errors that took me some times to figure them out.

You may not have encountered the following errors if you have not already had Homebrew or Node installed.

As found, here are the causes of the errors I encountered:

Outdated Homebrew Version
Outdated Node Version

I am going to generally walk through my debugging process - how I found the issue and how I researched to figure it out.

If you are comfortable installing exercism via Homebrew, Exercism will give you the following 2 steps:

Step 1: Install Exercism through Homebrew

brew update  
brew install exercism 

exercism version --> this is only used for checking the exercism version

Step 2: Configuring the CLI in the terminal

exercism configure --token=[THIS IS THE SECRET TOKEN THAT CANNOT BE SHARED]

Once this is completed, you have successfully installed Exercism locally.

Outdated Homebrew Version

Initially, I got an error when running brew update:

Error: 
 homebrew-core is a shallow clone.

I did not know what is going on until I checked the Homebrew version using brew --version, then I found the following error:

unknown or unsupported macOS version: :dunno (MacOSVersionError)

I did some google searches and found this stack overflow question regarding Homebrew failed on a macOS version. As noted in one of the highest votes answer, here is how to update the Homebrew version:

brew update-reset

It would take some times to reset. Once it is reset, you can check the version again using brew --version. You should see the current version of the Homebrew this time instead of an error log.

Outdated Node Version

However, even though I have reset/updated the Homebrew version, when I ran brew update again, I still saw the same error:

Error: 
 homebrew-core is a shallow clone.

I did not know why. I decided to install exercism and configure first and ignore the error. Until when I did npm install, I got a lot of warnings on different npm packages outdated or deprecated. I also got an error when running npm test:

SyntaxError: Unexpected token

After several trials and errors to see if I could do an npm install for each older npm packages, I realized this was a time consuming and ineffective method. It did not really help me to know the actual cause of the issue.

I decided to ask my friend, Google, and I found this stack overflow question. One of the answer actually tell me the possible cause of the issue could be an outdated Node version.

Using node --version to find out the current version I was on.

Then, using nvm install [NEW NODE VERSION] to install the latest version.

(the version I have in the code snippet below is only the latest one at the moment I am writing this post, in order to check the most recent Node version, click here)

nvm install 16.13.1

Once these steps are completed, congrats!! You should be able to successfully do npm install and npm test this time without any more errors!!

Thank you for reading through this and hopefully it can help you out if you are encountering similar issues I did.

Below are some additional resources just in case you might find them helpful:

Have fun, Exercism-ing Locally!

By the way, if you ever see the following error when doing npm test, it is possibly because you have not npm install all the packages for the exercise.

> test
> jest ./*

sh: jest: command not found

Setting up Passport Google OAuth2.0: Possible Causes of Internal Server Error

Cindy Lam — Sat, 27 Nov 2021 04:49:00 +0000

I have been working on a side project that builds with the MERN (MongoDB, Express, React, Node) tech stack and using Passport.js, specifically Google oauth2.0. The project is deployed on Heroku (a backend application hosting cloud platform) and it is using the cloud storage database through MongoDB Atlas.

During the set up of the passport oauth2.0, I have encountered several internal server errors that have taken some time to debug. I decided to include all the possible causes of internal server error I encountered below:

Cause #1: ID & SECRET are not added to config vars

CLIENT_ID and CLIENT_SECRET from the Google Cloud Console (should be found in the Credentials - OAuth 2.0 Client IDs - for Google Oauth API) are not added to the config vars in Heroku (or any other hosting platforms).

Config vars are similar to the variables that we placed in the .env file. They contain the secret information that we do not want the public to know for security reason.

Cause #2: CallbackURL does not match up with the Redirect_uri

CallbackURL is the redirected url after an user is authenticated.

Redirect_uri should be added to the Authorized redirect URIs
in the Google Cloud Console (should be found in the Credentials - OAuth 2.0 Client IDs - for Google Oauth API). It is crucial to confirm they match up.

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://www.example.com/auth/google/callback"
  }, 
  function(accessToken, refreshToken, profile, cb) {
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return cb(err, user);
    });
  }
));

Cause #3: Routing are setup incorrectly

This is the cause that took me the longest time to debug when working on my project. Since the project is built with MERN, its frontend is using the React frontend platform, and its backend server side is using the Express Node.js web application platform.

While working in the local environment especially, if we are simply setting up the routes, we sometimes got confused between the communication of the frontend and the backend. I got stuck in this for a long period of time until I found out the correct routing setup for the communication between the frontend platform and the backend server. Please see the attempt below:

Local Environment - the origin url is different when communicating between the frontend and the server.

Frontend url: http://localhost:3000

Backend (server) url: http://localhost:3001

Frontend (3000) ---> Backend (3001)

When signing in/signing out of an application, in the frontend, the route should be set up to communicate to the backend. So the route origin url should be set to http://localhost:3001, see example below:

//Frontend (React) main.js
//Functions to sign in/sign out of Google 
    const handleSignInGoogle = () => {
        window.open("http://localhost:3001/auth/google", "_self");     
    }

    const handleLogOutGoogle = () => {
        window.open("http://localhost:3001/auth/logout", "_self");   
    }

The callbackURL should be set to 3001 origin url as well:

//server.js 
passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3001/auth/google/callback"
  }, 
  function(accessToken, refreshToken, profile, cb) {
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return cb(err, user);
    });
  }
));

Frontend (3000) <--- Backend (3001)

Once the user is authenticated successfully, they would be redirected to a secret page (only authenticated users can access):

//server.js
app.get("/auth/google/callback", 
  passport.authenticate("google", { failureRedirect: "/login" }),
  function(req, res) {
    // Successful authentication, redirect to secret page.
    res.redirect("http://localhost:3000/secret-page");  //redirect back to the frontend secret page
  });

Once the user is signed out, they would be redirected to the home page:

//server.js
const CLIENT_HOME_PAGE_URL = "http://localhost:3000"; 

app.get("/auth/logout", function(req, res){
    if (req.user) {
      req.session.destroy();
      req.logout();
      res.redirect(CLIENT_HOME_PAGE_URL); //redirect back to the frontend home page
    }else {
      res.send("user is already logged out!");
    }
});

Live Environment - the origin url should be consistent (the same) for both the frontend and the server.

Frontend ---> Backend

//main.js
    const handleSignInGoogle = () => {
        window.open("https://example.herokuapp.com/auth/google", "_self"); 
    }

    const handleLogOutGoogle = () => {
        window.open("https://example.herokuapp.com/auth/logout", "_self"); 
    }

//server.js
passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID, 
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "https://example.herokuapp.com/auth/google/callback",   
    userProfileURL: "https://www.googleapis.com/oauth2/v3/userinfo"
  },
   function(accessToken, refreshToken, profile, cb) {
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return cb(err, user);
    });
  }
));

Frontend <--- Backend

//server.js
app.get("/auth/google/callback", 
  passport.authenticate("google", { failureRedirect: "/login" }),
  function(req, res) {
    // Successful authentication, redirect to secret page.
    res.redirect("/secret-page"); 
  });

//server.js
const CLIENT_HOME_PAGE_URL = "https://example.herokuapp.com";

app.get("/auth/logout", function(req, res){
    if (req.user) {
      req.session.destroy();
      req.logout();
      res.redirect(CLIENT_HOME_PAGE_URL);
    }else {
      res.send("user is already logged out!");
    }
});

Cause #4: Mongo Server Error

MongoServerError: E11000 duplicate key error collection ... dup key: { username: null }

Basically it means you have already had an user with an username set to null. You can read more about this type of error here.

Fastest way to resolve this error is to add an additional field - username - in the User schema (where all the users login info is stored once authenticated successfully), see example below:

const userSchema = new mongoose.Schema({
  googleId: String,
  username: String,
  fullname: String,
  firstname: String,
  profileImgUrl: String  
});


passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID, 
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    // callbackURL: "https://example.herokuapp.com/auth/google/callback", //Live 
    callbackURL: "http://localhost:3001/auth/google/callback", //Local
    userProfileURL: "https://www.googleapis.com/oauth2/v3/userinfo"
  },
  function(accessToken, refreshToken, profile, cb) {
    User.findOrCreate({ 
        googleId: profile.id,
        username: profile.emails[0].value,
        fullname: profile._json.name,
        firstname: profile._json.given_name,
        profileImgUrl: profile.photos[0].value
    }, function (err, user) {
      return cb(err, user);
    });
  }
));

Cause #5: Mongoose-findorcreate plugin (npm package)

This is a recent cause I found in August 2022. I have been receiving the mongoose duplicate key error. Instead of getting null, I am getting {username: myemailaddress@gmail.com}. I have tried to find information online but unable to find any relevant info.

MongoServerError: E11000 duplicate key error collection ... dup key: { username: myemailaddress@gmail.com }

When checking the npm package, I realized the recent update of the package is a few years ago. It is kind of obsolete. I am guessing the cause of the duplicated key error could be related to this package, but I am not 100% sure.

In order to resolve this issue, I have followed the guidance from a blog post to update the find or create logic as below. Using the Mongoose methods - findOne and create- this has resolved the duplicated key issue.

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID, 
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    // callbackURL: "https://example.herokuapp.com/auth/google/callback", //Live 
    callbackURL: "http://localhost:3001/auth/google/callback", //Local
    userProfileURL: "https://www.googleapis.com/oauth2/v3/userinfo"
  },
  function(accessToken, refreshToken, profile, cb) {
      const newUser = {
        googleId: profile.id,
        username: profile.emails[0].value,
        fullname: profile._json.name,
        firstname: profile._json.given_name,
        profileImgUrl: profile.photos[0].value
      };
      try {
        let user = await User.findOne({ googleId: profile.id });

        if (user) {
          cb(null, user);
        } else {
          user = await User.create(newUser);
          cb(null, user);
        }
      } catch (err) {
        console.log(err);
      }
  }
));

Cause #6: Unused or Not Needed Method

This medium article (twitter oauth using passport) is one of the references I use when setting up the Google Oauth2.0 for my side project. It is extremely helpful for beginners!

This internal server error was not found while testing in the local environment until it was set live. In order to find out what causes the issue, I have used "heroku log" to find out the building process of the web application and found the issue was coming from cors method.

As found for the live environment, there isn't a need to set up cors to allow the server to accept request from different origin. In the article, cors is setup for the local environment server, without any mention regarding if it is needed in the live environment. Based on what I found from my side project, cors is not needed in the live environment.

There could be other possible causes of your internal server error that I might not have included in this blog post. Hopefully, this gives you some ideas regarding the possible causes of an internal server error when setting up the passport Google oauth2.0 authentication for your web application.

CSS, layout, UI - Resources

Cindy Lam — Fri, 19 Nov 2021 04:15:55 +0000

I have the opportunity to attend the following workshops on November 9th, 2021, and hope to share the experience/resources with everyone! If you like to learn by doing, then you will have a lot of fun going through the following workshops:

CSS Layout Workshop - Rachel Andrew, Technical Writer @ Google

Feel free to clone the codepen and to practice CSS Grid, Flexbox, and Fallbacks. Rachel walked through the workshop below with everyone in the workshop.

This is a great workshop to practice all the CSS & Layout fundamentals!

Speaker's Twitter: @rachelandrew

User-Adaptive Interfaces - Adam Argyle, UI/UX Specialized Fullstack Engineer/Googler

Adam walked through a codelab on user-adaptive interfaces (Light/dark modes, Grid, direction, etc.). Feel free to find more resources below. This was the best CSS session and I have a lot of fun!!

Workshop Resources:

Step-by-step walkthrough: https://codelabs.developers.google.com/codelabs/user-adaptive-interfaces#0
As recommended in the codelab step 2, you can also use codelab with some codes to start off with: https://codepen.io/argyleink/pen/abBMeeq
This is what the final product looks like: https://googleio-adaptive-ui-workshop.netlify.app/
Still want to hear someone to guide you through, here is the video resource: https://www.youtube.com/watch?v=NQ-FQvsR-gY&t=100s

Other Web Resources:

HTML/CSS playground: https://visbug.web.app/
Learn anything regarding to web vitals, design, etc: https://web.dev/learn/
Get to know the 10 powerful lines of CSS: https://web.dev/one-line-layouts/
https://caniuse.com/ --> super great tool to find out if certain CSS layout or method is compatible with certain browsers only or not.

Speaker's Twitter: @argyleink

If you have miss the CDS 2021 events, no worries, you can always learn more here!