Hasty Briefsbeta

All tags

#web-development

182 stories total

Bilingual

Font with Built-In Syntax Highlighting (2024)
4 months ago
- The article discusses the challenges of hand-coding websites, particularly syntax highlighting for code snippets without relying on external libraries.
- A solution is proposed: embedding syntax highlighting directly into a font using OpenType features (COLR table and contextual alternates).
- The modified font (Monaspace Krypton) includes colored versions of characters and uses contextual alternates to highlight syntax based on HTML, CSS, and JS rules.
- Pros of this method: easy installation, no JavaScript required, fast, clean HTML, works in textareas, and supports CSS theming.
- Cons: requires font modification for updates, limited to OpenType-supported environments, basic pattern matching, and no multiline highlighting.
- The article explains the technical implementation, including OpenType COLR tables for multi-colored fonts and contextual alternates for syntax-aware substitutions.
- Future potential includes using harfbuzz-wasm for advanced parsing to overcome current limitations.
- The font is available under the SIL Open Font License, and the project is open for contributions and feedback.
Help my website is too small
4 months ago
- A job website flagged and removed links from the user's public profile for being 'broken' due to small response sizes.
- The flagged sites include the Django web framework's homepage and the user's personal project, both implemented with Django.
- The job site's criteria deemed HTML responses under 7KB as 'broken', despite the sites functioning correctly.
- The user sarcastically requests tips on how to add bloat to their sites to meet the arbitrary size requirement.
Writing HTML by hand is easier than debugging your static site generator (2024)
4 months ago
- Static site generators can be cumbersome to set up and maintain across different machines.
- Debugging programming language installations, package ecosystems, and deployment models adds unnecessary complexity.
- Maintaining a website as a folder of static HTML files simplifies setup and maintenance.
- Using tools like Emacs' nxml mode or tpope's ragtag with autoformatting can enhance productivity.
- Static data in a validated format is preferable to dynamic code for long-term maintenance.
- 11ty is recommended as a flexible and well-designed static site generator.
Perfect Is the Enemy of Good (2025)
4 months ago
- The author initially planned to use multiple advanced technologies for their website rewrite but ended up using simple PHP and SQLite.
- Frontend technologies considered included React, TypeScript, Emotion, TailwindCSS, Mantine, Zustand, React-Query, and Next.js.
- Backend technologies considered included Prisma, Deno, Docker, Kubernetes, Istio, Caddy Server, PostgreSQL, Kafka, ArgoCD, Ansible, EC2, and Cloudflare.
- The actual implementation used plain PHP files with includes, SQLite for the database, and Phiki for code highlighting.
- The author emphasizes the principle 'perfect is the enemy of good' and advises choosing dependencies wisely, using strongly-typed languages, and writing unit tests.
- Einstein's formula for success (A = X + Y + Z) is mentioned as a reminder.
Creating Your Own Website
4 months ago
- Anyone can build a website using just a keyboard and a text editor.
- Common misconceptions about coding a website include needing a website builder or professional help, which are not true.
- Websites can be about anything, such as digital art galleries, business cards, or personal journals.
- Free and paid webhosts are available, with options like Neocities, GitHub Pages, and Dreamhost.
- HTML, CSS, and JavaScript are the core technologies for building websites, with HTML being the easiest to start with.
- Joining webrings and communities can help promote your website and connect with like-minded individuals.
- Maintaining and updating your website over time is key to keeping it alive and reflective of your current interests.
Tinykit: Self-hosted Lovable/v0 alternative. Realtime database, storage included
4 months ago
- Tinykit is an open-source platform for building and deploying web apps with AI.
- Features include an Agentic Builder for AI-generated code, self-hosting with PocketBase, and a realtime database.
- Includes a code editor, content fields for text editing, and a design system for visual customization.
- Supports time travel for undo functionality, image uploads, and integration with various LLMs like OpenAI and Anthropic.
- Upcoming features include backend functionality, authentication, a community app showcase, and more AI-powered workflows.
- Can run hundreds of apps on one server with domain mapping for each app.
- Early alpha stage with active development; feedback is encouraged via Discord or GitHub.
- Easy deployment options include one-click Railway deploy, Docker, or Node.js.
- Local setup involves cloning the repo and running via Docker or Node, with setup completion at localhost.
- Supports multiple domains per server, each serving different apps with separate editing interfaces.
- Offers 12+ starter templates across categories like Productivity, Finance, Content, Social, and News.
Show HN: I remade my website in the Sith Lord Theme and I hope it's fun
4 months ago
- RogueBerry One: KDE Plasma Mobile based OS for the Hackberry Pi
- Forensics Tools: Cookie's Forensics Tools
- Gooey Framework: Opinionated WebASM Bindings and Web Components Framework
- ZIMdex: Self-hostable Offline ZIM search and web spider
- Gooey CLI: CLI Wizard for easier Gooey project creation and management
When square pixels aren't square
4 months ago
- Videos on web pages can have their aspect ratio specified to prevent layout shifts when loading.
- QuickTime Player shows two resolutions: storage aspect ratio (SAR) and display aspect ratio (DAR).
- Pixel aspect ratio (PAR) affects how pixels are displayed, sometimes making square pixels appear rectangular.
- Non-square pixels are common in vertical videos like YouTube Shorts.
- The formula DAR = SAR × PAR links storage, pixel, and display aspect ratios.
- The Mars EDL 2020 Remastered video example shows how PAR affects the displayed image.
- A Python function using ffprobe can accurately calculate the display aspect ratio by considering PAR.
- Using the display aspect ratio ensures correct space allocation for videos on web pages.
Show HN: An interactive guide to how browsers work
4 months ago
- Browsers transform user input into URLs, handling search queries and domain names.
- HTTP protocol is used for communication between browsers and servers, with requests including headers like Host and Accept.
- DNS resolution converts domain names into IP addresses for server communication.
- TCP establishes a reliable connection via a three-step handshake before HTTP data is sent.
- HTTP requests and responses facilitate the transfer of data, with responses initiating HTML rendering.
- HTML parsing builds a DOM tree, which is error-tolerant and streaming, pausing for scripts.
- The DOM tree combines with CSS to form a render tree for layout and painting.
- Rendering involves Layout (reflow), Paint, and Composite stages, with changes affecting performance differently.
- The DOM is central to browser operations, affecting layout, styling, and interactivity.
- The guide is interactive, open-source, and designed to build intuition without deep technicalities.
Web development is fun again
4 months ago
- PHP 4 and jQuery were prominent in the past, with simpler web development practices like table-based designs and Photoshop slicing.
- Modern web development has become complex with frontend and backend challenges like build pipelines, CSS frameworks, APIs, and infrastructure management.
- AI tools like Claude and Codex have significantly boosted productivity, allowing solo developers to manage full-stack development confidently.
- AI helps reproduce coding standards and processes, making project initiation and execution more manageable and faster.
- With AI handling routine tasks, developers have more mental space for creativity, experimentation, and quality-of-life improvements in their projects.
Show HN: Jax-JS, array library in JavaScript targeting WebGPU
4 months ago
- jax-js is a machine learning library for the web, reimplementing Google DeepMind's JAX framework in pure JavaScript.
- It runs in the browser using WebGPU and WebAssembly for near-native performance, enabling numerical computing on the frontend.
- The library provides APIs similar to JAX, including automatic differentiation (grad), vectorization (vmap), and just-in-time compilation (jit).
- jax-js supports training neural networks in the browser, with examples like MNIST achieving >99% accuracy in seconds.
- It leverages WebGPU for GPU acceleration, generating optimized kernels for operations like matrix multiplication.
- The project is open-source and available on npm, with 0 dependencies and pure JavaScript implementation.
- Performance is competitive, with matrix multiplication reaching >3 TFLOP/s on modern hardware.
- The library includes features like hot module reloading, allowing real-time code edits during model training.
- Future improvements could include WebAssembly optimizations, WebGL fallback, and additional JAX feature parity.
- The project demonstrates the potential for full ML frameworks to run in browsers, beyond traditional model runtimes like ONNX.
GitHub: A case study in link maintenance and 404 pages (2013)
4 months ago
- Link maintenance involves ensuring links remain functional over time, with 404 Not Found being a common failure.
- GitHub and Microsoft are criticized for poor link maintenance, with GitHub's 404 page being particularly unhelpful.
- A useful 404 page should indicate the error, explain the problem, and suggest actionable solutions.
- GitHub could improve by checking for moved files, branches, or repositories and providing relevant redirects or suggestions.
- GitHub's link architecture, based on branch names rather than immutable changeset IDs, leads to frequent broken links.
- Serving a static 404 page is computationally cheap, but a more dynamic, useful 404 page could enhance user experience.
- GitHub's recent addition of repository redirects is a step forward, but more comprehensive link maintenance is needed.
- The article advocates for better error pages and proactive link maintenance to prevent broken links.
How to Make a Damn Website
4 months ago
- Start by writing your first blog post in plain HTML without worrying about CSS or design.
- Avoid using CMS, domain setup, or hosting initially; focus on content creation.
- Upload the HTML file to a server via FTP to publish your first webpage.
- Create an RSS feed manually to allow readers to subscribe to your blog updates.
- Use basic HTML elements for formatting and avoid styling until content is ready.
- Gradually expand your site by adding more posts and simple index pages.
- Style basic HTML elements first before moving on to complex layouts.
- Keep the process simple and incremental, focusing on shipping content regularly.
A polyfill for the HTML switch element
4 months ago
- A checkbox can become a switch, applying the ARIA switch role, which represents 'on' and 'off' states instead of 'checked' and 'unchecked'.
- The polyfill enhances contrast for users with prefers-contrast settings and supports high contrast modes in Windows and Firefox.
- macOS's 'Differentiate without color' setting adds visual indicators to switches, supported by the polyfill via high-contrast detection.
- Switches address accessibility challenges like interaction uncertainty (tap vs. slide) and label clarity ('on' as current or resulting state).
- The polyfill supports various writing modes and text directionality via the dir attribute.
- The switch element was proposed for HTML in 2018, with ongoing discussions and a pending PR as of 2023.
- The polyfill follows a progressive enhancement pattern, similar to customizable <select> elements.
- Available on npm and GitHub, the polyfill includes detailed usage instructions and a demo showcasing features like writing modes and styling options.
- Acknowledgments to contributors for accessibility advice, testing, feedback, and performance improvements.
The <Geolocation> HTML Element
4 months ago
- Chrome 144 introduces the new <geolocation> HTML element for requesting user location data.
- The element shifts from script-triggered prompts to a declarative, user-action-oriented approach.
- It reduces boilerplate code, improves user intent signaling, and helps avoid browser interventions.
- The development followed extensive testing and discussions within the web standards community.
- Originally proposed as a generic <permission> element, feedback led to capability-specific elements like <geolocation>.
- Validation showed significant improvements in user trust and decision-making with dedicated in-context buttons.
- The <geolocation> element simplifies recovery from blocked states and provides automatic refresh for granted permissions.
- Implementation requires less boilerplate, with attributes like autolocate and accuracymode for customization.
- Styling constraints ensure user trust by enforcing legibility, sizing, and visual integrity rules.
- Progressive enhancement allows graceful degradation for unsupported browsers, with options for custom fallbacks and polyfills.
Astro Joining Cloudflare
4 months ago
- Astro Technology Company, the creator of the Astro web framework, is joining Cloudflare.
- Astro remains open-source, MIT-licensed, and actively maintained, with support for multiple deployment targets.
- All full-time employees of Astro Technology Company will now work at Cloudflare, continuing to develop Astro.
- Astro was created in 2021 to address performance issues in content-driven websites, contrasting with data-driven applications.
- Astro is now downloaded nearly 1,000,000 times weekly and used by major companies like Webflow, Wix, Microsoft, and Google.
- Attempts to monetize Astro through hosted services were unsuccessful, leading to a refocus on the core framework.
- Cloudflare and Astro share a vision for the future of the web, combining infrastructure and framework strengths.
- Astro will stay free, open-source, and platform-agnostic, with continued community involvement and open governance.
- The upcoming Astro 6 release and 2026 roadmap will reflect renewed focus on performance and developer experience.
An Ode to the Return of Wysiwyg
4 months ago
- The author recalls a childhood moment in the late 90s when they realized the web was editable, sparking their interest in technology.
- WYSIWYG (What You See Is What You Get) tools like Frontpage and Macromedia Flash democratized web creativity in the 90s/2000s, enabling non-coders to build websites.
- The early web was characterized by personal expression, with GeoCities, Newgrounds, and MySpace allowing users to customize their pages extensively.
- Facebook's uniform design marked the decline of personal expression on the web, prioritizing algorithmic feeds and time-on-site optimization.
- Modern web development has become complex, with tools like React, TypeScript, and CI/CD raising the barrier to entry for personal projects.
- AI tools like Claude Code are reviving the WYSIWYG spirit by allowing users to create websites through natural language, lowering the barrier to entry again.
- The author is excited about the potential for a new wave of creativity as AI tools enable more people to build and express themselves online.
My new minimal static site generator
4 months ago
- Static site generators automatically populate homepages, index pages, and RSS feeds, reducing the risk of missing content.
- Unlike CMS like WordPress, static site generators run once to generate the site and are not exposed to the internet, reducing runtime costs and security vulnerabilities.
- Many static site generators impose restrictions, such as requiring Markdown, which can be difficult to parse for complex formatting.
- HTML is suggested as a simpler alternative to Markdown for web content, as it is natively supported and avoids translation layers.
- Custom static site generators offer complete control over site structure, content format (e.g., HTML, LaTeX, plain text), and specific features without relying on external dependencies.
- Writing a custom static site generator can be straightforward, with the author's example being a ~700-line C program that replaces more complex tools like Hugo.
- The transition to a custom generator may involve converting existing content, but it provides long-term benefits like stability, control, and the ability to implement unique features.
- The author advocates for personal website projects to be handcrafted, allowing for easy maintenance, updates, and customization without the constraints of pre-built solutions.
Show HN: SpeechOS – Wispr Flow-inspired voice input for any web app
3 months ago
- SpeechOS enables voice input for web apps, allowing users to speak 4x faster than typing.
- Features include AI-powered punctuation, filler word removal, and voice commands for app control.
- Supports 33+ languages, custom dictionaries, and regional variants for global reach.
- Includes analytics dashboard to track usage, time saved, and productivity impact.
- Easy integration with web apps via npm package and React bindings.
- Use cases span CRMs, CMS platforms, note-taking apps, document editors, and more.
- Enhances accessibility and reduces form abandonment rates significantly.
- Real-time transcription with under 500ms latency for seamless user experience.
- Offers custom voice commands, text snippets, and domain-specific vocabulary.
Writing First, Tooling Second
4 months ago
- Advocates for independent personal websites on personal domains to maintain web diversity and decentralization.
- Emphasizes writing content first before worrying about tooling, suggesting plain HTML as a starting point.
- Shares personal experience of starting with simple HTML files and gradually incorporating tooling over years.
- Discusses the evolution of his website from basic HTML to using PHP and eventually Common Lisp for generation.
- Argues against the necessity of blogs, suggesting websites can be simple collections of pages.
- Recommends using plain text formats like Markdown or AsciiDoc if HTML is disliked, with minimal tooling for conversion.
- Warns against spending excessive time on perfecting website setup before creating content.
- Concludes that the essence of a website is the content and ideas, with tooling being secondary.

first prev7next

About|Login

#web-development

Font with Built-In Syntax Highlighting (2024)

Help my website is too small

Writing HTML by hand is easier than debugging your static site generator (2024)

Perfect Is the Enemy of Good (2025)

Creating Your Own Website

Tinykit: Self-hosted Lovable/v0 alternative. Realtime database, storage included

Show HN: I remade my website in the Sith Lord Theme and I hope it's fun

When square pixels aren't square

Show HN: An interactive guide to how browsers work

Web development is fun again

Show HN: Jax-JS, array library in JavaScript targeting WebGPU

GitHub: A case study in link maintenance and 404 pages (2013)

How to Make a Damn Website

A polyfill for the HTML switch element

The <Geolocation> HTML Element

Astro Joining Cloudflare

An Ode to the Return of Wysiwyg

My new minimal static site generator

Show HN: SpeechOS – Wispr Flow-inspired voice input for any web app

Writing First, Tooling Second