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: https://schema.org/docs/gs.html

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: https://www.schema.org/Thing. 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: https://www.schema.org/docs/full.html.

<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: https://search.google.com/test/rich-results

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
  }
});

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. …

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. …

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…

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. …

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. …