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."
General
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
JavaScript
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
TypeScript
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
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
React
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
Vue
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
Node.js
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