![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
What's the first thing that comes to your mind when you are asked about "The cost of JavaScript"? If you are confused and still want to be a good front-end developer you better start reading Addy Osmani's must-read article and learn all about it.
PWA has been around for quite some time now. If you are in the web development world you probably heard about it but you may not yet fully utilize it. This week Mahesh Haldar walk us through the basics of PWA answering fundamental question "What is a PWA and why should you care?".
Vue has been getting a lot of attention this week. We have a number of excellent articles that we recommend. Among the top of them are "5 Tools for Faster Vue.js App Development" by Jonathan Saring and "Getting Started with Vue.js in .NET Core using Visual Studio" by Esau Silva.
Finally, we would like to welcome a new potential "big player" in the JavaScript frameworks world released by UBER. Meet Fusion.js presented by Leo Horie in the article "Introducing Fusion.js: A Plugin-based Universal Web Framework".
General
The Cost of JavaScript In 2018
Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens?
Authored by: Addy Osmani
What is a PWA and why should you care?
In the last few years there has been exponential growth in the number of mobile phone users. Today, more than 60% of total internet usage is happening via mobile phone. Obviously, the reasons include portability, cheap hardware, easy access to the internet and the increased number of services on the internet.
Authored by: Mahesh Haldar
A Practical Guide to Regular Expressions (RegEx) In JavaScript
A quick guide to effectively leveraging with regular expressions, with hands-on examples. When you first encounter Regular Expressions, they may seem like a random string of gibberish. While they might look awkward (with a somewhat confusing syntax), they are also extremely useful. The truth is properly understanding regular expressions will make you a much more effective programmer.
Authored by: Bit
Polling vs SSE vs WebSocket- How to choose the right one
Building a real-time web application is a bit challenging one, where we need to consider how we are going to send our data from the server to the client. Technologies that enable this "proactively" have been around for quite some time and are limited to two general approaches: client pull or server push.
Authored by: Bharathvaj Ganesan
JavaScript
JavaScript ES6: 5 new abstractions to improve your code
Functions in JavaScript are very important objects. It is very possible that you have come across the statement: "Functions are first-class citizens". This is true about JavaScript functions because you can pass them around in your program like you would with any other regular value.
Authored by: Glad Chinda
JavaScript's Reduce Method Explained By Going On a Diet
The reduce method in JavaScript gives you a simple way to take an array of values and combine them into one value, or sum the array based on multiple category. Wow, that is a lot in one sentence, so let's take a step back here.
Authored by: Codementor
ES2018 - Asynchronous Iteration
One of the most interesting features in ES2018, which is still pretty new, is Asynchronous Iterations. In order to understand Asynchronous Iterations, we need to dive a little into the world of iterators. And I promise you, it's going to be of fun. How do we perform iterations?
Authored by: DiscoverSDK
Fixing Variable Scope Issues with ECMAScript 6
JavaScript has always had some tricky issues with variable scope. ECMAScript 6 gives developers more control over this.
Authored by: A List Apart
Private and Public Scope in Javascript
In many programming languages, you'll hear about public and private scope, in JavaScript there is no such thing. We can, however, emulate public and private scope through things like Closures. You can create public and private scope using JavaScript design pattern called Module.
Authored by: Codementor
TypeScript
20 TypeScript Interview Questions and Answers in 2018
20 TypeScript Interview Questions and Answers in 2018
Authored by: Codementor
Angular
Using Angular Route Guard For securing routes
If you are trying to block some routes from loading based on some permissions or blocking a route based if not authenticated, then you can read along. We are going to do an example where you need to login to view your dashboard and permission-based routing where if no permission to view a route you see 404 page.
Authored by: Dimitri Nicolas
Let's build a Reactive HTTP library for Angular
Originally published at https://www.zeolearn.com/magazine/lets-build-a-reactive-http-library-for-angular Link to article project: https://github.com/philipszdavido/ng.http In this article, we will go over the concept of Reactive Programming, and in the process build a reactive Angular HTTP module like Angular's built-in Http module. If you have tried your hands on Angular and used its HTTP module, you must have come across a plethora of stuff like Observable, subscribe.
Authored by: Chidume Nnamdi
React
How to pass props to components in React
This month, all articles are sponsored by TRUMPF Laser GmbH. The german company I worked with is using a sophisticated React with GraphQL and .NET tech stack. They are hiring eager developers for their sites in Berlin and Schramberg.
Authored by: Robin Wieruch
React - Composing Higher-Order Components (HOCs)
To put it simply, a higher-order component is a function, that takes a component and returns a new component. I like to think of them as parameterized components. Many times I find myself creating several components with very similar logic, with only 1 or 2 changes.
Authored by: Codementor
Redux Lifecycle
Disclaimer : This article is not an introduction to redux. There are plenty of good resources to get started with redux (see ) and I suggest you begin with them. This article isn't about react either. The term "lifecycle" is used in context of redux data flow and operations.
Authored by: Shirsh Zibbu
ReactVR/react-360 is great, but maybe not quite there yet
My goal was to build a 3D scatterplot that you can explore. Stand inside your data and look around. Wouldn't that be cool? Instead, I got a squished Baymax healthcare companion. 🤔 ReactVR, recently renamed to react-360, doesn't have 3D modeling primitives like spheres and boxes.
Authored by: Swizec
How to Display a List in React
You've got a list of items. Now you just need to get them on the screen. What's the "React way" to render a list? The good news is it's pretty simple. All you need is Array.map.
Authored by: Dave Ceddia
Aurelia
Aurelia 2018 Q2 Report
We've made some major improvements in our core platform capabilities during Q2, including features that greatly improve Webpack scenarios, treeshaking, and modern bundler integrations. Our core plugins for state, i18n and UX continue with strong forward movement as well. Early in the quarter we announced major performance improvements in our binding engine's expression parser.
Authored by: Aurelia
Vue
5 Tools for Faster Vue.js App Development
Not long ago Vue.js passed React in GitHub stars. Although a somewhat shallow metric to measure, no doubt that this is only an indicator of the great success and popularity Vue.js is gathering in the community in 2018. As we use more great frameworks like Vue to build new applications, Dev Velocity becomes one of the most important aspects of our work.
Authored by: Bit
Tutorial - Shuffle a Deck of Cards in Vue.js
In this article, we're going to build a UI that'll give us the ability to randomly shuffle a deck of cards! For reference - here's a complete version of the application: Note 📝 : Be sure to edit/view the application directly on Codepen to view the app in a larger frame!
Authored by: Hassan Djirdeh
Getting Started with Vue.js in .NET Core using Visual Studio
In this tutorial I will show you how to use Vue.js on the frontend and .NET Core on the backend. We will be building a simple feedback form.
Authored by: JavaScript Kicks
Handling Authentication In Vue Using Vuex
Traditionally, many people use local storage to manage tokens generated through client-side authentication. A big concern is always a better way to manage authorization tokens to allow us to store even more information on users. This is where Vuex comes
Authored by: Scotch Development
Modern component reusability: Render props in React & scoped slots in Vue
One of the issues all front-end developers face is how to make UI components reusable. How do we craft components in such a way that satisfies the narrow use case that is clear to us now, while also making them reusable enough to work in a variety of circumstances?
Authored by: LogRocket
Using schemas to generate your forms with Vue, and more!
One really important task for every web developer is to handle user input via forms and it can prove to be pretty hard to develop and maintain. Hopefully there are some libraries here to improve the way you handle them. Schemas are basically nothing more than a way to model data.
Authored by: sourcerer.io
Node.js
Simple Data Processing With JavaScript And The HERE API
Have you ever needed to work with comma separated value (CSV) data that wasn't formatted in a great way or figure out complete address information based on very little provided address information? While unrelated, these two topics come up quite a bit, more frequently when I'm dealing with person information or lead data that I retrieve from conferences and other events.
Authored by: Nic Raboy
Node JS : Getting Started
Node.js is more powerful than you might think. Node.js is a run time environment to execute JavaScript code outside a browser. Before Node.js, JavaScript's scope was only limited to browsers. JavaScript engine inside the browsers provide run time environment to execute JavaScript code inside browsers only.
Authored by: codeburst.io
Understanding module.exports and exports in Node.js
Since importing and exporting modules is a regular task in Node.js, Cho S. Kim explains how the module system works in Node.js, providing a better understanding of the difference between module.exports and exports in Node.js, and showing how to understand errors when accessing publicly available methods.
Authored by: SitePoint
Libraries and Tools
Introducing Fusion.js: A Plugin-based Universal Web Framework
Fusion.js, Uber's new open source web framework, supports modern features and integrations that make it easy to build lightweight, high-performing apps for the web.
Authored by: JavaScript Kicks
Custom polymorphic code snippets in VS Code
The process for creating code snippets in VS Code is the same for all programming languages. All custom snippets are stored in JSON files (one for each programming language). You can access them in VS Code via: File > Preferences > User Snippets (Windows)Code > Preferences > User Snippets (macOS) This displays a drop down list of available languages you can define snippets for.
Authored by: LogRocket
Testing
Tried TDD and didn't realize the benefits? Try it the next time you get writer's block
Have you ever tried Test-Driven Development (TDD) thinking it would be the "holy grail" it's often made out to be, only to end up feeling like it was pointless? Maybe it didn't add any benefit to your code.
Authored by: Corey Cleary
Functional Programming
How to deal with dirty side effects in your pure functional JavaScript
If you start learning about functional programming, it won't be long before you come across the idea of pure functions. And as you go on, you will discover functional programmers appear to be obsessed with them. "Pure functions let you reason about your code," they say.
Authored by: James Sinclair
Higher Order Functions in JavaScript
In this article, you will learn about higher order functions. An important cornerstone of functional programming is higher order functions. If you want to write programs in mostly functional style, it is inevitable that you master the basics of higher order functions. First, you will learn the simple definition of higher order functions.
Authored by: Zsolt Nagy
Functional JS with ES6 - Recursive Patterns
Functional programming has been on the rise and is a topic that is very exciting to me. It allows me to write terse, declarative code that is easy to test and reason about.
Authored by: Codementor
Other
Creating the perfect rounded edge with D3 curves
A coaching client showed me this design of a tree with rounded edges and asked: *Ok, how do I build this?* Well hmm... it's a tree of some sort. Each icon is a node, and each line is an edge. Nodes can have multiple children. I think 🤔
Authored by: Swizec
JavaScript String Manipulation (Solution to Code Challenge #12)
Last time on the code challenge #12 we looked at problems involving the use of String Manipulation techniques. Yet to try your hands at the challenge? You can check it out here. You can also see other fantastic submissions in the Spectrum Chat.
Authored by: Scotch Development
The Clipboard API crashcourse
Copy and paste has a strange history on the web. There's no real standard. Most browsers have settled on document.execCommand('copy') and document.execCommand('paste'). While that seems easy enough, there's some (justified) weirdness. const result = document.executeCommand('copy'); If this is your first brush with document.execCommand('copy'), you might be wondering "Where is the text parameter?".
Authored by: David East
ReasonML: React as first intended
ReasonML is the new tech that Facebook is using to develop React applications and promoting as a futuristic version of JavaScript (ES2030 they say). In this article I'll take a brief look at this tech.
Authored by: Imaginary Cloud
Let's make a form that puts current location to use in a map!
I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two things I dread when shopping online are: Filling out a credit card form Filling out shipping and billing address forms Maybe I'm just lazy, but these things are not without challenges!
Authored by: CSS-Tricks
