My Pinboard

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.

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.

One thing tech fundamentally has in common with many religions, at least in America is that it is a white man’s version of Utopia.

[…]

It starts with the mythologizing of white-male struggle that’s at the core of tech culture. The idea that these men were outcasts who built things up from nothing — the shunned ones. And they’re going to fix the problems standing in their way. This is their success story, their ascension. So what stands in their way, are people of color, the women that aren’t sleeping with them, the popularity and the wealth they aren’t automatically getting, old-class structures that are keeping them away from the new class structure [based on] who has these skills that they, as white men, have?

And the mythology built around it feels very cult-like, very religious-like. There’s this whole origin story that’s not true.

[…]

If you can’t get your shit together first and foremost for the people in the office, you’re never going to get it together for the products you serve. You can’t have an all white male environment, or a majority white male environment, and think the product you have isn’t going to replicate bias and harm.

[…]

"The way in which tech is utilized in Nigeria is completely different than the way it’s utilized here. In Nigeria it’s about utility first and foremost. And about bringing people together face to face, to make African businesses run more smoothly, to help undo legacies of colonialism that have taken away physical infrastructure. To build that infrastructure online so that it can exist somewhere."

[…]

what does the internet look like when you have a different social structure? When you think that maybe it isn’t the idea that we’re all here pulling ourselves by our bootstraps, maybe we’re pulling our communities up, what does it look like then when you’re creating platforms? Whole platforms created for that?

Thoreau is saying is that by simply writing down a thought, you encourage more thoughts to come. When you have enough thoughts pushed together in the same space — a collage of thoughts, juxtaposed — they often lead to something totally new.

In order to continue to profitably mine the stable expectations of the wider cultural imagination, mainstream culture has to continually frack the past to create future material.

[…] we are in need for new futures. Because we are all starved for visions of the future that will sustain us. The only way that this is going to happen is if we create our own. […]

Solarpunk attempts to re-future all of our imaginations. […]

In 2016 SolarpunkAnarchists.com appeared with their extremely SEO friendly essay “What is Solarpunk?” and described it as ‘Practical Utopianism’

An eco-futurist movement which tries to think our way out of catastrophe by imagining a future most people would actually like to live in, instead of ones we should be trying to avoid.

[…] Solarpunk should be considered A Grand Dress Rehearsal for the future we would we would like to live.

[…] Write stories, Make Art, and music about them. Because we can’t manifest what we don’t share.

Aral Balkan proposes using error-throwing functions as default values for required parameters:

JavaScript doesn’t automatically throw an error if the argument for a required parameter is missing. Which means that it is possible for things to fail not where the problem is (at the function call) but later on.

To avoid that, you have to implement some sort of error checking yourself. However, doing so is rather verbose and adds noise to your functions. And so it’s rarely done. [...] What we’re doing is converting the required argument into an optional argument but specifying its default value as a method call that throws.

Descript is a collaborative audio/video editor that works like a doc. It includes transcription, a screen recorder, publishing, full multitrack editing, and some mind-bendingly useful AI tools.

No matter how much you sleep, how many miles you run, or how even you keep your blood sugar levels, you’ll experience natural ebbs and flows in your energy throughout the day. Those are your ultradian rhythms.

Ultaradian rhythms are driven by a whole host of things happening in your body — hormone levels, metabolic processes, cardiovascular functioning — and they affect your energy, mood, and cognitive functioning. These rhythms take the form of 90-minute peaks of energy followed by a 20-minute trough that repeats throughout the day with the peaks trending lower and lower as the day goes on.

tech brain is a sort of constant willful reductionism: an addiction to easy answers combined with a wholesale cultural resistance to any kind of complexity. most of the time it manifests in ways ranging from the annoying but mostly innocuous (the trend of measuring human relationships with scalar metrics and OKRs; the way tech types always want to “pick your brain” instead of reading words themselves) to the scammy and frustrating (the obsession with tweet-length aphoristic “wisdom”; the industrywide tendency toward band-aid solutions for everything from faulty code to company culture to society itself)

Austin Kleon:

You must have a room, or a certain hour or so a day, where you don’t know what was in the newspapers that morning, you don’t know who your friends are, you don’t know what you owe anybody, you don’t know what anybody owes to you. This is a place where you can simply experience and bring forth what you are and what you might be. This is the place of creative incubation. At first you may find that nothing happens there. But if you have a sacred place and use it, something eventually will happen.

Austin Kleon:

One of my favorite ways is to have 3 or 4 books going at the same time and let them talk to each other.

Here’s Octavia Butler:

I generally have four or five books open around the house—I live alone; I can do this—and they are not books on the same subject. They don’t relate to each other in any particular way, and the ideas they present bounce off one another. And I like this effect. I also listen to audio-books, and I’ll go out for my morning walk with tapes from two very different audio-books, and let those ideas bounce off each other, simmer, reproduce in some odd way, so that I come up with ideas that I might not have come up with if I had simply stuck to one book until I was done with it and then gone and picked up another."

it doesn’t matter to me whether the day’s poem was good or not, what matters is that it got done. I did the work. I didn’t break the chain. If I have a shitty day, I go to sleep and know that tomorrow I get to take another whack at it.

Syncthing is a continuous file synchronization program. It synchronizes files between two or more computers in real time, safely protected from prying eyes. Your data is your data alone and you deserve to choose where it is stored, whether it is shared with some third party, and how it's transmitted over the internet.

Some ammunition against the stubborn or "i am very smart" arguments you might get when someone insists on debating your veganism with you.

Most websites today are built like commercial products by professionals and marketers, optimised to draw the largest audience, generate engagement and 'convert'. But there is also a smaller, less-visible web designed by regular people to simply to share their interests and hobbies with the world. A web that is unpolished, often quirky but often also fun, creative and interesting.

Brett Victor:

It won't be long before almost every one of our daily activities is mediated by a "computer" of some sort. If these computers are not part of the physical environment, if they bypass the body, then we've just created a future where people can and will spend their lives completely immobile.

The main benefit of using the Redux Hooks is that they are conceptually simpler than connect. With connect, you are wrapping your component and injecting props into it. This can make it difficult to determine in the component which props come from Redux and which are passed in. If you are using TypeScript, correctly defining the types of connected components can be quite a chore for this reason. The Redux Hooks, on the other hand, are just regular hooks that don’t modify the public interface of your component. In TypeScript projects, I create my own useSelector that is typed to my store, and then I get type-checking everywhere I use it. Easy!

Eating locally would only have a significant impact if transport was responsible for a large share of food’s final carbon footprint. For most foods, this is not the case.

GHG emissions from transportation make up a very small amount of the emissions from food and what you eat is far more important than where your food traveled from.

Redux Toolkit is our official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic, and we strongly recommend that you use it.

It includes several utility functions that simplify the most common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once without writing any action creators or action types by hand. It also includes the most widely used Redux addons, like Redux Thunk for async logic and Reselect for writing selector functions, so that you can use them right away.

The basic concepts of normalizing data are:

• Each type of data gets its own "table" in the state.
• Each "data table" should store the individual items in an object, with the IDs of the items as keys and the items themselves as the values.
• Any references to individual items should be done by storing the item's ID.
• Arrays of IDs should be used to indicate ordering.

Reach UI seeks to become the accessible foundation of your React-based design system.

Each component is tested with Safari + VoiceOver, Firefox + NVDA, and Edge + JAWS. As the project matures we’ll get it audited by WebAIM to ensure that if you pick Reach UI, your app has a solid, accessible foundation.

Rete allows you to create node-based editor directly in the browser. You can define nodes and workers that allow users to create instructions for processing data in your editor without a single line of code.

localForage is a JavaScript library that improves the offline experience of your web app by using an asynchronous data store with a simple, localStorage-like API. It allows developers to store many types of data instead of just strings.

localForage offers a callback API as well as support for the ES6 Promises API, so you can use whichever you prefer.

Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps.

The head that created, lived the higher life of art, that recognized and grew accustomed to the higher demands of the spirit, that head has already been cut from my shoulders… But there remain in me a heart and the same flesh and blood that can also love, and suffer, and pity, and remember, and that’s life, too!