![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Another week, another newsletter issue. This week we had a surge of activity in React community with a lot of high-quality posts to pick from.
Pick of the week goes to Jake Archibald for his "I discovered a bug" post where he explains how he found the bug which he called Wavethrough and how each browser is (or is not) affected by it.
A few days ago, the number of stars for Vue's GitHub repository surpassed the number of stars on React repository and community went crazy. Kevin Ball did a post where he explains why GitHub stars are not a particularly good measure of framework usage.
Recently we have also seen a release of Node.js 10.5.0 which brought some new features. One of the main new features is an addition of initial, experimental threads support. For a language that was not multithreaded from the start, nor it had a need to be, this is a big news. Fernando Doglio explains the reasoning why threads are added and give an introduction to their usage.
General
I discovered a browser bug
I accidentally discovered a huge browser bug a few months ago and I'm pretty excited about it. Security engineers always seem like the "cool kids" to me, so I'm hoping that now I can be part of the club, and y'know, get into the special parties or whatever.
Authored by: Jake Archibald
Github Stars !== Usage: React is still blowing Vue and Angular away
Last week there was a fairly momentous occurance in the JavaScript framework world: Vue.js passed React.js in the number of people who have 'starred' it on Github. Using a tool called Star History, we can see that this measure in particular tells a story of React's historical dominance being overtaken by the skyrocketing Vue.
Authored by: Kevin Ball
What the heck is "Script error?"
If you've done any work with the JavaScript onerror event before, you've probably come across the following: "Script error." "Script error" is what browsers send to the onerror callback when an error originates from a JavaScript file served from a different origin (different domain, port, or protocol).
Authored by: Scotch Development
Understanding memory management and the garbage collector
In JavaScript, the memory taken by the values held by the variables is automatically freed when they are not used anymore. This is done by the garbage collector to free up space. How can we benefit from knowing how it works and therefore how to write better code? Let's find out!
Authored by: Marcin Wanago
JavaScript
JavaScript "Stale Practices"
Best practices don’t last forever. This is especially true when a field is changing fast, and JavaScript development has changed a lot over the past 10 years. The old best practices go stale, and new ones take their place. Here are 5 JavaScript best practices that have gone stale recently.
Authored by: Ben McCormick
No need to wait for the holidays, start Decorating now
ES2018+, a.k.a ESnext, a.k.a ECMA-262 is giving us devs some shiny new toys. Every couple of months the ECMAscript committee meets up. It's usually an opportunity for the big man Brendan Eich to catch up with old pals, and if there's still time afterwards, discuss the future of JavaScript.
Authored by: Andrico Karoulla
Date-ing Javascript
There have been some gotchas with working with Date in JavaScript that we’ve had to learn the hard way around. I’m hoping to blow your brains in a controlled manner now instead of having it blown later by a nasty bug.
Authored by: The Practical Dev
A Practical Introduction to ES2017 Async-Await
The ability to write asynchronous functions is a major update in ES2017. In order to understand this chapter, I suggest that you review the chapter on promises. Asynchronous functions are functions that return a promise. We denote them by using the async keyword. When loadData returns an object, the return value is wrapped into a promise.
Authored by: Zsolt Nagy
TypeScript
Keep Your Promises in TypeScript using async/await
TypeScript is designed for development of large applications and transpiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs. TypeScript may be used to develop JavaScript applications for both client-side and server-side execution.
Authored by: Bit
Implementing Strategy pattern on TypeScript
Design patterns are ways of standardizing resources implementations into our applications. The greatest motivation to use patterns is, by far, the increase in legibility, efficiency and help on future code maintenance. There are a lot of design patterns out there. But, from this huge list, we have Strategy, which is maybe the simplest of them.
Authored by: codeburst.io
How to Actually Improve Type Safety with the TypeScript Strict Flags
David Neil 0 Comments Last summer a team of engineers converted our front-end code from Closure-annotated JavaScript to TypeScript, you can read about it here. It has been a long journey to take that converted code that was smattered with any s and turn it into idiomatic and type-safe TypeScript.
Authored by: Lucidchart
Angular
Reusable Angular Animations
Angular Animations have become very popular for apps using Angular 2+. They are essentially how we did animations before we started using advanced component libraries or CSS animations. Queue the "its just JavaScript" jokes! The purpose of animations can be to help tell the user a story.
Authored by: Sam
Angular ngrx with schematics
Sharing is caring!14sharesTwitterFacebook14I found ngrx one of the really cool things that has been added in the Angular universe and I tried to use it as much as I can from the really beginning. The biggest problem I had all the time I started a new project was to set up the environment.
Authored by: Daniele Zurico
How to built npm ready component library with Angular
So far publishing an npm package was a dream to me and many developers like myself. I would like to share my thoughts on how i have written a component library in Angular and published it as an npm module, lets articulate in detail.
Authored by: codeburst.io
React
Complex App Logic With Redux And Redux Saga: Write an Authentication Monitor
Using sagas to monitor and react when dealing with authentication failures. A common mistake when writing business logic in web apps is code duplication. If a component needs to fetch user data the first thing that comes to mind is fetching it in the componentDidMount hook.
Authored by: Bit
Creating a React app with React-Router and an Express Backend
In this article we will cover how to run a React application using React-Router for routing and an Express backend. This tutorial offers a simple way to set up an API that can be quickly updated and tested while creating a React application. It may also offer help to those who are new to React.
Authored by: Nic Burgess
Introducing the Single Element Pattern
Rules and best practices for creating reliable building blocks with React and other component-based libraries. Back in 2002 - when I started building stuff for the web - most developers, including me, structured their layouts using tags. Only in 2005 did I start following web standards.
Authored by: Haz
Form Handling Using Redux Form
Handling the data and events related to forms and input fields in web apps is not most people's idea of fun. Thankfully though, there are plenty of available libraries that abstract away some of the tedious work. If your React app already happens to use Redux for state management, then Redux Form is one such option.
Authored by: Alligator
Setup React Hotloader In 10 Minutes
Several years ago, it was becoming tiring (and annoying in the case where the changes do not render as expected) to refresh the browser to see the most recent updates on a web project. In a bid to solve this problem, developers created several plugins and tools that can cause the DOM to re-render on each save without even doing a full-reload.
Authored by: LogRocket
Aurelia
Aurelia Release Notes - June 2018
June is a significant month for Aurelia. Our latest set of releases adds some great new features for our templating engine, allowing more seamless Webpack builds and an even more unobtrusive programming model. We've also made huge improvements to our binding engine, including adding new keywords and beefing up performance.
Authored by: Aurelia
Vue.js
Building a RSS Viewer With Vue: Part 2
Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the last post, I walked through how I built my demo using Vue.js and Vuetify on the front end and Webtask on the back end. When I built that initial version, I knew it was exactly thatmdash;an "initial" version.
Authored by: Raymond Camden
21 Top Vue.js UI Libraries For Your App
21 best and popular Vue.js UI component libraries and frameworks for building your next Vue.js application faster with UI components. Beautiful buttons, sliders, scrollers, grids, navbars and more.
Authored by: Hacker Noon
A Look at Vue's Reactive Properties
The Vue JavaScript framework is "reactive," which means it can automatically refresh your data. Learn the ways you can take advantage of this in your apps. Modern web applications need to render data dynamically in various HTML elements.
Authored by: Telerik
How to build a real-time editable data table in Vue.js
In data-driven applications, a data table is used to display data in a tabular format and with the ability to edit and delete records in place. Working with Vue there are different open-sourced components that can be used to easily add a data table to your application.
Authored by: Codementor
Node.js
Threads in Node 10.5.0: a practical intro
A few days ago, version 10.5.0 of Node.js was released and one of the main features it contained was the addition of initial (and experimental) thread support . This is interesting, specially coming from a language that's always pride itself of not needed threads thanks to it's fantastic async I/O.
Authored by: Fernando Doglio
Debugging Node Code in VS Code
Creating configurations for debugging Node in VS Code can take some time to get right. In this article, we will look at the 4 most common Node debugging configurations.
Authored by: Scotch Development
Write GraphQL APIs on Node with MongoDB
In a REST API based app, the server defines the shape and size of the resource provided by an endpoint. So any request sent to a server will return a lot of data, sometimes more than desired.
Authored by: Bit
Node.js Guide for Frontend Developers
This guide is focused on frontend developers – people who know JavaScript, but are not very proficient with Node yet. I won’t focus on the language here – Node.js uses V8, so it is the same interpreter as in Google Chrome, which you probably know about.
Authored by: bloomca
How to make beautiful, simple CLI apps with Node
Channel your inner Sindre Sohrus and ship a beautifully simple CLI app using Node. Command line apps are a neat way to package repetitive tasks. This will walk you through some tools that are useful to build CLI apps. When merging/rebasing, the file that always seems to cause trouble is the package-lock.
Authored by: Hugo Di Francesco
Libraries and Tools
Sails.js is a Node.js MVC framework inspired by Ruby on Rails
Read about Sails.js MVC framework designed to emulate the familiar MVC pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps
Authored by: The Practical Dev
Testing
Testing react components the right way with react-testing-library
A few days ago Kent C. Dodds released a testing package (React-Testing-Library) for testing react components/applications. The package was created on principles that encourage good testing practices. The more your tests resemble the way your software is used, the more confidence they can give you.
Authored by: Codementor
Mocking and Stubbing API calls in Vue Apps with Cypress and Jest
Almost all single page applications will make many calls to external services. I will discuss how to test API calls, specifically: Unit testing Vuex actions that use axios End to end (e2e) testing using Cypress.
Authored by: Lachlan
Ad hoc unit testing in NodeJS
Lately I've been jamming away at coding up a prototype desktop app using Electron and Vue. It's been really fun to let go of all those "best practices" and simply code as much and as quickly as I can. One of those best practices I've passed up is unit testing.
Authored by: Kevin Lamping
Functional Programming
JavaScript Functional Programming (Solution to Code Challenge #11)
Tried the code challenge #11? In that, we delved into solving basic array problems using array methods such as map(), reduce(), filter() etc. You can find the awesome entries in the comment section of the post as well on Twitter using the hashtag #scotchchallenge.
Authored by: Scotch Development
Using Recompose to write clean Higher Order Components
If you like keeping things simple in React, by creating small components with functional component syntax and by using them as pieces to create bigger ones, can help you to do the same with Higher-Order Components (HOCs). With Recompose it is easier to create small Higher-Order Components that can be composed into more complex ones.
Authored by: LogRocket
Other
A look at the many ways APIs can authorize access
When you encounter an API that gives you access to some data - maybe yours (tweets, photos), maybe someone else's (space photos, climate stats) - you'll usually encounter some form of required authentication/authorization before being allowed to access it.
Authored by: Grant Winney
Building a Fancy Countdown Timer with MomentumSlider.js
Nowadays there are many Javascript libraries to make it easy the task of adding sliders to a website. Most have a host of features, to adapt the slider to the particular needs of each case. However, despite having so many functionalities, sometimes the sliders lack features that would result in a much better user experience.
Authored by: Scotch Development
JavaScript Windows Universal Applications Part 2
You may seen this before: while the title is a little misleading, it's more a complain about why I feel sad about the current state of the UWP JavaScript ecosystem rather than show that can target UWP this time I will try to be more centered on the topic and show you.
Authored by: Angel Munoz
Data loading patterns - Pagination
The different aspects of loading data from the back-end in a web application (more precisely, an Ember.js application) has fascinated me for quite some time. It’s a huge topic, a subset of which I presented on at last year’s EmberConf.
Authored by: Balint Erdi
An ASP.NET Core Razor Pages Bootstrap 4 Application using Webpack, Typescript, and npm
This article shows how an ASP.NET Core Razor Pages application could be setup to use webpack, Typescript and npm to build, and bundle the client js, CSS for development and production. The application uses Bootstrap 4.
Authored by: damienbod
