App bootstrapping, first contentful paint, page load, browser analysis, connection efficiency, service worker status, visibility state and even more other performance analysis around the world for free with easy setup!

I think most of us want to know how the application really works for our users because they use different devices and browsers that provide different application usage experience for them. Not so long time ago when I was making an analysis of my Firebase web application I found Performance tab, that previously was in beta:


I think that most of us want extensible, reliable and modular starter project for Angular with Angular CLI, Express a production-ready full-stack. For a long time, I was supporting angular-seed and angular-seed-express but now I have created a new and better version of Angular Express stack.

If you don’t want to read the whole article you can simply go to the git repository below:

Why?

I was trying to find some Angular Express starter that is in long term support and easy to update and modify. …


Photo by sl wong from Pexels

Angular Team released Angular 8 beta release. Many of us will be curious about the kind of features and bug fixes that we can see now before the main release.

platform-server

Now since the schema is never modified, but only used in a read-only fashion, it should be possible to re-use a single instance instead, which avoids quite a bit of overhead per request in ServerRendererFactory2.

Performance testing with 100 concurrent connections and 1000 requests in total showed an approximate 33% improvement that is really huge.

forms

If you want to mark a control and its descendant controls as touched you…


React Team released a new version of our favourite tool create-react-app. This release contains new changes like TypeScript, Babel 7, updated Documentation, more inside!

TypeScript App Creation

Now you can create your apps with TypeScript, and this is awesome!

To create an app with TypeScript you just simply need to add a flag npx create-react-app app-name —-typescript to your app creation, and the application will be created with TypeScript.

Babel 7

With the new version of Babel, we now have .ts.tsx support, to use it just simply rename .js to .tsx and don’t forget that for type checking you need to create tsconfig.json


Dipi is a simple Angular library that contains a huge, useful pack of Directives and Pipes for Angular developers. This library provides for you a Directives and Pipes that you can use in your projects and save a lot of time for solving common issues very fast.

Why I created it?

I was working on several projects where I was required to use the same Directives and Pipes for different issues. …


Photo by Frank Mckenna

Today Angular Team released Angular 7 beta release. Many of us will be curious about the kind of features and bug fixes that we can see in this beta release.

Features

Let’s firstly talk about new features.

Angular Compatibility Compiler (ngcc)

This compiler will convert node_modules compiled with ngc, into node_modules which appear to have been compiled with ngtsc. This conversion will allow such “legacy” packages to be used by the Ivy rendering engine.

DoBootstrap

The new lifecycle hook interface ngDoBootstrap.

Example:

class AppModule implements DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef) {
appRef.bootstrap(AppComponent);
}
}

Compiler

Updated XMB placeholders(<ph>) to include the original value on top of an…


Simple steps that will increase the performance of your website or web app. Take a look maybe you missed something in yours?

Does your Website or Web App have a maximum performance? I think a lot of developers and teams have this question in their minds, and in our days it’s easy to follow simple steps on a design or refactoring stage. There are so many powerful tools that can assist you to use the best practices and have the huge performance of your Website or Web App.

I propose you to follow some this simple Tips and Tricks can…


Increasing performance of Angular, React and Gatsby applications is always an important question, especially if you have significant complex app or website.

Guess.js it’s a new exciting optimization solution that use Data-driven bundling for Webpack and Data-driven loading for non-Webpack. It is still in alpha, but I hope once it will be stable, it will be an important part of huge complex apps and websites.

About Guess.js

Guess.js provides libraries & tools to simplify predictive data-analytics driven approaches to improving user-experiences on the web. This data can be driven from any number of sources, including analytics or machine learning models. Guess.js …


New release of Electron 2, cross-platform native desktop application framework for JavaScript/TypeScript, HTML and CSS. Good backward compatibility with previous version, performance improvements, new features.

Each release of this framework do it better and better in all senses, providing for us performance enhancements, bug fixes and new features. And many of developers always worried is their backward compatibility. And I want to say yes! Electron team and Community had done an amazing job. Let’s take a look at this major release together.

New features

MacOS in-app purchases

In-app purchases are now supported on MacOS applications. Now your MacOS applications can have purchases with App Store…


I think many Angular developers have problems with rendering large list of data. So I want to share with you some trick that can help you to resolve this problem.

Understanding the issue

First full let’s take a look at this common issue:

We need to render a huge list of nodes, let’s say 10,000 for example, but the user can see only 30 of them in viewport container so there is no any reason to show all of them for user.

We could not resolve this issue with standard *ngFor directive because it will render for us all 10,000 nodes that…

Valentyn Yakymenko

Front-end Architect at Codeminders | Passionate about web performance optimization. | Code hard, learn more.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store