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.
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.
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.
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.
In 2003, Dave Shea began a legendary project called CSS Zen Garden that provided a demonstration of "what can be accomplished through CSS-based design" until submissions stopped in 2013.
Style Stage seeks to rekindle that spirit by providing this page as the base HTML for contributors - like you! - to re-style by submitting an alternate stylesheet.
ON THE FIRST day of class, Jerry Uelsmann, a professor at the University of Florida, divided his film photography students into two groups.
Everyone on the left side of the classroom, he explained, would be in the “quantity” group. They would be graded solely on the amount of work they produced. On the final day of class, he would tally the number of photos submitted by each student. One hundred photos would rate an A, ninety photos a B, eighty photos a C, and so on.
Meanwhile, everyone on the right side of the room would be in the “quality” group. They would be graded only on the excellence of their work. They would only need to produce one photo during the semester, but to get an A, it had to be a nearly perfect image.
At the end of the term, he was surprised to find that all the best photos were produced by the quantity group. During the semester, these students were busy taking photos, experimenting with composition and lighting, testing out various methods in the darkroom, and learning from their mistakes. In the process of creating hundreds of photos, they honed their skills. Meanwhile, the quality group sat around speculating about perfection. In the end, they had little to show for their efforts other than unverified theories and one mediocre photo."
Austin Kleon:
Regardless of the form of the parable, the moral has certainly been true with my own work, especially writing and blogging. The frequency of my work — showing up at regular intervals, without worrying about results — has actually lead to better results."
That window object has a function called matchMedia that returns a boolean based on if the window matches a certain media query passed in!
So, if we combine these with a little bit of state, you can make a custom hook that you can use to conditionally render components in your applications
Public spaces are so generative precisely because we run into people we’d normally avoid, encounter events we’d never expect, and have to negotiate with other groups that have their own needs. The social connections that run-ins create, social scientists tell us, are critical in binding communities together across lines of difference. Building a healthy community requires the careful generation of this thick web of social ties. Rapid growth can quickly overwhelm and destroy it—as anyone who has lived in a gentrifying neighborhood knows. […]
As the Maintainers have argued, building shiny new edifices tends to be seen as a masculine pursuit and lionized, whereas the work needed to keep spaces functional and livable over time is often seen as boring, feminine, and, as a result, uncompensated and sidelined. The cost of this labor also doesn’t scale the way techies like; the more people in a space, the more labor is required, and the greater the expense.
2019 was the year I finally allowed myself to think: maybe it won’t be OK? What then? It has been liberating to let go of the exhausting belief that we have to stop this, in spite of the fact that I have almost zero power to change anything.”
“I am not making the argument that it’s OK to do whatever you want, even if it causes great suffering for other beings. Personally, I feel there is a lot of purpose in trying to live in a way that has a positive impact on others, both human and non-human. What I am saying is that I think it’s helpful to let go of any attachment to a particular outcome. I can try to live in a way that feels in balance, and this can be meaningful regardless of whether or not the worst predictions of the future actually come to pass.”
“I feel that it’s insufficient to say, “I’m a software developer, so I don’t need to know anything about the land I depend on for food and shelter”. I do believe that we won’t fundamentally change anything without re-establishing our connection to land and the non-human world. […] I’ll probably keep writing software for now, but I’d like it to become just one of the ways I meet my needs, rather than the only way. And I’m prioritising learning real, tangible skills: how to grow food, make things, repair things, and generally be less dependent on the monetary economy.
