DEV Community: UnionForever

AI-slop has flooded the template market

UnionForever — Sun, 28 Dec 2025 05:03:11 +0000

Recently, I was sourcing e-commerce templates for a client and ran into a frustrating reality:

Expensive, locked-down ecosystems like Shopify, which make customization painful and tie you into their platform.
Broken AI-generated templates, which promise a lot but fail on basic accessibility, performance, or even just working correctly.

Frustrated with these limitations, I decided to build something better: Estrocom, an e-commerce template built with Astro, Tailwind, and TypeScript. My goal was simple: a template that’s fast, fully accessible, SEO-friendly, and mobile-first, while still being easy to customize and extend.

You can check out the live demo here:

https://estrocom.netlify.app

Or browse the source code on GitHub:

https://github.com/VBproDev/estrocom

What Makes Estrocom Different

Here’s why I think this template is worth checking out:

Accessibility: Every page passes WCAG AA standards. I ran Axe and Lighthouse tests, and the template came out with 0 accessibility issues, maintaining AA color contrast and semantic HTML.
Performance: Sub-1-second load times and strong Lighthouse scores across performance, best practices, and SEO metrics.
Mobile-First: Designed from the ground up for mobile, it works smoothly on screens as small as 360px and scales seamlessly to large desktops.
Atomic Design: Components follow the Atoms → Molecules → Organisms pattern, making it easy to scale, maintain, and reuse code.
Full Shopping Flow: Integrated cart functionality, product categories, and dynamic product pages out-of-the-box.
SEO-Ready: Includes JSON-LD schema for products and an automatically generated sitemap to help search engines index your site properly.

How You Can Use It

Estrocom is config-driven, so getting started is simple:

Add your products by editing src/utils/productData.js.
Replace placeholder images in public/assets/ with your own.
Update categories and product pages by editing the frontmatter in src/pages/category/ and src/pages/products/.
Customize the homepage at src/pages/index.astro to tell your brand story.
Adjust theme colors and typography by updating src/design-system/colors.js, sizing.js, and typography.js.

This makes it easy to get a fully functional, production-ready store without starting from scratch.

Lessons Learned

Building Estrocom reinforced a few key lessons:

Performance matters more than bells and whistles. A template that loads fast keeps users engaged and improves SEO.
Accessibility isn’t optional. Testing with Axe and following WCAG guidelines ensures your store is usable for everyone.
Atomic Design scales. Structuring components properly makes future updates painless.

If you’re a developer, founder, or small business looking for a fast, accessible, and flexible e-commerce solution, Estrocom is a strong starting point.

Check it out, fork it, or contribute:

I think this is a good replacement to rough.js

UnionForever — Tue, 10 Dec 2024 10:55:52 +0000

Never code lines on the HTML canvas again

UnionForever ・ Dec 10 '24

#html #gamedev #javascript #powerfuldevs

Never code lines on the HTML canvas again

UnionForever — Tue, 10 Dec 2024 10:46:13 +0000

Would you like to spend your morning, afternoon and evening coding this with Rough.js, or worse, writing this with the canvas API?

or would you like to draw this in… 30 minutes without writing code?

Canvascript is an open source no code tool to make sure that you do not waste your time on writing code and tracking coordinates for doing something as creative as creating graphics for the canvas.

Simply draw your graphics, then click on the generate code button to get the code that renders your graphic on the HTML canvas

You can draw straight lines, curved lines and even freehand.

You can control the color and width of your brush.

You can redo, undo and save your drawings.

You can test your graphics on multiple resolutions.

You can even import and export drawings if you want to edit someone else’s graphic

Hell, with some modifications to the source code, you can even make 3D drawings that render on the HTML canvas

All without writing a single line of code

Why the HTML canvas? because that’s the only standard on the web that’s performant and mobile friendly enough for web game devs. That makes it a tool for web game devs, in fact the repository’s main page makes that quite clear, but it can be useful to anyone making graphics that render fast and on mobile

You don’t have to install or download anything, you can open CS right by going to their repository on Github and clicking on their app’s link

***

This is my first blog on writing about such amazing and underated open source projects for web game and frontend devs.

An underated project is a project is one which has < 50 stars and < 10 forks

Do you have any thoughts about this story? do you know or own any hidden gems? Let me know below

Draw on the HTML canvas without code

UnionForever — Sun, 27 Oct 2024 07:08:58 +0000

I was recently creating a web game. Now, while creating graphics for this game (characters, map etc), I saw that under the HTML canvas API, drawing even a single line took 4 lines of code-

ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(100, 200);
ctx.stroke();

I knew that things like mapping out coordinates and rewriting repeated methods can easily be done by a no-code tool. This led to the creation of Canvascript. It's a open source tool whose purpose is to speed up the time it takes to create web game graphics.

Using it is simple, draw on the canvas, then click on the generate button to get the code to render the design on the actual HTML canvas. You can use the tool here. We also have a Discord server btw.

What do you think about this? any feedback or suggestions?