Hasty Briefsbeta

All tags

#web-development

182 stories total

Bilingual

We are building a new browser from scratch, backed by a non-profit
3 months ago
- Ladybird is a new browser and web engine with a web standards first approach.
- Originally an HTML viewer for SerenityOS, now cross-platform for Linux, macOS, and Unix-like systems.
- Targeting an Alpha release in 2026, currently in heavy development.
- Led by a browser industry veteran, ensuring OSS community involvement.
- Launched a 501(c)(3) non-profit to support development.
- Community-driven with active Discord and GitHub collaboration.
- Funded by sponsorships and donations, with tiered sponsorship levels.
A static site generator written in POSIX shell
3 months ago
- The author created a static site generator (SSG) named 'gen.sh' in POSIX shell to replace a previous JavaScript-based setup.
- The SSG processes markdown files with frontmatter metadata, generates HTML pages, tags, RSS/Atom/JSON feeds, a sitemap, and handles drafts.
- It uses 'comrak' for markdown rendering with extensive extensions for features like side-by-side images, captions, and media autodetection.
- The script employs shell utilities like 'sed', 'envsubst', and 'eval' for text processing, templating, and dynamic variable handling.
- Tags are managed through a custom system that tracks posts per tag and generates a tags page with CSS interactivity.
- The SSG is fast, processing 29 posts in about 714 milliseconds, and is designed for simplicity and fun rather than portability or reusability.
- The author plans to streamline the feeds, keeping only Atom, and considers switching to bash for better compatibility with certain commands.
Changes in htmx 4.0
3 months ago
- htmx 4.0 is a complete rewrite using the fetch() API, replacing XMLHttpRequest.
- Explicit attribute inheritance is now the default, using the `:inherited` modifier.
- Event naming convention changed to `htmx:phase:action[:sub-action]` for consistency.
- History storage no longer uses `localStorage`; full page refresh on navigation.
- Non-200 responses now swap by default, except for 204 and 304 status codes.
- New morphing swap styles (`innerMorph`, `outerMorph`) for better DOM state preservation.
- Built-in streaming response support with improved SSE handling.
- View Transitions API enabled by default for animated DOM state transitions.
- New scripting API for better async/await support and custom JavaScript integration.
- Unified request context (`ctx` object) for consistent event handling.
- Modern swap terminology introduced (`before`, `after`, `prepend`, `append`).
- New `:append` modifier for attribute inheritance to append values.
- HTTP status code conditional swapping with `hx-status:XXX` attribute.
- New `<hx-partial>` tag for multiple targeted swaps in a single response.
- Several attributes renamed or removed, with new attributes like `hx-action` and `hx-method`.
- Event names updated for consistency; new events added for better lifecycle handling.
- Extensions now globally registered, no longer requiring `hx-ext` attribute.
You Still Struggle with CORS Even After Reading Docs
3 months ago
- CORS (Cross-Origin Resource Sharing) is a security feature implemented in browsers to restrict cross-origin HTTP requests initiated from scripts.
- CORS errors are common in web development, especially when a client application tries to access resources from a different origin without proper permissions.
- Origins are defined by the combination of scheme (protocol), host, and port. Requests are considered same-origin only if all three match.
- SOP (Same-Origin Policy) is a foundational security measure that restricts how documents or scripts from one origin can interact with resources from another origin.
- CORS provides a way to relax SOP by allowing servers to specify which origins are permitted to access their resources via HTTP headers.
- There are three main CORS scenarios: Preflight Request (checks permissions before sending the main request), Simple Request (no preflight, meets specific conditions), and Credentialed Request (includes authentication).
- To resolve CORS issues, servers must include the correct 'Access-Control-Allow-Origin' header. Wildcard (*) can be used but is insecure for credentialed requests.
- Developers can bypass CORS in development using tools like Webpack Dev Server's proxy feature, but this is not a solution for production environments.
- Attempting to bypass CORS by embedding resources in tags like <img> or <script> does not allow JavaScript access to the response data.
- Understanding CORS is crucial for both frontend and backend developers to collaborate effectively in resolving related issues.
Pandoc in the Browser with WASM
3 months ago
- First official wasm version release available.
- Achieved through compiler builders' work and Tweag's initial contributions.
- Wasm blob size is approximately 16.1 Mb.
- Size is small for a GHC binary but large for a website blob.
- Significant milestone demonstrating feasibility.
GitHub - ruby/ruby: The Ruby Programming Language
3 months ago
- Ruby is an interpreted object-oriented programming language often used for web development.
- It offers scripting features for text processing, file management, and system tasks.
- Key features include simple syntax, object-oriented capabilities, operator overloading, and garbage collection.
- Ruby is highly portable, working on Unix-like systems, Windows, and macOS.
- Installation options and source code are available on the Ruby official website.
- Development branches and source code can be accessed via Git repositories.
- Community support includes mailing lists, Stack Overflow, and a bug tracking system.
- Ruby was created by Yukihiro Matsumoto (Matz) in 1995.
Interop 2026
3 months ago
- Interop 2026 aims to improve cross-browser interoperability by focusing on 20 key features.
- Safari has already implemented many features like contrast-color(), Media pseudo-classes, and Scoped Custom Element Registries.
- New features include advanced attr(), getAllRecords() for IndexedDB, WebTransport, and JSPI for Wasm.
- Focus areas cover Anchor Positioning, Container Style Queries, Custom Highlights, and more.
- Interop 2026 also addresses long-standing inconsistencies in features like Scroll Snap and CSS Zoom.
- Investigation areas include Accessibility Testing, JPEG XL, Mobile Testing, and WebVTT for future focus.
Java desktop apps with web front end (Angular, react)
3 months ago
- Modern desktop apps that are cross-platform (macOS, Windows, Linux).
- Java backend with access to the entire Java ecosystem (Maven, Spring, libraries).
- Web frontend with support for React, Vue, Svelte, or vanilla HTML/CSS/JS, including TypeScript.
- Lightweight with 50-80MB bundle size, using system WebViews instead of bundling Chromium.
- Lower memory footprint compared to Electron.
- Native APIs for file dialogs, clipboard, notifications, system tray, and global shortcuts.
- Easy distribution with built-in bundling, code signing, notarization, and auto-updates.
- Krema CLI for scaffolding projects with templates (React, Vue, Svelte, vanilla JS) and hot reload.
- Simple IPC (Inter-Process Communication) for backend-frontend interaction.
- Quick start via npm, npx, or curl.
Justifying Text-Wrap: Pretty
3 months ago
- Safari introduced a reasonable implementation of `text-wrap: pretty` in 2025, improving web typography.
- Historically, browsers used a naive greedy algorithm for line breaking, leading to less attractive text layouts.
- The Knuth-Plass algorithm, developed in 1981, optimized line breaking for print, but web browsers faced additional challenges due to dynamic window sizes.
- `text-wrap: pretty` aims to balance line lengths, while `text-align: justify` adjusts whitespace for exact alignment.
- Combining `text-wrap: pretty` with `text-align: justify` in Safari can result in excessive whitespace between words.
- The issue arises because the dynamic programming approach slightly undershoots the target width to balance line lengths, which becomes noticeable when justifying text.
- The article calls for a fix to this issue to achieve the intended typographic beauty on the web.
Dictionary Compression is finally here, and it's ridiculously good
2 months ago
- Dictionary compression can drastically reduce web traffic by using pre-shared dictionaries for compression.
- Initial tests show YouTube JS downloads shrinking up to 90% and Google search HTML by nearly 50%.
- Works by referencing a shared dictionary instead of sending duplicate data, ideal for web content.
- Supported in modern browsers and backends like Node.js, Python, Rust, and more.
- Compression dictionary transport standardizes how dictionaries are shared over HTTP.
- Real-world applications include Google, Pinterest, and Shopify, showing significant traffic reductions.
- Custom dictionaries can be built manually or trained using tools like Zstandard.
- Caveats include same-origin restrictions, cache management, and the need for careful testing.
Never Buy A .online Domain
2 months ago
- Author bought a .online domain for a small project, breaking their usual .com preference.
- The site was suddenly flagged as unsafe by Google and put on serverHold without any notification.
- Attempts to resolve the issue revealed a catch-22: Google required domain verification to remove the flag, but the domain wouldn't resolve due to the serverHold.
- Author learned hard lessons about sticking to .com domains, adding domains to Google Search Console early, and monitoring uptime.
- The site was eventually restored after public attention on Hacker News, but the experience was frustrating and costly in terms of time.
Astro and Svelte: Why I believe they're the future of web development
2 months ago
- Astro and Svelte are highlighted as the future of web development due to their simplicity and performance.
- The article critiques the over-engineering in modern web development, exemplified by frameworks like React and Vue becoming increasingly complex.
- Astro is praised for its static HTML output by default, reducing unnecessary JavaScript, and employing an Islands Architecture for interactivity.
- Svelte is commended for its compiler-based approach, eliminating runtime overhead, and offering a simpler, more intuitive syntax compared to Vue and React.
- Performance benchmarks show Astro and Svelte significantly outperform traditional frameworks in terms of speed, bundle size, and Lighthouse scores.
- The acquisition of Astro by Cloudflare is seen as a validation of its importance in the future of web development.
- Enterprise adoption by companies like Microsoft and Google underscores Astro's growing relevance.
- The article concludes with a call to embrace simpler, more efficient web development practices, advocating for Astro and Svelte as the tools of choice for content-driven sites.
We Built a Video Rendering Engine by Lying to the Browser About What Time It Is
2 months ago
- Browsers are real-time systems, making screen recording for videos challenging due to frame timing mismatches.
- Remotion was considered but rejected due to constraints requiring capturing arbitrary web content without framework limitations.
- A JavaScript solution was developed to replace browser time-related APIs with a controlled virtual clock for deterministic frame rendering.
- A warmup loop was implemented to prevent Chrome's compositor from going stale by continuously issuing 'skip frames'.
- A complex workaround for <video> elements involves server-side preprocessing, demuxing, decoding, and rendering to canvas synchronized to the virtual clock.
- Audio capture is achieved by intercepting Web Audio API and HTMLMediaElement calls to track playback intent and reconstruct audio server-side.
- Additional measures ensure determinism, such as disabling OffscreenCanvas and validating subresource requests against SSRF patterns.
- The solution is inspired by WebVideoCreator but adapted for modern Chrome APIs and specific cloud infrastructure needs.
- The implementation is planned to be open-sourced, offering techniques for programmatic video creation from web content.
Servo Baseline Readiness
2 months ago
- Servo is completing ~22 features/year, while the Baseline 'Widely Available' (BWA) set grows at ~52 features/year.
- At current pace, Servo will plateau around 80% by ~2037 and never catch up to BWA.
- Achieving full velocity parity requires ~44 FTE (€8.8M/year, €26.3M over 3 years).
- A phased approach prioritizing high-usage features could reduce initial headcount and cost by up to 40%.
- Key actions include unblocking 141 stalled features and fixing 51 regressions (features that lost >5 percentage points).
- WPT pass rate improved from 30% to 62% over 2.5 years.
- 439 of 593 BWA features are measurable via WPT; 154 lack WPT mapping.
- FTE cost is estimated at €200k/year, accounting for specialization and multi-disciplinary skills.
- Usage-prioritized scenarios (e.g., deprioritizing <1% or <5% usage features) offer cost savings.
- Data sources include wpt.fyi, web-features, and Servo git history.
Invoker Commands API
2 months ago
- The Invoker Commands API allows declarative assignment of behaviors to buttons for controlling interactive elements.
- Common uses include controlling popovers, dialogs, and text formatting without requiring JavaScript event listeners.
- Key HTML attributes: `commandfor` (specifies the element to control) and `command` (specifies the action to perform).
- The `CommandEvent` interface represents an event fired when a command is issued.
- Examples include creating declarative popovers, dialogs, and custom commands like rotating an image.
- Browser compatibility and specifications are provided for `CommandEvent`, `command`, and `commandForElement`.
Standardizing source maps
2 months ago
- Source maps are crucial for modern web development, allowing developers to map compiled code back to original source code for debugging.
- Initially, there was no official standard for source maps, leading to challenges in adding new features and maintaining consistency across tools.
- Google's Closure Tools in 2009 marked the beginning of complex JavaScript optimization, highlighting the need for source maps.
- A source map is a JSON file containing metadata like version, file names, source content, and encoded mappings.
- The 'mappings' field in source maps uses Base64 VLQ encoding to efficiently represent source-to-generated code relationships.
- Revision 3 of source maps in 2011 introduced significant improvements, reducing file size and improving encoding efficiency.
- Despite the lack of a standard, features like 'ignoreList' were successfully added through collaboration between browsers and tools.
- Bloomberg's 'pasta-sourcemaps' introduced function name mapping in stack traces, addressing a common debugging pain point.
- In 2023, the TC39-TG4 task group was formed to standardize source maps, leading to ECMA-426 in 2024.
- Future work includes proposals like 'Scopes' for better debugging of inlined functions and 'Range Mappings' for improved precision in source mapping.
Vite+ Alpha: Unified Toolchain for the Web (MIT License)
2 months ago
- Vite+ is open-sourced under the MIT license, offering a unified toolchain for web development.
- Combines Vite, Vitest, Oxlint, Oxfmt, Rolldown, and tsdown into a single toolchain.
- Manages runtime, package manager, and frontend toolchain for full local development cycle.
- Simplifies web development with commands like vp env, vp install, vp dev, etc.
- Built for performance with Rust-based tools, offering faster builds, linting, and formatting.
- Installation is straightforward with global commands for macOS/Linux and Windows.
- Vite Task provides a powerful task runner with automated caching and dependency-aware execution.
- Migration to Vite+ is supported with vp migrate and compatibility with existing tools.
- Community engagement through Discord, GitHub, X/Bluesky, and newsletter for updates.
Everything you never wanted to know about visually-hidden
2 months ago
- The article explores the history and evolution of the 'visually-hidden' CSS class, used to hide elements visually while keeping them accessible to screen readers.
- Originating in the early 2000s, the technique was developed to address accessibility needs, particularly for 'skip navigation' links and form labels.
- Over the years, the 'visually-hidden' class has accumulated various properties to handle browser quirks and ensure no visual artifacts, though many may now be obsolete.
- Modern alternatives like 'clip-path: circle(0)' or 'transform: scale(0)' are proposed as simpler solutions, but thorough testing is required to ensure compatibility.
- The article questions whether a native 'visually-hidden' solution should be standardized, but experts argue it could encourage misuse rather than solving underlying accessibility issues.
- The key takeaway is that 'visually-hidden' should be used sparingly, as it often masks poor design decisions, and semantic HTML remains the best practice for accessibility.
How to Not Get Hacked Through File Uploads
2 months ago
- File uploads introduce multiple attack surfaces beyond just your code, including image libraries, file systems, CDNs, and browsers.
- Parser exploits can occur in image processing libraries (e.g., ImageTragick, libwebp vulnerabilities), allowing attackers to execute arbitrary commands.
- Defenses against parser exploits include running file processing in restricted environments (containers, serverless functions) and keeping dependencies updated.
- SVG and HTML files can contain embedded scripts, leading to stored XSS if served from the same origin as the main application.
- Mitigate XSS risks by serving files from a separate domain with no shared session state and setting security headers like `Content-Disposition: attachment`.
- Filenames can be used for path traversal attacks (e.g., overwriting system files). Use random identifiers for stored filenames and validate archive extraction paths.
- Resource exhaustion attacks (e.g., zip bombs) can consume infrastructure resources. Enforce size limits at the proxy level and set rate limits.
- Validate file types using magic bytes, not just extensions or MIME headers, and maintain a strict allowlist of accepted formats.
- For user-to-user file sharing, implement antivirus scanning before making files available.
- Follow a security checklist covering validation, sandboxing, headers, and dependency updates to secure file uploads.
Framework doesn't matter
2 months ago
- Framework performance differences are negligible in real-world scenarios where network latency dominates response times.
- Database query optimization (e.g., avoiding N+1 queries) has a far greater impact on performance than framework choice.
- Network latency accounts for 69-83% of response time for well-optimized queries, making server location crucial.
- Framework benchmarks often measure unrealistic conditions (localhost, no database) that don't reflect user experience.
- Even at high traffic levels (1M requests/day), framework throughput differences are irrelevant due to massive headroom.
- Developer experience, documentation, and ecosystem should drive framework selection, not micro-optimizations.
- Real-world performance improvements come from query optimization, caching, and reducing network hops - not framework switching.

first prev8next

About|Login

#web-development

We are building a new browser from scratch, backed by a non-profit

A static site generator written in POSIX shell

Changes in htmx 4.0

You Still Struggle with CORS Even After Reading Docs

Pandoc in the Browser with WASM

GitHub - ruby/ruby: The Ruby Programming Language

Interop 2026

Java desktop apps with web front end (Angular, react)

Justifying Text-Wrap: Pretty

Dictionary Compression is finally here, and it's ridiculously good

Never Buy A .online Domain

Astro and Svelte: Why I believe they're the future of web development

We Built a Video Rendering Engine by Lying to the Browser About What Time It Is

Servo Baseline Readiness

Invoker Commands API

Standardizing source maps

Vite+ Alpha: Unified Toolchain for the Web (MIT License)

Everything you never wanted to know about visually-hidden

How to Not Get Hacked Through File Uploads

Framework doesn't matter