Hasty Briefsbeta

All tags

#web-development

182 stories total

Bilingual

I Reinstated My Guestbook After 20 Years!
7 months ago
- The author reinstated the guestbook on their website after 20 years.
- The website started as an intranet portal in 2001–2005, running on Microsoft PWS and IIS, with guestbook data stored in an Access database.
- A public website subset also existed, using a CGI script for guestbook comments, which was vulnerable to XSS.
- After leaving university, the author created a new website but omitted the guestbook until June 2025.
- The new guestbook uses Common Lisp and Hunchentoot, with comments stored in text files and rendered as static HTML.
- Most original guestbook comments were lost due to disc rot, but some were recovered from other files and correspondence.
- A few comments from the old public website were also recovered.
- The new guestbook received unexpected positive feedback from visitors.
Microformats – building blocks for data-rich web pages
7 months ago
- Microformats 2 (mf2) is used to mark up profiles, posts, events, and other data on personal sites.
- To parse mf2 data, choose a parser from available libraries or use online tools like php-mf2 sandbox or pin13.net.
- When fetching and parsing mf2 data, ensure the parser uses the effective URL for correct relative URL resolution.
- Store raw HTML and derived data for future re-parsing, but skip intermediate canonical JSON to save space.
- Parsed mf2 data contains 'items' (top-level structures), 'properties', and 'children' (nested structures).
- Property values in mf2 can be plain strings, embedded HTML, img/alt structs, or nested microformats.
- Always handle property values flexibly—never assume a specific format (e.g., plaintext vs. HTML).
- Use helper functions to extract plaintext, HTML, or image URLs from mf2 properties safely.
- For nested microformats, handle cases where expected structures may be missing or replaced with alternatives.
- Leverage existing algorithms (e.g., authorship, representative h-card) for common mf2 consumption tasks.
- Sanitize and validate mf2 data to prevent XSS and other security risks before storing or displaying.
- Test your mf2 parser with real-world data to ensure compatibility with diverse publishing methods.
I played 1k hands of online poker and built a web app with Cursor AI
7 months ago
- Played 1,000 hands of online poker and built a web app with Cursor AI.
- Spent time reviewing hands with PokerTracker 4, reading books, and studying strategy.
- Built a Laravel MVP web app for poker stats with features like hand history parsing and balance checks.
- Learned emotional intelligence, self-regulation, resilience, and humility through poker.
- Managed bankroll and risk, focusing on discipline and following a plan.
- Used AI tools like Grok and Cursor to build the app without writing code.
- Compared working with Cursor AI to working with human developers, noting faster feedback loops.
- Faced challenges with hand history parsing and edge cases in poker hands.
- Found Claude 4.5 Sonnet Thinking improved response quality in Cursor.
- Focused on the present and potential upside of AI in building and learning.
I Switched from Htmx to Datastar
7 months ago
- David Guillot's DjangoCon Europe talk showcased converting a React app to HTMX, reducing code by 70%.
- Teams have found that switching from single-page to multi-page hypermedia apps can cut code by 60% or more.
- Datastar offers similar benefits to HTMX but with less code and better real-time capabilities without WebSockets.
- Datastar simplifies UI updates with fewer attributes compared to HTMX, improving developer experience.
- Datastar's server-driven approach keeps update logic centralized, unlike HTMX's scattered logic.
- Datastar supports component-level thinking, preventing invalid states and improving maintainability.
- Datastar enables real-time multi-user apps using Server-Sent Events (SSE) for push-based updates.
- Datastar promotes web-native features like CSS view transitions and web components.
- Community tips include re-rendering whole components, letting the server handle state, and using web components.
- Datastar enables high-performance applications, such as updating 800,000 points per second in a radar app.
Datastar: Lightweight hypermedia framework for building interactive web apps
7 months ago
- Datastar is a lightweight hypermedia framework for building reactive web apps.
- It supports server-side rendering and frontend frameworks with a single 10.75 KiB file.
- Works with any backend language and accepts text/html and text/event-stream content types.
- Simplifies frontend logic by shifting state management to the backend using HTML attributes.
- Enables reactive, real-time applications without the complexities of JS/TS ecosystems.
- Community-supported, nonprofit-backed, and designed to be simple, fast, and light.
Datastar response to allegations
7 months ago
- Datastar remains MIT-licensed and free, with some convenience plugins moved to Datastar Pro.
- The free version can achieve the same outcomes using standard APIs.
- Datastar was rewritten multiple times for a solid foundation, with no plans for v2.
- Pro is for those who want convenience, support the project, or avoid maintaining plugins.
- Pro is a one-time lifetime license from a nonprofit, with no buyout or rug pull.
- One bundle pricing for Pro simplifies purchasing and avoids FOMO.
- The core stays free, small, and fast; Pro adds convenience and tooling.
- The project aims to fund work and set clear support boundaries.
The European Accessibility Act Will Make the Web Better for Everyone
7 months ago
- The European Accessibility Act (EAA) will enforce strict accessibility standards for digital products in the EU starting summer 2025.
- Global companies will likely adopt these standards universally to avoid maintaining multiple versions of their sites.
- The EAA will impact web development practices, requiring semantic markup, keyboard navigation, and better design considerations.
- Similar to GDPR, the EAA is expected to have a ripple effect, influencing accessibility standards worldwide.
- Accessibility improvements in design systems and frameworks will benefit developers and users globally.
- The legislation may prompt other countries, including the US, to update their accessibility laws.
- Companies will need to invest in audits, training, and inclusive hiring to comply with the new standards.
- The EAA represents a significant shift, making accessibility a legal requirement rather than an optional best practice.
Building multi-step login forms that work well with password managers
7 months ago
- Password managers are essential for managing credentials on the web.
- Multi-step login forms can cause issues with password managers, leading to accessibility problems.
- Single Sign-On (SSO) systems centralize login management for employees, often using SAML or OpenID Connect.
- Password managers detect login forms to auto-fill credentials, but multi-step forms disrupt this process.
- Solutions include using correct autocomplete attributes and hidden username fields on password pages.
- For one-time codes, annotate fields correctly with 'autocomplete="one-time-code"'.
- Using proper HTML elements like <button> helps password managers trigger logins automatically.
- Password manager developers are encouraged to support multi-step login flows better.
CSS for Styling a Markdown Post
7 months ago
- Markdown is a simple and fast way to write text with formatting like bold, italics, and lists.
- Markdown content is transformed into HTML for display on websites.
- Styling markdown content can be done using pre-defined CSS frameworks like Tailwind Typography or custom CSS.
- Key elements to style include paragraphs, headings, images, lists, quotes, tables, code blocks, and thematic breaks.
- Styling tips: Use CSS variables for consistency, ensure responsiveness, and apply specific styles for readability.
- For headings, set font sizes, weights, and colors to improve navigation.
- Images should use `object-fit: scale-down` and proper sizing.
- Lists need margins and `overflow-wrap` for better display.
- Quotes can include attribution with additional styling.
- Tables require specific CSS for responsiveness and readability.
- Code blocks should have monospaced fonts and scrollable overflow.
- Thematic breaks (horizontal lines) can be styled for visual separation.
Htmx: Access modern browser features directly from HTML
7 months ago
- htmx provides AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML using attributes.
- htmx is small (~16k min.gz’d), dependency-free, extendable, and reduces code base sizes by 67% compared to React.
- htmx allows <a> and <form> elements to make HTTP requests, with click and submit events triggering them, supporting GET and POST methods.
- htmx completes HTML as a hypertext by removing constraints.
- Example usage: <button hx-post='/clicked' hx-swap='outerHTML'>Click Me</button> triggers an AJAX request to '/clicked' and replaces the button with the response.
- htmx is the successor to intercooler.js.
- htmx 2.x has dropped IE support; use 1.x for IE compatibility.
- Hypermedia Systems, a book on building Hypermedia-Driven Applications using htmx, has been released.
- htmx development is supported via GitHub Sponsors.
Hyperflask – Full stack Flask and Htmx framework
7 months ago
- Hyperflask is built on top of Flask, making it easy to use and master.
- Backend-driven apps simplify state management and reduce issues from frontend-heavy apps.
- Combined with HTMX and a component system, creating interactive apps is easier.
- Hyperflask introduces a component-driven architecture for both frontend and backend components.
- Features file-based routing, combining Python code and Jinja templates.
- Includes beautiful UI components from daisyUI and Bootstrap Icons, with Tailwind for customization.
- Offers built-in features like email sending, background jobs, push events, translations, and more.
- Can generate static websites or run in hybrid mode for dynamic requests.
- Standardized dev and prod environments using containers, with easy setup and deployment.
- Hyperflask is a small codebase, combining Flask extensions seamlessly, with an ecosystem of independent projects.
A Conspiracy to Kill IE6 (2019)
7 months ago
- A team of YouTube web developers conspired to kill IE6 by displaying a banner urging users to upgrade.
- The banner was designed to be subtle and only visible to IE6 users, with no defined timeline for deprecation.
- The team used 'OldTuber' status to bypass Google's code review process and deploy the banner.
- The PR team was initially caught off guard but leveraged the media's positive narrative about modernizing the web.
- Lawyers raised concerns about anti-competitive behavior but were satisfied after seeing the randomized browser order.
- Other Google teams, like Google Docs, followed suit with their own IE6 banners, accelerating IE6's decline.
- Within a month, IE6 usage on YouTube dropped by half, and global IE6 traffic decreased by over 10%.
- The team faced no serious repercussions, and their boss jokingly made them promise not to do it again.
Every vibe-coded website is the same page with different words. So I made that
7 months ago
- Critique of AI-generated websites being identical due to repetitive prompts.
- Highlighting the lack of understanding in code copied from AI without review.
- Mocking the reliance on AI to fix bugs without diagnosing issues.
- Disregard for proper software practices like architecture, testing, and documentation.
- Satirical pride in creating a website quickly with AI without comprehending the code.
- Irony in claiming to be a 'Full Stack Developer' based solely on AI-generated work.
Show HN: Web-directive.js – A directive pattern for native HTML
7 months ago
- WebDirective is a library for implementing directive patterns in native HTML without frameworks, inspired by Vue.js.
- It allows developers to inject JavaScript behaviors into HTML elements by adding attributes, similar to Vue directives.
- Traditional methods like binding events directly or using delegated event listeners have drawbacks, such as memory leaks or complexity.
- Web Components offer another solution but come with a higher development barrier and potential CSS management issues.
- WebDirective provides a non-invasive, side-effect-free way to extend HTML elements, working across different environments and frameworks.
- It supports features like event listeners, singleton instances, and dynamic updates with hooks like mounted, unmounted, and updated.
- The library can be installed via npm, yarn, or directly from a CDN, and supports both UMD and ES module formats.
- WebDirective also includes utilities like useEventListener for automatic event cleanup and nextTick for waiting on updates.
- Custom events are emitted for directive lifecycle stages, with configurable prefixes to avoid conflicts.
- Options like enableAttrParams and enableChildrenUpdated allow for more advanced use cases, such as argument and modifier support.
Element: setHTML() method
6 months ago
- The `setHTML()` method of the `Element` interface provides an XSS-safe way to parse and sanitize HTML strings into a `DocumentFragment` before inserting them into the DOM.
- It requires an `input` string of HTML and an optional `options` object that can specify a `Sanitizer` or `SanitizerConfig` to control allowed or removed elements.
- The method automatically removes XSS-unsafe elements and attributes, even if they are allowed by the sanitizer configuration.
- `setHTML()` should be used over `innerHTML` or `setHTMLUnsafe()` for inserting untrusted HTML to prevent XSS attacks.
- Examples demonstrate using default and custom sanitizers, showing how unsafe elements like `<script>` are always removed regardless of sanitizer settings.
- The method is experimental and not widely supported, so browser compatibility should be checked before use in production.
Derek Sivers's database and web apps
7 months ago
- Derek Sivers maintains a private database with public code, mirrored on GitHub, GitLab, and Codeberg.
- The database setup includes circular references in tables.sql, with functions organized in schemas for easy reloading.
- Testing is done using pgTAP on a clone of the live database, with minimal data for focused testing.
- HTML templates are stored in the database, not on disk, for easy editing and use.
- PostgreSQL functions return two values: head text for HTTP headers and body text for the content.
- Different directories correspond to different web apps, each with its own set of functions and tests.
- Derek encourages discussions about programming and responds to every email.
I Built the Same App 10 Times: Evaluating Frameworks for Mobile Performance
6 months ago
- The author built the same app 10 times using different frameworks to evaluate mobile performance.
- Next-gen frameworks (Marko, SolidStart, SvelteKit, Qwik) achieved instant performance (35-39ms FCP).
- Bundle sizes varied significantly, from 28.8 kB (Marko) to 176.3 kB (Next.js) compressed.
- React and Angular frameworks showed unavoidable performance ceilings due to architectural overhead.
- Vue (via Nuxt) proved established frameworks can compete with next-gen performance when optimized.
- Marko delivered the smallest bundle sizes (6.8-28.8 kB compressed), making it ideal for bundle-sensitive projects.
- SolidStart and SvelteKit offered excellent alternatives with familiar JSX syntax and fine-grained reactivity.
- Qwik's resumability pattern provided instant interactivity for larger client-side apps.
- The evaluation highlighted the importance of choosing frameworks based on mobile-first priorities.
- The web's open nature was emphasized as a counter to app store monopolies and fees.
AirTips – Alternative to Bento.me/Linktree
6 months ago
- acoffee offers compact, restrained, and playful design projects.
- Features include customizable, API-ready, and invite-only modules.
- Supports responsive grids, badges, cards, headings, lists, emojis, and inline SVG.
- Safe markup with no scripts, pure and secure.
- Example JSON payload provided for modules.
- Projects include metrics and links with custom HTML and Tailwind classes.
</> Htmx – The Fetch()ening
6 months ago
- htmx 4.0 will replace htmx 2.0, skipping version 3.0 to keep the author's promise.
- Major changes include replacing XMLHttpRequest with fetch() for AJAX, making attribute inheritance explicit, and simplifying history support.
- New features in htmx 4.0 include streaming responses, Server-Sent Events (SSE) support, and DOM morphing with idiomorph.
- Out-of-band swaps are simplified, introducing <partial> elements for more flexible content management.
- View Transitions will have a queue system to ensure smooth animations, and CSS transitions remain supported.
- Event naming is standardized, and the async model improves performance and predictability.
- hx-on attributes are standardized for light scripting, with improved JavaScript API support.
- The upgrade to htmx 4.0 will require some changes for users, but core functionality remains largely the same.
- Planned release timeline includes an alpha in 2024, beta in 2025, and stable release in 2026.
Pose Animator – An open source tool to animate SVG characters via motion capture
6 months ago
- Pose Animator is an open-source web animation tool that brings SVG characters to life using body detection from a webcam.
- It utilizes TensorFlow.js models PoseNet and FaceMesh for real-time human perception in the browser.
- The tool applies skeletal animation concepts to vector characters, deforming SVG paths based on detected keypoints.
- Pose Animator uses Linear Blend Skinning (LBS) to deform vector paths, with special handling for Bezier curves.
- The rig structure includes 90 keypoints (73 from FaceMesh, 17 from PoseNet) and 78 bones for full-body animation.
- Motion stabilization techniques are employed to reduce jitter from model predictions using confidence scores.
- Future improvements may include better mesh rigging, weight painting tools, and support for raster images in SVGs.
- Users can try live demos, create custom SVG characters, and share creations using #PoseAnimator.

first prev5next

About|Login

#web-development

I Reinstated My Guestbook After 20 Years!

Microformats – building blocks for data-rich web pages

I played 1k hands of online poker and built a web app with Cursor AI

I Switched from Htmx to Datastar

Datastar: Lightweight hypermedia framework for building interactive web apps

Datastar response to allegations

The European Accessibility Act Will Make the Web Better for Everyone

Building multi-step login forms that work well with password managers

CSS for Styling a Markdown Post

Htmx: Access modern browser features directly from HTML

Hyperflask – Full stack Flask and Htmx framework

A Conspiracy to Kill IE6 (2019)

Every vibe-coded website is the same page with different words. So I made that

Show HN: Web-directive.js – A directive pattern for native HTML

Element: setHTML() method

Derek Sivers's database and web apps

I Built the Same App 10 Times: Evaluating Frameworks for Mobile Performance

AirTips – Alternative to Bento.me/Linktree

</> Htmx – The Fetch()ening

Pose Animator – An open source tool to animate SVG characters via motion capture