Editor's Pick
PlayCanvas WebGL Game Engine
PlayCanvas is an open-source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in any mobile or desktop browser.
Features:
- Graphics - Advanced 2D + 3D graphics engine built on WebGL 1 & 2.
- Animation - Powerful state-based animations for characters and arbitrary scene properties
- Physics - Full integration with 3D rigid-body physics engine ammo.js
- Input - Mouse, keyboard, touch, gamepad and VR controller APIs
- Sound - 3D positional sounds built on the Web Audio API
- Assets - Asynchronous streaming system built on glTF 2.0, Draco and Basis compression
- Scripts - Write game behaviors in Typescript or JavaScript
CSS
Tailwind CSS Color Generator - UI Examples & WCAG Contrast Ratios
Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color.
CSS Classes considered harmful
If you've used CSS, you know what a class name is. They're a very poor proxy for the web today. Let's stop using them.
How to Improve CSS Performance
Learn the most common speed issues caused by CSS and how to avoid them.
HTML
JavaScript
React Spectrum Releases - Updates to React Aria Components
In this release, we’re moving React Aria Components from alpha to beta! With this milestone, we’ve made some API updates based on early feedback, introduced a new Tailwind CSS plugin, and updated the documentation with improved content and organization.
React Spectrum is a React implementation of Spectrum, Adobe’s design system
Stop Using State for React Forms, There is a Much Better Way!
Learn how to optimize the performance of react forms by replacing useState with the native feature of JavaScript (FormData).
The Next Evolution in Frontend Frameworks
It’s amazing that we still don’t have a seamless way of saying “Here’s some data. Here’s some HTML that uses the data. Now update the DOM when the data changes, without bothering me with any of the plumbing involved.”
Circular Slider with Anime.js
The circular carousel/slider was built to provide web developers creative alternative to all those standard carousels/sliders. It was built with javascript animation engine anime.js.
PlayCanvas WebGL Game Engine
PlayCanvas is an open-source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in any mobile or desktop browser.
Features:
- Graphics - Advanced 2D + 3D graphics engine built on WebGL 1 & 2.
- Animation - Powerful state-based animations for characters and arbitrary scene properties
- Physics - Full integration with 3D rigid-body physics engine ammo.js
- Input - Mouse, keyboard, touch, gamepad and VR controller APIs
- Sound - 3D positional sounds built on the Web Audio API
- Assets - Asynchronous streaming system built on glTF 2.0, Draco and Basis compression
- Scripts - Write game behaviors in Typescript or JavaScript
JavaScript is getting array grouping methods
Grouping items in an array is one of those things you’ve probably done a load of times. Each time you would have written a grouping function by hand or perhaps reached for lodash’s groupBy function.
The good news is that JavaScript is now getting grouping methods so you won’t have to anymore. Object.groupBy and Map.groupBy are new methods that will make grouping easier and save us time or a dependency.
Miscellaneous
SPA feel in Hugo sites with Unpoly
Hugo is just a tool for generating HTML pages from templates, that’s all. Anchor links in Hugo sites behave like normal website links - we send a GET request to a page at /post/spa-hugo-unpoly and the server responds back with the full HTML page. We can easily fit Unpoly JS in this flow here to fetch and inject content dynamically, eliminating the need for full page reloads. This will allow us to create better interactive features on static sites, such as dynamic forms or live search, enhancing the overall user experience.
In this tutorial, we’ll enhance a Hugo website by adding two key features with the assistance of Unpoly. These are:
- Fragmented page loads
- Live search
The end result can be seen here and the repository source is here.