![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
This week we had a surge of React stories, triggered by the latest React release (16.6) and next version preview (16.7). We picked up few of them talking about new features like React.lazy(), React Suspense and React hooks. If React is your thing, make sure you take a look.
Debugging JavaScript code in the browser is a thing we were all doing at some point. Most of web developers start with simple console.log() statements in order to figure out what's wrong with their code, but today, browsers are equipped with powerful debugging tools. Parag Zaveri has an excellent story about browser debuggers and that story is our pick of the week!
Also check out the story "why branching in git is wrong" by Adrián Norte. It's a short and controversial piece that has stirred quite a bit of talk in community. Just check all the comments that the story has generated.
General
How to stop using console.log() and start using your browser's debugger
When I started my journey to become a software developer, I definitely ran into my fair share of bumps in the road. One of the most common struggles that most new developers face is debugging.
Authored by: Parag Zaveri
why branching on git is wrong
Lots of people often code using feature branching on git to avoid the hassle of conflicts while doing pull and/or to avoid pushing incomplete features that would break the system for all the team. I find these reasons to be baseless and some even harmful to the development cicle.
Authored by: Adrián Norte
Server to Client
Before anything can happen in a browser, it must first know where to go. There are multiple ways to get somewhere: entering a URL in the address bar, clicking (or tapping) on a link on a page or in another app, or clicking on a favorite.
Authored by: A List Apart
Are Web Components a thing?
Talking to people that are not really into Web Components I found out that they feel like Web Components are not going anywhere. This probably because there was a huge hype around them since, let's say, a year ago but not that much over the past months.
Authored by: Maurizio Mangione
JavaScript
Lets Build Web Components! Part 3: Vanilla Components
You don't need a fancy framework or complicated tools to design components and build apps, you just need your web browser!
Authored by: Codementor
JavaScript Standardization - An Interview with Jory Burson
One of the great things about running events is that, from time to time, you get the opportunity to invite people you admire to speak. For me, that is the case with Jory Burson, who will be one of the day 2 keynote speakers at jsMobileConf in Boston this October 25-26.
Authored by: Brian Rinaldi
3 JavaScript Performance Mistakes You Should Stop Doing
What if I told you everything you knew was a lie, what will happen if you learn some of the key features our beloved ECMAScript have published over the recent years, are actually dangerous performance traps, sugar coated in a slick looking one line callback functional code?
Authored by: Yotam Kadishay
Type System in JavaScript: What It Is and Why It Matters
JavaScript has been the language of the Web for long. As more contributors enter the scene, adopting a type system becomes vital for clean, functional code.
Authored by: Jscrambler
4 Uses of JavaScript's Array.map() You Should Know
From the classic forloop to the forEach() method, various techniques and methods used to iterate through datasets abound JavaScript. However, one of the more popular methods is the .map() method. .map() creates an array from calling a specific function on each item in the parent array.
Authored by: Scotch Development
TypeScript
Using Create React App v2 and TypeScript
React and TypeScript are two powerful tools. Let's combine them to make an even better dev environment with Create React App v2.
Authored by: Scotch Development
TypeScript-aware React hooks for global state
React Hooks API is a new proposal for React v16.7. It enables writing all components as functions with full functionality. You can develop "custom hooks" to add a new functionality.
Authored by: Daishi Kato
Angular
Understanding Change Detection Strategies in Angular
Greatly optimize your Angular app performance using smart change detection strategies. Change Detection and its strategies ( OnPush and Default) have been written about in various articles in the web but no one have come close to provide comprehensive and in-depth information about the concepts, they mostly focus on the use cases.
Authored by: Chidume Nnamdi
Angular 7 Forms Tutorial Example
Get real time updates directly on you device, subscribe now. Angular 7 Forms Tutorial Example is today's leading topic. For this example, we will use Reactive forms. Reactive forms provide a model-driven approach to handling form inputs whose values change over time.
Authored by: KrunalDLathiya
How to Install Angular CLI for Local Development
In this tutorial, I am going to tell you how to install Angular CLI step by step and create our first Angular project. To create the development environment on your system, you need Node.js, npm package manager and typescript. We have to install these step by step.
Authored by: JavaScript Kicks
Trying To Create A Message Bus Using An RxJS Subject In Angular 6.1.10
Ben Nadel experiments with TypeScript, type safety, discriminated unions, and RxJS as he tries to build a message bus using an RxJS Subject in Angular 6.1.10. What he has come up with appears to provide a good degree of type safety while also keeping the code fairly simple.
Authored by: Ben Nadel
Isoline Routing in an Angular Application using the HERE Routing API
Have you ever needed to search for locations that were in range to a starting point based on certain criteria? For example, maybe you wanted to find all the Starbucks that are within a driving distance of 5 minutes or less based on current traffic conditions.
Authored by: HERE Developers at Disrupt 🌉
React
What's New in React v16.6
Less than 2 months since the initial release of React v16.5, the great folks over on the React Team have bestowed upon us the 101st release of React. This latest release introduces some new API additions in React.lazy(), React.memo(), and contextType and even introduces a new life cycle method, getDerivedStateFromError.
Authored by: Josh Sherman
Silky Smooth Menu Animation in React
One of the principals of material design is Expressing Continuity, which teaches us that the motion is not just a fancy feature we add to our app or whimsical touch to the look and feel of the app.
Authored by: ahmed mahmoud
React 16.6: React.memo() for Functional Components Rendering Control
React 16.6.0 is released! With it comes a host of new features including the two big ones: React.memo() React.lazy(): Code-splitting and lazy-loading with React Suspense We'll focus on React.memo() for this article and React.lazy() and Suspense in an upcoming larger article. React.memo() is similar to PureComponent in that it will help us control when our components rerender.
Authored by: Scotch Development
Understanding React Render Props and HOC
A detailed introduction to Render Props and Higher-Order Components in React If you have been doing some React development recently, you must have come across terms like HOCs and Render Props. In this article, we'll go deep into both these pattern to understand why we need them and how we can correctly use them to build better react applications.
Authored by: Aditya Agarwal
Add a touch of Suspense to your web app with React.lazy()
We're all eagerly awaiting the arrival of React 17, which promises the much-anticipated Suspense and Time Splitting features. In the meantime, the React team have been generous enough to give us a sample of what's in store, in the latest 'minor' update.
Authored by: Andrico Karoulla
Understanding hooks in React
An introduction to React 16.7 hooks, with examples. React is the most powerful UI library. The team is improving performance and the development experience every day by adding amazing features, which ultimately help developers build amazing apps. If you scrolled twitter last few days, probably you saw most react developers are celebrating the introduction of the awesome feature called Hooks.
Authored by: Bit
What are React Hooks?
React Hooks are a way to use state and side-effects in React function components. They manage local state, fetch data from a API, interact with the DOM API and Browser API.
Authored by: Robin Wieruch
Vue
Voice-Controlled Web Visualizations with Vue.js and Machine Learning
In this tutorial, we'll pair Vue.js, three.js and LUIS (Cognitive Services) to create a voice-controlled web visualization. Why would we need to use voice recognition? What problem might something like this solve? A while ago I was getting on a bus in Chicago. The bus driver didn't see me and closed the door on my wrist.
Authored by: Sarah Drasner
Mastering Charts in VueJS
For this article, we are going to assume you have some background in Vue.js. If you do not run through some of my previous tutorials here. Let's start with a clean Vue app using the CLI. $ vue init webpack mastering-charts-vue Once you set up your app (the default values are fine) you will need to install the v-charts-plugin NPM module.
Authored by: Brian Greig
Build a Single-Page App with Go and Vue
Learn how to build comprehensive single-page apps using Go and Vue.
Authored by: Kleber Correia
Vue-native Infinite scroll
This post is aimed to show you how to implement infinite scroll in Vue-native. Without doubts, infinite scroll is your best bet when it comes to paginating large data set, especially in mobile apps. It's exciting to know that infinite scroll can be implemented in a few easy steps with Vue-native Install vue-native cli if it's not installed.
Authored by: Samuel James
Node.js
Node v11.0.0 (Current)
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Authored by: node js
Node Package Manager (NPM) Explained by Directing A Movie
Did you know that the initial version of Node.js was written by just one programmer, Ryan Dahl, in 2009? Today, in 2018, millions of developers have used Node.js to create the back-end for their web applications. But, Node has relied on an active open-source community to build out many specialized packages within the Node Package Manager, or NPM.
Authored by: Codementor
Top 10 Node JS Framework
Hapi.js is a Node.js web framework used to build application program interfaces. The framework has a solid plugin system. Some of its features include: Socket.io is a Node.js server framework used to...
Authored by: IssueHunt
Build Secure Node Authentication with Passport.js & OpenID Connect
We walk through using an identity provider with the generic passport-openidconnect package to build secure Node authentication and user management.
Authored by: leebrandt
Use GitHub instead of NPM
How to require private NPM modules straight from GitHub without publishing them to NPM. Let's say you have some JavaScript code you want to share among several projects, but you don't want to create a private NPM package yet. Maybe you are just experimenting, and setting things up takes effort.
Authored by: Gleb Bahmutov
Libraries and Tools
Hand roll charts with D3 like you actually know what you're doing
Charts! My least favorite subject besides Social Studies. But you just won't get very far in this industry before someone wants you to make a chart. I don't know what it is with people and charts, but apparently we can't have a civilization without a bar chart showing Maggie's sales for last month so by ALL MEANS - let's make a chart.
Authored by: Burke H✪lland
9 Bootstrap UI Component Libraries for 2018
Best UI component libraries and frameworks implementing Bootstrap's CSS framework in React, Vue and Angular. Discover React bootstrap, reactstrap, vuestrap, vue-bootstrap, NG-bootsrap and much more...
Authored by: Bit
Storybook 4.0 is here!
Users and addon authors now have a standard format to configure a story thanks to the new parameters API by Tom Coleman.
Authored by: Norbert de Langen
Testing
Walkthrough: Create and Run API Automation Script with Cucumber
During this walkthrough, you will create a BDD automation script with Node.js and Cucumber.js, and the script is used to test RESTful API services.
Authored by: Codementor
Functional Programming
Understanding Higher-Order Functions in JavaScript
Learn What Higher-Order Functions are and how to use them in JavaScript If you are learning JavaScript, you must have come across the term Higher-Order Functions. A lthoughit may sound complicated, it isn't. What makes JavaScript suitable for functional programming is that it accepts Higher-Order Functions. Higher-Order Functions are extensively used in JavaScript.
Authored by: Sukhjinder Arora
Functional React. Is it possible?
Here is our Farm Component, written as a class. I've exaggerated a bit to prove a point - how often are you actually implementing shouldComponentUpdate ?- but otherwise it's a pretty typical component. And this is the same component, written functionally. Note that I use some helpers from the aforementioned library, recompose.
Authored by: James Adams
Pure functional components in React
This article focuses on the new experimental React.pure() API, which has the likelihood of being part of the next stable release of the React framework.
Authored by: Glad Chinda
Other
Google Chrome Desktop Progressive Web App Add to Homescreen Capabilities
Users can be prompted to add Progressive Web Apps to their desktop homescreens. What are the benefits? How can your PWA qualifiy to prompt the user? How does the desktop experience differ from Windows applications and mobile add to homescreen?
Authored by: Chris Love
Firefox 63 - Tricks and Treats!
It's that time of the year again- when we put on costumes and pass out goodies to all. It's Firefox release week! Join me for a spook-tacular look at the latest goodies shipping this release. After a rather long gestation, I'm pleased to announce that support for modern Web Components APIs has shipped in Firefox!
Authored by: pumpkin potch
Durable Functions: Fan Out Fan In Patterns
This post is a collaboration between myself and my awesome coworker, Maxime Rouiller. Durable Functions? Wat. If you're new to Durable, I suggest you start here with this post that covers all the essentials so that you can properly dive in.
Authored by: Sarah Drasner
The Web Accessibility Introduction I Wish I Had
Hello again, past self. I'm sending you another message from a future where it's finally getting colder, you got the guts to go to therapy, and that thing under the floorboards somehow escaped. Most importantly, your future job responsibilities focus much more focus on web accessibility.
Authored by: Max Antonucci
Dweb: Identity for the Decentralized Web with IndieAuth
In the Dweb series, we are covering projects that explore what is possible when the web becomes decentralized or distributed. These projects aren't affiliated with Mozilla, and some of them rewrite the rules of how we think about a web browser.
Authored by: Aaron Parecki
Understanding JSON Web Token Authentication
A hands-on guide to JSON Web Token Authentications In this article, we will take a look at what JSON Web Token is all about. We will start with a basic explanation of JWT, then look at its structure, and finally create a simple server that will take some data and insert it into a JWT.
Authored by: Rajat S ⌨️
