JAVASCRIPT PROMISES HANDS-ON INTRODUCTION

JavaScript Promises bring many benefits to the Web development community. The Promise object has been designed to make programmer’s life easier by simplifying implementation of callback functions.

Now that JavaScript Promises are part of the JavaScript core system, everyone should understand what Promises are and how to incorporate them in their code.

Even if you don’t see yourself writing a Promise object in the near future, the fact is that Promise objects are being used by libraries and modules, without you even noticing.

Understanding Promises, helps us realize the reasons why modern modules do certain things in specific ways, which is far better than just memorizing implementations without even realizing that a Promise object is being used.

If you have been avoiding writing Promises or you have never heard of them, this book of exercises will help you get started, and it will guide you toward further study of Promises on your own.

The introduction of Promise objects in the JavaScript core has opened new ways of writing applications.

This book will give you the foundation needed to understand other (more difficult) implementations of the Promise object.

In order to test your exercises you will need to have Node.js installed in your system, be able to work on the command line to do simple commands, and use a text editor such as Notepad to write your code.

What does a Promise look like?

Just look at the illustration shown below to see an abstraction of a Promise object in JavaScript.

JavaScript Promises Diagram

  • This diagram will be explained in detail the book.

JavaScript Promises are a modern approach to callback functions. They simplify the implementation of callbacks and add some new features to make your life a lot easier.

How do I start with JavaScript Promises?

Start by downloading the eBook from Amazon. This should be no more than a weekend reading if you put in the time.

Here is a code sample from the book (pretty easy stuff once explained):


multiplyMe(2, 4)
    .then(addNum(10))
    .then(addNum(12))
    .then((myResolve) => console.log(myResolve))
    .catch((myReject) => console.log(myReject));


Conclusion

Link to Amazon
Node.js Easy Exercises JavaScript Promises A Hands-no Introduction

If you want to learn more about JavaScript Promises, the right time and the right introductory eBook have just matched. When you click on the eBook image you will navigate to Amazon.

Thanks,

Tony de Araujo

Creating a WordPress Subtheme and Code Highlighting

Code highlighting is not a standard feature on WordPress. This is understandable since most WP users don’t need this option –  and even those who do, have different preferences about the way they want to display their code.

Note: The following procedure works only if you are self-hosting your WordPress blog.

After looking around I’ve decided to use Prismjs, which is very lightweight and easy to install once you become familiar with the procedure.

To use Prismjs I had to customize my theme by adding a style-sheet and a JavaScript file to it.

When customizing theme-files, it is advisable to create a sub-theme, which is also known as a theme child on WordPress lingo. This is because any code customization performed in the original theme will be lost the next time the original theme is upgraded and that can happen automatically.  Fortunately, this procedure is easier to do than what it sounds.

  1. Following the instructions from the URL given below, I created a theme-child instance in a matter of minutes (thanks Nick):

smashingmagazine.com/2016/01/create-customize-wordpress-child-theme

Later, if you want to know more about this topic, WordPress has a nice section about sub themes:

codex.wordpress.org/Child_Themes

  1. Once I had a child theme instantiated and properly working, the next step was to download Prismjs from source:

prismjs.com

For that, I followed the easy instructions given on crambler.com:

crambler.com/how-to-implement-prism-js-syntax-highlighting-into-your-wordpress-site

and here it is:

 let func = 123; 

There are a couple of things to consider when using Prismjs


  • While editing a post, the highlighting is not visible to me and that is confusing at first. However, we can see the difference when previewing the text.
  • You need to choose one of the several color themes available from source before downloading.  After trying all of the themes on my blog (which is an easy operation once the initial setup is done), I settled for the “Twilight” theme (see on this post).
  • Line numbers are one of several plugin-options you can select before downloading the files.

How to configure the code to be displayed

To properly configure your code highlighting for a specific post, you need to declare the language your syntax intends to represent, like for example, JavaScript. This must be one of the languages you had selected before downloading the files.

Here’s how I did it for the example shown before (small screen users, please slide the code-window  horizontally to see the whole script):

<pre><code class="language-javascript.line-numbers"> 
let func = 123; 
</code></pre>

Above, there are two classes connected together. The line-numbers class does not have to be there unless you want line numbers.

Speaking of line-numbers, you can use the data-start=”number” attribute to start your line on a number other than 1. See below:

<pre data-start="3"><code class="language-javascript.line-numbers"> 
let func = 123; 
</code></pre>

Wrapping up

Well, I hope this little adventure comes handy for someone out there. I was an avid user of WordPress in the early days but it has been more than a decade since my last installation. So much has changed since then.

How do you currently highlight the code you post in your blog?  Share your thoughts in the comments space below!

Cheers,

Tony De Araujo

First Post

“Whose woods these are I think I know.
His house is in the village though;
He will not see me stopping here
To watch his woods fill up with snow.”

Robert Frost