I’ve been writing end-to-end tests for the place I work at, which has its main product written in Google’s AngularJS. The dedicated E2E testing framework for AngularJS is the Protractor framework. While it’s a nice project, the documentation is a bit terse at times, and a lot of my understanding came, unsurprisingly, from Stack Overflow. Here are some of my key learnings, also for future reference. Some of it may seem a little obvious, but my experience with JavaScript doesn’t go much further than <script>alert('Hello World!')</script> so bear with me here.

Styletron is an universal toolkit for component-oriented styling. It falls into the CSS in JS category. Styletron works great with React but can be used with other frameworks or plain JS as well.

Near-zero runtime, server-side rendering, multi-variant support, and a best-in-class developer experience.

Styled System lets you quickly build custom UI components with constraint-based style props based on scales defined in your theme.

Fela is a small, high-performant and framework-agnostic toolbelt to handle state-driven styling in JavaScript.

Configure your schema in JavaScript, and KeystoneJS will generate a powerful GraphQL API and CMS.

Easy to implement, 3D typography for the web. Works with every font.

A gentle introduction to why Webpack exists, what problems it solves, and how to use it.

When optimizing for long-term maintenance, we have a few choices. I like to bet on monorepo. A monolithic repository is a simple idea. You organize the code of all your services in a single repository. It has a few advantages over using a separate repository for each service.

Reusing code is easy. Once you abstract a coherent unit of code into a module, you can then import it from anywhere.

Continuous integration runs tests against the entire monorepo, so once PR is merged you bump the version of all sub-services and there is no doubt what versions are compatible with each other. Version 1.2 of service A is always compatible with version 1.2 of service B. This is why complex projects with multiple dependencies often use monorepo as well (Babel, React, Angular, Jest). Due to the very same reason, large-scale refactorings are also feasible.

You maintain one third-party dependencies tree. It's too easy, especially with all NPM goodies, to end up with two different versions of the same library and having to sync them across different repositories manually gives me a headache. Having one main package-lock.json is a real time-saver.

Monorepo forces collaboration, it encourages having the same coding style by having a single config for your linter/code formatter/module bundler and so on.

Custom Elements are the lynchpin in the Web Components specifications. They give developers the ability to define their own HTML elements. When coupled with Shadow DOM, Custom Elements should be able to work in any application. But things don't always work seamlessly.

This project runs a suite of tests against each framework to identify interoperability issues, and highlight potential fixes already implemented in other frameworks. If frameworks agree on how they will communicate with Custom Elements, it makes developers' jobs easier; they can author their elements to meet these expectations.

Custom Elements and Shadow DOM don't come with a pre-defined set of best practices. The tests in this project are a best guess as to how things should work, but they're by no means final. This project is also about driving discussion and finding consensus, so don't be afraid to open a GitHub issue to discuss places where the tests could be improved. ✌️

Unifying the frontend development toolchain

Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

Snowpack is a modern, lightweight toolchain for faster web development. Traditional JavaScript build tools like webpack and Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This rebundling step introduces lag between hitting save on your changes and seeing them reflected in the browser.

Everything on npm, delivered directly to your browser.

Do you love the Jamstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on React, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.

In this article, I demonstrate how to build a components library, what tools are needed, how to structure your project, and how to publish components to npm registry.

Need some mock data to test your app? Mockaroo lets you generate up to 1,000 rows of realistic test data in CSV, JSON, SQL, and Excel formats.

Create Block is an officially supported way to create blocks for registering a block for a WordPress plugin. It offers a modern build setup with no configuration. It generates PHP, JS, CSS code, and everything else you need to start the project.

Style Dictionary is a build system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

📦 A zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block plugins. - ahmadawais/create-guten-block