![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
We are now in the middle of the January but it looks like that overviews of the past and predictions for the current year are still a hot topic. One of those articles that took our attention this week is "Frontend in 2018: More consensus, less complexity" by Kaelan Cooter.
Most of us have used some kind of "starter kit" to jump start our web project. But more than few times this turns out to be not so good idea. If you find yourself there, make sure to check out Vladimir Metnew's article "Next.js, Razzle, CRA. Why you should use them for a next project.".
This week Brandon Morelli is helping newcomers to JavaScript to "Learn & Understand Scope". Even somewhat experienced developers can find it useful so either you are a novice or have some experience under the belt it might be a good idea to refresh your knowledge on this core JavaScript concept.
Angular users will be happy to hear that Stephen Fluin announced that "Angular 5.2 Now Available". You can read all about it on the official Angular blog.
Finally, we have one more new release announcement from Ploty.js team: "Plotly.js v1.32.0 is out! Our largest release yet". Ploty.js is a high-level, declarative charting library.
General
Frontend in 2018: More consensus, less complexity
2017 was quite a year in frontend web development. Frameworks like React and Angular have continued to enjoy large-scale support among the community, but new contenders like Vue have also exploded in popularity. Webpack continues to be the build tool of choice and NPM the package system of choice.
Authored by: Kaelan Cooter
Next.js, Razzle, CRA. Why you should use them for a next project.
Why do starters exist at all? Every time something new gets published, most people start searching for a boilerplate. That's right, they want to try a new lib. And if there is no boilerplate - you could try to write it and make popular ( and then fix this sh#t till you won't have 400+ issues in your repo).
Authored by: Vladimir Metnew
Learn Asynchronous JavaScript in 2018
The following is an excerpt from the newest book that I have been working on "Asynchronous JavaScript". You can read it online for free at asyncjsbook.com If you are new to async programming in JavaScript, you might be surprised with the result of the following piece of code: setTimeout(function() { console.log('1'); }, 0); console.log('2'); What do you think the output of the above code will be?
Authored by: Codementor
Web Components, Web's Dirty Secret
Okay maybe not a secret...Web components are awesome and just not used as often as they should be.
Authored by: David Novicki
How To Make a Simple Multiplayer Online Car Game with JavaScript
Hello everyone, today I'll be writing about how to make a simple multiplayer online game. By the end of this tutorial you'll have a functional server where players can connect and drive around, there'll only be basic features and you'll learn how to make all of this from scratch, having enough room to expand as much as you want!
Authored by: codeburst.io
Talking Progressive Web Apps and Why They Change the Way We Build the Web
Yesterday my latest interview on DotNetRocks went live. Carl, Richard and I got to sit down for an hour talking progressive web applications. It was awesome chatting with them because I could sense their enthusiasm and curiosity about PWAs.
Authored by: Chris Love
JavaScript
JavaScript: Learn & Understand Scope
Scope determines the lifespan, access, and visibility of variables, functions, and objects in your code. Scope is an important concept in JavaScript to understand. It determines the lifespan, access, and visibility of variables, functions, and objects throughout your code. Scope Benefits Utilizing scope results in quite a few benefits, including: Security - Variables and functions are only accessible where they are needed.
Authored by: Brandon Morelli
JavaScript Promises in ECMAScript 6
In my opinion, promises are the most important feature is ES6. In today's world of JavaScript, we have a huge amount of communication with other servers, regardless of whether we're writing a client-side or server-side script.
Authored by: DiscoverSDK
JavaScript - Shorthand Assignment Operators
A three minute introduction into shorthand assignment operators If you're adding, subtracting, multiplying, dividing, or remaindering two values, there's no need to type out the entire equation. Use these shorthands to save time and code: Adding Two Values As an example, we'll look at the addition of two variables.
Authored by: Brandon Morelli
ECMAScript 6 - Keepin' it Classy
Apologies for the cheezy and very punny title, but I just couldn't resist. One of the great things about ECMAScript 6 is how it handles es For those of you who don't know, JavaScript is not so much an Object Oriented Language, but rather a prototype-based one.
Authored by: DiscoverSDK
JavaScript - Null vs. Undefined
Learn the differences and similarities between null and undefined in JavaScript At first glance, null and undefined may seem the same, but they are far from it. This article will explore the differences and similarities between null and undefined in JavaScript. What is null? There are two features of null you should understand: Here's an example.
Authored by: Brandon Morelli
Difference between let and var in Javascript
There have been a lot of confusion about the use of let and var in Javascript. So here is the difference where you would be now easily to decide what to use where and when. let gives you the privilege to declare variables that are limited in scope to the block, statement of expression unlike var.
Authored by: codeburst.io
TypeScript
Learn how to contribute to the TypeScript compiler on GitHub through a real-world example
A few days ago I managed to send my first PR to the TypeScript project on GitHub. This is something that I've been trying to do for a very long time but unfortunately, it felt way too complicated for me.
Authored by: Remo H. Jansen 🇮🇪
TypeScript 2.4: Dynamic import() Expressions
TypeScript 2.4 added support for dynamic import() expressions, which allow you to asynchronously load and execute ECMAScript modules on demand.
Authored by: Marius Schulz
Typing Arrays in TypeScript
There are many ways we can type a property to declare to TypeScript something is an array, or contains an array of "something". We have generic types, array types and type assertions.
Authored by: Todd Motto
Angular.js
Angular 5.2 Now Available
Angular 5.2 Now Available. Angular version 5.2.0 has been released. This is a minor release that is a drop-in replacement for 5.1 containing many bugfixes.
Authored by: Angular
Wildcard Routes (**) Can Redirect Relative To Their UrlTree Location In Angular 5.1.3
Ben Nadel demonstrates that a wildcard route (**) can redirect to a relative location in the UrlTree. This allows a feature module to provide local "missing route" logic without becoming overly coupled to the URL architecture at the application at large.
Authored by: Ben Nadel
12 Things to Help Large Organizations Do Angular Right
The four (4) main areas that can have the biggest impact on your organization are: source code management, dependency management, promoting best practices, and automation. Let's examine them in detail. As I mentioned above, large organizations have a lot of source code and a lot of people changing it.
Authored by: Victor Savkin
Creating A Jump-To-Anchor Fragment Polyfill In Angular 5.2.0
Ben Nadel presents a polyfill for jump-to-anchor functionality that is not currently supported in the Angular 5 Router. This polyfill seamlessly adds support with no additional "application" logic. And, it can be seamlessly removed in the future when it is no longer needed.
Authored by: Ben Nadel
Generate Cold Storage Paper Wallets For Ripple XRP Coins With Angular
About a week ago I wrote about Ripple in a tutorial titled, Build a Ripple XRP Wallet for Android and iOS with Ionic Framework, which focused on mobile development as a followup to a cross-platform desktop application that I had written about before that.
Authored by: Nic Raboy
Step by Step Custom Pipes in Angular
Angular has many Pipes built-in, but they only take us so far. Ideally we'd like to extend our applications by creating custom Pipes. Custom Pipes (previously Filters in AngularJS) allow us to essentially create a pure function, which accepts an input and returns a different output via some form of transformation.
Authored by: Todd Motto
React.js
The What And Why Of Redux
Redux! Redux!! Redux!!! What in the world is Redux and why do I need it? I asked myself this question when I started learning how to build single page apps (SPA) to include rich interaction on my apps. SPA has the ability to re-render different parts of the UI without requiring server roundtrip.
Authored by: Codementor
How to Build a Realtime Chat App with React and GraphQL
GraphQL and React are a match made in heaven. Their ecosystem provides a lot of tools to simplify common web programming tasks including realtime integrations. In this article, youíre going to learn how to use only React and GraphQL to make a realtime app (precisely a chat app).
Authored by: Chris Nwamba
5 practical tips to finally learn React in 2018
I get asked something along the lines of the following pretty often: Job needs me to know React like yesterday... I've literally never done React, or even read about it, until three days ago. If you feel like this too, I'm here to help.
Authored by: Gosha Arinich
100 lines of code, 4 rectangles, 2 circles, 1 React SVG Loading Spinner
No one wants to make their users wait. What you want, is to provide the best experience possible like with a custom Loading component for example. I really like the spinning loader on Meteor Development Group products. So much so that I actually dug into it to see how it was built.
Authored by: Xavier Cazalot
Atomic Design with React
I have recently had the opportunity to work on a new product from scratch made in React and PWA with the well-crafted and componentized UI at Cheesecake.
Authored by: Danilo Woznica
Custom Bubble Transitions with React Navigation
The navigation scheme for this example is quite simple: it is composed only of two screens A and B, each containing a button that will navigate to the other. If we were to implement this with a StackNavigator, it would look something like this: But it should be clear now that we can't use StackNavigator - there is no way to customize the transitions here.
Authored by: codeburst.io
Aurelia.js
Building the perfect master-detail page in Aurelia
I'm excited to announce that thanks to the hard work of Aurelia contributor Jürgen Wenzel the Aurelia router has just gotten a lot more powerful. In addition to a quick overview of the new features, we're going to look at an example of how to use these features to create the perfect master-detail page.
Authored by: Matthew James Davis
Vue.js
Mine Monero XMR Cryptocurrency With CoinHive In A Vue.js Application
Cryptocurrency and the blockchain has become a very popular subject lately with everyone trying to buy, sell, and even mine various types of coins. There are multiple ways to mine cryptocurrency, but did you know that you could mine directly from a web browser using JavaScript?
Authored by: Nic Raboy
Template Driven Form Validation In Vue.js
Form validation (or more correctly, form field validation) forces a user to fill out all required fields in a web form. The validation is typically done where the developer can set up rules. For example: If the name field is blank, take the user back to the form and display an error message.
Authored by: Ogundipe Samuel Ayo
Creating a Basic Vue Plugin: A Quick And Practical Example
First, a bit of backstory: I'm working on a project called VuePress that uses Vue and GraphQL to build out WordPress sites. WordPress stores post content as a long string of HTML. I need to be able...
Authored by: Ramsay
How To Setup GraphQL, Vue.js, and Phoenix 1.3 Part 1: The Backend
For developers that want to build fast, maintainable, apps that can handle millions of requests with ease. Technologies: Webpack, Vue 2.5, Apollo 2.0, Absinthe 1.4, Phoenix 1.3, and Elixir 1.4 Why This 🔥 Stack? I'm a big fan of Vue (including single-file components), GraphQL, and Elixir/Phoenix.
Authored by: codeburst.io
How To Setup GraphQL, Vue.js, and Phoenix 1.3 Part 2: The Frontend
In part 1, we covered how to setup an Elixir 1.4, Phoenix 1.3, and GraphQL frontend. In this part 2, we setup the frontend of our Elixir & GraphQL & Vue.js project. Now that you've setup and tested your Elixir backend, let's create the frontend, using Vue's single-file components feature, webpack, and Apollo to handle the GraphQL queries.
Authored by: codeburst.io
A highly customisable CRUD component using VueJS and Vuetify
There are many web-based CRUD components and applications available from the open-source community. So why build another one? Well, I would like to have a component where I can quickly build customisable admin dashboards to handle real-life use cases and vue-crud-x was created based on this need.
Authored by: codeburst.io
Node.js
Building your first command line app with Node.js
This is about the experience building my first command line app with Node.js. I'm a front-end guy and have never built a command line app. So all of this is from a beginner's perspective. Let's build a command line app to read top hacker news posts.
Authored by: Sooraj Chandran
Deploy your NodeJS app to Now.sh
Now.sh, as their websites suggests, is a Realtime Global Deployments platform.
Authored by: codeburst.io
Koa Through Example: Part 2
Through example, we unpack the meaning of downstream and upstream passes. This is part of series starting with Koa Through Example: Part 1 . Express Middleware To illustrate Koa's downstream and upstream feature, we will first explore the challenge in creating an Express middleware that adds a HTTP header with the elapsed time (in milliseconds) from request to response.
Authored by: codeburst.io
Koa Through Example: Part 1
While I do not have a lot of pain points using Express, I thought it was important to learn about what is being called a more robust foundation for web applications. I came around to learning the ES2017 / ES8 feature async / await feature because I recently saw it being used in a mainstream JavaScript library; .
Authored by: codeburst.io
NestJS: beautifully crafted Node.js framework we've all been waiting for
NestJS is a server-side (backend) application framework beautifully crafted to support developers productivity and make their lives happier. Well, it's not only a framework, it's an enabler of entering the world of advanced engineering concepts such as Domain Driven Design, Event Sourcing, Microservices architecture.
Authored by: Mateusz Sojda
Libraries and Tools
Plotly.js v1.32.0 is out! Our largest release yet
v.1.32.0 introduced a brand new chart type, Violin Plots! The API for Violin Plots is very similar to our existing Box Plots. These charts have the benefit of displaying the shape of the distribution of points. Like all Plotly graphs, they are interactive - you can hover over the underlying points or view the relative kernel density estimation in the curves of the plot itself.
Authored by: plotly
Parcel: The Webpack successor?
Parcel is a module bundler that tend to be simpler than other module bundlers like Webpack or Rollup
Authored by: Codementor
Drive-by Testing Array Explorer
Step by step end-to-end testing project "array-explorer". TLDR; testing a popular web app using Cypress. Array Explorer is a great resource for learning JavaScript array operations. You can see it in action yourself at https://sdras.github.io/array-explorer/. Here is me adding items to an array and seeing the result and relevant documentation.
Authored by: Gleb Bahmutov
Express Gateway 1.5.0 - now with JWT support!
So as you may have noticed when you put #jwt into twitter, we're not talking about Lady Gaga's Joanne World Tour here, folks. Sorry for the disappointment. ( Love you, Gaga! Call me?) A JSON Web Token (JWT) was the most requested feature from the Express Gateway community on Feathub .
Authored by: LunchBadger
What's New for Chrome debugging in VS Code
What's New for Chrome debugging in Visual Studio Code
Authored by: Kenneth Auchenberg
Use Lenses in Hyperapp
You can shorted your state mutations by using functional lenses. If you look at Hyperapp examples or even simplest counter example, you will see how it deals with state updates. Here is a typical example - incrementing and decrementing a counter.
Authored by: Gleb Bahmutov
Testing
End-to-end testing with Headless Chrome API
Here is a tutorial on how to build first end-to-end tests using puppeteer. Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.(from documentation ) You can implement testing in JavaScript in two types: unit tests and end-to-end tests.
Authored by: Herasymchuk Yevhenii
Learn TDD in React
Learn test-driven development in your framework of choice.
Authored by: JavaScript Kicks
Testing ES6 Module in Cypress Electron Browser
Adding support to script type=module while testing Hyperapp as ES6 module. If you have a tiny framework, importing it as ES6 module is super convenient for quick demos. For example Hyperapp can be imported and used right away in most browsers. Original tweet. This is awesome - importing ES6 modules works with some caveats.
Authored by: Gleb Bahmutov
Writing and Testing async redux action creators with Jest
Action Type This is action type. Actions are plain JavaScript objects. Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants. Once your app is large enough, you may want to move them into a separate module just the way i did here.
Authored by: Rukayat Odukoya
Functional Programming
Functional Programming Paradigm Demystified (Core Concepts)
The functional paradigm completely changes the way we think about programming. In this overview, our developer Max explains the core concepts behind it. These you can apply to most languages right away, including JavaScript. Also contains a list of resources to learn FP in depth.
Authored by: Snipcart
Other
Build User Registration with Node, React, and Okta
Today's internet users expect a personalized experience. Developers must learn to develop websites that provide that personalized experience while keeping their user's information private.
Authored by: leebrandt
Why Is React More Popular Than Angular?
It's fascinating to think about why one thing becomes more popular than another. Sometimes the reasons are clear, other times not so much. This is a particularly interesting question in the case of Angular and React.
Authored by: John Hannah
Decorative Letter Animations
Some decorative shape and letter animations based on the Dribbble shot "Us By Night" by Animography. Today we'd like to share some fun letter animations with you. The idea is based on Animography's Dribbble shot "Us By Night" where various little shapes animate with some letters.
Authored by: Manoela Ilic
Custom System Via Client Side Scripting
In my digital travels, I've come across tons of sites. On a vast majority of these sites, I've thought to myself, "I know there's a better way to do XYZ." I see text that is absurdly small, thumbnails that are either too small or far too large, or single file uploads where you really need batch file uploading, etc.
Authored by: Codementor
Building A "Serverless" API using Firebase Cloud Functions.
A couple of days ago, as I was taking a shower, I had a Eureka moment! It occurred to me how possible it is to build a complete REST API using Firebase Cloud Functions.
Authored by: Bakani Zie Pilime
