01 — Category
Notes from the workbench.
Page 2 of 3
How Aulvem pushes blog operational rules into the Zod schema in src/content.config.ts. .refine() ties two fields together, howto/faq objects keep structured data typed, and a grep validator covers what Zod can't reach.
Aulvem runs on Astro 5 + MDX + Content Collections, with operational rules enforced by a Zod schema and rehype plugins. A map of the stack and the pieces that hold it together.
Part 3 of the Figma basics series. Walks through registering and applying color, font, and effect (shadow) styles, then combining components with variants — the next step up in making a design file easier to maintain. Illustrated with example GIFs.
Figma basics, part 2. A walkthrough of strokes, grouping, components, and auto layout — the features that make UI parts genuinely reusable. With GIFs for each step. A foundation for a small design system.
Figma basics, part 1. The first set of operations to learn in Figma: creating a frame, changing its background fill, moving and resizing elements, entering text, and aligning. Walked through with example GIFs, written for first-time Figma users.
A setup guide for getting started with Figma. Covers what Figma is, its core characteristics, account signup, team creation, opening a new design file, and the basics of the editor — step by step, with screenshots. A starting point for anyone new to UI design.
Design thinking is a problem-solving approach that borrows the designer's creative process and applies it to other fields. A walkthrough of the empathize / define / ideate / prototype / test flow, the Double Diamond model, and practical notes on using it day to day.
A primer on Vue.js template directives for conditional rendering and list rendering — v-if / v-else / v-else-if, v-show for visibility toggles, v-for with the :key attribute, and when to reach for v-if versus v-show.
A step-by-step intro to Vue.js's own HTML notation for newcomers: the mustache tag ({{ }}), the v-bind directive, its shorthand colon form (:), and binding multiple attributes at once — each with a runnable code example.
A walkthrough of Vue.js components for first-time users — what a component is, how parent and child talk to each other, and where to use one-way binding (v-bind / v-on) versus two-way binding (v-bind + v-on, or .sync) — with runnable code at each step.
A working Vue.js engineer walks through the single-file component layout (template / script / style), the basics of data, methods, and the component lifecycle — when to use created vs mounted — with example code for people new to Vue.
A practical comparison of Angular and Vue.js from an engineer who used both on real projects for over a year — file structure, syntax, learning cost, and which one fits which kind of team.