Two domains, two kinds of work

The spatial domain is the pixel grid you see on screen. The frequency domain describes how quickly color and brightness change from one pixel to the next. Lossy formats such as JPEG and lossy WebP work in the frequency domain, while resizing works in the spatial one.

How lossy compression shrinks a file

Lossy encoders split the image into 8×8 pixel blocks and apply the Discrete Cosine Transform (DCT). Each block becomes 64 frequency components:

• The DC coefficient is the average value of the block.
• The AC coefficients describe finer detail: texture, sharp edges and subtle gradients.

Human vision notices small changes in brightness more than fine color detail, so the encoder divides the high-frequency values by larger numbers and rounds them. Many of them become 0, and long runs of 0s are cheap to store with run-length and Huffman coding. That rounding is the "loss" in lossy.

Lossless formats like PNG skip this step. PNG applies line filters (Sub, Up, Average, Paeth) and then DEFLATE compression. The file gets smaller by removing repeated patterns, and every original pixel value is kept.

Keeping transparency intact

A 32-bit RGBA pixel stores 8 bits each for red, green, blue and alpha, which gives 256 levels of opacity. Problems start when a transparent PNG is saved as JPEG: JPEG has no alpha channel, so the transparent area is filled with a solid background color.

• PNG can carry transparency as a palette with a tRNS chunk (PNG-8) or as a full alpha channel (PNG-32). Turning a PNG-32 with soft shadows into PNG-8 can leave harsh edges.
• WebP stores color data and a separate lossless alpha stream, so soft edges can be kept.

Resizing in the browser with canvas

Before compressing a large photo, reduce it to the size it will actually be displayed at. The HTML5 canvas can do this locally:

const canvas = document.createElement('canvas');
canvas.width = targetWidth;
canvas.height = targetHeight;

const ctx = canvas.getContext('2d', { alpha: true });
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';

ctx.drawImage(sourceBitmap, 0, 0, targetWidth, targetHeight);

canvas.toBlob((blob) => {
  // use the compressed file here
}, 'image/webp', 0.85);

Setting imageSmoothingQuality to 'high' asks the browser for a higher-quality interpolation filter, which reduces the jagged steps you get from nearest-neighbor scaling. Because this runs on the user's device, there is no upload step and no server-side file size limit. For heavy work, OffscreenCanvas can move resizing off the main thread so the interface stays responsive.

Why image size affects Core Web Vitals

Largest Contentful Paint (LCP) measures how fast the main visible content appears, and Google treats 2.5 seconds or less as "good". On many pages the LCP element is an image.

A common mistake is placing a 4032×3024 phone photo in a card that shows at 600×450. The browser still downloads the full file and has to decode it. A 12-megapixel image takes about 48 MB of raw RGBA memory (4000 × 3000 × 4 bytes) while it is rasterized, which can cause dropped frames on low-memory phones. Resizing to the displayed size first reduces both the transfer and the memory work.

Quick answers

Does re-saving a JPEG reduce quality? Yes. Each lossy save repeats the quantization step, and block artifacts build up around high-contrast edges.

When is WebP a good choice? When you want both lossy and lossless modes with 8-bit alpha in one format.

What about EXIF orientation? Modern browsers apply it when you decode with createImageBitmap() or draw to a canvas.

Try it

If you want to resize or compress JPG, PNG or WebP files without a server upload, the ToolsGrid Image Compressor and Image Resizer process files in your browser, not uploaded to ToolsGrid servers.

Originally published on the ToolsGrid blog.

The Turkish "i" bug

Turkish and Azeri have two separate letters here: dotted i / İ and dotless ı / I. Under Turkish rules, lowercase i uppercases to İ (U+0130), not I.

The trouble starts when a library picks up the machine's locale on its own. In Java, "admin".toUpperCase() with no explicit locale returns "ADMİN" on a Turkish system, and C# ToUpper() behaves the same way under the current culture. A check like role.toUpperCase().equals("ADMIN") then fails only for Turkish users, and only in production.

JavaScript avoids this by default: toUpperCase() ignores the host locale, and only toLocaleUpperCase("tr") applies Turkish rules.

"title".toUpperCase()              // "TITLE"
"title".toLocaleUpperCase("tr")    // "TİTLE"
"I".toLocaleLowerCase("tr")        // "ı"

The practical rule: use locale-independent conversion for identifiers, keys and protocol strings. Use locale-aware conversion only for text people read.

When uppercase changes the length

Unicode case mapping is not always one character to one character:

• "straße".toUpperCase() returns "STRASSE". One character became two.
• The ligature fi (U+FB01) uppercases to FI.
• Greek Σ lowercases to σ inside a word but to ς at the end, so the result depends on context.

If you store an uppercased value in a fixed-width column or buffer, a string that fit before conversion may be cut off or rejected after it. Measure the converted string, not the original.

Lowercasing is not case folding

Lowercasing prepares text for display. Case folding, defined in Unicode's CaseFolding.txt, prepares text for caseless comparison. The German example shows the gap:

"STRASSE".toLowerCase() === "straße".toLowerCase()   // false: "strasse" vs "straße"

Full case folding maps both sides to "strasse", so they would compare equal. JavaScript has no built-in caseFold(). For human-facing matching you can compare with Intl.Collator(undefined, { sensitivity: "base" }). For identifiers, normalize and lowercase in the same way on both the write side and the lookup side.

One character, two representations

The letter é can be a single code point (U+00E9) or an e followed by a combining accent (U+0065 U+0301). They look identical but are different strings:

"\u00e9" === "e\u0301"                      // false
"\u00e9" === "e\u0301".normalize("NFC")     // true
"\uFB01".normalize("NFKD")                  // "fi"
"\uFF21".normalize("NFKD")                  // "A" (full-width A)

• NFC composes sequences into single code points. Good for storing and comparing user text.
• NFD splits letters from their accents. Useful for stripping accents when building URL slugs.
• NFKC / NFKD also fold compatibility characters such as ligatures and full-width forms. Useful for search indexes and username uniqueness checks.

For usernames, a safe pipeline is: normalize (NFKC), then lowercase or case-fold, then compare. Skip the first step and two visually identical names can exist as separate accounts.

Naming conventions across the stack

Data crosses several layers, and each has its own habit. Mixing them inside one layer is what causes mapping bugs.

Moving between these needs a deterministic splitter: break words on uppercase transitions, digits and punctuation, then join them in the target style.

Doing the conversion in the browser

The ToolsGrid Case Converter handles Title Case, camelCase, PascalCase, snake_case, kebab-case and URL slugs. It uses locale-independent toUpperCase() and toLowerCase(), so output matches across devices. Its slug mode applies NFD and strips combining accents, so Café Menu becomes cafe-menu. Text is processed in your browser, not uploaded to ToolsGrid servers.

Originally published on the ToolsGrid blog: Unicode Case Folding, String Algorithms & Software Naming Conventions

Try the tool: ToolsGrid Case Converter

Why phone photos make poor signatures

• A gray box. Paper picks up shadows and warm light, so it shows as light gray or yellow. On a white PDF, that rectangle covers underlines, form fields and nearby text.
• JPEG artifacts. Phone cameras use lossy compression. Thin ink strokes pick up blocky halos and noise that become visible when you zoom in.
• File size and metadata. A raw photo can be several MB and may carry details such as location and device information.

The fix is a PNG with an alpha channel (or an SVG). Background pixels get an alpha value of 0, which means fully transparent, so only the ink remains and the signature sits cleanly over lines and text.

Two ways to create one without paper

Drawing on a canvas. This suits touchscreens, styluses and good trackpads. Instead of joining pointer events with straight segments, a signature pad can use quadratic Bézier curves through midpoints, which smooths out the staircase jitter you get from mouse drawing:

// Midpoint smoothing for natural-looking strokes
const midX = (prevPoint.x + currentPoint.x) / 2;
const midY = (prevPoint.y + currentPoint.y) / 2;
ctx.quadraticCurveTo(prevPoint.x, prevPoint.y, midX, midY);

Typing in a cursive font. With only a mouse, a drawn signature can look awkward. Typing your name and rendering it in a script typeface (Alex Brush, Sacramento or Dancing Script are common choices) gives cleaner, more consistent letterforms. The browser draws the glyphs onto an off-screen canvas with anti-aliasing.

Exporting a transparent PNG

Here is the workflow in the ToolsGrid signature pad:

1. Pick a mode and ink color. Choose Draw or Type, then black (#000000) for general documents or royal blue (#1e40af), which stands out on black-and-white printouts.
2. Sign. Draw above the dotted guide, or type your name and choose one of the five cursive styles.
3. Download. Click Download Signature (PNG). The tool checks the canvas alpha channel, finds the bounding box around your strokes, crops the empty padding and downloads the file.

Your signature is processed in your browser, not uploaded to ToolsGrid servers. You can try it here: Online Digital Signature Pad.

Placing the PNG in a document

• PDF: In the ToolsGrid PDF Editor, open your file, use the Signature tool, drop the PNG on the signature line and download the result.
• Adobe Acrobat Reader: Fill & Sign > Sign Yourself > Add Signature > Image tab, then choose your PNG.
• Microsoft Word: Insert > Pictures > This Device, then right-click the image and pick Wrap Text > In Front of Text.
• Google Docs: Insert > Image > Upload from computer, then choose "In front of text" and drag it into place.

Because the background is transparent, the text under the signature stays visible in all of these.

Is an image signature legally valid?

In the US, the ESIGN Act and UETA say a signature cannot be denied legal effect solely because it is electronic. In the EU, eIDAS recognizes simple electronic signatures. In both cases, what matters most is your intent to sign and everyone's consent to do business electronically, and an email confirmation or version history helps show that. Rules differ by country and document type, so check the requirements for important contracts. This is general information, not legal advice.

If you want the longer version, with the full walkthrough and links to related guides, the original post is here: How to Create a Transparent Digital Signature Online.

Because web developers interact with JSON constantly, it is easy to assume the wire format matches standard JavaScript object notation. However, data serialization over the wire adheres strictly to IETF RFC 8259 and ECMA-404. The differences between forgiving scripting environments and rigid transport parsers cause frequent production outages.

Understanding these boundaries helps you isolate parsing failures, preserve numeric fidelity, and inspect payloads securely.

RFC 8259 Syntax Rules vs. Loose Object Literals

Most payload errors originate from assembling JSON through manual string concatenation, string interpolation, or regex substitutions rather than standard serializers. While browser JavaScript engines allow flexible syntax, production JSON parsers enforce strict grammatical rules:

• Trailing commas: Modern JavaScript and configuration formats like JSON5 allow trailing commas in arrays and objects. However, RFC 8259 explicitly prohibits trailing delimiters. This rule exists to keep parsers in languages like C, C++, and Go minimal, fast, and deterministic. Languages like Python, Go, and standard browser JSON parsers will fail when encountering a trailing delimiter before a closing bracket or brace.
• Quote delimiters: RFC 8259 requires standard double quotation marks for all object keys and string values. Single quotes or unquoted dictionary identifiers cause immediate tokenizer rejection. While keys may contain spaces or special characters, they must remain enclosed within double quotes.
• Prohibition of comments: The specification intentionally omits line comments and block comments to prevent configuration files from carrying execution directives. Any comment sequence invalidates the payload.
• JSON versus JSON5: JSON5 offers convenience for human-maintained configuration files by permitting comments, single quotes, and unquoted keys. However, distributed microservices, databases, and standard REST APIs strictly require RFC 8259 for network transmission.

Silent Precision Loss in 64-Bit Integers

A more deceptive class of bugs occurs when a payload parses without throwing any syntax errors, passes validation suites, yet silently alters production database records.

The JSON specification does not define an integer data type. Every numerical value is evaluated under IEEE 754 double-precision floating-point rules. In runtimes relying on standard floats, developers have 53 bits of integer precision, capping safe integer representation at 9,007,199,254,740,991 (Number.MAX_SAFE_INTEGER).

When distributed microservices exchange 64-bit unsigned integers—such as database primary keys, payment transaction references, or distributed snowflake identifiers—parsers round numbers exceeding that threshold to the nearest representable float. For instance, an ID ending in ...993 can silently mutate to ...992 during deserialization without producing a log warning. If that identifier controls a financial transaction or order dispatch, your application logic operates on the wrong record.

To avoid silent numeric truncation, backend serializers should quote 64-bit integer values and high-precision financial numbers as strings across the wire.

Invisible Characters and Unicode Anomalies

A payload can appear valid inside a text editor while failing at the very first character during ingestion. Invisible Unicode markers and non-printable control characters are frequently responsible:

• UTF-8 Byte Order Mark (BOM): Windows utilities often prepend the byte sequence 0xEF, 0xBB, 0xBF (\uFEFF) to text files. Because RFC 8259 does not permit non-whitespace characters prior to the opening brace, strict parsers fail immediately upon encountering a BOM.
• Unescaped control characters: Under RFC 8259 Section 7, character codes below U+0020 cannot appear as raw characters inside string literals. Unescaped carriage returns, line feeds, and literal tab characters cause parse crashes and must be written using escaped sequences such as \n or \t.
• Typographic quotes and hidden spaces: Copying snippets out of team chat applications or office software often substitutes straight double quotes with curved quotation marks, or injects non-breaking spaces that confuse standard tokenizers.

Security Considerations with Online Formatters

When diagnosing a broken webhook, developers often paste raw payloads into third-party formatting websites to view the structure. However, production payloads routinely contain sensitive information:

• Customer personal identifiers and billing records
• Internal microservice authentication tokens or bearer credentials
• Database identifiers, storage endpoints, or payment processor references

Many online tools rely on server-side rendering scripts, transmitting your payload across the public network where it may be recorded in web server logs or captured by monitoring software.

Using a local client-side tool avoids these privacy hazards. With the ToolsGrid JSON Formatter, your payload is processed in your browser, not uploaded to ToolsGrid servers. Parsing, validation, and tree rendering take place entirely within local browser memory.

Wire Optimization: Formatting vs. Minification

Indenting JSON with two or four spaces is helpful for engineers reading logs or reviewing documentation, but formatting whitespace represents unnecessary weight on the wire.

Removing non-essential whitespace outside string values can reduce raw payload size by up to 37% and compressed transfer size by roughly 19%. In high-throughput microservices and mobile applications, smaller payloads speed up network transmission and conserve client decompression CPU cycles.

Defensive Rules for Production Pipelines

To protect your applications against malformed payloads and silent data corruption, adopt these practices:

1. Use standard serializers: Avoid assembling JSON with string interpolation or template literals. Rely on language-native serialization functions such as JSON.stringify(), json.dumps(), or Go's json.Marshal.
2. String-encode 64-bit IDs: Configure serialization layers to quote large numerical identifiers to shield them from floating-point rounding across consumer clients.
3. Strip BOM markers at entry points: Sanitize incoming file uploads by removing leading \uFEFF bytes before invoking the JSON parser.
4. Enforce schema validation: Combine syntax parsing with schema enforcement tools like JSON Schema, Zod, or Pydantic to catch missing fields and type errors before business logic runs.
5. Protect credentials during debugging: Ensure engineering teams inspect sensitive production payloads using client-side tools rather than unverified remote web formatters.

For the full technical breakdown, read the original guide on debugging malformed JSON.

The good news is that you don't need expensive software or design skills to create one.

In this guide, you'll learn what QR codes are, where they are useful, how to create one for free, and how to avoid common mistakes.

What Is a QR Code?

A QR code, short for Quick Response code, is a two-dimensional barcode that stores information such as a website URL or other supported data.

Unlike traditional barcodes, QR codes can be scanned using most modern smartphone cameras. Depending on the information encoded, scanning one may open a website, display text, or offer another action.

For example, a QR code on a resume could direct a recruiter to your portfolio. A small business could place one on a flyer to send customers to its website.

5 Practical Ways to Use QR Codes

1. Add a QR Code to Your Resume

If you have an online portfolio, professional website, or project showcase, a QR code can make it easier for recruiters to access it.

Keep these tips in mind:

• Link to a professional and relevant page.
• Make sure the destination works on mobile devices.
• Place the code near your contact details or portfolio section.
• Keep the code large enough to scan reliably when printed.

A QR code should support your resume, not replace essential information such as your email address and phone number.

If you're preparing a new CV, you can also try the free ATS Resume Builder on ToolsGrid. Create a clean resume first, then decide whether a QR code linking to your portfolio would add value.

Tip: For a resume sent digitally as a PDF, a clickable portfolio link is often more convenient than a QR code. QR codes are especially useful on printed resumes, business cards, and event materials.

2. Share Your Business Website

Small businesses can print QR codes on business cards, flyers, brochures, and packaging.

Instead of asking someone to type a long URL, you can give them a code that opens your website directly.

Before printing, test the code on multiple phones and make sure the destination page loads correctly.

3. Use QR Codes on Posters and Flyers

QR codes can connect offline marketing materials with online information.

For example, an event poster can link to registration details, while a promotional flyer can direct readers to a product page.

Use a short, clear call to action near the code, such as “Scan to Visit Our Website.”

4. Share a Portfolio or Project

Students, designers, developers, and freelancers can use QR codes to share their work.

A code can link to a portfolio, project demonstration, online profile, or public repository. This can be particularly helpful when handing out printed resumes or attending networking events.

5. Make Printed Materials More Useful

QR codes can also link to instruction manuals, support pages, digital catalogs, product information, or frequently asked questions.

The key is to send people to a page that provides useful information rather than making them search for it themselves.

How to Create a QR Code Online for Free

You can create a QR code using an online generator without installing desktop software.

Follow these steps.

Step 1: Choose the destination

Decide what you want people to open. For a website QR code, copy the complete URL, including https://.

Step 2: Open a QR code generator

Visit the ToolsGrid QR Code Generator. It supports creating QR codes for website URLs, plain text, and Wi-Fi information.

Step 3: Enter your information

Paste your URL or enter the supported information you want to encode. If customization options are available, you can adjust the design to suit your intended use.

Step 4: Generate and download the code

Create the QR code and download the resulting image in the format offered by the tool.

Step 5: Test it before sharing

Scan the downloaded code with a smartphone. Confirm that it opens the correct destination and remains readable at the size you plan to use.

For printed materials, use a clear, high-contrast design and leave enough blank space around the code.

Static vs. Dynamic QR Codes: What's the Difference?

Not all QR codes work the same way.

Static QR codes

A static QR code stores the destination information directly in the code. If it contains a website URL, that URL is encoded into the pattern itself.

This is useful when you want a straightforward code for a permanent destination.

However, if the encoded URL changes, you generally need to generate and distribute a new QR code.

Dynamic QR codes

Dynamic QR codes typically point to a redirect URL managed by a service provider. Depending on the service and plan, you may be able to change the destination after printing or access scan analytics.

Some dynamic QR services require subscriptions, and their continued functionality may depend on the provider.

Before choosing one, check the service's pricing, limitations, and long-term availability.

Common QR Code Mistakes to Avoid

Even a correctly generated QR code can be difficult to use if it is designed or placed poorly.

• Making it too small: People may struggle to scan it, especially on printed materials.
• Using insufficient contrast: A dark code on a light background is generally easier to scan than a low-contrast design.
• Skipping the testing step: Always scan the final downloaded or printed version.
• Linking to a broken page: Verify that the destination loads and is mobile-friendly.
• Removing the clear border: Leave sufficient blank space around the QR code so scanners can detect its boundaries.
• Ignoring security: Check the destination URL before opening an unfamiliar QR code, and never enter sensitive information on a page you do not trust.

Are QR Codes Safe?

A QR code is simply a way to encode information. It is not automatically safe or unsafe.

A malicious code can direct someone to a fraudulent website, a fake login page, or another harmful destination. Treat unexpected QR codes with the same caution you would use for unfamiliar links.

If you create a code for your own business, use a destination you control and review it periodically to ensure that it still works.

Final Thoughts

QR codes are a simple way to connect printed materials with online information. Whether you want to share a resume portfolio, promote a business website, or add a link to a flyer, creating a useful QR code does not need to be complicated.

Choose the right destination, generate the code, test it on a phone, and make sure people can scan it easily.

You can explore more free browser-based utilities on ToolsGrid, including tools for resumes, PDFs, images, and everyday productivity tasks.

Create something useful, keep it simple, and always test before you publish.