Blog about JavaScript, performance and security

Perfrunner - an automated testing tool to check your web site performance improvements against various conditions

#performance-testing #perfrunner #first-contentful-paint #performance-metrics 
Perfrunner - an automated testing tool to check your web site performance improvements against various conditions

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.


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.


#perfrunner #performance #performance-monitoring 

Hey ho! Perfrunner already in alpha now! 🥳

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

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.


Top-5 HTTP Security Headers in 2020

#security #http-headers #content-security-policy 
Top-5 HTTP Security Headers in 2020

Nowadays, security is important as never before. I’ve prepared a very short article about the Top-5 security headers in 2020 that will help your site keep your users in safety.


React.JS application, performance and -500 milliseconds at launch - the history of our optimizations in numbers

#react #performance 

Simple performance optimizations and -500 milliseconds at launch for the create-react-app.

Continue in Russian

Profile loading of Habr or how 189 requests influence the rendering


If you are interested in how to profile and (what is more important) understand the profiling results - here is the example of profiling - most popular IT resource in CIS.

Continue in Russian

Discovering new angular/cli command library - short overview

#angular #ng-library 

@angular/cli added support for creating your own library with angular components. Let's check what we are offered.


How to get JavaScript bytecode from Node.js and V8 in 2019

#v8 #bytecode #performance 

Want to know how your code looks like from bytecode? Getting JavaScript bytecode is simpler than you think.

Follow the white rabbit

How to start new JS project from scratch with automated formatting, linting, testing and documentation

#javascript #development 

Keeping your code consistent and well-formatted not an easy task even when you work alone. But when you work with a team or with open source projects all start getting even harder. Everyone has their own code style, someone doesn’t run tests, and no one writes documentation. This article will help you to set up all these things and even more — automate this routine to never do it manually.


Free Continuous Integration for your GitHub project with three easy steps - build, test, deploy

#ci/cd #c# #travis #codecov 

Hi guys! Today we will learn how to setup Continuous Integration process for the C# project hosted on GitHub. This is very easy, can really improve your code quality and you always be sure that no one destroys your code with latest commit. Are you interested? Let’s give it a try!