Bilingual

Show HN: GolemUI – Declarative Form Engine
25 days ago
- The text presents a signup form implemented in multiple front-end frameworks (React, Angular, Lit, Vue) and vanilla JavaScript, along with a UI library (Golem UI).
- Common features across implementations include fields for email, password, account type (Free, Pro, Enterprise), conditional fields for company name and seats, subscription options, terms acceptance, and validation.
- Validation rules include required fields, email format, password minimum length, and conditional requirements based on account type and subscription status.
- Framework-specific approaches are shown: React uses react-hook-form, Angular uses signals and form validation, Lit uses manual state and validation, Vue uses vee-validate with yup, and vanilla JS uses HTML5 validation with custom logic.
- Golem UI implementations demonstrate a declarative form definition that works across React, Angular, Lit, and Vue with consistent configuration and validation.
Small details in my Mastodon client that I wanted more people to notice
21 days ago
- Readable CSS classes: Uses readable class names via Svelte's component CSS scoping, CSS modules, and a custom preprocessor for styling child components.
- Global variables: Exposes global variables (e.g., _settings.display_accent, _api) for userscripts and debugging.
- Responsive design: Features a responsive layout with a sidebar that switches to icon-only mode at specific breakpoints to save space.
- Mobile navigation: Adjusts UI elements like the 'create post' button position for mobile vs. desktop, with navigation mimicking mobile tab switching.
- Thread representation: Displays posts as disconnected bubbles that connect only when threaded, with visual adjustments for self-replies to reduce clutter.
- Display names: Shows handles instead of display names by default to balance design, with special handling for replies and boosts.
- Media handling: Supports images, videos, and audio with carousels for multiple attachments, lazy loading, and custom lightboxes with alt text captions.
- Click-to-open: Makes entire post boxes clickable while avoiding text selection or interactive element conflicts for opening posts.
- Hover effects: Uses CSS hacks (e.g., ::before with z-index) to implement hover backgrounds without breaking reply layouts.
- Tree-style replies: Represents replies as a tree with indentation and color-coding to clarify conversation structure.
- Post positioning: Ensures posts with many ancestors appear near the center of the screen using spacers for consistency.
- User info display: Shows user information on the side when focusing on a post to improve awareness in conversations.
- Follow buttons: Limits follow buttons to user profiles only, avoiding clutter and encouraging profile review before following.
- Soft filters: Treats soft filters similarly to content warnings, displaying them with icons and grayed-out text.
- Timeline tweaks: Merges boosts and thread ancestors in the home timeline to reduce duplication and maintain chronological order.
- Mention grouping: Groups multiple mentions into a single clickable element to save space and clean up post text.
- HTML parsing: Parses incoming HTML to process mentions and hashtags, improving user experience despite backend inconsistencies.
- Hashtag handling: Removes inline hashtags and lists them at the bottom of posts, with special rules to clean up hashtag-heavy content.
- Grouped notifications: Groups notifications manually for backends without native support, inspired by Phanpy's implementation.
- Reaction management: Converts certain emoji reactions to favorites, displays reactions next to interaction buttons, and handles backend inconsistencies.
- Quote display: Shows quotes at the top of posts, flattening nested quotes, with intentions to encourage 'yes, and...' style interactions.
- Post box design: Adapts post dialog position for mobile (bottom-up) and desktop (top-down), though it has limitations like lack of file upload support.
What's the best way to do authentication in modern applications
16 days ago
- JWTs are commonly used for authentication but storing them in localStorage makes them vulnerable to XSS attacks, as any JavaScript on the page can read localStorage.
- Using HTTP-only cookies with flags like Secure and SameSite=Lax prevents JavaScript from reading tokens, reducing the risk of token exfiltration during XSS attacks.
- CSRF attacks are a risk with cookies, but can be mitigated using CSRF tokens, SameSite attributes, and checking request headers like Origin or Sec-Fetch-Site.
- Stateless JWTs have revocation issues; server-side sessions with opaque session IDs in HTTP-only cookies allow immediate session invalidation and are more secure for single applications.
- For OAuth or third-party tokens, use a Backend for Frontend (BFF) pattern where tokens are stored server-side, and the browser only holds an HTTP-only session cookie, preventing token exposure to JavaScript.
- Refresh token rotation and reuse detection enhance security by invalidating stolen refresh tokens and forcing re-authentication.
- Device Bound Session Credentials (DBSC) bind sessions to hardware, preventing stolen cookies from being used long-term, though adoption is currently limited.
- For React applications, centralize token handling in an API wrapper to manage token refresh and prevent concurrent refresh requests from causing logout.
Capra, Cribl's Design System
4 days ago
- Startups often rely on third-party UI libraries for quick development, but this can lead to issues like constant style overrides, misaligned design, and accessibility problems as the product evolves.
- Cribl faced significant frontend challenges, including visual divergence, brittle code from overrides, and accessibility failures, prompting them to build their own design system called Capra.
- A design system is more than UI components; it includes design standards (like design tokens), a frontend component library, and a commitment to accessibility, which is crucial in the era of agentic programming.
- Cribl's Platform UI team partnered with Design to refresh UX, create new design tokens using the Design Token Community Group spec, and chose React Aria Components as a foundation for its accessibility and unstyled approach.
- The design system documentation was made accessible to both humans via Storybook and LLMs via Markdown conversion, ensuring ease of use for all.
- Rollout of Capra is ongoing, with over 25% migration progress; lessons learned include balancing final component states with pragmatic adoption to ease the transition for engineers.
- Capra is now publicly available on NPM for Cribl Apps customers, and future plans include expanding base components and supporting higher-level ones to improve consistency and code health.

Hasty Briefsbeta

frontend development

Show HN: GolemUI – Declarative Form Engine

Small details in my Mastodon client that I wanted more people to notice

What's the best way to do authentication in modern applications

Capra, Cribl's Design System