Hasty Briefsbeta

All tags

#web-development

182 stories total

Bilingual

Hyper – Outperform React on every metric
a year ago
- Hyper is a new markup language for building user interfaces, aiming to simplify frontend development.
- Hyper outperforms React in simplicity, minimalism, and scalability with clean, standards-compliant HTML.
- Hyper reduces boilerplate and cognitive load compared to React, which involves multiple abstraction layers and transpilers.
- Hyper enables reusable components with decoupled design, centralizing typography and styling in a single CSS file.
- Hyper supports full-stack applications and generative UIs, with future plans for intuitive routing, backend integrations, and design systems.
- Hyper challenges the current frontend ecosystem by promoting simplicity and standards over complexity and abstraction.
- Hyper is part of the Nue framework, which aims to be simpler than Next.js and Astro.
- Hyper is currently in developer preview, with plans for official launch and community contributions.
Q5.js – Beginner friendly graphics powered by WebGPU
a year ago
- q5.js is inspired by p5.js and Processing Java, optimized for interactive art with a WebGPU renderer.
- It features beginner-friendly documentation, compatibility with popular addons like p5.sound, ml5.js, and p5play, and no dependencies (~100kb minified).
- Free to use under LGPL, similar to p5.js, q5.js aims to make creative coding accessible.
- Supports Visual Studio Code with autocompletion via q5.d.ts and a specific jsconfig.json setup.
- Open-source and welcomes contributions, with a need for support via donations or volunteering.
- Not affiliated with The Processing Foundation, with credits to original creators and specific code sources.
Show HN: Hyper – Standards first React alternative
a year ago
- Hyper is a standards-first markup language for building user interfaces with clean syntax.
- Project goals include standards-first approach, simplicity, design systems, and scalability.
- Hyper contrasts with React by decoupling logic, structure, and styling.
- Simple components in Hyper use semantic HTML with minimal class names.
- Complex components in Hyper result in significantly smaller JS bundles compared to React.
- Hyper enables design system swaps without changing component code.
- Hyper enforces external design systems, eliminating tight coupling.
- Hyper applications remain simple and lightweight as they scale.
- Hyper uses Bun for installation and development.
- Hyper differs from Svelte and Vue by adhering more strictly to web standards.
- Hyper aims to reduce tooling and complexity by focusing on web standards.
- Standards offer timeless skills and sustainable products.
- Future plans include full-stack applications and generative UIs.
- Hyper faces challenges in developer perception and product completion.
- Contributions and feedback are welcomed, especially from CSS experts.
Show HN: Piny – Astro, React and Next Visual Editor for VSCode, Cursor, Windsurf
a year ago
- Piny is a visual editor for Astro, React, Next.js & Tailwind that runs in your IDE.
- Key features include Visual Tailwind Controls, Tailwind Class Inspector, and AI-powered Drag & Drop.
- Component Navigation allows quick jumps between components and associating routes with individual components.
- Pro features include Visual Select, editing multiple elements simultaneously, and navigating the whole project.
- Piny Free is completely free with no time limitations, no accounts, and no data collection.
- Early Access pricing for Piny Pro is $49/year (60% off) until May 28, 2025, with a 30-day money-back guarantee.
- Piny is designed to be extendable, with plans to support more libraries and frameworks in the future.
- Piny is built by Pinegrow, known for Pinegrow Web Editor and other web development tools.
What Happened to WWW.?
a year ago
- The 'www' prefix in URLs was never a technical necessity but became a convention due to early internet practices.
- Tim Berners-Lee's first website at CERN in 1990 did not use 'www' in its URL.
- The 'www' prefix became standard as network administrators followed existing subdomain conventions for different services.
- By the late 1990s, 'www' was ingrained in public consciousness, often highlighted in marketing materials.
- The shift away from 'www' began as web traffic dominated, making the prefix redundant.
- HTTP/1.1 and DNS tweaks made it easy to direct both 'www' and non-'www' URLs to the same site.
- Today, 'www' is largely obsolete, with browsers often hiding it in the address bar.
- Using 'www' can still have technical benefits, such as better cookie management across subdomains.
- The evolution of 'www' reflects the internet's dynamic nature, where conventions fade when no longer needed.
Plain Vanilla Web – Guide for de-frameworking yourself
a year ago
- Overview of techniques for building web sites and applications without build tools or frameworks.
- Focus on Web Components as basic building blocks, replacing frameworks like React or Vue.
- Utilizing modern CSS to replace tools like CSS Modules, PostCSS, or SASS.
- Guidance on building and deploying web projects without build tools or server-side logic.
- Building single-page applications with vanilla techniques, including routing and state management.
- Target audience: developers familiar with HTML, CSS, and JavaScript.
- Comparison of modern frameworks' power versus vanilla development's simplicity and low maintenance.
Next.js to Htmx – A Real World Example
a year ago
- The author initially used Next.js for an open-source URL shortener but found it increasingly burdensome over time.
- Next.js required constant maintenance as the codebase grew in complexity with numerous components and dependencies.
- Questioning the need for complex JavaScript, the author switched to plain HTML and htmx for simplicity and efficiency.
- Transitioning to htmx involved replacing components with HTML elements, resulting in a more reliable and faster website.
- The move eliminated build steps, reduced dependencies, and centralized logic on the server side.
- Compared to Next.js, htmx provided a more intuitive development experience and better performance.
- The author concluded that htmx improved both user and developer experience significantly.
Binary Formats Are Better Than JSON in Browsers
a year ago
- JSON is no longer the fastest option for browser-based web apps; alternatives like Avro, Protobuf, or Bebop should be considered for performance-sensitive applications.
- Benchmarking binary encodings in browsers revealed that many alternatives to JSON, including MessagePack, were slower, but recent developments have improved their performance.
- Common benchmarking mistakes include using Node.js instead of browsers and focusing on numeric-heavy datasets, which don't reflect typical use cases involving strings.
- End-to-end latency measurements, including server request to client processing, provide a more accurate comparison than just deserialization times.
- Compression reduces message size differences but doesn't eliminate the extra processing time required for JSON in browsers.
- Schema-based encodings like Avro and Protobuf offer built-in validation, adding safety without significant performance overhead.
- Lazy decoding in libraries like Flatbuffers and Cap'n Proto can improve performance when not all data is accessed, but materializing full objects may be slower.
- Recent browser improvements and library updates have made binary encodings more viable, with Bebop, Avro, and Protobuf showing strong performance.
- JSON has limitations, such as string size caps, lack of type support (e.g., 64-bit integers), and no built-in validation, which can lead to runtime errors.
- TypeScript and libraries like zod can mitigate some JSON issues, but schema-based encodings provide better end-to-end safety.
The most annoying video player of all time
a year ago
- The author reminisces about the frustrating yet irresistible pay-to-play mechanics of arcade games in the 1990s.
- Inspired by arcade games, the author set out to create the 'worst' video player using Media Chrome and Three.js.
- The video player requires users to drop a coin into a 3D slot to earn three seconds of playback time, mimicking arcade mechanics.
- The project uses Three.js for 3D modeling and react-three-rapier for physics, including collision detection for coins.
- Coins wobble realistically due to physics settings, adding an element of unpredictability and fun.
- The player features a countdown timer that pulses red when time is running out, adding pressure.
- Failing to insert a coin in time resets the video, creating a high-stakes, unforgiving experience.
- The author found unexpected enjoyment in the project, blending nostalgia with interactive gameplay.
- A challenge is issued to others to create their own 'worst' video players, with prizes for the most creative submissions.
Home – The Cozy CMS
a year ago
- home is a cozy content authoring system similar to Hugo or Zola but with key differences.
- home is not a static site generator and requires a server component for functionality like 'Log in with GitHub' and proper search via tantivy.
- home is opinionated, enforcing specific formats like JPEG-XL for images, AV1+Opus for videos, TypeScript for scripts, and Svelte 5 for components.
- home is multi-tenant, consisting of two web services: mom (handles deploys and derivations) and cub (handles rendering and caching).
- home's architecture is designed for scalability, with cubs serving all websites globally, making it unsuitable for running on a single VPS.
Show HN: Hover Effects TS – ASCII, Lego, and glitch hover effects using canvas
a year ago
- Collection of hover effects for images using Canvas API with TypeScript.
- Multiple effects available: ASCII art, zoom, particle dust, pixel art, Minecraft-style, and Lego effects.
- Features include responsiveness, interactivity, customization, and lightweight performance.
- Easy installation via npm, yarn, or pnpm.
- Simple implementation with a few lines of code for applying effects to images.
- Supports dynamic parameter updates and real-time configuration.
- Includes examples and best practices for implementation.
- Optimized for performance with tips on reducing bundle size and improving rendering.
- Compatible with modern browsers and includes React integration example.
- MIT License with continuous updates and improvements.
Writing HTML in HTML (2019)
a year ago
- The author declares their final website rewrite, opting for pure HTML over static site generators like Jekyll or Hugo.
- Highlights the benefits of using pure HTML: fewer sources to track, no need for additional installations, and no limitations imposed by static site generators.
- Mentions the main drawback of HTML: it's unpleasant to write, but suggests better editors like WYSIWYG Composer in Seamonkey or HTML Notepad as solutions.
- Advocates for copying boilerplate HTML or using shell scripts to streamline the creation of new posts or pages.
- Encourages embracing the uniqueness of each post's design, viewing them as 'time capsules' rather than enforcing uniformity.
- Acknowledges that their approach may not appeal to everyone but targets those frustrated with constant rewrites and static site generator limitations.
Show HN: Defuddle, an HTML-to-Markdown alternative to Readability
a year ago
- Defuddle is a tool that removes unnecessary elements from web pages to make them easily readable.
- It cleans up web pages by removing clutter like comments, sidebars, headers, footers, and other non-essential elements.
- Defuddle aims to output clean and consistent HTML documents, useful for HTML-to-Markdown converters.
- It can be used as a replacement for Mozilla Readability with differences like being more forgiving and providing consistent output for footnotes, math, and code blocks.
- Defuddle extracts metadata from the page, including schema.org data, and uses mobile styles to guess unnecessary elements.
- Installation is via npm, with Node.js requiring JSDOM for usage.
- Defuddle returns an object with properties like author, content, description, domain, favicon, image, and more.
- It is available in three bundles: Core, Full (with math equation parsing), and Node.js (optimized for Node.js environments).
- Options include debug mode, URL of the page, markdown conversion, and selector removal settings.
- Defuddle standardizes HTML elements, removes anchor links from headings, and standardizes code blocks, footnotes, and math elements.
- Building the package requires Node.js and npm, with commands to install dependencies and build the package.
Non-Pointless Software Projects for New Devs in the LLM Age
a year ago
- Learning coding through building projects is more effective than textbooks or tutorials for many developers.
- Building a portfolio of projects is recommended for new developers seeking their first job.
- Many suggested software project ideas online feel pointless as they are rarely used after completion.
- Projects that serve a real purpose are more meaningful than artificial coding challenges.
- Examples of useful projects include a personal screenshot uploader, a CLI email reminder tool, and a custom Discord bot.
- Hosting services for friends, like game servers, can provide valuable real-world experience.
- Building a lightweight web analytics tool is a more involved project that avoids issues with ad blockers.
- Web development is a recommended starting point for self-taught developers due to lower barriers to deployment.
- The rise of AI in coding challenges traditional notions of craftsmanship and the value of code.
Show HN: Bubbles, drop-in screensaver script for websites
a year ago
- Drop-in screensaver script for websites available at https://bubbles.90s.dev/ssaver.html
- Demo has a very short delay (1s)
- Script can be included with `<script src="https://bubbles.90s.dev/ssaver.js" type="module"></script>`
- Parameters can be customized: delay (default=60), speed (default=2), interval (default=100), minsize (default=10), maxsize (default=40)
- Released under MIT license
HellCaptcha: Accessibility Theater at Its Worst
a year ago
- hCaptcha's 'Accessibility' mode is non-functional and relies on a broken cookie system.
- The cookie bypass feature fails silently, requires a U.S. phone number, and offers no transparency.
- The text-based challenge is only available if the website enables it, leaving many users without an accessible option.
- hCaptcha's failures exclude disabled users from basic online activities like logging in or submitting forms.
- Alternatives to hCaptcha include Cloudflare Turnstile, honeypots, behavioral analysis, and progressive challenge escalation.
- Many sites don't need CAPTCHA at all and can rely on simpler methods like CSRF tokens and rate limits.
Which New Language Should I Learn for Web Development?
a year ago
- The author wants to learn a new programming language for web development that is significantly different from languages they already know (Go, Python, C++).
- Key requirements include: support for both backend and frontend, compatibility with SQLite, good unit testing support, open-source, actively-maintained, and minimal 'magic' or abstraction.
- Nice-to-haves include static typing, a good ebook available, and low abstraction.
- Non-goals include maximum performance and high-scale optimizations.
- The author evaluates several languages: Elixir/Phoenix/LiveView, Gleam/Lustre, Haskell, Ruby/Rails, PHP/Laravel, and Scala.
- Elixir is appealing for its unique features and Phoenix framework, but lacks static typing and LiveView feels too 'magical'.
- Gleam offers static typing and is built on Erlang, but is relatively new and lacks learning resources.
- Haskell has a powerful type system and mature ecosystem, but has a steep learning curve and might be too complex.
- Ruby/Rails is mature and productive but lacks static typing and doesn't feel innovative compared to Python.
- PHP/Laravel has improved but the author has an aversion to PHP and found documentation lacking.
- Scala has interesting typing features but feels too entwined with Java and the web frameworks are unexciting.
- The author concludes that Gleam is the best match, with Elixir as a close second, and Haskell as a future option.
Web dev is still fun if you want it to be
a year ago
- The repo is for 'Best of Best of the Worst', a simple ranking system for personal amusement.
- Author reflects on the complexity of modern web development compared to simpler times.
- Technology choices include Sinatra, Sequel, and SQLite for simplicity and speed.
- Author prefers Ruby over Java for its simplicity and ease of deployment.
- AI was used for some tasks like CSS and drafting content, but with mixed results.
- Simple solutions like inline CSS and dumb cookie schemes were implemented.
- Phlex was used for templating, despite disliking templating engines.
- Optimizations like UUIDv7 and preloading image filenames were added for fun.
- Leaderboard uses a simple upvote vs downvote system with a statistical twist.
- Deployment is straightforward with rsync to a VPS and SSH for restarts.
- The project was a return to fun, uncomplicated programming.
Ladybird browser May Update
a year ago
- Ladybird project merged 261 PRs from 53 contributors in May.
- Welcomed new sponsors including The Primeagen and SerpApi with $5,000 each.
- IRS recognized Ladybird Browser Initiative as a tax-exempt public charity, retroactive to March 2024.
- Added 15,961 new passing Web Platform Tests (WPT), totaling 1,815,223.
- Improved WPT runtime from over 5 hours to under 1 hour by splitting tests.
- Implemented a new, more tolerant JavaScript date parser to handle arbitrary formats.
- Completed clipboard APIs implementation including clipboard.read() and clipboard.write().
- Implemented transferable streams, allowing streams to be transferred via postMessage().
- Added initial support for SharedWorker, with future work planned for multi-process sharing.
- Replaced in-house BigInt implementation with LibTomMath for better performance and correctness.
- Implemented CSS var() and attr() handling in shorthand properties.
- Began work on @page rules for printed media styling.
- Achieved a 10% speed-up on Speedometer 2.1 through various JavaScript optimizations.
- Expanded inline caches to support polymorphic access, improving cache hit rates.
- Optimized bound function calls and iteration over built-in types to reduce overhead.
- Thanked all contributors for their code contributions in May.
MonsterUI: Python library for building front end UIs quickly in FastHTML apps
a year ago
- MonsterUI simplifies web UI development by providing pre-styled components in pure Python.
- It addresses the complexity of modern web styling by integrating with FastHTML, HTMX, and Tailwind CSS.
- MonsterUI offers smart defaults, responsive components, and eliminates the need for extensive CSS knowledge.
- Key features include theme customization, semantic text styles, smart layout helpers, and common UI patterns.
- Higher-level components like navbars, modals, and cards are included for complex UI needs.
- MonsterUI supports Markdown rendering with syntax highlighting and integrates seamlessly with existing frameworks.
- Getting started is easy with pip installation and minimal setup for a fully styled application.

first prev1next

About|Login

#web-development

Hyper – Outperform React on every metric

Q5.js – Beginner friendly graphics powered by WebGPU

Show HN: Hyper – Standards first React alternative

Show HN: Piny – Astro, React and Next Visual Editor for VSCode, Cursor, Windsurf

What Happened to WWW.?

Plain Vanilla Web – Guide for de-frameworking yourself

Next.js to Htmx – A Real World Example

Binary Formats Are Better Than JSON in Browsers

The most annoying video player of all time

Home – The Cozy CMS

Show HN: Hover Effects TS – ASCII, Lego, and glitch hover effects using canvas

Writing HTML in HTML (2019)

Show HN: Defuddle, an HTML-to-Markdown alternative to Readability

Non-Pointless Software Projects for New Devs in the LLM Age

Show HN: Bubbles, drop-in screensaver script for websites

HellCaptcha: Accessibility Theater at Its Worst

Which New Language Should I Learn for Web Development?

Web dev is still fun if you want it to be

Ladybird browser May Update

MonsterUI: Python library for building front end UIs quickly in FastHTML apps