JSK Weekly - July 21, 2021

Popular articles this week: "Conditional Hooks in React" by Robin Wieruch, "API vs. Microservices: The Complete Guide" on Snipcart and "5 Reasons to Use Tailwind CSS with React Native" by Viduni Wickramarachchi on Bits and Pieces.

In other news, Syncfusion Essential Studio 2021 Volume 2 is here! Check it out!


API vs. Microservices: The Complete Guide - Snipcart

Not so long ago, the technology used to build a website was quite simple. HTML, CSS, and JavaScript were all you needed in the good old days. And most of the time, you didn't even need the last one! But now, things are getting a bit more complex.

Authored by: Snipcart

Syncfusion Essential Studio 2021 Volume 2

Syncfusion is glad to announce the availability of Essential Studio 2021 Volume 2. This main release of 2021 brings exciting new features and controls to different platforms. This blog will provide a brief description of the major highlights of every platform.

Authored by: Syncfusion

Intro to Web Components: Vanilla JS

Many modern web apps today are built using components. While frameworks like React exist to add an implementation, web components seek to make those practices standardized and part of your browser. In this article, we'll touch on what web components are, how we can build them without a framework, and some limitations to keep in mind during development.

Authored by: Unicorn Utterances

Utilize JSDoc Comment Tags to Get the Most Out of VSCode's IntelliSense

JavaScript is a loosely typed and dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types: Visual Studio Code's IntelliSense will only work if it understands the type of your code.

Authored by: Dharmen Shah 😎


What is a Promise in JavaScript?

I had had difficulties in understanding promises when I had been learning them back in a few years. The problem was that most of the tutorials were solely describing the promise object, its methods, etc. But I don't care much about promises, I care about them as long as they make coding easier!

Authored by: Dmitri Pavlutin

You Can Do That With A JavaScript Data Grid?

In this article, you'll get to see some pretty groundbreaking things you can achieve with modern JavaScript grids and discover new ways to augment a data grid to make it engaging, responsive, and accessible. All this will be illustrated using Kendo UI Data Grids and their features.

Authored by: Smashing Magazine

I Made A JavaScript Single Page Application And This Is What I Learned

For the penultimate project in the Flatiron School software engineering program I had to create a single page application with JavaScript handling the frontend and Rails used as an API for the backend. These are the important things I want to convey to anyone else that is building something with this framework.

Authored by: JavaScript In Plain English

Changing the background color of page in JavaScript

In this tutorial, we are going to learn about how to change the background color of a webpage using JavaScript. To change the background color of a webpage, first we need to access the HTML element in JavaScript using the document.body property.

Authored by: Sai gowtham


Angular is Costing Companies Billions

I know I'm going to get hate-mail for writing this piece, but, so be it. Someone has got to finally say what many of us as experienced software engineers have been thinking for some time now. I've...

Authored by: JavaScript In Plain English


5 Reasons to Use Tailwind CSS with React Native

Tailwind CSS is an open-source utility-first CSS framework. It redefines the way you style applications by providing a variety of CSS classes. Using Tailwind CSS, you can style your applications without a single custom class name or a stylesheet. Furthermore, I found that it works exceptionally well with mobile applications based on React Native.

Authored by: Bit

Atomic Design with React Native

So what exactly is an Atomic Design and how can you link it with React Native? 🤔 Before that let us look at a parallel definition of what Atomic Design is. An atom is the smallest unit of ordinary matter that forms a chemical element.

Authored by: Karthik_B

5 Packages to Optimize and Speed Up Your React App During Development

Optimize your React App during the development stage using these packages and avoid issues during production. We keep on building apps without considering side effects due to time constraints and other factors. But sometimes, an app will cause major issues in live scenarios.

Authored by: Nilanth ⚡

Using the "useContext" Hook in React: A Simpler Alternative to Redux

React hooks provide our functional components with a lot more power - becoming a more preferred approach to building applications in recent times compared to class components. The useContext hook is no different, but it's also important to note that it operates a bit differently compared to some of the more common React hooks, such as useState and useEffect.

Authored by: JavaScript In Plain English

Conditional Hooks in React

Can you use conditional React Hooks in React components? Technically: No. However, if you know about how React Hooks work internally, you can make conditional hooks work for you. Let's take the following example where we start without any conditional hook: In this example, we are conditionally rendering a list component.

Authored by: Robin Wieruch

Libraries and Tools

Creating a Component Library

Bit's independent components are individually pushed to remote hosting and are published to a package registry (as standard packages). I'll discuss this workflow in the next sections. The frameworks/technologies that will be used to build your component library are pretty much already determined by your organization's existing projects or your team's set of skills.

Authored by: Bit


Testing React Native Navigation

How to confirm the navigation work in RN apps running through Expo. Let's take a React Native application that implements the app navigation using React Navigation packages. Our application first shows a home screen. The user can navigate to the Pokemon List screen, and then to an individual Pokemon card.

Authored by: Gleb Bahmutov

Test Feature Flags Using Cypress and Flagsmith

How to control the web application feature flags during end-to-end tests. This blog post teaches you how to control the feature flags provided by 3rd party services like Flagsmith, LaunchDarkly, Split, etc during end-to-end tests. I have created a small project on Flagsmith.com and added a single feature flag "feature_a".

Authored by: Gleb Bahmutov

Functional Programming

Setting the default parameter values for a JavaScript function

In this tutorial, we are going to learn about how to set default parameter values to a function in JavaScript. Default function parameters are introduced in es6, which help us to initialize the parameter with a default value. Note: In JavaScript, if we don't pass any value to function parameters, it will be initialized with a value undefined.

Authored by: Sai gowtham