JSK Weekly - December 5, 2018

React state management is always a hot topic. This week you can check out what is the "State of React State Management in 2019" by Jonathan Saring.

If you still haven't heard of our favorite JavaScript SPA library or you just want to refresh your memory, we highly recommend short but on the point article "4 reasons to use Aurelia" by bigopon.

Vue.js developers will surely enjoy reading about how to "Turn your Vue Web App into a PWA!" by Rajat S.

Finally, we recommend "Seeding your Database with Thousands of Users using Knex.js and Faker.js" by Mario Hoyos. A very useful tutorial that will help you get up and running with your test database data in no time.


General

Making Algorithms Faster with Memoization

This post is in response to this post by Ivan. I really enjoyed working on that problem, and I ended up arriving at a solution that wasn't discussed in that blog post. In this post, I will discuss how I arrived at my solution and how memoization can be used to make an algorithm much faster.

Authored by: Riley Flynn

Actually, callbacks are fine

This is an article about how the most well known villain in the JS universe isn't really evil, just misunderstood. I'm not going to dig too deep into the background of the term "callback hell"; instead I'll just point you to this nice article that explains the problem and some typical solutions.

Authored by: The Practical Dev

Deconstructing Map, Filter, and Reduce

When I was little, I received a watch as a gift. Much to my mother's horror, the first thing I did was grab the smallest screwdriver I could find and take it apart piece by piece. I wanted to see the internals and inspect every part.

Authored by: joelnet

Bridging the Gap Between CSS and JavaScript: CSS-in-JS

In this article, we're going to dig into the concept of CSS-in-JS. If you're already acquainted with this concept, you might still enjoy a stroll through the philosophy of that approach, and you might be even more interested in the next article (coming soon!). Web development is very interdisciplinary.

Authored by: Matija Marohnić


JavaScript

Hash tables

A hash table is a data structure which helps us to quickly find the data by using the keys. Hashtable uses the hash function to generate the indexes sometimes hash function generates the same index for the different data this is called collision. Definition: A dictionary in which keys are mapped to array positions by hash functions.

Authored by: Sai gowtham

ES6 Syntax, Features and Additions: A Reference Guide

The sixth edition of ECMAScript - the scripting language specification by which JavaScript is standardized - introduced many new features, upgrades, and shortcuts to the JavaScript programming language. This version is commonly known as ECMAScript2015 or ES6.

Authored by: Telerik

Demystifying the Long Arrow "Operator"

I recently stumbled upon some code that I found to be really interesting. It essentially iterates over a loop but with a twist. It uses the mysterious long arrow "operator". What's interesting and unusual about this "operator" is the fact that it iterates over the pets array in reverse, as seen in the console output.

Authored by: The Practical Dev

JavaScript (ES5) - Getting Started

Part of "Intro To JavaScript (ES5)" series This was originally posted on my site at https://martyhimmel.me on January 11, 2017. Like a number of others on dev.to, I've decided to move my technical blog posts to this site. You've decided to learn JavaScript. Now you're wondering, "what do I do?

Authored by: Marty Himmel


TypeScript

Advanced TypeScript Concepts: Classes and Types

This article describes the features and functionality of TypeScript 3.1. While TypeScript is very simple to understand when performing basic tasks, having a deeper understanding of how its type system works is critical to unlocking advanced language functionality.

Authored by: SitePen

TypeScript Express tutorial #1. Routing, controller, middleware

Hello! In this new series, we build a RESTful application with TypeScript Express. The course is going to cover the fundamental concepts of the express framework and tools like MongoDB. Some basic knowledge of TypeScript would be useful, as we focus on Express here.

Authored by: Marcin Wanago

Using Promise.prototype.finally() in TypeScript

ES2018 introduced a new Promise.prototype.finally() method to the standard library. Here's how to use it in TypeScript.

Authored by: Marius Schulz


Angular

Build a Basic CRUD App with Angular and Node

In this tutorial, you will be developing a simple Angular single page app with a REST backend, based on Node and Express.

Authored by: SitePoint

Getting Started with Angular 7 and Bootstrap 4 Styling

TL;DR: In this article, we take a practical look at getting started with Angular 7 and styling it using Bootstrap 4. This short tutorial is targeted towards beginners new to Angular. But, it will also be useful for veterans wishing to update to the latest Angular version. Let's dive in.

Authored by: codeburst.io

Host Bindings Don't Prevent Default Event Behavior Until After All Event Handlers Have Executed In Angular 7.1.1

Ben Nadel looks at the way Angular implicitly handles "false" return values in a host binding; and, the timing with which is invokes the underlying event.preventDefault() method. It does so in a way that does not make the change detectable by a sibling event handler on the same element.

Authored by: Ben Nadel

On The Irrational Demonization Of Two-Way Data-Binding In Angular

Ben Nadel looks at the irrational demonization of two-way data-binding in Angular. And, demonstrates that two-way data-binding provides exciting benefits that developers can opt-into when they want it; and, opt-out-of when they need more explicit control over how data is synchronized.

Authored by: Ben Nadel


React

State of React State Management in 2019

Observing state management in the wild... and the Store is open for business! 🐯 State management has always been a vital yet somewhat dreadful aspect for working with React. Recently I've had the please of talking to a few R&D teams, each of whom had an entirely different opinion about this topic.

Authored by: Bit

Connecting React Components the DOM

Last time, we learned about the lifecycle of React components -a collection of methods that are called during the life of a React component. In this article, we'll learn all about connecting React components to DOM elements i.e. regular HTML elements like input. You may ask why we'd need regular elements at all.

Authored by: DiscoverSDK

How to Use Basic React Hooks for State and Effects

With React Conf 2018 behind us, we have learned that with release 16.7 of React, an important new feature will be available: React Hooks. Join me as we go through working examples and get "hooked" on React.

Authored by: Telerik

A Reason React Tutorial for Beginners [2018]

Thank you Benjamin Johnson for submitting this guest blog post to teach others about your skills and learnings as a developer. If you want to submit a guest blog post too, I am keen to get a message from you. There is only one requirement: You must have written a quality technical article for any publication before.

Authored by: Robin Wieruch

How Does React Tell a Class from a Function?

Consider this component which is defined as a function: React also supports defining it as a class: (Until recently , that was the only...

Authored by: Dan Abramov

10 More Things You Didn't Know About Create React App

Editors note: Last month we published another article on " 5 Things I Didn't Know about Create React App" - check that one out too for more tips and tricks with React! Learn new tips and tricks for Create React App to make you more productive with tooling and help you build your apps faster.

Authored by: Telerik


Aurelia

4 reasons to use Aurelia

I'm a developer who has tried AngularJS, Angular, React, Vue, and Aurelia. So far, Aurelia is the most powerful, elegant, intuitive, and enjoyable framework to develop with. In this, I'll share with you a few reasons why I think you should do yourself a favor and try it out.

Authored by: The Practical Dev

Aurelia Release Notes

Over the last couple of months our awesome community has been providing great feedback and use cases for the Aurelia CLI. We're so grateful for the way that we've been able to work together. As a result, we've had several CLI updates that not only fix bugs but also add new features.

Authored by: Rob Eisenberg


Vue

Turn your Vue Web App into a PWA!

In this post, we will see how to take an existing Vue App that I had created in my previous post, and convert it into a PWA! Progressive Web Apps (PWA) are web apps that can run smoothly on mobile devices. But that is not all!

Authored by: Rajat S ⌨️

Sharing Data Between Components in Vue.js

In this tutorial, we'll explore generating data in one component, and passing it to another in Vue.js. TL;DR Here is an example of a working CodeSandbox https://codesandbox.io/s/l4yj6jxpqz Why would we need to do this? If you've worked on a large-scale Vue application, chances are, at some point you've wanted to generate data in one component and then do something with it in a separate component.

Authored by: Alex Mourer

Post Frequency: from prototype to production with Vue + Node

Let's apply that principle: I'm building Post Frequency/Accountable Blogging, I'm familiar with Vue and Node-based backends. Netlify makes frontend deployments trivial and I've settled on Dokku for databases/backend applications hosting. See how I deploy my applications Deployment options: Netlify + Dokku on DigitalOcean vs now.sh, GitHub Pages, Heroku and AWS.

Authored by: Hugo Di Francesco


Node.js

Node.js Error Handling Best Practices: Ship With Confidence

Node.js error handling isn't a walk in the park. When putting our code into production, we want to know that it's battle-tested and hardened for all the complexities that production will throw at it. In order to handle our errors properly, we need to understand: Wowza-that's a lot.

Authored by: Stackify

Node Streams Tutorial With Example

Node Streams Tutorial With Example is today's leading topic. Streams are collections of data just like the arrays or strings. The difference between arrays and streams is that streams might not be available all at once, and they don't have to fit in the memory.

Authored by: KrunalDLathiya

10 Node Frameworks to Use in 2019

Introduction What is a Node framework? Benefits of Node frameworks Selecting a Node Framework 1. AdonisJs [GitHub Stars: 5,053] Why AdonisJS? 2. Express.js [GitHub Stars: 41,036] 3. Meteor.js [GitHub Stars: 40,490] 4. Nest.js [GitHub Stars: 10,128] 5. Sails.js [GitHub Stars: 19,887] 6. Koa.js [GitHub Stars: 23,902] 7. LoopBack.js [GitHub Stars: 11,985] 8.

Authored by: Scotch Development


Libraries and Tools

Seeding your Database with Thousands of Users using Knex.js and Faker.js

There are many ways to go about interacting with a database, but that's a discussion for another day. For this example, we will be using Knex.js, which calls itself "a batteries-included SQL query builder for Postgres, MSSQL, MySQL, MariaDB, SQLite3, Oracle, and Amazon Redshift designed to be flexible, portable, and fun to use ".

Authored by: Bit

Comparing HTTP Request Libraries for 2019

Communication with our server from a client-based app is very essential in web development, it helps makes our client app highly dynamic. A user interacts with the page by clicking a button which sends a request to the server, the server would retrieve the data and send it back to the user without reloading the page.

Authored by: Chidume Nnamdi

Use WebRTC and PeerJS to build an image sharing app

WebRTC is a protocol that allows to add very advanced capabilities to our JavaScript applications running in the browser. The technology lets us directly connect two or more browsers to each other...

Authored by: Flavio Copes

Setting up webpack 4 for a project

This blog post shows how to setup webpack 4 module bundler for development. This webpack tutorial contains many common examples you might need to configure when doing JS application development with the webpack. The demo is available at my GitHub repository. The demo includes a couple of example components.

Authored by: Tero Auralinna


Testing

How to Test React Components with Jest and Enzyme- In Depth

Everything you should know about testing React components using Jest & Enzyme. With examples. Testing React components may be challenging for beginners and experienced developers who have already worked with tests. It may be interesting to compare your own approaches with the ones we use in our project.

Authored by: Bit

Click your element - how to make Enzyme tests cleaner

TL;DR Check this awesome library: https://github.com/jakubjanczyk/enzyme-custom-wrappers Enzyme is a great library for writing tests that I'm using with pleasure. However, in my last project, when our number of tests exceeded 1000, we started to encounter issues with maintainability and keeping them clean.

Authored by: Pragmatists

Tasty Testing with Mocha and Chai ☕️

Today I'm going to briefly introduce a simple workflow for automating testing that uses Mocha and Chai. Mocha is a test framework that sets up test suites, and Chai is an expectation framework that adds helpers to make it easier to build tests against code.

Authored by: The Practical Dev


Other

Detect location and local timezone of users in JavaScript

Want to show a uniquely tailored promotion? Want to change the language of your site or design based on where your users are coming from?

Authored by: Chris Nwamba

How to easily build Desktop Apps with HTML, CSS and Javascript

Can HTML, CSS and Javascript really be used to build Desktop Applications? The Answer is Yes 😄 Electron can be used to build Desktop Apps with HTML, CSS and Javascript. Also these apps work for multiple platforms like Windows, Mac, Linux and so on. Electron Combines Chromium and NodeJS into a single Runtime.

Authored by: Aditya Sridhar

Preventing Content Reflow From Lazy-Loaded Images

You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport.

Authored by: CSS-Tricks

NSFW: Use cases for Bitwise operators in Js

Bitwise operators in Javascript are mostly used for numerical convertions/computations, because sometimes they're much faster than their Math or parseInt equivalents. You can take a look at some benchmarks here. It's important to note, as pointed out by Mathias Bynens, that bitwise operations only work reliably on numbers that can be expressed as 32-bit sequences.

Authored by: Darkø Tasevski





0 comments