Three Accessibility and Sharing Upgrades for a Client-Side Text Repeater

·6 views

A developer explains how to improve a simple browser-based text repeater that people use to generate repeated phrases, such as a birthday message written many times. The first upgrade stores the tool's settings in the URL query string so a configured setup can be shared, with input clamped and values inserted safely to avoid freezing browsers or injecting code. The second makes results accessible by keeping the large output in a labelled textarea while the status region announces only a short sentence, since a live region would try to read the entire output aloud. The third moves heavier text generation into an inline Web Worker to keep the page responsive, while noting that plain repetition is fast enough with String.prototype.repeat. The article also cautions that strict Content Security Policies may block blob workers and that large strings are costly to pass between threads.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

GitHub's new star history endpoint powers a README star chart generator

GitHub restricted its stargazers listing to repo admins and collaborators this year, which broke existing star history tools. In September it added a star history endpoint that returns stars grouped by calendar week for any public repo without authentication. The author built a README chart generator on it, fetching pages in parallel and summing weekly totals, which matched live star counts on seven tested repos. Because README images cannot run scripts, the chart is a server-rendered Svelte component producing an animated SVG, while a separate plain SVG converted to PNG handles social previews.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Why Word Counting Is Harder Than a Simple Space Split Suggests

A common naive word counter splits text on whitespace, which breaks on contractions, hyphens, em dashes, decimals, and emoji. The article argues this is a text segmentation problem rather than a rounding issue. It recommends the browser's Intl.Segmenter API, using word granularity and filtering by isWordLike to exclude emoji from word counts. It also notes that text.length counts UTF-16 code units rather than visible characters, so grapheme granularity is better for character counts. The author discloses that they built a browser-based word counter that processes text locally without uploading it.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

How Shell Redirection and Pipes Work: >, >>, 2> and |

The article explains that every command has three text channels: stdin for input, stdout for normal results, and stderr for error messages. The > operator sends stdout to a file and overwrites it, while >> appends to the end of an existing file. Because stderr is stream 2, the 2> operator captures error messages separately, and 2>&1 merges errors into the same destination as normal output, with the order of redirections mattering. A pipe (|) passes one command's stdout directly into the next command's stdin, allowing small tools to be chained together. The piece notes that pipes carry only stdout, so errors from the left-hand command bypass the pipe.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Developer details AI-assisted plan for an SMS suite in the CabloyJS framework

A developer building an SMS suite for the CabloyJS fullstack framework shared the prompt they wrote and the development plan Claude Code produced in response. The suite is split into four modules: shared SMS infrastructure, SMS verification codes, phone-based registration and login, and a mock provider for development. The plan stresses that infrastructure, verification, and authentication should stay decoupled, and that the mock provider should not alter the real business flow. It proposes reusing the existing captcha and authentication systems, with backward-compatible extensions for phone binding and atomic code consumption. The developer presents the exchange as a representative example of a practical AI coding workflow.

0 comments Read more at DEV Community