JSK Weekly - June 12, 2019

Let's kick this week's highlights off with one of our most popular stories from the last week: "The Role of JavaScript in the Modern Web", where Jim Rottinger takes us through how JavaScript makes websites stateful and enables dynamic web development.

Looking for some "new" titbits? Well this week won't disappoint with Nwose Lotanna writing up a storm with both "What's new in Tailwind CSS version 1.0" and "New Features in TypeScript You Didn’t Know Exist" on the Bits and Pieces blog as well as "What's new in Angular 8: Web worker support and more" and "Introducing React 16.8, featuring official support for Hooks" on the LogRocket blog.

Lastly, Kieran Kilbride-Singh goes in depth on "WebSockets vs Long Polling" on Ably Real Time and Justin Meyer walks us through a debugging tutorial in "CanJS Debugging Tutorial."


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

Build a GraphQL + React app with TypeScript Blog

GraphQL and TypeScript have both exploded in adoption, and when the two are combined with React, they create the ideal developer experience. GraphQL has transformed the way we think about APIs and utilizes an intuitive key/value pair matching where the client can request the exact data needed to display on a web page or in a mobile app screen.

Authored by: LogRocket

Software Application Layers And Responsibilities, 2019 Edition

Ben Nadel attempts to sum up his entire mental model for application architecture as of June 2019, including Controllers, Workflows, Entities, and Gateways. This is a topic he struggles with a great deal; and, continues to refine and codify over time. His only hope is that he is somewhat better today than he was yesterday.

Authored by: Ben Nadel


Accessing Nested Objects in JavaScript

Access nested objects in JavaScript without getting choked by 'cannot read property of undefined' error.

Authored by: Dineshkumar Pandiyan

The Role of JavaScript in the Modern Web

How JavaScript makes websites stateful and enables dynamic web development Even if you know next to nothing about web development, you have probably heard that it is, in some way, related to the programming language called JavaScript.

Authored by: Jim Rottinger

Tips for Good Communication in Software Development Teams

As programmers, we engage in conversations multiple times a day in different situations and sometimes these lead to conflicts. Let's see a few common scenarios we encounter every day and how our communication can lead to better and healthier workplaces. In my experience, a healthy workplace is also usually an efficient one.

Authored by: Bit


New Features in TypeScript You Didn't Know Exist

TypeScript is an open-source, strongly-typed, object-oriented compiled language developed and maintained by Microsoft, it is a superset of the very popular JavaScript that was built to bring static...

Authored by: Bit

Converting a JS library to TypeScript: Part 1

I've been wanting a project to dive into to help me learn TypeScript, and the other day on an issue for test-data-bot, someone asked if TypeScript definitions were available. I decided this was a good way for me to dive in and try converting a library to TS, and I decided to record it and share for anyone else wondering what the process looks like!

Authored by: Jack Franklin


Angular 8 Forms Tutorial | Angular Reactive and Template Forms Example

Angular 8 Forms Tutorial | Angular Reactive and Template Forms Example is today's topic. If you are new to Angular 8, then check out my Angular 8 Tutorial . If you do not know how to upgrade to Angular 8 via Angular CLI, then check out my Angular 8 Upgrade tutorial.

Authored by: KrunalDLathiya

Giving (click) Anchor Links Tab-Access Using A Directive In Angular 7.2.15

Ever since reading Accessibility For Everyone by Laura Kalbag, I've become much more aware of the accessibility failings in my own user interface (UI) architecture. One of the first things that jumped out at me was the fact that anchor links that use the (click) directive in Angular (and lack an href attribute) can't be accessed using the Tab key.

Authored by: Ben Nadel

What's new in Angular 8: Web worker support and more Blog

Angular 8 has arrived, and it includes updates to nearly every component of the platform. But what about the highly anticipated Ivy renderer? Find out here.

Authored by: LogRocket

Accessibility And Styled Anchor Links vs. Styled Buttons In Angular 7.2.15

After reading Accessibility For Everyone by Laura Kalbag, I've become more aware of the accessibility short-comings in my application interfaces. Of particular note is the fact that Anchor Links aren't keyboard accessible; at least, not by default.

Authored by: Ben Nadel


Windowing wars: react-virtualized vs. react-window

react-window is a complete rewrite of react-virtualized. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package smaller and faster. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible.

Authored by: LogRocket

React Native Components on GitHub for Smooth Development Process

Tons of libraries make the development process easier. This trend applies to React Native. A lot of libraries for React Native components are available on GitHub, free to use, and open source. Here a collection of components for UI, navigation, analytics, utilities, geolocation, internationalization, forms and etc.

Authored by: Shaleynikov

Introducing React 16.8, featuring official support for Hooks Blog

React now has more than 100 releases, and v16.8.0 officially introduces stable support for Hooks.

Authored by: LogRocket

Build our own React-Redux using useReducer and useContext Hooks

We always use the react-redux library in our React apps whenever we decide to include state management in our React app. The react-redux library makes the usage of the Redux library in React very easy. The library react-redux makes use of the Context API to pass store down to nesting components without the long props chaining.

Authored by: Bit

React useState with Callback

If you have used setState before, you may be missing a callback function for the useState hook. This tutorial explains how to implement it with useEffect ...

Authored by: Robin Wieruch


Cleaning up your Vue.js code with ES6+ Blog

ES6 was a big step forward for the web, and it introduced many new features that solve various pain points that exist for all JavaScript developers. But a few of its features are specifically suited to solve problems that arise when developing with Vue.js. This article will cover four of those Vue-specific features.

Authored by: LogRocket

Understanding Filters in Vue JS

Vue JS is a very progressive framework for building user interfaces created by Evan you and some community lovers with more than 121,000 stars on GitHub. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.

Authored by: Bit

What's new in NuxtJS 2.8 Blog

In this tutorial, we'll highlight the notable additions to the NuxtJS new release, NuxtJS 2.8.

Authored by: LogRocket


Introducing AwesomeConfig

AwesomeConfig is a powerful configuration system for building enterprise ready node.js applications. It provides a unified, transparent configuration object to your application based on configuration files or objects that you define. It includes support for conditional configuration based on external values like environment variables, hostname, or OS; variables to reference one part of your configuration from another; and lots more.

Authored by: arei

Libraries and Tools

A definitive guide to Redux vs. MobX Blog

One of the hardest problems to solve in large front-end applications is state management. While there are several approaches to solving state management problems, are two of the most popular external libraries used to address state management in front-end applications.

Authored by: LogRocket

CanJS Debugging Tutorial

This tutorial goes through many of CanJS's most useful debugging features; however, I'm submitting this story to JSK because I feel that two of its ideas need to be spread to other libraries. Specifically, I'd like to see other libraries:

  • Provide a useful stack trace that is able to specify what caused the current code to be run. Many state mechanisms get caught in the internals, making the native stack less useful.
  • Trace what observable values cause part of the DOM or other observables to change.

Authored by: Justin Meyer

What's new in Tailwind CSS version 1.0

Tailwind CSS is a highly customizable, low-level utility based CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. A lot of big companies like Algolia and Mozilla have adopted it, and it has also been used to build new startups like RightMessage and PingPing.

Authored by: Bit

Functional Programming

Extension Functions in Kotlin

Imagine that, somewhere in your code, you need to extend a class with new functionality. For most programming languages, your options would be to either derive a new class or make use of some kind of design pattern. But with Kotlin, things are different-we've got another option on the table.

Authored by: DiscoverSDK