JSK Weekly - June 17, 2020

Bring Full-Stack to the JAMstack with RedwoodJS

A Redwood application is split into two parts: a front-end and a back-end. The front-end part of the application is stored inside /web directory, while the back-end side lives inside /api directory. They are represented as two projects in a single repo that you can deploy separately.

Authored by: Bit

Simplistic static websites with Docking.js

Static websites are recently surging in popularity. Thanks to their very simple nature, they're not only easier to create but also cheaper to host, more secure, and have better SEO out-of-the-box when compared to dynamic or client-side rendered websites. Thus, it's only natural that we see more and more services, frameworks, and libraries dedicated to this sole purpose.

Authored by: areknawo

What I Learned from Developing a Google Doc Add-on in Two Weeks

We developed and published an open-sourced Google Doc Add-on named Referencer that helps automate cross-reference for figures, tables, and section titles in about two weeks. I learned something new from this short but fun experience, and want to share with others who are interested in building add-ons for GSuite products and tools (e.g., Google Docs and Sheets).

Authored by: Bit

Understanding ES Modules in Javascript

Modules are found in every programming language. It is a way to include functionality in one code with another. These modules are where a developer can create code with specific functionality that can be reused elsewhere. Modules provide you with benefits such as code reusability and code that can be split into several chunks.

Authored by: Bit

Web Application Security Practices Every Developer Must Know

Nowadays, web applications are certainly a critical aspect of business and everyday life. As a result of this increased popularity, the security of these web applications is of great concern. In this article, I will discuss the major vulnerabilities that could be found in web apps and the best practices to avoid them.

Authored by: Manusha

SpaceX's Crew Dragon Touchscreen is powered by JavaScript

The mission is known as Demo-2, NASA Astronauts Robert "Bob" Behnken and Douglas "Doug" Hurley traveled aboard Dragon a top a Falcon 9 rocket, which lifted off from Launch Pad 39A at the Kennedy Space Center in Cape Canaveral, Florida. The aerospace company designs and manufactures some of the world's most innovative spacecraft featuring modern technology.

Authored by: Bilal Rifas

How to Apply CSS Styles to Page Elements Using JavaScript

It is a common task to want to manipulate the CSS styles of a page using JavaScript. In the past, you might have used jQuery for this task, since it has a built-in selector that lets you manipulate styles. Thankfully, vanilla JavaScript makes it easy to change the inline CSS styles on a page using built-in methods - no jQuery required!

Authored by: Dr. Derek Austin 🥳

Use JavaScript to Make an Element Follow The Cursor

I recently answered a question on Stack Overflow where the OP wanted an HTML element to follow the user's cursor. OP gave the HTML element (a div) absolute positioning and was using event.offsetY and event.offsetX to determine the top and left CSS values.

Authored by: Amtthew Rcoke

JavaScript Best Practices for Readable and Maintainable Code

Considering functions that represent a certain behavior, a function name should be a verb or a phrase fully exposing the intent behind it as well as the intent of the arguments. Their name should say what they do. Ideally, you should avoid a long number of arguments.

Authored by: Bit

Tips for JavaScript Developers

Another year is over and JavaScript is constantly changing. However, there are some tips that can help you write in... | 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

Using TypeScript - Never and Unknown Types, Removing null from Unions

TypeScript is a natural extension of JavaScript that's used in many projects in place of JavaScript. However, not everyone knows how it actually works. In this article, we'll look at the use of the never type, unknown type, and removing null from a union.

Authored by: John Au-Yeung

Computing with types in TypeScript

In this blog post, we explore how we can compute with types at compile time in TypeScript. Note that the focus of this post is on learning how to compute with types. Therefore, we'll use literal types a lot and the examples are less practically relevant. Future blog posts will cover real-world use cases.

Authored by: Axel Rauschmayer

Customizing your Angular app's Webpack configuration

In this article, I'll explain why you might need to customize the Webpack configuration of your Angular applications and I'll of course also show you how to do so using angular-builders webpack-config.

Authored by: Sébastien D.

Angular Rest API Mock with Deno

In one of our Angular courses, we are currently using a Node Express server to provide mock data to an Angular application. As Deno has been released with the official version 1.0 (mid May 2020), I decided to experiment with it and write a new web server for the course.

Authored by: Francesco Leardini

Fixing CORS errors with Angular CLI proxy

Trying to access an API endpoint while building on localhost can be traumatizing, especially when this error " No 'Access-Control-Allow-Origin' header is present on the requested resource" comes up. Don't worry it wasn't your fault, the error is due to the same-origin policy that is implemented by most browsers.

Authored by: Damilare

Redux React Alternatives

As MobX is based on classes, the serialization of objects is not as simple as it is with JavaScript. Writing custom serialization and deserialization methods is the recommended way. MobX requires that data is serialized via API calls. Creating custom functions for undo/redo, and time travel of data changes is recommended with MobX.

Authored by: Bit

React Hook Form VS Formik

Working with forms is one of the most challenging problems to solve when developing applications with React. React is a minimalist UI library focused only on controlling the behavior of the interface, making sure that the UI change appropriately as a response to the user’s activity.

Authored by: Bit

Create a Full Stack Banking Application using React

This is part three of the series of building Full Stack banking application.You can check Part One HERE and Part Two HERE In this article, we will see how we can avoid storing the JWT token in local storage to make the app more secure and prevent the XSS and CSRF attacks Clone the initial repository code from HERE which we created in the first part of this series in this article Start the application by running the following commands This will start the Express server.

Authored by: JavaScript in Plain English

Building a Universal Higher-Order Component Page Loader for your React App

You'll notice in the code that the IsLoadingHOC variable declared takes in two parameters: a WrappedComponent and a loadingMessage. The WrappedComponent is whatever component needs to display onscreen once the loader's isLoading state is set to false, and the loadingMessage allows for a custom message to be passed in to display while the IsLoadingHOC component is active.

Authored by: Bit

Internationalization In Vue With The Vue I18n Plugin

Adding Internationalization to your Vue.js application has a lot of use cases and in this tutorial, we're going to learn about to do this with the Vue I18n plugin and how to set it up in our application.

Authored by: Smashing Magazine

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

DOM Manipulation - Node Geometry and Styles

JavaScript is one of the most popular programming languages in the world. To use it effectively, we've to know about the basics of it. In this article, we'll look at how to get various dimensions and styles of a node. The offsetTop and offsetLeft to get the pixel value of an element node from the offsetParent .

Authored by: John Au-Yeung

A Brief History of JavaScript

Will Deno replace Nodejs? Well, the short answer is, most likely. The long answer has to due to the History of #JavaScript dating back to the failed ES4 draft in 2008, followed by Node in may 2009. Read more and lets discuss the future of JavaScript, TypeScript, Deno, WebAssembly and more !

Authored by: Hans McMurdy

Ways to publish your JavaScript library: CDN, NPM, GitHub

Software production involves many stages, such as software design, software development, and many more. Software distribution is also an essential part of that process. It is like a logical continuation of development that determines where and how your end-user will get the product.

Authored by: gitconnected

Unit Testing for React with Jest Snapshots

Jest Snapshots are increasingly being used to test React Components. Snapshots are generally testing the initial rendering of a component, while DOM style testing is to be used for more interactive and manipulative testing. For example In order to test a button that toggles, we may use a snapshot to test the initial state of the render and the styling.

Authored by: gitconnected

Testing Typescript Types

The ability to inform and educate us on how a package functions and behaves through the use of types is one of Typescript's biggest strengths as a language, alongside its' ability to gradually be...

Authored by: Erica Pisani

Good Parts of JavaScript - Function Invocation

JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages. In this article, we'll look at some good parts of JavaScript functions. Functions have to be invoked for them to do something.

Authored by: John Au-Yeung

How to Build CRUD Operations Using ASP.NET Core 5.0 Preview 2 and Entity Framework Core 5.0 Preview 2 (.NET 5.0 Preview 2)

In this blog, I am going to walk through developing a web application using ASP.NET Core 5.0, connecting it to a database using Entity Framework Core 5.0, and performing CRUD operations. For the purpose of demonstration, I am going to develop a sample application for inventory management with basic

Authored by: Syncfusion

Introducing the MDN Web Docs Front-end developer learning pathway - Mozilla Hacks - the Web developer blog

The MDN Web Docs Learning Area teaches fundamentals of modern web development, beginning with HTML, CSS, and JavaScript essentials. In feedback this year, readers asked for a more opinionated, structured ...

Authored by: Mozilla Hacks