JSK Weekly - June 26, 2019

With the second half of 2019 already in sight, time is something a number of us may be looking to maximise right now. This week, Bret Cameron shares tricks on how to speed up Javascript development in "13 npm Tricks for Faster JavaScript Development" and Giancarlo Buomprisco takes us through the most useful tools and techniques provided by the Chrome Dev Tools to debug Javascript code better and faster than ever before in "Debugging Javascript Like a Pro".

Whether you're just getting started with React, ready to dive into building a chat app or something inbetween, we've got you covered this week. Sonny Recio discusses React in 2019 vs its growing competitor Vue in "React in 2019: Is it still worth jumping the bandwagon?", Stephen Afam-Osemene goes in-depth to get you started with react-select in "Getting started with react-select" and part one of gitconnected's series by Krissanawat Kaewsanmuang on building a mobile chat app with React is out: "Building a React Native Chat App — Part One: Basic Messaging | PubNub", and then some.

Vue was a popular topic with LogRocket bloggers this week with Deji Atoyebi delving into useful development tools in "5 useful development tools for Vue.js", Dotun Jolaoso shows us how to implement a middleware pipeline for a Vue app in "Understanding Vue middleware pipelines" and Jordan Irabor compares Router options in "Router options compared: Vue Router, Voie, Vue-routisan and Vue-route." Last but certainly not least is "Introducing Watchers in Vue JS" on the Bits and Pieces blog where Nwose Lotanna teaches how to write a cleaner and more efficient VueJS code using Watchers.


Web App Generators for React, Angular or Vue + NodeJS + SQL, MongoDB or Firebase Firestore

ScaffoldHub is a web app generator that enables you to generate React, Angular or Vue + NodeJS + SQL, MongoDB or Firebase Firestore apps. You model the entities, relationships, fields and validations, and ScaffoldHub generates the source code for you.

Authored by: Felipe Lima

Server-Sent Events (SSE): A conceptual deep dive

We’re rapidly heading toward an event-driven world of data streams and APIs. Server-Sent Events (SSE) fills a specific niche in this new world: an open, lightweight, subscribe-only protocol for event-driven data streams. This article explores how SSE came to be, how it works under the hood, and why it’s rapidly being adopted by developers.

Authored by: Ably Realtime

Shopify Buy Button vs. Snipcart: The Good, The Bad, & The Awesome

Back in 2015, our friends at Shopify released a cool new product called the Shopify Buy Button (similarly referred to as the Buy Now Button). Its aim was to allow new and existing users to enable e-commerce on any website.

Authored by: Snipcart

Microfrontends - bringing JavaScript frameworks together (React, Angular, Vue etc)

React, Angular, Vue, Ember, Backbone, Stencil, Preact.... in fact there's probably another one being released right now! Like most things in life, a variety of choices informs a toxic culture of mine is better than yours and you're wrong and I'm right.

Authored by: Chris Kitson


How We Auto-Generate Documentation, JavaScript Style

In a rush? Skip to technical tutorial We've spent the last few months building the new version of our shopping cart. When we started working on it, we knew this would also mean changes in other areas of our product. Documentation was one of them.

Authored by: Snipcart

Medium, StackOverflow & The #100DaysOfCode challenge.

I'm still learning the nuts and bolts of JavaScript. JavaScript is not our conventional programming language like Java or C++. JavaScript is totally a different world. There are millions of new things and methods to keep in mind while learning and using it. 100DaysOfCode is aimed towards people who want to become better at coding.

Authored by: Ashay Mandwarya

Debugging Javascript Like a Pro

Are you one of those who are console logging your way to a solution when your code is not behaving the way you expect? If yes, read on. This article aims to explain to you the most useful tools and...

Authored by: Bit

JavaScript Internals: JavaScript engine, Run-time environment & setTimeout Web API

setTimeout and setInterval are called as timer functions in JavaScript. They are used to schedule the execution of functions. They are not provided by the JS engine itself but they are provided by browser as part of the window object.

Authored by: Bit

A New Bytecode Format for JavaScriptCore

In revision r237547 we introduced a new bytecode format for JavaScriptCore (JSC). The goals of the new format were to improve memory usage and allow the bytecode to be cached on disk, while the previous format was optimized for interpreter throughput at the cost of memory usage.

Authored by: Tadeu Zagallo

What is JavaScript Hoisting?

Hoisting is JS's default behavior of defining all the declarations at the top of the scope before code execution. One of the benefits of hoisting is that it enables us to call functions before they appear in the code. JavaScript only hoists declarations, not initializations. You can find the official documentation here.

Authored by: Bit

Javascript Array copyWithin Example

Javascript Array copyWithin Example | JS Array copyWithin Tutorial is today's topic. The copyWithin() method copies part of an array to the same array and returns it, without modifying its size i.e, copies array element of an array within the same array. The copyWithin() method copies array elements to another position in the array, overwriting the existing values.

Authored by: KrunalDLathiya

.map(), .reduce(), .filter() - my turn

A while back I written an article about some interesting array's functionalities - with .map(), .reduce() and .filter() being only a small fraction of them. But, because of the number of different methods involved, some of them simply didn't get the attention they deserve. These include the 3 mentioned above.

Authored by: areknawo


Make fewer JS mistakes with TypeScript

Javascript (JS) was originally intended to make small alterations to web pages, such as spinning animations when you scroll over an email @ symbol, or to validate that you have typed an email address correctly. In the years since, JS has been used for more complex things.

Authored by: Martin Capodici

Operators in TypeScript

Operators in TypeScript - DiscoverSDK Blog

Authored by: DiscoverSDK


Angular E-Commerce App with Headless CMS Sanity [Live Demo] - Snipcart

In a rush? Skip to tutorial steps or live demo. Do you eat cereals? I bet you do. Ever literally froze in place in front of the store's cereals section? I have. I mean, there are TONS of boxes. Always one or two new kinds. They all look good.

Authored by: Snipcart

In-Depth Look at the Inner Workings of Angular Attribute Directives

A thorough guide to the world of Angular Attribute Directives Directives are one of the most important and powerful features in Angular. They help structure and add styles to our elements. Either they add a view (UI) to our DOM(Component), change the appearance of our DOM(Attribute) or create/destroy the DOM (Structural).

Authored by: Bit

Improve Performance with Web Workers

This article will illustrate how to improve start-up performance using Web Workers. Our example will be an Angular 8 application. Using the Angular 8 CLI simplifies getting started with Web Workers. However, using Web Workers is not specific to Angular and most of these concepts can be utilized in any Javascript or Typescript application.

Authored by: Erxk Verduin


Navigating React Native apps using React Navigation Blog

Mobile apps are made up of multiple screens. When building mobile apps, of primary concern is how we handle a user's navigation through the app - the presentation of the screens and the transitions between them. React Navigation is a standalone library that allows a developer implement this functionality easily.

Authored by: LogRocket

React in 2019: Is it still worth jumping the bandwagon?

Is it really worth jumping into the React ecosystem despite the growing emergence of its competitor like Vue in 2019? It is now 2019 and things have changed for better or for worse in the Software Industry.

Authored by: Bit

Building a React Native Chat App - Part One: Basic Messaging

Welcome to part one of our series on building a mobile chat app with React Native and PubNub. PubNub provides our realtime messaging chat APIs and backend, and React Native Gifted Chat provides a complete chat UI for our app. In this case, we'll use the PubNub React package, which is a wrapper for the PubNub JavaScript SDK (v4).

Authored by: TheBestDevlist

Avoiding recursive useEffect hooks in React

It's fair to say that React 16.8 and the introduction of hooks has really changed how we write React. Hooks are one of those APIs that make you realise the flaws of the previous approach after you stop using it.

Authored by: Jack Franklin

React at 60fps - Building a Medium-Inspired Zoom with React-Pose

You might have noticed that Medium has a pretty great image preview UI and this is what I will be implementing today: And if you would like to see my final implementation of if, this is it: Tip: Use Bit ( Github)to easily share and reuse your React components between your apps, and build faster as a team with a shared component hub.

Authored by: Bit

Getting started with react

Building select elements used to be one of the easiest things to build when working on a web project three or four years ago. Now, there is so much that goes into building select elements especially when UI/UX is a high priority.

Authored by: LogRocket

Write Custom Hooks to Clean Up Your Code

React hooks make it easy to add a single piece of state to a component. But it's also a breeze to write your very own custom hooks, just by moving the hooks-related code into a function. Say you need a boolean true/ false flag to keep track of whether a bit of spoiler text is shown or hidden.

Authored by: Dave Ceddia


Introducing Watchers in Vue JS

Vue JS was created by Evan You and 234+ community lovers. It is a very progressive framework for building user interfaces. It consists of an approachable core library that focuses on the view layer...

Authored by: Bit

3 Key Insights from Vue's new functional API RFC

On June 7th, Evan You (creator of Vue.js) posted an RFC on a Hooks-inspired function-based API for a Vue.js. It's an absolutely fascinating read, and well worth going through. It also sparked quite a bit of conversation and some backlash.

Authored by: Kevin Ball

Understanding Vue middleware pipelines Blog

Generally, when building SPAs there's a need to protect certain routes. For example, let's say we have a dashboard route that can only be accessed by authenticated users, we can make use of an auth middleware to ensure that only authenticated users have access to the dashboard route.

Authored by: LogRocket

Router options compared: Vue Router, Voie, Vue-routisan and Vue

The arrival of modern web frameworks has changed the way developers think and build software. We can now use flexible frameworks (with really cool names) - such as Angular, React and Vue - to easily whip up appealing interfaces.

Authored by: LogRocket


13 npm Tricks for Faster JavaScript Development

Speed up your JavaScript development workflow with npm and package.json Every day, millions of developers reach for npm (or Yarn) for their JavaScript projects. Running commands like npm init or npx create-react-app has become the go-to way to begin almost any JavaScript project, whether you're building code for the client-side or server-side - or even desktop apps.

Authored by: JavaScript Kicks

How to set up a modern JavaScript project [Tutorial]

This tutorial is part 1 of 2 in the 'Backend Setup'-series. This tutorial is part 1 of 3 in the 'Frontend Setup'-series. In this tutorial, I want to show you how to set up a JavaScript project from scratch. Afterward, you can continue by advancing the project to a frontend (e.g.

Authored by: Robin Wieruch

Libraries and Tools

How to use ESLint in Webpack

The tutorial walks you through a Webpack with ESLint setup to improve the code style of your JavaScript applications ...

Authored by: Robin Wieruch

How Does Ruby Garbage Collection Work? A Simple Tutorial

Ruby, like most other modern, high-level programming languages, doesn't force you to manage memory. This feature is called garbage collection, or GC, and you get it for free in Ruby. You can write tons of Ruby code and never give a second thought to the fact that under the covers, Ruby is doing a bang-up job of allocating and freeing memory for your code to use.

Authored by: Stackify

How to set up an advanced Webpack application

This tutorial is part 3 of 3 in 'Webpack Setup'-series. The previous tutorials have shown you how to set up a basic web application with Webpack. So far, Webpack is only used to bundle all your JavaScript files, to transpile new JavaScript features via Babel, and to serve your bundle in development mode via Webpack's Development Server.

Authored by: Robin Wieruch

5 useful development tools for Vue.js

In 2014, Vue.js emerged to compete in a space primarily dominated by Angular and React. Fast-forward to 2018, and Vue had garnered more stars on Github than the latter. Although star count doesn't imply usage, it somewhat signifies interest, which, in Vue's case, is quite reasonable, considering its power yet relative simplicity.

Authored by: LogRocket

Real-time processing with Web Workers Blog

As a JavaScript developer, you should already know its single-threaded processing model : all of your JavaScript code is executed within a single thread. Even event handling and asynchronous callbacks are executed within the same thread and multiple events are processed sequentially, one after the other.

Authored by: Andrea Chiarelli


AWS Lambda with Python: A Complete Getting Started Guide

In this post, we'll learn what Amazon Web Services (AWS) Lambda is, and why it might be a good idea to use for your next project. For a more in-depth introduction to serverless and Lambda, read AWS Lambda: Your Quick Start Guide to Going Serverless.

Authored by: Stackify

5 ES2019 features you can use today Blog

ECMAScript 2015, also known as ES6, was a major release that took six years to finalize. Since then, Technical Committee 39 (TC39), the body in charge of developing the ECMAScript standard, has been releasing a new edition of the standard every year.

Authored by: Faraz Kelhini