Visual testing for components
General thoughts on testing components:
- Different inputs (props, state/store/context, user events) -> test cases
- DOM output and triggering of events handler functions (React) or emitted events (Vue) -> test case expectations
Not captured/tested: Styling
Cypress can visually test components, both on the server and in a local dev environment. It integrates with CI workflows so you can get notified of visual changes (across browsers) and can approve/fix them for each pull request.
- Runs inside the browser and has access to all its APIs, no webdriver API needed.
- Interesting diffing algorithm and presentation, showing reference image, diff and new image side by side
- testing individual components
- good CI integration
- Custom API, not based on Selenium (vendor lock-in)
- No Safari/IE browsers
- local testing environment uses your browser, might have different results than testing in CI.
- Freemium business
The talk showed how to auto-generate a GraphQL backend with fine-grained authentication by describing your data structures and the access rules to individual instances and fields. The end result is a backend running on AWS. Looks like a powerful abstraction that allows you to describe your application on a much more higher level.
Reminds me of other code generation frameworks, tying your business logic to the implementation. Ok for simple CRUD applications, wouldn’t use it for anything else. AWS means it’s vendor lock-in deluxe.
- Fully supports async/await
- Supports ESM natively
- Is fast
Module federation in Webpack 5
Federation means splitting a web page (Header, Footer, Sidebar, Content) into “micro-frontends” that share dependencies. This leads to faster build and deploy times and allows for developing separate parts of an application across teams. Webpack takes care of the correct splitting, chunking and loading the dependent modules asynchronously when the code requires a federated module. https://webpack.js.org/concepts/module-federation/
The Evolution and Future of JS & Front-end Build Tools
Fronted development relies on build tools - for minification, transpilation, module dependency resolution and developing locally. Out of the box, the browser and web server environments need these build tools to work efficiently. In the future, this might change: ES Modules allow for loading of individual modules during development, where fast reloads are more important than overall load time. Snowpack and esbuild allow for local development without bundling.
Winners in each category in bold
- Snowpack - An alternative fast bundler for development
- Visbug - Browser design tool, allowing to adjust CSS properties visually without editing CSS.
- taskbook - Tasks, boards & notes for the command-line habitat
Most exciting use of technology
- msw - Seamless REST/GraphQL API mocking library for browser and Node.
- Vidact - A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM
- TypeGraphQL - Create GraphQL schema and resolvers with TypeScript, using classes and decorators
- Redwood - a JAMStack application framework
- orbit-db - Peer-to-Peer Databases for the Decentralized Web using IPFS
The best fun project of the year
- Pose Animator - Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters.
- Splat - Motion-controlled Fruit Ninja clone using Three.js & Tensorflow.js
- Flatris - A multiplayer puzzle game
- Diabloweb - Diablo 1 for web browsers!
The most impactful contribution to the community
- Perfume.js - is a web performance monitoring library that reports field data back to your analytics tool.
- Ackee - Self-hosted, Node.js based analytics tool for those who care about privacy.
- Algorithm visualizer - Interactive Online Platform that Visualizes Algorithms from Code
- SpaceX REST API - Open Source REST API for rocket, core, capsule, pad, and launch data
Breakthrough of the year
- Svelte - Reactive component framework that compiles to vanilla JS.
- Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
- Eleventy - a content- and templating-agnostic static site generator
How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
This was a talk given by one of Microsofts core TypeScript developers.
- Motivation behind TypeScript: identify sources of errors during development and try to prevent them with types/syntactic structures.
enumwas a mistake early in the development, they’re correcting it now).
- TypeScript tries to stay compatible with JS in the browser
- Fears of Microsoft “Embrace & Extend” strategy are more and more unjustified the langer the ecosystem becomes.
- The goal is to get to a state where you can always remove type hints and get ES6
- Typescript follows new language feature proposals in TC39 closely, but is conservative when implementing them, because each feature has consequences on tooling, compiler and IDE, resulting in a cascade of code changes.
- Drop-in reactive framework, all interactive features defined as attributes in markup. Progressive enhancement with a modern (i.e. reactive) API.
- A good replacement for jQuery - toggle elements, iterate values, etc. Not for mid- or large-scale applications or SPAs.
- Goal is developer experience
- No need (and not recommended) to bundle or use webpack, pull it in from a CDN
- Has no virtual DOM, directly manipulates the DOM
- Having fun with emoji - What’s
string.normalize()is your friend when dealing with different ways of encoding the same char (i.e. umlaut).
- “The Unicode Consortium is very male and pale”
- https://spatial.chat/ - A chat that looks like a JPRG, allowing you to form groups in 2D space and move around to chat.
- https://github.com/tensorflow/tfjs-models/tree/master/posenet - Pose Detection in the Browser: PoseNet Model
- Scully - Static site generator based on Angular
- Tone.js - A modular synthesizer and audio manipulation library in the browser
- https://0.30000000000000004.com/ - Explains in simple terms why
0.1 + 0.2equals
0.30000000000000004in most programming languages.