Forem: ViperT

[Boost]

ViperT — Wed, 19 Feb 2025 18:06:51 +0000

🚀 Blockchain Social Media Platform - ReactJS UI - Tips and Tricks!

ViperT ・ Feb 19

#webdev #javascript #blockchain #frontend

🚀 Blockchain Social Media Platform - ReactJS UI - Tips and Tricks!

ViperT — Wed, 19 Feb 2025 17:56:09 +0000

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! 💬👇

Are Algorithms a Threat to Democracy? Understanding the Impact of Digital Intermediaries

ViperT — Sat, 06 Jan 2024 07:00:01 +0000

The document "Governing Platforms - Are Algorithms a Threat to Democracy? The Rise of Intermediaries: A Challenge for Public Discourse" by Professor Dr. Birgit Stark, Daniel Stegmann M.A., Melanie Magin Assoc. Prof., and Dr. Pascal Jürgens, published on May 26, 2020, as part of the Governing Platforms research project, delves into the impact of algorithms and intermediaries, such as social media platforms, on public discourse and democracy.

Introduction

In an era where digital platforms govern our access to information, the pivotal question arises: Are algorithms enhancing or endangering our democratic processes? This post delves deep into the intricate dynamics between digital intermediaries and democracy, based on the comprehensive insights from the "Governing Platforms" study. Join us as we unravel the complexities of this digital conundrum.

Information Filtering and Democracy

The digital age has brought about a significant shift in how information is curated and consumed, raising critical questions about the impact of algorithms on democracy. Filter Bubbles and Echo Chambers often dominate the discourse, with concerns that algorithmic curation leads to information silos. However, the reality might be less dire. Studies indicate that the effect of these bubbles is overstated, suggesting a more complex interaction between users and information. The Role of Algorithms in shaping our information landscape is undeniable, yet it's crucial to distinguish between the potential risks and actual impact. Democracy and Diverse Opinions thrive on exposure to varying viewpoints. While algorithms might narrow our view, they also have the potential to introduce a wide array of perspectives, challenging the notion that they inherently undermine democratic discourse.

Empirical Studies on Algorithmic Personalization

Algorithmic personalization, a cornerstone of social media platforms, plays a pivotal role in shaping user experience. Diverse Information Repertoires highlight that users are often exposed to a broad spectrum of content, contrary to the belief that algorithms always limit perspective diversity. Affective Polarization, however, emerges as a concern. While users encounter diverse opinions, the way social media platforms function can intensify emotional responses towards opposing views, fostering negative stereotypes. Understanding User Behavior in the context of these platforms is essential. It's not just about the algorithms themselves, but also how users interact with them, leading to a nuanced understanding of the role of algorithmic personalization in society.

Social Media’s Role in Polarization and Disinformation

Social media's influence on public opinion and societal polarization is multifaceted. Indirect Contribution to Polarization arises from the platforms' propensity to present a skewed perception of public opinion. Disinformation Campaigns exacerbate this issue, although their actual reach might be more limited than perceived. The role of social media in Spreading Disinformation is a complex interplay between user behavior, platform algorithms, and external actors. Understanding this dynamic is crucial for developing strategies to mitigate the negative impacts on public discourse.

Algorithmic Gatekeeping vs. Human Gatekeeping

The shift from human editorial processes to Algorithmic Gatekeeping marks a significant change in how information is prioritized and presented. Personal Significance vs. Social Significance: Algorithms tend to focus on what is most engaging to the individual, a stark contrast to traditional journalistic values that emphasize societal relevance. Evaluating the Impacts of this shift is critical. While algorithmic curation can offer personalized content, it may also sideline important societal issues, raising questions about the balance between personal relevance and public interest.

Challenges for Traditional Media and Public Discourse

The rise of algorithmic curation presents New Challenges for Traditional Media, which must adapt to remain relevant in a changing landscape. The Quality of Public Discourse is at stake, with concerns over the trivialization of news and the spread of misinformation. Combatting Hate Speech and Incivility becomes increasingly difficult in an environment where sensational and divisive content often gains traction. These challenges require innovative approaches to ensure that traditional media can continue to play a vital role in informing the public and fostering healthy discourse.

Opinion Formation in the Digital Age

In the digital age, Intermediaries like Social Media Platforms have become key players in news dissemination. Shaping News Production and Consumption: Their algorithms significantly influence what news is seen and shared, affecting public opinion formation. Adapting to New Realities: It's essential to understand how these changes impact the broader societal context and what it means for the future of informed citizenry in a democratic society.

Recommendations for Future Research

Understanding Algorithmic Personalization: More research is needed to fully grasp the extent of its impact on society. Regulatory Measures and Transparency are vital to ensure that algorithms serve the public interest without compromising democratic values. Maintaining a Healthy Democratic Discourse: There is a pressing need for policies and practices that promote diversity and transparency in the digital information ecosystem.

Conclusion

As we navigate the intricate web of algorithms and democracy, it becomes clear that this is not just a technological issue, but a societal one at its core. The balance between algorithmic efficiency and democratic integrity is delicate and demands our continuous attention and action. By fostering a deeper understanding and advocating for transparency and regulation, we can harness the power of digital intermediaries to enhance, rather than endanger, our democratic processes. The future of our democracy may very well depend on how we choose to govern these digital platforms.

JOYSON, CBOR, BSON, JSON - Advanced Data Serialization

ViperT — Mon, 25 Dec 2023 02:04:56 +0000

In the dynamic world of web development, the efficient handling of complex data structures during network transmission has become increasingly vital. JavaScript's ecosystem offers a plethora of data serialization modules, each tailored with unique capabilities. In this comprehensive exploration, we'll dive deep into several of these modules - JOYSON, CBOR, JSON, MessagePacker, BSON, and the structured clone algorithm. We'll unravel their indispensability in modern web development, particularly in applications like React, where performance and data integrity are paramount.

Understanding Data Serialization

Data serialization, the cornerstone of web communication, involves transforming intricate data structures into a storable or transmittable format, only to be accurately reconstructed later. While traditional methods like JSON.stringify and JSON.parse are prevalent, they exhibit inherent limitations, especially when grappling with binary data and advanced data types.

JSON and Its Constraints

JSON (JavaScript Object Notation), a text-based format, is celebrated for its simplicity and human readability. But when it comes to binary data, JSON falters, lacking native support for types like Date, RegExp, or Buffer.

JOYSON: Elevating JSON

https://dev.to/vipert/joyson-advanced-data-serialization-in-javascript-4fc

JOYSON takes JSON a notch higher, offering:

Advanced Types and Readability: Preserving JSON's legibility, JOYSON introduces support for advanced types. Its ingenious keying system, with prefixes like "##" and "#$", distinguishes values necessitating decoding from those that don't. For instance, "data:joyson/undefined" uniquely denotes an undefined value.
TypedArrays and Efficiency: JOYSON adopts base64 encoded TypedArrays, enhancing efficiency in handling voluminous datasets.
Use Cases: In scenarios like React applications demanding quick updates and support for types like Date or RegExp, JOYSON is a game-changer.

CBOR: The Compact Binary Object Representation

CBOR emerges as a binary data serialization format, more succinct than JSON and apt for scenarios demanding efficient data transmission. Its utility shines in IoT devices and server-to-server communication, where bandwidth and processing power are at a premium.

BSON and MessagePacker

BSON (Binary JSON), primarily employed in MongoDB, is akin to JSON but excels in certain operations like encoding and decoding. MessagePacker, another binary serialization contender, prides itself on its size and speed efficiency, making it ideal for real-time data transmission.

The Structured Clone Algorithm

The structured clone algorithm, manifested in modules like structured-clone, is adept at deep cloning objects, covering complex types beyond JSON's reach. This capability is invaluable for replicating objects with circular references or special types.

JOYSON vs. CBOR: A Performance and Use Case Analysis

JOYSON and CBOR, while both enhancing JSON, cater to distinct needs:

JOYSON: Strikes a harmony between readability and efficiency. Notably swifter than CBOR in processing large TypedArrays, it removes them from the header during serialization, significantly curtailing processing time.
CBOR: Perfect for compact data depiction, but JOYSON might surpass it in certain speed-centric scenarios.

Extending the Conversation: Serialization in Modern Web Development

Serialization is more than just a data transmission necessity; it's the backbone of modern web development. As we delve deeper into the realm of complex web applications, the choice of serialization technique becomes crucial. Here's why:

Performance: Web applications, particularly those built with frameworks like React, Angular, or Vue, demand brisk state updates and data handling. Efficient serialization directly translates to enhanced user experiences and app performance.
Data Integrity: In an era where data is king, maintaining its integrity during transmission is non-negotiable. Advanced serialization methods ensure that data, in all its complexity, is accurately transmitted and reconstructed, be it in a Node.js backend or a browser-based frontend.

Practical Implications and Considerations

Developers must judiciously select their serialization tools, factoring in aspects like:

Data Size and Complexity: Does the application handle large datasets or complex nested objects? If so, binary serialization formats might be more beneficial.
Network Constraints: Applications operating under stringent bandwidth conditions might favor compact formats like CBOR or BSON.
Development Ecosystem: The choice might also depend on the broader tech stack. For instance, BSON naturally aligns with MongoDB-driven applications.

The Future of Serialization

As we march into the future, the evolution of serialization methods will continue to be driven by emerging technologies and ever-growing data demands. We might witness the advent of even more optimized formats, or perhaps a shift towards entirely new serialization paradigms, influenced by advancements in areas like AI, IoT, and edge computing.

Efficiency (100 rounds of processing ~40kB)

Detailed Analysis with Ratings

BSON

Loading Speed: Very slow, longest time 800ms.
Rating:
- Encoding: 2.0/10
- Decoding: 2.5/10
- Longest: 1.0/10
- Average: 3.0/10
- Shortest: 4.0/10
- Total: 2.5/10

Joyson

Performance: Exceptionally fast, longest time 3-4ms.
Rating:
- Encoding: 9.5/10
- Decoding: 9.5/10
- Longest: 9.5/10
- Average: 9.7/10
- Shortest: 9.8/10
- Total: 9.6/10

Message Packer

Initial Encoding Speed: Initially slow but improves.
Balanced Performance: Post-initial usage shows good balance.
Rating:
- Encoding: 8.0/10 (initially lower, improves over time)
- Decoding: 8.5/10
- Longest: 8.0/10
- Average: 8.5/10
- Shortest: 9.0/10
- Total: 8.5/10

Conclusions

BSON: Best for specific ecosystems like MongoDB, but slow.
Joyson: Top choice for high-speed, efficient data processing.
Message Packer: Excellent for long-running applications with a balance between encoding and decoding post-initial usage.

Feature	core-js	joyson (pack/unpack)	msgpackr	cbor-x	cborg	bson	structured-clone
Average time (ms)	0.1391	0.7914	1.1096	1.5174	1.6761	9.4376	5.3649
Longest time (ms)	4.4	1.9	35.8	44.5	49.4	1128.9	10.7
Shortest time (ms)	0	0.6	0.5	0.8	1	4.6	4.7
Total time (ms)	139.1	791.4 (100%)	1109.6 (140%)	1517.4 (191%)	1676.1 (211%)	9437.6 (1193%)	5364.9 (678%)
Used size (bytes)	N/A	41684	33983	29105	37715	43431	43276

Wrapping Up

In the grand scheme of web development, each serialization module - JOYSON, CBOR, BSON, and others - plays a pivotal role, tailored to specific scenarios and needs. JOYSON stands out for balancing JSON's readability with enhanced efficiency and type support. CBOR and BSON excel in compact binary serialization, while the structured clone algorithm shines in deep cloning of complex objects. The art lies in choosing the right tool for the right job, a decision that can profoundly impact the performance and success of web applications.

Source: https://www.npmjs.com/package/joyson, https://www.npmjs.com/package/cbor-x, https://www.npmjs.com/package/cborg, https://www.npmjs.com/package/bson, https://www.npmjs.com/package/msgpackr

JOYSON - Advanced Data Serialization In JavaScript

ViperT — Mon, 25 Dec 2023 01:46:54 +0000

JOYSON: Revolutionizing JSON Serialization with Advanced Data Handling

SOURCE: https://www.npmjs.com/package/joyson

Introduction

JOYSON is a transformative JavaScript module, redefining the landscape of JSON object encoding and decoding. It's especially proficient with TypedArrays, offering memory-efficient handling of large data structures and binary data serialization.

Practical Usage in JavaScript

Encoding/Decoding an Object

Using JOYSON, complex objects including those with TypedArrays, regular expressions, and other complex types can be efficiently encoded and decoded. Here's an example:

const object = {test: "hello", data: [1, 23, 5, 6, {"##": undefined, "##test": /regex/i, date: new Date(), table: [-0, 111111111n, -666.777, new Set([1, 2, "blue", {}]), new Map()], arr: Int16Array.of(-6, 777, 12), arr2: new Uint8Array(9)}, "hello here is asaitama I love JS"]};
const encoded = JOYSON.stringify(object);
// `{"test":"hello","data":[1,23,5,6,{"#$IyM=":"data:joyson/undefined;","#$IyN0ZXN0":"data:joyson/regexp;cmVnZXg=:aQ==","##date":"data:joyson/date;2023-12-25T00:33:37.935Z","table":["data:joyson/number;-0","data:joyson/bigint;111111111",-666.777,"data:joyson/set;WzEsMiwiYmx1ZSIse31d","data:joyson/map;W10="],"##arr":"data:joyson/int16array;base64,+v8JAwwA","##arr2":"data:joyson/uint8array;base64,AAAAAAAAAAAA"},"hello here is asaitama I love JS"]}`
const decoded = JOYSON.parse(encoded);

console.log(object, encoded, decoded);

Packing/Unpacking Data

For efficient binary serialization, JOYSON's pack and unpack methods can be used as follows:

const yourObject = {test: "hello", data: [1, 23, 5, 6, {arr: Int16Array.of(-6, 777, 12), arr2: new Uint8Array(9)}]};
const packedData = JOYSON.pack(yourObject); // Uint8Array of 151 Bytes
const unpackedData = JOYSON.unpack(packedData);

console.log(packedData, unpackedData);

Conclusion

JOYSON represents a significant advancement in the field of data serialization, offering unparalleled efficiency, speed, and versatility. Its development marks a key milestone in addressing the limitations of traditional JSON methods, making it an essential tool for modern web developers. It is yet faster than MessagePacker and CBOR most of the time, also more extensive than those.

Rendering Pixel Art (From "Japanese Patterns" to "Emulators" throughout "1980's Classics")

ViperT — Mon, 23 Oct 2023 07:39:34 +0000

We will visualize multiple grid patterns: Squares, Hexagon, Kikko, Omniscale, xBRZ... All that are available in https://pixa.pics/ (a project of mine to design pixel art)

When it comes to rendering pixel art, the key is to maintain the artwork's integrity, especially when upscaling or downsampling. The method you use for rendering can heavily affect how the artwork looks.

Why might it look blurry?

One of the most straightforward methods is the Nearest Neighbor algorithm. It simply takes the nearest pixel's color value and uses that for the new pixel. This results in a crisp-edged look, ideal for preserving hard edges in pixel art. Other algorithms like bilinear or bicubic interpolation take the average of several neighboring pixels. For photos, this can produce smoother transitions, but for pixel art, it results in a blurry look, diluting the distinct hard edges.

Emulator Upscaling

Modern emulators often upscale older, low-resolution games to make them more visually appealing on current high-resolution displays.

xBRZ:

xBRZ (Scale By Rules) is an upscaling filter that enlarges images by an integer factor. It's designed to convert raster graphics into vector graphics, which are then rasterized back at a higher resolution. This makes the upscaled image smoother and free of artifacts, preserving the sharpness of pixel art while improving the visual quality.

OmniScale:

OmniScale is another modern algorithm. While it's somewhat similar to xBRZ, it uses different techniques to provide even smoother and more detailed upscaling. It focuses on ensuring that edges are crisp and avoids blending unrelated pixels.

Pixel Upscaled: Square vs. Hexagon vs. Kikko:

Square Pixels (Nearest Neighbor):

The traditional way of displaying pixel art is using squares. This is mainly because the vast majority of screens are made up of square pixels. When upscaling using squares, the artwork maintains its original look, and each pixel just becomes a bigger square.

Hexagonal Pixels:

Upscaling using hexagons offers a different visual aesthetic. It can make the image look more organic due to the six-sided nature of hexagons. However, it's a departure from the traditional pixel art look, and it might not always be faithful to the original design.

Bishamon Kikko Pattern:

Kikko is a traditional Japanese pattern based on hexagons. The word "Kikko" refers to the shell of a tortoise, and the hexagonal pattern is reminiscent of its shape. In Japanese culture, the tortoise is a symbol of longevity, and hence this pattern is often associated with wishes for a long life.

In the context of pixel art, if one were to upscale using a Kikko pattern, it would be a fusion of traditional Japanese aesthetics with digital art. It would be a unique look, different from traditional pixel art, but could be visually appealing in its own right.

*Click on the image to zoom in ;)

Conclusion:

The choice of rendering and upscaling method for pixel art boils down to the aesthetic you're aiming for. Nearest Neighbor and modern algorithms like xBRZ and OmniScale ensure crisp edges and an improved visual quality. However, choosing to upscale with different shapes like hexagons or patterns like Kikko introduces a unique visual flair, bridging the old with the new.

Cracking JS Hexagons 🔍🤔

ViperT — Fri, 20 Oct 2023 17:59:26 +0000

Author: Affolter Matias

Have you ever wondered how to turn a simple image into a mesmerizing hexagon masterpiece? No? Well, we're going to show you anyway! Our hero for today is a JavaScript function that can generate stunning hexagonal patterns from regular images. 🎨✨

The Hexagon Enigma 🤯❓

The generateFinalBase64 function is our main magician. It takes an originalImageData and a radius as parameters. But wait, what's the deal with that radius value? Why must it be between 2 and 36? Well, good question! It turns out that we can't just make hexagons of any size; there are limits to the magic. 🪄

"Invalid radius value. Must within 2 and 36." - The Magic Barrier 🧙‍♂️

Now, let's dive into the incantations of this function:

a, r, and d are constants that we need for hexagon math. Why? Because hexagons are all about angles (radians) radius and diameter! 📐📏

We create a canvas and set its width and height. But the calculations for the canvas dimensions are like deciphering an ancient hexagonal script. What's with that Math.sin(a) and Math.cos(a) stuff? It's all part of the hexagon secret code. 🔍🔢

==> Hexagon secret code "explained"

There's a function called getUint32. It takes some data and an index and returns a magical 32-bit integer. Ever wondered how colors are represented in the digital realm? It's all about these bits of wizardry! 🧙‍♂️🌈

And then, there's uint32ToHex. It turns those magical 32-bit integers into colorful HTML hex codes. It's like turning lead into gold, but much more colorful! 🌟🌈

getColor gets the color of a pixel from our image data and makes it look pretty. Who doesn't love a beautiful hexagon in their favorite color? 🎨😍
drawHexagon does what its name says - it draws hexagons with style. We even give them a stroke and a fill. Who knew hexagons had such fashion sense? 👗👠
drawGrid is the mastermind behind the big picture. It takes care of arranging hexagons in a grid, complete with zigzags! It's like a symphony of hexagons dancing on a canvas. 🎶💃

Finally, we bring everything together, paint it on a canvas, and return our hexagon masterpiece in all its glory. It's like making a delicious hexagonal cake and serving it to the world. 🍰🌍

The Grand Finale 🌟✨

But that's not the end of our adventure! There's one more function called hexagonrender. It takes an image_data, a scale, and something called pool. And it returns a promise! What's the promise, you ask? The promise of a scaled-up image data. It's like a magician pulling a rabbit out of a hat! 🐇🎩

And that, my friends, is how you unlock the secrets of the hexagon code. Go forth, create hexagonal wonders, and remember, every great piece of art starts with a little bit of magic! ✨🎨

Used in https://pixa.pics/ where you can draw pixel art.

/* MIT License, Copyright (c) 2023 Affolter Matias */
function generateFinalBase64(originalImageData, radius) {

    if (radius <= 2 || radius >= 36) {
        throw new Error("Invalid radius value. Must within 2 and 36");
    }

    // Create constant
    const a = 2 * Math.PI / 6;
    const r = radius;
    const d = r * 2;

    // Create an intermediate canvas to draw hexagon onto it
    const canvas = document.createElement("canvas");
    canvas.width = originalImageData.width * d - (Math.floor(originalImageData.width/2)*r); // Hexagons are taking 1x Diameter less 1/2 radius of width
    canvas.height = originalImageData.height * (d * Math.sin(a)) + (originalImageData.width % 2 === 0 ? d: r); // Hexagons are taking a height that is computed differently
    const ctx = canvas.getContext('2d');

    function getUint32(data, index) {
        // Verify the given index is within the bounds of the r, g, b, a uint8array
        if (index >= 0 && index < data.length) {
            // "Sum up" 4 x 8bits into 1 x 32 bit unsigned integer
            return ((data[index] << 24) | (data[index+1] << 16) | (data[index+2] << 8) | data[index+3] | 0) >>> 0
        }
        return 0;
    }

    function uint32ToHex(uint32) {
        // Converting the number to a hexadecimal string which is added to a string made of zeroes
        // The hexadecimal with padding is cut to represent a fixed length of rrggbbaa which are added to "#"
       return "#".concat("00000000".concat(uint32.toString(16)).slice(-8));
    }

    function getColor(data, w, x, y) {
        let index = (y * w + x) * 4; // Compute the index (within the data where 4 elements gives a color
        return uint32ToHex(getUint32(data, index));
    }

    function drawHexagon(ctx, x, y, color) {
        // Define the style of painting on our canvas context
        ctx.lineWidth = 1;
        ctx.strokeStyle = color;
        ctx.fillStyle = color;
        ctx.beginPath();
        // Draw all intersections in a new path
        for (let i = 0; i < 6; i++) {
            ctx.lineTo(x + r * Math.cos(a * i), y + r * Math.sin(a * i));
        }
        // Close the path and fill the area
        ctx.closePath(); ctx.stroke(); ctx.fill();
    }

    function drawGrid(ctx, data, width, height, sizeX, sizeY) {
        let posX = 0, posY = 0;
        // When we return to a new line, if we have an odd number of column
        // We end up going to the bottom from a higher y coordinate (ZIGZAG in Y)
        let RorD = sizeX % 2 === 1 ? r: d; // Must go once or twice to the bottom

        // As long as we have column to then change y coordinate to the new lower line
        for (let y = r; posY < sizeY; y += RorD * Math.sin(a)) {
            posX = 0;
            for (
                let x = r, j = 0; // Reset cursor x
                posX < sizeX; // As long as we still have some column in line
                // Do the zigzag magic between hexagon of a line
                    x += r * (1 + Math.cos(a)),
                    y += (-1) ** j++ * r * Math.sin(a)
            ) {
                // Get the hexadecimal HTML5 color and draw the shape
                drawHexagon(ctx, x, y, getColor(data, sizeX, posX, posY));
                posX++; // Update current coordinate X
            }
            posY++; // Update current coordinate Y
        }
    }

    // Paint our new image into our working canvas
    drawGrid(ctx, originalImageData.data, canvas.width, canvas.height, originalImageData.width, originalImageData.height);

    // Paint the working canvas into a new one with a ratio that is not distorted
    // Since hexagon are placed asymmetrically in columns and lines, we have to flatten the height a bit
    const canvas2 = document.createElement("canvas");
    canvas2.width = canvas.width; // The width doesn't change
    // Yet we apply the same mathematical operation of the one used for the width yet for the height
    canvas2.height = originalImageData.height * d - (Math.floor(originalImageData.height/2)*r);
    const ctx2 = canvas2.getContext('2d');
    // Draw the image with a correct ratio
    ctx2.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, canvas2.width, canvas2.height);
    // Return the new image data
    return ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
}

// This function return a promise that return the up scaled image data
function hexagonrender(image_data, scale, pool) {
    return new Promise( function(resolve, reject){
        resolve(generateFinalBase64(image_data, scale));
    });
}

module.exports = { hexagonrender: hexagonrender };

TIPS ON: The Garbage Collector Myth: A Reflection on Web App Memory Efficiency and Corporate Structure (2/2)

ViperT — Mon, 02 Oct 2023 16:26:17 +0000

BASED ON THIS THEOREM: https://dev.to/vipert/the-garbage-collector-myth-a-reflection-on-web-app-memory-efficiency-and-corporate-structure-3ho6

MEANT TO EXPLAIN THAT: "The inefficiencies in our code often mirror the inefficiencies in our teams."

HERE IS: Navigating the Web of Memory: Practical Steps and Mistakes to Avoid

In the vast landscape of web development, navigating the intricacies of memory management becomes as essential as following the north star on a dark, clouded night. The beauty of web applications lies not just in their functionalities, but in the efficiency and precision with which they are sculpted. And, often, this requires breaking old patterns to create new, more streamlined pathways.

"Fresh winds that break, also create."

Theorem: The Art of Object Reuse and Efficient Memory Management

Crafting a web application is much like molding a piece of art. While creating something from scratch is often applauded, reusing elements without compromising on quality or integrity is an art in itself. Understanding and leveraging this practice holds the key to efficient memory usage.

Techniques in Practice:

Reusing Objects: Instead of continuously spawning new objects, consider maintaining a pool. When an object is no longer needed, it's returned to the pool rather than being discarded, ready to be repurposed. This minimizes the overhead of frequent allocations and garbage collections.
TypedArray and Sub Arrays: The use of TypedArrays can be a boon for performance. By sometimes employing a sub-array and avoiding the slice method, unnecessary copying is mitigated.
Internal Temporary Variables: While placing temporary variables inside an object's class might not directly impact memory, it can have implications for cleaner and more efficient code.

Common Pitfalls:

Drawing from real-world examples, platforms such as Instagram provide us with valuable lessons. Despite using advanced concepts like immutability, it's suspected they falter by creating 'blobs' without invoking "revokeObjectUrl" or even BitmapImages without the necessary "destroy" function. Such oversights can severely hinder the garbage collector, making it oblivious to unnecessary BitmapImages and object URLs.

Another glaring example is SoundCloud on desktop. Hours-long listening sessions cause accumulating audio files in the JS HEAP, which are only removed upon a session end or forced tab refresh. Solutions? The practice of destroying media content when it's no longer in view, or even utilizing tools like indexedDB for storage, ensuring swift retrievals without taxing network bandwidth.

Mindset for Modern Developers:

It's essential to recognize that negative comments or distractions won't shape the trajectory of our coding journey. Mastery in any discipline requires dedication, focus, and continuous learning. And this is especially true for web development. To this end, allocating time, perhaps even a day each week, for exploring others' codes, diving into insightful articles, and remaining updated with evolving browser and JavaScript nuances becomes imperative.

Conclusion:
As we harness the winds of change, breaking certain patterns and creating more efficient ones, the horizon of web application development shines brighter. By mastering the art of memory management and avoiding common pitfalls, we can craft experiences that are both delightful for the user and efficient in execution.

So, as we navigate the seas of the web, let's steer our ships with knowledge, practice, and unwavering focus. 🌟

The Probable Web Memory Hiccups of Giants: A Closer Look

When we delve deeper into the mechanics of popular platforms like Instagram and SoundCloud on the web, a recurrent issue surfaces: memory management.

It is suspected that these platforms create "blob" objects, a raw data representation often used for tasks like file operations, without accompanying them with the necessary "revokeObjectUrl" method. The revokeObjectUrl method releases any existing object URLs which were previously generated by the createObjectURL method, thus aiding in memory management.

Furthermore, they might be using BitmapImage objects without invoking the vital "destroy" function. Such an oversight can have profound implications for the overall memory usage of an application.

Here's why these two points are of particular concern:

Garbage Collector's Blind Spot: The garbage collector is a robust tool, but it's not omniscient. It doesn't frequently check for obsolete bitmap images and object URLs. More often than not, during a typical browsing session, these overlooked objects remain untouched. This, over time, accumulates and could lead to inefficient memory usage, degrading the user's experience.
Untouched Memory Reserves: When "blobs" and BitmapImage objects are left without their respective cleanup calls, they remain as untouched memory reserves. This means that even if they are no longer serving any purpose or function within the application, they continue to consume precious memory resources. Such residues can cause notable lags and glitches, especially in prolonged user sessions.

This points us to an imperative lesson: while giants in the tech world pave the way with innovation, even they aren't immune to overlook certain aspects. As developers and tech enthusiasts, recognizing and rectifying such memory pitfalls becomes our collective responsibility. After all, the devil, as they say, is in the details.

The Imperative of Personal Development for Web Developers in Large Organizations

In the dynamic realm of web development, where technologies evolve at a rapid pace, continuous learning becomes more than just a value-added skill—it becomes a necessity. For developers working in large corporations, this principle of constant personal and professional growth holds even more weight. One might ask why? Here's a perspective that not only answers this but also offers a way forward.

Why Personal Projects and Blogs Matter:

Enhancing Skill Sets: Personal projects allow developers to experiment with new technologies, design paradigms, or methodologies that might not be part of their day-to-day work but could provide invaluable insights or skills.
Building a Portfolio: A developer's personal projects or blog can serve as a testament to their passion, commitment, and expertise in the field. It showcases their proactive approach to learning and adapting.
Community Building: By sharing knowledge through blogs or online platforms, developers contribute to the growth of the community. It's a two-way street—the community benefits from the shared expertise, and the developer gains feedback, alternative viewpoints, and potential collaboration opportunities.

A Proposed Approach for Large Corporations:

Given the significance of personal development, large organizations should adopt a two-pronged approach:

Dedicated Off-Code Day: Allocate a dedicated day or half-day during the workweek, still compensated, for developers to focus solely on personal projects, research, or knowledge enhancement. This would not only aid in their personal growth but would also bring fresh perspectives and innovative solutions to the organization.
A Benchmark for Productivity: While productivity should never be solely gauged by one's side projects or blogs, a consistent commitment to these can indicate a developer's passion and drive. A developer who cannot set aside time for personal research, projects, or sharing knowledge might need to reconsider their position in a rapidly evolving industry.

In Conclusion:

In the vast landscape of web development, standing still is equivalent to moving backward. Personal projects, blogs, and continuous learning are not just extracurriculars—they are essential tools for ensuring relevance, growth, and productivity. Corporations that recognize this and invest in their developers' personal growth will find themselves at the forefront of innovation and industry leadership. After all, growth and learning are iterative, and there's always another milestone on the horizon. 🚀

The Garbage Collector Myth: A Reflection on Web App Memory Efficiency and Corporate Structure

ViperT — Sat, 30 Sep 2023 14:44:05 +0000

In the intricate realm of web applications, memory efficiency often hides behind the mask of the garbage collector. While this automated janitor is heralded for its ability to clean up unused memory, its efficacy is frequently overestimated. The difference between the perceived efficiency and the real-world scenario can be exemplified by the Garbage Collector Myth.

"The inefficiencies in our code often mirror the inefficiencies in our teams."

Theorem: The Garbage Collector Myth

Given a web application, the percentage reduction in memory usage after invoking the garbage collector (typically seen during a memory snapshot) mirrors the percentage of non-contributing or under-performing employees in large corporations, particularly those behind such applications.

Evidence:

Discrepancy in Memory Use: When examining the memory footprint of a running web application in a JavaScript engine versus the size after a memory snapshot (which calls the garbage collector), a stark difference is often observed. This snapshot can, at times, show a reduction of up to 400% or more.
Examples in Practice: Notable platforms like Instagram and various other large-scale web services demonstrate properties indicative of non-optimized memory utilization. Often, these applications, much like bloated corporations, contain "dirty" logical instructions that are far from clean, elegant, or RAM-friendly.
Inefficiencies in Code vs. Inefficiencies in Corporations: The amount of unused JavaScript objects in the HEAP, which the garbage collector deems non-essential, can be seen as a metaphor for non-contributing employees in a corporate setting. Just as the garbage collector identifies and removes unused objects to optimize the application, corporations often recognize and (unfortunately) have to address under performing employees for optimal productivity.

Discussion:

The inability of developers to programmatically call the garbage collector and rely on its clean-up is reminiscent of the larger bureaucratic structures where manual interventions are challenging. As a result, developers, like managers, must think differently and optimize at the source.

The Garbage Collector Myth speaks to a greater irony. Web applications, which are developed by teams within corporations, reflect the inefficiencies inherent in those very corporations. The non-essential objects cluttering the HEAP are analogous to employees whose roles have become obsolete or redundant in the fast-evolving corporate world.

Conclusion:

This theorem, while humorous in its parallelism, underscores two critical messages:

Web Application Development: Developers must be vigilant and proactive in optimizing memory usage from the onset, rather than relying solely on garbage collectors. This will result in cleaner, faster, and more efficient applications that provide enhanced user experiences.
Corporate Structure: Modern corporations, especially tech giants, should constantly evaluate and optimize their structures, ensuring that every team member contributes positively to the organization's overarching goals.

In essence, both the world of web development and corporate structures could benefit from regular introspection, efficient design, and proactive optimization. 😊

BitArray & SetFixed (JS) are awesome for compression or drawing | 250 K Booleans => 31 kB

ViperT — Sat, 30 Sep 2023 13:51:16 +0000

Boolean Array (~ 11.3 kB & 0 dep.)

Introduction

Introducing the Ultimate JavaScript Module for Memory-Efficient Boolean Management

🚀 Optimized Efficiency: Leveraging the power of this module, you can ensure unparalleled memory efficiency, especially in applications requiring operations that most other solutions simply can't match. With other systems, you could easily find yourself using up to ten times more system resources. With our solution, you can kiss those inefficiencies goodbye.

🔍 Real-world Applications:

Data Compression: When you're compressing data and need to keep track of repeated patterns, our module excels. Register whether patterns are stored in a table swiftly and efficiently.
Drawing Apps: For those seeking rapid pixel selection in drawing applications, this module is your go-to. Process pixel selections at lightning speed!

💾 Memory Footprint:

A staggering 1/4 million entries take up a mere 31kB in memory.
Engaging with ten 2D pixel selections of 500x500? That's a featherlight 0.3mB for the entire lot.
Store up to eight thousand boolean values in just 1kB.

🔐 Precision Limitations:

Designed for a singular purpose: handling boolean values.
Functions within a fixed index size limited to positive whole numbers.
Doesn't try to be everything; it just excels at what it's meant to do.

🛠️ Design Efficiency:

Methods and properties are memory-efficient, with intentional design ensuring that the module remains within its internal state. Only the properties and methods with public "getters" extend beyond.
Low-level operations are precisely tuned for the JavaScript engine, ensuring minimal computation force. We've rigged numbers to avoid bulky double storage, streamlining memory usage further.

🖋️ Bottom Line: If you're into data compression or drawing applications, this kind of solution is almost indispensable. With its precise focus and memory efficiency, it's time to elevate your operations to the next level with our module.

The source code has many comments as well and the library is very flexible, there is many ways to harness its potential with different ways to use it in your code.

https://www.npmjs.com/package/@asaitama/boolean-array

Example

The SmartRunLengthCompress and SmartRunLengthDecompress functions utilize the SetFixed and BitArray data structures to implement a highly efficient form of run-length encoding. By using a 1-bit matchmaking system, SetFixed in conjunction with BitArray facilitates compression that's almost 8 times more space-efficient for non-repeating values, while only consuming an eighth more space for multiple repetitions. This enables the compression of image data, particularly suitable for pixel art with similar colors, into a much more compact form. The design leverages the concept of a "lazy" run-length algorithm, where lengths are not always mandatory, and values without specific lengths are set to false (0) in the bitarray. Thus, it provides a unique and optimized approach to data compression, which balances space savings with the ability to handle both repeating and non-repeating values.


function SmartRunLengthCompress(data_uintX) {
    var lengths = new Uint8Array(data_uintX.length);
    var lengths_l = 0;
    var values_constructor_bits = data_uintX instanceof Uint32Array ? 32: data_uintX instanceof Uint16Array ? 16: 8;
    var values_constructor = values_constructor_bits === 32 ? Uint32Array: values_constructor_bits === 16 ? Uint16Array: Uint8Array;
    var values = new values_constructor(data_uintX.length);
    var values_l = 0;
    var values_using_compression = new SetFixed(data_uintX.length);

    var current = data_uintX[0], latest = data_uintX[1], repeated = 1;
    var i = 1, l = data_uintX.length;

    for(; (i|0) < (l|0); i = i + 1|0){

        latest = data_uintX[i];

        if((latest|0) != (current|0) || (repeated|0) >= 0xFF){ // The value is new or surpass chunk length
            if((repeated|0) > 1){
                // We set the index of the current value to hold a length
                values_using_compression.add(i-repeated);
                // We add the number of repetition inside the lengths array
                lengths[lengths_l] = repeated|0
                lengths_l = lengths_l+1|0;
                // We add the value inside the values array
                values[values_l] = (current|0)>>>0;
                values_l = values_l+1|0;
            }else {
                // We add the value inside the values array
                values[values_l] = (current|0)>>>0;
                values_l = values_l+1|0;
            }
            repeated = 1;
            current = (latest|0)>>>0;
        }else { // The value is repeated
            repeated = repeated+1|0;
        }
    }

    if((repeated|0) > 1){
        // We set the index of the current value to hold a length
        values_using_compression.add(i-1)
        // We add the number of repetition inside the lengths array
        lengths[lengths_l] = repeated|0
        lengths_l = lengths_l+1|0;
        // We add the value inside the values array
        values[values_l] = (current|0)>>>0;
        values_l = values_l+1|0;
    }else {
        // We add the value inside the values array
        values[values_l] = (current|0)>>>0;
        values_l = values_l+1|0;
    }

    return {
        bits: values_constructor_bits,
        lengths: lengths.slice(0, lengths_l),
        values: values.slice(0, values_l),
        matchmaking: values_using_compression.uint32array
    };
}

function SmartRunLengthDecompress(object) {
    var constructor = object.bits === 32 ? Uint32Array: object.bits === 16 ? Uint16Array: Uint8Array;
    var lengths = object.lengths;
    var values = object.values;
    var matchmaking = new SetFixed(new BitArray(object.matchmaking));
    var total_length = values.length - lengths.length; // values that aren't alone
    for(var i = 0, l = lengths.length; (i|0) < (l|0); i = i + 1|0){
        total_length = (total_length+lengths[i]|0)>>>0; // values that are repeated
    }

    var output = new constructor(total_length), v = 0, l = 0;
    for(var i = 0; (i|0) < (total_length|0);){
        if(matchmaking.has(i)){
            output.fill(values[v], i, i+lengths[l]|0);
            i = i + lengths[l] | 0;
            l = l + 1 |0;
        }else {
            output[i] = values[v];
            i = i + 1 |0;
        }

        v = v + 1 |0;
    }

    return output;
}

A New Horizon in Data Compression: Matchmaking Run-Length Algorithm

ViperT — Fri, 25 Aug 2023 04:57:00 +0000

In the realm of data compression, efficiency is a sought-after virtue. The world may seem consumed by the rush towards innovation, but true progress lies in the nuanced methods that reshape our reality. Enter the "matchmaking" run-length algorithm, an inventive approach to data compression.

Introducing the Algorithm

The "matchmaking" run-length algorithm uses a boolean array based on a typed array to understand if a value in process requires to consume a length in the Uint8Array of lengths.

Why It Matters

In the landscape of data where run length is efficient, we often encounter values that don't repeat themselves. Using an entire byte (which is 8 bits) to specify that the value is only used once can be an extravagance.

# How It Works
Here's where our method turns conventional wisdom on its head.

The Lengths Table: This is a record of the lengths of continuous sequences of a given value.
The Values Table: It will include values that are repeated (and therefore have lengths) and those that are "alone" or not repeated.
The Boolean Array (Uint1Array): A novel addition, this acts as a switch that tells us when to consume a length and when to simply put the value once.

The Efficient Dance

The algorithm functions on typed arrays, and the mechanism can be understood as follows:

If a value repeats, the boolean array instructs to fetch the corresponding length from the lengths table.
If a value doesn't repeat (it is "alone"), the boolean array instructs to use the value itself.

This approach avoids consuming an entire byte to represent a single occurrence, an epitome of Affolter Matias's commitment to innovative elegance.

The Results

What we witness here is a prime example of the beauty and complexity of compression algorithms. This method can drastically reduce the memory footprint, driving forward our ceaseless quest for understanding and elevation in the technological arena.

Conclusion

The "matchmaking" run-length algorithm, with its unique utilization of boolean arrays and typed arrays, leads us to a promising threshold of data compression efficiency. Its fusion of simplicity and brilliance resonates with the resonant urge for technological excellence, showcasing that the pursuit of greatness involves rejecting the ordinary and striving for the extraordinary.

In action: https://www.npmjs.com/package/@asaitama/boolean-array

Real-world application

Using Typed Arrays for Pixel Art Color Indexing

In the realm of pixel art, color indexing plays a pivotal role in compressing the data, and this is where typed arrays come into play. Depending on the number of unique colors, different typed arrays can be used:

Uint8Array: Suitable for images with fewer than 256 unique colors. By using 8 bits to store a color reference, it becomes an efficient way to represent the color data.
Uint16Array or Bigger: For more complex images with a wider color palette, larger typed arrays like Uint16Array can be employed. These store references to the colors in 16 bits or more, allowing for a broader range of unique colors.

Storing color as a reference rather than a whole Uint32 color (which includes red, green, blue, and alpha channels) leads to a much lighter footprint. This alone provides a significant reduction in data size, yet the compression could be further optimized.

Matchmaking Run Length Algorithms for Improved Compression

The continuity of the same color indexes in pixel art was a factor that seemed inefficient and somewhat irksome. Despite the space-saving achieved through the use of Uint8Array or Uint16Array, there remained a need for a more succinct expression of continuous same-colored pixels. This led to the exploration of a novel solution.

By utilizing a matchmaking run length algorithm alongside a bit array (rather than a byte array), it became possible to reconcile the issue of "lonely patterns" that would have otherwise interfered with compression. This approach leverages two components:

Matchmaking Table: A table that links the lengths and values, managing the relationship between the repeated values and the number of times they occur.
Uint1Array: This specialized array informs the algorithm when to consume a length and when to represent a unique value, making the representation incredibly efficient.

The implementation of this matchmaking run length algorithm provided a performance boost (storage) that was 2.2 times lighter. It optimized the representation without sacrificing any detail or quality, proving to be a remarkably effective technique for compressing pixel art color indexes.

5 Important Tips to Master Pixel Art within the Next Minute

ViperT — Thu, 06 Jul 2023 21:22:22 +0000

Introduction:

Pixel art has captivated gamers and artists alike with its unique charm and retro aesthetic. Whether you're a seasoned pixel artist or just starting your journey, mastering the art form can be both challenging and rewarding. With the right tools and techniques, you can create stunning pixel art in no time. In this article, we will explore five essential tips that will allow you to elevate your pixel art skills instantly. And to assist you on this creative journey, we'll showcase the incredible pixel art editor, pixa.pics, which simplifies the process and enhances your pixel art experience.

1) Start with a Concept:

Before diving into pixel art, it's crucial to have a clear concept in mind. Planning your artwork beforehand will help you focus on the details and overall composition. Consider the subject, style, and color palette you want to use. This initial step will allow you to create pixel art with a purpose and deliver a more impactful result.

2) Choose the Right Pixel Art Editor:

An efficient pixel art editor can significantly enhance your workflow and productivity. Enter pixa.pics, a powerful tool designed to make pixel art creation accessible to all skill levels. Its user-friendly interface, robust feature set, and intuitive controls enable artists to bring their ideas to life effortlessly. With pixa.pics, you can easily create, edit, and animate pixel art, making it an ideal choice for both beginners and professionals.

3) Master the Pixel Grid:

Pixel art relies on precise placement of pixels to create intricate designs. Understanding the pixel grid and utilizing it effectively is essential. Each pixel represents a single point of color, so working within a limited canvas size requires attention to detail. Pixa.pics offers a grid overlay and zooming options, enabling you to work with precision and create pixel-perfect art effortlessly.

4) Experiment with Color Palettes:

Choosing the right color palette is crucial in pixel art. Limited color choices can add depth and character to your artwork. Pixa.pics provides a color palette editor that allows you to create, save, and apply custom color schemes seamlessly. Experiment with different palettes to find the perfect combination that suits your artistic vision.

5) Embrace Iterative Improvement:

Pixel art is a meticulous process that benefits from iterative improvement. Don't be discouraged if your initial attempts fall short of your expectations. Embrace the learning process, experiment with techniques, and learn from your mistakes. Pixa.pics offers layer support, allowing you to refine and revise individual elements without affecting the entire composition. This feature enables you to iterate and polish your artwork, resulting in pixel-perfect masterpieces.

Conclusion:

Pixel art is a delightful medium that allows artists to blend creativity and nostalgia into captivating visuals. With the right tips and tools, you can master the art of pixel art in no time. By starting with a concept, choosing the right pixel art editor like pixa.pics, understanding the pixel grid, experimenting with color palettes, and embracing iterative improvement, you'll be well on your way to creating stunning pixel art.

So why wait? Dive into the world of pixel art today with pixa.pics, and let your imagination run wild!