Editor's Pick
Implementing Tic Tac Toe with 170mb of HTML - no JS or CSS
I love it when Chrome releases a new feature, I especially like it when it is experimental. In this post I'm going to show you how I created Tic Tac Toe (Noughts and crosses) with HTML, using one of those experimental features.
The final game is around 170mb, and not a particularly fancy 170mb at that, but what do you expect from a game coded in pure HTML with over half a million nodes š. You can check out the final game at https://garethheyes.co.uk/games/tic-tac-toe
Note: editor's pick is not a sponsored or paid post in any way.
CSS
Building a no-JS radial menu with CSS trigonometry, popover, and anchor positioning
This radial menu uses three modern CSS features: CSS trigonometric functions, the popover attribute (partially supported), and the anchor positioning API (not yet supported in stable browsers). I started this exploration out of an excitement to try out trigonometric functions for non-linear layout of a common UI component.
For the full effect, try it out in Chrome Canary with the #experimental-web-platform-features flag turned on.
Animate.css - a cross-browser library of CSS animations
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
This is an oldie but a goodie, worth a look if you're not already familiar with it.
The Mad Magazine Fold-In Effect in CSS
After 65 years at Mad Magazine, comic artist Al Jaffee announced his retirement. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork.
Of course I had to create the paper folding effect for the web. Thereās many different ways to achieve this, but this approach is nice because:
- Itās CSS only, relying on no JavaScript.
- Uses a single image instead of requiring the image to be sliced up in Photoshop.
- Can be configured with just HTML by setting CSS variables in a style attribute.
SnipCSS - Extract CSS/HTML snippets from an HTML element/widget
SnipCSS can turn any section of a website into a reusable web component. All HTML, Images and CSS is extracted with one click of a button.
HTML
Implementing Tic Tac Toe with 170mb of HTML - no JS or CSS
I love it when Chrome releases a new feature, I especially like it when it is experimental. In this post I'm going to show you how I created Tic Tac Toe (Noughts and crosses) with HTML, using one of those experimental features.
The final game is around 170mb, and not a particularly fancy 170mb at that, but what do you expect from a game coded in pure HTML with over half a million nodes š. You can check out the final game at https://garethheyes.co.uk/games/tic-tac-toe
SVG Gradients: Solving Curved Challenges
We explore the challenges that arose and argue why sometimes, being given complex engineering challenges like this can be highly rewarding.
While design complexities can translate into technical challenges, they also serve as opportunities for programmers to hone their most valuable skill, their ability to problem-solve.
JavaScript
Mobile Performance of Next.js Sites
Next.js is one of the most popular React frameworks and is seeing heavy adoption. I am working on performance remediation for a large e-commerce site built with Next. While the site has numerous 3rd party analytics, observability, and clientside A/B testing scripts, the performance bottlenecks I am facing are primarily due to large app, vendor, and framework JavaScript bundles.
Vue Play - The Ultimate Drag And Drop Designer For Vue
Design .vue files with Less Code using Transform Tools and Style Controllers. Drag & Drop Elements and Components into the Playground with Vue Play.
Trie in Javascript: the Data Structure behind Autocomplete
Trie is a variation of tree data structure. It's also referred to as prefix tree or a variation of search tree. Just like n-ary tree data structure, a trie can have n children stemming from single parent. Usually all the nodes in a trie would store some character.
Overwriting HttpOnly cookies using cookie jar overflow
Even though HttpOnly cookies cannot be read using JavaScript, it is still possible to overwrite HttpOnly cookies using JavaScript.
Recreating YouTubeās Ambient Mode Glow Effect
Discover with Adrian whatās behind the charming glow effect on Youtube and how you can use it to make your own videos more immersive. Deconstruct YouTubeās āAmbient Modeā feature and learn how HTML <canvas> and the requestAnimationFrame function are used to create this glowing effect.
AdonisJS Framework
AdonisJS is a fully-featured backend framework for Node.js. The framework is created from ground-up with strong emphasis on developer ergonomics and ease of use.
It is one of the rarest framework in the Node.js community that ships with a suite of first party packages that helps you create and ship products without wasting hundreds of hours in assembling different npm packages.
Application State Management with Angular Signals
In this article, I will demonstrate how to manage your applicationās state using only Angular Signals and a small function.
React-platform-starter
Platform Starter is a starter boilerplate for building web applications using React.js, equipped with a powerful set of tools and libraries to streamline development process
sveltekit-i18n - Internationalization library built for SvelteKit
sveltekit-i18n is a tiny library with no external dependencies, built for Svelte and SvelteKit. It glues @sveltekit-i18n/base and @sveltekit-i18n/parser-default together to provide you the most straightforward sveltekit-i18n solution.
UX
How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile
Yahoo! JAPAN News, one of the most popular news platforms in Japan, drove a concerted effort to improve their bfcache hit-rate and saw significant user experience and business improvements as a result. Specifically, the results of the A/B test they conducted showed that pages that use bfcache had a 9% increase in ads revenue.
Miscellaneous
Primo - a visual CMS that makes it a blast to build pages, manage content, and edit code, one block at a time
Primo is a modern approach to the monolithic CMS that builds on the traditional monolith's benefits of a quick setup and easy content editing alongside the flexibility of modern development. These combine into a web publishing tool that is significantly easier to use for both technical and non-technical users and enables both to build faster, more secure, more unique websites.
Dark Patterns Tip Line
Notice a website or app up to something suspicious? Maybe youāve felt forced into giving up personal details or discovered hidden fees. Document and share your experience to help prevent other people from also being harmed. Sharing a dark pattern you spotted in the wild helps us learn more about interfaces and designs that impact real people. Your tips will help policymakers and enforcers hold companies accountable for their dishonest and harmful practices, and we may feature your submission on this site.
Not sure what this will really accomplish but you may find their sightings section interesting. That section contains dark pattern submissions that reflect the views and experiences of the people who submitted them.
A practical guide to frontend package managers
Learn about popular frontend package managers, their features, and how to choose the right one for your projects. Get practical insights into npm, yarn, and pnpm, and make an informed decision.
Octos - HTML Live Wallpaper Engine
Create, distribute, and explore live, interactive wallpapers on Windows made with HTML, CSS, and JS.
At this company, we are family
At this company, we are family. And what a family we are.
Anyone who has ever gone through a layoff from a "we are family" company will appreciate this.