JSK Weekly - June 03, 2020

Creating a Master-Detail View Is Easier with Blazor DataGrid

Having a tough time dealing with or displaying a huge volume of interrelated data in a single data grid? If so, then you haven’t tried out our DataGrid. This webinar will walk you through visualizing data in a master-detail hierarchy with a single grid view in Blazor.

Authored by: Syncfusion

4 Ways to Override Material UI Styles

Material UI offers more than just a single way to override its styling. That's great for us but it can also be very confusing. In this post, I'll do my best to clear up things and end the confusion.

Authored by: Bit

Amazon Interview Question: Unique Staircase Combinations

Given a staircase with n number of steps and provided you can only climb 1 or 2 steps at a time, write a function that returns the number of unique ways to climb the staircase. For e.g. If n is 4, then the answer is 5 unique ways to climb.

Authored by: Angad Singh

Dead-simple Loading Progress Bars with PACE.js

A few years ago, when I started coding, I remember unsuccessfully and desperately trying to code a progress bar in javascript for my website. I gave up. Now, some years later, I've come across this library that does exactly this. I couldn't help but share it with you. So this is it.

Authored by: Frontend Weekly

GraphQL - What, Why and How

In this post, I am going to explain what problems GraphQL solves, setting up of a basic GraphQL project using graphql-express, what are root types and how to best structure the code in GraphQL projects. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

Authored by: Bit

#15 Data Structures with JS examples: Sets

This article belongs to the JS Data Structures series, which contains these articles: Set are a collection of sequential and unique elements, this structure doesn't allow adding duplicate values, we have several examples of sets: The natural numbers {0, 1, 2, 3, 4, 5, 6, 7, 8 ...} The followers/following list in any social network Some list with tags in blogs A shopping list A to-do list with unique items This article will cover the following content: Let's create a function that will allow us to output only the public Sets methods.

Authored by: Ricardo Luz

Code Deployment with Serverless Application in AWS

The new buzzword in town, Serverless, has been getting much attention from both the rookies and pros in the technology world. Due in part to how cloud vendors, such as the AWS or the Amazon Web Services have hyped it, from meetups to conferences to blog posts to just about anywhere.

Authored by: Bit

JavaScript Best Practices - Code Organization

JavaScript is a very forgiving language. It's easy to write code that runs but has issues in it. In this article, we'll look at how we should organize our JavaScript code. We should organize code that must be run in a specific order so that the dependencies are obvious.

Authored by: John Au-Yeung

Debouncing with JavaScript

Starting with some generic trivia, debouncing originates from the field of computer hardware. Debouncing is often employed in electronics to to avoid bouncing. Bouncing is the term used to describe multiple signals that trigger on contact between two metals.

Authored by: Sumit Mukhija

Async/Await without Try/Catch Block in JavaScript

When you have learned about JavaScript promises for the first time, you learned about the promise's method then and catch.

Authored by: Robin Wieruch

15 Best Javascript IDE & Code Editors in 2020 Review

There are a lot of them! There are substantial expensive IDEs with powerful features, and there are free ones. There are code editors with and without IDE-like functionality. JavaScript is widely used for frontend development nowadays. Being one of the most popular technologies, it gets quite a lot of attention from developers.

Authored by: Jelvix

Linked Lists for JavaScript Developers

Data structures are the building blocks of the code we write every day. Whether you've written them yourself or not, you're using them in one way or another: arrays, hash tables, trees, and more. There aren't that many resources for learning data structures using JavaScript, though.

Authored by: Dave Ceddia

DenoJS -A New Runtime for JavaScript

The creator of NodeJS has release a new runtime for JavaScript that is built for simplicity placing an empathises on security and being dependency free. Let's begin by pointing out that this not...

Authored by: Frontend Weekly

Never miss a switch case with TypeScript

Switch statements are sometimes considered a code smell, but when they do make sense to use, you'd better make sure you don't forget a single case. Luckily, TypeScript can help. In this article, I won't discuss the reasons why you should avoid switch statements in your applications (e.g., they may easily violate the DRY and Open/Closed principles, may introduce subtle bugs if you forget a break, etc) .

Authored by: Sébastien D.

How to Use TypeScript for AWS Lambda in 3 Steps

When we are using NodeJS as the runtime for AWS Lambdas, JavaScript is the default language. However, due to the lack of typing checking in JavaScript, from time to time, buggy code is deployed to Lambda inadvertently. Such as a small typo like this: exports.lambdaHandler = async (event, context) => { const queries =...

Authored by: gitconnected

7 Really Good Reasons to Use TypeScript

Brendan Eich originally developed JavaScript as a simple language for manipulating the Browser's DOM. Over the years, JavaScript has grown into a powerful, multi-paradigm programming language and the...

Authored by: Md Kamaruzzaman

4 Ways to Write More Effective TypeScript

TypeScript is a powerful language when you use it effectively. That means, as hard as it is, tearing away from the JavaScript mindset and adopting a TypeScript one. It means adopting a different personality when you write code, changing the way you think about the process and the way you express yourself through the syntax.

Authored by: JavaScript Kicks

Attempting To Improve Rendering Performance Of A Large List View In AngularJS 1.2.22

Ben Nadel looks at the poor rendering performance of a large list view in AngularJS 1.2.22; how he identified some of the bottlenecks using Chrome's Performance Profiler; and what changes he made to vastly improve the rendering of the view.

Authored by: Ben Nadel

How To Create Better Angular Templates With Pug

Pug is a template engine that allows you to write cleaner templates with less repetition. In this article, Zara Cooper explains what Pug is and how you can use it in your Angular app.

Authored by: Smashing Magazine

Strongly typing your Angular Route data

As Angular projects grow, it's quite common to add data to your routes. Some of that data will be mandatory for all the routes, some not. But in any case, it's useful to strongly type your routes, just like the rest of your codebase.

Authored by: Sébastien D.

Transform an SVG into a React Component with SVGR

SVGs (Scalable Vector Graphics) are an XML-based vector images used to define 2D graphics. An SVG file has the .svg file extension. SVGs are used in websites/webpages to seamlessly integrate 2D graphics into HTML. Recently, with the rise of Web Frameworks (Svelte, React, Angular, React, etc) SVGs have been a major occurrence and now largely used to embed images in components as icons.

Authored by: Bit

Best free resources to learn React in 2020

Over recent years, React has grown to become the most popular and widely-used JavaScript UI library (or framework as some might call it) out there. And with this popularity came a lot of new opportunities for both fresh and mature web developers through tons of new jobs, offers, and other React-connected tasks that are currently flooding the market.

Authored by: areknawo

How to Add Search to a React App with Fuse.js

Search is a powerful way to give people visiting your site a way to find the content that's most important to them. But often it's really challenging to figure out the rules and logic to make that happen. How can we can use fuse.js to add search to our apps?

Authored by: freeCodeCamp.org

Creating your Second React Application

If you built the productlister in Creating You First React Application use this as a staring point. If you did not, please refer to Creating Your First React Application and either follow through it or just grab the code at the bottom of the article.

Authored by: Gravity Well

Building with React for All Platforms: Top Frameworks and Tools

And, here my published components are used for a new Gatsby static blog: A static site is a website that provides a fixed content, usually rendered from markup languages like markdown into HTML. Static site gained popularity because it requires no request to the back-end to retrieve content from the database.

Authored by: Bit

Theming React Applications with CSS Variables and React-Redux

My name is Victor and I currently work as a React Developer and I must say, I love love React. It's such a beautiful library. (Yes, React is a Library, Not a Framework, a Library). Recently I was tasked to come up with a Proof of Concept(POC) for a customized interface using React, SCSS and CSS modules.

Authored by: Bit

Publish and Reuse React Components to Build Gatsby Sites Faster

Reusing components between Gatsby sites is a great way to deliver faster and provide your users with a consistent look and feel at every touchpoint. In this demo, I'll use Bit to publish React components from a marketing site built with Gatsby . I'll then use my published components to quickly compose a brand new marketing page.

Authored by: Bit

Ultimate guide to web scraping using Node.js and Puppeteer.

In this post, we'll learn to scrape web pages using browser automation with JavaScript. We'll be using puppeteer for this. Puppeteer is a Node library API that allows us to control headless Chrome. Headless Chrome is a way to run the Chrome Browser without actually running Chrome.

Authored by: Scrapingdog

Parsing JSON Files from a Remote URL with Node, JSONStream and Hyperquest

Working with large data files can be tough and cause a bottleneck within your application. We can't just simply load the file all at once and expect everything to work. We need to iterate over the data and parse it in chunks.

Authored by: Jack Whiting

JavaScript Charting Library AnyChart 8.8.0 Released with New Cool Data Visualization Features

AnyChart JS has received several new out-of-the-box features designed to further facilitate visualizing data for websites and apps in an insightful manner. The focus of the new major update is on streamlining customization of Gantt charts. For example, now it's easy to visualize weekends, holidays and nonworking time; add the start and end markers to tasks; display milestones in resource charts; define what the mouse wheel does; configure the fiscal year timeline shift; and more. Also released are improvements for basic, time-series (and stock) charts, and maps.

Learn all about AnyChart 8.8.0 in the AnyChart blog.

Authored by: Andrey Khachaturov

How A Single JavaScript Library Can Break The Internet In Two Lines Of Code

Almost everyone who develops JavaScript is aware of the 2016 "unpublish-disaster" where one developer yanked all his repositories from NPM and broke the internet. If you have never heard about it give it a read, it's quite fascinating how fragile the things we rely on often are.

Authored by: JavaScript Kicks

Error handling for express.js applications

In the above example, if you send a get request to /someroute route 'Request made' will be logged on the console. The above image explains what is a controller and what is middleware. When a request is received on a particular route, middleware-1,2 and 3 gets called before the controller for that route is called.

Authored by: JavaScript in Plain English

Custom Errors in JavaScript

There are two error handling scenarios in JavaScript. Either an error is thrown from a third-party (e.g. library, database, API) or you want to throw an error yourself. While you have the error at your hands for the former, for the latter you need to new it yourself: Sometimes you want to throw custom errors though.

Authored by: Robin Wieruch

How to use React Testing Library Tutorial

React Testing Library (RTL) by Kent C. Dodds got released as alternative to Airbnb's Enzyme. While Enzyme gives React developers utilities to test internals of React components, React Testing Library takes a step back and questions us "how to test React components to get full confidence in our React components": Rather than testing a component's implementation details, React Testing Library puts the developer in the shoes of an end user of an React application.

Authored by: Robin Wieruch

JavaScript Anti Patterns - Wrappers and Functions

JavaScript lets us do a lot of things. It's sometimes too forgiving in its syntax. In this article, we'll look at some antipatterns that we should avoid when we're defining and using wrappers and functions. JavaScript comes with a set of primitive wrappers. They include Number() , String() , and Boolean() constructors.

Authored by: John Au-Yeung

Conquering Recursive Functions To Be A Better Developer

Should you genuinely care about learning recursion? The answer is " Yes". Because it's honestly everywhere. If you write JavaScript, then JSON.parse() or JSON.stringify() use it. And so DOM traversal algorithms and getElementById(). It's something that pops up in coding interviews. And I didn't even mention more complex data-structures, or how it eases some looping operations.

Authored by: Piero Borrelli