#ecmascript6

[developgreatapps]

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. 

I wrote an article on Codeproject about how to makeReact VR app. I would like to know your thoughts about it. Thanks.

[roadtocoding]

React is fun itself. No JSX,Babel

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 

[douglasabnovato]

#html #css #javascript #ecmascript6 #react #reactjs #nodejs #backend #frontend #mobile #web #reactnative #fullstack #rocketseat #w3school #youtube #google #facebook #materialdesign #ux #ui #setup #samsung (em Juiz de Fora) https://www.instagram.com/p/B9Vtkx3DxxM/?igshid=14xv99j35x4du

[geekymindsblog]

JavaScript: Let and Const Explained

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

View On WordPress

[ryadel]

JavaScript - Remove XML-invalid chars from a Unicode string or file

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

Thanks to my RegExSplitter I was eventually able to convert those ugly regular expressions into a more readable set of code lines. Once done, I just wrapped everything up in the following JavaScript method: ... And I was finally able to achieve what I needed! Well, that's it for now: I sincerely hope that this post, as well as the RegEx Splitter and RegEx Slasher tools from the ryadel.io project hub, will also help other developers to overcome these kinds of issues. This post is part of a series of articles, tutorials and guides on the Electron development framework. To read the other posts, click here!   Read the full article

[developer-anikesh-blog]

Check out it with frontend https://anikeshpatel.github.io/msg2bin/ Source Code link https://github.com/anikeshpatel/msg2bin #javascript #ecmascript6 #developer #programming #programmer #coding #code #coder #css #webdeveloper #webdesign #software #webdevelopment #development #technology #softwaredeveloper #programmers #computerscience #webdesigner #computer #frontend #dev #webdev #softwareengineer https://www.instagram.com/p/BpJz2yBAt1t/?utm_source=ig_tumblr_share&igshid=9nqj0vqnb7ic

[strawberryicedmilk-blog]

forEach method

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

https://www.youtube.com/watch?v=159EAISAxwg

[mlbors]

When JavaScript Promises

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

Introduction

Promises are now widely used in JavaScript, but they can stay a little confused. Promises were introduced by ECMAScript 6. They intend to provide a way to deal with the completion of asynchronous tasks. They are an alternative to callbacks for delivering the results of an asynchronous computation.

Just for a simple refresh, a callback function, also known as a higher-order function, is a function that is passed to another function as a parameter. The function is called inside this other function.

One of the biggest problems of callbacks is the chaining of different asynchronous activities, because we end up with a growing stack of callback functions (callback hell). Promises aim to provide a solution to this problem and an alternative for executing, composing and managing asynchronous operations.

How it works

A Promise is an object that can be returned synchronously from an asynchronous operation and it can have one of the following states:

Pending: we don't know the outcome because the operation that will produce the result hasn't completed yet.

Fulfilled: the operation has completed and we have a value

Rejected: the operation failed

A Promise is settled if it’s not pending.

Resolve, Reject

The Promise constructor takes one argument: a callback function with two parameters, resolve and reject. It is our responsibility to call resolve and reject, and eventually to pass values to them.

Let's make a very basic example with what we know:

const p => time = new Promise((resolve, reject) => { if (time < 1) { reject('Failure'); return; } setTimeout(resolve('Success'), time); });

In this example, we just create a Promise that will return 'Success' after a given time or will fail if the given time is smaller than 1. Here, we placed a return after the reject to terminate the control flow and to prevent the execution of extra code, but it is not strictly needed.

Then / Catch

How can we use the Promise that we created? We can do it with the then method. This method takes two arguments, resolved and rejected. This last one is optional and is called when the Promise is rejected. We could do it like so:

p(500).then((resolved) => { console.log(resolved); }, (rejected) => { console.log(rejected); });

We can also use the catch method to handle errors.

p(500).then((resolved) => { console.log(resolved); }).catch((error) => { console.log(error); });

In case of error, we can also use throw. We can use it any time we are inside a Promise callback, but if we are in any other asynchronous callback, we have to use reject because otherwise catch won't be triggered and we will be left with an unresolved Promise and an uncaught exception.

// Uncaught exception const p = new Promise((resolve) => { setTimeout(() => { throw 'Error'; }, 500); }); p.then((res) => { }).catch((error) => { console.log(error); // won't happen }); // Caught exception const p = new Promise((resolve) => { setTimeout(() => { resolve('Ok'); }, 500); }); p.then((res) => { throw 'error'; }).catch((error) => { console.log(error); });

Chaining

The then method returns a Promise which allows for method chaining.

p(500).then((val) => { console.log(val); return val; }).then((val) => { val = val + ' ' + 'foo'; console.log(val); }).catch((error) => { console.log(error); });

Promise.all()

The Promise.all method returns a single Promise that resolves when all of the Promises passed in the argument have resolved. So, this method takes an array of Promises and fires one callback once they are all resolved. It can be used to aggregate the results of multiple Promises.

const p = time => new Promise((resolve, reject) => { if (time < 1) { reject('Failure'); return; } setTimeout(resolve('Success'), time); }); const p2 = new Promise((resolve, reject) => { setTimeout(resolve('Another promise'), 1000); }); p(500).then((val) => { console.log(val); return val; }).then((val) => { val = val + ' ' + 'foo'; console.log(val); return Promise.all([p2, val]); }).then(([p2, val]) => { console.log(val + ' ' + p2); }).catch((error) => { console.log(error); });

Conclusion

In this article, we saw what Promises are and how we can use them. We saw that Promises are an alternative to callbacks for delivering the results of an asynchronous computation.

One last word

If you like this article, you can consider supporting and helping me on Patreon! It would be awesome! Otherwise, you can find my other posts on Medium and Tumblr. You will also know more about myself on my personal website. Until next time, happy headache!