JSK Weekly - June 25, 2020

These last few months have seen quite an unprecedented surge in hacking attacks and whether it's just because they've had more time on their hands or because more inexperienced people are being forced into online living, it's never a waste to review security issues and best practices. To that end, Mahdhi Rezvi helps in understanding XSS & CSRF in "JavaScript Security Issues and Best Practices" on Bits and Pieces.

In How To news this week, Dwayne Charrington shows us to How To Deploy Aurelia 2 Apps To GitHub Pages, Girish Ramloul implements graph algorithms in "How to Implement 8 Essential Graph Algorithms in JavaScript" and Dmitri Pavlutin gets detailed in "How to Get the Screen, Window, and Web Page Sizes in JavaScript."


Blazor SSRS Report Viewer Component using Bold Reports

Yes, you read it right, we have provided a way to use Bold Report Viewer component in Blazor apps. In this blog post, we will walk you through integrating Bold Reports JavaScript Report Viewer control into your Blazor apps.

Authored by: Syncfusion

Why Frontend Developers Choose Gatsby Over Traditional CMS

Today, having a modern and attractive website is at the forefront of any business. Most of these websites are rich with content and provoking user interactions. You will find more unique designs, timely updated never than before. When we think about dynamic content and websites, its a no surprise that Content Management Systems (CMSs) become the best suited for the job.

Authored by: Bit

How to Count Objects in an Array

Knowing how to quickly iterate through an array and count objects is deceptively simple. The length() method will tell you the total number of values in the array, but what if you only want to count those values based on certain conditions?

Authored by: freeCodeCamp.org

Start Using forEach() and map() with DOM Selections

Memo to self: I'm working with the DOM (Document Object Model). I need to select all the elements in the document. Then I need to iterate over the results to change each element in some way. I've done this before. My first instinct is to reach for the trusty ol' for loop...

Authored by: Dave Gray

ECMAScript 2020 biggest new features

The official release of ECMAScript 2020 is upon us - time to find out what it brings to the table! πŸ˜‰ #JavaScript #JS #WebDevelopment #WebDev #ECMAScript #ES2020 #TypeScript

Authored by: areknawo

How a pool of web workers helped to solve the UI performance issue?

How a pool of Web workers helped to solve a UI performance issue? Do you know we can achieve multi-threading in javascript with the help of HTML Web Workers API? A web worker is a JavaScript that runs in the background, independently of other scripts.

Authored by: Aatif Bandey

Gatsby E-Commerce Recipe: Integrate a Shopping Cart in a Few Steps

In a rush? Skip to tutorial or how to use our e-commerce recipe. No tool in the Jamstack ecosystem has made more steps towards an optimal developer experience than Gatsby. What started as a simple, albeit performant, static site generator is today so much more than that.

Authored by: Snipcart

How Much Does it Cost to Develop Any Mobile App in 2020?

With approximately five million applications available on various OSs, including Android, iOS, and others, it is clearly portraying the increasing competition between businesses and different applications. Developing a mobile app or creating a digital presence for your brand has become an urgent need of an hour, and organizations have clearly understood this thing.

Authored by: Frontend Weekly

Refactoring optional chaining into a large codebase: lessons learned

Now that optional chaining is supported across the board, I decided to finally refactor Mavo to use it (yes, yes, we do provide a transpiled version as well for older browsers, settle down). This is a moment I have been waiting for a long time, as I think optional chaining is the single most substantial JS syntax improvement since arrow functions and template strings.

Authored by: Lea Verou

Using the Priority Hints API to Prioritize Network Requests

The Priority Hints API gives developers a way to communicate to the browser the importance of a resource to the user experience. The browser may take this signal into consideration when prioritizing the request (as you would expect, browsers have their own default prioritization of resources).

Authored by: Bit


How To Build A Presentation Using HTML, CSS, & JavaScript

The process of conceiving and constructing a presentation is often hard.Sometimes we're stuck with Keynote or PowerPoint, and the templates... | 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

7 Interesting JavaScript Features in ES2020 That You Should Know - Kriss

The world of web development moves fast, particularly in the JavaScript ecosystem. New features, frameworks, and libraries are continually emerging, and the minute you stop learning is the minute your skillset starts to become obsolete. One major part of keeping your JavaScript skills sharp is staying current on the latest features in JavaScript.

Authored by: kris

Constructors vs Literals in JavaScript

In JavaScript, we do have the freedom to get the same result in different ways. We can create strings, numbers, objects, arrays, etc. values using both constructors and literals approach. You can get the same values using any of those approaches. However, there are still some differences to know which might be useful to avoid runtime bugs.

Authored by: Raj Maharjan

JavaScript Security Issues and Best Practices

Cross-Site Scripting is one of the most common browser-side vulnerabilities. XSS in itself is a threat that is brought about by the internet security weaknesses of client-side scripting languages, such as HTML and JavaScript. In XSS, attackers are able to manipulate legitimate but vulnerable web applications into performing malicious tasks.

Authored by: Mahdhi Rezvi

How to Get the Screen, Window, and Web Page Sizes in JavaScript

To detect whether the browser window is in landscape or portrait mode, you can compare the browser window's width and height. But from my experience it's easy to get confused in the bunch of sizes: screen, window, web page sizes. How are these sizes defined, and, importantly, how to access them is what I'm going to discuss in this post.

Authored by: Dmitri Pavlutin

JavaScript Shorthand Coding Techniques

Anyone can publish on Medium per our Policies, but we don't fact-check every story. For more info about the coronavirus, see cdc.gov. Evaluation Shorthand This might be meaningless, but worth a mention. When doing "if checks", assignment operators can sometimes be omitted.

Authored by: Frontend Weekly

How to Implement 8 Essential Graph Algorithms in JavaScript

In this article, I will implement 8 graph algorithms that explore the search and combinatorial problems (traversals, shortest path and matching) of graphs in JavaScript. The problems are borrowed from the book, Elements of Programming Interviews in Java [https://www.google.com/books/edition/Elements_of_Programming_Interviews_in_Ja/ux3PCwAAQBAJ?hl=en&gbpv=0] .

Authored by: freeCodeCamp.org


Understanding Mixins in TypeScript

One of the limitations imposed by TypeScript when it comes to class inheritance is that you can only extend a single class at a time. In most normal cases this is not a problem, but if you're working with a complex enough architecture, you might find yourself a bit constrained by the language.

Authored by: Bit


Angular- Getting started

Hi all, This is my first post on Angular . I wish to do a post series of angular. I hope it will be a funny journey for both you and me.😊 Before dive in to deep, let us see what is Angular ?Angular...

Authored by: Frontend Weekly


Lazy Loading Images in React for Better Performance

In some cases, we need to load a list that contains a lot of images on a single page. Most of the images not even visible on the screen when it is loaded. We need to scroll down to see them. By...

Authored by: Muhammad Naufal

React Visual Editors in 2020

React is already known as a sort-of "universal language" thanks to react-dom and react-native but recently we've seen an explosion of frameworks and tools that make it possible to build with React for every device and platform. React is more than a JavaScript library. It is a philosophy and methodology.

Authored by: Bit

Optimize Your React App with React.memo

You would have noticed that Table component gets re-rendered anytime a state update happens in App component. It makes sense for Table component to re-render when the houseId state changes but it also re-renders when the theme state changes. We can optimize the Table component by re-rendering it only when houseId state changes.

Authored by: Bit


How To Deploy Aurelia 2 Apps To GitHub Pages (gh-pages) - I Like Kill Nerds

You have yourself an Aurelia app (or you will soon), and you want to host it on GitHub Pages because GitHub provides a generous free hosting solution that gets powered from the Git repository itself. Fortunately, the process couldn't be more straightforward. A lot of this post will apply to other frameworks and libraries besides [...]

Authored by: Dwayne Charrington


Vue Best Practices- Props, Spacing, and Naming

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we'll look at some best practices for props, spacing, and naming. In Vue apps, props should be named in a consistent way. They should be valid JavaScript identifier names in camelCase.

Authored by: John Au-Yeung


πŸ”₯Free book and video course πŸ”₯- Deploying node.js applications

"Deploying Node.js" is a free hands-on book and video course that teaches you how to manage, secure, provision and deploy node.js servers and applications. Learn how to horizontally scale your multi-tier applications over multiple servers, database installation and backups, production best practices.

Authored by: Kati Frantz

6 Most Useful NPM commands that you may do not know

npm view to view information about the package $ npm view axios Get only the version information about the axios (installed package): $ npm view axios version > 0.19.2 Executable commands can be searched visa -h option $ npm -h Especially, npm -h is a command to get a quick help for the specific .

Authored by: JavaScript in Plain English

Libraries and Tools

An Introduction to Regex In JavaScript

Regex, short for Regular Expressions are useful tools to find matching patterns in a string. They can be used to validate text from user input, check formatting of the string (like an email or a 12-digit phone number) and allows the search for a certain pattern of words or numbers in a string.

Authored by: JavaScript Kicks

10 libraries for machine learning in JavaScript

JavaScript is currently one of the most popular programming languages. Its main application is in web applications, used to give... | 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


Visual testing for React components using open source tools

Comparing React components pixel by pixel to catch style problems Let's take a look at a modern React application like this Sudoku game that you can play online at https://sudoku-raravi.now.sh/. The game is nicely done. There are different difficulty levels, game modes and it looks very polished.

Authored by: Gleb Bahmutov