Image for post
Image for post

There are many websites that use JavaScript and PHP. Why do you need both languages in a webpage? JavaScript is a client-side scripting language that executes within the browser. Therefore, you can use JavaScript to interact with the user and control the browser. On the other hand, JavaScript (excluding Node.js which is server-side JavaScript) code is not meant to interact databases. Enter PHP, you can use PHP inside of your HTML code to interact with a database (SQL, MySQL) or send emails. PHP is a server-side scripting language. You can pass data from your PHP code, i.e. …


Image for post
Image for post

There are many websites that use JavaScript and PHP. Why do you need both languages in a webpage? JavaScript is a client-side scripting language that executes within the browser. Therefore, you can use JavaScript to interact with the user and control the browser. On the other hand, JavaScript (excluding Node.js which is server-side JavaScript) code is not meant to support databases. Enter PHP, you can use PHP inside of your HTML code to interact with a database (SQL, MySQL) or send emails. PHP is a server-side scripting language. You can pass data from your PHP code, i.e. …


Image for post
Image for post

What is a promise? A promise is simply an object that handles what happens after an operation succeeds or fails. Promises are especially useful in handling asynchronous operations because the developer does not know the outcome.

Promises have three states: “pending,” “fulfilled,” and “rejected.” The promise starts out as “pending.” Upon completion of a task, the outcome will determine if the operation has succeeded or failed.

We use the Promise constructor to create a new promise object. In the example below, promise1 is a promise object. We pass in a handler function to determine what happens if the operation succeeds or fails. The handler function has “resolve” and “reject” as parameters. As you will see, “resolve” and “reject” are actually callback functions that we can invoke inside of the function we passed into the promise constructor. We have setup if/else logic to determine whether the operation has succeeded or failed. …


Image for post
Image for post

Unless you write flawless code, debugging is one of the most important skills you need to get your code to work. As you code, you’ll constantly mutter to yourself, “Why doesn’t this work???” The first step toward answering your own question is using the debugger. Whether you’re writing a new app from scratch or finding bugs in an existing app, debugging gives you insight into what the computer sees. When we’re newbies/lazy, we use console.log() to figure out what’s wrong. However, console.log() is rather limited (only prints out the specific information you’re looking for) and is cumbersome because you have to type out each variable you want to see. Instead of inserting console.log() …


Released in 2014, Vue.js is a lightweight front-end framework similar to React and Angular. React and Angular dominate the front-end framework market share. However, Vue is the fastest growing framework. Since Vue has a smaller ecosystem, Vue has fewer plugins and libraries. This also means there are fewer resolutions on stack exchange for Vue issues that you may encounter.

While Angular was created by Google and React was created by Facebook. Vue was created by Evan You (who previously worked with Angular at Google). He initially created Vue as a framework for prototyping. …


Image for post
Image for post

I want to state upfront that this article is meant for beginner/intermediate Vue users as I’ve written a separate article for the basics of Vue. In the beginner article, I explain the fundamental Vue properties, component composition, directives, a life cycle, methods. This article is demonstrates how to interact with components, routing, and state management.

Released in 2014, Vue.js is a lightweight front-end framework similar to React and Angular. React and Angular dominate the front-end framework market share. However, Vue is the fastest growing framework. Since Vue has a smaller ecosystem, Vue has fewer plugins and libraries. …


Image for post
Image for post

OpenTalk-RTC is a web-based video conferencing app that uses the OpenTok platform. OpenTalk-RTC has its own customizable user interface. As I struggled to get it working, here is a quick start guide that may help you.

  1. Download the repository from github: https://github.com/opentok/opentok-rtc
  2. Install Windows dependencies:
npm install -g grunt-cli
  • Install bower globally:
npm install -g bower

3. Create a config.json file in the config folder. Copy the code in the config/example.json file and paste it into your config.json file. …


Image for post
Image for post

As a front-end developer, it is critical to master CSS. You will be dealing with it on a daily basis. One of the biggest frustrations with CSS is the lack of error codes. You cannot just copy an error code into google and find an answer. As such, I believe it is very import to have a thorough understand of CSS principles and how to organize your CSS code so it is maintainable. Below is an overview of the most common CSS properties you should know.

Reset: At the beginning of your CSS file, you should reset the box-sizing, padding, and margin by inserting the following code in *{}. …


Image for post
Image for post

What are Cross Site Scripting (XSS) Attacks? It means an attacker manipulates your web application to execute malicious code (i.e. JavaScript scripts).

What are the ramifications? The attacker can gain sensitive information, spread worms, or control other users’ browsers (steal cookies to log in as someone else).

How does this happen? I will demonstrate three XSS vulnerabilities that can occur in React: 1) eval, 2) href, and 3) dangerouslySetHTML.

eval(): The eval function evaluates strings as JavaScript. Therefore, if the attacker injects JavaScript into eval(), your app would run the attacker’s script.

In the component below, we have two input forms that request the user’s first and last name as strings. Then, we call eval() to concatenate the first name + last name to form the full name (We do not include a space in the concatenation for the purposes of this example). However, if the user inputs alert(‘Hacked!’) into the first input and presses submit, the alert() function will execute. Note, since the user didn’t provide a last name, the “full name” will be in the first input. …


Image for post
Image for post

What is Next.js: Nextjs is a framework for developing React applications that improves user experience by utilizes server-side rendering and automatic code-splitting.

Why should we use Next.js?

  1. Server-side Rendering (“SSR”): Normally, our React apps are rendered using Client Side Rendering or “CCR.” When the browser makes a request to our server, the server initially responds with bare bones resulting in a blank page. Next, the browser downloads the JavaScript file and executes the React code generating HTML that is displayed in the browser. As you can see, the HTML is generated at the end of the loading period so the user sees nothing until the page is fully loaded. With Nextjs, HTML is rendered on the server (Server Side Rendering or “SSR”). Therefore, when the browser makes a request to our server, the server initially responds with HTML that is immediately rendered. At this point, the user can see the web page before the JavaScript file is loaded. In other words, the user will see web content quicker in SSR than CSR. Note, since the JavaScript file and React code have not been loaded yet, the web page is not interactive. …

Lance Watanabe

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store