zurb/tribute : ES6 Native mentions
▻https://github.com/zurb/tribute
A cross-browser @mention
engine written in #ES6, no dependencies.
]]>How to properly set up Nuxt with ESLint and Prettier in VSCode
▻https://medium.com/@gogl.alex/how-to-properly-set-up-eslint-with-prettier-for-vue-or-nuxt-in-vscode-e42532
Les extensions ESLint et Prettier pour Vue et Nuxt dans VSCodium : leur installation, configuration et fonctionnement
#VSCodium #extension #vue #nuxt #ES6 #ESLint #Prettier #outil_dev
]]>#es6 and Beyond >
▻https://hackernoon.com/es6-and-beyond-28aed8574e00?source=rss----3a8144eabfe3---4
Hello folks,ES6, pretty much hyped topic these days in front-end world.So, how about learning some cool features of ES6 and Beyond (like, #es7, ES8).First thing first.What ES means?ES stands for #ecmascript.What is the different between ECMAScript
and JavaScript
then?ECMAScript is the standard whereas #javascript is also the standard. But,ECMAScript is specification whereas JavaScript is the implementation of ECMAScript specifications.So, let’s get started.What we are going to learn?letconstObject Rest/Spread propertiesArrow FunctionString interpolationExponential **Array.prototype.includesString.prototype.padStartString.prototype.padEndObject.valuesObject.entriesLetlet is the new var but the advantage is that it is accessible & available within the scope only. Let’s see an (...)
#es8
]]>Exploring ES6
▻http://exploringjs.com/es6/index.html
Présentation complète et exhaustive de ES6 (version gratuite en ligne)
(démos complémentaires sur ▻https://github.com/rauschma)
Why I’m Excited for #javascript Class Private Fields: A Case Study
▻https://hackernoon.com/why-im-excited-for-javascript-class-private-fields-a-case-study-5748d30f
JavaScript Class Privacy — Or Lack ThereofClasses are nothing new in programming, but their implementation in JavaScript is, well, weird. For anyone used to classes in other languages, you might think of them as blueprints from which new instances are copied. Additionally, you might think that these classes would offer public, private, and protected instance properties. In JavaScript, neither of these is true: new instances of objects have a prototypal inheritance relationship with their parents and there is no such thing as private or protected properties. In this article, I am going to dive into the latter point a bit further.Note: If you enjoy this article, please give it a clap ? (or 50!) to help spread the word!Why Private Fields in a JavaScript Class?I started thinking about the issue (...)
#web-development #es6 #object-oriented #software-development
]]>Variable Length Currying in #javascript
▻https://hackernoon.com/variable-length-currying-in-javascript-af24ccb9b559?source=rss----3a8144
This is an interesting programming challenge that reddit user i7_leaf claims to have received as an interview question.Preface ⭐There is one key difference between the original question and what I will cover in this article. The interview question asked the candidate to write a function that executes as follows:▻https://medium.com/media/dc39b17781ca294ba6ef37bb3a440074/hrefIt is worth noting that this curried function does not end in any sort of delimiter, e.g. a terminating method .execute() or empty parameter (). What makes this challenge both difficult and interesting is the lack of signal that “this is the last digit in the sequence.”I agree with the majority of comments in the discussion thread that the interviewer did not mean to ask this question per se. As postulated, this function (...)
#javascript-currying #web-development #variable-length-currying #es6
]]>10 Essential VS Code Extensions for #javascript Developers in 2019
▻https://hackernoon.com/10-essential-vs-code-extensions-for-javascript-developers-in-2019-e8320e
Every programmer you’ll ever meet will have a slightly different opinion about what code editor is the best and what configuration is the most productive. Many of us have spent countless hours trying out different extensions for our code editor of choice, configuring settings, switching back and forth between code editors and trying to get the development environment just right for us.I’ve been an Atom fan for a couple of years, but I switched to VS Code last year and it felt strangely good. I like the performance better, for one, but I also think that VS Code’s marketplace is just as good as Atom’s marketplace. So here are my top extension picks that might help boost your productivity or just make your VS Code experience a little bit better.10. Quokka.jsCategory: debuggingQuokka.js is a (...)
]]>ES6 Tutorial
▻https://www.tutorialspoint.com/es6/index.htm
Guide complet de la syntaxe ES6 (ECMA2015 6ème édition)
(version en page unique : ▻https://www.tutorialspoint.com/es6/es6_quick_guide.htm)
Tricks in using #javascript Apply function
▻https://hackernoon.com/tricks-in-using-javascript-apply-function-148b1dcb9503?source=rss----3a8
Photo by Isis França on UnsplashDid you ever feel cumbersome when you use the built in JavaScript Functions Math.max and Math.min?Image from google.comWe already know that this two built functions accepts a variable argument-list. For instance when using the Math.max to get the highest value it may be written in this wayMath.max(5,2,1,3,4) // Outputs 5. Works pretty well. How about if we’re dealing with array of values we might write our code in this way.const list = [5,2,1,3,4];Math.max(list[0],list[1],list[2],list[3],list[4],list[5]);What’s wrong in this Implementation?I guess you know what’s wrong in this. As you may notice this implementation is not flexible. What if the size of array grows? We add more values in Math.max argument. As a developer we didn’t want to do that we do hard code (...)
]]>#javascript: #promises and Why Async/Await Wins the Battle
▻https://hackernoon.com/javascript-promises-and-why-async-await-wins-the-battle-4fc9d15d509f?sou
Asynchronous functions are a good and bad thing in JavaScript. The good side is that asynchronous functions are non-blocking and, therefore, are fast — especially in a Node.js context. The downside is that dealing with asynchronous functions can be cumbersome, as you sometimes have to wait for one function to complete in order to get its “callback” before proceeding to the next execution.There are a handful of ways to play to the strengths of asynchronous function calls and properly handle their execution, but one is far superior to the rest (Spoiler: it’s Async/Await). In this quick read, you’ll learn about the ins and outs of Promises and the use of Async/Await, as well as our opinion on how the two compare.Enjoy!Promises vs. Callbacks ?As a JavaScript or Node.js developer, properly (...)
]]>Functional programming paradigms in modern #javascript : Partial Application
▻https://hackernoon.com/functional-programming-paradigms-in-modern-javascript-partial-applicatio
If you’ve been following this series from the beginning then I’m confident to say that by finishing this chapter we will have a solid understanding of the basics of functional programming.So far we’ve covered the concepts of purity and immutability and ventured deeper into the world of functions by exploring composition and currying. In this article we will look into partial application, what it is and how to use it.What is Partial Application?In order to produce more reusable functions and create better abstractions we need a mechanism to preset some of the arguments of a function.Partial application is a technique used to transform functions of higher arity (functions that take multiple arguments) into multiple functions that take less (...)
#interview-questions #partial-application #functional-programming #es6
]]>Understanding the destructuring assignment syntax in #javascript
▻https://hackernoon.com/understanding-the-destructuring-assignment-syntax-in-javascript-c3bf8e1e
The ECMAscript 6 specification introduced a new syntax which makes it easier to get values out of arrays and objects. We call this syntax “destructuring”.Photo by Dayne Topkin on UnsplashThe destructuring assignment syntax with ArraysThe destructuring assignment syntax allows you to easily get values out of arrays and objects while using an array or object literal like syntax. This syntax is very short and very easy to read.Without using the destructuring syntax getting multiple values out of an array can be quite cumbersome. You would do something like this:▻https://medium.com/media/0f48d8c9ed05e2b4793b7aa8e535a937/hrefWith the destructuring assignment syntax this can be written like this:▻https://medium.com/media/c1eb8151c491b81f572976394d6875fd/hrefPretty neat, right? Let me explain what’s (...)
#destructuring-syntax #assignment-syntax #front-end-development #es6
]]>Functional Programming Paradigms in modern #javascript : #currying
▻https://hackernoon.com/functional-programming-paradigms-in-modern-javascript-currying-5652e489c
I remember the exact moment I decided to expand my skillset in functional programming. It was a chilly October evening and I was coming home from work listening to one of my favourite podcasts — JavaScript Jabber.I can’t remember who exactly was the guest but he talked in length about how functional programming has helped his team and the problems they have solved for the product they are developing.It sounded really interesting so I got home and did some Googling to see what this functional thing was about and what is so special about it. I was able to maintain my composure while I was going through the idea of pure functions and even immutable data structures.But at one point I reached an explanation of currying and quickly discarded it as something I would never do in a project. I just (...)
]]>7 Different Ways to Use ES #modules Today!
▻https://hackernoon.com/7-different-ways-to-use-es-modules-today-fc552254ebf4?source=rss----3a81
ES Modules are the future of #javascript, but unlike many other es@next features that developers have raced to take advantage of mainly thanks to build tools like babel, working with ES modules alongside of existing NPM modules is a lot harder to get started with.The purpose of this tutorial is to provide a thorough set of examples for different ways you can approach writing ES modules, without losing interop with the vast library of mostly commonjs modules that exist on NPM today.Before getting started, it’s important that you have a solid understanding of the differences between the ES module and CommonJS formats. If you haven’t already, please check out Gil Tayar’s excellent blog post before continuing.Native ES Modules in #nodejs: Status And Future Directions, Part IGoalsEvery approach (...)
]]>Using #es6 classes for Sequelize 4 models
▻https://hackernoon.com/using-es6-classes-for-sequelize-4-models-b9fd54a5f8c9?source=rss----3a81
Photo by Eugene Lim on UnsplashThe ES2015 or ES6 specification introduced class to #javascript. Libraries like React went from React.createClass to class MyComponent extends React.Component, ie went from rolling their own constructor to leveraging a language built-in to convey the programmer’s intent.For a Node.js web application’s persistence layer, a few databases come to mind like MongoDB (possibly paired with mongoose), or a key-value store like Redis.To run a relational database with a Node application, Sequelize, “An easy-to-use multi SQL dialect ORM for Node.js” is a good option. It allows the application to run backed by a MySQL or PostgreSQL instance and provides an easy way to map from entities’ representation in the database to JavaScript and vice versa.Sequelize’s API for model (...)
]]>Using Ractive.js and #html5 Fetch API to consume #rest API
▻https://hackernoon.com/using-ractive-js-and-html5-fetch-api-to-consume-rest-api-f03c47904202?so
credit: ▻https://burst.shopify.com/photos/developer-reviewing-javascriptRecently I was given a task to consume an open rest based API from Open Weather using Ractive.js and HTML5’s Fetch APIThe sample app here takes the city name as input and shows the corresponding weather information below it.Get the OpenWeather API keys for FREE!!!In order to get the JSON data from OpenWeather’s REST API, the first thing we need to do is get their free API key. The API can be called by simply passing in this app id as query parameter. That’s it!Setting the UI containerCreate an HTML5 element to be used as the front of the app. In our case, it’s div#container.Implement responsiveness using BootstrapJust for implementing the responsiveness, we’ve included the Bootstrap reference. The classes .row .col-md-6 (...)
]]>Functional Programming: Alternatives to the IF #Functional #JavaScript
▻https://hackernoon.com/functional-programming-alternatives-to-the-if-functional-javascript-8804
A couple of times I have been asked “How would you do X in functional programming?” I absolutely love these types of questions.I do my best to answer every question, but I think there are many questions interesting enough to warrant their own articles.So for this article I would like to demonstrate how I could recreate this imperative function in a more functional manner.This function has an if statement without an else. So while a ternary operator could work, it is not ideal.▻https://medium.com/media/29d9e7511c38ea379b141ea5967caa66/hrefHere we need to run dispatch
only when we have a value
, otherwise we do nothing.One option is to use a short circuit operator:▻https://medium.com/media/6c715f86b93a7d7c84c35e5a16814a00/hrefShort circuit and ternary and both ways you can solve this (...)
]]>#javascript : Do you like games ? (part 2)
▻https://hackernoon.com/javascript-do-you-like-games-part-2-9d4141ca2493?source=rss----3a8144eab
On this topic: Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6Time to get started on the core components of the game engine. We should be able to render something on the #canvas before the end of this article!Note: please be aware that I’ll add links to specific pieces of code in the GIT repository history tree. This will make it easier for you to run the same code I did when describing a specific feature.We’ll start by working on the classes that have no dependencies like: Game, AssetLoader and EventDispatcher then progress onto others that might extend these.The Game class could:accept a Scene as an optional constructor argumentkeep a reference to all created sceneshave public methods for adding and removing scene(s)have a public loop() method which will trigger the update() method on all (...)
]]>#functional_javascript for crawling the Web
▻https://nicolas.perriault.net/code/2013/functional-javascript-for-crawling-the-web
“few people are aware of the #Functional_Programming capabilities of JavaScript. Many couldn’t see obvious usage of these in Web development, which is a bit of a shame if you ask me” Tags: functional javascript #ECMAscript #ES6 Functional Programming
]]>