Blog about JavaScript, performance and security

The Complete Guide to Setting up React with ReScript and Vite

#rescript #react #vite #new-project #how-to 

If you're intrigued by the idea of exploring another strongly typed, functional language, you should definitely give ReScript a try. This guide is designed to assist you in setting up a fundamental React application using ReScript and Vite, offering you a fantastic opportunity to delve into this exciting combination of technologies. With ReScript's type safety and the speed of Vite, you'll be well on your way to building robust and highly performant web applications that are a joy to work with. So, let's embark on this journey of enhancing your web development skills by seamlessly integrating React, ReScript, and Vite into your workflow

Continue

How to create and configure Next.JS v.13 application - prettier, eslint, husky

#nextjs #react #new-project #how-to #prettier #eslint #husky 

Learn how to create a Next.js app with Prettier, ESLint, Husky, Jest, and deploy it on Azure. This guide covers setting up a new project, configuring Prettier and ESLint, using Husky for pre-commit hooks, writing tests with Jest, and deploying to Azure. Enhance your development experience and optimize your app for production.

Continue

Next.JS and new React Server Components - How to Use and Caveats

#nextjs #server-components #react #performance 

Recently I have spent a lot of time dealing with the new feature in Next.js - server components, and now I want to share my experience and some thoughts about this update, including the benefits, limitations, and how to use them in real-life scenarios.

Continue

All materials for the new course React For Beginners have been published!

#ukraine #react #learning 

As you already know, on April I started working on the free React Course for Beginners. It was a long ride and now I am extremely happy to announce, that all program already finished and all materials published for everybody:

What is even more exiting, I've opened the YouTube channel where I am giving talks based on this topics. Right now all talks are in Ukrainian (I am Ukrainian, you remember this, right?), but I have some plans about translations.

Hope to see you after the war ended.

Advanced TypeScript Tips and Tricks - Case Study

#typescript #typescript-tricks #typescript-advanced 

It would seem that in 2022 it is a bit too late to talk about TypeScript - the technology is well known and popular. Despite this, some times TypeScript still used half-heartedly. Simple type annotations, null checking and nothing more. Therefore, I brought some interesting, purely practical cases to show mighty TypeScript in action!

Continue

Start working on free React course to support Ukraine

#ukraine #react #learning 

Hello, I am from Ukraine 🇺🇦

To support #Ukrainians in the war, I am launching free react course for beginners.

It will cover 12 topics and lasts around a month.

All materials will be opened an published on my github - https://github.com/Drag13/react-learning-course-short. Updates will be post in twitter - https://twitter.com/drag137

Feel free to contribute or ask questions!

Performance testing on a slow network and weak CPU using Puppeteer and React

#performance #react #puppeteer #slow network #slow-cpu 

This article shows how to build the script for gathering performance metrics with a slow network or weak CPU using Puppeteer and React. We will also explore cache and cacheless testing to cover the first-time visit and returning scenario. The example might be helpful in case you want to get some insights on how does your site behave on mobile devices that usually are weaker than laptops.

Continue

Getting performance metrics from React application using Puppeteer

#performance #react #puppeteer #webvitals 

This article will show how to build the script to gather main performance metrics and Core Web Vitals from the React application using Puppeteer and TypeScript. I will also describe how to create and extract custom performance events using the React Profiler component. This example might be helpful if you decide to do some performance research or implement advanced performance testing into your CI/CD pipeline.

Continue

How to opt-out Federated Learning of Cohorts (FLoC) using JavaScript

#FLoC #web #security #privacy 
How to opt-out Federated Learning of Cohorts (FLoC) using JavaScript

Federated Learning of Cohorts (FLoC) - is the new way proposed by Google that allows Chrome to collect and share customer's personal information without the need for cookies. This article describes how to opt-out FLoC using JavaScript and why HTTP headers might not be enough.

Continue

Twitter bot dedicated only to #webperf is here!

#performance #webperf 

Hi all! Interested in creating a faster web? Subscribe to my Twitter bot to get the latest news from all over the world regarding web performance. Or simply use #webperf tag to be retweeted.

Built using #Azure and Azure Logic Apps with 0 lines of code.

webpbot twitter-bot web performance

Let's make the web faster!

TypeScript Tips and Tricks - Utility Types With Examples

#typescript #typings 
TypeScript Tips and Tricks - Utility Types With Examples

TypeScript is a very powerful language, however, it heavily relies on the types. And sometimes, you may found that you write more types than actual code. In this case, you should take a look into the Utility types that will help you to write fewer types and still keep your code type-safe.

Continue

Hey ho! Perfrunner's config file already available with v.0.9! 🥳

#perfrunner #performance #performance-testing 

Hi all! Configuration file for the Perfrunner already available in 0.9 version.

It supports:

  • Tuning network conditions
  • Multiple URL in a single test run

Create config file with npx perfrunner init command and use it running Perfrunner without arguments.

And you don't need hardcode long string in the package.json anymore 😎!

If you have any question or spotted an issue - feel free to open an issue

TypeScript Tips and Tricks - Declarations With Examples

#typescript #typings #declarations 
TypeScript Tips and Tricks - Declarations With Examples

TypeScript is a very powerful language and it is becoming more and more popular. It is easy to start but hard to master. In this article I will show you some useful tips and tricks about TypeScript declarations that may help you in everyday coding and will keep your code type-safe.

Continue

Perfrunner - automated tool to track your website speed changes

#performance-testing #perfrunner #first-contentful-paint #performance-metrics 
Perfrunner - automated tool to track your website speed changes

A few months ago I worked on the performance improvements for one React-based web application. I tried different tricks to improve initial application loading and I was really annoyed with the way of testing my changes. I had to launch the application several times to get average results. I had to repeat all launches against at least two types of networks (4g and my current). And I must do all mentioned once again for cache and cashless scenarios. So, for the one single change, I must run at least 12 tests. This was not fun. I decided that I don't want to do this anymore and this is how the Perfrunner appeared.

Continue

How to use React without unsafe-inline runtime chunk and why

#react #security #content-security-policy 
How to use React without unsafe-inline runtime chunk and why

React.JS is an awesome library that widely used all over the world. However, it also contains some pitfalls that might negatively impact your application. And here I want to discuss one of such pitfalls - inlined runtime chunk that might prevent you from correct using one of the most useful security header - Content-Security-Policy.

Continue

Hey ho! Perfrunner already in alpha now! 🥳

#perfrunner #performance #performance-testing 

The good news just arrived (at least for me :)) Alpha version of the Perfrunner already available via npm. It is still fresh and lacks some nice features but it is fully functional and ready to work.

If you wondering what Perfrunner is - it's a simple automation tool to track the performance of the web application built on top of puppeteer. It tracks performance metrics, custom marks, amount of the resources, and much more. Feel free to try it with:

npx perfrunner drag13.io

The code is not very nice and development still in progress, but I am on the way, so new features will arrive soon.

How to add custom types into the TypeScript project

#typescript #.d.ts #types 

Working with TypeScript is very comfortable. It provides Intellisense, type-checking, and makes the developer's life much easier. But, sometimes, when I am using external libraries, I got a problem. They don provide types or shipped types that are outdated. In this case, there is no other option but to define custom typings my own. Luckily, it's not that hard as you may expect.

Continue