Forem: Ngan Kim Khong

What are the possible ways to create objects in JavaScript ?

Ngan Kim Khong — Tue, 05 Jan 2021 01:21:12 +0000

There are many ways to create objects in javascript as below

Object constructor:

The simplest way to create an empty object is using the Object constructor. Currently this approach is not recommended.

var object = new Object();

Object's create method:

The create method of Object creates a new object by passing the prototype object as a parameter

var object = Object.create(null);

Object literal syntax:

The object literal syntax is equivalent to create method when it passes null as parameter

var object = {};

Function constructor:

Create any function and apply the new operator to create object instances,

function Person(name){
   var object = {};
   object.name=name;
   object.age=21;
   return object;
}
var object = new Person("Ngan Khong");

Function constructor with prototype:

This is similar to function constructor but it uses prototype for their properties and methods,

function Person(){}
Person.prototype.name = "Ngan Khong";
var object = new Person();

This is equivalent to an instance created with an object create method with a function prototype and then call that function with an instance and parameters as arguments.

function func {};

new func(x, y, z);
(OR)

// Create a new instance using function prototype.
var newInstance = Object.create(func.prototype)

// Call the function
var result = func.call(newInstance, x, y, z),

// If the result is a non-null object then use it otherwise just use the new instance.
console.log(result && typeof result === 'object' ? result : newInstance);

ES6 Class syntax:

ES6 introduces class feature to create the objects

class Person {
   constructor(name) {
      this.name = name;
   }
}

var object = new Person("Ngan Khong");

Singleton pattern:

A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don't accidentally create multiple instances.

var object = new function(){
   this.name = "Ngan Khong";
}

Resource: https://github.com/sudheerj/javascript-interview-questions#what-are-the-possible-ways-to-create-objects-in-javascript

How to make your localhost accessible to the internet with ngrok

Ngan Kim Khong — Sat, 24 Oct 2020 01:26:05 +0000

Because of some popular programming memes, I thought localhost is, well, only exist in your local machine. It's true, but on top of that, you can actually make it accessible to the internet, which means available to everyone, for some amount of time (not forever or anytime).

In order to do this, it's really simple, all you need to download ngrok . Here are the list of video tutorials from Twilio:
https://www.youtube.com/watch?v=oy13mDsXC4s ,
https://www.youtube.com/watch?v=S1uExj7mMgM ,
Only a few simple things you need to do.

And some articles about it:
https://www.freecodecamp.org/news/testing-webhooks-while-using-vagrant-for-development-98b5f3bedb1d/ ( don't worry about the virtual machine, you don't need one .)
https://medium.com/@veneciacalista/how-to-use-ngrok-for-react-84bf2acc3907

Well, you might wonder, why would you ever need to expose your local host to anyone? For me, I was trying to use an online service to send a POST request to my localhost database. Obviously the online service doesn't like that, it requires an URL that can be accessed by online tools, not some http://localhost:4000 , so, ngrok helped create a valid URL that can be accessed to my localhost, and by any requests from the internet.

It's kinda like allowing the world to see a corner of your bathroom. With you offer it and nobody really ... cares.

Perhaps you will never need to use it, but, for me, without knowing ngrok, I might take forever to figure out how to access to my current company's database which are complicated. I figured it would be hard to try it on my local machine. However it was really easy, a few reading documentations and boom it is done with ngrok.

Prevent phishing attack when open a new webpage from your project code

Ngan Kim Khong — Thu, 22 Oct 2020 18:51:46 +0000

When a link opens a URL in a new tab with target="_blank", it is very simple for the opened page to change the location of the original page because the JavaScript variable window.opener is not null and thus "window.opener.location can be set by the opened page. This exposes the user to very simple phishing attacks.

Imagine a link posted on a comment of a popular web site (say: http://petssocialnetwork.io/) that opens a new tab that changes the URL of the original page to http://petssocialnetwork-pishing.io/. On "http://petssocialnetwork-pishing.io/" you land at a fake login page similar to the one at "http://petssocialnetwork.io/" but controlled by the hacker and asking the user to log in again, pretending that the session just timed-out.

To prevent pages from abusing window.opener, use rel=noopener on <a href=> to force its value to be null on the opened pages. With this in place, window.opener is null in Chrome 49+, Opera 36+, Firefox 52+, Desktop Safari 10.1+, and iOS Safari 10.3+. For older browsers, use "noreferrer". Cumulatively, rel="noopener noreferrer" is the safest way to mitigate this vulnerability.

Noncompliant Code Example
<a href="http://dangerouswebsite.com" target="_blank"> <!-- Noncompliant; "window.opener" will be not null on the new tab/window and can be changed by http://dangerouswebsite.com -->

<a href="http://dangerouswebsite.com" target="_blank" rel="noopener"> <!-- Noncompliant; will not prevent the attack on old browsers -->

<a href="{{variable}}" target="_blank" rel="noopener"> <!-- Noncompliant  -->

Compliant Solution
<a href="http://dangerouswebsite.com" target="_blank" rel="noopener noreferrer"> <!-- Compliant -->

Exceptions
No Issue will be raised when href contains a hardcoded relative url as there it has less chances of being vulnerable. An url is considered hardcoded and relative if it doesn't start with http:// or https://, and if it does not contain any of the characters {}$()[]

<a href="internal.html" target="_blank" > <!-- Compliant -->

See

https://mathiasbynens.github.io/rel-noopener/

Javascript function scoping basic: The expression and the invoke...

Ngan Kim Khong — Fri, 16 Oct 2020 21:59:15 +0000

The image above shows the two ways of writing a function and invoke it immediately.
You will wrap a parentheses outside of the function, and then another parentheses after it.

for (var i = 0; i< 5; i++){
  function anyName(){
    var j = i;
    console.log(j)
  }
  anyName();
}

for (var i = 0; i< 5; i++){
  (function anyName(){
    var j = i;
    console.log(j);
  })()
}

Both of these will immediately print

0 1 2 3 4

My eyes weren't used to the syntax, I got confused every time I saw it, hence I write it down as a blog to remember and understand Javascript better the next time I see this. <3

An "Aha" moment about Object Oriented Programming

Ngan Kim Khong — Fri, 04 Sep 2020 18:01:28 +0000

I'm not sure how to hashtag my blog to beginner only. If you're an experience developer, you can skip this blog :P.

This concept I'm about to write, is so fundamental with many experience developers, yet so strange to a newbie like me.
Also, I'm not sure everything I understand is correct, so please correct me when I'm wrong, and don't take this blog to heart, but to the surface, make things easier to blog.

Since learning Java, I realized that by learning Python, Ruby and Javascript, I missed one of the most important part in programming: practicing OOP (Object Oriented Programming) concept throughly. Unlike Java or C#, languages like Javascript are more about functional programming, it was created for functional programming. Much later, Javascript started implement classes so it can do OOP things. Up until my recent internship, which forced me to use pure React without Hooks (Hooks makes you use functional components), I don't have much experience with OOP. And while unable to negotiate my boss to use functional components with my project, I had to crawl back to the fundamental and started learning about classes. It was painful partly because of the syntax, but I don't know why I had to do it, until I start getting the hang of it and then connecting things with what I've learned, I started to embrace the resembles of React to classes.

Now, I mentioned that Java helped me understand OOP. But, you don't need to know Java. In Java, you must write everything within a class, want to write a function ? Put it in a class. Can't do it without classes. That's all you need to know. Javascript has Class as well, even though javascript was not created to use Classes, but it eventually have Classes. So, you can think of Javascript's Classes are for OOP wannabes.

In summary, class resembles OOP and OOP resembles class. React is created based on OOP. So, React resembles OOP and resembles Class. React == Class == OOP . I know, my silly comparisons, lol.

With this realizations, I started to be able to imagine React is a blue print of a class, React Components are like, a function in a class, that can take in props ad parameter arguments, and pass it around and between other functions. And states in React, is like a local variable inside a function. And you can go on and on...

In my opinions, I was learning many things that are very shallow at the same time and for a while I couldn't connect anything with anything. The moment I realized that this concept and the connections between classes and OOP, it feels like I now discovered the universe's fundamental blocks. And I'm glad that this discovery doesn't make things harder for me, but things gets easier AND, make me excited to learn more!

Flexbox for CSS

Ngan Kim Khong — Sun, 30 Aug 2020 03:54:24 +0000

I have been using libraries like Bootstrap and Bootswatch for all my CSS since the bootcamp. I understand very its pros and cons of using libraries as a beginner and not understand CSS throughly, because eventhough the libraries work just fine, many are flaws and duplicated and unecessary codes and logic happens. I'm quite happy to know that in my internship, we will be working with pure CSS, or just SASS. Although, we're still using a design library: Ant Design.

The first thing about pure CSS that I was instructed to learn, is the flexbox concept. Mind you, it's nothing new and fancy. I've heard about it many times but never really truly spend time to understand it. A quick note here from CSS tricks actually did not helped me much. I've tried using the Row and Column properties on my libraries, and they caused a lot of troubles, even when they're working. Every time I get a bug, I would just google a quick fix. Partly because the time was tense and I got no reason to dig deeper since things are working. For a long time, I couldn't tell the difference between justity-content and align-items properties. I can do CSS, but I am not confident in it as I don't know why, when, and how sometimes my CSS doesn't work the way it supposed to be. Not just I understand clearly how and when to use justify-content vs. align-items vs. self-align vs. flex-direction vs. flex-flow, I can always go back to the game, which is really simple and will get the complicated concept right away, instead of reading bare text which doesn't make sense to me.

Now that I only spent 15 minutes playing this Flexbox game, I regret not knowing this sooner, and very much appreciate that my internship introduced me to learn about Flex box more throughly. As I am feeling more confident about CSS after this small game, I really encourage everyone to try it, the sooner you understand flexbox, the easier for you to code and debug CSS, because, you know, sometimes Google and Stack Over Flow gives you a shallow solutions but not teaching you the core issues that might cause more troubles as you go on :)

Javascript true false weirdness

Ngan Kim Khong — Mon, 24 Aug 2020 18:55:46 +0000

Recently I was trying to check true/false value for an object. I was pretty sure that an empty object is set to true in Javascript (as well as an empty array).
However, when comparing an empty object to true, I always get false.

This was spotted quite late into my Javascript journey, so I would like to share it here

React Hooks versus Classes - why choose one over another?

Ngan Kim Khong — Tue, 11 Aug 2020 04:11:46 +0000

Recently an interviewer asked me about choosing between a functional component and class component. Why do I write functional component instead of a class component? Great question.

I, someone who just learned React with React Hooks at the same time, obviously, had no idea. It seems to me that both can do the same thing. I don't know the pros and cons of choosing between the two, besides the obvious better readability and easier to debug, 1-0 for functional component. The choice for me was always functional component, I should have questioned more. Did React Hooks just came out much later than React, so that senior developers have been using class because functional components are very limited? And now that React Hooks came out to offer to fix all its functional component limitations? - I don't know... really you have to ask those Facebook React genius developers.

About the class components vs functional components, it was recommended that it's better to use functional over a class component, they have better readability and easier to debug, etc. Before React Hooks, I guessed class was the only way to have state inside a component. React main page shows that the React Hooks let us use functional components without the need to use class. And it looked like React Hooks allow functional components to use state, and many more things, which was the main reason as why we use class over functional components. But is really only offer good things without side effects?

Any senior developer advice are very welcomed !!

John Carmack. Oculus VR CTO:
"Sometimes, the elegant implementation is just a function. Not a method. Not a class. Not a framework. Just a function."

I learned Javascript, Ruby, Python and Java

Ngan Kim Khong — Sun, 09 Aug 2020 04:48:46 +0000

If anyone knows computer science history you probably know that in recent years, programmers now can write backend using Javascript, with NodeJs framework. So, why are we, the newbie programmers, even bother to learn other languages beside Javascript? We are new, we need it to be a little easy, but not so boring. We want to learn exciting things, and Javascript will let us create a complete app from the backend to the frontend. And once we know Javascript very well, converting to other languages isn't as challenge as it would be with other high-level language like Python or Ruby.
So, why spend time on other languages ?
I first learned Python. It's a beautiful language and I love it the most. All the indentations will save the most messy code writers. And then I moved to Ruby. Ruby is quite similar to Python. There are some differences between the two but, well, for learning purpose, they're quite easy to pick up. Perhaps the learning time was quick and I wouldn't say I know everything about Ruby and Python, but I have been learning Javascript for longer than all and still felt like I understand Javascript the least.

Javascript learning path was even worst than Java. Java is a strict language, it requires us to explain everything to it. Without the correct input, Java will not let you code.

Javascript will be really really free, it takes in any type of input, and return any type of data. Sometimes you need to know what it's returning, right? No, it won't let you know unless the definition is right in front of you. Javascript is just "messy" like that.
Also, there are more memes about how weird Javascript is than the rest of the language. What's the difference between NaN, null, undefined, empty array, empty object, oh well...

Java is great for Object Oriented Programming (OOP). You probably wonder what OOP is, I don't know either. I will need to learn in the future.

Combined backend and frontend on Github

Ngan Kim Khong — Sun, 02 Aug 2020 04:59:48 +0000

We have been taught about updating separated repository, for backend, and frontend, on Github, for various reasons such as better deployment, and better control broken codes.
In some instances where you have to update both you backend and frontend on the same repository, like me, some people which first time experience might caught off guard since Github will not show the file, you and other people can't review your code, something like this:

Github probably changed its designs hence the folder might just look grayed out, or lighter color, indicating that you cannot open it on github.

So, how do you fix this issue? You will probably need to use gitignore so that Github will not interpret your files as submodule. Let's say, for my project named transmission, I have a folder called transmission, with the two subfolder for frontend and backend. Called transmission-ruby (backend), and transmission-react (frontend). Organized like this:

---tranmission
     |
     |---tranmission-ruby
     |
     |---tranmission-react

Here, both files have different languages, with node_module folders, so how does Github supposed to know which one to ignore without you telling it specifically?

The solution

On the root folder, transmission, add a .gitignore file.
And then for each gitignore lines that you do in a normal repo, add the names of your subfolder before it, like this, for my example:


# dependencies
transmission-react/node_modules
transmission-react/.pnp
transmission-react/.pnp.js
# testing
transmission-react/coverage
# production
transmission-react//build
# misc
transmission-react/.DS_Store
transmission-react/.env.local
transmission-react/.env.development.local
transmission-react/.env.test.local
transmission-react/.env.production.local
transmission-react/npm-debug.log*
transmission-react/yarn-debug.log*
transmission-react/yarn-error.log*

# Ignore bundler config.
transmission-ruby/.bundle
# Ignore all logfiles and tempfiles.
transmission-ruby/log/*
transmission-ruby/tmp/*
transmission-ruby!/log/.keep
transmission-ruby!/tmp/.keep
# Ignore uploaded files in development.
transmission-ruby/storage/*
transmission-ruby!/storage/.keep
transmission-ruby.byebug_history
# Ignore master key for decrypting credentials and more.
transmission-ruby/config/master.key

Okay, now we got the gitignore file to warn github about what to not push (since we have files such as Node Module on both subfolders), the next step is to delete the .git folder inside both of your subfolders, leave the .git folder at the root alone.
The process will be a little odd, because when command


 you won't see .git folder, but they are there, not just one but maybe many. You can google how to delete a .git folder.

Push on Github and now you will be able to open both folders.

Ruby - reference and foreign keys

Ngan Kim Khong — Fri, 15 May 2020 23:45:41 +0000

There are several ways to add foreign key into our Ruby models. I have tried some of them. Some have been working fine but there are always cases where it does not work and I don't know why. However, I have found a way to add the foreign key that always work perfectly.

Let's say, for my model, a user has many playlists, and a playlist belongs to one user. This is the command that I should be running in the terminal:

rails g migration AddUserRefToPlaylist user:references

That's it. Happy coding.

A quick comparison between React, Angular and Vue.js.

Ngan Kim Khong — Thu, 09 Apr 2020 21:56:55 +0000

React, Angular and Vue are the three most popular frameworks for software engineers. Every framework has its own pros and cons. So how do you know what to choose? Our flatiron school has chosen to use React as a study tool, and now React has become my favorite framework. But again, why React? Here are a few overall comparisons.

Angular

Overall: Great for building highly interactive web applications.
Popular companies that use Angular: Microsoft, Autodesk, UPS, Cisco Solution Partner Program, AT&T, Apple, Adobe, GoPro, Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, AWS, Crunchbase...
Pros of Angular: Angular was created to be used alongside with Typescript. Its popular features include Angular-language-service or MVVM (Model-View-ViewModel). One-way data binding that enables singular behavior for the app which minimized risks of possible errors. Structure and architecture specifically created for great project scalability.
Cons of Angular: Compare to React and vue.js, Angular's performance is slower and its structures (Injectables, Components, Pipes, Modules etc.) are harder to learn.

Vue.js

Overall: Great for creating highly adaptable user interfaces and complex Single-page applications.
Popular companies that use Vue.js:
Xiaomi, Alibaba, Grammarly, Adobe, Behance, Codeship, Reuters...
Pros of Vue.js: Empowered HTML - Vue.js has many similar characteristics with Angular. Vue.js can weight in a tiny size while keeping its speed and flexibility that allows reaching much better performance in comparison to other frameworks. It can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
Cons of Vue.js: Since vue.js is still a smaller market compare to React or Angular, there are fewer resources available, and developers might run into issues when trying to integrating Vue.js into huge projects.

React

Overall: Great for building modern single-page applications of any size and scale.
Popular companies that use Vue.js: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Atlassian, Microsoft, Slack, Storybook...
Pros of React: Easiest to learn with a simple design and highly detailed documentation. Fastest in performance. Great support for server-side rendering for content-focused applications. Data-binding is one-way. Easy-to-test and highly reusable code. Applications can be made type-safe with either Microsoft’s TypeScript or Facebook’s Flow. Migrating between versions is easy because it is maintained by Facebook.
Cons of React: Engineers have too many ways of developing their application to choose from. The React community is divided on the best way of how to write CSS.

Resource: https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d