Hello everyone! 👋
How's your coding journey going so far? I hope you're doing great! My name is Matias Affolter, and I'm excited to share insights into the project I’ve been working on during 2024 and beyond.
🌍 Building a Business & Blockchain-Powered Social Media
While I love coding, I had to step away from full-time frontend development to run a business and establish a company in Switzerland. Setting up a Swiss company requires around $120,000 in capital, but the good part is that you can contribute intellectual property, such as software. That’s how my previous project, Pixa.pics, which allows users to draw pixel art on the web, became an asset for the company.
🏛️ The Blockchain Foundation
Did you ever hear about STEEM or HIVE? These blockchains were among the top 10 in 2017, some reaching a $1 billion market cap! They feature a super-fast 3-second block time and use a layer-1 distributed ledger fully governed by decentralized consensus. Inspired by high-speed transaction processing in online gaming, Dan Larimer developed Graphene, a technology capable of handling 300,000 transactions per second, surpassing Visa and Mastercard combined! 🤯
🎨 Why Store Pixel Art on the Blockchain?
A year ago, I decided to fork STEEM/HIVE and integrate on-chain pixel art storage as NFTs! Unlike most NFTs (which store only a hash), our blockchain stores the actual pixel art in Base64. This means the data remains immutable forever.
💡 Storing 30kB of pixel art on Ethereum could cost thousands of dollars—on our fork, it’s fast and efficient! With 21 primary nodes (witnesses) ensuring redundancy, our solution can scale to millions of users. Beyond that, sharding would be necessary, but it's technically feasible.
🖥️ ReactJS UI - Essential Tips and Tricks 🛠️
I’m building the Pixagram UI in ReactJS. Here are some impactful tips for optimizing CSS, HTML, and JavaScript:
🎨 1. Homepage Animations & Graphics
✅ Use CSS gradients and SVGs instead of raster images—they are lightweight and scalable.
✅ Check out the fading rainbow effect on Pixagram.io 🌈
📸 2. Handling Images Efficiently
✅ Pixel art needs upscaling, not downscaling—use Canvas API instead of HTML <img> for rendering.
✅ Use react-virtualized to handle large lists of posts smoothly.
✅ Lazy-load content with Webpack chunk splitting for better performance.
🖌️ 3. Pixel Art Upscaling - WebGL & XBRZ
✅ Hexagonal rendering engine (Canvas2D) was slow—WebGL shaders are better.
✅ XBRZ algorithm can upscale pixel art by 6x into smooth shapes without AI.
✅ Runs in a worker thread, making it fast & deterministic.
🤖 4. AI-Powered Pixel Art
✅ We use Hugging Face AI to generate pixel art from selfies.
✅ Color quantization ensures pixel art remains authentic & lightweight.
✅ WebP format > PNG (smaller file size, same quality).
🎨 5. Sorting Colors Smartly
✅ Sorting colors in RGB space requires sorting 3D vectors.
✅ Z-order curve and Hilbert curve are optimal for sorting color palettes.
⚡ 6. CSS Performance Optimizations
✅ Use transform and effects instead of opacity, left, or top—they run on the GPU for smoother animations.
✅ Apply contain to prevent layout recalculations and improve render performance.
✅ will-change optimizations: Set it right before an animation starts and remove it after to avoid slowdowns.
🔥 7. React Rendering & Hydration
✅ Use PureComponent to prevent unnecessary re-renders.
✅ No automatic hydration—everything is handled deterministically for better performance.
🚀 Final Thoughts
This project is a blend of blockchain, pixel art, and AI—a unique combination that makes Pixagram an innovative platform. We’re currently working towards government approval for fundraising, and once that’s set, we’re rolling out big updates! 🚀
- https://pixagram.io/ (DEMO)
- https://vimeo.com/1058112712 (VIDEO)
- https://tinyurl.com/pixadata (WHITEPAPER & PITCH DECK)
- https://www.linkedin.com/company/pixagram-blockchain/ (LINKEDIN)
Let me know what you think! Do you have other performance tricks you use in your React projects? Drop them in the comments below! 💬👇
Top comments (0)