JSK Weekly - April 17, 2019

This week, again, we have a lot of great articles. Angular and general JavaScript is the hottest topics. So let's dive right into it.

Design patterns are always an actual topic. That's why we recommend you a great article "Design patterns in modern JavaScript development" by Kristian Poslek.

Amsterdam JSNation had an interesting interview with Kyle Simpson, "Kyle Simpson: I’ve Forgotten More JavaScript Than Most People Ever Learn".

Angular developers might be interested in "How to Safely Access Attributes in Angular Using “?.”" by Chidume Nnamdi while their React colleagues can "Build a Super-Modular Todo App with React and Bit Components" with Josh Kuttler.

Vue.js developers will certainly enjoy Michael Lin's article "How to build a large Vue application".


General

Kyle Simpson: I’ve Forgotten More JavaScript Than Most People Ever Learn

Kyle is a living JavaScript classic, the truest embodiment of the spirit of open source. In his conversation with JSNation, he shares his wisdom and knowledge of all things JavaScript: the most controversial and fascinating things in the language and his “per aspera ad astra” journey to falling in love with JS.

Authored by: Amsterdam JSNation

Design patterns in modern JavaScript development

Thoughts on effective communication in the design of software projects Definitely. As is the case with object-oriented programming, we, the developers, are trying to model the world surrounding us. As such, it makes sense to also try and use the world surrounding us as a tool to describe our craft.

Authored by: Kristian Poslek

How Do We Really Use Reusable Components?

I've talked to 30 teams about their reusable components. Here's what I've learned. "Let's make our components reusable!" So lately I've been talking to many JS teams about how they reuse components. Here I'll share some of what I learned... but first, a short intro. The JavaScript landscape is shaping towards components.

Authored by: Bit

5 must-read JavaScript tutorials

JavaScript has become the most popular programming language for web developers today. It's the only language that is implemented in the web browser, but its uses aren't strictly limited to web development. Thanks to the invention of Node.js, you can now use JavaScript to create desktop applications, mobile applications, static sites, and even use it for machine learning.

Authored by: NathanSebhastian


JavaScript

Improve async programming with JavaScript promises

A JavaScript promise can be created using the Promise constructor. The constructor function takes an executor function as its argument which is immediately executed to create the promise.

Authored by: Glad Chinda

Exploring the hidden potential of JavaScript arrays!

Undoubtedly, arrays are one of the most useful and extremely popular JS data structures. These indexed collections proved time and time again that they're still the best (if not only) choice for a various number of use cases. But, arrays themselves wouldn't be so valuable without their whole, extremely expressive API.

Authored by: areknawo


TypeScript

Typescript Tutorials: Funtions on array

Visit Smartcodehub.com. "Typescript Tutorials: Funtions on array" is published by Neeraj Dana in web development in hindi

Authored by: Neeraj


Angular

How to Safely Access Attributes in Angular Using "?."

In this post, we will see how we can safely access object's properties in Angular template expressions without throwing errors. Read on. Feel free to check out more of my posts in Bits and Pieces, and to learn how I build more modular software with components using Bit ( open source).

Authored by: Bit

Angular CLI: Custom webpack Config

The Angular CLI gives us all sorts of power. One of these powers is the ability to forget about the webpack configuration process. This is great for most applications, but what if you want to add custom webpack functionality? This article looks at how we can achieve just that.

Authored by: Alligator

Loading Text File Content With FileReader During A Drag-And-Drop Interaction In Angular 7.2.12

Ben Nadel continues his exploration of the File APIs in Angular, this time allowing the user to drag-and-drop a Text File onto the Angular app, which will read and render the contents of the file using the FileReader utility class.

Authored by: Ben Nadel

Getting Started with Angular PWAs - Part 2

After getting your PWA up and running, there are a couple techniques that come in handy when presenting information or updates to the user. This article will cover how to listen for app updates and present an option to the user to update, as well as presenting the user with an option to install the PWA on their device.

Authored by: Preston Lamb

Closer to Angular 8: Beta 11 is here - HelpDev - Angular release

Angular 8 is still in beta. With Angular 8.0.0-beta.11 new features are ready for testing. There is also a Breaking Change for Bazel. The release cycle of Angular provides for a new major release every six months. That works better, but sometimes not so good. At Angular 7 the release came on time in October.

Authored by: HelpDev


React

Build a Super-Modular Todo App with React and Bit Components

How to compose a highly modular React application with reusable components from 5 different libraries. Modular programming has been around since the 60s, and the term itself was set at 1968 by Larry Constantine and extended ever since.

Authored by: Bit

What are Controlled Components in React?

There are quite a lot of articles about React out there speaking about controlled and uncontrolled components without explaining them. It has been quite similar for my articles, whereas I always tried to add at least one or two sentences explaining them, but in the end, I thought it would be great to have a brief tutorial just showing a simple example for controlled components in React.

Authored by: Robin Wieruch

Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber

Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components. From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool.

Authored by: Codrops

React List Components by Example

How to display a list in React with JSX is one of the bigger challenges for React beginners. This tutorial walks you through different list view examples ...

Authored by: Robin Wieruch


Vue

How to build a large Vue application

The MVVM of the Observable model gives Vue a natural advantage in small and medium-sized Web applications, but with the growing popularity of Vue, Vue's use in large projects is slightly awkward. Obviously, in high complexity projects, type checking has become a required feature, and Vue2's type checking support in TypeScript is not good enough, and importantly the modular design of Vuex's state logic is lacking.

Authored by: unadlib

Vue component frameworks compared: Is Vuetify right for you?

Vuetify is a component framework that combines the core features of Vue.js and Material. Learn if it's right for your next project.

Authored by: LogRocket

The Power of Named Transitions in Vue

Vue offers several ways to control how an element or component visually appears when inserted into the DOM. Examples can be fading in, sliding in, or other visual effects. Almost all of this functionality is based around a single component: the transition component. A simple example of this is with a single v-if based on a Boolean.

Authored by: CSS-Tricks

📂 Vue Dropbox Chooser

Last week we saw Vue Google Picker. Now let's see how we can pick a file from Dropbox using Chooser API. Installing Vue and Creating a new Application. ( Skip to next section, if already done..) Install vue-cli given Node v8.9 or above is installed. Creating a new Project.

Authored by: Karthik_B


Node.js

NodeJS logging made easy

How many times did you write logger.info('ServiceName.methodName.') and logger.info('ServiceName.methodName -> done.') for each and every method of your service you wanted to log? Would you like it to be automated and has the same constant signature across your whole app?

Authored by: Andrey Goncharov

Experimental Node.js: testing the new performance hooks

Performance monitoring is a very important topic for any application that expects to be deployed into a production environment. Performance monitoring is not something you should start considering once you start seeing performance issues, but rather, it should be part of your development process in order to detect possible problems before they are visible in production.

Authored by: LogRocket


Libraries and Tools

My Top 6 JS Data Visualization & Reporting Libraries for Developers

Web developers often have to find different ways to represent data in their apps. In this post, I'll try to cover the basic features of tools that may help you to do it in the best possible way. We...

Authored by: Bit

Launching the Front-End Tooling Survey 2019

As with previous years, the goal of this year's survey is simple. To discover current knowledge and usage levels of common front-end tools across our industry. So which tools will be top of the pile in 2019? I really appreciate you taking the time to take part.

Authored by: Ashley Nolan

The Best React Extension for VS Code

When working with React, there's lots of code that gets repeated over and over....and over and over again. Eventually, you start to think, " there's got to be a better way". Don't worry, there is! In this article we will look at the ES7 React/Redux/GraphQL/React-Native snippets ** **extension.

Authored by: Scotch Development

Webpack From Zero to Hero

After a successful Webpack workshop reuniting frontend developers from 3 offices, I got the necessary push to create this serie teaching how to bring an application to life while setting up Webpack

Authored by: Rubens Pinheiro


Testing

The perfect unit test

There's a common theme I find with people who tell me that they don't find unit testing useful, and it's normally that they are writing bad tests. This is completely understandable, particularly if you're newer to unit testing. It's hard to write good tests and it takes practice to get there.

Authored by: Jack Franklin


Functional Programming

How do you compose JavaScript functions with multiple parameters?

As functional programmers, we like to piece our programs together out of small pieces. Our main tool for this is composition. We take an input, process it through a function, then pass it on to another function. And this all works great so long as all our functions take exactly one argument.

Authored by: James Sinclair


Other

In Defense of the Ternary Statement

Some months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you're new to this idea (like I was), you're in a for a real treat. Just search for "if statements" on Hacker News.

Authored by: CSS-Tricks

Reasons Why JavaScript is so Important for Modern Development

What's the JS fuss all about nowadays? Find out why JavaScript has become so important for modern web development and what are the benefits of learning more about it.

Authored by: Snipcart

How to Create a Sticky Image Effect with Three.js

A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js. From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool. If you recently browsed Awwwards or FWA you might have stumbled upon Ultranoir's website.

Authored by: Daniel Velasquez

How To Get Distinct Values From Array In Javascript

In this tutorial, we will see How To Get Distinct Values From Array In Javascript. Primitive values in the JavaScript are immutable values except for objects. Types of primitive values include Null, Undefined, Boolean, Number, Symbol and String. This tutorial also gives you the answer to the How can I get a list of unique values in an array.

Authored by: KrunalDLathiya

7 Useful JavaScript Tricks

Just like every other programming language, JavaScript has dozens of tricks to accomplish both easy and difficult tasks. Some tricks are widely known while others are enough to blow your mind. Let's have a look at {x} JavaScript tricks you can start using today! Get Unique Values of an Array Getting an array of unique ...

Authored by: David Walsh





1 comments

JulsYa
5/29/2019 10:48:29 AM
Hello! What about Rental Search App and Solve Real Tenants' Problems? Take a look also at this article. It might be interesting according suggested topics: https://yalantis.com/blog/rental-search-app/. For myself, I've found a lot of interesting.