This is a working draft of a checklist to define a "gold standard" for web components that aspire to be as predictable, flexible, reliable, and useful as the standard HTML elements. The fundamental premise of this list is that it should not only be possible to attain that standard; people creating web components for general consumption should aim to meet that standard. These items are focused on designing good components; there are many other good principles for designing good user interfaces at the page or application level which are not listed here.

A WebGL browser clone of MilkDrop

Эта статья для тех, кто не использует generic-типы в TypeScript: не знают о них, боятся использовать или используют вместо реальных типов — any.

preventDefault and stopPropagation: when to use which and what exactly each method does

Solid is a purely reactive library. It was designed from the ground up with a reactive core and built on hardened tooling in a growing ecosystem.

Modern front-end web development encourages breaking up of designs into reusable, repeatable and unique components. A component is a piece of markup capable of holding – but is separate from – content within it.

keen-slider has a very smooth and natural touch feeling and wants to enable you to build all kinds of sliders. However, it should not be easy to destroy the slider by a wrong configuration. Therefore the API remains small and simple.

In this article we'll go through what Lerna and monorepo's are and how to use them to create and manage a new design system. Or skip ahead and check out the source code here.

Speed up testing with Jest and Spectator for Angular applications.

In this article, I want to quickly introduce you to the idea of Observables, using elementary but real-life examples. There will be some basic theory at the beginning, but the rest is just me, you, and Observables. Let the fun begin!

Если ваша компания делает несколько продуктов в едином стиле, однажды вам в голову придет идея сделать библиотеку с общим кодом. Например, с UI-компонентами, сервисом авторизации или для работы со сторонними API. Возможно, вы зададитесь вопросами: кто должен поддерживать этот код? Как доносить изменения до пользователей? В конце концов, как вообще заставить их пользоваться вашей библиотекой?

find the cost of adding a npm package to your bundle

Our goal is to provide high quality lightweight wrappers for various native Web APIs to use with Angular

The console panel in your favorite browser's DevTools can be a very powerful ally when troubleshooting problems in a web app. Log data, send requests, manipulate DOM elements, you name it, the console can do it all!

Volta is a hassle-free way to manage your JavaScript command-line tools.

Mermaid lets you represent diagrams using text and code. This simplifies maintianing complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.

Just like its predecessor, Angular 1, Angular has been designed with testability as a primary goal.

When we talk about testing in Angular we are usually talking about two different types of testing:

Unit Testing
This is sometimes also called Isolated testing. It’s the practice of testing small isolated pieces of code. If your test uses some external resource, like the network or a database, it’s not a unit test.

Functional Testing
This is defined as the testing of the complete functionality of an application. In practice with web apps, this means interacting with your application as it’s running in a browser just like a user would interact with it in real life, i.e. via clicks on a page.

This is also called End to End or E2E testing.

Configuration for our beloved frontend tools is hot lava. Today CLI tools as create-react-app or Vue cli abstract away most of the configuration, other than providing sane defaults.

Even then, understanding how things work under the hood is beneficial because sooner or later you'll need to make some adjustment to the defaults.

In this post we're going to see how babel preset-env, core-js, and browserslistrc work nicely together to enable newer JavaScript features for older browsers.

Shipping accessible features is as essential for a frontend developer as shipping features without bugs. Here is a list of tools I regularly use to make sure everything I do is accessible for folks with different abilities, whether they are blind or holding a sandwich in their hand. I’ll start with tools that will give us immediate feedback when we’re writing code, and continue with tools that we have to run ourselves or guide us on how to test things manually. This article will be useful not only for developers but also for designers, project managers, and other team members — many of the tools could be used directly in the browser and don’t require any technical knowledge.