When a user searches for your company name in Google, below the site title and description you will see links pointing to what Google believes are the most useful pages of our website. Sitelinks increase the amount of space your entry occupies in the search results and this means more visibility and higher CTR’s. Additionally, when sitelinks are shown for your brand name, users can directly go to your inner pages without having to visit your homepage. This provides users with a better experience and you get traffic to the pages that are more important for your business/website.

Although you…


We want to add microdata to our webpages so search engines understand what type of page we have. Schema.org is a community that helps us understand how to optimally structure our webpages. Start by reading:

  1. Identify a scope. In the example below, we are creating a webpage for a movie.
<div itemscope itemtype="http://schema.org/Movie">

2. You can add use the “itemprop” tag to add specifics to the movie. Set the value of this attribute to an appropriate property from the schema.org: . Per schema.org, “name,” “director,” “genre,” and “trailer” are keywords that tell Google your webpage is describing a movie. Note, you should find the appropriate type of webpage here: .

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

3. Testing: Use the google’s rich snippets testing tool:


Image for post
Image for post

If you have forms on your website, you may encounter spam bots that submit forms. I have encountered this issue in my job. When a spam bot encounters a form, it will complete all input fields. Therefore, we can defeat the spam bots by creating an hidden input field then checking if this input field contains any characters.

  1. HTML: Setup a form with a hidden input
<form  action="yourController.php" method="post">
<input type='text'>
<input type='text' class="hidden">
</form>

2. CSS: hide input

.hidden{
display: none;
}

3. JavaScript: Check if the hidden form has no characters in it using jQuery

$('form').submit(function(){    
if($('.hidden').val().length === 0) {
// send form
}
});

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…


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…


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:
  2. Install Windows dependencies:
npm install -g grunt-cli
  • Install bower globally:
npm install -g bower

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