JSK Weekly - July 01, 2020

Right folks, we're midway. Also known as Resolution Renewal Day, a day to check in on how you've done with your NY Resolutions. Hopefully your days and moments have really counted thus far! Speaking of days and moments, CodingisLove tells us why they prefer a Day to a Moment in "DayJS, An excellent alternative to MomentJS."

In other news, Preet Shihn introduces RoughNotation, a small JavaScript library in "RoughNotation", Eric Elliot clues us in on simple code in "The Secret of Simple Code" and Syncfusion helps show us how to reach the hearts of users in "Easily Reach a Global Audience with Localization Support in Your Blazor Apps."


Easily Reach a Global Audience with Localization Support in Your Blazor Apps

"If you talk to a man in a language he understands, that goes to his head. If you talk to him in his language, that goes to his heart." - Nelson Mandela I hope your application, too, deserves to reach the hearts of its users! This is possible with localization support.

Authored by: Syncfusion

4 Methods to Search an Array

There are different methods in JavaScript that you can use to search for an item in an array. The use of these methods depends on your specific use case. For instance, do you want to get all items in an array that meet a specific condition?

Authored by: Sarah Chima

Selecting the Right Tool for Your Monorepo

Monorepos used to be thought of as a solution suitable only to large enterprises, but recently, it seems, the need for them has become apparent to teams of all sizes. This growth in demand has been met by the creation of numerous tools that offer simpler implementations for this type of code management architecture.

Authored by: Bit

How to use Webp format (.webp)

Here is what you need to learn about the WebP interface created by @ google to start using it today. Webp is a modern image format developed by Google that provides superior lossless and lossy compression for images on the web. Webs' lossless images are? 6% smaller in size compared to PNGs.

Authored by: saravanan raghul

The Secret of Simple Code

Is there a shortcut to becoming a 10x developer? Is there some magical secret that - if you only knew it - would unlock a whole new world of software development mastery and productivity for you? This is where the doubters are thinking "There are no shortcuts!

Authored by: Eric Elliott

Publishing your Deno modules using GitHub

With Deno's lack of package manager and intent of simply "linking to files anywhere on the internet", a lot of people in the community got nervous as to how insecure and unstable that approach could be (me included!).

Authored by: Bit


Higher Order Array Methods in JavaScript

Here are the most used array methods in JavaScript and I have curated in such a way that the official documentation of JavaScript is explained easily. Ok, grab a coffee and let's dive into the concepts. Executes the provided function for every element in the array.

Authored by: Kishore S 🤯

The Nine Most Common Mistakes Developers Make in JavaScript (and How to Fix Them)

JavaScript is a scripting language [https://en.wikipedia.org/wiki/Scripting_language] used in webpages to add functionality and interactivity. For a beginner coming from a different programming language, JavaScript is quite easy to understand. With a few tutorials, you should be able to get started with it right away. However, there are a few common mistakes that many beginner programmers make.

Authored by: Dipto karmakar

How to use fetch to make network calls in JavaScript?

I will be sharing bite sized learnings about JavaScript regularly in this series. Follow along with me as I re-learn JavaScript. This series will cover JS fundamentals, browsers, DOM, system design, domain architecture and frameworks. Fetch is an interface for calling a network request in JavaScript.

Authored by: shruti kapoor

JavaScript in SVGs

SVGs are such an amazing tool for creating custom fonts, animations, size-reduced graphics, and more. They're part HTML, part image, and all awesome. Many websites have moved toward SVG instead of JPG, GIF, and PNG due to the flexibility that SVG provides. Whats one example of that flexibility?

Authored by: David Walsh

Practical Use Cases of Sets in Javascript

For devs who are not familiar with Set, it is simply a group of definite, distinct objects. In layman terms, a set is a group of unordered unique elements. Think of Set as an array but containing...

Authored by: gitconnected


Angular Basics -Data Binding

Now is the time to look at one-way data binding types. Interpolation refers to embedding expressions into marked up text. By default, interpolation uses as its delimiter the double curly braces, {{ }} The following code snippets make an interpolation.

Authored by: Frontend Weekly


Exploring React Renders: Different ways a component gets re-rendered.

Render, it is the process of generating a final product output from a specific type of input. In React, render is the process of converting the JSX that you write into the DOM nodes, if the node is already present it updates the nodes according to the new data.

Authored by: Bit

Love-hate relationship with react hooks ❤️😏

React hooks! The new cool thing in the react eco-system right now! Its been just a year since the concept of react hooks has been introduced. Do you love react hooks or hate them? Let me share my experience with react hooks. I hated them in the beginning.

Authored by: Coding is Love

Implement Drag and Drop in a react app with react-beautiful-dnd

Lets import DragDropContext from react-beautiful-dnd in App.jsx. We need to wrap our component where we want to provide drag and drop. List component in our case. Only required prop to this is onDragEnd. We are providing an empty function for now. We will be updating the function later.

Authored by: Bikram Sutar

Drag and Drop Your React App with Webcodesk

Creating a complex single page application with React always involves a set of predictable steps. First, you start with a user story or business requirements. Then, you create several isolated components that you'll combine and present on the screen. From there, you write the code your data flow, mostly using Redux actions and reducers.

Authored by: Bit


Faster, better, cheaper, AureliaWeekly 2

I rewrote my site in Aurelia 2 and saved a fortune in cloud spend!

Authored by: Andreas Wänqvist


How to Make localStorage Reactive in Vue

Reactivity is one of Vue's greatest features. It is also one of the most mysterious if you don't know what it's doing behind the scenes. Like, why does it work with objects and arrays and not with other things, like localStorage? Let's answer that that question, and while we're at it, make Vue reactivity work with localStorage.

Authored by: CSS-Tricks

Laravel And Vuejs: Why Is This Couple Getting Popular for web development?

Why Should You Use Laravel With VueJS? Here are the benefits that you can have by integrating Laravel and VueJS in you web and app development.

Authored by: Frontend Weekly


Node to Deno First Impression

It has been a few months since Ryan Dahl, the same author of Node, announced the release of Deno 1.0. With the popularity of Node, Deno immediately captured the attention of the developer community...

Authored by: Bit

Libraries and Tools


A small JavaScript library to create and animate annotations on a web page Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.

Authored by: Preet Shihn

20 Data Table Libraries for JavaScript in 2020

The data grid library enables the manipulation of HTML tables with big sets of data, as well as provides extended features, such as custom sorts, complex conditional styles, advanced searches...

Authored by: Kapil Rastogi


An Intro to React Testing Library

React Testing Library (RTL) got released as an alternative to Airbnb's Enzyme. Unlike Enzyme, React Testing Library takes a step back and questions us "how to test React components to get full...

Authored by: JavaScript in Plain English

Functional Programming

Quick Guide to JavaScript Functions

This might be the reason why you came here. Arrow functions are great when it comes to simplifying our code and can help you write much cleaner shorter code. Let us take an example and compare arrow function with normal function.

Authored by: Frontend Weekly


Go faster with your own re-usable Blazor components

Take a look at any web application these days and you'll notice something… No matter what the sector, design or purpose, the "modern web app" generally consists of a few key UI elements or components. Even the most unusual, complex, visually interesting designs have some degree of consistent UI, with specific elements or components used and re-used throughout the application.

Authored by: Jon Hilton

DayJS, An excellent alternative to MomentJS

MomentJS has been the go-to library for many JS developers for quite some time for date formatting, parsing, and manipulating. It comes with very good features but also comes with some limitations. An excellent alternative to MomentJS is DayJS, a minimal library at just 2kB!

Authored by: Coding is Love