DEV Community: John Kapantzakis

Including files created by Node.js into .Net project 🛠

John Kapantzakis — Fri, 21 Feb 2020 12:52:25 +0000

This is the continuation of a previous post of mine

Automating boilerplate code generation with Node.js and Handlebars

John Kapantzakis ・ Feb 18 '20 ・ 3 min read

In that post we had described the process of creating a set of new files, that contain boilerplate code, using the Handlebars library. Those files are created within the folder structure of a .Net project and they, somehow, have to be included in the project.

We can find them one by one and include them manually, but it would be better if they could automatically get included into the project.

The project file

Each .Net project is built by the Microsoft build engine (MSBuild). In order for the engine to know what files to include into the build process, there is a special XML file called the project file that has a language soecific extension. For C# is .csproj.

The project file is created automatically by Visual Studio, or it can be created manually if we want to build a project without using Visual Studio. Here is a sample project file for a .Net project written in C#.

Each time we create a new file, Visual Studio includes it to the project, by adding a new entry to the XML document like the following:

<Content Include="file1.ascx"/>

In our case, the new files are created by a Node.js app. They are at the right place but they are not yet part of the build process. We have to add a new entry to the project file for each one of them. We can do it manually, by right clicking on each file and selecting Include In Project, or we can somehow automate this process.

Attempt #1 (xml-js)

As we said at the beginning, this post describes the process of including files generated from a Node.js cli to specific .Net project. We are now going to describe the first attempt of creating an automated process of including those files to the desired project file.

The first idea that came to my mind was to read the .csproj file in javascript, add the desired entries and recreate it. So, I found xml-js, a powerfull tool that lets you convert xml to js/JSON and vice versa.

The flow was something like this:

After the new files are created, we read the .csproj file

const convert = require("xml-js");

const xml = fs.readFileSync(path, "utf8");
const js = convert.xml2js(xml);

Then, we manipulate the js object accordingly and we recreate a new xml structure:

const xml = convert.js2xml(js, {
    compact: true,
    ignoreComment: true,
    spaces: 2
});

Finally, we replace the contents of the .csproj file with the new xml structure:

fs.writeFileSync(filePath, xml);

After the creation of the new .cproj file, I could not build the project at all (oops!)

It looks that the project file is broken, and, eventually it seems logical since we are trying to manipulate a specific type of XML file in a way that is not recommended. I have never used xml-js before and I might could have achieved a better result if I tried different conifgurations.

Attempt #2 (`Project class`)

After the previous failed attempt, I searched about how to programmatically include files in .net projects and found an answer to this question on stackoverflow:

How to programmatically include a file in my project?

Aug 31 '13 Comments: 17 Answers: 6

Background

I'm making a helper application that reformats some code files and creates new code files, which are to be added to my other project, so I could use the new code right away, but I'm having serious trouble adding that new code file into my project automatically. By the…

Open Full Question

People suggested to use the class Microsoft.Build.Evaluation.Project from the .Net framework and its AddItem method that does exactly what we are looking for.

The problem is that we have to use C# (or VB or whatever .Net compatible language you are working with) in order to use the Project class. So, we have to write a console application that uses the Project class and its methods in order to add new entries to the project file.

As soon as we write the console appication, we must find a way to execute it from Node.js, since our new files are created from a Node.js cli.

Console application

Lets now build a simple (C#) console application that will load the project file, add the new items and save the changes. We are not going to cover the whole process in detail, instead we are going to highlight the major points.

If you want to view the whole code you can check the following repo:

kapantzak / csproj-include

Programmatically include items to csproj file

csproj-include

Programmatically include items to csproj file

View on GitHub

Inside our Main method, we check if the desired project is already loaded and if not, we load it.

var p = ProjectCollection
          .GlobalProjectCollection
          .LoadedProjects
          .FirstOrDefault(
              x => x.FullPath == projectFullPath
          );
if (p == null)
    p = new Project(projectFullPath);

As soon as we have a loaded project file, we can iterate over a collection of items that represents the new entries and add them one by one to the loaded file:

items.ForEach(x =>
{                                
    p.AddItemFast(x.itemType, x.unevaluatedInclude, x.metadata);    
});
p.Save();

We assume that items is a collection of objects of type Item which is defined bellow:

class Item
{
    public string itemType { get; set; }
    public string unevaluatedInclude { get; set; }
    public Dictionary<string, string> metadata { get; set; }
}

Inputs

The program needs some input in order to work properly, like:

The project file to load
The entries collection to be inserted

We expect the first argument to be the project file and the second argument to be a JSON string that is going to be deserialised into a list of Item objects.

Execution

We can now call the executable like this:

> app.exe file.csproj [{"itemType": "Content", "unevaluatedInclude": "myFile.ts"}, {"metadata": null}]

But when I tested, I got the following error.

It seems that there is a missing file or directory! After a lot of searching, I found another stackoverflow question:

Can't use Microsoft.Build.Evaluation in VS2017

Feb 13 '18 Comments: 3 Answers: 3

I built a Web Forms website using VS2015 where I user Microsoft.Build.Evaluation so that I can grammatically go through the files in my project When using VS2017 I get this error:

Microsoft.Build.Exceptions.InvalidProjectFileException: 'The imported project "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v15.0\WebApplications\Microsoft.WebApplication.targets" was not found. Confirm that the path in the declaration is correct…

Open Full Question

I finally found out that $(MSBuildExtensionsPath32) and $(VisualStudioVersion) variables of the project file was not correctly set, and that I could apply the desired settings, using an overload of the Project class constructor that accepts this kind of settings.

So I added the following lines:

var glob = new Dictionary<string, string>();
glob.Add("VisualStudioVersion", "16.0");
glob.Add("MSBuildExtensionsPath32", @"C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild");

p = new Project(projectFullPath, glob, null);

And it worked just fine!

Execute from Node.js

Our final step is to call the console application's executable from inside our Node.js cli. We can achieve that using the execFile() method of the child_process module like that:

const exec = require("child_process").execFile;
const child = exec(projectFile, args, (err, data) => {
    // ...
});

Workflow

Now lets overview the workflow after our second attempt

As we described earlier, the new files are created by a Node.js cli. As soon as the files have been created, we use execFile to call the console app we have created in order to add the new items to the desired project file.

Conclusion

During the development process of this Node.js app and the console application, I came accross various problems that I had never faced before. I had to search a lot for the details so, I thought I could write a post about my experience in order to help other people who may face the same or similar problems. I hope you enjoyed reading! 😄

Resources

Automating boilerplate code generation with Node.js and Handlebars

John Kapantzakis — Tue, 18 Feb 2020 15:36:59 +0000

In my current job, each time we need to create a new form for our web app, we have to create a set of files that contain a serious amount of boileplate code, and this is time consuming.

So, I have tried to build a tool that would automatically produce the initial code, and I came up with ess-dev, a project specific node cli that uses Handlebars internally.

Usage

Lets create a dummy project so that we can test our tool.

Prerequisites

Node.js installed on your machine
Internet connection

Create a new folder somewhere in your computer and navigate to it.

> mkdir testProject
> cd testProject

Initialize a new npm package

> npm init -y

Install ess-dev package from npm

> npm i --save-dev ess-dev

We now have to create the following folder structure because our tool searches for specific paths in order to write the new files.

.
+-- package.json
+-- Async
+-- classes
|   +--HttpRequestsDataModels
+-- src
|   +--asyncHelpers
|   +--pageScripts
|   +--reduxStates
+-- eStudio.csproj

Note that we have to create a file called eStudio.csproj with contents that you can find in the following gist

Add a script to the package.json so we can use our cli from npm

  "scripts": {
    "ess-dev": "ess-dev init"
  },

We are now ready to use our tool!

Assuming that you are in the root directory of the project (On the package.json level):

> npm run ess-dev

When asked to provide a user control name, type any name you want but prefix it with uc.

Just hit enter to the next questions and the new files should be created to the specified paths as shown to next images.

If the tool terminates successfully, it should provide a structure of the newly generated files as shown in the last image.

How does it work?

Here's an overview of the tool's workflow.

User provides some input, the tool searches for predefined template files, creates the new files from them using the handlebars library and writes them to specific paths.

Tools used

The following tools have been used in order to develop this tool:

handlebars to read templates and create new files
chalk to display console test in color
figlet to display beautiful fonts on the console
inquirer to create the cli
log-symbols to display simple icons
treeify to produce tree structures for the console
xml-js to read, edit and create xml documents
yargs for arguments parsing
jest for testing

Conclusion

Automating repetitive and time consuming tasks can save you a lot of time and effort while at the same time prevents from human errors.

This tool has been developed for specific project and is not aimed to be used out of the box for other projects. On the other hand, for anyone interested, feel free to get the code and change it according to your needs.

CSS cascade: Importance

John Kapantzakis — Wed, 04 Dec 2019 12:04:39 +0000

While preparing for Microsoft's 70-480 exam I came across a question in which I had to sort different stylesheets according to their origin and importance, and I got a bit confused.

Even though I'm using CSS for more than 10 years, I've never dig into the specs to find out more about the terminology. When I finally spotted the right place in the specification it got more clear to me and I've decided to provide a simple illustration.

Cascaded value

The cascading algorithm takes an unodrered list of declared values and outputs a single value that is called the cascaded value. The algoritm takes into account 3 factors:

Importance: The importance of each declaration
Specificity: The specificity of the css selectors
Order: The order of the css declarations in the source code

The following illustration presents the way that the cascade algorithm determines the final declaration (cascaded value).

Lets verify the above diagram with a real example:

We are not going to cover all 3 steps of the cascading process, instead, we are going to explain only the first step, the importance.

Just to clarify some basic terms, consider the following rule:

background-color: #ececec

The background-color string defines a CSS property and is called a property declaration.

The #ececec is the value given to the aforementioned property and is called the declared value.

Now, imagine that we have multiple CSS rules applied to the same element, declaring different values to the same property.

These rules may be at the same file, or may derive from different origins. The cascading algorithm has to choose one of those values to be the cascaded value.

Origin

There are 3 main origins defined in CSS:

Author origin: The rules written by a web developer (the author of the page)
User origin: The final user of the browser may be able to alter the user agent's default styles
User agent origin: The default styles applied by the browser

plus 2 additions from CSS extensions

Animation origin: Rules created by CSS animations
Transition origin: Rules created by CSS transitions

Importance

Normal: The default state of declarations
Important: Any declaration with the !important annotation

Order by origin and importance

Specification defines the following precedence for the above combinations in descending order (Top wins):

Transition declarations
Important user agent declarations
Important user declarations
Important author declarations
Animation declarations
Normal author declarations
Normal user declarations
Normal user agent declarations

Lets demonstarte the above hierarchy with some examples.

Normal user agent declarations

We start with a simple HTML page with only one p element and no css declared, like this:

In this case, what style is going to be applied to the document? The answer is the default user agent style. Opening the developers tools in Chrome (Version 78.0.3904.108) we see the following:

As soon as we do not provide any kind of style, the browser applies the default user agent style.

Normal author over normal user agent declarations

Now, lets add a css file and add a rule for the p tag:

After we reference the new css file inside out HTML, we reload the page and we inspect the p element:

Here we can verify the precedence of normal author declaration over user agent declaration.

Animations over normal author declarations

What happens if we add an animation declaration?

According to the specification,

The last declaration in document order wins (see here)

So, we have intentionally placed the color: green declaration after the animation declaration, in order to verify that animations takes precedence over normal author declarations, regardless of their location inside the source code.

The following screenshot illustrates the fact that animation declarations take precedence over normal author declarations, even if the latter are placed after the former, inside the source code.

Important author over normal author declarations

According to the specification

The importance of a declaration is based on whether or not it is declared !important

The following screenshot illustrates the precedence of an important author declaration (color: blue !important) over a normal one.

Final thoughts

We have investigated the internals of the cascade algorithm and provided some simple examples trying to verify the expected behaviour.

We have, explicitly, verified the following facts:

Precedence of normal author over normal user agent declarations
Precedence of animations over normal author declarations
Precedence of important author over normal author declarations

During the process of writing this post, I have tried to verify the predence of normal author declaration over normal user declaration, but I have failed to reproduce the expected behaviour, as shown in the following screenshot.

Here, I tried to add some user style declarations (color: blue;) using the developer tools, but it seems that this rule takes precedence over the normal author declaration (color: green;).

For anyone interested, here is a question I've posted on Stack Overflow regarding this issue.

Chrome version 78.0.3904.108 was used for the above examples

References

JS illustrated: Promises

John Kapantzakis — Tue, 08 Oct 2019 14:02:43 +0000

This is the second JS illustrated article I've wrote. The first one was about the event loop

JS illustrated: The event loop 🔁

John Kapantzakis ・ Aug 15 '19

#javascript

ES6 (ECMAScript 2015) has introduced a new feature called Promise. There are numerous excelent articles and books that explain the way that Promises work. In this article, we are going to try to provide a simple and understandable description of how Promises work, without digging into much detail.

Before we start explaining what a promise is and how it works, we need to take a look at the reason of its existence, in order to understand it correctly. In other words, we have to identify the problem that this new feature is trying to solve.

Callbacks

Promises are inextricably linked to asynchrony. Before Promises, developers were able to write asynchronous code using callbacks. A callback is a function that is provided as parameter to another function, in order to be called, at some point in the future, by the latter function.

Lets take a look at the following code

We are calling ajaxCall function passing a url path as first argument and a callback function as the second argument. The ajaxCall function is supposed to execute a request to the provided url and call the callback function when the response is ready. In the meanwhile, the program continues its execution (the ajaxCall does not block the execution). That's an asynchronous piece of code.

This works great! But there are some problems that might arise, like the following (Kyle Simpson, 2015, You don't know JS: Async & Performance, 42):

The callback function never gets called
The callback function gets called too early
The callback function gets called too late
The callback function gets called more than once

These problems might be more difficult to be solved if the calling function (ajaxCall) is an external tool that we are not able to fix or even debug.

It seems that a serious problem with callbacks is that they give the control of our program execution to the calling function, a state known as inversion of control (IoC).

The following illustration shows the program flow of a callback based asynchronous task. We assume that we call a third party async function passing a callback as one of its parameters. The red areas indicate that we do not have the control of our program flow in these areas. We do not have access to the third party utility, so the right part of the illustration is red. The red part in the left side of the illustration indicates that we do not have the control of our program until the third party utility calls the callback function we provided.

But wait, there's something else, except from the IoC issue, that makes difficult to write asynchronous code with callbacks. It is known as the callback hell and describes the state of multiple nested callbacks, as shown in the following snippet.

As we can see, multiple nested callbacks makes our code unreadable and difficult to debug.

So, in order to recap, the main problems that arise from the use of callbacks are:

Losing the control of our program execution (Inversion of Control)
Unreadable code, especially when using multiple nested callbacks

Promises

Now lets see what Promises are and how they can help us to overcome the problems of callbacks.

According to MDN

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

and

A Promise is a proxy for a value not necessarily known when the promise is created

What's new here is that asynchronous methods can be called and return something immediately, in contrast to callbacks where you had to pass a callback function and hope that the async function will call it some time in the future.

But what's that it gets returned?

It is a promise that some time in the future you will get an actual value.

For now, you can continue your execution using this promise as a placeholder of the future value.

Lets take a look at the constructor

We create a Promise with the new Promise() statement, passing a function, called the executor. The executor gets called immediately at the time we create the promise, passing two functions as the first two arguments, the resolve and the reject functions respectively. The executor usually starts the asynchronous operation (the setTimeout() function in our example).

The resolve function is called when the asynchronous task has been successfully completed its work. We then say that the promise has been resolved. Optionally yet very often, we provide the result of the asynchronous task to the resolve function as the first argument.

In the same way, in case where the asynchronous task has failed to execute its assigned task, the reject function gets called passing the error message as the first argument and now we say that the promise has been rejected.

The next illustration presents the way that promises work. We see that, even if we use a third party utility, we still have the control of our program flow because we, immediately, get back a promise, a placeholder that we can use in place of the actual future value.

According to Promises/A+ specification

A promise must be in one of three states: pending, fulfilled, or rejected

When a promise is in pending state, it can either transition to the fullfilled (resolved) or the rejected state.

What's very important here is that, if a promise gets one of the fulfiled or rejected state, it cannot change its state and value. This is called immutable identity and protects us from unwanted changes in the state that would lead to undescoverable bugs in our code.

Getting control back

As we saw earlier, when we use callbacks we rely on another piece of code, often writen by a third party, in order to trigger our callback function and continue the execution of the program.

With promises we do not rely on anyone in order to continue our program execution. We have a promise in our hands that we will get an actual value at some point in the future. For now, we can use this promise as a placeholder of our actual value and continue our program execution just as we would do in synchronous programming.

Readable async code

Promises make our code more readable compared to callbacks (remember the callback hell?). Check out the following snippet:

We can chain multiple promises in a sequential manner and make our code look like synchronous code, avoiding nesting multiple callbacks one inside another.

Promise API

The Promise object exposes a set of static methods that can be called in order to execute specific tasks. We are going to briefly present each on of them with some simple illustrations whenever possible.

Promise.reject(reason)

Promise.reject() creates an immediately rejected promise and it is a shorthand of the following code:

The next snippet shows that Promise.reject() returns the same rejected promise with a traditionally constructed promise (new Promise()) that gets immediately rejected with the same reason.

Promise.resolve(value)

Promise.resolve() creates an immediately resolved promise with the given value. It is a shorthand of the following code:

Comparing a promise constructed with the new keyword and then, immediately resolved with value 1, to a promise constructed by Promise.resolve() with the same value, we see that both of them return identical results.

Thenables

According to Promises/A+ specification

thenable is an object or function that defines a then method

Lets see a thenable in action in the following snippet. We declare the thenable object that has a then method which immediately calls the second function with the "Rejected" value as argument. As we can see, we can call the then method of thenable object passing two functions the second of which get called with the "Rejected" value as the first argument, just like a promise.

But what if we want to use the catch method as we do with promises?

Oops! En error indicating that the thenable object does not have a catch method available occurs! That's normal because that's the case. We have declared a plain object with only one method, then, that happens to conform, in some degree, to the promises api behaviour.

In any case, it doesn't mean that an object which exposes a then method, is a promise object.

But how can Promise.resolve() help with this situation?

Promise.resolve() can accept a thenable as its argument and then return a promise object. Lets treat our thenable object as a promise object.

Promise.resolve() can be used as a tool of converting objects to promises.

Promise.all(iterable)

Promise.all() waits for all promises in the provided iterable to be resolved and, then, returns an array of the values from the resolved promises in the order they were specified in the iterable.

In the following example, we declare 3 promises, p1, p2 and p3 which they all get resolved after a specific amount of time. We intentionaly resolve p2 before p1 to demonstrate that the order of the resolved values that get returned, is the order that the promises were declared in the array passed to Promise.all(), and not the order that these promises were resolved.

In the upcoming illustrations, the green circles indicate that the specific promise has been resolved and the red circles, that the specific promise has been rejected.

But what happens if one or more promises get rejected? The promise returned by Promise.all() gets rejected with the value of the first promise that got rejected among the promises contained in the iterable.

Even if more than one promises get rejected, the final result is a rejected promise with the value of the first promise which was rejected, and not an array of rejection messages.

Promise.allSettled(iterable)

Promise.allSettled() behaves like Promise.all() in the sence that it waits far all promises to be fullfiled. The difference is in the outcome.

As you can see in the above snippet, the promise returned by the Promise.allSettled() gets resolved with an array of objects describing the status of the promises that were passed.

Promise.race(iterable)

Promise.race() waits for the first promise to be resolved or rejected and resolves, or rejects, respectively, the promise returned by Promise.race() with the value of that promise.

In the following example, p2 promise resolved before p1 got rejected.

If we change the delays, and set p1 to be rejected at 100ms, before p2 gets resolved, the final promise will be rejected with the respecive message, as shown in the following illustration.

Promise.prototype methods

We are now going to take a look at some methods exposed by the promise's prototype object. We have already mentioned some of them previously, and now, we are going to take a look at each one of them in more detail.

Promise.prototype.then()

We have already used then() many times in the previous examples. then() is used to handle the settled state of promises. It accepts a resolution handler function as its first parameter and a rejection handler function as its second parameter, and returns a promise.

The next two illustrations present the way that a then() call operates.

If the resolution handler of a then() call of a resolved promise is not a function, then no error is thrown, instead, the promise returned by then() carries the resolution value of the previous state.

In the following snippet, p1 is resolved with value 1. Calling then() with no arguments will return a new promise with p1 resolved state. Calling then() with an undefined resolution handler and a valid rejection handler will do the same. Finally, calling then() with a valid resolution handler will return the promise's value.

The same will happen in case that we pass an invalid rejection handler to a then() call of a rejected promise.

Lets see the following illustrations that present the flow of promises resolution or rejection using then(), assuming that p1 is a resolved promise with value 1 and p2 is a rejected promise with reason "Error".

We see that if we don't pass any arguments or if we pass non-function objects as parametes to then(), the returned promise keeps the state (resolved / rejected) and the value of the initial state without throwing any error.

But what happens if we pass a function that does not return anything? The following illustration shows that in such case, the returned promise gets resolved or rejected with the undefined value.

Promise.prototype.catch()

We call catch() when we want to handle rejected cases only. catch() accepts a rejection handler as a parameter and returns another promise so it can be chained. It is the same as calling then(), providing an undefined or null resolution handler as the first parameter. Lets see the following snippet.

In the next illustration we can see the way that catch() operates. Notice the second flow where we throw an error inside the resolution handler of the then() function and it never gets caught. That happens because this is an asynchronous operation and this error wouldn't have been caught even if we had executed this flow inside a try...catch block.

On the other hand, the last illustration shows the same case, with an additional catch() at the end of the flow, that, actually, catches the error.

Promise.prototype.finally()

finally() can be used when we do not care wheather the promise has been resolved or rejected, just if the promise has been settled. finally() accepts a function as its first parameter and returns another promise.

The promise which is returned by the finally() call is resolved with the resolution value of the initial promise.

Conclusion

Promises is a wide topic that cannot be fully covered by an article. I've tried to present some simple illustrations that will help the reader to get an idea of the way that promises work in Javascript.

If you find any errors or ommisions, please do not hestitate to mention them! I've put a lot of effort to write this article and I've learned many things about promises. I hope you liked it 😁

References

The RGB split effect with css and a bit of javascript

John Kapantzakis — Mon, 16 Sep 2019 14:19:15 +0000

While developing my personal website, I came accross this amazing library, Blotter.js, which exposes several methods (materials) that apply various effect on texts.

ChannelSplitMaterial is one of those effects that piqued my interest.

The idea behind this effect is simple, just split up the red, green and blue pixels and place them in different location from the original one. And that's just what we are going to do!

But first, lets see what the final result looks like

Lets start with the HTML

The #wrapper element just holds the affected element, the #text div. The #text div holds the text that we are going to apply the RGB effect to.

Now, we need to create a function that takes one argument, the HTML element to be affected. Lets call this function channelSplit. channelSplit will take the innerHTML of the element passed as the first argument and clone it 3 times, one for each primary color (red, green and blue).

As you can see, we are placing a .channel-split-static span inside the initial element. .channel-split-static has zero opacity and its use is to preserve the initial dimentions of the text holder element.

Summarizing the functionality of the channelSplit function:

Takes one argument, the text holder element
Clones the innerHTML of the text holder and appends 3 .channel-split elements, one for each primary color (red, green, blue)
Places one .channel-split-static span with zero opacity

We are now done with Javascript 😁!

Now, all we have to do is to apply some css in order to achieve the desired effect.

In order to stack each of the three .channel-split elements one above the other, we set their position property value to absolute.

Another important change we need to make, is to set mix-blend-mode: difference to the .channel-split elements in order to blend their colors. If we don't apply this rule, the final result will display the font color of the elemnt stacked on top of all.

Here are the main css rules that help us achieve the rgb split effect

Finally, we are going to apply some animation in order to separately move each of the .channel-split elements away from each other in order to illustrate the effect.

And that's it!

Thanks for reading this post and I hope you liked it!

Creating the typewriter effect with the use of async generators

John Kapantzakis — Mon, 02 Sep 2019 10:14:22 +0000

In this post, we are going to present the process of creating the typewriter effect.

The following codepen illustrates the final result.

Our goal

The functionality we want to achieve is a subset of another library (with more options and methods) called text-typing, that I have developed. It is in beta version yet, but available as npm package for anyone who would like to experiment with some of its capabilities.

You can find text-typing here:

kapantzak / text-typing

Simple typewriting effect

text-typing

A tool for creating typewriter effect, with a simple, promise based api.

Installation

Install npm package

npm

npm install text-typing

yarn

yarn add text-typing

And then import the package

import {textTyping} from "text-typing";

Usage

All you need to do is to initialize the tool, passing a reference to an existing DOM element, and start typing!

HTML

<h1 id="myHeading"></h1>

JS

(async () => {      
  const txt = textTyping(document.getElementById("myHeading"));
  await txt.typeText("Hello");
})();

Chaining methods

You can call multiple methods on the same instance, either by using await (inside an async function), or by using then after a method call

await

(async () => {      
  const txt = textTyping(elem);
  await txt.typeText("Hello");
  await txt.backspace(2);
})();

then

(() => {
  const txt = textTyping(elem);
  txt.typeText("Hello").then(resp => {
    resp.backspace(2);
  });
})();

Options

speed

The typing speed that is going to be used by called methods, if no specific speed is provided to the specific method.

…

View on GitHub

For this post, we are going to develop a function that exposes a small api (one method 😋) which then, we can call in order to apply the typewriter effect. This function will take two parameters:

The text to be typed
An array of of two numbers that is going to be used as the speed range of the typing process

The call is going to be like that:

const textHolder = document.getElementById("myTextHolder");
const speedRange = [100, 600];
const txt = textTyping(textHolder, speedRange);
txt.typeText("Hello there!");

The markup

For start, we need a HTML element to use it as our text holder. Lets use a <div> element with id myTextHolder, nested in another div element that is going to be used as the wrapper element.

Then, we apply some css to verticaly allign our text (not necessary).

The JS part

We can now begin writing our js functions, starting with the main function that we are goint to call in order to apply the typewriter effect.

We declare the textTyping function that takes two arguments

elem: the HTML element to hold the text
speedRange: the speed range that is going to be used

Blinking cursor

We are developing a typewriting effect, so, we need to display a blinking cursor. For that, we create a <span> element and we apply some css animations in order to achieve the blinking effect.

We create the cursor as soon as we call the textTyping function:

and we apply the respective css:

API

Now we are going to expose our simple api, which consists of one method, the typeText method! To achieve that, we return an object that has a property named typeText and a value of an anonymous function that takes one argument, named text.

In addition, we have added another <span> element (section) that serves the role of an inner text holder, in order to separate the cursor from the text.

Typing process

Now we have to implement the typing process. Lets try by spliting the text and getting an array of letters. We can iterate this array and insert each letter inside the section element one by one.

Furthermore, we need to inject a timeout before each letter injection, based on the speedRange parameter provided to textTyping function.

Lets declare a function that takes the speedRange array and returns a random number inside the two numbers contained in the array:

Here is our first (not successful) attempt

What happened? Why are letters mixed up?

The problem is here

The for loop instantly iterates the letters array and the setTimeout callbacks start to execute at a random time from the loop execution end.

Each setTimeout does not wait for the previous timeout callback to be called, as javascript has a non-blocking runtime. On the contrary, each setTimeout, instantly pushes a callback to the message queue with a random timeout generated by getSpeed function.

For more details about asynchronous execution, you can checkout this article about the event loop.

JS illustrated: The event loop 🔁

John Kapantzakis ・ Aug 15 '19

#javascript

Async generators

In order to solve our problem, we need to find a way to, correctly iterate over a sequence of asynchronous tasks.

Async generators come to our resque!

We are not going to get into more detail about async generators or async iterators. For now, we only need to know that async generators provide us with the ability to generate sequences of asynchronous data, that can be iterated and procude the desired outcome.

Now lets apply them to our function.

First, we need to declare a function that returns a Promise which gets resolved after a certain amount of time, returning the appropriate letter for us.

We are going to call this function inside our async generator as shown in the following gist:

Note the function* statement, this is the way we declare generators. And because we want an async generator, we prepend the async keyword (in fact async is not a keyword itself, instead, the combination async function is).

All we have to do now is to iterate over the sequence that our async generator produces. We can do that with the use of the for await ... of statement like this:

We now have the desired result, as shown in the codepen at the begining of the post.

Thanks for reading 🤗 so far! I hope it was interesting enough! Please leave your comments for any feedback or questions!

Resources

Using Redux in a legacy ASP.NET Web Forms project

John Kapantzakis — Thu, 22 Aug 2019 07:36:49 +0000

Redux is an implementation of Facebook's Flux design pattern.

Someone might say "Why use Redux in other than a React app?". It may seems a little strange now, but it helped my team to organize the data flow.

In my current job, I am involved in a project built in ASP.NET Web Froms technology. It is a quite old fashioned technology but we have tried to use some modern tools , like Typescript and webpack, in order to improve the development process.

Application overview

The application uses a Master Page, which is the entry point and loads the appropriate User Control, depending on the url.

Each user control (from now on, we will call it a form) loads the respective javascript file which handles the client's interactions.

The communication with the server is happening via ajax calls to specific files with the .ashx extension (Generic Handlers), althoug there are some cases that a postback is triggered, causing a full refresh of the page.

Here's a simple overview

The problem

In our project, it is a common case that a form has some filters (Kendo controls), an Apply filters button and a grid that displays the results.

Lets say that we have a form with 3 filters, a combobox for the available departments, a combobox for the employees and a textbox for some comments.

On load, each of these filters is getting some initial data. The two comboboxes get a list of departments and a list of employees, respectively, while the comments textbox gets a string. These datasources have to be retrieved from the database and be strored in some hidden fields on the backend.

On the frontend, on window.load, the Kendo controls get initialized with the hidden field's values as the datasources.

function initFilters() {
    const departments = JSON.parse($('#Hidden_departments').val());
    const employees = JSON.parse($('#Hidden_employees').val());
    const comments = $('#Hidden_comments').val();

    $('#cmb_departments').kendoDropDownList({
        data: departments
    });

    // Same for others ...
}

We can see that each filters gets its datasource from a different point.

The same happens when we want to gather the filters values and submit them to the server. We, again, have to search in different places to get each value, create an object with these values and send it to the server.

function getFiltersValues() {
    const departmentVal = $('#cmb_departments').data('kendoDropDownList').value();
    const employeeVal = $('#cmb_employees').data('kendoDropDownList').value();
    const commentsVal = $('#txt_comments').val();

    return {
        department: departmentVal,
        employee: employeeVal,
        comments: commentsVal
    }
}

The following diagram illustrates the above process.

So, the problem is that we have to search in many different places in order to get the filters datasources and the filters values, in a sentence:

There isn't a single source of truth!

Using Redux

As opposed to the previous approach, with Redux, we try to maintain a single source of truth. This source is the application state, or better, the user control state, because each user control maintains its own state (we do not implement a universal application state, instead, we treat each user control as a separate application).

The following diagram illustrates the user control's data lifecycle:

Implementation

Now, lets see how we use Redux in our ASP.NET Web Forms project.

Initial state

As the user control loads, the backend (.ascx.cs) queries the database, creates an object that represents the initial state, serializes it and stores it in a hidden field.

Reducers

Before initializing the store object in the .ts file, we have to create some reducers and some actions.

Create store

The user control loads a specific javascript file which initializes a Redux store. We have imported the appReducer from the stateHelper.ts file and we use it to initialize the store.

After getting the initial state, we can build the ui using the data from our single source of truth, the store!

Updating the state

While having a store object available, we can dispatch the actions declared in the stateHelper.ts anywhere we want, inside our page.ts file.

Any time we dispatch an action, the reducer returns an updated copy of our application state. The state itself should never be mutated according to Flux pattern.

Saving data

Now that we have a single source of truth, it is very easy to submit our data to the server. We just have to get the most recent verion of the application state and send it to the generic handler, which, in turn, saves the data to the database.

Conclusion

Despite the relative complexity and steep learing curve, Redux proved to be a helpful tool for our team. Here are some pros and cons that came out of Redux use:

👍 Pros

Provides a single point of truth
Use of functional paradigm principles (immutable data, pure functions etc)
Quick addition / removal of ui controls without unwanted side effects

👎 Cons

Overkill for small apps
Steep learing curve (depends on the developer's experiense)
Initial setup requires some time

It seems that Redux can be used in other than React applications too. If you have similar experiense you may want to drop your comments!

Waiting for visible element

John Kapantzakis — Mon, 19 Aug 2019 13:07:14 +0000

Sometimes we need to call a function when a specific element is visible.

We might want to load something that is going to calculate its dimensions based on its parent element's dimensions.

I, my self, have been in this position, trying to trigger a plugin init function when a specific area is visible (or, better, when this area has dimensions).

This is a solution I've came up with:

The waitVisible function will call a given function, as soon as the specified element gets visible.

It takes 3 arguments:

The element we want to check upon
The callback function that we want to be executed when the element gets visible
The maximum amount of time that the function is going to check for the element's visibility (default: 5000 ms)

Example (Google charts)

Let say that we want to display a pie chart (example here) inside a div that is not initially visible.

First, we call the drawChart function as soon as the Google charts script loads.

google.charts.setOnLoadCallback(drawChart);

If you check the Result tab on the fiddle below, you can see that the chart is placed on the left side (when viewing in a relatively wide screen), taking as little space as it can in order to be displayed.

Here, we use waitVisible to call the drawChart function. The drawChart is able to calculate its parent eleemnt's dimensions and the chart takes up all the available width as you can see in the next fiddle:

That's my solution to this problem. If you want to propose something else, please feel free to comment!

JS illustrated: The event loop 🔁

John Kapantzakis — Thu, 15 Aug 2019 23:00:21 +0000

Javascript is single threaded, yet, developers can write asynchronous code in Javascript!

But how is it possible? The event loop makes it possible!

Before we start, lets define the environment in which the event loop operates. We assume that we are dealing with Javascript code that is executed by a browser (not in Node or other environment).

Lets meet the heros of our story

The call stack

The call stack is a place in memory that keeps track of the function executing at that time, and the functions that are going to be executed after that. Each function is placed on top of the previous function. The first function added, is going to be executed last (First in, last out).

The web API

The web API is not part of the core JS, instead, it provides various methods that can be used by a Javascript program, like setTimeout() or alert().

The message queue

The message queue is a list of messages, waiting to be executed by their associated functions. A new message is added to the list, each time an event, that has been watched by an event listener, occures.

The event loop

The event loop is a process that keeps running and checks whether the call stack is empty or not. If the call stack is empty, it pushes the first item of the message queue into the call stack for execution.

Here's the browser environment

A JS story

Lets take a look at the following code and see what happens

Calling the foo function, the result is

> One
> Three
> Two

Now, lets see our heros trying to execute the above code

First, the browser sends the foo() function call to the call stack.

The console.log("One") statement gets pushed on top of the previous frame.

In the meanwhile, the event loop checks to see if the call stack is empty

The JS runtime executes the top frame and removes it from the call stack.

Continuing the execution, the browser sends the setTimeout() statement to the stack

The event loop checks again

The environment sets up a timer that is going to trigger the callback inside the setTimeout

and the next statement is pushed into the call stack

Here's the event loop again

The event loop did not find an empty stack so it does nothing again. The execution continues with the next, and final, statement of the foo() function

Lets get back to the web API, which set up a timer for a callback function. Now that the timer has ended, the browser sends the callback message to the message queue

After the last statement got executed, it is removed from the stack, and, as soon as there is nothing else inside the foo() function declaration, the oldest foo() frame is removed from the call stack too!

Now, the event loop may be more lucky

The event loop checks for any messages waiting in the queue

and sends the message's associated function to the call stack

Finally, the JS runtime executes the last frame and removes it form the call stack

Resources

Some of my favorite Javascript resources

John Kapantzakis — Tue, 06 Aug 2019 21:45:47 +0000

This is my first post here in dev.to, so I think I'm going to start with a presentation of some of my favorite Javascript resources!

The Modern JavaScript Tutorial

The first resource I'm going to present is an online tutorial by Ilya Kantor (and many other contributors on Github). It is a simple tutorial that covers lots of the language's aspects. It is organized in three main parts:

1. The JavaScript language

Here, the author starts with an introduction to the language, proceeds with the basic building blocks, like data types, conditional and logical operators, loops, functions, prototypes, classes etc, and ends with more advanced topics like, promises, generators, the module pattern etc.

2. Browser: Document, Events, Interfaces

The second part is dedicated to browsers and working with the DOM. Elements, events, event listeners, forms, are some of the topics that this part is dealing with.

3. Additional articles

In the third part, the author presents a set of various articles that cover topics that were not covered in the previous parts of the tutorial, like these:

Frames and windows
Binary data and files
Network requests
Animations
Regular expressions

and more..

I found this tutorial very useful and easy to follow. The author has a unique way of explaining each topic with simple examples that makes it easy for the reader to get the point. Furthermore, the structure of the tutorial allows for easy and quick search of anything! I often consult this tutorial for various topics and I would encourage anyone to do so 😀

Fun Fun Function

Another resource that I would like to present is the Fun Fun Function channel on YouTube, by Mattias Petter Johansson (or mpg). In this channel, Mattias releases a new video every Monday at 08:00 GMT, resulting in a great teaching experience! Various topics are covered here like:

Functional programming
Closures
Currying
Transducers
TDD
Promises / Async-Await / Generators
GraphQL
Error handling
Classes

and so much more, such as more abstract topic like Time to leave your job?, Problem solving preparation etc.

As with the previous resource, Mattias is excellent in explaining advanced topics in a clean and understandable way, with a lot humor! Fun Fun Function episodes helped me underdestand promises, generators, iterators and functional programming principles.

Eric Elliot - Medium Blog

Eric Elliot is the author of Programming JavaScript Applications and JavaScript Scene. His blog in Medium covers a wide range of Javascript topics in great detail.

Some of the articles that I've read and I liked the most are the following:

Eric Elliot's articles helped me take a deep dive into some of the core concepts of the functional paradigm (like currying, pure functions, tranducers etc). It is obvious that Eric has a deep knowledge of the Javascript language. This is reflected in his articles, each of which constitutes a profound and valid analysis of the topic under investigation. I will definitely try to find the time to read all of his posts!

Programming Javascript Applications by Eric Elliot

I am going to stick with Eric Elliot for the next resource, as it is a book that presents a complete overview of a modern Javascript application architecture. This book covers various topics like:

Presentation of the Javascript language and its advantages
Functions (pure functions, lambdas, IIFE, scope, hoisting etc)
Objects (Prototypes vs OOP)
Modules (AMD, ES6 modules)
Client side vs server side
Authentication and authorization
Logging
REST APIs

and much more, all with detailed examples.

Programming Javascript Applications helped me get a full picture of how modern Javascript applications should be organized, tested and deployed.

You don't know JS by Kyle Simpson

Last but not least (in fact that's my favorite), it's a series of 6 books by Kyle Simpson, titled You don't know JS. Kyle Simpson teaches Javascript and he is realy good at that! Seriously, I believe Javascript is what it runs into his veins!

The series consists of six books and is suggested that they are read in the following order:

Up & Going
Scope & Closures
this & Object Prototypes
Types & Grammar
Async & Performance
ES6 & Beyond

What I liked the most in this book series, is the author's absolutely deep knowledge of the subject. Kyle Simpson shows that he takes seriourly what he does and that made me love his way of writing.

Conclusion

After reading those books and watching many videos, alongside with other useful resources, not mentioned in this post, I retook a pluralsight skill assessment in Javascript and managed to reach the expert level. It seems that these resources were really useful to me, and I hope for you too!

Please, let me know what do you think about the resources I presented. Feel free to list some of your favorite books, tutorials, or anything else!

Future reading

Here are some resources that I would like to read in the future:

Composing Software (by Eric Elliot)
Testable JavaScript: Ensuring Reliable Code (by Mark Ethan Troster)
Functional Light JS (by Kyle Simpson)
Learning Javascript Design Patterns (by Addy Osmani)

DEV Community: John Kapantzakis

Including files created by Node.js into .Net project 🛠

Automating boilerplate code generation with Node.js and Handlebars

John Kapantzakis ・ Feb 18 '20 ・ 3 min read

The project file

Attempt #1 (xml-js)

Attempt #2 (Project class)

How to programmatically include a file in my project?

Background

Console application

kapantzak / csproj-include

Programmatically include items to csproj file

csproj-include

Inputs

Execution

Can't use Microsoft.Build.Evaluation in VS2017

Execute from Node.js

Workflow

Conclusion

Resources

Automating boilerplate code generation with Node.js and Handlebars

Usage

Prerequisites

How does it work?

Tools used

Conclusion

Links

CSS cascade: Importance

Cascaded value

Origin

Importance

Order by origin and importance

Normal user agent declarations

Normal author over normal user agent declarations

Animations over normal author declarations

Important author over normal author declarations

Final thoughts

References

JS illustrated: Promises

JS illustrated: The event loop 🔁

John Kapantzakis ・ Aug 15 '19

Callbacks

Promises

Getting control back

Readable async code

Promise API

Promise.reject(reason)

Promise.resolve(value)

Thenables

Promise.all(iterable)

Promise.allSettled(iterable)

Promise.race(iterable)

Promise.prototype methods

Promise.prototype.then()

Promise.prototype.catch()

Promise.prototype.finally()

Conclusion

References

The RGB split effect with css and a bit of javascript

Creating the typewriter effect with the use of async generators

Our goal

kapantzak / text-typing

Simple typewriting effect

text-typing

Installation

npm

yarn

Usage

HTML

JS

Chaining methods

await

then

Options

speed

The markup

The JS part

Blinking cursor

API

Typing process

Attempt #2 (`Project class`)