Hasty Briefsbeta

All tags

web development

21 stories total

Bilingual

Vite+ Beta
25 days ago
- Vite+ is now in beta and provides a unified toolchain for web development, integrating runtime, package manager, and frontend tools like Vite, Vitest, and Oxlint.
- It offers consistent commands for development, testing, building, and more, aiming to simplify workflows and improve team collaboration across projects.
- Key updates since alpha include smarter caching, better migrations, enterprise features, cross-platform support, and over 180 fixes and improvements.
- Vite+ has been adopted in over 1,300 public repositories, with notable projects like Dify, BlockNote, and npmx using it.
- The roadmap to version 1.0 includes plans for remote caching, GitLab CI/CD integration, improved compatibility, and more migration targets.
Bring back crappy forums
a month ago
- Usenet, the early forum-like system, had over 110,000 newsgroups but declined in the late 1990s.
- Web forums emerged as an alternative to Usenet, with the first software, WWW Interactive Talk (WIT), developed in 1994.
- Key historical forum software includes Ultimate Bulletin Board, Slash, vBulletin, phpBB, and Discourse, each influencing internet communities.
- BBCode, created in 1998, allowed controlled text formatting in forums and influenced modern tools like the Godot game engine.
- Forums lost popularity to social media due to novelty, scalability issues, and the appeal of newer platforms like Digg and Reddit.
The <Usermedia> HTML Element
a month ago
- Chrome 151 introduces the <usermedia> HTML element, part of the Capability Elements suite, which transitions from generic permission prompts to targeted, declarative controls for camera and microphone access.
- The element improves security and user experience by reducing boilerplate code, providing clear user intent through physical interaction, and enabling seamless recovery for previously denied permissions.
- Real-world data from an Origin Trial shows significant improvements: Cisco saw permission grant rates jump from 10% to over 65%, Zoom reported a 46.9% decrease in capture errors, and Google Meet noted a 17% drop in 'mic not working' feedback.
- Implementation involves adding the <usermedia> tag to HTML, using setConstraints() for hardware preferences, and handling events like 'stream', 'error', and 'cancel' for successful access, failures, or user dismissals.
- The element enforces styling restrictions for legibility, sizing, and visual integrity to prevent deceptive designs and supports progressive enhancement with fallbacks to legacy getUserMedia() API for unsupported browsers.
The Safari MCP server for web developers
25 days ago
- Safari MCP server introduced in Safari Technology Preview 247.
- Enables agents to access browser data (DOM, network requests, screenshots, console logs).
- Speeds up debugging by reducing context switching between browser and terminal.
- Use cases include checking rendering, improving Safari compatibility, analyzing performance, and verifying accessibility.
- Available tools include console messages, network requests, page interactions, screenshots, and JavaScript evaluation.
- Setup requires installing Safari Technology Preview and enabling developer features.
- Local-only operation ensures data privacy and no external network calls.
- Goal is to enhance AI-assisted web development workflows for Safari.
Babel, a construction that builds and unbuilds itself forever
23 days ago
- Download over 310 Three.js scenes for creative 3D web projects.
- Explore various digital constructions and artworks like Babel, Basilica, Monoliths, and Proteus.
- Interact with blueprints using controls: space to panel, drag to orbit, scroll to zoom, and 'n' for new blueprint.
Every JavaScript bundler handles inline script tags wrong
22 days ago
- JavaScript can be included in web pages via external files (using <script> tag with src attribute) or inline within <script> tags.
- Inline <script> tags are increasingly used for self-contained apps and HTML artifacts, but contain pitfalls like the string '</script>' prematurely ending the script.
- The HTML specification includes a 'script data double escaped state' loophole where sequences like <!-- followed by <script> prevent normal script termination.
- JavaScript build tools and minifiers often fail to correctly handle escaping of problematic strings (</script>, <!--) in literals and expressions for inline <script> tags.
- ESBuild performs best among tested tools but still fails to escape <!-- in literals; other tools like Terser, SWC, Oxc, Bun, UglifyJS, Closure Compiler, and minify also fail in various ways.
- No JavaScript build tool currently correctly handles all cases for inline <script> tags, highlighting the need for better awareness and handling of these edge cases.
Show HN: Nectar, a Rust-like React that compiles to WebAssembly
21 days ago
- Nectar compiles to WebAssembly with a single binary and zero dependencies, running the entire app in WASM while reducing JavaScript to a minimal 10 KB syscall layer.
- One Rust binary handles all development tasks including compilation, formatting, linting, testing, dev server, LSP, package management, and SSR, eliminating toolchain configuration.
- Features O(1) updates per binding without a virtual DOM, ensuring only exact DOM nodes update when signals change, and includes Rust-inspired safety features like a borrow checker and exhaustive pattern matching.
- Eliminates npm, node_modules, webpack, and bundlers by compiling apps to a .wasm binary and a 3 KB runtime, with common web patterns as language primitives.
- The same WASM binary runs on the server via wasmtime with built-in SSR, hydration, and deployment to 29 Cloud Run regions, compiling .nectar source to WebAssembly.
The footgun of right-to-left decorative characters
21 days ago
- Fleurons are decorative typographic elements that have been incorporated into digital fonts via Unicode, including symbols like the Manichaean Punctuation Fleuron.
- The Manichaean fleuron () is a right-to-left (R) character, which can cause unexpected rendering issues in bidirectional text, such as rearranging adjacent numbers.
- Unicode's Bidirectional Algorithm determines text direction based on character types (strong, weak, neutral), with R-type characters taking precedence over weak types like European numbers.
- To fix rendering problems, wrap the fleuron in the <bdi> HTML tag or use the CSS style 'unicode-bidi: bidi-override;' to isolate its directionality.
- Manichaeism was a historical world religion that declined due to persecution, competition from other religions, and the collapse of supporting empires.
- The post highlights practical solutions for web developers using decorative characters in mixed-direction text environments.
AI2Web: Open protocol to make any website work with every AI agent
17 days ago
- AI2Web is an interoperability layer that allows websites to work with any AI by exposing capabilities through multiple protocols like MCP, ACP, REST, and GraphQL from a single description.
- It aims to simplify AI integration by avoiding the fragmented portal approach seen in search consoles, offering one unified dashboard for validation, monitoring, and management.
- Websites can declare capabilities once via a manifest, and AI2Web generates necessary endpoints, supporting various tech stacks including JavaScript, React, PHP, Python, and WordPress.
- The system is designed for efficiency, reducing energy consumption by sending structured data instead of full HTML pages, and ensures security with user approval for high-risk actions like refunds.
- AI2Web complements existing protocols rather than replacing them, includes a live Discovery Network for agent discovery, and is open-source with free SDKs and optional commercial features.
Litert.js, Google's High Performance Web AI Inference
15 days ago
- LiteRT.js is a JavaScript binding of LiteRT for running AI models directly in web browsers, enabling local, on-device inference for enhanced privacy, zero server costs, and ultra-low latency.
- It offers improved performance over prior solutions like TensorFlow.js by leveraging WebAssembly and hardware acceleration through XNNPACK for CPU, ML Drift for GPU, and WebNN for NPUs.
- Key features include PyTorch model conversion via LiteRT Torch, tailored quantization with AI Edge Quantizer for size and performance gains, and support for multiple hardware backends (CPU, GPU, NPU).
- Benchmarks show LiteRT.js outperforms other web runtimes by up to 3x on CPU and GPU, with GPU/NPU acceleration providing 5-60x speedups for real-time applications like object tracking and audio processing.
- Demo implementations include Depth Anything for real-time 3D point clouds from webcam feeds and Real-ESRGAN for 4x image upscaling, with official export support for Ultralytics YOLO models.
- Integration is straightforward with a streamlined JavaScript API for loading, compiling, and running .tflite models, and future development focuses on WebNN integration and generative AI support.
Cardspark_UI – React UI for TCG Builders
15 days ago
- The text is about a UI component library for trading card collections, featuring interactive 3D renderings, animations, and visual effects.
- It offers 13 polished components and layouts that are filterable and customizable, with templates for metadata and market analytics like price badges and trend data.
- The library is free for hobby and noncommercial use, available via npm installation, and includes updates for collectors, shops, and builders.
The Proportional Web
15 days ago
- The author created a new side project, The Proportional Web, inspired by Robert Bringhurst's 'The Elements of Typographic Style', as a sequel to The Monospace Web.
- The design uses the Alegreya font for body text and headings, with Courier Prime for code, and bases all sizes on a root font size of 16px for scalability.
- Text is justified with hyphenation controls to avoid spacing issues, paragraphs are indented, and the design is monochrome (black on white) for minimalism and focus.
- The stylesheet supports semantic HTML5 elements like headings, side notes, blockquotes, figures, lists, and tables, and is geared towards prose-heavy web documents.
- It is responsive, with adjustments for smaller viewports, and is available for reuse under an MIT license, with setup instructions for Pandoc and quick-start guidelines.
Responsive Design Calculator
13 days ago
- The author discovered a minor bug where font size was slightly off due to rounding errors during conversion from px to rem units.
- The site’s layout evolved from fixed widths (450px/600px) for older monitors to a responsive design using breakpoints and smooth scaling.
- An interactive calculator was developed to automate CSS calculations, eliminating manual errors from earlier conversions.
- The layout formulas were updated to use modern CSS functions like min(), clamp(), and round() for integer widths and better responsiveness.
- The project’s initial bug fix was trivial, but the resulting automated system provides reusable formulas for future adaptive layouts.
Unsung's Cursed Knowledge
13 days ago
- Emails still don't support inline videos in 2026.
- RSS readers sanitize HTML inconsistently, making inline videos tricky; some require wrapping videos in <a> links, which can override playback controls in other readers.
- QuickTime Player's 'New Movie Recording' (not 'New Screen Recording') can record from USB-connected iPhones or Apple TVs over Wi-Fi.
- Videos with full 8-bit transparency require different encoding for Safari vs. Chrome.
- Browsers don't allow checking video framerate due to fingerprinting concerns, so metadata must be passed from elsewhere.
- Simultaneous video playback can slow down or crash browsers, especially on mobile, as browsers may not properly garbage collect or throttle.
- Videos sometimes have subtle borders due to decoders rounding width/height to multiples of 8px or 16px; fixing this is unreliable for small videos.
- Pixel density in images can be stored in centimeters, leading to conversions like 143.99ppi instead of 144ppi.
- On smartphones, click events have pointerType 'click' on iPhone but 'touch' on Pixel Phone.
- CSS lacks easy ways to create responsive images with consistent aspect ratio and min/max widths without using object-position, which complicates side-by-side layouts; manual aspect ratio calculations are often needed.
- CSS word-wrapping syntax is messy and doesn't cover all cases, requiring manual insertion of zero-width spaces (e.g., for URLs); it's hard to control breaks precisely.
- You still need to specify -webkit-user-select: none; alongside user-select: none; for full compatibility.
Brainless: Shadcn components that look like Claude Code, Codex and Grok
12 days ago
- Added a 'brainless pricing' block to the landing page using a Bash command
- The update involved modifying the 'app/page.tsx' file to include the new pricing component
- The addition was integrated between existing components: Features and Footer
I Switched from Hugo to Astro
12 days ago
- The author switched from Hugo to Astro due to limitations in Hugo's static approach, which made adding dynamic features like contact forms and view counters cumbersome.
- Astro's build-time TypeScript feature allowed seamless integration of dynamic data, such as view counts from Umami API, without client-side JavaScript or islands architecture.
- The migration led to a full site rebuild, including design changes to Tailwind CSS, image optimization via Astro's pipeline, and enhanced features like dark mode and a table of contents.
- Despite the switch, Hugo is still praised for its simplicity and effectiveness for purely static sites, but Astro better fits the author's need for build-time flexibility without sacrificing static benefits.
GSAP – A robust JavaScript animation library built for professionals
11 days ago
- GSAP is a robust JavaScript animation library for professionals.
- It can animate anything JavaScript can manipulate, including UI, SVG, and WebGL.
- It offers silky-smooth performance and extensive support.
- Features include easy easing for personality and choreographing sequences.
- Tools enhance scrolling, SVG manipulation, text effects, and interactions.
We rewrote our custom visualisation renderers from SVG to be in Canvas
11 days ago
- The new profiler dashboard replaces SVG with Canvas for rendering flame graphs, eliminating the need for DOM nodes per frame and reducing browser workload.
- Canvas uses an immediate-mode API, where drawing commands create pixels directly, avoiding style, layout, and garbage collection overhead associated with retained-mode SVG.
- Data is handled via columnar Arrow format over Arrow Flight, enabling zero-copy reads and efficient rendering by accessing arrays for frame attributes like x-positions, widths, and depths.
- Rendering optimizations include viewport culling to draw only visible frames and precomputed positions, making zooming, scrolling, and resetting interactions feel instant.
- Performance improvements show the Canvas renderer is about 3.6× faster in isolated tests, with live interactions like zooming and scrolling becoming 4-5 times quicker, though accessibility and text selection remain trade-offs.
Lessons Learned Rewriting a Sticky Detector
11 days ago
- The article discusses converting a 2014 JavaScript demo that used scroll events to make a search input stick to the top, into a modern CSS-based solution.
- Key modern CSS techniques include using `position: sticky` for sticking elements, container queries with `scroll-state` for detecting stuck states, and anchor positioning for precise placement of elements like a hamburger menu.
- The old demo inefficiently used JavaScript scroll event listeners and jQuery, while the new approach eliminates JavaScript for better performance and leverages HTML elements like `<search>` for accessibility.
- Anchor positioning allows elements like a menu icon to be positioned relative to a named anchor element without traditional constraints, and SVG is recommended over emojis for icons for better markup and control.
Some more things about Django I've been enjoying
5 days ago
- The author is learning to build websites using a 2010-style backend approach with Django, focusing on SQL databases and server-rendered HTML.
- Key Django features enjoyed include query builders for readable SQL-like filters, template filters for URL formatting and date handling, the querystring filter for dynamic links, and automatic database migrations.
- The author prefers function-based views over class-based inheritance for code organization, finding inheritance less straightforward in Python.
- Performance concerns include handling bursts of traffic, caching strategies, and template optimization; enabling cached template loaders significantly improved request handling from 2-3 to 12 requests per second.
- The author finds Django's settings file confusing and notes that performance issues often stem from misconfiguration (like disabled template caching) rather than slow database queries.

firstprev0next

About|Login

web development

Vite+ Beta

Bring back crappy forums

The <Usermedia> HTML Element

The Safari MCP server for web developers

Babel, a construction that builds and unbuilds itself forever

Every JavaScript bundler handles inline script tags wrong

Show HN: Nectar, a Rust-like React that compiles to WebAssembly

The footgun of right-to-left decorative characters

AI2Web: Open protocol to make any website work with every AI agent

Litert.js, Google's High Performance Web AI Inference

Cardspark_UI – React UI for TCG Builders

The Proportional Web

Responsive Design Calculator

Unsung's Cursed Knowledge

Brainless: Shadcn components that look like Claude Code, Codex and Grok

I Switched from Hugo to Astro

GSAP – A robust JavaScript animation library built for professionals

We rewrote our custom visualisation renderers from SVG to be in Canvas

Lessons Learned Rewriting a Sticky Detector

Some more things about Django I've been enjoying