My Pinboard

For most of the past decade, I have spent a considerable fraction of my professional life consulting with teams building on the web.

It is not going well.

Not only are new services being built to a self-defeatingly low UX and performance standard, existing experiences are pervasively re-developed on unspeakably slow, JS-taxed stacks. At a business level, this is a disaster, raising the question: "why are new teams buying into stacks that have failed so often before?"

Some strategies for helping with feeling isolated/lonely for people working remotely

Ten years ago I created The Oatmeal. I thought an appropriate way to mark the decade would be to publish a comic called "Ten things I've learned about creativity in ten years."

This is a good read for anyone doing creative work

…a lot of the materialize and dematerialize sounds came from that (homemade) Aeolian harp. […] Frequency Shifters do a weird thing. If you’ve got them at a very small offset, like 2 Hz, and you mix that into the original signal at 50%, then the sound it produces isn’t quite a tremolo but more of a Shepard’s Tone filter. I’m not sure how to describe it that well, but it’s this strange, alien-sounding “wom-wom-wom” sound. […] I’m able to take some of these old sound effects and look at their spectral arrangement and really pick that apart, to use that as a baseline or a starting point to generate new material that fits into the same realm. That’s been a huge help and a skillset that I never would’ve expected to build or think about – reverse engineering what they were doing and thinking about processes and equipment they’d have 50 or 60 years ago to make this stuff, and thinking about what I can use to emulate that.

Knip finds unused files, dependencies and exports in your JavaScript and TypeScript projects. Less code leads to improved performance, less maintenance and easier refactorings.

[…]

You could think of Knip as going (far!) beyond the no-unused-vars rule of ESLint. Knip lints the project as a whole (or parts of it).

Editly is a tool and framework for declarative NLE (non-linear video editing) using Node.js and ffmpeg. Editly allows you to easily and programmatically create a video from a set of clips, images, audio and titles, with smooth transitions and music overlaid.

How do you keep your game’s 1,000s of audio files under control? Over the years I’ve tweaked my audio design document to track SFX, music and VO. It’s my go-to for tracking progress and collaborating with CDs and production.

This is intended to be a free and open resource for the global Game Audio community as a way to give back and honor all the amazing mentors, professors, colleagues, and friends who have helped me along the way.

An overview of the philosophy and strategies that Frontier used for managing large amounts of sounds in their Planet Coaster game

from their experiments we decided that a crowd (around the camera) can be expressed by four emitters placed in the four directions of the compass. A fifth emitter is added to describe the crowd in the entire park. The Soundbox creates sounds from data, rather than the traditional way of deriving audio content from pre-placed emitters on game objects which means work can be distributed across frames, emitters can be pooled, and it circumvents the pitfalls of scaling.[…] It is a system that uses data to make an informed decision regarding where to put emitters and what to play on them at any given moment.

[…] To place the emitters in the right position, the Soundbox calculates the center of mass for the crowd size with the cardinal points. […] The close-up system uses a Soundbox that is optimized to look for individual guests and what they are currently doing. This Soundbox finds the immediate cells around the camera and distributes ten emitters around those guests which are closest. The Soundbox then tracks their positions and monitors when guests switch between animations.

I found this one super interesting because it shows how to get both detail and scale right. I also particularly like how they gave each borough different sounds.

Having reviewed 100+ demo reels over the past year on their weekly Twitch show "Reel Talk", Kevin and Matthew have seen many of the same problems over and over again. Most common of all, demos often paint an inaccurate picture, failing to effectively illustrate their creators' work history, talents and ambitions. Armed with custom-made "bad" demos and words of guidance from industry pros, the pair will break down and demonstrate precisely how to craft your reel...and perhaps more importantly, how not to.

Lanier’s explanation for the death of the 1,000 True Fans model has become a classic tale of a paradise lost. The Web of the nineteen-nineties held great potential for creative types. Then, when the Web collapsed into the walled gardens of platform monopolies, this potential vanished—and left an opening for the numerous new afflictions poisoning both our cultural and civic lives to rise in its place.

For most web applications that are CRUD style applications, local state combined with a dedicated remote state management library can get you very far.

Some example libraries in this trend include React query, SWR, Apollo and Relay. Also in a “reformed” Redux with Redux Toolkit and RTK Query.

differences that depend on each other should merge into a single prop—and that single prop should operate as its own dimension. For example, a TextInput that optionally has a label where the label can also optionally have a tooltip.

It does not make sense for the interface to have two props, label and labelTooltip, because the tooltip won’t show without the label. They should be merged into a single prop to capture this requirement:

Most of these websites are a rebellion from the predominance of the Bootstrap UI, with its clean, responsive designs, and to the more and more senseless diktats that digital media had to abide by in order to make a profit in the early-to-mid 2010. BDG’s aesthetic combines frustration with the limits of web 2.0 design and early-internet nostalgia.

This experimentation comes from seeing the internet as a medium for making (and not just showcasing) art. “I think a lot of the people involved in these sites have a deep love for the internet, and what the internet is and what the internet was,” said Jack Koloskus, lead UX/UI/visual designer at BDG Group.

Some shared experiences by Andrew J Ryan

Here are some of the lessons I’ve learned and things I’ve observed, hopefully this can help people in similar positions!

When I first moved to Seattle, I was at every networking event for about 4 years straight. Now, I don't need to go nearly so hard, but it had to be done in the beginning to become known within the city, and to be introduced to the right people

[…]

In a small town, you can't just go to meetups, or meet random people at game companies at a moment's notice. So, you have to be way more focused on being online than if you did live somewhere where game development is more common. Most artists really push back at the idea of using social media and building an online presence, but they're just skills like anything else. Anyone can get good at it.

The goal is to make gradients that looks good! The main catch is using different interpolation spaces than sRGB.

It can really change how the gradient look. Another thing is the non linear easing. So basically the gradient will not progress in a linear way."

The easing feature is nothing new but in combination with the interpolation spaces, it makes unique and beautiful gradients!

First, we explored some simple synth sounds to figure out a general tone for a given character's voice. Once we had a foundation timbre established, we moved on to setting up how that tone might change over time.

We modelled what are called "formants" - that is, naturally occurring spectral peaks in human vowel sounds. These spectral peaks have specific frequency positions and relationships. We then automated the frequency positions of those peaks over time, to resemble the way the human voice might transition between vowel sounds.

The sound of the six-hour-long journey in the vast corridors and halls of Horus Station (HS) was completed in a relatively short time for a game of such scope and with a considerably small team. I was mostly taking the role of designing and implementing with a minimal audio tool kit, with invaluable help from Mikko Kolehmainen at the busiest times. Consequently, we have some tips that will hopefully be helpful for anyone who is as crazy as us in undertaking any big game audio project with minimal resources.

If you have some sort of panel component or an abstract component which takes in children to render, then yeah, React.FC is the type for those. But if the component you have isn't meant to have any more children, like a custom button or a custom card or input or whatever else, then using React.VFC is more correct.

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Complete with robust support for keyboard navigation for some components

Amazing tool that shows the different font features that your (web) font supports.

Reakit is a lower level component library for building accessible high level UI libraries, design systems and applications with React. It is built with composition in mind and strictly follows WAI-ARIA 1.1 standards, meaning all components come with proper attributes and keyboard interactions out of the box.

A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.

This is a huge compilation of articles written by dozens of industry professionals who regularly undergo hiring processes. Its purpose is to smooth out the steep learning curve of applying to audio jobs in the video game industry, specifically to AAA studios.

This arti­cle will lead you through how to opti­mize your Tail­wind CSS build process so that your hot mod­ule replace­ment / live reload will be fast again, and explains what’s going on under the hood

When I’m figuring out what sounds to use in a movie, the emotional resonance always comes first, before I consider the material mechanism at work. I’ve created the sounds of magical abilities for both Pixar and Marvel, but they have very different tones. The magic of Ian Lightfoot in Onward is cool and fun, but not too silly or dark, while the magic of Wanda Maximoff in Captain America: Civil War is violent, powerful, and beautiful. For the emotion of Ian’s magic, I’ll reach for materials like chimes and sparklers and fire poofs. Wanda’s magic is built from ripping textures, explosions, and scraped metal. In writing, I create similar emotional palettes with my word choices: one magic might pop, sparkle, whoosh, and fizzle, while another may scream, thunder, rip, sizzle.

This is a doc of audio resources I’ve put together for students and younger game audio folks looking to learn more. It began as a document for Full Sail students, to accompany some of the talks I give when I return to visit, but many others have expressed to me that it’s useful, so I’ve decided to keep it updated

An interesting way of aligning a button label vertically, regardless of the font's built in leading. Where sometimes we'd use different top and bottom padding, Ahmad Shadeed notes a practice used by Facebook, using a pseudo element to enable using vertical-align.

The text “Sign in” is considered a text node, and when a pseudo-element is placed next to it, we can use vertical-align: middle to center both.

Meyda is a JavaScript audio feature extraction library. It works with the Web Audio API (or plain old JavaScript arrays) to expose information about the timbre and perceived qualities of sound. Meyda supports both offline feature extraction as well as real-time feature extraction using the Web Audio API.

An article by Kent C. Dodds that gives some examples of alternatives to using booleans like isLoading for state in React components (as they do not give a proper representation of your state, like using Enums or state machines.

Pretty cool! Generates a nice colourful gradient background with a bit of noise in it.

Dead simple, drag & drop websites. Like a collage. Every page is mindlessly responsive so they work across screen sizes

It looks very early-2000's but in a good way. Not sure about accessibility and stuff, though

I’ve had this rule for myself and with Boords for a while now, so it’s good to see other people writing about it. There are cases in which I think outer margins can be useful, but generally, there are better options.

Margin breaks component encapsulation. A well-built component should not affect anything outside itself.

Margin makes reusability harder. Good components are usable in any context or layout.

Margin conflicts with how designers think. Designers think about space in relation and context. They define how far a component should be from another component in a specific instance.

Online tool for agile meetings like retrospectives, estimations, check ins, etc…

In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. You do this on the backend of your service, and store the string along with the image. When you send data to your client, you send both the URL to the image, and the BlurHash string. Your client then takes the string, and decodes it into an image that it shows while the real image is loading over the network. The string is short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object.