#ecmascript6

React VR framework to create web based virtual reality apps – what a staggering initiative! In December last year, Oculus announced the pre-release profiting from React Native technology. It means new and simpler opportunities both in making and viewing VR experiences. 

It’s really fun to know how to use React without JSX, Babel and some bunch of stuff. It's helped me understand the main principle of React library, thanks Brian Holt form Netflix and Frontend Masters course. If you use React, how do you explain the difference between createClass and createElement? - yes, it’old stuff, now all use ES6 class syntax, but it’s pretty fun to clarify the core principle of react.  Sure I don’t use it in production just for understanding the key principles 

JavaScript: Let and Const Explained

ECMAScript 6 (ES6), also colloquially known as JavaScript 6, is the latest standard of JavaScript as introduced in 2015. ES6 came with many important features, such as arrow functions and spread and rest operations, which we will be discussing as we go. Today, we are discussing the new declaration statements let and const and why we require them.

(more…)

Today I was developing an Electron application for a client and I was looking for a way to remove invalid characters from a typical XML file in UTF-8 format . Unfortunately, StackOverflow was unable to help my for that, since I only found questions (and answers) related to stripping/removing non-UTF8 characters: close, yet still not enough for what I need, since there are a lot of legitimate UTF8 characters that might cause issues within a XML file.

The Specs

As a matter of fact, according to the official XML 1.0 specifications, a valid XML file should only contain Unicode characters, excluding the surrogate blocks, FFFE, and FFFF. To keep it short, this means that the only valid characters should fall into one of the following groups: #x9, #xA, #xD, , , Additionally, the above specifications explains that "Document authors are encouraged to avoid "compatibility characters", as defined in section 2.3 of . The characters defined in the following ranges are also discouraged. They are either control characters or permanently undefined Unicode characters.". In short word, this means that the following characters should be considered "discouraged" as well: , , , , , , , , , , , , , , , , , , .

The RegEx(s)

Now that we know what to keep and what to remove, we can build the regular expressions accordingly to filter in/out the unwanted characters. ECMAScript 6 These could be easily done using ECMAScript 6, which features a great Unicode code point escape feature which can be used to obtain any Unicode character in the following way: Where the dots between the brackets can be replaced with any hex value from 00001 to 10FFFF, which is the highest code point defined by Unicode. Here are the ES6 regular expressions: IMPORTANT: It's worth noting that, since I was here, I took the chance to also exclude the #xFFFD character, aka the Unicode Replacement Character, which is usually used as a placeholder when the decoder encounters an invalid sequence of bytes: despite being formally accepted by the XML specifications, such character could often raise issues on most XML parsers: if you don't want to suppress it like I did, just replace "uFFFC" with "uFFFD" in the first RegExp. ECMAScript 5 Unfortunately, since we're using Electron, we have to build our RegExp using ECMAScript 5, which is not that great when dealing with RegExp and Unicode characters. As you might already know, ECMAScript 5 has only the following escape sequences: Octal, which can be used to escape any character with a character code lower than 256 (i.e. any character in the extended ASCII range): \42 Hexadecimal, which works the same way as Octal but uses hex values instead: \x125 Unicode, which can be used to escape any character with a character code lower than 65535: \uFFFF What about the code points above 65535? Well, since JavaScript uses UCS-2 encoding internally, all code points higher than that must be represented by a pair of (lower valued) surrogate pseudo-characters which are used to comprise the real character: this basically means that, in order to get the actual character code of these higher code point characters in JavaScript, we need to use two UTF-8 halves which will match a corresponding UTF-16 code point. Now, since we've seen that the XML specifications does indeed allow a nice amount of these characters - the whole  block, not to mention all the discouraged characters - we are forced to do some extra work and convert these code points to their lower valued UTF-8 surrogate pairs. Luckily enough, there's a great JS library called regexpu that will do that automatically for you, and even a free online tool that implements that to perform the ES6-to-ES5 conversion that we need. All we need to do is to paste there our ES6 regular expressions and have them converted (actually, transpiled) to a backward-compatible, Electron-friendly ES5 syntax: Electron-prebuilt-compile If you don't want to transpile these ES6 regular expressions to their ES5 counterpart, you can replace your vanilla electron build with the electron-prebuilt-compile NPM package, which comes with native ES6 and TypeScript support. Single-line to Multiline RegExp Regardless of what ECMAScript version you're using, the above RegExp have all a major flaw: they are insanely long, which makes them ugly in terms of code readability. On top of that, since they're using the peculiar JavaScript RegExp syntax, they cannot be split into multiple lines as they were string. What can we do to fix such issue? I found a number of possible techniques for splitting JS RegExp on multiple lines while digging on StackOverflow and other tech sites: the best workaround I've found so far is explained in this StackOverflow answer, that shows how you can do an array of mini-regexp and join them at the end: despite being a good idea, it can be only used when we can effectively split the regexp, since each single "subset" has to be internally consistent. Other answers suggest to use the JavaScript RegExp object, which constructor does accept a string: the problem with that is that we need to manually escape the RegExp string, which could be a real bummer (and altering the "actual" string, thus crippling our chances to run further tests with third-party tools). Long story short, I ended up coding a couple online tools: RegEx Splitter, which can be used to split a single-line JavaScript RegEx into multiple-lines of JavaScript code. RegEx Slasher, which can be used to add slashes and/or remove slashes from any RegEx - basically escaping and/or unescaping it. I put both tools online in the ryadel.io project hub, hoping that they'll help other developers dealing with these kinds of issues: they are also both available on my GitHub repo page.

The JavaScript function

forEach is a type of looping array method. It takes a given array and calls a function for each element in the array. You can use it like a typical array method. It takes an argument (refer below to “output”) and then runs the function you give it.

array = [”hello”, “world”, “my”, “name”, “is”, “emily”];

array.forEach(output);

function output(item, index, array) {

}

// each time it calls the function, it will pass the item (the string), the index within the array, and it pass in the entire array

Below is a typical style/usage of the forEach loop. it calls an anonymous function -- since writing out the function and naming it like above takes more code and is typically not needed since the function is usually pretty closely tied to the array and won’t be used again in the code. It is a more condensed version of the method and function called above.

array.forEach(function(item, index, array){

         console.log(index, item);

}

//this array would produce a list of the all the index numbers followed by each item in the array

//the variable/argument names can be anything you want -- they are just plainly named above for clarity

Refer to this youtube video below for a more in-depth explanation

Through this article, we are going to see what Promises are in JavaScript and how we can use them.