A list of articles, sites and other resources that I found interesting or useful and decided to save to my Pinboard account.
Some of these are just useful tools, others are articles that inform how I look at the world and myself. Some of it is about stuff that's on my mind now, some of it I've had saved ages ago, but only recently read. That's how it goes, I guess. Nevertheless, it's a way of seeing what I'm thinking about.
"a lean, fast-loading web e-book template with a kind of definitive sturdiness. […] a tool to generate a nice web edition and robust EPUB edition from the same text
A smart library that automatically positions elements depending on their size in a grid to create responsive and beautiful layouts.
That is… based on aspect ratios — inspired by Apple's summary slides
Create React App has been a fantastic tool for developers wanting a quick, easy way to generate a new React application. Inevitably, as with anything, technology has evolved and an exciting new prospect has arrived, in Vite. Vite has established a completely new way to generate React applications, with speed at the forefront of its mind. […] Unlike CRA, Vite does not rebuild the whole app whenever changes are made, it is built on demand. It splits the app into two categories; dependencies and the source code. Dependencies are things that do not often change during the development process. Vite pre-bundles these using esbuild, which is written in Go and is 10-100 times faster than the JavaScript alternative. Source code is served over native ESM (ECMAScript modules). The benefit of this method is that there is no need for bundling, they are called on demand when required, and it is incredibly fast.
There are many benefits to getting started on sound design as a film develops as opposed to coming on at the end. It gives you more time to explore and develop creative ideas, influence the look of the visuals, and get the filmmakers involved in the creative sound process. When starting early on a film, or for complex sound design projects that require (or allow time for) experimentation, it's essential to have a solid plan for how to proceed. Staying on track will help you successfully complete your sound design project.
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 article will lead you through how to optimize your Tailwind CSS build process so that your hot module replacement / 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.
