JSK Weekly - June 05, 2019

June is already upon us and with it, Aurelia's 1.0 release of the Aurelia CLI! Check out "Aurelia's June Release Notes" for more information!

If you'd like to ease into the new month with a React beginner challenge, Chris Sevilleja has something for you: "Fetch and Display from an API ― 10 React Challenges (Beginner)", or perhaps you'd prefer to prepare for the future with Austin Roy Omondi instead, with "What to expect in React v17".

Other must reads this week: Jonathan Saring takes us through a host of useful GraphQL tools and libraries in "13 GraphQL Tools and Libraries You Should Know in 2019" while Shaumik Daityari gives a short yet practical introduction to Git in "Git for Beginners: Learn The Trunk Workflow", both on the Bits and Pieces blog and Felipe Lima makes a quick introduction to ScaffoldHub, a web app generator in "Web App Generators for React, Angular, Vue, SQL, MongoDB or Firestore".


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

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

Authored by: Felipe Lima

Git for Beginners: Learn The Trunk Workflow

Git is the world's popular version control system. It enables you to track changes in a directory and creates checkpoints in your code. Git also allows you to go back in time to any of these checkpoints at a later date. Popular Services like Google Docs and Wikipedia have a rudimentary form of version control ingrained into them.

Authored by: Bit


Implementing Private Variables In JavaScript

JavaScript (or ECMAScript) is the programming language that powers the web. Created in May 1995 by Brendan Eich, it's found its place as a widely-used and versatile technology. Despite its success, it's been met with its fair share of criticism, especially for idiosyncrasies.

Authored by: CSS-Tricks


Is there a place for TypeScript in your programmer career?

Personally, I'm a big fan of TypeScript . I talked about it in a number of my previous posts. I truly enjoy the development experience, code hints, type-safety and all other benefits of this statically-typed JavaScript remix. With that said, TS (obviously) isn't perfect.

Authored by: areknawo


Angular Optimization: Use trackBy Option for *ngFor Directive

Learn how to use the *ngFor directive correctly to optimize your Angular app performance *ngFor is one of the most popular directives in Angular - however, if not used well, it may damage your app's performance. In this post, we will learn how to use the *ngFor directive correctly, to stave off slowdowns in our app.

Authored by: Bit

Angular's Dependency Injection In Depth

ANGULAR DEPENDENCY INJECTION Before we start -  a free tip for all of you Angular coders: If you're looking for a way to write faster and better, skip the repetitive code and copy-pasting and use Bit to create, share and use reusable Angular components.

Authored by: Bit

6 useful features in Angular CLI

With the second iteration of Google's web framework Angular and a complete rewrite of AngularJS, the Angular community was given a significant upgrade in development productivity with the Angular command line interface(CLI). The CLI makes it easy for developers, new and seasoned, to create Angular applications that work with just a single command.

Authored by: Adam Morgan

Pasting Images Into Your App Using File Blobs And URL.createObjectURL() In Angular 7.2.15

Ben Nadel demonstrates how to copy-and-paste Images directly into an Angular 7.2.15 application. This approach captures the paste event, extracts the File object, generates an "Object URL" from the given blob, and then renders it as an Image src property.

Authored by: Ben Nadel

Understanding Data Binding in Angular

Data binding is one of the most important concepts in a JS framework. Data binding is the reflection of logic or variable in a model to the view of an app. Whenever the variable changes the view must update the DOM to reflect the new changes.

Authored by: Bit

Angular Performance: Optimizing Expression Re-evaluation with Pure Pipes

Learn what Angular pipes are and how to use them wisely to optimize your app's performance Pipes is an unpopular but very essential feature of Angular. It enables us to pipe our data and modify it on-the-go, without adding extra code to our components; the data is piped through and transformed before being displayed.

Authored by: Bit

Angular Markdown Pipe

While working on a small Angular side-project (more on that later), I found myself in need of a way to render markdown as HTML. I'm sure there are a lot of ways to go about this, but I decided to go with a Pipe. I like pipes.

Authored by: Mark Rabey


What is preventDefault() in React?

A brief explanation why we need to call event.preventDefault() on button, form, or submit events ...

Authored by: Robin Wieruch

Fetch and Display from an API ― 10 React Challenges (Beginner)

A number of web applications and sites rely on third-party APIs and services for data. In this React challenge, we will learn to make an API request to a third party API service. This is an open API. Hence, it requires no authentication.

Authored by: Scotch Development

What to expect in React v17 Blog

React Fiber(React v16) is awesome and has taken some significant steps towards improving the developer experience as well as the quality of applications built with React. In this post, we will look at how React 17 looks to build on React v16. Why asynchronous rendering?

Authored by: Austin Roy

Returning null from setState in React 16

React 16 lets you decide whether state gets updated via .setState to prevent unnecessary DOM updates. Calling .setState with null no longer triggers an update in React 16. We'll explore how this works by refactoring a mocktail selection app that updates even if we choose the same mocktail twice.

Authored by: LogRocket

How to useState in React?

A tutorial about the React's useState hook by example for state management in React function components ...

Authored by: Robin Wieruch

Making unit tests fail when PropTypes error

PropTypes are a great way to document your components and I generally advise that everyone do this fairly strictly. In fact, we have an ESLint rule that ensures all PropTypes are declared. If you're using TypeScript/Flow, you don't need to be using PropTypes.

Authored by: Jack Franklin

How to Easily Use a Single React Component from PrimeReact's Library

In this post, we will take one component from Bit's PrimeReact collection and demonstrate reusing it in two separate React apps. Nodejs: As everything is based on Nodejs, we have to download and install the Nodejs binaries on our machine. This is the main software we will need.

Authored by: Bit


Aurelia Release Notes - June 2019

Today, we're pleased to share with you the 1.0 release of the Aurelia CLI! Many of you have been using, testing, and helping to expand and improve the Aurelia CLI since we first introduced it in its earliest alpha, almost four years ago.

Authored by: Aurelia


Introduction to Computed Properties 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

Introducing tiptap a fully feature rich-text editor for Vue.js!

Vue.js has a lot of cool libraries but this one takes the cake. You can do so many cool things in it as a rich-text editor. Check it out!

Authored by: Erik Hanchett


Getting Started with Building Chatbots using AWS Lex and Node.js

Amazon and a lot of cloud vendors such as Microsoft and Google have services around machine learning (ML), artificial intelligence (AI), and virtual assistants. A popular one that might come to mind is Amazon Alexa, something I've written quite a few tutorials around over the years. The concept around Alexa is simple.

Authored by: Nic Raboy

Libraries and Tools

Useful tools and techniques to minify your CSS

Faster page speed, better performance, overall improved user experience - these are the advantages of minifying your CSS files. This may seem obvious, yet it remains one of the most frequently neglected performance optimizations. Minification in the simplest terms is the process of minimizing your file size by getting rid of whitespaces, line breaks, comments, delimiters, blanks, and unnecessary characters.

Authored by: LogRocket

Color contrast accessibility tools

Accessibility is all the rage these days, specifically when it comes to color contrast. I've stumbled upon a couple of tools this week that I think are pretty nifty for helping make sure that all of the text on our websites is legible regardless of what background color they might have.

Authored by: CSS-Tricks

Prevent Page Scrolling When a Modal is Open

Please stop me if you've heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal. That's because modals are elements on a page just like any other.

Authored by: CSS-Tricks

13 GraphQL Tools and Libraries You Should Know in 2019

GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015. On 7 November 2018, it was moved to the GraphQL Foundation, hosted by the Linux Foundation. Following this, a rich vibrant ecosystem began to grow around it as GraphQL became increasingly adopted.

Authored by: Bit

Functional Programming

Functional JavaScript: Five ways to calculate an average with array reduce

The JavaScript reduce array method seems to give people trouble. Part of the reason is that many tutorials start out using reduce only with numbers. So I wrote a previous article about the many other things you can do with reduce that don't involve arithmetic. But what if you do need to work with numbers?

Authored by: James Sinclair

Elm and why it's not quite ready yet

Who knows - probably? That's not the point of this article - I am not going to talk about what Elm could be, I am going to tell you what it is today. Elm is a functional language that compiles to...

Authored by: Bit