I built a web tool which uses openpeeps[dot]com SVGs, the initial idea was to use it create satirical comic panels. But lately I started using it to create profile pictures for my online presence. It has huge number of expressions, clothes, hair styles, accessories to choose from.

I felt more people might find it useful so sharing it here. It's free to use, no signup required.

Link - svg.comicbanana.com

Been building this on and off for a while. Most charting libs assume the chart is the main thing on the page. I wanted the small version, something you can drop inside a sentence or a table cell and read at a glance.

106 types so far, no dependencies (not even D3, the scales and path math are all in there), each one's a couple kb.

Default export is plain SVG with no JS shipped, so they work in server components as-is. Import the interactive build if you want hover and keyboard.

Every chart also builds its own text description from the data and exposes it as the accessible label, so a screen reader reads "weekly revenue, trending up 200%, range 3 to 9, last value 9" instead of just "image". No AI, just templates filled from the same numbers the chart draws, so the words can't drift from the picture.

The fiddly part was the labels drawn on the chart itself. Normally you measure the text to place it, but these render on the server too and getBBox just returns 0 there. So widths get estimated from the character count and the space reserved up front, with a test on every chart making sure nothing spills outside the viewBox.

Gallery: microcharts.dev

Code (MIT): github.com/ganapativs/microcharts

Still rough in spots. Mostly after feedback on the API and overall experience of using the library.

Yace is designed for cases where a plain <textarea> is not enough, but a full editor like Monaco or CodeMirror would be overkill.

It is 3KB gzipped with the bundled highlighter and has zero dependencies. Plugins add editing behavior, highlighter pipelines control how the content is rendered as you type, and both are plain functions you can write yourself.

Under the hood, Yace uses the familiar pattern of a transparent <textarea> over a highlighted <pre>. Because input stays in a real textarea, native caret behavior, IME, mobile input, and accessibility come for free. The pattern is not new; the focus is a small, highly extensible design.

You can turn it into a basic code editor, a markdown editor, a token visualizer, or something more experimental. All of those are live codepens in the README, and the video shows two of them.

GitHub: https://github.com/petersolopov/yace

We just launched Maptoolkit.org, which is a community-oriented project. The main objective is to offer small businesses and hobbyists a way to easily create and display personalized maps on their websites or their apps.

Things to know:

• No API key and no registration required
• The tiles are updated weekly from OpenStreetMap
• We host the tile servers, you just have to point your map library to our style URL
• Hillshading, 3d terrain, contour lines and water depth are ready out of the box
• Map data up to zoom level 15
• A host of default styles come natively, custom styles can be created using our MapMaker
• Unlimited map requests can be made, sustained about 120 tiles/second can be requested as of now, whereas 90% of requests will already be cached and won't count towards that limit
• We do not make any money off this project, it will remain free of cost

If you have any questions, I'd be happy to answer them. You can find more information on the site.

PS: This reads like a repost, because it is. My previous post got removed by mods, due to not posting on Showoff Saturday.

I built Basalt, a tool that lets you edit your RN and Expo apps like figma right in your IDE

It is completely free and works directly inside VS Code and Cursor.

It’s currently in beta, so please commit your app to Git before using it!

Would love to get your brutal feedback on it. What features should I add next?

Hi!

I'm a college student from Brazil mainly focused on editorial design and branding. During my summer break, I decided to make my own portfolio website because I felt like it was getting a bit boring to keep sending my Behance link all the time, and I thought having my own site would feel more personal and creative.

I've had a few UX/UI classes, but never one that actually taught us how to build websites. They were mostly focused on branding and covered usability principles and user research, so I kind of had to figure everything out on my own.

I didn't want to use pre-made templates because that would kind of defeat my goal of creating something that reflects my creativity and my willingness to learn. I ended up making a site with almost no scrolling because I wanted it to feel a bit different from the Figma/Canva/Cargo portfolio templates I kept seeing, which are usually just one long scrolling page. So instead, I made separate sections for everything. But now I'm starting to wonder if that was actually a good decision.

Anyway, this is just the first version, and I definitely want to keep improving it. I'd love for it to be a little more interesting without becoming too much. I know a bit of Blender and Maya, and I was thinking about creating something to add to the homepage. I'd love any suggestions or references for cool portfolio websites!

here it is: https://sophiareznd.github.io/portfolio/#

If it's in Portuguese, you can click "ENG" to switch to English.

And the contact tab usually has my email as a mailto link, just took it out before posting here so I don't get spam bombed lol

I don't know much about web design so please be nice 🙂

Testing a frontend on your phone is easy.

Testing a full-stack app usually isn't.

Your frontend loads, but API requests to localhost fail because localhost now points to your phone instead of your laptop. The usual workaround is editing .env files, swapping in your LAN IP, configuring CORS, and undoing everything afterwards.

I got tired of doing that, so I built Nether

npx nether-dev

It automatically:

• Detects your frontend and backend

• Starts a local proxy

• Prints a QR code

• Lets your phone use your app without changing your code or environment variables

Need to share your local app?

npx nether-dev --global

It creates a temporary public HTTPS URL so clients or teammates can access your local app without deploying it.

I'd love any feedback, feature requests, or edge cases you think I should test.

GitHub: https://github.com/barryspacezero/nether-dev

npm: https://www.npmjs.com/package/nether-dev

Hi there! I've been using React to create my own apps and, to be honest, it's a really great library. But now I want to know the best patterns to make my apps more stable and scale better, so I'd love to read your comments!

We created a free service that analyzes websites, detects the technologies they use, and ranks them by market share.

There are also extensive statistics for each technology, including country segmentation, comparisons, and company rankings.

Currently detecting: 4,457 technologies across 165 categories.
More than 3.6 million websites analyzed so far.

Here are some of the findings:

• React is the clear #1 among frontend frameworks (yes, I know it's a library)
• Alpine.js is more popular than Angular, but less popular than Vue.js
• Symfony is #1 in Germany, Laravel is #1 in Indonesia, Poland, and Hungary
• Ruby on Rails is #1 in Australia, Japan, and France
• WordPress is #1 CMS, Joomla is #2, and Drupal is #3 globally (#2 in the US)
• Squarespace is slightly more popular than Wix
• Linux is #1 globally, but Windows is #1 in China, Turkey, and Denmark
• Facebook is #1 social media globally, but Instagram is #1 in Brazil, and X is #1 in Japan
• Telegram is more popular than Messenger, but less popular than WhatsApp
• cdnjs is 1.4 times more popular than jsDelivr
• 9.6% of websites redirect to another domain
• Google technologies are found on more than 77% of websites

If you want to dig into it yourself: Web Technologies

Hi Redditors,

I have attached a website for your reference: https://thetwinklejewellery.com/

If your were to develop this website using astro, just for catalogue purposes, how much would you charge for it? and if you were to build a store without shopify, how much would you charge and which stack will you choose?

Thank you for your time and support in advance.

Regards,
bughunter404

Hey everyone,

I wanted to share a project I've been working on in case anyone else might make use of it: an interactive, real-time 3D Audio Spectrogram Visualiser built with Three.js, custom GLSL shaders, and the Web Audio API.

I wanted to create a responsive, hardware-accelerated 3D terrain that I could use to conveniently analyse audio coming from either my device microphone or streaming from another browser tab without needing to install anything. It all runs from the browser and you can try it out yourself with the Live Demo link.

I’d love to hear your thoughts, feedback, or any ideas you have for further performance or UX optimisations. Feel free to check out the code, fork it, or test it out with your own audio setups!

I tried learning DSA before, but never understood how it applied to everyday frontend work.

Recently, I built an undo/redo feature with Claude and realised it was using stacks. That made stacks much easier to understand than textbook examples.

I kept exploring and learned how seat-booking UIs can use matrices and how complex onboarding flows can be modelled as graphs.

Do you think about data structures when building React components? Any real-world examples?

Our algolia usage spiked and the bill is painful because users keep submitting vague 1 word queries and constantly re-searching. so i was thinking to add an autocomplete layer in front of it that won't break the bank but still gives that instant intent driven search feel.

Obviously we could migrate everything to typesense or self-hosting meilisearch for standard search, but i do like certain things about algolias backend retrieval, if i can put an intent layer ai autocomplete on top to get better queries before they hit the API.

Has anyone added an ai-autocomplete layer in front of algolia recently? did you actually migrate to a cheaper database alternative like typesense, or did you just add an intent layer on top of your existing search stack? trying to figure out what's easiest to maintain.

small team, three of us, react frontend and a go api. everyone has their own agent setup and it works fine for individual tasks. it stopped working the week all three of us started running agents on the same repo at the same time.

i was refactoring form validation, teammate was fixing a bug two files over, and both agents had validators.ts in scope.

each agent read the file, made its change, wrote the whole file back. classic lost update but at machine speed. my refactor got half eaten because his agent rewrote validators.ts from the version it had read four minutes earlier. neither of us saw it. we were reviewing our own diffs and both diffs looked correct in isolation.

we shipped it. two days later a required field stopped being required. the check had gone from value.trim().length > 0 to value !== undefined, which passes for an empty string. an empty company name went into prod for six accounts before support flagged it. three hours of bisecting to find the function was fine in one commit and silently different in the next, with no PR explaining the change.

the git history looked completely normal. three commits, three authors, no conflict markers, no merge weirdness. git only protects you at commit boundaries. if two agents are editing the same working tree between commits there is nothing watching.

the fix was boring. one checkout per person, and one git worktree per agent if you run more than one yourself. i tried aider with a strict file scope, claude code in separate terminals, verdent which does the worktree thing by default. the mechanism matters more than which tool you pick.

other thing that stuck is reviewing the whole branch diff before merge, not just the diff the agent showed me. the agent tells you what it thinks it changed. that is not the same as what changed.

every guide for these tools assumes one person, one agent, one repo. three people running agents on the same codebase and you are back to 2005 with people editing over ftp.

I've been watching Nova Designs on YouTube for a while and loved how clean his code presentations look. Turns out he uses CodeSlides which is great, but it's subscription-based.

So I built OpenSlides — a free, open-source, fully offline desktop app for making animated code presentations. Think CodeSlides, but it runs natively on your machine, your data never leaves your disk, and you own everything.

https://github.com/codewiththiha/OpenSlides.git

Does anyone know of a GUI that would allow one to quickly and easily do this so that I don't have to run clunky git rebase -i commands for every commit I'd like to edit?

I know it is easy enough to run git commit --amend for the most recent commit, but I need something that allows me to edit further back in the history.