# Journey to Code

> Practical web development, real projects, and lessons from the build.

## Posts

- [You Committed a Secret: What to Do, in Order.](https://mnixblog.netlify.app/you-committed-a-secret-what-to-do-in-order/): A key is already pushed in a commit. Revoke it first, then remove it from history with git filter-repo and get your team onto the new history.
- [Make Git Yours.](https://mnixblog.netlify.app/make-git-yours-config-and-aliases/): Find where each Git setting comes from, turn on six defaults that each stop one annoyance, and write aliases that do not hide danger.
- [Hooks You Will Actually Use.](https://mnixblog.netlify.app/hooks-you-will-actually-use/): Write a pre-commit and a commit-msg hook that run on Windows, share them with the team, and know what a hook can never enforce.
- [Big Repositories, Shallow, Partial and Sparse.](https://mnixblog.netlify.app/big-repositories-shallow-partial-and-sparse/): Clone a large repository with only its latest commit, without file contents, or with only the folders you use, and know what each costs.
- [Dig Through History.](https://mnixblog.netlify.app/dig-through-history/): Find who changed a line, when a string appeared or vanished, and how a function changed, using git blame, log -S and log -L.
- [Find the Commit That Broke It.](https://mnixblog.netlify.app/find-the-commit-that-broke-it/): Find the exact commit that introduced a bug with git bisect, first by hand and then by handing the job to a script.
- [Interactive Rebase, Done Properly.](https://mnixblog.netlify.app/interactive-rebase-done-properly/): Tidy a branch before review with git rebase -i. Squash, reword and fixup commits, fold in a late fix, and recover from a bad rebase.
- [We Accidentally Built a Game Engine.](https://mnixblog.netlify.app/rust-modules-library-crate-split-game/): Split a Rust game into modules and a library crate, step by step, with tests passing after every move. Learn mod, pub, and pub use.
- [Idle Is Not a Timer.](https://mnixblog.netlify.app/idle-is-not-a-timer/): Make your Rust idle game progress while you are away. Add tick(seconds), a for loop, and tests that run an hour of game time instantly.
- [False Is Not an Answer.](https://mnixblog.netlify.app/rust-enums-and-match-click-upgrades/): Our player has ninety-six gold and nothing to buy. Build a shop in Rust, then replace a vague true or false with an enum and let match handle every outcome.
- [Winning Is Not Progress.](https://mnixblog.netlify.app/add-gold-xp-and-levels-in-rust/): Learn Rust by making winning pay. Add gold, XP, and levels to an idle game, level up with a while loop, and calculate damage with a &self method.
- [One Fight Is Not a Game.](https://mnixblog.netlify.app/rust-game-state-impl-methods/): Learn Rust impl blocks and methods by giving your idle game one Game struct, tougher enemies by stage, and a game.click() that runs a full turn.
- [Borrowing Without the Lecture.](https://mnixblog.netlify.app/borrowing-without-the-lecture/): Learn Rust ownership and borrowing by fixing three real compiler errors. Let a player attack an enemy with &Player and &mut Enemy, without a lecture.
- [Three Numbers Are Not a Player.](https://mnixblog.netlify.app/three-numbers-are-not-a-player/): When your attack takes three loose u32 values, Rust has no idea which belong to the player. Learn how structs give your game data a name and a shape.
- [One Attack Is Not a Fight.](https://mnixblog.netlify.app/build-a-combat-loop-in-rust/): Learn Rust by turning small functions into a combat loop. Build an attack() function, use mut and while, and create your first real game mechanic.
- [Skip Hello World.](https://mnixblog.netlify.app/skip-hello-world/): Learn Rust by building real game logic instead of stopping at Hello World. Write and test three small functions for damage, health, and enemy defeat.
- [What a Long, Strange Trip...](https://mnixblog.netlify.app/what-a-long-strange-trip/): After a year away, I’m back with lessons from parenthood, Code the Dream, React, Node.js, testing, teamwork, and learning to keep coming back.
- [From DOS to Desktop Disasters](https://mnixblog.netlify.app/from-dos-to-desktop-disasters/): Growing up on my dad's hand-me-down PCs: a 286 and DOS, DOOM LAN parties, the Great Apache Incident, and my first custom build.
- [The Future of Web Components](https://mnixblog.netlify.app/the-future-of-web-components/): Which Web Component features you can use today, which work in only some browsers, and which are still proposals, with a dated status table.
- [Advanced Patterns & Integration with Frameworks](https://mnixblog.netlify.app/advanced-patterns-and-integration-with-frameworks/): Pass objects from React to a custom element without getting \[object Object\], and handle events across the framework boundary.
- [Real-World Examples & Patterns in Web Components](https://mnixblog.netlify.app/real-world-examples-and-patterns-in-web-components/): See who publishes web components (Google, Microsoft, Adobe and others) and four patterns that make them easy to use, with runnable examples.
- [Accessibility in Web Components](https://mnixblog.netlify.app/accessibility-in-web-components/): Build custom elements that say what they are, work from the keyboard, and announce changes to screen reader users.
- [Lifecycle Callbacks & Component Communication](https://mnixblog.netlify.app/lifecycle-callbacks-and-component-communication/): React when a custom element is added, removed or changed with lifecycle callbacks, then pass messages between components.
- [Mastering the Art of Web Component Styling](https://mnixblog.netlify.app/mastering-the-art-of-web-component-styling/): Style a web component from outside through four doors in its wall: :host, ::slotted, CSS custom properties and ::part.
- [How Templates and Slots Work](https://mnixblog.netlify.app/how-templates-and-slots-work/): Use template for a fixed layout and slot for the blanks a page fills in, then combine them in a web component.
- [Exploring the Shadow DOM](https://mnixblog.netlify.app/exploring-the-shadow-dom/): Attach a private shadow tree to an element, choose open or closed mode, and learn which page styles can reach inside.
- [Getting Started with Custom Elements](https://mnixblog.netlify.app/getting-started-with-custom-elements/): Define a custom element, change an attribute and watch its text update, and see how it learns when it is added or removed.
- [Introduction to Web Components](https://mnixblog.netlify.app/introduction-to-web-components/): Build a custom tag like info-card that carries its own look and behavior, and see how Shadow DOM keeps its styles from leaking.
- [Exploring JavaScript Essentials for Enhancing HTML](https://mnixblog.netlify.app/exploring-javascript-essentials-for-enhancing-html/): Make a page react with JavaScript: hide a paragraph on a button press, update a list as you type, and load data from a server.
- [Advanced CSS: Optimization & Best Practices](https://mnixblog.netlify.app/advanced-css-optimization-and-best-practices/): Keep CSS files small and rules understandable, and expose a few named CSS variables so a component can be re-themed.
- [Responsive Layouts & Advanced CSS Techniques](https://mnixblog.netlify.app/responsive-layouts-and-advanced-css-techniques/): Rearrange one page for phone and desktop with Flexbox, Grid and media queries, with legible type and spacing.
- [CSS Fundamentals for Accessible Design](https://mnixblog.netlify.app/css-fundamentals-for-accessible-design/): Write CSS that works for low-vision, keyboard and screen reader users: selectors, specificity, color, focus styles and units.
- [Crafting Incredible HTML: Best Practices & Real-World Examples](https://mnixblog.netlify.app/crafting-incredible-html-best-practices-and-real-world-examples/): Keep HTML readable with consistent formatting, check it with a tool, and review it the way a stranger would.
- [Implementing Accessibility Best Practices in HTML & ARIA Essentials](https://mnixblog.netlify.app/implementing-accessibility-best-practices-in-html-and-aria-essentials/): Label every control and image, add ARIA only where plain HTML cannot say it, and manage keyboard focus for screen reader users.
- [Establishing a Foundation of Semantic HTML](https://mnixblog.netlify.app/establishing-a-foundation-of-semantic-html/): Replace a page of divs with header, nav, main and footer so visitors can jump straight to navigation, content or footer.
- [Spatial Audio, Music Systems, and Production Applications with Web Audio API](https://mnixblog.netlify.app/spatial-audio-music-systems-and-production-applications-with-web-audio-api/): Place a sound in 3D with PannerNode, keep exact time with the audio clock, and draw a live spectrum. MIDI is optional.
- [Revolutionizing Sound on The Web](https://mnixblog.netlify.app/revolutionizing-sound-on-the-web/): Write sound into a buffer by hand, add filters, echo and a room, build a bell with FM, and write an AudioWorklet effect.
- [Foundations of Web Audio Programming](https://mnixblog.netlify.app/foundations-of-web-audio-programming/): Play a note from a key press, shape it with gain and a low-pass filter, play a decoded file, and schedule a drum pattern.
- [Building Resilient Web Applications](https://mnixblog.netlify.app/building-resilient-web-applications/): Build an offline-first task list that saves on the device, syncs when the connection returns, and settles edit conflicts with a clear rule.
- [Modern Data Persistence in the Browser](https://mnixblog.netlify.app/modern-data-persistence-in-the-browser/): Pick between localStorage, IndexedDB and the Cache API by saving a setting, a list of records and a page for offline use.
- [Mastering the Fetch API](https://mnixblog.netlify.app/mastering-the-fetch-api/): Catch the 404 that fetch() reports as success, add a timeout, and wrap both in a getJson helper.
- [Beyond Media Queries](https://mnixblog.netlify.app/beyond-media-queries/): Build a card that adapts to its container, the reader's motion and color settings, and mouse, touch or keyboard input.
- [Browser Animation APIs](https://mnixblog.netlify.app/browser-animation-apis/): Fade or slide an element with element.animate(), reveal it on scroll, and respect reduced-motion settings, with no animation library.
- [Modern DOM Manipulation](https://mnixblog.netlify.app/modern-dom-manipulation/): Find elements with closest(), add thousands of items with a DocumentFragment, clone a template, and watch changes with MutationObserver.
- [Iterator Helpers](https://mnixblog.netlify.app/iterator-helpers/): Take the first three multiples of 7 from an endless sequence with iterator helpers, and see which ES2025 features run in Node 22.12.
- [Streamlining Asynchronous Code](https://mnixblog.netlify.app/streamlining-asynchronous-code/): Try the ES2024 additions with runnable examples, from Object.groupBy to Promise.withResolvers, and see which work in browsers today.
- [JavaScript's Evolution Continues](https://mnixblog.netlify.app/javascripts-evolution-continues/): Keep a class value truly private with ES2022, and sort an array without rearranging the original using toSorted() from ES2023.
- [Nullish Coalescing, Optional Chaining, and BigInts](https://mnixblog.netlify.app/nullish-coalescing-optional-chaining-and-bigints/): Read deep values safely with optional chaining, set defaults without losing 0 or an empty string, and use BigInt for exact large integers.
- [Smooth Operators](https://mnixblog.netlify.app/smooth-operators/): Filter users and key them by id with spread, flatMap and Object.fromEntries, plus the other small ES2018 and ES2019 additions.
- [Enhancing JavaScript's Async Capabilities](https://mnixblog.netlify.app/es7-and-es8/): Await two requests so the waits overlap and two 1-second jobs finish in about 1 second, plus the small ES2016 additions.
- [Navigating Rough Waters](https://mnixblog.netlify.app/navigating-rough-waters/): Eight lessons from a rocky team Voyage, from missing members at kickoff to the backlog, tools, code reviews, communication and scheduling.
- [The Transformation of Modern JavaScript](https://mnixblog.netlify.app/the-transformation-of-modern-javascript/): ES6 gave JavaScript let and const, arrow functions, classes, promises and modules. See each old habit break before the fix.
- [From Browser Script to Web Platform](https://mnixblog.netlify.app/from-browser-script-to-web-platform/): How JavaScript went from a quick browser script to a web platform, and the rough edges ES6 later fixed.
- [Undo Mistakes Safely](https://mnixblog.netlify.app/git-troubleshooting-and-recovery/): Throw away edits, fix the last commit, undo a commit with revert, and get a lost commit back with reflog. Committed work is almost always recoverable.
- [Git Best Practices and Workflows](https://mnixblog.netlify.app/git-best-practices-and-workflows/): Compare Git workflows, write commit messages that tools can read, and tag a release, then pick a workflow for a solo app or a team.
- [Advanced Git Features](https://mnixblog.netlify.app/advanced-git-features/): Stash unfinished work, amend and squash your own recent commits, and cherry-pick a single commit onto another branch.
- [Chaos Theory: A Game Jam Retrospective](https://mnixblog.netlify.app/chaos-theory-a-game-jam-retrospective/): My Game Jam Dev 2024 retrospective: a Unity game, a partner pulled away by a family emergency, a repo over its bandwidth limit, and favorite entries.
- [Remote Repositories and Collaboration](https://mnixblog.netlify.app/remote-repositories-and-collaboration/): Connect a project to a remote such as GitHub, push your commits, pull other people's, and know what to do about a rejected push.
- [Branching and Merging Strategies](https://mnixblog.netlify.app/branching-and-merging-strategies/): Create and switch branches, merge them back, resolve a merge conflict, and learn what rebasing is and when to avoid it.
- [Getting Started with Git](https://mnixblog.netlify.app/getting-started-with-git/): Turn a folder into a Git repository, save your first two commits, and check what the next one will contain before you take it.
- [Git Ready to Branch Out](https://mnixblog.netlify.app/git-ready-to-branch-out/): Tell Git your name and email, pick an editor other than Vim for commit messages, and check that the settings stuck.
- [Unveiling My Experience with Chingu](https://mnixblog.netlify.app/unveiling-my-experience-with-chingu/): How I joined a Chingu Voyage in 2023 after putting it off since 2019: the team, what I learned, the time it takes, and its flaws.
- [Git Out of Your Comfort Zone](https://mnixblog.netlify.app/git-out-of-your-comfort-zone/): Install Git, read a project's history with log, see your edits with diff, and create, rename and delete branches.
- [Coding Patterns Demystified](https://mnixblog.netlify.app/coding-patterns-demystified/): Build a small counter app with a class-based Model-View-Controller pattern in plain JavaScript, then compare it with the React version.
- [Journey To Code](https://mnixblog.netlify.app/journey-to-code/): From DOS commands at age five to a high school skateboard shop site, a long break to travel, and the start of this blog.

## Feeds

- [RSS](https://mnixblog.netlify.app/rss.xml)
- [JSON Feed](https://mnixblog.netlify.app/feed.json)
- [Sitemap](https://mnixblog.netlify.app/sitemap.xml)