When we started building FÉLAG — a multilingual blog about algorithmic trading, cryptocurrency, and automation — we knew we needed a solid foundation. Not just for content, but for the entire engineering workflow.

Here's what we accomplished in the last week, and the technical decisions behind each choice.

The Goal

Build a blog that:

• Supports RU and EN with strict parity
• Has automated quality checks before every commit
• Delivers seamless UX (smooth transitions, scroll restoration, adaptive layout)
• Is optimized for SEO and accessibility

Foundation and CI/CD

Automated Validation Pipeline

We created npm run verify — a script that runs 5 checks before every build:

1. Build project — catches compilation errors
2. Check JSON-LD — prevents raw JSON.stringify in structured data
3. Check duplicate paths — avoids 404s from duplicate routes
4. Check NUL bytes — prevents Markdown parsing errors
5. Check internal links — catches broken links early

This script is now part of our pre-commit hooks, blocking any commit that fails validation.

Multilingual Parity

One of the biggest challenges was ensuring RU and EN versions stay in sync. We implemented a compile-time guard in i18n/ui.ts:

type LocaleParity = Record<keyof (typeof ui)['ru'], string>;
const _enParity: LocaleParity = ui.en;

This TypeScript trick forces the compiler to check that every key in ru exists in en. If someone adds a new translation key to Russian but forgets English, the build fails.

UX and Performance

Scroll Restoration Across Languages

When users switch languages, they expect to stay at the same position on the page. We implemented this using sessionStorage and requestAnimationFrame:

// Save scroll position before navigation
sessionStorage.setItem('scrollY', String(window.scrollY));

// Restore after new page renders
requestAnimationFrame(() => {
  const savedScroll = sessionStorage.getItem('scrollY');
  if (savedScroll) window.scrollTo(0, parseInt(savedScroll));
});

Adaptive Grid System

We built a responsive layout that works from mobile drawer menus to desktop sticky sidebars:

• Desktop: Fixed sidebar with categories + 2-column grid
• Mobile: Compact drawer menu + single column
• Tablet: Adaptive breakpoints at 768px and 1024px

Technical Debt Cleanup

We ran a comprehensive pre-release audit and fixed 14 issues:

Critical Fixes

• FallbackImage import: Fixed ReferenceError in OG image generation by using static path from /public/
• Deduplication logic: Changed .has() to .add() in Set — the deduplication was silently failing

SEO Improvements

• Removed query parameters from breadcrumbs (?categories=crew → clean /ru/saga/)
• Added rehype plugin for automatic external link handling (class, target, rel, SVG icon)

Accessibility (A11y)

• Added aria-hidden="true" to 4 decorative SVG icons
• Added aria-label to email input and consent banner buttons

Code Cleanup

• Removed 6 dead image files (~189 KB)
• Removed dead astro:before-swap event listeners (View Transitions not enabled)
• Fixed duplicate addEventListener on search input

Lessons Learned

1. Automate early: The npm run verify script saved us hours of manual checking
2. TypeScript guards are powerful: The locale parity check caught missing translations before they reached production
3. Scoped CSS can be tricky: Astro's scoped styles in components can override global CSS in unexpected ways
4. Building in public builds trust: Sharing our process attracts collaborators who value transparency

What's Next

Now that the foundation is solid, we're moving to content:

• Trading bot configuration breakdowns
• Real trading system analysis
• Risk management and mathematical expectation
• Mistake decomposition

Resources

• Full article
• Telegram channel
• Support options
• Trading Journal
• Blog

This article is part of our "Building in Public" series. We share our engineering decisions, mistakes, and learnings as we build FÉLAG — a systematic approach to algo-trading.