frontend

Bilingual

Octane – React's programming model, compiled
2 months ago
- Octane is a compiled frontend framework that removes the need for rules of hooks and dependency arrays, allowing hooks to be placed in conditions or early returns.
- It compiles templates to direct DOM writes and keyed @for lists for efficient updates, and supports .tsx files for gradual adoption.
- Octane maintains compatibility with React components, hooks, Suspense, context, portals, transitions, actions, controlled forms, and SSR, enabling migration one component at a time.
- Signals are optional; Octane keeps components as plain functions that read top-to-bottom, with the compiler handling performance optimization.
- The framework significantly outperforms React in most benchmarks, often being 2-3x faster, and is competitive with other modern frameworks like Svelte, Solid, and Vue Vapor.
- It includes a CLI tool, octane doctor, for diagnosing issues, and supports integration with existing React apps via OctaneCompat islands.
CSS: Unavoidable Bad Parts
2 months ago
- HTML5 semantic tags like <main>, <article>, <nav> help structure pages; less obvious elements like <ul>, <details>, <dl> are also useful.
- Avoid excessive wrapper elements; prefer semantic markup and CSS that works with it.
- Layout is fundamentally hard in GUI frameworks; understand the layouts a system allows rather than forcing your own.
- Browser default styles differ, so use a CSS reset or normalization for consistency.
- Classless CSS (styling HTML elements directly) can be effective after reset, avoiding complex selectors.
- CSS selectors enable problematic inheritance; consider classless CSS/inline styles or component-scoped nesting.
- Always set box-sizing: border-box to make padding and borders not affect overall size.
- Margin collapsing combines margins via max rather than sum, which is useful but surprising; consider using owl selector for parent-controlled spacing.
- Default flow layout is document-oriented; use flexbox for spatial control.
- Responsive design can often be avoided by relying on HTML's inherent reflow and setting max-width on text columns.
- CSS pixels are visual angle units, not physical pixels; sizing in pixels works across displays.
- Font-size is inconsistent across fonts; use font-size-adjust to normalize, and check readability on different configurations.
- Line-height can cause unexpected shifts when mixing fonts; it's the height of a line box, not the glyph height.
- Vertical rhythm (aligning lines across elements) is often unnecessary for single-column layouts.
- Word-break issues occur with long unbreakable spans like code or URLs; use tips to prevent horizontal overflow.
Gsxui – Shadcn-style components for Go
2 months ago
- gsxui is a shadcn-style component set for gsx, a Go frontend framework.
- Components are copy-in, type-checked, and server-rendered, giving developers full ownership of the code.
- Style components with Tailwind CSS and ship them easily.
- Installation involves running 'go install' for gsxui, then 'gsxui init', and adding components like button with 'gsxui add button'.

frontend

Octane – React's programming model, compiled

CSS: Unavoidable Bad Parts

Gsxui – Shadcn-style components for Go