Hasty Briefsbeta

All tags

#web-development

182 stories total

Bilingual

Rolling the Dice with CSS Random()
8 months ago
- Introduction of the CSS `random()` function for generating random numbers without JavaScript.
- Basic syntax: `random(min, max, step)` with optional step for rounding.
- Example applications: random animation delays, layout positioning, color generation.
- Star field demo: Random positioning and sizing of stars using CSS.
- Use of custom properties and `element-shared` for consistent randomness across elements.
- Grid layout example: Randomly colored rectangles placed in a grid.
- Photo stack demo: Random rotation and positioning for a natural look.
- Wheel of Fortune demo: Random rotation for interactive elements.
- Different methods to share randomness: by name within an element, between elements, or globally.
- Call for feedback on the `random()` function from the web development community.
Who's Afraid of a Hard Page Load?
8 months ago
- SPAs (Single-Page Applications) use partial page replacement for navigation, which can cause reliability issues.
- Users prefer traditional websites over SPAs in poor network conditions due to better caching and back button behavior.
- SPAs diminish user agency by obscuring network calls and failure cases.
- The push for SPAs is often driven by commerce, aiming to keep users engaged longer.
- Browsers continuously improve HTML performance, making SPAs' benefits less clear for most applications.
- SPAs require significant engineering effort to match or exceed browser-native features like navigation and caching.
- Traditional websites benefit from browser improvements without additional developer effort.
- SPAs are suitable for applications where client-side updates are frequent and independent of user actions, like live data dashboards.
Titles Matter
8 months ago
- The author disagrees with the assertion that anyone who generates websites using AI prompting is a web developer, arguing that the title implies a certain level of skill and knowledge.
- Web development involves understanding HTML, CSS, JavaScript, and related concepts like performance, accessibility, and debugging, which prompters (those relying on LLMs) generally lack.
- The author distinguishes between 'making websites' and 'web development,' emphasizing that the latter requires applied expertise in how the web works.
- Titles like 'web developer' imply earned expertise, and giving the same title to those who merely use LLMs without understanding the underlying technology is misleading and diminishes the profession.
- LLMs often produce poor-quality frontend code, particularly in terms of accessibility, maintainability, and efficiency, which prompters may not recognize due to lack of expertise.
- The author argues that disambiguating between prompters and web developers is not gatekeeping but a necessary distinction to respect the skills and knowledge of professional web developers.
- The devaluation of web development is a recurring issue, and equating prompters with web developers further undermines the profession.
- The author welcomes newcomers to web development but stresses the importance of learning the fundamentals and earning the title through expertise.
You no longer need JavaScript: an overview of what makes modern CSS so awesome
8 months ago
- Modern JavaScript frameworks often bloat websites, causing slow load times and errors.
- HTML and CSS alone can achieve a lot without needing JavaScript for many websites.
- CSS has evolved with new features like nesting, relative colors, and improved theming.
- Modern CSS includes quality-of-life improvements making it easier and more powerful to use.
- CSS animations and transitions are smoother and more performant than JavaScript alternatives.
- New CSS features like @starting-style, light-dark() function, and responsive viewport units enhance usability.
- CSS can handle input validation, hover effects, and animations without JavaScript.
- The article advocates for using CSS for performance, accessibility, and simplicity where possible.
- CSS is presented as an art form, allowing creative expression in web development.
Offline-First Landscape – 2025
8 months ago
- Marco's development faced significant challenges with offline-first implementation due to its data-intensive nature.
- Initial attempts with WatermelonDB revealed performance issues, especially with large datasets in web browsers.
- Exploration of 'new wave' offline-first solutions like Triplit and InstantDB showed promise but lacked maturity for Marco's needs.
- PowerSync, while mature, presented complex setup and poor developer experience, making it unsuitable.
- Replicache emerged as a viable solution, offering excellent performance and flexibility, especially when paired with Orama for indexing and search.
- The article highlights the ongoing evolution and challenges in offline-first technologies, predicting a shift away from traditional HTTP/REST APIs towards shared databases.
Lexxy: A new rich text editor for Rails
8 months ago
- Lexxy is a new rich text editor for Action Text based on Meta's Lexical framework.
- Features include good HTML semantics, Markdown support, real-time code syntax highlighting, and configurable prompts.
- Allows creating links by pasting URLs, previewing attachments like PDFs and videos, and works seamlessly with Action Text and Active Storage.
- Developed to address shortcomings of Trix, providing a better foundation for future improvements.
- Lexxy enables configuring the editor in Action Text similar to configuring databases in Active Record.
- Early beta launched, encouraging users to try it out.
Zola: One-stop static site engine
8 months ago
- Zola is a single executable with built-in features like Sass compilation, syntax highlighting, and table of contents.
- It generates sites quickly, often in less than a second, including all preprocessing.
- Zola produces static files, making it scalable and cost-effective with no server or database management required.
- Designed for ease of use, it has an intuitive CLI and template engine.
- Suitable for various content types like blogs, knowledge bases, and landing pages.
- Includes features like shortcodes and internal links to simplify content creation.
Exploring Grid-Aware Websites
8 months ago
- Grid-aware websites respond to the cleanliness or dirtiness of a user’s electricity grid by adjusting the website's features based on the current energy source (renewable or fossil fuels).
- Implementation involves using the Electricity Maps API to check the grid status based on the user's rough location, then modifying the website via a serverless function before it reaches the browser.
- The project aims to explore if grid-awareness can reduce carbon emissions of websites, despite the additional code required.
- Grid-awareness encourages a mindset shift from 'How can we do more?' to 'How can we do more with less?', focusing on performance budgets and necessary user experience elements.
- The Green Web Foundation's philosophy highlights the connection between digital and physical worlds, raising awareness about the environmental impact of digital choices.
- Grid-awareness can be integrated into existing practices like progressive enhancement, data saver modes, or lower power modes.
- Challenges include the high cost of the Electricity Maps API, the need for multi-disciplinary knowledge to implement grid-awareness, and adoption barriers in larger web frameworks.
- The grid-aware advisory group is working on libraries for CMSes like WordPress, Drupal, Umbraco, and Wagtail to lower implementation barriers.
- Demo implementations using 11ty and Astro show how grid-awareness can be applied, with different approaches for each tool.
- The project invites web developers, designers, and sustainability advocates to join the conversation and experiment with grid-awareness on their own sites.
No adblocker detected
8 months ago
- Internet ads are criticized for wasting time and degrading the internet experience.
- Supporting authors directly with money is more effective than viewing ads.
- A non-intrusive ad message is implemented on the site, visible only under certain conditions and easy to close.
- The message recommends using uBlock Origin to save time and bandwidth.
- Technical implementation includes a div with ad-like class names and a script to load the message, designed to be blocked by adblockers.
- CSS ensures the message is unobtrusive and only visible on larger screens.
- The system cannot detect DNS-based ad blocking but is designed to minimize false positives and user annoyance.
- The message is shown only once per user, thanks to a scoped cookie.
FedCM: A New Proposed Identity Standard That Could Change How We Log In
8 months ago
- FedCM is a new browser API designed for seamless federated login, supported in Chromium browsers.
- The API enhances privacy and security by providing a browser-native login method, reducing reliance on third-party cookies.
- FedCM addresses issues like the 'NASCAR flag problem' by improving identity provider discovery and user experience.
- The API is under active development, with a working draft moving towards a candidate recommendation.
- FedCM is already supported by major browsers like Chrome and Edge, with varying levels of support from others.
- Identity providers like Google, Shopify, and others have started implementing FedCM.
- The API simplifies login flows for developers by using native browser APIs, but fallback methods are still necessary due to incomplete browser support.
- FedCM includes features for user login, disconnection, and branding customization for identity providers.
- Security measures in FedCM limit data exposure to prevent tracking, ensuring user privacy.
- The future of FedCM includes efforts like IDP registration and delegation to further enhance privacy and usability.
No CSS, No JavaScript. Longevity on the Web
8 months ago
- CSS Zen Garden showcased the separation of HTML semantics and CSS visual design.
- jQuery simplified interfaces and proliferated plugins, acting as early polyfills.
- Websites from 20 years ago still function today, unlike many other technologies.
- Herman's post on 'Building software to last forever' inspires thoughts on longevity.
- Development starts with unstyled HTML, focusing on semantics and affordances.
- Targeting Web Platform Baseline and using MDN as a resource ensures compatibility.
- CSS Zen Garden phase utilizes modern tools like grid, flexbox, and multi-col layouts.
- Tailwind is used for quick prototyping without compromising longevity.
- Javascript is added sparingly for polish, with fallbacks for non-JS users.
- Service workers and view transitions enhance the user experience subtly.
- Self-hosting on old hardware aligns with a 'unix-y' approach to infrastructure.
tldraw SDK 4.0
8 months ago
- Announcement of tldraw SDK 4.0 with new features and license changes.
- Introduction of new CLI tool and starter kits for tldraw projects.
- Starter kits include 'agent', 'workflow', 'branching chat', 'chat', and 'multiplayer'.
- New licensing model requires a license for production use, with free trial options.
- Accessibility improvements to meet WCAG 2.2 AA standards.
- Significant growth metrics: 40,000 GitHub Stars, 70,000 weekly installs, and 8,000 Discord members.
- $10M series A funding led by Lux Ventures and Definition Capital.
BlurHash: A compact representation of a placeholder for an image
7 months ago
- BlurHash is a compact representation of a placeholder for an image.
- It replaces empty boxes with beautiful blurhash states, making designers happy.
- BlurHash strings are short (20-30 characters) and can be stored in JSON or databases.
- The process involves encoding an image into a string on the backend and decoding it on the client.
- The decoded string creates a placeholder image while the real image loads.
- BlurHash is platform-agnostic, with libraries available for various platforms.
Cloudflare is sponsoring Ladybird and Omarchy
7 months ago
- Cloudflare announces support for two open-source projects: Ladybird (a new independent browser) and Omarchy (an opinionated Arch Linux setup for developers).
- Ladybird is built from scratch with its own rendering engine (LibWeb) and JavaScript engine (LibJS), aiming to diversify the browser ecosystem beyond Chromium dominance.
- Omarchy provides a pre-configured Arch Linux development environment, making Linux more accessible to developers with tools like Neovim, Docker, and Git included.
- Cloudflare's support comes with no strings attached, emphasizing the importance of a diverse and open Internet ecosystem.
- Ladybird is in early development with an alpha planned for 2026, while Omarchy 3.0 has recently launched with improved installation and Macbook compatibility.
How Much Does Freedom Cost?
7 months ago
- Trump’s National Design Studio (NDS) is modernizing government interfaces, but accessibility concerns are raised.
- The NDS website, trumpcard.gov, uses a 16.7 MB PNG animation of an American Bald Eagle, which is inefficient.
- Optimizations like cropping the eagle's head and using AVIF could reduce file size by 20-80%.
- Using a video with alpha transparency (WebM/VP9 or HEVC) would be a more efficient alternative (500–800 KB).
- The website's development practices, including misuse of alt text and inefficient animations, are criticized.
- Vercel, the hosting platform, is sarcastically labeled as 'fascist-friendly' due to its association with the project.
Fonts.upset.dev: A privacy-friendly Google Fonts alternative
7 months ago
- fonts.upset.dev is a privacy-friendly alternative to Google Fonts.
- Google Fonts has two endpoints (fonts.googleapis.com & fonts.gstatic.com), non-minified CSS files, and does not comply with many EU regulations.
- Google Fonts uses only gzip for file compression.
- fonts.upset.dev combines CSS and font files in one endpoint, optimizes and minifies CSS files, and hides user IP addresses from Google.
- fonts.upset.dev supports both brotli and gzip for file compression.
Show HN: Next.js-like Python web framework, built for Htmx with FastAPI
7 months ago
- Holm is a web development framework that brings Next.js developer experience to Python, built on FastAPI, htmy, and FastHX.
- Key features include file-system based routing, JSX-like syntax with async support, first-class HTMX support, and no JavaScript dependencies.
- Pre-requisite knowledge includes basic understanding of FastAPI, htmy, HTML, and CSS.
- Installation is available via PyPI, with support for Linux, macOS, and Windows (WSL).
- Application structure follows file-system based routing similar to Next.js, with automatic route and layout composition.
- Security features like CSRF prevention are not provided out of the box, but third-party solutions are welcome.
- AI assistance is available through Context7, with good results expected due to similarities with Next.js and React.
- Performance impact is minimal, with no overhead for JSON APIs and negligible impact for web applications.
- Development setup includes tools like uv, poethepoet, mypy, ruff, pytest, and mkdocs-material.
- Contributions are welcome in various forms including discussion, documentation, development, and testing.
- Comparison with other frameworks highlights Holm's lack of JavaScript dependencies and its unique features like file-system routing and async support.
Bonsai – A library for building dynamic webapps, using JS_of_OCaml
7 months ago
- Bonsai is a library for building incremental, composable state machines.
- Bonsai_web is used for creating interactive browser-based UIs with Bonsai.
- Bonsai_examples provides example websites built using bonsai_web.
- Bonsai_web_components offers component libraries for web applications with bonsai_web.
- Bonsai_test is a library for testing Bonsai state machines.
- Bonsai_web_test is a library for testing Bonsai web applications.
- Bonsai_bench is a library for benchmarking Bonsai applications.
- Documentation is available in Bonsai web's docs directory and API docs in src/proc_intf.ml.
You Want Technology with Warts
7 months ago
- The presentation 'Building the Hundred-Year Web Service' discusses creating long-lasting web services using stable technologies.
- Key technologies suggested include SQLite for data storage, SQL for application logic, Node.js with Express for routing, Jinja2 for templates, and vanilla JS for HTTP requests.
- Web browsers are preferred for cross-platform software due to their longevity, with simple web pages lasting over 40 years unmodified.
- Recent browser innovations allow fast page loads without flickering, making full page reloads feel smooth.
- SQLite's 'warts' (like flexible typing) are reframed as signs of backward compatibility, ensuring long-term stability for applications.
- Choosing technologies with existing 'warts' can prevent future maintenance issues, as these features are unlikely to change.
Functional Programming Shaped (and Twisted) Front End Development
7 months ago
- A friend's confusion with modern React codebase highlights the shift from traditional web development practices.
- Modern frontend development has been influenced by functional programming principles, leading to complex abstractions.
- The web's inherent messiness and flexibility are features, not bugs, allowing for scalability and backward compatibility.
- Functional programming ideals like immutability and pure functions clash with the web's mutable, side-effectful nature.
- CSS-in-JS and Tailwind CSS represent attempts to control the cascade, often at the cost of performance and simplicity.
- Synthetic events in React abstract away native browser events, adding complexity and distancing developers from the platform.
- Client-side rendering and hydration introduce inefficiencies by rebuilding the DOM in JavaScript, ignoring browser capabilities.
- Native HTML elements like <dialog> are often overlooked in favor of custom JavaScript solutions, leading to accessibility and performance issues.
- Modern frameworks struggle to keep up with platform evolution, often lagging behind new HTML and CSS features.
- The industry is rediscovering the value of native web capabilities, with tools like HTMX and Astro leading the way.

first prev4next

About|Login

#web-development

Rolling the Dice with CSS Random()

Who's Afraid of a Hard Page Load?

Titles Matter

You no longer need JavaScript: an overview of what makes modern CSS so awesome

Offline-First Landscape – 2025

Lexxy: A new rich text editor for Rails

Zola: One-stop static site engine

Exploring Grid-Aware Websites

No adblocker detected

FedCM: A New Proposed Identity Standard That Could Change How We Log In

No CSS, No JavaScript. Longevity on the Web

tldraw SDK 4.0

BlurHash: A compact representation of a placeholder for an image

Cloudflare is sponsoring Ladybird and Omarchy

How Much Does Freedom Cost?

Fonts.upset.dev: A privacy-friendly Google Fonts alternative

Show HN: Next.js-like Python web framework, built for Htmx with FastAPI

Bonsai – A library for building dynamic webapps, using JS_of_OCaml

You Want Technology with Warts

Functional Programming Shaped (and Twisted) Front End Development