JSK Weekly - June 09, 2021

Variety is the spice of life, or so some people say. But is variety the spice of developers? Well, a fairly new JavaScript alternative is under the microscope this week, with Fernando Doglio's "Yet Another JavaScript Alternative: ReScript" on Bits and Pieces.


General

How to Use Environment Variables in VanillaJS

In this article, you will learn about environment variables in Vanilla JavaScript. You'll also learn how to serve API keys to your application through the Netlify build command. What are JavaScript environment variables?Environment variables are very common when you're using JavaScript frameworks like React or Vue for creating frontend

Authored by: aoa🚀

Sharing Types Between Backend and Frontend with the BFF Pattern

A contract between a back-end service and a front-end consumer (or client) is usually everything there is to join both worlds. That contract can take the form of a REST API specification, a GraphQL endpoint, or anything really, as long as it tells both parties what to expect from the other.

Authored by: Bit

A Guide to Nested Promises, Anti-Pattern, and Alternatives

Promise in JavaScript is a popular design pattern used to handle asynchronous tasks in Node.js. It can take care of parallel/serial execution of many tasks along with their chaining rules. In my...

Authored by: JavaScript In Plain English

How to import JSON files in ES modules

If you're using EcmaScript modules, you probably know the problem that you can't "just" import JSON files. To import and load a JSON file in an ES module, you have to do a "window.fetch dance" to request the file and parse it yourself. It's not great... But there's hope!

Authored by: stefan judis


JavaScript

Request data with prompt in JavaScript

After having published several articles about how to manipulate arrays and dates, today I will publish a post that some... | Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.

Authored by: MA-NO WebDesign&Dev

How to Get the Current Date in JavaScript

Whether you are creating a daily routine app, your own blog, or most any other type of dynamic web app, you will probably need to work with dates. In this article, we're going to learn how to get the current date in JavaScript, so you can successfully develop your applications.

Authored by: StackAbuse

A Case for Compile to JavaScript Interface Frameworks

Today, web frameworks like React and Vue are extremely popular for creating modern web applications, and it is for a good reason. They help make pieces of code into reusable components and make it easy to update based on data using declarative markup.

Authored by: JavaScript In Plain English

Yet Another Javascript Alternative: ReScript

Really, what makes it different from all alternatives? Like many of them, it's an opinionated version of what JavaScript with a strongly typed system should look like. According to their website (and from the tests I've made myself), the type system is: Better than Typescript's because it's simpler and inferred.

Authored by: Bit

JavaScript Async/Await Tutorial - Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦

Today we're going to build and run an ice cream shop and learn asynchronous JavaScript at the same time. Along the way, you'll learn how to use: CallbacksPromisesAsync / AwaitHere's what we'll cover in this article:What is Asynchronous JavaScript?Synchronous vs Asynchronous JavaScriptHow Callbacks Work in JavaScriptHow Promises Work in

Authored by: JoyShaheb

Cool JavaScript Operators You Should Know

I code a lot in JavaScript, be it at work or for my personal projects. I usually came across situations where I have to write many boilerplate codes to tackle them. For example, checking valid references, null/undefined handling. But recently came across some JavaScript operators who made my work a lot easier, and I could write much cleaner code with their help.

Authored by: JavaScript In Plain English

Awesome javascript one-liners to look like a pro

Learn some great one-liners to use on your next project Javascript syntax and built-in methods allow us to cut down a lot of unnecessary lines in our code and write short, easily readable code. In this post, we are taking this simplicity another step forward to see where you can write one-line solutions to some common use cases and problems you'd encounter in web development.

Authored by: livecodestream

How to Use Closures in JavaScript - A Beginner's Guide

Closures are a confusing JavaScript concept to learn, because it's hard to see how they're actually used. Unlike other concepts such as functions, variables, and objects, you don't always use closures conscientiously and directly. You don't say: Oh! Here I will use a closure as a solution. But at the

Authored by: Matías Hernández Arellano

Design Patterns in JavaScript

When we start developing applications we come across various types of problems. We solve these problems by ourselves or by consulting others. But when our applications grow in size and complexity, it might become difficult to tackle the problems that arise. Moreover, these problems became so common that developers came up with a general solution on how to tackle these problems.

Authored by: Bit


TypeScript

Learn TypeScript Basics in this Beginner's Guide

TypeScript has taken the development world by storm. No wonder it has over 15 million weekly downloads on npm. But what is TypeScript, and what do you need to know about it? In this article, I am going answer those questions. By the end you'll have a grasp of the

Authored by: Joel 🛡


React

A Bird's Eye View into React: What is it and How Does it Work?

Let's say it's your job to teach React! What a fun challenge, there's quite a bit of complexity to unfold, and at the same time React is a game-changer and excellent to learn. My goal is to introduce React, what it is and begin to give you a birds-eye view into understanding its ins and out.

Authored by: Alyssa Easterly

Building an online store with React, AWS, and Stripe

Nowadays, Online Book Stores are gaining enormous popularity. If you plan to develop one, there are many technology choices you need to make. What if someone helps you make those choices and provide a step by step guide to implement one using React and Serverless technologies?

Authored by: Bit

How to Memoize with React.useMemo()

From time to time in your React component can perform some expensive calculations. For example, given a big list of employees and a search query, the component should filter the employees' names by that query. In such cases, with care, you can try to improve the performance of your components using the memoization technique.

Authored by: Dmitri Pavlutin

React Table with server-side Data

In this tutorial, I want to show you how to use React Table Library for server-side data featuring examples of server-side pagination, server-side search & filter, and server-side sort. Let's start with the foundation by installing React Table Library via your command line: We will use the feature rich Hacker News API for fetching server-side data, but also for performing server-side operations like paging, searching/filtering, and sorting.

Authored by: Robin Wieruch

Deploy React SSR to Production

This is the sequel to Intro to React Server Side Rendering, so check that out if you haven't already. Let's deploy a basic React SSR app on Google Cloud Platform (GCP). In this article, I'll deploy a Web Application Server, upload webpack bundles to Cloud Storage, and serve those bundles via CDN.

Authored by: Suhan Wijaya


Vue

Managing Shared State In Vue 3

Writing large-scale Vue applications can be a challenge. In this article, Shawn Wildermuth dives into the pros and cons of approaches like factories, shared objects, and using Vuex. He also explains what is coming in Vuex 5.0 that might change how we all use shared state in Vue 3.

Authored by: Smashing Magazine

How to Migrate from Vue v.2 to Vue v.3 with a Simple Example Project

What is Vue.js? Vue.js is a progressive JavaScript frontend framework written by Evan You. It's one of the most powerful and easy to learn frameworks, and it has over 9.5 million downloads per month. In September 2020, Vue 3 core was released. The new Vue.js release

Authored by: Fabio

Vue Js Get Selected Value from Selected Dropdown Tutorial - positronX.io

Vue js get selected value from select box tutorial; Throughout this quick tutorial, you will come to know how to easily get selected value of a select dropdown in Vue Js using a simple technique. Select box is an awesome UI element; it is a horizontal box that allows your site visitors to choose a [...]

Authored by: Digamber Singh

How To Build A Geocoding App In Vue.js Using Mapbox

In this guide, we'll take a general look at the concepts of forward geocoding and reverse geocoding. We will build a mini-app that applies these concepts to display specific locations, using Mapbox and Vue.js 2.6.11 to achieve this. Pinpoint accuracy and modularity are among the perks that make geocodes the perfect means of finding a particular location.

Authored by: Smashing Magazine

Why Migrating to Vue.js From AngularJS is the Best Thing to Do

We can see that recently the popularity of frameworks like React, Vue, and Angular is making huge amounts of gain in leaps and bounds. In the past, I did not find any right reason for the lack of popularity of these frameworks.

Authored by: JavaScript In Plain English


Node.js

4 NPM Alternatives: Best JS Package Managers and Publishing Tools

Bit is commonly used in the fronted world for components (due to how easy it makes it to publish many small packages), but works just as well - and even better!- for node modules and any reusable JS logic or code unit.

Authored by: Bit


Libraries and Tools

Top React PDF Libraries in 2021

Today, many web applications provide inbuilt PDF viewing options to their users. However, choosing one isn't easy since they have far more capabilities than just showing a PDF. So, in this article, I will evaluate 5 PDF Viewer Libraries for React with feature comparisons to help you choose the best one for your requirement.

Authored by: Bit

Socket Libraries for Your Pub/Sub Architecture

So you are looking to implement a pub/sub architecture and clearly, Redis and Kafka blew right across your use-case, because if they didn't, why are you even here? So you are now looking to implement this architecture natively for your project using sockets and you're confused about which library to choose.

Authored by: JavaScript In Plain English

Introduction to Framer Motion for React

Framer Motion is a production-ready motion library to create animations using React. As a web developer, I found it very exciting as I can create animations using technologies that I'm already familiar with. So, in this article, I will put Framer Motion to test while discussing its core features and examples with React, React Hooks, and Styled Components.

Authored by: Bit


Functional Programming

Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo. In part 1 we got an overview of trigonometry and learnt how we can use trigonometric functions in Sass. But for dynamic variables, we would be wise to move our calculations into JavaScript.

Authored by: Codrops

All You Need to Know About Higher-Order Functions in JavaScript

As the name suggests, the map() method is used to map the values of an existing array to new values and it pushes that new values to a new array and it returns that new array. Now map() also takes a callback function and hence it is known as higher-order function.

Authored by: RAHUL





0 comments