JSK Weekly - November 12, 2020

When talking about side effects and injections, it's not often people think of anything but the medical industry, except for developers of course. Functional programming was quite the hot topic this week! Let's kick off with Menasria Hafidh's "JavaScript Pure Functions and Side Effects" followed closely with Martin Muzatko walking us through "7 Ways to do Dependency Injection in Functional JavaScript without a Framework".

Popular this week: Juan Cruz Martinez's "What I Learned after 4 Years of React Development."


General

4 Ways to Communicate Across Browser Tabs in Realtime

Over the years, Web Browser capabilities have ever increased due to the demands coming from web applications. As a result, we can find multiple ways of achieving similar functionality. One such...

Authored by: Bit

Merkur - why we built another microfrontend framework

(And by "we" I mean "our Frontend Development team at Seznam ". Hi, folks! Anyway, moving on...)

Authored by: Anna Frankova

5 Reasons to Use TypeScript with React

Over the past few years, TypeScript has gain immense popularity among frontend developers. Improved maintainability, code consistency, and future browser support are few reasons behind its success...

Authored by: Bit

35 Awesome Dev People to Follow on YouTube 🔥

Lots of awesome crash-courses on various tech. Usually follows 20/80 rule on theory and practical side respectively. Lately some awesome guest hosts on the channel. High-quality content in various technologies cut down into short videos on a particular topic. Awesome playlists. Wide range of tech topics. The content is always well researched.

Authored by: Madza

KISS, SOLID, YAGNI And Other Fun Acronyms

I've been working in the Software Development industry for over 17 years and I've seen my share of acronyms fly by, some of them making more sense than others, some of them forming funnier words than others.

Authored by: Bit

How to SASS with Webpack 5 - Setup Tutorial

If you happen to have a custom Webpack setup, you may be wondering how to set up SASS with Webpack. This short tutorial walks you through the process.

Authored by: Robin Wieruch

How does the event loop work?

The event loop and your code talk from WarsawJS On august 2020 I spoke at WarsawJS, explaining about the event loop and how it works. I hope you will enjoy this talk.

Authored by: YonatanKra

How to Create a Commenting Engine with Next.js and Sanity

One of the arguments against the Jamstack approach for building websites is that developing features gets complex and often requires a number of other services. Take commenting, for example. To set up commenting for a Jamstack site, you often need a third-party solution such as Disqus, Facebook, or even just a separate database service.

Authored by: CSS-Tricks

Front-End Web Development Best Practices From My Experience in the Industry

A few months ago, I started working on a one-year web application development project, and I realized how many developers are not quite aware of the best industrial practices in the front-end development of web apps. Even I...

Authored by: JavaScript Kicks


JavaScript

What is Metaprogramming in JavaScript? In English, please.

JavaScript has many useful features that most developers know about. At the same time, there are some hidden gems that can solve really challenging problems if you're aware of them. Metaprogramming in JavaScript is one such concept that many of us may not be familiar with. In this article, we

Authored by: Tapas Adhikary

How Child Classes and Inheritance work in JavaScript

Hi y'all, I am back today with the second part of my introduction to JavaScript Classes. Today, I am going to cover child classes, inheritance, the and the keywords. So, without further ado, let's get this party started. In my last post, I compared JavaScript classes to Chipotle.

Authored by: Joe Haefling

Understanding JavaScript IIFEs Like a Boss

IIFE is the abbreviation for Immediately Invoked Function Expression. Although the term looks long and confusing, it is a quite simple concept. You can easily understand this concept by understanding...

Authored by: Bit

Operator Lookup - Search JavaScript operators

Friendly tutorials for developers. Focus on React, Gatsby, CSS, and animation.

Authored by: Josh Comeau

A brief introduction to Classes and Instances in JavaScript

When I first started working with JavaScript, I had a hard time understanding classes. I didn't understand what they were, how they worked, or why you would use them; in this article, I am going to cover just that.

Authored by: Joe Haefling


TypeScript

How to Set Up Next JS with TypeScript [2020] | Creative Designs Guru

Getting Started with TypeScript on Nextjs project. A tutorial on how to install TypeScript on your React components.

Authored by: JavaScript Kicks

What is the "?." JavaScript/TypeScript operator · Code with Hugo

In JavaScript and TypeScript, the “?.” operator is called optional chaining. It works in a similar fashion to the . (chaining

Authored by: Hugo Di Francesco

Terraform with TypeScript

Thanks to the CLI, it is possible to create a basic boilerplate: mkdir typescript-k8s && cd $_ cdktf init --template=typescript --local The cdktf init command is generating the necessary files to get started with: cdktf.json: containing the CDKTF configuration stating explicitly the providers to use as well (they can be both official or community provided ones - last ones need to be manually installed though).

Authored by: Francesco Vitullo


React

Thoughts on device based code split in React

Your company hired a new designer who got crazy with the company's web site. A mobile version is born and everybody expects you to code it. Here are some thoughts on the challenge.

Authored by: Miroslav Nikolov ⚛️

What I Learned after 4 Years of React Development

Today I was making some reflections on what challenges and new things I learned in the last few years, specifically related to programming or computer science in general. It is fair to say that I explored many new things, from IoT, computer vision, deep learning, blockchain development, and more on the programming side.

Authored by: livecodestream

Understanding React Portals

When we use a modal inside a particular element (a parent component), the modal's height and width will be inherited from the component in which the modal resides. So there is a possibility that the modal will be cropped and not be shown properly in the application.

Authored by: Bit

React useRef can be used for more than you think

Imagine a scenario where we need to log something to console at a particular interval when a particular component is mounted. Let me do this in a class component first, We store the timer in an instance variable . We could also have stored the timer in the state but it would cause an extra render.

Authored by: DEB

React Forms Tutorial: How to Access Input Values, Validate, and Submit Forms

HTML elements like headings , , paragraphs , or simple textual output are meant to display information. On the other side, the forms and input elements like , , collect information from the user. Working with forms and input fields requires more effort: you have to access input values, validate the form, submit form data, and handle submission result.

Authored by: Dmitri Pavlutin

Separation of concerns with custom React hooks

React is without a doubt one of the most popular front-end JavaScript frameworks / UI libraries around. However, it doesn't mean that it's the best or that everyone likes it. Among some of the more technical reasons behind people disliking React is, surprisingly, one of its biggest features as well - JSX.

Authored by: areknawo


Vue

Inspecting a Vue application in production

The Vue.js devtools are great to use when in the process of developing a web application. However, once you deploy to production it no longer has access to the code it needs in order to work. So how can we inspect an application once released to production?

Authored by: Damian J Mullins


Node.js

Create and Deploy a Node.js/Express App for Free

Disclosure: I have no affiliation or investment in any company mentioned in this post. This is just my experience. I assume you have some experience with Node.js, Express and have signed up for a free Vercel account. Vercel (zeit) has been working fine for me for a while.

Authored by: Duc N.

ES2020 Optional Chaining and Dynamic Imports Are Game-Changers. Here's Why.

There are several notable features in the ES2020 release and I would love to highlight two of them in this article - Optional Chaining and Dynamic Imports. These two features would have saved me several lines of code and performance if I had used them earlier in my work.

Authored by: Bit

Bundling with Rollup

Whereas Webpack is great for building apps, Rollup is great for building libraries. Rollup supports ES modules out of the box. However, to support CommonJS, the following plugins are required: Install rollup: $ npm install rollup$ npx rollup --versionrollup v2.32.1 Create entry file index.js: $ echo "export default 'Hello, world!'" > index.js Initialize package.json: $ npm init --yes Add build script to package.json: The script compiles index.js to dist/bundle.js.

Authored by: JavaScript In Plain English

On Covid-19, GraphQL and AskQL

After writing about AskQL and how to use AskQL with nodejs, the obvious question that repeat itself was: How does it differ from GraphQL? In this article I will try to show the main benefits of AskQL by converting a simple GraphQL project into AskQL.

Authored by: YonatanKra


Libraries and Tools

JavaScript Tooling to the Rescue

Learn about some of the most important JavaScript tools that made JavaScript one of the best programming languages.

Authored by: livecodestream


Functional Programming

7 Ways to do Dependency Injection in Functional JavaScript without a Framework

Once you have created and maintained a couple of applications, you get to appreciate if a change is done quickly. This success is likely to not come by accident. You don't need to leave the success of writing maintainable software to chance.

Authored by: Martin Muzatko

React Functional Components, Props, and JSX - React.js Tutorial for Beginners

React is one of the most popular JavaScript libraries for building user interfaces. If you want to become a front-end developer or find a web development job, you would probably benefit from learning React in-depth. In this post, you're going to learn some of the basics of React like creating

Authored by: freeCodeCamp.org

Timeout Async Functions In Javascript Using A Promise - Talkinghightech

It's not a rare scenario where you need to invoke an asynchronous function that you expect to run in a reasonable period of time. If the function fails to return a value in the expected period of time then you should trigger an action such as dispelling to the user an error message, falling back to another backup function or just throwing a plain old good exception...

Authored by: Yoni Amishav

Traditional versus Arrow functions in JavaScript Classes

This is a spiritual sequel to this article. Create a class with a method using Traditional function like so. Let's call this Approach A. // APPROACH A class SomeClass { someMethod() { // Traditional function constructor() { this.someProp = 'someValue'; console.log(this.someProp); }} } Create an instance of that class.

Authored by: JavaScript In Plain English

JavaScript Pure Functions and Side Effects

Wondered what developers mean by the terms Pure Functions or Side Effects? And wonder why are they prevalent in the JavaScript ecosystem and pretty important to understand? In this article, I'm going to walk you through these terms of Pure Functions and Side Effects by defining what they are and why they're important to understand using code block examples.

Authored by: JavaScript In Plain English





0 comments