Hasty Briefsbeta

All tags

#web development

328 stories total

Bilingual

Plain – a web framework for building products with Python
a year ago
- Plain is a fork of Django, designed to bring new ideas to Python development.
- It supports building businesses, internal tools, or personal projects with ease.
- Plain was forked from PullApprove, a SaaS with Fortune 500 customers.
- Offers end-to-end development, from local setup to production with dashboards and feature flags.
- Split into multiple first-party packages, allowing major features to evolve independently.
- Foundation packages include plain (web basics), plain.models (ORM), plain.cache (caching), and more.
- Auth packages provide authentication solutions like plain.auth, plain.oauth, and plain.passkeys (coming soon).
- Admin packages offer tools for back-office operations, including plain.admin and plain.flags.
- Dev packages streamline local development with plain.dev, plain.pytest, and plain.tunnel.
- Frontend packages integrate modern tools like plain.tailwind, plain.htmx, and plain.esbuild.
WebKit Features in Safari 18.4
a year ago
- Safari 18.4 introduces 84 new features, including Declarative Web Push, CSS shape() function, and P3 & translucency for HTML color picker.
- New Web APIs include modern popover manipulation, and JavaScript features like Iterators.
- Enhancements in Responsive Design Mode, Web Extension API, and improvements to WKWebView.
- Focus on improving compatibility with 184 resolved issues and 13 deprecations.
- Declarative Web Push now available on iOS and iPadOS 18.4 for Home Screen web apps.
- CSS updates include the new shape() function, details styling improvements, and sideways writing modes.
- HTML enhancements include support for alpha and colorspace attributes in color picker.
- Web Inspector updates include device viewport presets and JSContext debugging improvements.
- Media updates include support for Image Capture API and improved MediaRecorder formats.
- Security updates include removal of the lock icon for HTTPS and new Connection Security Details.
- WebKit for Safari 18.4 is available on iOS 18.4, iPadOS 18.4, macOS Sequoia 15.4, and visionOS 2.4.
Writing an HTTP Server in Go from Scratch: Part 2
a year ago
- Added unit tests for server start and request parsing.
- Fixed headers to be case-insensitive and accept multiple values.
- Streamed responses instead of sending as a single string.
- Improved handling of bigger payloads with buffer management.
- Implemented middleware functionality for the server.
- Added support for query string parameters.
- Introduced subrouters for better route organization and middleware application.
Django 5.2 Released
a year ago
- Django 5.2 has been released with new features.
- All models are automatically imported in the shell by default.
- Django now supports composite primary keys with django.db.models.CompositePrimaryKey.
- Overriding a BoundField is now easier and can be set on form, field, or project level.
- Django 5.1 has reached the end of mainstream support, with the final bug fix release 5.1.8 issued.
- Django 5.0 has reached the end of extended support, with the final security release 5.0.14 issued.
- Users are encouraged to upgrade to Django 5.1 or later for continued security fixes.
Item Flow, Part 1: A new unified concept for layout
a year ago
- CSS Grid and Flexbox lack native support for masonry layouts, currently requiring JavaScript.
- Mozilla proposed masonry layouts in CSS, leading to debates and implementations by WebKit in Safari.
- A new unified concept called 'Item Flow' is emerging, merging ideas from Grid, Flexbox, and masonry.
- Item Flow introduces properties like 'item-direction', 'item-wrap', 'item-pack', and 'item-slack'.
- Flexbox could gain dense packing and balanced wrapping, while Grid could support no wrapping.
- Masonry layouts could be triggered via 'item-pack: collapse' in the new system.
- The proposal aims to unify layout properties, offering new capabilities for developers.
- Feedback is sought on the direction and potential improvements to Item Flow.
Overengineered Anchor Links
a year ago
- Anchor links appear simple but can be complex to implement.
- Solutions include adding extra padding, shifting trigger lines, and translating trigger points.
- A fractional translation method is proposed to meet conditions like reachability and order of headings.
- A custom mapping function is suggested to minimize deviation from an ideal trigger line for better user experience.
- Optimization techniques like SLSQP are explored to balance anchor and section penalties.
- Constraints are defined to keep virtual headings within page boundaries and in order.
- A realization that fractional translation may not scale well with very long pages leads to a smarter mapping function.
- The final solution involves a smoothstep function for smooth transitions in adjustment factors based on heading positions.
- The approach is humorously acknowledged as overengineered but results in a detailed blog post.
AnimeJs v4 Is Here
a year ago
- Anime.js is a fast and versatile JavaScript library for web animations.
- It offers a single API to animate anything on the web, breaking free from browser limitations.
- Features include a powerful animation API, SVG utilities for morphing shapes and motion paths, and a Scroll Observer API for scroll-triggered animations.
- Includes a Stagger utility for stunning effects, a Draggable API for interactive elements, and a Timeline API for synchronized animation sequences.
- The Scope API allows animations to respond to media queries, ensuring responsiveness.
- Designed for efficiency, it supports importing only necessary parts to keep bundle sizes small.
- Free to use, Anime.js is supported by sponsors and offers a wide range of animation capabilities.
Declarative Web Push
a year ago
- Declarative Web Push allows Web Push notifications without requiring an installed service worker.
- It is designed to be more energy efficient and privacy-focused compared to traditional Web Push.
- Declarative Web Push uses a standardized JSON format for push messages, ensuring compatibility and ease of use.
- The feature supports backward compatibility, allowing existing Web Push notifications to work alongside declarative ones.
- WebKit enforces user privacy by requiring notifications to be visible and blocking silent push messages.
- Declarative Web Push can be tested in iOS and iPadOS 18.4.
- The implementation includes standards work to ensure broad compatibility and future enhancements.
Rewriting my site in vanilla web
a year ago
- Rewrote website in vanilla HTML/CSS/JS to avoid complexity of frameworks and static site generators.
- Used Web Components for encapsulating repetitive sections, making HTML both the authoring and publishing medium.
- Adopted Semantic HTML and TAC CSS methodology for leaner markup and modular styling without excessive classes.
- Implemented Web Components with Light DOM for simplicity, avoiding heavy Shadow DOM features.
- Leveraged AI (LLMs) to automate conversion of old pages and components to the new style.
- Introduced client-side JS for lazy loading components based on viewport visibility.
- Emphasized pragmatism over purity, allowing for inline JS and breaking encapsulation when necessary.
- Redesigned the homepage to be more dense and desktop-equal, with plans to add dynamic elements like a Spotify card.
- Highlighted pros like instant feedback and no framework limitations, and cons like verbosity and frequent copy-pasting.
Hiding elements that require JavaScript without JavaScript
a year ago
- The site aims to function well without JavaScript, but some elements may appear clunky when JavaScript is disabled.
- A 7-line (or one-liner) solution can hide JavaScript-dependent elements to prevent broken functionality for users with JavaScript off.
- Example: A share button shows an SVG when JavaScript is enabled and a link when disabled, using the `<noscript>` tag for the latter.
- Initial approach: Adding a `js-enabled` class via JavaScript in the `<head>` to style elements differently, but this felt clunky.
- Alternative solution: Using `<noscript>` with a `<style>` tag to hide specific elements (e.g., `.theme-toggle`, `.menu-trigger`) when JavaScript is disabled.
- Improved method: Introducing a single class `.d-js-required` to hide all JavaScript-dependent elements with minimal CSS, avoiding maintenance overhead.
- Conclusion: Creative solutions like these help manage progressive enhancement, ensuring a smooth experience regardless of JavaScript availability.
CSS Naked Day
a year ago
- CSS Naked Day is celebrated on April 9 to promote web standards by removing all CSS from websites.
- Participants can link to the official page or add their site via an issue or file update.
- A PHP function is provided to automatically strip CSS on April 9, accounting for a 50-hour window to cover all time zones.
- Various tools and plugins are available for different platforms like WordPress, Drupal, Django, and more to facilitate participation.
- The event was initiated in 2006 by Dustin Diaz and has been maintained by different individuals over the years.
- The initiative emphasizes the importance of semantic HTML and the separation of content from presentation.
Clojure: Realtime collaborative web apps without ClojureScript
a year ago
- A multiplayer web app was created without ClojureScript or user-written JavaScript, using the Datastar hypermedia framework.
- The app streams the entire <main> element from server to client every 200ms over SSE (Server Sent Events).
- Performance is maintained despite naive implementation (e.g., 1600-cell grid with individual on-click listeners) due to Datastar's efficient morph algorithm.
- Network efficiency is achieved through Brotli compression over SSE, offering high compression ratios (100-230:1).
- SSE is preferred over WebSockets for operational simplicity, better compression, and built-in HTTP features.
- Datastar allows for a React-like view = f(state) model but keeps the state function on the server.
- Example code demonstrates using Hyperlith (a mini-framework on Datastar) for handling SSE, compression, and more.
- The app inherently supports multiplayer functionality without additional code changes.
- Datastar is backend language and framework agnostic, making it versatile for various projects.
Phoenix 1.8.0-RC Released
a year ago
- Phoenix 1.8.0-rc released with quality-of-life improvements.
- Includes dark mode support and magic link authentication by default.
- Introduces scopes for secure data access and authorization patterns.
- Extends Tailwind support with daisyUI for flexible theming and components.
- Streamlined onboarding with simplified code generators and layouts.
- New guides for authentication, authorization, and data modeling.
- Backwards compatible with some deprecations.
WordPress launches new free AI website builder
a year ago
- AI website builder creates fully designed WordPress websites instantly from user input.
- Ideal for entrepreneurs, freelancers, bloggers, and developers who need quick, professional sites.
- Process involves describing the site idea, logging into WordPress.com, and letting AI build the site.
- Users can make manual edits or use chat prompts for updates.
- 30 free prompts are provided; unlimited prompts require a hosting plan.
- Currently only available for new WordPress.com sites, with future support for existing sites planned.
- Tips for best results include being specific in initial prompts and utilizing free prompts effectively.
- AI tools are optional, catering to different user preferences and skill levels.
- Future updates may include AI assistance for revising existing sites and content.
Nice Things with SVG
a year ago
- SVG can be used to create animated wires by using lines or paths.
- Masks in SVG can be applied to elements like rectangles to create visual effects.
- Animations can be added to SVG elements using CSS keyframes for dynamic effects.
- Styling SVG elements with gradients and masks enhances visual appeal.
- A clerk-like Table of Contents (TOC) can be implemented using SVG for dynamic highlighting.
- SVG paths with commands can be used to create complex outlines for TOC.
- CSS mask-image property combined with SVG can create interactive and animated TOC highlights.
Some features that every JavaScript developer should know in 2025
a year ago
- JavaScript introduces iterator helpers for efficient array transformations without temporary arrays.
- Array.prototype.at() method allows negative indexing for easier access to elements.
- Promise.withResolvers() simplifies the creation of promises with external resolvers.
- String.prototype.replace() and replaceAll() accept callbacks for dynamic replacements.
- Variable swapping can be done concisely using destructuring assignment.
- structuredClone() is recommended for deep copying objects over JSON methods.
- Tagged templates enable custom processing of template literals.
- WeakMap and WeakSet allow for garbage-collectible key-value associations.
- Set operations like difference, intersection, union, etc., are now supported in JavaScript.
What I don't like in JavaScript
a year ago
- JavaScript has a simple design, making it easy to learn.
- It features a unified variable model, allowing any type of data to be stored in variables.
- Closures are supported out of the box, facilitating complex function behaviors and encapsulation.
- Asynchronous design with async/await support enhances coding experience.
- Ergonomic syntax, comparable to Python, improves readability and writability.
- Monkey patching allows for flexible modifications to built-in functionality.
- JavaScript is performant for a dynamically typed language, sometimes rivaling C/C++.
- Versatility beyond low-level programming and backward compatibility are key strengths.
- Design flaws include type coercion quirks, though avoidable with good practices.
- `typeof null` returns 'object' due to historical reasons, causing confusion.
- Comparing two NaN values yields false, requiring special handling.
- Default `Array.prototype.sort()` sorts lexicographically, not numerically.
- Newline sensitivity can lead to unexpected behavior in return statements.
- Omitting `var`, `let`, or `const` accidentally declares global variables.
- Octal numbers with leading zeros can cause misinterpretation.
- Array constructor behavior varies unpredictably with argument count.
Get Out of My Head
a year ago
- Remove unnecessary tags from your site's <head> to improve performance.
- Enhance website accessibility by cleaning up the <head> section.
- Make websites more environmentally friendly by optimizing the <head> content.
Introduce the Elm Architecture to MoonBit
a year ago
- Elm is a purely functional programming language for front-end web applications, emphasizing simplicity, performance, and robustness.
- MoonBit is introduced as a functional programming language with features like pattern matching and immutability, addressing JavaScript's limitations.
- Rabbit-TEA is a front-end framework inspired by Elm's architecture, consisting of Model, View, and Update components.
- The Elm Architecture enforces a unidirectional data flow, making state management predictable and straightforward.
- MoonBit's pattern matching and expression-oriented nature ensure efficient JavaScript code generation.
- Rabbit-TEA uses an HTML EDSL for declarative views, leveraging MoonBit's labeled argument syntax.
- Messages and pattern matching in Rabbit-TEA enhance safety and flexibility in handling user interactions.
- Side effects are managed using the Cmd type, ensuring consistent program state.
- Rabbit-TEA allows interaction with JavaScript through custom Cmds and inline JavaScript code.
- The framework's lightweight runtime benefits from MoonBit's global DCE optimization, resulting in compact code.
- Future plans for Rabbit-TEA include native backend support, server-side rendering, and time-travel debugging.
One Week with Desktop Linux After a 20 Year Absence
a year ago
- Author revisited Linux after 20 years, using a Framework laptop with Ubuntu.
- Main issues encountered: lack of integrated API documentation, inconsistent keyboard shortcuts, and problematic copy-paste functionality.
- Hardware choice was Framework Laptop 13 DIY Edition, favoring Intel for Thunderbolt support.
- Initial setup was smooth, but first-day challenges included muscle memory for shortcuts and trackpad issues.
- Workflow replication was partially successful, with notable gaps in app functionality and integration.
- Key dealbreakers: clipboard management, keyboard shortcut inconsistency, and API documentation lookup.
- Papercuts included mouse/trackpad scrolling speed, font replacement issues, and software installation methods.
- Pleasant surprises included the flexibility of Linux and the effectiveness of web apps as standalone applications.
- FirefoxPWA was a highlight, enabling web apps to function more like native applications with some configuration.
- Despite challenges, the author found the experience enjoyable and plans further exploration.

firstprev0next

About|Login

#web development

Plain – a web framework for building products with Python

WebKit Features in Safari 18.4

Writing an HTTP Server in Go from Scratch: Part 2

Django 5.2 Released

Item Flow, Part 1: A new unified concept for layout

Overengineered Anchor Links

AnimeJs v4 Is Here

Declarative Web Push

Rewriting my site in vanilla web

Hiding elements that require JavaScript without JavaScript

CSS Naked Day

Clojure: Realtime collaborative web apps without ClojureScript

Phoenix 1.8.0-RC Released

WordPress launches new free AI website builder

Nice Things with SVG

Some features that every JavaScript developer should know in 2025

What I don't like in JavaScript

Get Out of My Head

Introduce the Elm Architecture to MoonBit

One Week with Desktop Linux After a 20 Year Absence