Tyler

Breakout - Tyler Coderre A breakout-inspired arcade experiment built with my site design system.

Links to the pages because of character counts on the post:

Breakout: tylercoderre.com/projects/bre...
Tetris: tylercoderre.com/projects/tet...

Productive procrastination update: I’ve been building little browser games to test my design + coding chops.

Breakout got a bunch of new features + UI polish, including a tiny Game Boy “power light” because I’m that guy. Tetris is a callback to my intro CSE final project. WIP, more soon.

Customize macOS with Hidden Settings with Terminal: A Designer’s Guide Tailor your Mac beyond the defaults. No coding degree required.

I’m a bit of a customization nerd and I’ve been getting asked how I got my Mac to “look that way,” especially the Dock spacers and a few other flow tweaks.

I turned it into a quick guide. Copy/paste commands, beginner-friendly, and everything includes a revert.

medium.com/@tylercoderr...

YouTube video by Buffalo Sabres Dominik Hašek: Always the Goalie | A Film By The Buffalo Sabres

Finally got around to watching the Hasek documentary and the nostalgia hits strong…

youtu.be/Vy9U5ULr250?...

I’ve been wanting this so long…

Ooo fancy, that’ll mean so much less math and calc() usage with :has and all that… 😅

Now I wish it was supported by more than just Chrome and also Firefox and Safari

The Input Mask Field Guide A designer-led reference for form inputs that feel obvious to users, predictable to developers, and easier for product teams to reason…

New post: The Input Mask Field Guide

Real examples, when to use a mask vs plain validation, and the a11y gotchas people keep shipping. HTML-first patterns, JS optional.

medium.com/@tylercoderr...

#UX #A11y #DesignSystems

I go back and forth on pages vs screens sometimes. Generally I call them pages when referencing websites, and screens when designing apps or going through a design file.

I did a ton of web design and development well before jumping into UX and pages was just the vernacular with those I worked with.

That's a new one to me and I appreciate the accessibility notations implemented

a close up of a man 's face with the words dr.doctor.tumblr visible in the corner Alt: Ted Lasso, a mustachioed man turning and and giving a cringing grimace

Ya… sorry about that… guess you can’t unsee what you’ve seen.

Don’t get me started on accessibility out there 😅

How does it feel reading at that size? That is probably the main thing from trying such a device. I've been eyeing this along with the Palma 2 Pro and Paper Pro Move. The later of which a bit pricier than I'd like at the moment, and not as pocket-able. I have an iPad mini for reference.

This is a great and accessible read on understanding an implementing accessibility.

I highly recommend it, and now it's even free, so go check it out...

Semantic HTML as Interface Infrastructure The foundation behind accessible design systems and resilient UI.

I just published a piece on treating semantic HTML as interface infrastructure, not a styling detail.

If your design system struggles with accessibility or hand-offs, the problem often starts in the markup.

medium.com/p/semantic-h...

#Accessibility #DesignSystems #HTML #WebDevelopment #UXDesign

I published a Design Systems Checklist based on real-world enterprise work.

A practical way to sanity-check foundations, components, accessibility, and docs.

Feedback is always welcome to make it as useful to others as possible.

tylercoderre.com/projects/des...

#DesignSystems #UX #Accessibility

I put together a macOS shortcuts reference based on the ones I actually use.

It covers the common shortcuts most people half-remember, less obvious ones that save time once they’re muscle memory. I had a fun giving each shortcut animated keys that react on hover.

tylercoderre.com/writing/macO...

Nice, I think in the end it’ll look cleaner that way

By full bleed, I’d have the image also create its own blur around it the blends in with the palette blur on the left.

Either or it looks sick, if it was my I’d go either very subtle small blur, or none at all if going all-in on the 1-bit aesthetic for consistency.

But you do you, great work.

I like the blur, but perhaps just making it a little more subtle may ease things a bit? Such as dropping down the opacity of it, or shortening it so it doesn’t bleed as much into the image.

That or maybe go all out and have the blur push across the whole background beneath image at less opacity.

Awesome thanks, never heard of them, and sweet that it's free and open source too!

That’s pretty cool, I might have to mess around with that later now that I’ve been experimenting with dev again.

I’m curious though too what you use to record the interaction and make your gifs with the keystroke annotations. I had been looking for a new tool and was thinking of Gifox.

Cool tool, love the UI and art direction too

Been messing around creating a simple browser-based version of breakout, and slowly making it mobile-friendly, though it's not quite there yet.

It plays decent on desktops and laptops, and controls work on mobile but I still need to work on mobile sizing.

Feature suggestions also encouraged.

That’s fair, hopefully the new one goes for the long haul.

I like the build quality and reliability so far of the UGreen stuff I’ve been phasing in slowly after a few annoyances with Anker I’ve had.

I do still use a few of their cables and MagSafe stuff though.

I had 2 of those Hyperjuice 100watt chargers and they were my go-tos for years until they crapped out the last two years, tanks…

I’ve been having good luck with the UGreen Nexode 140W charger after having issues with Anker before, though I still use and like their 3-in-1 cube charger on my desk.

Seeing instances of overly complex solutions like that and how some tools just <div> everything is part of the reason I started to work on rebuilding my site as semantic as possible.

It started out as building a classless and accessible framework that got a little squirrelly.

Keep fighting haha

Or they didn’t want to admit they were wrong 🤷🏻‍♂️

Feedback is greatly appreciated s I flesh it out more and more going forward, thanks.

A screenshot of the hero and navigation of tylercoderre.com that shows a headshot, introduction, and short bio.

Relaunching my personal portfolio at tylercoderre.com, it’s been a while. I’ve still got a bit of work to do, but it’s finally done enough to get out there as a work in progress while adding more details and images to my case studies.

Even a mini breakout game I soon plan to make touch-friendly.

Likely the last game at The Ralph #GoBills

Ducky the yellow lab wears her New Year’s crown with a smirk

Ringing in the new year with a happy Ducky, who after a few treats, forgave us not taking her to boozy bingo