Lately I had to do some client-side performance measurements of a website. In the old days I would have to use the now() method of the Date object, however, we are now provided with the Performance API with some very handy methods. Let’s check together my three favorite measurements.

The Fetch API provides a handy way for downloading resources from the internet via JavaScript code. In my case I used it to download Excel sheets from the back-end of a web application. Let us check the code together and clarify things with the help of comments.

Writing JavaScript code without any type analysis superset like TypeScript or Flow is still a thing and in my opinion absolutely valid and welcome decision. Without types there are some implications while coding in JavaScript. Visual Studio does a great job for providing Intellisense and F12 functionality for the files which reside in the same project. We can improve the quality of our code even more.

If you are writing vanilla JavaScript in a large web application, it is almost certain that you are dealing with multiple JavaScript files which are scattered in multiple Visual Studio projects, stored in different solutions. Visual Studio does not provide any IntelliSense features for referenced code which sits outside of the current project.

One solution to this problem is to manually search for the specific file and find out which arguments does your function need or which functions are contained in a JavaScript object. Since this can be a tedious action, Visual Studio gives us the option to activate IntelliSense in our JavaScript files by creating a file named _references.js. TypeScript users are already experiencing the benefits of code completion by using the d.ts definition files.

The use of _references.js is not a new feature. It exists for many years now, however, with this article I want to give you the current stand of the feature, as of 2018. I want to find out if the file still does what is supposed in Visual Studio 2015 and 2017.

A linked list is a data structure, in which each element contains a value and has a reference to the next element in the list. The value of the element can be practically anything, from a string or a number till a complex object and these values can either be sorted or unsorted and unique or duplicated.

When you test your JavaScript code you often want to test the user interactions with the UI of your web application and not just its logic. Testing the UI makes even more sense if you use a JS-framework which offers a list of UI controls.

Consider the following use-cases that could be unit tested:

• The user loads a new webpage and the cursor has to be placed automatically inside the search input field.

• The search input, together with other input elements, is placed inside a div with a red background.

You want to achieve the following tasks with JavaScript:

• Extract the words out of a string

• Reverse the order of the extracted words.

Let’s see how you can split a string based on its words. There are two simple options.

The previous days I had a great conversation about the fundamentals of JavaScript, scope, closure, etc.. The this keyword was also a discussion point. I wasn’t 100% sure of the rules that apply to this and I wanted to refresh my memory about the possible ways to use the keyword and for each case identify the owner of this when a function is invoked.

The four, and only four rules about this

• Using the new keyword for creating new objects. In that case the this will be bound to the new created object.

  As you can see in the following example, this binds to the object that created a new Car instance. For that reason we can have multiple objects from the same “class” (there are no classes in JavaScript) and each of these objects can have different values on their properties. An important thing to take away from this example is that we create a new property each time we use the this keyword inside the “constructor” function, and the value of this property is different for every instance the “class”.

Based on my current experience with the React Native framework, I would like to share with you some hints and tips that will improve your skills in the way you develop with the framework.

Isolate the business logic of your application from the UI/ components code

This is probably the most valuable information someone should have in her mind when developing with React Native. React Native tries to be as platform independent as possible, however, there will be cases, that you will have to write different JavaScript code for iOS and different code for Android.

You decided to create a new application for iOS and you want to program the app with the React Native framework.

Here is a list with all the steps you have to take if you want to start XCode Simulator and test the UI of your application on your developer machine:

JavaScript is a small language, however, as any other technology one should invest some time in learning the fundamentals of it, so that she has a solid knowledge when writing code or architecting web applications.

With the Must Know JavaScript features articles I try to give you a starting point for your further familiarization with the most important features of the language. You are going to use these features extensively as a JavaScript engineer, directly or indirectly.

Let’s talk about scope

In general, the scope in a programming language affects the visibility of fields/ properties in a class/ module or of the arguments passed or the variables declared inside a function. There are two main categories of scope in the modern languages:

• The block scope, where for example a variable is only visible inside an if condition or a for loop, when this variable is declared inside this condition. C# uses this type of scope.

• The function scope, where a variable is visible and can be used inside the whole function. The variable remains visible only inside the function and not outside of it.

The ES6 specification of JavaScript and of course the TypeScript language, provide us the template literal syntax (the `` characters). With the template literals we can write multiline strings in JavaScript without having to use the old syntax. Take a look at the following example:

1
2
3
4
5
    var testString = "Lorem ipsum dolor sit amet, \
            \nconsetetur sadipscing elitr, \
            \nsed diam nonumy eirmod tempor \
            \ninvidunt ut labore et dolore";
 

When working in an application which is divided into multiple architectural layers, it is often the case that the developers of a team do not trust the data their function get in one layer from a function in the same or in an another layer. For that reason they often add null checks (very common in C#) or in JavaScript’s case they add if (variable) {...} checks (implicit cohersion of values in an if clause) in order to catch an error before it happens and avoid breaking the execution of the code.

But is it that bad for a function to fail or is it that bad for your application to throw an exception when something did not go as it is supposed to go?

With this article I like to post my thoughts about TypeScript and some of the advantages of the language that I use on my everyday programming tasks.

1. Types, types, types

Who does not know or have not implemented code like the following in JavaScript:

1
2
3
4
5
6
7
8
9
10
11
    var person = {
        firstname: "Christos",
        lastname: "Monogios"
    };
    
    // Lines of code...
    
    person.skills = ["TypeScript"];
    
    console.log(person);
 

The advantages of using breadcrumbs in your web applications are widely known.

• The users get a chain of links that helps them understand where they are in your website and how they came to this page, and how provides them an easy when to navigate back in the hierarchy of links.

• Breadcrumbs are considered to be a best practice for the SEO of your application.

Suppose we have the following example of chained links in a breadcrumb:

Main page > Main category 1 > Sub category 1 > Product 1

There is often the case that you want to check if a string in JavaScript contains only numbers or you might just want to extract the numbers from a string, but you want to do this extraction only when the string only contains numbers. The most common case for such check is when you want to read a value (returned as string from JavaScript) from an input field of a form and evaluate if this value is a number or not.

For those who are wondering what exactly the null coalescing operator is, consider the following example:

1
2
3
var a = null;
var b = a || 10;
console.log(b); // It will log 10

It is very probably that you already used such code in your programs. In the previous example, with the || operator we are practically set the number 10 to variable b, if the value inside variable a is null.

The following list contains npm commands that I use practically every day while working with packages in my node.js projects:

With this article I plan to give in a quick and simple way the most important ways to convert JavaScript from one value type to another. Type casting is most often referred as coercion. There are two types of coercion. Explicit and implicit.

• Explicit coercion is, most of the times, obvious to the programmer who reads a part of JavaScript code.
• Implicit coercion is done more secretly and is not always obvious to the programmer, if she has not used an implicitly coercion operation before.

Strings in JavaScript are immutable which means that once a string is defined, it cannot be changed anymore. Trying to change a string with a standard String-function will only create a new string and not affect the original string. Consider the following example, where the value in string1 is not changed:

1
2
3
var string1 = "LOREM IPSUM";
string1.toLowerCase();
console.log(string1);

Inspired from an exercise in Hackerrank.com, I found the opportunity to present you the data types that JavaScript defines, which are the following six:

• undefined
• null
• number
• string
• boolean
• object

Arrays and functions are plain objects in JavaScript and they both belong to the object data type.

Often I have to use a value from a variable and not a fixed string inside a regular expression. For example if I wanted to iterate over the english alphabet and find the number of occurrences of each letter inside a string, I had to do something like the following:

1
2
3
var testString = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.";
var matches = testString.match(/a/g).length;
// do this for all the remaining letters

the previous example would work and would find all occurrences of “a”.