\\n \\n \\n

\\n```\\n\\nThis will give us a black icon in light mode and a white icon in dark mode. Since the color is defined on the parents, we can also add more icons, and they will all be colored the same.\\n\\n`stroke-current` works exactly the same way, and the two can be combined if needed.\\n\\n## Adding active state variations\\n\\nSince I was using this for a set of icons that have an active state, I also wanted these to change when the icon becomes active.\\n\\nWe can add a new text color directly to the SVG (or anything else it is wrapped in) when it is active, and `fill-current` will respect the new color.\\n\\nExtending our example above:\\n\\n```html\\n

\\n \\n \\n \\n \\n \\n \\n

\\n \\n \\n

\\n \\n \\n \\n \\n \\n \\n

\\n```\\n\\nThis syntax is Vue, but whatever you are using should work as long as you can add the extra classes to the svg element.\\n\\n## Next\\n\\nI'm sure there is a way to clean this up more and make it so you don't have to add the active text colors on each icon. I'll update this if I find a cleaner solution.\\n\""," \"date_created\": \"2021-11-13T00:00:00.000Z\","," \"slug\": \"theming-icons-in-tailwind\","," \"title\": \"Theming icons in Tailwind\","," \"uuid\": \"cc6f69c4-3040-4db9-8351-88933742565f\","," \"url\": \"2021-11-06-fig-gen-generative-art-with-figma-and-automator copy\""," \"body\": \"\\n![Some select screens from my automation explorations](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-grid_2x_d5gs3h.png)\\n\\n## Generative Art with Figma & Automator\\n\\nI spent the evening exploring the new Automator plugin for Figma from [Jordan Singer](https://twitter.com/jsngr). I thought a minimal generative series using pixels and mapping equations would be a fun way to try it out.\\n\\n### Process\\n\\nI started by pushing on nesting shapes – How does it look when you nest and rotate shapes continuously? I got some cool outcomes like below, but I realized that most of the gens would end up looking pretty similar, relying so heavily on rotation.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636439394/project/fig-gen/radial-gen_sw0piw.png)\\n\\nExploring a different direction, I remembered playing with graphing calculators back in high school – Using trig functions like sin, cos, and tan, I got some exciting results right off the bat.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/automator-steps_gapfqw.png)\\n\\nOnce I found a few directions I liked, I realized that these gens would probably show best in some sort of frame, especially if I wanted to show a few together. I went with the simplest outline possible to keep everything monochrome and on theme.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/banner_efqxsf.png)\\n\\nIn the end, I didn't use any nesting to create each gen. Frames 1px tall and 1~6px wide (randomized) are charted in 2D along the x-axis using the repeat's {{index}}.\\n\\nThe generative functions are mostly created using sin, cos, tan, a randomizer variable, and {{index}} combined in different ways.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/automator-steps_gapfqw.png)\\n\\nMy favorite thing so far about Automator is how quickly I was able to explore a ton of variations. I was able to create over 60 gens with some really wide variation in under 2 hours.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636439418/project/fig-gen/gen-range_lhw4bg.png)\\n\\n### Outcome\\n\\nHere are some of my favorite gens:\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-21_2x_ljerb8.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-11_2x_rb5ufp.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-76_2x_nxhujm.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-96_2x_qyfre1.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-36_2x_orrj6q.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-32_2x_au63qk.png)\\n\\nI'm looking forward to exploring another generative series soon, following everything I learned with this one!\\n\\nYou can find some of the JSON import files I saved as I was exploring in the [fig-gen](https://github.com/iamnbutler/fig-gen) repo.\\n\\n---\\n\\n[Jordan Singer](https://twitter.com/jsngr)'s[Automator](https://automator.design/) plugin is currently in closed beta. I can't wait to see what everyone is able to create once they get their hands on this!\\n\","," \"body\": \"\\n![Some select screens from my automation explorations](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-grid_2x_d5gs3h.png)\\n\\n## Generative Art with Figma & Automator\\n\\nI spent the evening exploring the new Automator plugin for Figma from [Jordan Singer](https://twitter.com/jsngr). I thought a minimal generative series using pixels and mapping equations would be a fun way to try it out.\\n\\n### Process\\n\\nI started by pushing on nesting shapes – How does it look when you nest and rotate shapes continuously? I got some cool outcomes like below, but I realized that most of the gens would end up looking pretty similar, relying so heavily on rotation.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636439394/project/fig-gen/radial-gen_sw0piw.png)\\n\\nExploring a different direction, I remembered playing with graphing calculators back in high school – Using trig functions like sin, cos, and tan, I got some exciting results right off the bat.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/automator-steps_gapfqw.png)\\n\\nOnce I found a few directions I liked, I realized that these gens would probably show best in some sort of frame, especially if I wanted to show a few together. I went with the simplest outline possible to keep everything monochrome and on theme.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/banner_efqxsf.png)\\n\\nIn the end, I didn't use any nesting to create each gen. Frames 1px tall and 1~6px wide (randomized) are charted in 2D along the x-axis using the repeat's {{index}}.\\n\\nThe generative functions are mostly created using sin, cos, tan, a randomizer variable, and {{index}} combined in different ways.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/automator-steps_gapfqw.png)\\n\\nMy favorite thing so far about Automator is how quickly I was able to explore a ton of variations. I was able to create over 60 gens with some really wide variation in under 2 hours.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636439418/project/fig-gen/gen-range_lhw4bg.png)\\n\\n### Outcome\\n\\nHere are some of my favorite gens:\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-21_2x_ljerb8.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-11_2x_rb5ufp.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-76_2x_nxhujm.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-96_2x_qyfre1.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-36_2x_orrj6q.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636435580/project/fig-gen/gen-32_2x_au63qk.png)\\n\\nI'm looking forward to exploring another generative series soon, following everything I learned with this one!\\n\\nYou can find some of the JSON import files I saved as I was exploring in the [fig-gen](https://github.com/iamnbutler/fig-gen) repo.\\n\\n---\\n\\n[Jordan Singer](https://twitter.com/jsngr)'s[Automator](https://automator.design/) plugin is currently in closed beta. I can't wait to see what everyone is able to create once they get their hands on this!\\n\""," \"date_created\": \"2021-11-06T00:00:00.000Z\","," \"slug\": \"fig-gen-generative-art-with-figma-and-automator\","," \"title\": \"Generative Art with Figma & Automator\","," \"uuid\": \"da23e895-d1eb-46d2-a6a3-298c002a6be1\","," \"url\": \"2021-11-04-getting-your-first-job-as-a-product-designer\""," \"body\": \"\\n## The Project\\n\\nThis is an ongoing project to help early career designers bootstrap their up to their first job in the tech industry. The goal is to be complete without being overly verbose.\\n\\nI generally want to bias towards giving direction without being overly opinionated. There are infinite paths, tools and opinions out there, and I hope having a clearly outlined example of an early path will be helpful to some.\\n\\n[Visit the site](http://design-intro.nate.tips/) | [Github Repo](https://github.com/iamnbutler/design-industry-intro)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636493008/project/product-design-industry-intro/screen-shot-1_drgged.png)\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636493008/project/product-design-industry-intro/screen-shot-2_rpwf6o.png)\\n\\nYou can leave feedback on the project & content here:\\n[Feedback – Getting your first job in the product design industry](https://forms.gle/jimgp3uAk8df8MUH9)\\n\\n### Contributing\\n\\nYou can contribute to this project however you like on [Github](https://github.com/iamnbutler/design-industry-intro)\\n\\n- Building the project should be as easy as cloning it locally and running `npm install`. You can run the `dev` script to get live reloading for tailwind JIT.\\n- Feel free to contribute a PR with any fixes, typos, etc.\\n- Open an issue or discussion for updates to content.\\n- Feel free to reach out with any thoughts or questions!\\n\\n### Tech\\n\\nThe site is built using the Nuxt 3 Beta & tailwindcss.\\n\","," \"body\": \"\\n## The Project\\n\\nThis is an ongoing project to help early career designers bootstrap their up to their first job in the tech industry. The goal is to be complete without being overly verbose.\\n\\nI generally want to bias towards giving direction without being overly opinionated. There are infinite paths, tools and opinions out there, and I hope having a clearly outlined example of an early path will be helpful to some.\\n\\n[Visit the site](http://design-intro.nate.tips/) | [Github Repo](https://github.com/iamnbutler/design-industry-intro)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636493008/project/product-design-industry-intro/screen-shot-1_drgged.png)\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636493008/project/product-design-industry-intro/screen-shot-2_rpwf6o.png)\\n\\nYou can leave feedback on the project & content here:\\n[Feedback – Getting your first job in the product design industry](https://forms.gle/jimgp3uAk8df8MUH9)\\n\\n### Contributing\\n\\nYou can contribute to this project however you like on [Github](https://github.com/iamnbutler/design-industry-intro)\\n\\n- Building the project should be as easy as cloning it locally and running `npm install`. You can run the `dev` script to get live reloading for tailwind JIT.\\n- Feel free to contribute a PR with any fixes, typos, etc.\\n- Open an issue or discussion for updates to content.\\n- Feel free to reach out with any thoughts or questions!\\n\\n### Tech\\n\\nThe site is built using the Nuxt 3 Beta & tailwindcss.\\n\""," \"date_created\": \"2021-11-04T00:00:00.000Z\","," \"slug\": \"getting-your-first-job-as-a-product-designer\","," \"title\": \"Getting your first job as a product designer\","," \"uuid\": \"d21137fc-f538-44de-9f84-f24def5d929f\","," \"url\": \"2021-06-13-writing-with-adhd\""," \"body\": \"\\nThis post is a reflection on Geraint Evans' \\\"[This is how an ADHD\\nperson actually writes.](https://www.geraint.works/post/adhd-writing-styles)\\\"\\nI'd start there first!\\n\\n## I'm a terrible writer.\\n\\nOr, at least, I've convinced myself of that my whole life. The things that I write flow awkwardly, and I never understand all the rules of writing and the way to make things sound immersive and natural. My writing ends up awkwardly verbose and tends to wander a lot. I tend to mix tenses constantly.\\n\\nI never understood why I write the way I do, until I discovered at the beginning of the year that I have rather severe inattentive ADHD.\\n\\n---\\n\\nComing across [this tweet](https://twitter.com/GeraintWorks/status/1383745091114717194) was pretty mind blowing for me. It was like someone speaking to the way I write for the first time in my life. Then seeing tons of replies under it validating the way ADHD people write I realized I wasn't alone in this. Honestly, you should probably just go read Geraint's article [\\\"This is how an ADHD person actually writes.\\\"](https://www.geraint.works/post/adhd-writing-styles) instead of reading this, but I'll do my best to share my thoughts on top of it.\\n\\nIn his article Geraint calls out four main points in his concussion, so I'll use that as a starting point. (And sorry if this structure doesn't make sense... You know. ADHD `¯\\\\_(ツ)_/¯`)\\n\\nHere are the four points:\\n\\n- Impulsivity – \\\"Impulsivity & rushing through tasks - I need to say this now!\\\"\\n- Attention to detail - \\\"Yeah, probably fine, ill just post it.\\\"\\n- Being socially inappropriate – \\\"Sorry, why do I have to change how I communicate when you clearly understand what I mean?\\\"\\n- Feeling Misunderstood.\\n\\nWe'll dive into each separately.\\n\\n## Impulsivity\\n\\nGotta go fast. Having my special flavor of ADHD means a mind constantly full of ideas at all times. You know that expression \\\"drinking from the fire hose\\\"? It's like that, but 8+ hours of the day, every day (before completely running out of energy and crashing, but that is a topic for another time.)\\n\\n### A lot of ideas\\n\\nEven trying to sit down and write this out, it's hard to move to the next because there are 18 different ways I could continue this sentence, and 14 of them probably involve a complete topic change.\\n\\nEach idea feels like it is so incredibly pressing, and the entire world should hear about this – only to be frustrated after tweeting it out to the world, bugging a coworker or talking to my partner, and finding no interest at all in it.\\n\\nWriting with ADHD means TONS of edit passes on even a few paragraphs because often I've shoved so many ideas into a small space that it feels overwhelming and disjointed to read. It ends up being hard to follow because I've left out a bunch of the in-between framing context that is in my head that I forget others can't follow.\\n\\n### Overly passionate\\n\\nOften having this volume of ideas, and an immense, fast burning passion for a topic means things are often oversold, or phrased incorrectly.\\n\\nI remember once writing an email to a director at my then-work flagging that a product decision was \\\"unethical\\\" because I believed strongly we were making the wrong decision. In reality, while it was a bad decision, unethical was both the incorrect framing AND severity. Would both craft and inclusivity suffer from this decision?\\n\\nYes. However, was this a decision that was any more or less severe from the thousands made at the company every day? No, not really. In the moment though, it seemed like the most important thing in the universe, and my passion was dialed to 11.\\n\\nLuckily, this person was highly empathetic, and explained to the email chain what I likely meant (and why I was over-reacting) without condescending. It was really eye opening to me, and I always remember that. (Aside: Stick with the people who will call out out in a loving way! These people will help you grow immensely.)\\n\\nBecause I feel like I've explained absolutely nothing here, that seems like a great time to move on to point two!\\n\\n## Attention to detail\\n\\nThis one's short description nails it on the head: \\\"Yeah, probably fine, ill just post it.\\\"\\n\\nThis pretty much captures my whole sentiment here, and really conflicts with the last point, Feeling Misunderstood, yet some how coexist.\\n\\nHow this often manifests is either 1) writing for hours, attempting to get things right or concise or understandable and eventually getting frustrated and hitting post, or 2) blasting some writing out in 30 seconds and pressing send without even reading it back.\\n\\nI was never able to write papers in school because if I tried to edit a long piece of writing, rather than editing it I would just end up rewriting the whole thing on each edit pass. In the end I defaulted to writing a few hours before the deadline so I wouldn't have time to fret over the contents or writing style. I call this \\\"Deadline Adrenaline.\\\" I found I got better grades and responses often with just throwing something out there on the first pass than trying to write in a way others would understand easily (because, of course I couldn't do that. My brain doesn't work that way.)\\n\\n### Deadline Adrenaline\\n\\nAn aside – deadline adrenaline is something that I've come to lean on as an ADHD person throughout all parts of my life. I'm not sure if this is strictly and ADHD thing, or a me thing.\\n\\nDeadline adrenaline is roughly leaving something so late to the last minute that I'm basically fucked if I don't finish it in X hours. School papers, project deadlines, even packing a house or submitting some documents, many of these things in my life get done this way.\\n\\nOften tasks that seem impossible I'm able to pull off with ease leaning on this, but it means it can be difficult to worth with others effectively. My managers are always terrified and then shocked when in a day I turn around an entire project, or complete what seems like an impossible amount of work in a short time.\\n\\nThis process I go through is part of the ADHD cycles I experience, which I'd love to write about more later.\\n\\nThe super TL;DR is when not on medication I experience pretty severe cycles on both roughly a daily and monthly basis. These cover energy, creative output, focus and more.\\n\\nIt makes it extremely difficult to work with others if a creative or energy high doesn't align with where others are at the time, but also when my cycle highs align with a project or collaboration people are often amazed at both the volume and quality of my output (and then probably confused why a week later I can't seem to create two screens.)\\n\\nErr, we went on a bit of a tangent here though, so lets get to point 3!\\n\\n## Being socially inappropriate\\n\\nThis one is pretty straight forward for me. Let me say this first, I recognize I'm VERY, SUPER privileged to be able to work this way.\\n\\nI don't work with people, companies, etc that require me to do anything in a certain way. Need to dress a certain way? That is a nope. Talk or write formally? That is a nope. Maybe seems messed up, but it's how my brain works `¯\\\\_(ツ)_/¯`\\n\\nI am fortunate that I've been able to find a career path that I've been able to design a way to create that works for me, and brings people value, but I think many ADHD people's potential is never even given a chance to shine because they can't engage with the world the way the world wants them to.\\n\\nI was blessed with some incredible teachers and mentors that saw the value in me despite my \\\"weirdness\\\" that I was never able to define until recently.\\n\\nI think we leave a lot of great people behind because they can't or don't work the way the world wants them to. I'd be still in my parents basement if my only options were suit & tie or on my feet at 8am in retail. (Y'all are the unsung heroes, doing some of the hardest work with completely unjust levels of compensation. Thank you, and I hope we can improve the way you all have to work in my lifetime.)\\n\\nTo wrap up this section: I've always done the worst when I tried to fit myself into the mould of the \\\"Normal.\\\" I end up coming off just as a slightly ok-ish designer. I've found resounding success in the past few years when I've leaned into the me unapologetically, even though I recognize it can be hard to work with and around.\\n\\nI have the utmost respect for managers and leaders that can utilize the odd-shaped puzzle pieces like myself and figure out where they fit.\\n\\n## Feeling Misunderstood\\n\\nMoving on to the biggest one – Feeling misunderstood. This is the root of almost all social issues that ADHD brings for me personally.\\n\\nFeel like someone didn't understand what you said – here comes 10 minutes of exposition to try to explain that one statement I said, meanwhile the whole group is slowly edging away to get away from this odd guy.\\n\\nPost a piece of writing online? \\\"People will pick apart every statement.\\\", \\\"Don't post that, people won't understand what you mean.\\\" The amount of self-censorship you do from fear of being misunderstood is both socially crippling, and highly career negative.\\n\\nWhen I worked at Facebook, one thing I always struggled with is there is this idea of as you become a more senior designer you build more of a public following, and begin to have an impact on our industry. This was always crippling for me to even think about, because of the fear of doing or saying something wrong and then being outcast.\\n\\nThe feeling of being misunderstood to and ADHD person is TERRIFYING. I still have a thousand minor slights or social awkwardness I've committed that I think about weekly, and am just begging in my head to be able to go back and explain or correct.\\n\\n## Wrapping Up\\n\\nEven as I start this wrap up, I basically feel like I just wrote a bunch of stuff that people won't really get anything out of because of it being highly disjointed.\\n\\nBut I'll throw it out there since I'm trying to get better at challenging my assumptions and learning more about myself and my ADHD through sharing with others and getting feedback.\\n\\nThis meandered a bit from just focusing on writing, but writing is HARD for ADHD people. I'm trying to do it more to get better, and identify how the above things affect me and my writing and how I can improve it.\\n\\nI one-shot this writing, so apologies for any issues, spelling, flow or otherwise. I'm always open to talk about design, ADHD and more. You can reach me at iamnbutler@gmail.com.\\n\\nHope this is interesting or useful to someone!\\n\\nNate 🌱\\n\","," \"body\": \"\\nThis post is a reflection on Geraint Evans' \\\"[This is how an ADHD\\nperson actually writes.](https://www.geraint.works/post/adhd-writing-styles)\\\"\\nI'd start there first!\\n\\n## I'm a terrible writer.\\n\\nOr, at least, I've convinced myself of that my whole life. The things that I write flow awkwardly, and I never understand all the rules of writing and the way to make things sound immersive and natural. My writing ends up awkwardly verbose and tends to wander a lot. I tend to mix tenses constantly.\\n\\nI never understood why I write the way I do, until I discovered at the beginning of the year that I have rather severe inattentive ADHD.\\n\\n---\\n\\nComing across [this tweet](https://twitter.com/GeraintWorks/status/1383745091114717194) was pretty mind blowing for me. It was like someone speaking to the way I write for the first time in my life. Then seeing tons of replies under it validating the way ADHD people write I realized I wasn't alone in this. Honestly, you should probably just go read Geraint's article [\\\"This is how an ADHD person actually writes.\\\"](https://www.geraint.works/post/adhd-writing-styles) instead of reading this, but I'll do my best to share my thoughts on top of it.\\n\\nIn his article Geraint calls out four main points in his concussion, so I'll use that as a starting point. (And sorry if this structure doesn't make sense... You know. ADHD `¯\\\\_(ツ)_/¯`)\\n\\nHere are the four points:\\n\\n- Impulsivity – \\\"Impulsivity & rushing through tasks - I need to say this now!\\\"\\n- Attention to detail - \\\"Yeah, probably fine, ill just post it.\\\"\\n- Being socially inappropriate – \\\"Sorry, why do I have to change how I communicate when you clearly understand what I mean?\\\"\\n- Feeling Misunderstood.\\n\\nWe'll dive into each separately.\\n\\n## Impulsivity\\n\\nGotta go fast. Having my special flavor of ADHD means a mind constantly full of ideas at all times. You know that expression \\\"drinking from the fire hose\\\"? It's like that, but 8+ hours of the day, every day (before completely running out of energy and crashing, but that is a topic for another time.)\\n\\n### A lot of ideas\\n\\nEven trying to sit down and write this out, it's hard to move to the next because there are 18 different ways I could continue this sentence, and 14 of them probably involve a complete topic change.\\n\\nEach idea feels like it is so incredibly pressing, and the entire world should hear about this – only to be frustrated after tweeting it out to the world, bugging a coworker or talking to my partner, and finding no interest at all in it.\\n\\nWriting with ADHD means TONS of edit passes on even a few paragraphs because often I've shoved so many ideas into a small space that it feels overwhelming and disjointed to read. It ends up being hard to follow because I've left out a bunch of the in-between framing context that is in my head that I forget others can't follow.\\n\\n### Overly passionate\\n\\nOften having this volume of ideas, and an immense, fast burning passion for a topic means things are often oversold, or phrased incorrectly.\\n\\nI remember once writing an email to a director at my then-work flagging that a product decision was \\\"unethical\\\" because I believed strongly we were making the wrong decision. In reality, while it was a bad decision, unethical was both the incorrect framing AND severity. Would both craft and inclusivity suffer from this decision?\\n\\nYes. However, was this a decision that was any more or less severe from the thousands made at the company every day? No, not really. In the moment though, it seemed like the most important thing in the universe, and my passion was dialed to 11.\\n\\nLuckily, this person was highly empathetic, and explained to the email chain what I likely meant (and why I was over-reacting) without condescending. It was really eye opening to me, and I always remember that. (Aside: Stick with the people who will call out out in a loving way! These people will help you grow immensely.)\\n\\nBecause I feel like I've explained absolutely nothing here, that seems like a great time to move on to point two!\\n\\n## Attention to detail\\n\\nThis one's short description nails it on the head: \\\"Yeah, probably fine, ill just post it.\\\"\\n\\nThis pretty much captures my whole sentiment here, and really conflicts with the last point, Feeling Misunderstood, yet some how coexist.\\n\\nHow this often manifests is either 1) writing for hours, attempting to get things right or concise or understandable and eventually getting frustrated and hitting post, or 2) blasting some writing out in 30 seconds and pressing send without even reading it back.\\n\\nI was never able to write papers in school because if I tried to edit a long piece of writing, rather than editing it I would just end up rewriting the whole thing on each edit pass. In the end I defaulted to writing a few hours before the deadline so I wouldn't have time to fret over the contents or writing style. I call this \\\"Deadline Adrenaline.\\\" I found I got better grades and responses often with just throwing something out there on the first pass than trying to write in a way others would understand easily (because, of course I couldn't do that. My brain doesn't work that way.)\\n\\n### Deadline Adrenaline\\n\\nAn aside – deadline adrenaline is something that I've come to lean on as an ADHD person throughout all parts of my life. I'm not sure if this is strictly and ADHD thing, or a me thing.\\n\\nDeadline adrenaline is roughly leaving something so late to the last minute that I'm basically fucked if I don't finish it in X hours. School papers, project deadlines, even packing a house or submitting some documents, many of these things in my life get done this way.\\n\\nOften tasks that seem impossible I'm able to pull off with ease leaning on this, but it means it can be difficult to worth with others effectively. My managers are always terrified and then shocked when in a day I turn around an entire project, or complete what seems like an impossible amount of work in a short time.\\n\\nThis process I go through is part of the ADHD cycles I experience, which I'd love to write about more later.\\n\\nThe super TL;DR is when not on medication I experience pretty severe cycles on both roughly a daily and monthly basis. These cover energy, creative output, focus and more.\\n\\nIt makes it extremely difficult to work with others if a creative or energy high doesn't align with where others are at the time, but also when my cycle highs align with a project or collaboration people are often amazed at both the volume and quality of my output (and then probably confused why a week later I can't seem to create two screens.)\\n\\nErr, we went on a bit of a tangent here though, so lets get to point 3!\\n\\n## Being socially inappropriate\\n\\nThis one is pretty straight forward for me. Let me say this first, I recognize I'm VERY, SUPER privileged to be able to work this way.\\n\\nI don't work with people, companies, etc that require me to do anything in a certain way. Need to dress a certain way? That is a nope. Talk or write formally? That is a nope. Maybe seems messed up, but it's how my brain works `¯\\\\_(ツ)_/¯`\\n\\nI am fortunate that I've been able to find a career path that I've been able to design a way to create that works for me, and brings people value, but I think many ADHD people's potential is never even given a chance to shine because they can't engage with the world the way the world wants them to.\\n\\nI was blessed with some incredible teachers and mentors that saw the value in me despite my \\\"weirdness\\\" that I was never able to define until recently.\\n\\nI think we leave a lot of great people behind because they can't or don't work the way the world wants them to. I'd be still in my parents basement if my only options were suit & tie or on my feet at 8am in retail. (Y'all are the unsung heroes, doing some of the hardest work with completely unjust levels of compensation. Thank you, and I hope we can improve the way you all have to work in my lifetime.)\\n\\nTo wrap up this section: I've always done the worst when I tried to fit myself into the mould of the \\\"Normal.\\\" I end up coming off just as a slightly ok-ish designer. I've found resounding success in the past few years when I've leaned into the me unapologetically, even though I recognize it can be hard to work with and around.\\n\\nI have the utmost respect for managers and leaders that can utilize the odd-shaped puzzle pieces like myself and figure out where they fit.\\n\\n## Feeling Misunderstood\\n\\nMoving on to the biggest one – Feeling misunderstood. This is the root of almost all social issues that ADHD brings for me personally.\\n\\nFeel like someone didn't understand what you said – here comes 10 minutes of exposition to try to explain that one statement I said, meanwhile the whole group is slowly edging away to get away from this odd guy.\\n\\nPost a piece of writing online? \\\"People will pick apart every statement.\\\", \\\"Don't post that, people won't understand what you mean.\\\" The amount of self-censorship you do from fear of being misunderstood is both socially crippling, and highly career negative.\\n\\nWhen I worked at Facebook, one thing I always struggled with is there is this idea of as you become a more senior designer you build more of a public following, and begin to have an impact on our industry. This was always crippling for me to even think about, because of the fear of doing or saying something wrong and then being outcast.\\n\\nThe feeling of being misunderstood to and ADHD person is TERRIFYING. I still have a thousand minor slights or social awkwardness I've committed that I think about weekly, and am just begging in my head to be able to go back and explain or correct.\\n\\n## Wrapping Up\\n\\nEven as I start this wrap up, I basically feel like I just wrote a bunch of stuff that people won't really get anything out of because of it being highly disjointed.\\n\\nBut I'll throw it out there since I'm trying to get better at challenging my assumptions and learning more about myself and my ADHD through sharing with others and getting feedback.\\n\\nThis meandered a bit from just focusing on writing, but writing is HARD for ADHD people. I'm trying to do it more to get better, and identify how the above things affect me and my writing and how I can improve it.\\n\\nI one-shot this writing, so apologies for any issues, spelling, flow or otherwise. I'm always open to talk about design, ADHD and more. You can reach me at iamnbutler@gmail.com.\\n\\nHope this is interesting or useful to someone!\\n\\nNate 🌱\\n\""," \"date_created\": \"2021-06-12T23:00:00.000Z\","," \"slug\": \"writing-with-adhd\","," \"title\": \"Writing with ADHD\","," \"uuid\": \"452d4263-60df-4c91-800c-f47431e6b3f2\","," \"url\": \"2021-04-20-good-software\""," \"body\": \"\\n## Mac Apps\\n\\n- Cleanshot\\n- Alfred\\n- Magnet\\n- Figma\\n- Mind Node\\n- Imgageoptim\\n- Codekit\\n- iA Writer\\n- Grammarly Editor\\n- iTerm / Alacritty\\n- VS Code\\n- Plex\\n- OneSwitch\\n- [Typeface](https://typefaceapp.com/)\\n\","," \"body\": \"\\n## Mac Apps\\n\\n- Cleanshot\\n- Alfred\\n- Magnet\\n- Figma\\n- Mind Node\\n- Imgageoptim\\n- Codekit\\n- iA Writer\\n- Grammarly Editor\\n- iTerm / Alacritty\\n- VS Code\\n- Plex\\n- OneSwitch\\n- [Typeface](https://typefaceapp.com/)\\n\""," \"date_created\": \"2021-04-20T23:00:00.000Z\","," \"slug\": \"good-software\","," \"title\": \"Good Software\","," \"uuid\": \"1097ee2e-8e79-45a4-8917-17af91ce67d0\","," \"url\": \"2021-04-17-accessing-airtable-fields\""," \"body\": \"\\n# Accessing fields from the Airtable API\\n\\nI spent forever trying to figure this out so I thought I'd just post this here in case someone else stumbles across it. If 'record' is your record object (`records.forEach(function (record)`) You can access a field by using `record.fields.YOUR_FIELD_NAME`\\n\\n```js\\n// This example is me creating YAML frontmatter using fields from my Base.\\n\\nconst p = record.fields\\n\\nlet frontMatter = {\\n post_visible: p.post_visible,\\n status: p.status,\\n\\n title: title,\\n subtitle: p.subtitle,\\n slug: slug,\\n custom_slug: p.custom_slug,\\n\\n date: date,\\n date_updated: p.date_updated,\\n author: p.author,\\n\\n primary_tag: p.primary_tag,\\n tags: p.tags,\\n\\n summary: p.summary,\\n edit: p.edit,\\n\\n featured: p.featured,\\n show_thumbnail: p.show_thumbnail,\\n thumbnail: p.thumbnail,\\n prefer_wide_thumbnail: p.prefer_wide_thumbnail,\\n wide_thumbnail: p.wide_thumbnail,\\n hero_image: p.hero_image,\\n post_images: p.post_images,\\n}\\n```\\n\","," \"body\": \"\\n# Accessing fields from the Airtable API\\n\\nI spent forever trying to figure this out so I thought I'd just post this here in case someone else stumbles across it. If 'record' is your record object (`records.forEach(function (record)`) You can access a field by using `record.fields.YOUR_FIELD_NAME`\\n\\n```js\\n// This example is me creating YAML frontmatter using fields from my Base.\\n\\nconst p = record.fields\\n\\nlet frontMatter = {\\n post_visible: p.post_visible,\\n status: p.status,\\n\\n title: title,\\n subtitle: p.subtitle,\\n slug: slug,\\n custom_slug: p.custom_slug,\\n\\n date: date,\\n date_updated: p.date_updated,\\n author: p.author,\\n\\n primary_tag: p.primary_tag,\\n tags: p.tags,\\n\\n summary: p.summary,\\n edit: p.edit,\\n\\n featured: p.featured,\\n show_thumbnail: p.show_thumbnail,\\n thumbnail: p.thumbnail,\\n prefer_wide_thumbnail: p.prefer_wide_thumbnail,\\n wide_thumbnail: p.wide_thumbnail,\\n hero_image: p.hero_image,\\n post_images: p.post_images,\\n}\\n```\\n\""," \"date_created\": \"2021-04-12T23:00:00.000Z\","," \"slug\": \"accessing-fields-in-airtable\","," \"title\": \"Accessing fields in Airtable\","," \"uuid\": \"bcd0ba51-d050-49a8-a4ae-26b4bd9da2b0\","," \"url\": \"2021-04-13-nurture-tribute\""," \"body\": \"\\nA few pieces inspired by Porter Robinson's Nurture.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637125910/project/nurture-tribute/something_comforting_vkwe98.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637125914/project/nurture-tribute/musician_zwvdzf.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1637125908/project/nurture-tribute/Frame_3_mzflt4.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1637125909/project/nurture-tribute/musician2_didrcs.jpg)\\n\","," \"body\": \"\\nA few pieces inspired by Porter Robinson's Nurture.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637125910/project/nurture-tribute/something_comforting_vkwe98.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637125914/project/nurture-tribute/musician_zwvdzf.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1637125908/project/nurture-tribute/Frame_3_mzflt4.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1637125909/project/nurture-tribute/musician2_didrcs.jpg)\\n\""," \"slug\": \"nurture-tribute\","," \"title\": \"Nurture Tribute\","," \"uuid\": \"c655d4e9-d28b-45fe-8732-7f875251379f\","," \"url\": \"2021-04-10-mixblocks\""," \"body\": \"\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637124653/project/mixblocks/thumbnail-2x1_yyknqu.jpg)\\n\\n## The Concept\\n\\nInspired by a project a friend did recently about a display that reacts to your music, I started exploring *mixblocks.* A creation & remix tool focused around collaborative creation through the sharing of 'blocks.'\\n\\nWhile Mixblocks has a feed of creations that you can grab and remix from, it has no likes, no connected identities, and no custom user names.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637124910/project/mixblocks/Frame_28_mjppaj.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637124910/project/mixblocks/CleanShot_-_2021-11-16_at_23.49.48_2x_gy2rcd.png)\\n(Some branding exploration fun)\\n\\n## Joining Mixblocks\\n\\nWhen joining mixblocks, a creator is assigned a randomly generated name & profile image, which they can regenerate any amount of times. This generated name becomes the pseudonym that they create under. Mixblocks focuses on creation from the beginning–not social presence or clout.\\n\\n### New Person Flow\\n\\nThe new person flow for mixblocks focuses on getting you in and creating as soon as possible. You can only create an account with your phone number or a secure auth. Mixblocks wants to know as little about you as possible.\\n\\n## Your First Block\\n\\nDropping into the app for the first time, you will walk through creating your first block. This can be a lightblock or a soundblock, but you have to create something to enter the rest of the app.\\n\\nYou can walk through your first block guided (think the first level of Sound Shapes) or choose to jump straight into creation.\\n\\n## Remixing & Sharing\\n\\nMore coming soon!\\n\\n## Importing & Exporting\\n\\nMore coming soon!\\n\\n## Beyond Digital\\n\\nTake your blocks and run with them – Mixblocks is built from the ground up for use with hacker and maker tools like Arduino, LED Matrixes, etc. Write your own custom integrations, or grab from one that already exists...\\n\","," \"body\": \"\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637124653/project/mixblocks/thumbnail-2x1_yyknqu.jpg)\\n\\n## The Concept\\n\\nInspired by a project a friend did recently about a display that reacts to your music, I started exploring *mixblocks.* A creation & remix tool focused around collaborative creation through the sharing of 'blocks.'\\n\\nWhile Mixblocks has a feed of creations that you can grab and remix from, it has no likes, no connected identities, and no custom user names.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637124910/project/mixblocks/Frame_28_mjppaj.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637124910/project/mixblocks/CleanShot_-_2021-11-16_at_23.49.48_2x_gy2rcd.png)\\n(Some branding exploration fun)\\n\\n## Joining Mixblocks\\n\\nWhen joining mixblocks, a creator is assigned a randomly generated name & profile image, which they can regenerate any amount of times. This generated name becomes the pseudonym that they create under. Mixblocks focuses on creation from the beginning–not social presence or clout.\\n\\n### New Person Flow\\n\\nThe new person flow for mixblocks focuses on getting you in and creating as soon as possible. You can only create an account with your phone number or a secure auth. Mixblocks wants to know as little about you as possible.\\n\\n## Your First Block\\n\\nDropping into the app for the first time, you will walk through creating your first block. This can be a lightblock or a soundblock, but you have to create something to enter the rest of the app.\\n\\nYou can walk through your first block guided (think the first level of Sound Shapes) or choose to jump straight into creation.\\n\\n## Remixing & Sharing\\n\\nMore coming soon!\\n\\n## Importing & Exporting\\n\\nMore coming soon!\\n\\n## Beyond Digital\\n\\nTake your blocks and run with them – Mixblocks is built from the ground up for use with hacker and maker tools like Arduino, LED Matrixes, etc. Write your own custom integrations, or grab from one that already exists...\\n\""," \"date_created\": \"2021-04-09T23:00:00.000Z\","," \"slug\": \"mixblocks\","," \"title\": \"Mixblocks\","," \"uuid\": \"bd3e980c-b79d-4852-b014-ac6f32bb9356\","," \"url\": \"2021-03-15-web-dev-resources\""," \"body\": \"\\n## Preface\\n\\nI'm mostly a hobby developer – I've learned mostly by taping together bits of code found all over the internet for years now. This space is mostly for remembering the cool and useful shit I run across, but hopefully you can find something useful in here!\\n\\n## Tools\\n\\n- [VS Code](https://code.visualstudio.com/) – More or less the god of code editors at this point. I was resistant to moving to something so \\\"heavy\\\", only to find once I tried it it is incredibly fast on top of being packed with useful stuff.\\n- [Codekit](https://codekitapp.com/) – All sorts of fun things out of the box. Compass, local servers, sass compilation & more. I use VSCode more these days to cover these needs, but I relied on Codekit for years.\\n\\n## Text, Characters, Escape Codes, Emoji\\n\\n- https://graphemica.com/\\n\\n## CSS\\n\\n- Of course, the classics: [CSSTricks' Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/) & [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\\n- In fact, pretty much [any guide](https://css-tricks.com/guides/) from [Chris](https://chriscoyier.net/) & co is great.\\n\\n### Grid\\n\\n- A [CSS grid](https://grid.layoutit.com/) tool (there are many!) These are super useful when trying to take the idea in your head and put it in a grid. This one is nice since you can create a codepen and modify it from there.\\n- [Controlling leftover grid items](https://css-irl.info/controlling-leftover-grid-items/)\\n- [Complex CSS Grid layout in only a few lines](https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/)\\n\\n### Visual Assets & Art\\n\\n- [CSS Doodle](https://css-doodle.com/) – Draw complex patterns & visuals in pure CSS.\\n\\n## Static Site Generators\\n\\n- [Next.js](https://nextjs.org/) – Can't beat em? Join em. Got bullied into writing React, but Next is pretty ok.\\n- [Jamstack](https://jamstack.org/) – A great starting point for learning about static site generators and what is out there.\\n\\n### [11ty](https://www.11ty.dev/)\\n\\n- [Build an eleventy site from scratch](https://egghead.io/courses/build-an-eleventy-11ty-site-from-scratch-bfd3)\\n- [11ty.rocks](https://11ty.rocks/) – Some great eleventy tips & beginner resources.\\n- [Use Airtable as a backend for an eleventy static site](https://danabyerly.com/articles/using-airtable-with-eleventy/)\\n\\n## Git\\n\\n- Questions:\\n - [Remove .DS_Store from Git](https://stackoverflow.com/questions/107701/how-can-i-remove-ds-store-files-from-a-git-repository)\\n\\n## Site Speed & Testing\\n\\n- [Google Developers – Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/)\\n\","," \"body\": \"\\n## Preface\\n\\nI'm mostly a hobby developer – I've learned mostly by taping together bits of code found all over the internet for years now. This space is mostly for remembering the cool and useful shit I run across, but hopefully you can find something useful in here!\\n\\n## Tools\\n\\n- [VS Code](https://code.visualstudio.com/) – More or less the god of code editors at this point. I was resistant to moving to something so \\\"heavy\\\", only to find once I tried it it is incredibly fast on top of being packed with useful stuff.\\n- [Codekit](https://codekitapp.com/) – All sorts of fun things out of the box. Compass, local servers, sass compilation & more. I use VSCode more these days to cover these needs, but I relied on Codekit for years.\\n\\n## Text, Characters, Escape Codes, Emoji\\n\\n- https://graphemica.com/\\n\\n## CSS\\n\\n- Of course, the classics: [CSSTricks' Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/) & [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\\n- In fact, pretty much [any guide](https://css-tricks.com/guides/) from [Chris](https://chriscoyier.net/) & co is great.\\n\\n### Grid\\n\\n- A [CSS grid](https://grid.layoutit.com/) tool (there are many!) These are super useful when trying to take the idea in your head and put it in a grid. This one is nice since you can create a codepen and modify it from there.\\n- [Controlling leftover grid items](https://css-irl.info/controlling-leftover-grid-items/)\\n- [Complex CSS Grid layout in only a few lines](https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/)\\n\\n### Visual Assets & Art\\n\\n- [CSS Doodle](https://css-doodle.com/) – Draw complex patterns & visuals in pure CSS.\\n\\n## Static Site Generators\\n\\n- [Next.js](https://nextjs.org/) – Can't beat em? Join em. Got bullied into writing React, but Next is pretty ok.\\n- [Jamstack](https://jamstack.org/) – A great starting point for learning about static site generators and what is out there.\\n\\n### [11ty](https://www.11ty.dev/)\\n\\n- [Build an eleventy site from scratch](https://egghead.io/courses/build-an-eleventy-11ty-site-from-scratch-bfd3)\\n- [11ty.rocks](https://11ty.rocks/) – Some great eleventy tips & beginner resources.\\n- [Use Airtable as a backend for an eleventy static site](https://danabyerly.com/articles/using-airtable-with-eleventy/)\\n\\n## Git\\n\\n- Questions:\\n - [Remove .DS_Store from Git](https://stackoverflow.com/questions/107701/how-can-i-remove-ds-store-files-from-a-git-repository)\\n\\n## Site Speed & Testing\\n\\n- [Google Developers – Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/)\\n\""," \"date_created\": \"2021-03-15T00:00:00.000Z\","," \"slug\": \"web-dev-resources\","," \"title\": \"Web Dev Resources\","," \"uuid\": \"30ec7aa8-9b6b-429d-86a8-cc1790bf5c44\","," \"url\": \"2021-03-12-nate-on-the-web\""," \"body\": \"\\nI have many, many, many times explored new directions for my personal site. (My record of new direction to launched site is pretty abysmal, maybe 10:1 T\\\\_\\\\_T) Those designs end up just living in a folder somewhere, so I wanted to give them a place to live here. It's cool to look back over the years at all the different directions, and watch the trends come and go.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bb40635e9c957609d0359_Screen%20Shot%202021-03-12%20at%2010.33.10%20AM.png)\\n\\n\\\\[2012\\\\] The oldest concept I can find, but I know there are a few others. This was a simple approach. My title for this one was \\\"Full Stack Web Developer.\\\" I think around this time I had been contemplating leaving design and going eng full time.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bb505e9349f61cec6c341_Screen%20Shot%202021-03-12%20at%2010.34.56%20AM.png)\\n\\n\\\\[2013ish~\\\\] I quite liked this one – More of a splash page than a full site, but I was happy with it. I'll always remember this one because someone lifted it 1:1 and didn't even update the image links (there was a hover image asset that was hosted in my dropbox!) We brainstormed all sorts of fun ways we could mess with them.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bba7365053bcfe997c76d_Screen%20Shot%202021-03-12%20at%2010.52.15%20AM.png)\\n\\n\\\\[2013\\\\] m i n i m a l\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604e6aaca35a42ce3746f80a_Screenshot%202013-12-15%2019.07.50.jpeg)\\n\\nAnother simple direction.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbac964788fa9180d6c18_Screen%20Shot%202021-03-12%20at%2010.57.02%20AM.png)\\n\\n\\\\[2015\\\\] Super corporate feeling. Glad I never built this! Doesn't match my vibe well.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbaf3e9349f7a7dc6dc3b_Screen%20Shot%202021-03-12%20at%2010.57.34%20AM.png)\\n\\n\\\\[2015\\\\] Simple again.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbb18c2e0fa38d3c3262b_v4-d1.png)\\n\\n\\\\[2015\\\\] And something completely different!\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bba84983bbbf5ca688cfe_Screen%20Shot%202021-03-12%20at%2010.55.58%20AM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bba9457aac10127329de5_Screen%20Shot%202021-03-12%20at%2010.56.23%20AM.png)\\n\\n\\\\[2015\\\\] A much more editorial approach. I was writing a lot at this time, so it make sense.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbb3c4ff35771de905edd_Screen%20Shot%202021-03-12%20at%2011.00.03%20AM.png)\\n\\nMore mobile first (I've lost a lot of these fonts, so things look pretty off.)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbb590e0fb42da5ec0730_Screen%20Shot%202021-03-12%20at%2011.00.21%20AM.png)\\n\\n\\\\[2015\\\\] Probably the 5th or 6th direction I worked on this year. Lots of time designing websites to avoid doing class work :) (2015?)\\n\\nThere is about a 2-3 year gap here. I'm sure there are some other concepts between these – I'll have to try to dig them up.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bda8003b5a73bb1af843c_Screen%20Shot%202021-03-12%20at%201.11.03%20PM.png)\\n\\n\\\\[2019\\\\] A tablet-first approach focused on themed project tiles.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bda957f9d024fed9920ab_Screen%20Shot%202021-03-12%20at%201.11.32%20PM.png)\\n\\nI thought this footer was pretty cool (a bit busy but...)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdabf571e781647ee0a07_Screen%20Shot%202021-03-12%20at%201.11.56%20PM.png)\\n\\n\\\\[2019\\\\] Dark simple direction. I was working on this one but realized I pulled inspo a bit too directly from another site I saw. Didn't feel great launching this one.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdaf3ec4a8283ba115281_Screen%20Shot%202021-03-12%20at%201.12.21%20PM.png)\\n\\n\\\\[2019\\\\] Evolving the above two concepts together.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb08d36352cfc56f0fab_Screen%20Shot%202021-03-12%20at%201.12.47%20PM.png)\\n\\nA project page concept.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb1ae25b437f1ebb5bb3_Screen%20Shot%202021-03-12%20at%201.13.11%20PM.png)\\n\\nThere were some cool details here, like custom image h-scrolls do dive deep on a particular part of a project.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb4460ff3e0da9b23af7_Screen%20Shot%202021-03-12%20at%201.13.32%20PM.png)\\n\\n\\\\[2020\\\\] More evolution.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb52e37b94ea500a2f92_Screen%20Shot%202021-03-12%20at%201.13.51%20PM.png)\\n\\nAbout direction. (IMO this was a bit much for me. Content is example copy.)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb893e5bf650f5cef35d_Screen%20Shot%202021-03-12%20at%201.14.24%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdbc3cc0083bc091c6a8e_Screen%20Shot%202021-03-12%20at%201.23.02%20PM.png)\\n\\nProject Tile WIPs from the above few concepts.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bcbccd49140d58a82c8e8_IMG_0205.jpg)\\n\\n\\\\[2020\\\\] A fun departure from the other styles I'd been exploring. This was a sketch of a game level approach, with fun elements like a themed day/night cycle, experience bar based on years of experience, and more :)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdbf97f9d0275859923a9_Screen%20Shot%202021-03-12%20at%201.15.42%20PM.png)\\n\\n\\\\[2020\\\\] Ended up simplifying down quite a bit. I like the blueprint-y feeling of this direction.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdc1b2ba0d679dc12a6e9_Screen%20Shot%202021-03-12%20at%201.16.45%20PM.png)\\n\\nBlowing it out further.\\n\\nThis is closest to my site as of writing this, but It will continue to evolve I'm sure!\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdc637a2c856e887b0ab7_Screen%20Shot%202021-03-12%20at%201.25.48%20PM.png)\\n\\n\\\\[2021\\\\] Already thinking about how I can iterate on this direction to bring it a bit more to life, with more depth and a bit more character.\\n\","," \"body\": \"\\nI have many, many, many times explored new directions for my personal site. (My record of new direction to launched site is pretty abysmal, maybe 10:1 T\\\\_\\\\_T) Those designs end up just living in a folder somewhere, so I wanted to give them a place to live here. It's cool to look back over the years at all the different directions, and watch the trends come and go.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bb40635e9c957609d0359_Screen%20Shot%202021-03-12%20at%2010.33.10%20AM.png)\\n\\n\\\\[2012\\\\] The oldest concept I can find, but I know there are a few others. This was a simple approach. My title for this one was \\\"Full Stack Web Developer.\\\" I think around this time I had been contemplating leaving design and going eng full time.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bb505e9349f61cec6c341_Screen%20Shot%202021-03-12%20at%2010.34.56%20AM.png)\\n\\n\\\\[2013ish~\\\\] I quite liked this one – More of a splash page than a full site, but I was happy with it. I'll always remember this one because someone lifted it 1:1 and didn't even update the image links (there was a hover image asset that was hosted in my dropbox!) We brainstormed all sorts of fun ways we could mess with them.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bba7365053bcfe997c76d_Screen%20Shot%202021-03-12%20at%2010.52.15%20AM.png)\\n\\n\\\\[2013\\\\] m i n i m a l\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604e6aaca35a42ce3746f80a_Screenshot%202013-12-15%2019.07.50.jpeg)\\n\\nAnother simple direction.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbac964788fa9180d6c18_Screen%20Shot%202021-03-12%20at%2010.57.02%20AM.png)\\n\\n\\\\[2015\\\\] Super corporate feeling. Glad I never built this! Doesn't match my vibe well.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbaf3e9349f7a7dc6dc3b_Screen%20Shot%202021-03-12%20at%2010.57.34%20AM.png)\\n\\n\\\\[2015\\\\] Simple again.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbb18c2e0fa38d3c3262b_v4-d1.png)\\n\\n\\\\[2015\\\\] And something completely different!\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bba84983bbbf5ca688cfe_Screen%20Shot%202021-03-12%20at%2010.55.58%20AM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bba9457aac10127329de5_Screen%20Shot%202021-03-12%20at%2010.56.23%20AM.png)\\n\\n\\\\[2015\\\\] A much more editorial approach. I was writing a lot at this time, so it make sense.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbb3c4ff35771de905edd_Screen%20Shot%202021-03-12%20at%2011.00.03%20AM.png)\\n\\nMore mobile first (I've lost a lot of these fonts, so things look pretty off.)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bbb590e0fb42da5ec0730_Screen%20Shot%202021-03-12%20at%2011.00.21%20AM.png)\\n\\n\\\\[2015\\\\] Probably the 5th or 6th direction I worked on this year. Lots of time designing websites to avoid doing class work :) (2015?)\\n\\nThere is about a 2-3 year gap here. I'm sure there are some other concepts between these – I'll have to try to dig them up.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bda8003b5a73bb1af843c_Screen%20Shot%202021-03-12%20at%201.11.03%20PM.png)\\n\\n\\\\[2019\\\\] A tablet-first approach focused on themed project tiles.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bda957f9d024fed9920ab_Screen%20Shot%202021-03-12%20at%201.11.32%20PM.png)\\n\\nI thought this footer was pretty cool (a bit busy but...)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdabf571e781647ee0a07_Screen%20Shot%202021-03-12%20at%201.11.56%20PM.png)\\n\\n\\\\[2019\\\\] Dark simple direction. I was working on this one but realized I pulled inspo a bit too directly from another site I saw. Didn't feel great launching this one.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdaf3ec4a8283ba115281_Screen%20Shot%202021-03-12%20at%201.12.21%20PM.png)\\n\\n\\\\[2019\\\\] Evolving the above two concepts together.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb08d36352cfc56f0fab_Screen%20Shot%202021-03-12%20at%201.12.47%20PM.png)\\n\\nA project page concept.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb1ae25b437f1ebb5bb3_Screen%20Shot%202021-03-12%20at%201.13.11%20PM.png)\\n\\nThere were some cool details here, like custom image h-scrolls do dive deep on a particular part of a project.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb4460ff3e0da9b23af7_Screen%20Shot%202021-03-12%20at%201.13.32%20PM.png)\\n\\n\\\\[2020\\\\] More evolution.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb52e37b94ea500a2f92_Screen%20Shot%202021-03-12%20at%201.13.51%20PM.png)\\n\\nAbout direction. (IMO this was a bit much for me. Content is example copy.)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdb893e5bf650f5cef35d_Screen%20Shot%202021-03-12%20at%201.14.24%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdbc3cc0083bc091c6a8e_Screen%20Shot%202021-03-12%20at%201.23.02%20PM.png)\\n\\nProject Tile WIPs from the above few concepts.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bcbccd49140d58a82c8e8_IMG_0205.jpg)\\n\\n\\\\[2020\\\\] A fun departure from the other styles I'd been exploring. This was a sketch of a game level approach, with fun elements like a themed day/night cycle, experience bar based on years of experience, and more :)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdbf97f9d0275859923a9_Screen%20Shot%202021-03-12%20at%201.15.42%20PM.png)\\n\\n\\\\[2020\\\\] Ended up simplifying down quite a bit. I like the blueprint-y feeling of this direction.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdc1b2ba0d679dc12a6e9_Screen%20Shot%202021-03-12%20at%201.16.45%20PM.png)\\n\\nBlowing it out further.\\n\\nThis is closest to my site as of writing this, but It will continue to evolve I'm sure!\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bdc637a2c856e887b0ab7_Screen%20Shot%202021-03-12%20at%201.25.48%20PM.png)\\n\\n\\\\[2021\\\\] Already thinking about how I can iterate on this direction to bring it a bit more to life, with more depth and a bit more character.\\n\""," \"date_created\": \"2021-03-12T00:00:00.000Z\","," \"slug\": \"nate-on-the-web\","," \"title\": \"Nate on the Web\","," \"uuid\": \"8782dc58-df84-450a-aca0-724f200e21ec\","," \"url\": \"2021-03-08-design-resources\""," \"body\": \"\\n## Design Critique\\n\\n- [https://www.figma.com/blog/design-critiques-at-figma/](https://www.figma.com/blog/design-critiques-at-figma/) – A great article on why critiques often feel broken, and a tactical approach to fix them.\\n\\n## Culture\\n\\n- [https://www.jessicaharllee.com/notes/good-challenges-vs-bad-challenges/](https://www.jessicaharllee.com/notes/good-challenges-vs-bad-challenges/)\\n\\n## Systems\\n\\n- [Design Systems](https://www.designsystems.com/) – Learn about all aspects of Design Systems.\\n\\n## Reference\\n\\n- [https://staff.design/](https://staff.design/) – Read about designers who chose to continue designing (known as an IC, or Individual Contributors) at a high level rather than pursuing other career directions, like a manager track.\\n- [https://www.levels.fyi/](https://www.levels.fyi/) – Compare levels and salaries across companies large tech companies.\\n\","," \"body\": \"\\n## Design Critique\\n\\n- [https://www.figma.com/blog/design-critiques-at-figma/](https://www.figma.com/blog/design-critiques-at-figma/) – A great article on why critiques often feel broken, and a tactical approach to fix them.\\n\\n## Culture\\n\\n- [https://www.jessicaharllee.com/notes/good-challenges-vs-bad-challenges/](https://www.jessicaharllee.com/notes/good-challenges-vs-bad-challenges/)\\n\\n## Systems\\n\\n- [Design Systems](https://www.designsystems.com/) – Learn about all aspects of Design Systems.\\n\\n## Reference\\n\\n- [https://staff.design/](https://staff.design/) – Read about designers who chose to continue designing (known as an IC, or Individual Contributors) at a high level rather than pursuing other career directions, like a manager track.\\n- [https://www.levels.fyi/](https://www.levels.fyi/) – Compare levels and salaries across companies large tech companies.\\n\""," \"date_created\": \"2021-03-08T00:00:00.000Z\","," \"slug\": \"design-resources\","," \"title\": \"Design Resources\","," \"uuid\": \"9659e0cd-1381-4f89-b39b-dc0ecd2e8e43\","," \"url\": \"2021-03-03-all-the-classes-to-revisit\""," \"body\": \"\\nYou know that thing you do when you get super hyped to learn something, open a million youtube videos, buy a class, get one session in and then completely move on? I do this a **lot**. This is a way to remind myself of all the cool things I've started that I forgot about or never went back to – and maybe (hopefully) let someone else know they are not alone in not being able to sit through a class!\\n\\n## The Graveyard\\n\\n- [UI and Data Design for Film](https://www.learnsquared.com/courses/ui-data-design)\\n- [Intro to Environment Painting](https://www.learnsquared.com/courses/intro-env-paint)\\n- [Design for Production – Workflow](https://www.learnsquared.com/courses/dfp-workflow)\\n- Learning Modo\\n- [3D For Designers – Intro to 3D for Designers](https://www.3dfordesigners.com/intro-to-cinema-4d-for-designers) –This is great intro class to 3D. Do recommend.\\n- [Learning React Track](https://teamtreehouse.com/tracks/learn-react) – Team Treehouse\\n\\n## Miraculously Completed:\\n\\n- None Yet ;)\\n\","," \"body\": \"\\nYou know that thing you do when you get super hyped to learn something, open a million youtube videos, buy a class, get one session in and then completely move on? I do this a **lot**. This is a way to remind myself of all the cool things I've started that I forgot about or never went back to – and maybe (hopefully) let someone else know they are not alone in not being able to sit through a class!\\n\\n## The Graveyard\\n\\n- [UI and Data Design for Film](https://www.learnsquared.com/courses/ui-data-design)\\n- [Intro to Environment Painting](https://www.learnsquared.com/courses/intro-env-paint)\\n- [Design for Production – Workflow](https://www.learnsquared.com/courses/dfp-workflow)\\n- Learning Modo\\n- [3D For Designers – Intro to 3D for Designers](https://www.3dfordesigners.com/intro-to-cinema-4d-for-designers) –This is great intro class to 3D. Do recommend.\\n- [Learning React Track](https://teamtreehouse.com/tracks/learn-react) – Team Treehouse\\n\\n## Miraculously Completed:\\n\\n- None Yet ;)\\n\""," \"date_created\": \"2021-03-03T00:00:00.000Z\","," \"slug\": \"all-the-classes-to-revisit\","," \"title\": \"All The Classes To Revisit\","," \"uuid\": \"eda9f73d-fd60-410e-9fc5-618c68cd283d\","," \"url\": \"2020-11-20-stock-people-sets\""," \"body\": \"\\nBeen working on a lot of decks recently, and one problem I constantly run in to is finding great images and video of a person doing more than one thing for people stories. A few stock sites will have multiple shots in a series, but never many different activities, with a mix of video and photos, with a consistent person or set of people.\\n\\nStyle is another huge thing. It is hard to find content that feels less canned than stock photos, and feels more like what you would see naturally posted on our platforms.\\n\\nI'd love to see us commission or shoot ourselves a series of these people for use when building a variety of products. (This would also help us get away from using employee's faces in our work.)\\n\","," \"body\": \"\\nBeen working on a lot of decks recently, and one problem I constantly run in to is finding great images and video of a person doing more than one thing for people stories. A few stock sites will have multiple shots in a series, but never many different activities, with a mix of video and photos, with a consistent person or set of people.\\n\\nStyle is another huge thing. It is hard to find content that feels less canned than stock photos, and feels more like what you would see naturally posted on our platforms.\\n\\nI'd love to see us commission or shoot ourselves a series of these people for use when building a variety of products. (This would also help us get away from using employee's faces in our work.)\\n\""," \"date_created\": \"2020-11-20T00:00:00.000Z\","," \"slug\": \"stock-people-sets\","," \"title\": \"Stock People Sets\","," \"uuid\": \"936d502d-3b2d-43a9-9aeb-97b276b967c2\","," \"url\": \"2020-11-14-vision-design\""," \"body\": \"\\nI've been thinking about this over the past few years. The type of work I like to do and excel attends to fall into a very specific portion of a project, and I found the further along a project got, the less efficient my time was and the less value I was producing. In contrast, the earlier I was into a project, the more efficient and valuable my contributions have been.\\n\\nRecently I've been trying to align myself more with a role I've tentatively been calling Vision Design. I haven't spent much time yet researching what else is out there related to this term or how others use it yet, as I first want to process for myself what this means.‍\\n\\nSo here we go—Let's dive in and see what we find.\\n\\nFirst, I'm writing this through the lens of someone that has worked under the title of \\\"Product Designer\\\" for the past 5 years.\\n\\nAt Facebook, we don't use level signifiers (senior, junior, principal, staff, etc) and like to call ourselves a flat organization (I have thoughts on this, but I digress.) The idea here is that everyone's contributions are equally valued—younger designers (experience-wise) should have the chance to contribute equally as those with more experience. This is valuable to help people grow, and I personally experienced the value here as I had the chance to drive major projects myself (likely over my head even.)\\n\\nThe downside here is that because everyone has the same role, generalists tend to do better than specialists because, in most projects, they essentially own an entire product or vertical. This is great for building a wide range of skills early, but as designers progress in their careers, they tend to specialize, and these specializations are often not rewarded equally.\\n\\nIn a metrics-based project environment like Facebook, specializations like designer/pm hybrids, systems designers align really well with the way projects work here. On the flip side, specialties like visual design, design engineering/prototyping & focus on long-range vision tend not to align with the way designers are rewarded.\\n\\nSure, these things are seen as valuable, but people who want to do these things full time have a hard time finding a place or continually finding they are not measured equally with their peers. Or they are expected to do the same amount of work as a generalist, simply with their specialization added on top.\\n\\nI remember one of my peers being frustrated with their review one-half after they were asked to lean heavily into long-range vision in a long sprint and a series of follow-up projects. They then were penalized at the end of the half, because they had not shipped enough work publicly/moved important internal metrics.\\n\\nAll of this means that people often end up in one of three categories:\\n\\n1. An extremely experienced generalist.\\n\\n2. Moving to a manager track to progress in their career (even if they don't want to manage people).\\n\\n3. Leaving the company to find a place they can specialize the way they want.\\n\\n(I didn't end up finishing this writing, but quite a few months later, my wrap-up take is this: Facebook wasn't a good place to pursue the types of work I wanted to do and doesn't reward certain kinds of specialists. I've discussed this with many people who left for similar reasons and got similar feedback from all of them. I think Facebook and other large generalist-focused companies should find a way for specialists to shine and foster their growth.)\\n\","," \"body\": \"\\nI've been thinking about this over the past few years. The type of work I like to do and excel attends to fall into a very specific portion of a project, and I found the further along a project got, the less efficient my time was and the less value I was producing. In contrast, the earlier I was into a project, the more efficient and valuable my contributions have been.\\n\\nRecently I've been trying to align myself more with a role I've tentatively been calling Vision Design. I haven't spent much time yet researching what else is out there related to this term or how others use it yet, as I first want to process for myself what this means.‍\\n\\nSo here we go—Let's dive in and see what we find.\\n\\nFirst, I'm writing this through the lens of someone that has worked under the title of \\\"Product Designer\\\" for the past 5 years.\\n\\nAt Facebook, we don't use level signifiers (senior, junior, principal, staff, etc) and like to call ourselves a flat organization (I have thoughts on this, but I digress.) The idea here is that everyone's contributions are equally valued—younger designers (experience-wise) should have the chance to contribute equally as those with more experience. This is valuable to help people grow, and I personally experienced the value here as I had the chance to drive major projects myself (likely over my head even.)\\n\\nThe downside here is that because everyone has the same role, generalists tend to do better than specialists because, in most projects, they essentially own an entire product or vertical. This is great for building a wide range of skills early, but as designers progress in their careers, they tend to specialize, and these specializations are often not rewarded equally.\\n\\nIn a metrics-based project environment like Facebook, specializations like designer/pm hybrids, systems designers align really well with the way projects work here. On the flip side, specialties like visual design, design engineering/prototyping & focus on long-range vision tend not to align with the way designers are rewarded.\\n\\nSure, these things are seen as valuable, but people who want to do these things full time have a hard time finding a place or continually finding they are not measured equally with their peers. Or they are expected to do the same amount of work as a generalist, simply with their specialization added on top.\\n\\nI remember one of my peers being frustrated with their review one-half after they were asked to lean heavily into long-range vision in a long sprint and a series of follow-up projects. They then were penalized at the end of the half, because they had not shipped enough work publicly/moved important internal metrics.\\n\\nAll of this means that people often end up in one of three categories:\\n\\n1. An extremely experienced generalist.\\n\\n2. Moving to a manager track to progress in their career (even if they don't want to manage people).\\n\\n3. Leaving the company to find a place they can specialize the way they want.\\n\\n(I didn't end up finishing this writing, but quite a few months later, my wrap-up take is this: Facebook wasn't a good place to pursue the types of work I wanted to do and doesn't reward certain kinds of specialists. I've discussed this with many people who left for similar reasons and got similar feedback from all of them. I think Facebook and other large generalist-focused companies should find a way for specialists to shine and foster their growth.)\\n\""," \"date_created\": \"2020-08-02T23:00:00.000Z\","," \"slug\": \"vision-design\","," \"title\": \"Vision Design\","," \"uuid\": \"1b855fc1-7eec-4b35-b711-b035b8458c5d\","," \"url\": \"2020-11-14-picking-your-home-office-tech\""," \"body\": \"\\nIn the first part of this series, we'll take a look at all the hardware you might want when setting up your desk. We'll cover computers, peripherals, VC gear & audio, and more. In the later parts, we'll cover desk setup, ergonomics, and software!\\n\\n## The Gear\\n\\nI've compiled together a list of all the high-quality desk/work from home gear I've used or know of in one place (so you don't have to waste money on things that are not great!) This is the list I wish I had when I started building my setup!\\n\\nThese will skew towards the higher price range in these categories, but I'll try to include any budget options I know that are solid or I've personally tested. Generally, I'm looking at a balance of quality, aesthetic, and price range.\\n\\nI'll try to call out anything in this list that I haven't personally owned or used.\\n\\n### Computer\\n\\nYou probably already have one of these, but in case you are shopping around, here is what I recommend in 2021.\\n\\n##### Macs\\n\\n**_Edit: This was written before the M1X was launched. Don't invest in an M1 device over an M1X, even if it is a good amount cheaper._**\\n\\n[Macbook Air M1](https://www.apple.com/shop/buy-mac/macbook-air)\\n\\nThis is a beast of a machine, and the new M1 chip seems to be more or less living up to its hype. This is an excellent machine for most things – If you don't need to be running productivity or content creation software (Adobe, video editing, etc.) you probably don't need much more than this. Be aware that the SSDs in these machines can't be upgraded, so you will need to buy the size you need upfront.\\n\\nNote: If you plan to have more than one monitor or to run a monitor at 4K, I'd think about moving up to a...\\n\\n[Macbook Pro](https://www.apple.com/macbook-pro-16/)\\n\\nThese days, it isn't really worth moving up to a Macbook Pro unless you are doing some heavy creation work. Even design work can be done completely on the above M1 Air due to Figma and other web tools coming onto the scene. If you do need an MBP, don't buy a model made between 2016-2020 (these have the terrible [older MBP keyboards](https://www.theverge.com/2020/5/4/21246223/macbook-keyboard-butterfly-magic-pro-apple-designA).)\\n\\n[iMac](https://www.apple.com/imac/)\\n\\nIf you don't need to be on the go with your machine and want to combine in a monitor, iMacs are great. I honestly my good old iMac all the time.\\n\\nIf an iMac sounds good, I'd maybe recommend waiting, though, as I imagine we'll likely get an [iMac refresh](https://www.macrumors.com/roundup/imac/) pretty soon.\\n\\n##### PC – Laptop\\n\\nThese move so fast it is hard to keep up with. If you are looking to buy a laptop, I recommend [Dave2D's](https://www.youtube.com/channel/UCVYamHliCI9rw1tHR1xbkfw) channel. He covers the most notable ones in a straightforward and unbiased way.\\n\\nOtherwise, when in doubt, usually the [XPS 13](https://www.dell.com/en-us/shop/dell-laptops/xps-13-laptop/spd/xps-13-9310-laptop) is a good bet. Generally, [Razer Blades](https://www.razer.com/gaming-laptops/razer-blade) have an ok track record, but they are a bit more hit or miss than the XPS 13.\\n\\n##### PC – Desktop\\n\\nGenerally, your best bet will be to [put together a machine yourself](https://www.windowscentral.com/how-build-pc-ultimate-step-step-guide), but in 2021 this is a bit of a tall ask due to shortages being everywhere.\\n\\nI picked up [one of these](https://www.zotac.com/us/product/mini_pcs/magnus-one-ecm73070c-barebone) recently for our living room – it's an awesome little powerhouse (that makes a lot of noise.) Noise seems to be unimportant to some people and the most important thing to others. Make sure you do your research here on how much noise a PC will make if that matters to you, and probably avoid really small machines unless you are willing to get your hands dirty to bring down the volume.\\n\\nThe main thing to remember with PCs: smaller = more money, faster = more money, high end = mostly for bragging rights. Use a tool like [logical increments](https://www.logicalincrements.com/) to find the right price/performance ratio for you.\\n\\nOther desktop resources: [PC Part Picker](https://pcpartpicker.com/) | [SFF Subreddit](https://www.reddit.com/r/sffpc/) if you are looking to build a smaller machine.\\n\\n### Monitor\\n\\n[LG UltraFine 5K](https://www.amazon.com/gp/product/B07D24BQBQ/) – LG\\n\\n~850-1,299 (Price varies by sales + New vs Refurbished) – [Price History](https://camelcamelcamel.com/LG-UltraFine-Monitor-MacBook-Renewed/product/B07D24BQBQ)\\n\\nNot sure what the poor reviews are about here – I bought mine out of pocket (refurbished), I've been driving this monitor for 3 years now, and it's been solid. If you are using a Mac, use your laptop open with a monitor, and on-screen color matters, then this is the best option.\\n\\nOptions open up a bit more if you are willing to have non-OSX native color (this isn't overly noticeable as long as you don't use your laptop open, or are using a desktop-like a Mac Mini.)\\n\\n[BenQ EW3270U](https://www.amazon.com/gp/product/B078HWBGH5/) (32\\\"\\\", 4K) – BenQ\\n\\nMatte display, super large. I've daily driven these for a few years now and own two of them. IMO two of these are too big for a desk. If you want something pretty solid and are ok with slightly muted colors, these are a pretty good place to start. You probably want to arm mount these. (Make sure you are ok with how big they are.)\\n\\n#### Even Bigger?\\n\\nOnce you get over the 32\\\"\\\" range, you have two general directions you can go:\\n\\nThe first: Moving to an Ultrawide.\\n\\nThese are essentially 1.5-2 monitors side by side in a single monitor. They are great for working on multiple things at once, multiple code windows open at once, or playing games in a wide aspect ratio.\\n\\nThe second: Moving up to a TV.\\n\\nIn the past, TVs had pretty atrocious input lag and often couldn't match resolutions with higher-end monitors since they are meant to be viewed from a distance. More recently, in gaming mode good TVs tend to have great response times and the resolution to match.\\n\\nIf you go this route, I'd consider mounting the TV on the wall behind your desk or having a very deep desk. TVs are HOT and very bright. Using a TV for a long time sitting a short distance from your face will likely give you some serious eye strain.\\n\\nRegardless of which route you go, I'd recommend using some sort of window management software ([OSX](https://www.makeuseof.com/tag/best-mac-window-management-tools/) | [Windows](https://www.slant.co/topics/1249/~best-window-managers-for-windows)) at screen sizes this large. Programs don't tend to utilize this amount of space very well, so being able to set up quadrants is really helpful.\\n\\nI use [Magnet](https://apps.apple.com/us/app/magnet/id441258766?mt=12) on OSX generally.\\n\\n### Smaller monitor for VC\\n\\nI don't have a specific recommendation here, as most of these are from generic brands, but having a small (13~15\\\"\\\") portable monitor for second screen things like music, as well as a dedicated VC, is pretty handy. Ideally, one with VESA compatible mounting holes is ideal (like [this](https://www.banggood.com/PORPOISE-HT-1330XT-13_3-Inch-1080P-Type-C-Portable-Computer-Monitor-Gaming-Display-Screen-for-Smartphone-Tablet-Laptop-Game-Consoles-p-1666109.html?p=1D22009628395201703K&custlinkid=1507010&cur_warehouse=CN) one), so you can put it on a monitor arm or VESA stand. Your webcam/mic/etc can also sit on top of this to get a better angle.\\n\\nSomething like a [Portal](https://portal.facebook.com/products/) can also work here if you want a flexible, dedicated calling device. Downside: Not mountable. (Disclaimer: I've worked for Facebook, though not on Portal.)\\n\\n### Monitor Stands\\n\\n[Wood Desk Shelf](https://grovemade.com/product/wood-desk-shelf/?initial=342) – [Grovemade](https://grovemade.com/)\\n\\n[Wood Laptop Riser](https://grovemade.com/product/wood-laptop-riser/?initial=622) – [Grovemade](https://grovemade.com/)\\n\\nI'll bundle these together, but overall, Grovemade has excellent desktop accessories, including stands. The desk shelf will comfortably fit 2 large-ish monitors (~27in), and you can slide your keyboard or laptop underneath.\\n\\nThe laptop riser adds quite a bit of height, so you would want this to sit beside a monitor and a keyboard/mouse–not use it full time.\\n\\nThe quality of Grovemade products overall are top tier, and I know a lot of people that have these. You probably won't regret investing in these.\\n\\nThese are what I use on my desk today.\\n\\nIf you end up with both, one cool thing is the laptop stand is shaped perfectly that it can sit partially under the shelf, meaning you can line up your laptop screen with your monitor to the side.\\n\\n### Arms & Risers\\n\\nMore coming on these soon!\\n\\n### Keyboard\\n\\n[Das Professional 4 Keyboard](https://www.daskeyboard.com/daskeyboard-4-professional-for-mac/) – [daskeyboard](https://www.daskeyboard.com/)\\n\\nPrice: \\\\$169\\n\\nThis keyboard checks all the boxes for me – Not visually loud, has quiet options for mechanical keys, a physical knob for volume, media controls... You get the picture. The one thing that would make this keyboard perfect for me is a mute mic button, but I know that is asking a lot. I use the Cherry MX brown version, but if you want something louder/more clicky you can go with Blues.\\n\\nThis keyboard also has a [Windows version](https://www.daskeyboard.com/daskeyboard-4-professional/), and a [blank key version](https://www.daskeyboard.com/daskeyboard-4-ultimate/).\\n\\n[Generic Brand Mechanical](https://www.amazon.com/gp/product/B01E8KO2B0/)\\n\\nPrice: ~\\\\$30-50\\n\\nA super budget option – I was pretty impressed with this keyboard, Great form factor. Keys are mushy, so if that bugs you, I would avoid this one. I actually like the feel of these keys over many higher-end mechanical keyboards. I'd expect a 1-2 year lifespan out of something like this and no support if something goes wrong.\\n\\n[Logitech MX KEYS](https://www.logitech.com/en-us/products/keyboards/mx-keys-mac-wireless-keyboard.920-009552.html?crid=27)\\n\\nPrice: ~\\\\$99\\n\\nI haven't used these, but Logitech is doing some great things recently with their keyboards & mice. The MX series looks quite promising overall, and I think a single small universal USB for all devices will be quite appealing for many people.\\n\\nI'd recommend researching these if you just want something that works and will last quite a while.\\n\\n### Mouse\\n\\nMice are highly based on preference, like keyboards, so I'll just share what I have used.\\n\\n[Razer Death Adder](https://www.razer.com/gaming-mice/Razer-DeathAdder-V2/RZ01-03210100-R3U1) – Razer\\n\\nPrice: ~$50-$130 (Depends on wireless, buttons, etc.)\\n\\nI'm sure I'll lose some people over this, but the Death Adder is a solid daily driver – Some people rag on Razer, but I've been using one model or another of the death adder since 2008, and they have always served me well. I'd expect to replace these every 2-3 years (the build is solid, but they often end up double-clicking randomly later in their life, similar to a common issue with Logitech mice.)\\n\\n[Logitech MX Anywhere 3](https://www.logitech.com/en-us/products/mice/mx-anywhere-3-mac.910-005899.html)\\n\\nAs mentioned above, I haven't used this, but the new Logitech line looks quite promising. I'll probably check these out next.\\n\\nEdit: I did try the MX mice line. The new scroll wheel is love-it-or-hate-it for sure. (I really hated it.) Try this in a store before you buy one!\\n\\n##### Specialized\\n\\nSpaceMouse Pro 3D – 3DConnexion\\n\\nThis mouse is for 3D work primarily – if you do a lot of 3D modeling and can get used to the idea of physically navigating 3D space, this will be a HUGE time-saver for you. I never could get into the right mental model to navigate like this, but I was very impressed with the device itself.\\n\\nMacro Pads (Example: [Razer Tartarus](https://www.amazon.com/Razer-Tartarus-Progammable-Detachable-Mecha-Membrane/dp/B07754PYFK/))\\n\\nThere is a huge variety of these, but if your workflow would benefit from a place to map macros, these could be useful. I haven't used this specific one, but in my experience, Razer's software for mapping macros is pretty straightforward.\\n\\n### Mousepads & Desk Covers\\n\\nI haven't found my perfect mouse pad yet, but I tend to prefer large, desk cover style ones that the keyboard also sits on. This avoids the awkwardness and physical wear of dragging your arm over the edge of the mouse pad occasionally and also looks better. I've bought a few of these from Amazon in the past few years, but nothing has really stood out.\\n\\nI'll probably try one of these next:\\n\\n[Matte Desk Pad](https://grovemade.com/product/matte-desk-pad/?initial=534) – Grovemade\\n\\nI haven't owned this particular desk pad, but I feel comfortable enough with Grovemade's other products to recommend this one blind. I'd personally avoid the wool ones, I have one of those and I tend to find it a bit scratchy on the skin while mousing around but YMMV.\\n\\n[Orbitkey Desk Mat](https://www.orbitkey.com/collections/orbitkey-desk-mat/products/orbitkey-desk-mat?variant=32750570471520) – Orbitkey\\n\\nPrice: \\\\$65\\n\\nI haven't owned this one either, but it looks pretty solid, and the cable holder is a big plus to me.\\n\\n### Audio\\n\\n[Airpods](https://www.apple.com/shop/select-airpods)/[Airpods Pro](https://www.apple.com/shop/product/MWP22AM/A/airpods-pro) – Apple\\n\\nPrice: $149/$249\\n\\nI've tried a ton of headphones, and honestly, for meetings and passive listening, nothing really beats the Airpods. Obviously, sound quality isn't the priority here, but the device switching convenience and auto-pause when removing a single side is great. I prefer the shape of the regular Airpods over the pros, and I actually prefer that they don't noise cancel. If you need noise canceling to work, go with the Pros.\\n\\nI don't really use the wireless charging case, but it probably isn't needed if you are on a budget.\\n\\nThe Max are ok as well... IMO, The Sony XM series are better overhead earphones, and the one below this is way more affordable.\\n\\n[AT ATH-M50X](https://www.amazon.com/gp/product/B00HVLUR86/) – Audio-Technica\\n\\nPrice: ~\\\\$120\\n\\nThe classic. You probably know at least one person with pair of headphones or have seen someone on TV wearing them, and for a good reason. These are great, solid, unoffensive headphones. \\\"\\\"Neutral\\\"\\\" describes their sound well. If you need something reasonably priced and high quality, there is a good place to start. There are tons of detailed reviews on the amazon page, so I won't write much more here. (Note: Some people in the reviews recommend trying after-market ear cups on these. I haven't done this on either pair of these that I have, but it could be good to look into.)\\n\\nThere is apparently a Bluetooth version of these available now – I can't speak to them but they might be worth trying out.\\n\\n[WH-1000XM3](https://www.sony.com/electronics/headband-headphones/wh-1000xm3) – Sony\\n\\nPrice: \\\\$349\\n\\nThese are the ones I own – I'm not sure why the XM4s are both cheaper (~\\\\$250) and have worse reviews, but these are pretty good. (Gross note: These ear cups tend to gather sweat a decent amount when worn for a few hours.)\\n\\nWhile I bought these for working at my desk, the real place they shine is on long flights. With the noise canceling on you, basically forget anyone else is on the plane with you. It more or less completely removes cabin noise.\\n\\nOverall, if you are just using these as desk headphones, I'd go either cheaper and wired, or with the Airpod Pros.\\n\\n### Headphone Stands\\n\\nOverall, this is one area I haven't explored too much. I'll come back and add to this as I do more research and choose something.\\n\\n[Uppr Zero headphone stand](https://gouppercase.com/products/zero).\\n\\nI don't own this one, but this is a pretty unique & beautiful headphone stand with an all-aluminum build.\\n\\n### Video\\n\\n##### Lower End\\n\\n[Logitech C922 Pro](https://www.logitech.com/en-us/products/webcams/c922-pro-stream-webcam.960-001087.html?crid=34) – [Logitech](https://www.logitech.com/en-us/webcams)\\n\\n~\\\\$100\\n\\nThis is a pretty unoffensive option for a starter webcam. For most cases, this will give you an upgrade to your video and audio quality without breaking the bank.\\n\\nAlso promising:\\n\\n[Software](https://apps.apple.com/us/app/epoccam-webcam-for-mac-and-pc/id449133483) + A Phone\\n\\nThis is becoming a more popular option, and the results are pretty good. You can get high-quality video out of your phone that you might already have. It can be a bit of a hassle to set up and take down your phone daily, but it is an option.\\n\\n[Moment](https://www.shopmoment.com/) has also been kicking off a promising [Magsafe line](https://www.shopmoment.com/magsafe) for mounting. This might be helpful with this type of approach.\\n\\n##### Higher End\\n\\nDSLR/Mirrorless + Capture Card\\n\\nPrice: _~\\\\$300 all the way to tens of thousands_\\n\\nWhat most people you see with \\\"\\\"amazing\\\"\\\" looking video quality/youtube videos are using. There are _way_ to many options to get into here. I'm in the Sony ecosystem, so I'd recommend something like the a5100, a6300~ or Alpha 7C (these range from ~300-1.7k)\\n\\nI'll link to [a post like this](https://www.epiphan.com/blog/best-cameras-for-live-streaming/) and let you dive in further.\\n\\n[Pi HD Cam](https://www.raspberrypi.org/products/raspberry-pi-high-quality-camera/) – [Raspberry Pi](https://www.raspberrypi.org/)\\n\\nThis is a pretty cool + hacker-friendly option. The lenses it uses are inexpensive CCTV lenses as well. I'm hoping to write up a post on creating a VC setup using the Raspberry Pi at some point, so I'll revisit this then!\\n\\n### Accessories\\n\\n[CalDigit TS3 Plus Thunderbolt 3 Dock](https://www.caldigit.com/ts3-plus/) – [CalDigit](https://www.caldigit.com/)\\n\\n(~\\\\$230+)\\n\\nIf you buy a single high-end accessory for your desk, this is the one I would recommend.\\n\\nFlawless connectivity across multiple monitors, high-quality USB, card reader and full power even for 16\\\"\\\" 100W Macbook Pros. I've used my for the past 4 years and I've never had a single issue with it, and know at least 15 people who all have had a similar experience. This is the baseline for high-quality tech.\\n\\n(I've read some reports of people having issues with these and their Macbook Pros. I was surprised to hear this, as I know many, many people with these that have never had any issues, but once again YMMV.)\\n\\nCaldigit has a few other options these days for docks – you can see if a different one meets your needs better, but I do recommend something with it's own power source, not something that pulls power from the laptop.\\n\\nOverall, if the price doesn't put it completely out of your budget, this is a really solid building block for your desk setup.\\n\\n[Under desk volume knob and macro keyboard](https://www.pikatea.com/collections/products/products/pikatea-macropad-gb2).\\n\\nI haven't had a chance to try this yet, but I've been looking to buy something like this for years. The keys act as a bindable macro keyboard, and the knob works by default for volume and mute/unmute. Looking forward to picking one of these up to see if I can turn it into a hardware remote for Video Conferencing.\\n\\n[Yeelight – LED Light Bar Pro](https://en.yeelight.com/product/1512.html).\\n\\nThis sits on top of your monitor and illuminates the whole desk surface evenly without adding glare to the monitor.\\n\\nThis one is pretty good; my only complaints are 1) it is pretty wobbly when you go to press the buttons and 2) the buttons are capacitive. I'd eventually like to replace this with something more sturdy with physical buttons.\\n\\nIt is pretty amazing how much it illuminates on the desk without washing out the screen. One thing of note, it fights for physical real estate with your webcam. Mine is awkwardly stacked on top, but I'd love a better solution.\\n\\n### Chair\\n\\nMore coming on these soon!\\n\\nI'm using an Aeron right now, but I'm not convinced this is as good as it gets, and likely a really good chair setup can be had for far less than what and Aeron costs.\\n\\nWill return as I research and learn more.\\n\\n### Wifi/Networking\\n\\n#### Ethernet\\n\\nIf you don't have a dock with Ethernet, at least some sort of small USB-C to Ethernet dongle is a must-have ([Example cheap on](https://www.amazon.com/gp/product/B07VPMPT6M/)e, I have this one and it works fine.)\\n\\n#### Wifi\\n\\nThis deserves it's own post, probably, but if you want something you plug in and it works, I'd look into something like [Nest Wifi](https://store.google.com/us/product/nest_wifi?hl=en-US) or [Erro](https://eero.com/shop).\\n\\nThese are easy to use and troubleshoot and are systems you can build on as you need more.\\n\\nIf you want to start by buying into the upper end of systems, you can build you can start with something like [this](https://store.ui.com/collections/unifi-network-unifi-os-consoles/products/unifi-dream-machine) and expand as you go.\\n\\nA Ubiquiti setup is going to be on the upper end of where you can go without going full enterprise tier, and the setup isn't overly complicated.\\n\\nTheir access points start at a [super reasonable price](https://store.ui.com/products/unifi-ap-6-lite) and you can keep expanding this system almost infinitely. You can also plug-in cameras, door access systems and more in, similar to Nest, but it all runs local on your network rather than sending data to a third party.\\n\\nEdit: After using a Ubiquiti setup for the past ~1 year, I'd say MOST people are going to do better with a Google Wifi (or comparable) mesh wifi setup and a big network switch. Even if you want to run cameras, etc, you are probably better off using Homebridge and various cameras.\\n\\n### Extras\\n\\nI haven't tried any of the below, but I'll here are some of the things I'm interested in checking out next.\\n\\n[Grommet USB Hub](https://www.amazon.com/ORICO-Desk-USB-HUB/dp/B0863KCTFZ/ref=as_li_ss_tl?dchild=1&keywords=orico%2Bdesk%2Bgrommet&qid=1603851450&sr=8-1&linkCode=sl1&tag=minimalistik-20&linkId=5c5001a8363b68a8e6217aed8ba31bc6&language=en_US&th=1) – Generic\\n\\nThis is a pretty cool idea – I already use grommet holes to run cables from the top of my desk to the bottom; adding a hub here for things like headphones and quick USB access is pretty handy.\\n\\n#### Accent Lighting\\n\\n[Corsair iCUE LT100](https://www.corsair.com/us/en/Categories/Products/Ambient-Lighting/iCUE-LT100-Smart-Lighting-Towers-Starter-Kit/p/CD-9010002-NA) – Corsair\\n\\nThese seem like a nice way to add lighting to your desk (if you are into that kind of thing) without sticking light strips everywhere.\\n\\nCustom Cables\\n\\nA store like [this](https://www.etsy.com/shop/CustomCableCo) can hook you up with some really amazing custom cables that can help finish the look of your desk. These are one of the first things people will notice!\\n\\n## General Wrap Up Thoughts\\n\\n### Buying from Amazon\\n\\nIf you have a shopping history with them, buy through Amazon where possible. Their customer support generally will fix problems no questions asked, and often on lower priced items not even have you send them back. Always look for the Prime tag, avoid buying from Amazon Marketplace accounts or items tagged \\\"\\\"Fulfilled by Amazon.\\\"\\\"\\n\\nExpect buying through Amazon, you will eventually get a returned item.\\n\\n### Credit Card Perks\\n\\nThis really depends on what you have access to, but a high-end credit card like a [Sapphire Reserve](https://creditcards.chase.com/rewards-credit-cards/sapphire/reserve) will not only protect you against fraud, but also protect you against accidental damage. When we bought our [LG GX 65](https://www.lg.com/us/tvs/lg-oled65gxpua-oled-4k-tv) I cracked it when wall mounting it. Chase replaced the TV for us under their accidental damage policy (Caps out at ~10k.) Cards like Chase Sapphire Preferred can offer up to ~1k in accidental damage as well.\\n\\n(Aside: Save yourself some pain, never try to wall mount a large OLED yourself – [Replacing the display is more expensive than buying a new tv.](https://homeguide.com/costs/tv-repair-cost))\\n\","," \"body\": \"\\nIn the first part of this series, we'll take a look at all the hardware you might want when setting up your desk. We'll cover computers, peripherals, VC gear & audio, and more. In the later parts, we'll cover desk setup, ergonomics, and software!\\n\\n## The Gear\\n\\nI've compiled together a list of all the high-quality desk/work from home gear I've used or know of in one place (so you don't have to waste money on things that are not great!) This is the list I wish I had when I started building my setup!\\n\\nThese will skew towards the higher price range in these categories, but I'll try to include any budget options I know that are solid or I've personally tested. Generally, I'm looking at a balance of quality, aesthetic, and price range.\\n\\nI'll try to call out anything in this list that I haven't personally owned or used.\\n\\n### Computer\\n\\nYou probably already have one of these, but in case you are shopping around, here is what I recommend in 2021.\\n\\n##### Macs\\n\\n**_Edit: This was written before the M1X was launched. Don't invest in an M1 device over an M1X, even if it is a good amount cheaper._**\\n\\n[Macbook Air M1](https://www.apple.com/shop/buy-mac/macbook-air)\\n\\nThis is a beast of a machine, and the new M1 chip seems to be more or less living up to its hype. This is an excellent machine for most things – If you don't need to be running productivity or content creation software (Adobe, video editing, etc.) you probably don't need much more than this. Be aware that the SSDs in these machines can't be upgraded, so you will need to buy the size you need upfront.\\n\\nNote: If you plan to have more than one monitor or to run a monitor at 4K, I'd think about moving up to a...\\n\\n[Macbook Pro](https://www.apple.com/macbook-pro-16/)\\n\\nThese days, it isn't really worth moving up to a Macbook Pro unless you are doing some heavy creation work. Even design work can be done completely on the above M1 Air due to Figma and other web tools coming onto the scene. If you do need an MBP, don't buy a model made between 2016-2020 (these have the terrible [older MBP keyboards](https://www.theverge.com/2020/5/4/21246223/macbook-keyboard-butterfly-magic-pro-apple-designA).)\\n\\n[iMac](https://www.apple.com/imac/)\\n\\nIf you don't need to be on the go with your machine and want to combine in a monitor, iMacs are great. I honestly my good old iMac all the time.\\n\\nIf an iMac sounds good, I'd maybe recommend waiting, though, as I imagine we'll likely get an [iMac refresh](https://www.macrumors.com/roundup/imac/) pretty soon.\\n\\n##### PC – Laptop\\n\\nThese move so fast it is hard to keep up with. If you are looking to buy a laptop, I recommend [Dave2D's](https://www.youtube.com/channel/UCVYamHliCI9rw1tHR1xbkfw) channel. He covers the most notable ones in a straightforward and unbiased way.\\n\\nOtherwise, when in doubt, usually the [XPS 13](https://www.dell.com/en-us/shop/dell-laptops/xps-13-laptop/spd/xps-13-9310-laptop) is a good bet. Generally, [Razer Blades](https://www.razer.com/gaming-laptops/razer-blade) have an ok track record, but they are a bit more hit or miss than the XPS 13.\\n\\n##### PC – Desktop\\n\\nGenerally, your best bet will be to [put together a machine yourself](https://www.windowscentral.com/how-build-pc-ultimate-step-step-guide), but in 2021 this is a bit of a tall ask due to shortages being everywhere.\\n\\nI picked up [one of these](https://www.zotac.com/us/product/mini_pcs/magnus-one-ecm73070c-barebone) recently for our living room – it's an awesome little powerhouse (that makes a lot of noise.) Noise seems to be unimportant to some people and the most important thing to others. Make sure you do your research here on how much noise a PC will make if that matters to you, and probably avoid really small machines unless you are willing to get your hands dirty to bring down the volume.\\n\\nThe main thing to remember with PCs: smaller = more money, faster = more money, high end = mostly for bragging rights. Use a tool like [logical increments](https://www.logicalincrements.com/) to find the right price/performance ratio for you.\\n\\nOther desktop resources: [PC Part Picker](https://pcpartpicker.com/) | [SFF Subreddit](https://www.reddit.com/r/sffpc/) if you are looking to build a smaller machine.\\n\\n### Monitor\\n\\n[LG UltraFine 5K](https://www.amazon.com/gp/product/B07D24BQBQ/) – LG\\n\\n~850-1,299 (Price varies by sales + New vs Refurbished) – [Price History](https://camelcamelcamel.com/LG-UltraFine-Monitor-MacBook-Renewed/product/B07D24BQBQ)\\n\\nNot sure what the poor reviews are about here – I bought mine out of pocket (refurbished), I've been driving this monitor for 3 years now, and it's been solid. If you are using a Mac, use your laptop open with a monitor, and on-screen color matters, then this is the best option.\\n\\nOptions open up a bit more if you are willing to have non-OSX native color (this isn't overly noticeable as long as you don't use your laptop open, or are using a desktop-like a Mac Mini.)\\n\\n[BenQ EW3270U](https://www.amazon.com/gp/product/B078HWBGH5/) (32\\\"\\\", 4K) – BenQ\\n\\nMatte display, super large. I've daily driven these for a few years now and own two of them. IMO two of these are too big for a desk. If you want something pretty solid and are ok with slightly muted colors, these are a pretty good place to start. You probably want to arm mount these. (Make sure you are ok with how big they are.)\\n\\n#### Even Bigger?\\n\\nOnce you get over the 32\\\"\\\" range, you have two general directions you can go:\\n\\nThe first: Moving to an Ultrawide.\\n\\nThese are essentially 1.5-2 monitors side by side in a single monitor. They are great for working on multiple things at once, multiple code windows open at once, or playing games in a wide aspect ratio.\\n\\nThe second: Moving up to a TV.\\n\\nIn the past, TVs had pretty atrocious input lag and often couldn't match resolutions with higher-end monitors since they are meant to be viewed from a distance. More recently, in gaming mode good TVs tend to have great response times and the resolution to match.\\n\\nIf you go this route, I'd consider mounting the TV on the wall behind your desk or having a very deep desk. TVs are HOT and very bright. Using a TV for a long time sitting a short distance from your face will likely give you some serious eye strain.\\n\\nRegardless of which route you go, I'd recommend using some sort of window management software ([OSX](https://www.makeuseof.com/tag/best-mac-window-management-tools/) | [Windows](https://www.slant.co/topics/1249/~best-window-managers-for-windows)) at screen sizes this large. Programs don't tend to utilize this amount of space very well, so being able to set up quadrants is really helpful.\\n\\nI use [Magnet](https://apps.apple.com/us/app/magnet/id441258766?mt=12) on OSX generally.\\n\\n### Smaller monitor for VC\\n\\nI don't have a specific recommendation here, as most of these are from generic brands, but having a small (13~15\\\"\\\") portable monitor for second screen things like music, as well as a dedicated VC, is pretty handy. Ideally, one with VESA compatible mounting holes is ideal (like [this](https://www.banggood.com/PORPOISE-HT-1330XT-13_3-Inch-1080P-Type-C-Portable-Computer-Monitor-Gaming-Display-Screen-for-Smartphone-Tablet-Laptop-Game-Consoles-p-1666109.html?p=1D22009628395201703K&custlinkid=1507010&cur_warehouse=CN) one), so you can put it on a monitor arm or VESA stand. Your webcam/mic/etc can also sit on top of this to get a better angle.\\n\\nSomething like a [Portal](https://portal.facebook.com/products/) can also work here if you want a flexible, dedicated calling device. Downside: Not mountable. (Disclaimer: I've worked for Facebook, though not on Portal.)\\n\\n### Monitor Stands\\n\\n[Wood Desk Shelf](https://grovemade.com/product/wood-desk-shelf/?initial=342) – [Grovemade](https://grovemade.com/)\\n\\n[Wood Laptop Riser](https://grovemade.com/product/wood-laptop-riser/?initial=622) – [Grovemade](https://grovemade.com/)\\n\\nI'll bundle these together, but overall, Grovemade has excellent desktop accessories, including stands. The desk shelf will comfortably fit 2 large-ish monitors (~27in), and you can slide your keyboard or laptop underneath.\\n\\nThe laptop riser adds quite a bit of height, so you would want this to sit beside a monitor and a keyboard/mouse–not use it full time.\\n\\nThe quality of Grovemade products overall are top tier, and I know a lot of people that have these. You probably won't regret investing in these.\\n\\nThese are what I use on my desk today.\\n\\nIf you end up with both, one cool thing is the laptop stand is shaped perfectly that it can sit partially under the shelf, meaning you can line up your laptop screen with your monitor to the side.\\n\\n### Arms & Risers\\n\\nMore coming on these soon!\\n\\n### Keyboard\\n\\n[Das Professional 4 Keyboard](https://www.daskeyboard.com/daskeyboard-4-professional-for-mac/) – [daskeyboard](https://www.daskeyboard.com/)\\n\\nPrice: \\\\$169\\n\\nThis keyboard checks all the boxes for me – Not visually loud, has quiet options for mechanical keys, a physical knob for volume, media controls... You get the picture. The one thing that would make this keyboard perfect for me is a mute mic button, but I know that is asking a lot. I use the Cherry MX brown version, but if you want something louder/more clicky you can go with Blues.\\n\\nThis keyboard also has a [Windows version](https://www.daskeyboard.com/daskeyboard-4-professional/), and a [blank key version](https://www.daskeyboard.com/daskeyboard-4-ultimate/).\\n\\n[Generic Brand Mechanical](https://www.amazon.com/gp/product/B01E8KO2B0/)\\n\\nPrice: ~\\\\$30-50\\n\\nA super budget option – I was pretty impressed with this keyboard, Great form factor. Keys are mushy, so if that bugs you, I would avoid this one. I actually like the feel of these keys over many higher-end mechanical keyboards. I'd expect a 1-2 year lifespan out of something like this and no support if something goes wrong.\\n\\n[Logitech MX KEYS](https://www.logitech.com/en-us/products/keyboards/mx-keys-mac-wireless-keyboard.920-009552.html?crid=27)\\n\\nPrice: ~\\\\$99\\n\\nI haven't used these, but Logitech is doing some great things recently with their keyboards & mice. The MX series looks quite promising overall, and I think a single small universal USB for all devices will be quite appealing for many people.\\n\\nI'd recommend researching these if you just want something that works and will last quite a while.\\n\\n### Mouse\\n\\nMice are highly based on preference, like keyboards, so I'll just share what I have used.\\n\\n[Razer Death Adder](https://www.razer.com/gaming-mice/Razer-DeathAdder-V2/RZ01-03210100-R3U1) – Razer\\n\\nPrice: ~$50-$130 (Depends on wireless, buttons, etc.)\\n\\nI'm sure I'll lose some people over this, but the Death Adder is a solid daily driver – Some people rag on Razer, but I've been using one model or another of the death adder since 2008, and they have always served me well. I'd expect to replace these every 2-3 years (the build is solid, but they often end up double-clicking randomly later in their life, similar to a common issue with Logitech mice.)\\n\\n[Logitech MX Anywhere 3](https://www.logitech.com/en-us/products/mice/mx-anywhere-3-mac.910-005899.html)\\n\\nAs mentioned above, I haven't used this, but the new Logitech line looks quite promising. I'll probably check these out next.\\n\\nEdit: I did try the MX mice line. The new scroll wheel is love-it-or-hate-it for sure. (I really hated it.) Try this in a store before you buy one!\\n\\n##### Specialized\\n\\nSpaceMouse Pro 3D – 3DConnexion\\n\\nThis mouse is for 3D work primarily – if you do a lot of 3D modeling and can get used to the idea of physically navigating 3D space, this will be a HUGE time-saver for you. I never could get into the right mental model to navigate like this, but I was very impressed with the device itself.\\n\\nMacro Pads (Example: [Razer Tartarus](https://www.amazon.com/Razer-Tartarus-Progammable-Detachable-Mecha-Membrane/dp/B07754PYFK/))\\n\\nThere is a huge variety of these, but if your workflow would benefit from a place to map macros, these could be useful. I haven't used this specific one, but in my experience, Razer's software for mapping macros is pretty straightforward.\\n\\n### Mousepads & Desk Covers\\n\\nI haven't found my perfect mouse pad yet, but I tend to prefer large, desk cover style ones that the keyboard also sits on. This avoids the awkwardness and physical wear of dragging your arm over the edge of the mouse pad occasionally and also looks better. I've bought a few of these from Amazon in the past few years, but nothing has really stood out.\\n\\nI'll probably try one of these next:\\n\\n[Matte Desk Pad](https://grovemade.com/product/matte-desk-pad/?initial=534) – Grovemade\\n\\nI haven't owned this particular desk pad, but I feel comfortable enough with Grovemade's other products to recommend this one blind. I'd personally avoid the wool ones, I have one of those and I tend to find it a bit scratchy on the skin while mousing around but YMMV.\\n\\n[Orbitkey Desk Mat](https://www.orbitkey.com/collections/orbitkey-desk-mat/products/orbitkey-desk-mat?variant=32750570471520) – Orbitkey\\n\\nPrice: \\\\$65\\n\\nI haven't owned this one either, but it looks pretty solid, and the cable holder is a big plus to me.\\n\\n### Audio\\n\\n[Airpods](https://www.apple.com/shop/select-airpods)/[Airpods Pro](https://www.apple.com/shop/product/MWP22AM/A/airpods-pro) – Apple\\n\\nPrice: $149/$249\\n\\nI've tried a ton of headphones, and honestly, for meetings and passive listening, nothing really beats the Airpods. Obviously, sound quality isn't the priority here, but the device switching convenience and auto-pause when removing a single side is great. I prefer the shape of the regular Airpods over the pros, and I actually prefer that they don't noise cancel. If you need noise canceling to work, go with the Pros.\\n\\nI don't really use the wireless charging case, but it probably isn't needed if you are on a budget.\\n\\nThe Max are ok as well... IMO, The Sony XM series are better overhead earphones, and the one below this is way more affordable.\\n\\n[AT ATH-M50X](https://www.amazon.com/gp/product/B00HVLUR86/) – Audio-Technica\\n\\nPrice: ~\\\\$120\\n\\nThe classic. You probably know at least one person with pair of headphones or have seen someone on TV wearing them, and for a good reason. These are great, solid, unoffensive headphones. \\\"\\\"Neutral\\\"\\\" describes their sound well. If you need something reasonably priced and high quality, there is a good place to start. There are tons of detailed reviews on the amazon page, so I won't write much more here. (Note: Some people in the reviews recommend trying after-market ear cups on these. I haven't done this on either pair of these that I have, but it could be good to look into.)\\n\\nThere is apparently a Bluetooth version of these available now – I can't speak to them but they might be worth trying out.\\n\\n[WH-1000XM3](https://www.sony.com/electronics/headband-headphones/wh-1000xm3) – Sony\\n\\nPrice: \\\\$349\\n\\nThese are the ones I own – I'm not sure why the XM4s are both cheaper (~\\\\$250) and have worse reviews, but these are pretty good. (Gross note: These ear cups tend to gather sweat a decent amount when worn for a few hours.)\\n\\nWhile I bought these for working at my desk, the real place they shine is on long flights. With the noise canceling on you, basically forget anyone else is on the plane with you. It more or less completely removes cabin noise.\\n\\nOverall, if you are just using these as desk headphones, I'd go either cheaper and wired, or with the Airpod Pros.\\n\\n### Headphone Stands\\n\\nOverall, this is one area I haven't explored too much. I'll come back and add to this as I do more research and choose something.\\n\\n[Uppr Zero headphone stand](https://gouppercase.com/products/zero).\\n\\nI don't own this one, but this is a pretty unique & beautiful headphone stand with an all-aluminum build.\\n\\n### Video\\n\\n##### Lower End\\n\\n[Logitech C922 Pro](https://www.logitech.com/en-us/products/webcams/c922-pro-stream-webcam.960-001087.html?crid=34) – [Logitech](https://www.logitech.com/en-us/webcams)\\n\\n~\\\\$100\\n\\nThis is a pretty unoffensive option for a starter webcam. For most cases, this will give you an upgrade to your video and audio quality without breaking the bank.\\n\\nAlso promising:\\n\\n[Software](https://apps.apple.com/us/app/epoccam-webcam-for-mac-and-pc/id449133483) + A Phone\\n\\nThis is becoming a more popular option, and the results are pretty good. You can get high-quality video out of your phone that you might already have. It can be a bit of a hassle to set up and take down your phone daily, but it is an option.\\n\\n[Moment](https://www.shopmoment.com/) has also been kicking off a promising [Magsafe line](https://www.shopmoment.com/magsafe) for mounting. This might be helpful with this type of approach.\\n\\n##### Higher End\\n\\nDSLR/Mirrorless + Capture Card\\n\\nPrice: _~\\\\$300 all the way to tens of thousands_\\n\\nWhat most people you see with \\\"\\\"amazing\\\"\\\" looking video quality/youtube videos are using. There are _way_ to many options to get into here. I'm in the Sony ecosystem, so I'd recommend something like the a5100, a6300~ or Alpha 7C (these range from ~300-1.7k)\\n\\nI'll link to [a post like this](https://www.epiphan.com/blog/best-cameras-for-live-streaming/) and let you dive in further.\\n\\n[Pi HD Cam](https://www.raspberrypi.org/products/raspberry-pi-high-quality-camera/) – [Raspberry Pi](https://www.raspberrypi.org/)\\n\\nThis is a pretty cool + hacker-friendly option. The lenses it uses are inexpensive CCTV lenses as well. I'm hoping to write up a post on creating a VC setup using the Raspberry Pi at some point, so I'll revisit this then!\\n\\n### Accessories\\n\\n[CalDigit TS3 Plus Thunderbolt 3 Dock](https://www.caldigit.com/ts3-plus/) – [CalDigit](https://www.caldigit.com/)\\n\\n(~\\\\$230+)\\n\\nIf you buy a single high-end accessory for your desk, this is the one I would recommend.\\n\\nFlawless connectivity across multiple monitors, high-quality USB, card reader and full power even for 16\\\"\\\" 100W Macbook Pros. I've used my for the past 4 years and I've never had a single issue with it, and know at least 15 people who all have had a similar experience. This is the baseline for high-quality tech.\\n\\n(I've read some reports of people having issues with these and their Macbook Pros. I was surprised to hear this, as I know many, many people with these that have never had any issues, but once again YMMV.)\\n\\nCaldigit has a few other options these days for docks – you can see if a different one meets your needs better, but I do recommend something with it's own power source, not something that pulls power from the laptop.\\n\\nOverall, if the price doesn't put it completely out of your budget, this is a really solid building block for your desk setup.\\n\\n[Under desk volume knob and macro keyboard](https://www.pikatea.com/collections/products/products/pikatea-macropad-gb2).\\n\\nI haven't had a chance to try this yet, but I've been looking to buy something like this for years. The keys act as a bindable macro keyboard, and the knob works by default for volume and mute/unmute. Looking forward to picking one of these up to see if I can turn it into a hardware remote for Video Conferencing.\\n\\n[Yeelight – LED Light Bar Pro](https://en.yeelight.com/product/1512.html).\\n\\nThis sits on top of your monitor and illuminates the whole desk surface evenly without adding glare to the monitor.\\n\\nThis one is pretty good; my only complaints are 1) it is pretty wobbly when you go to press the buttons and 2) the buttons are capacitive. I'd eventually like to replace this with something more sturdy with physical buttons.\\n\\nIt is pretty amazing how much it illuminates on the desk without washing out the screen. One thing of note, it fights for physical real estate with your webcam. Mine is awkwardly stacked on top, but I'd love a better solution.\\n\\n### Chair\\n\\nMore coming on these soon!\\n\\nI'm using an Aeron right now, but I'm not convinced this is as good as it gets, and likely a really good chair setup can be had for far less than what and Aeron costs.\\n\\nWill return as I research and learn more.\\n\\n### Wifi/Networking\\n\\n#### Ethernet\\n\\nIf you don't have a dock with Ethernet, at least some sort of small USB-C to Ethernet dongle is a must-have ([Example cheap on](https://www.amazon.com/gp/product/B07VPMPT6M/)e, I have this one and it works fine.)\\n\\n#### Wifi\\n\\nThis deserves it's own post, probably, but if you want something you plug in and it works, I'd look into something like [Nest Wifi](https://store.google.com/us/product/nest_wifi?hl=en-US) or [Erro](https://eero.com/shop).\\n\\nThese are easy to use and troubleshoot and are systems you can build on as you need more.\\n\\nIf you want to start by buying into the upper end of systems, you can build you can start with something like [this](https://store.ui.com/collections/unifi-network-unifi-os-consoles/products/unifi-dream-machine) and expand as you go.\\n\\nA Ubiquiti setup is going to be on the upper end of where you can go without going full enterprise tier, and the setup isn't overly complicated.\\n\\nTheir access points start at a [super reasonable price](https://store.ui.com/products/unifi-ap-6-lite) and you can keep expanding this system almost infinitely. You can also plug-in cameras, door access systems and more in, similar to Nest, but it all runs local on your network rather than sending data to a third party.\\n\\nEdit: After using a Ubiquiti setup for the past ~1 year, I'd say MOST people are going to do better with a Google Wifi (or comparable) mesh wifi setup and a big network switch. Even if you want to run cameras, etc, you are probably better off using Homebridge and various cameras.\\n\\n### Extras\\n\\nI haven't tried any of the below, but I'll here are some of the things I'm interested in checking out next.\\n\\n[Grommet USB Hub](https://www.amazon.com/ORICO-Desk-USB-HUB/dp/B0863KCTFZ/ref=as_li_ss_tl?dchild=1&keywords=orico%2Bdesk%2Bgrommet&qid=1603851450&sr=8-1&linkCode=sl1&tag=minimalistik-20&linkId=5c5001a8363b68a8e6217aed8ba31bc6&language=en_US&th=1) – Generic\\n\\nThis is a pretty cool idea – I already use grommet holes to run cables from the top of my desk to the bottom; adding a hub here for things like headphones and quick USB access is pretty handy.\\n\\n#### Accent Lighting\\n\\n[Corsair iCUE LT100](https://www.corsair.com/us/en/Categories/Products/Ambient-Lighting/iCUE-LT100-Smart-Lighting-Towers-Starter-Kit/p/CD-9010002-NA) – Corsair\\n\\nThese seem like a nice way to add lighting to your desk (if you are into that kind of thing) without sticking light strips everywhere.\\n\\nCustom Cables\\n\\nA store like [this](https://www.etsy.com/shop/CustomCableCo) can hook you up with some really amazing custom cables that can help finish the look of your desk. These are one of the first things people will notice!\\n\\n## General Wrap Up Thoughts\\n\\n### Buying from Amazon\\n\\nIf you have a shopping history with them, buy through Amazon where possible. Their customer support generally will fix problems no questions asked, and often on lower priced items not even have you send them back. Always look for the Prime tag, avoid buying from Amazon Marketplace accounts or items tagged \\\"\\\"Fulfilled by Amazon.\\\"\\\"\\n\\nExpect buying through Amazon, you will eventually get a returned item.\\n\\n### Credit Card Perks\\n\\nThis really depends on what you have access to, but a high-end credit card like a [Sapphire Reserve](https://creditcards.chase.com/rewards-credit-cards/sapphire/reserve) will not only protect you against fraud, but also protect you against accidental damage. When we bought our [LG GX 65](https://www.lg.com/us/tvs/lg-oled65gxpua-oled-4k-tv) I cracked it when wall mounting it. Chase replaced the TV for us under their accidental damage policy (Caps out at ~10k.) Cards like Chase Sapphire Preferred can offer up to ~1k in accidental damage as well.\\n\\n(Aside: Save yourself some pain, never try to wall mount a large OLED yourself – [Replacing the display is more expensive than buying a new tv.](https://homeguide.com/costs/tv-repair-cost))\\n\""," \"slug\": \"picking-your-home-office-tech\","," \"title\": \"Picking Your Home Office Tech\","," \"uuid\": \"91370aaa-68b8-4756-a3d7-2d1c84b00cd8\","," \"url\": \"2020-05-31-free-speech-and-our-responsibility\""," \"body\": \"\\nDoing nothing isn't Being Bold.\\n\\nWhere is the line between responsibility and censorship?\\n\\nLike everything, this probably isn't a solid line but actually more of a gradation.\\n\\nWorking at FB this is something I think about constantly, especially since the outcome of the 2016 election. Joining Facebook as a starry-eyed new grad, I came in wanting to make the world a better place. My goal at FB was always to bring a little bit of extra fun and joy to the world.\\n\\nLittle did I know what I was getting myself in to...\\n\\n## Thoughts on Free Speech\\n\\nI don't have an answer to what the right solution is here – But my stance leans towards this leans towards this:\\n\\nUltimately Facebook is a private platform, and I think we should do what we can proactively to curb hate speech, threats of violence, and the spread of misinformation.\\n\\nI will always believe that we should foster conversation that moves the world toward being a better place. It's not for us to decide what is right and wrong, but that doesn't mean we shouldn't have values.\\n\\nI realize it isn't this simple, however. I believe by treating companies like FB, Twitter the same as speech we inadvertently create a false equivalence between the two.\\n\\nA platform should set its own rules – Where this often becomes a problem is that those rules should be clearly defined and upheld. I'm also not sure we know as a people how to moderate content on the scale of billions (especially without leaning into AI, which has it's own bias issues as well.)\\n\\nI think this will grow into one of the larger challenges we face as platforms continue to scale.\\n\\nI think we have a long, long way to go in this space, and the edges of speech on social media will continue to be pushed. As I said above, I don't have a solution here but I think we have to continue to try rather than absolve any say in what is on our platforms.\\n\\n## Our Responsibility\\n\\nThat being said, people, and especially designers in my opinion, have a responsibility to evaluate the impact of their work on the world and own that. The way things are built at Facebook really doesn't encourage designers to do this, as often they have been working on another project for many months, potentially even at another team at the company.\\n\\nOften by the time problems arise, the team that built that product no longer exists, or all the people that have worked on it have moved on. I'm not really sure how we improve here in a space that encourages quick wins over long range support and experiential improvement, but I think we have a responsibility to try.\\n\\nA start would be to review the failures of the product as growth opportunities the same way we evaluate potential growth from a metrics perspective.\\n\\nAs I've said many times here, I don't know the solution here. I hope as designers we can start with scaling our own impact beyond just shipping products to evaluating their long term impacts on the people that use them.\\n\","," \"body\": \"\\nDoing nothing isn't Being Bold.\\n\\nWhere is the line between responsibility and censorship?\\n\\nLike everything, this probably isn't a solid line but actually more of a gradation.\\n\\nWorking at FB this is something I think about constantly, especially since the outcome of the 2016 election. Joining Facebook as a starry-eyed new grad, I came in wanting to make the world a better place. My goal at FB was always to bring a little bit of extra fun and joy to the world.\\n\\nLittle did I know what I was getting myself in to...\\n\\n## Thoughts on Free Speech\\n\\nI don't have an answer to what the right solution is here – But my stance leans towards this leans towards this:\\n\\nUltimately Facebook is a private platform, and I think we should do what we can proactively to curb hate speech, threats of violence, and the spread of misinformation.\\n\\nI will always believe that we should foster conversation that moves the world toward being a better place. It's not for us to decide what is right and wrong, but that doesn't mean we shouldn't have values.\\n\\nI realize it isn't this simple, however. I believe by treating companies like FB, Twitter the same as speech we inadvertently create a false equivalence between the two.\\n\\nA platform should set its own rules – Where this often becomes a problem is that those rules should be clearly defined and upheld. I'm also not sure we know as a people how to moderate content on the scale of billions (especially without leaning into AI, which has it's own bias issues as well.)\\n\\nI think this will grow into one of the larger challenges we face as platforms continue to scale.\\n\\nI think we have a long, long way to go in this space, and the edges of speech on social media will continue to be pushed. As I said above, I don't have a solution here but I think we have to continue to try rather than absolve any say in what is on our platforms.\\n\\n## Our Responsibility\\n\\nThat being said, people, and especially designers in my opinion, have a responsibility to evaluate the impact of their work on the world and own that. The way things are built at Facebook really doesn't encourage designers to do this, as often they have been working on another project for many months, potentially even at another team at the company.\\n\\nOften by the time problems arise, the team that built that product no longer exists, or all the people that have worked on it have moved on. I'm not really sure how we improve here in a space that encourages quick wins over long range support and experiential improvement, but I think we have a responsibility to try.\\n\\nA start would be to review the failures of the product as growth opportunities the same way we evaluate potential growth from a metrics perspective.\\n\\nAs I've said many times here, I don't know the solution here. I hope as designers we can start with scaling our own impact beyond just shipping products to evaluating their long term impacts on the people that use them.\\n\""," \"date_created\": \"2020-05-31T00:00:00.000Z\","," \"slug\": \"free-speech-and-our-responsibility\","," \"title\": \"Free Speech & Our Responsibility\","," \"uuid\": \"fcfc143f-591a-4f35-b943-72ca4bb0784e\","," \"url\": \"2019-11-26-juice-for-audiobooks\""," \"body\": \"\\n## Designing a audibook player for people with their own files.\\n\\nEarlier this year I was about a year into my Audiobook crazy, consuming a couple of books a week at least. I went down a huge Sci-fi rabbit hole!\\n\\nUnfortunuately, there isn't a lot of options though if you don't want to either use Libby or stick with Audible.\\n\\nI started reviving JUICE as an audiobook player where people could bring their own files. The audiobook landscape is pretty scattered, and not everyone wants to be tied to Audible and Amazon. Here you could connect a google drive, dropbox, etc and build your library.\\n\\nI wanted to focus to be more around series, building out a robust model for handing series with complex orders and multiple reading orders, etc.\\n\\nThis is how far I got:\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd1a1aa1b182021bb3eea_Screen%20Shot%202021-03-12%20at%2012.38.08%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd1b27caca82c5ab5e9cb_Screen%20Shot%202021-03-12%20at%2012.38.18%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd1c09c9a8b3b24dd96c0_Screen%20Shot%202021-03-12%20at%2012.38.30%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd1cc55e121521c7bd0fe_Screen%20Shot%202021-03-12%20at%2012.39.14%20PM.png)\\n\","," \"body\": \"\\n## Designing a audibook player for people with their own files.\\n\\nEarlier this year I was about a year into my Audiobook crazy, consuming a couple of books a week at least. I went down a huge Sci-fi rabbit hole!\\n\\nUnfortunuately, there isn't a lot of options though if you don't want to either use Libby or stick with Audible.\\n\\nI started reviving JUICE as an audiobook player where people could bring their own files. The audiobook landscape is pretty scattered, and not everyone wants to be tied to Audible and Amazon. Here you could connect a google drive, dropbox, etc and build your library.\\n\\nI wanted to focus to be more around series, building out a robust model for handing series with complex orders and multiple reading orders, etc.\\n\\nThis is how far I got:\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd1a1aa1b182021bb3eea_Screen%20Shot%202021-03-12%20at%2012.38.08%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd1b27caca82c5ab5e9cb_Screen%20Shot%202021-03-12%20at%2012.38.18%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd1c09c9a8b3b24dd96c0_Screen%20Shot%202021-03-12%20at%2012.38.30%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd1cc55e121521c7bd0fe_Screen%20Shot%202021-03-12%20at%2012.39.14%20PM.png)\\n\""," \"date_created\": \"2019-11-26T00:00:00.000Z\","," \"slug\": \"juice-for-audiobooks\","," \"title\": \"Juice for Audiobooks\","," \"uuid\": \"9c1c8b3a-8334-49c7-ab7a-90dc51083cf6\","," \"url\": \"2019-05-03-launching-facebook-avatars\""," \"body\": \"\\nToday Facbook launched [a test of Facebook Avatars](https://www.theverge.com/2019/6/3/18650685/facebook-avatar-messenger-newsfeed-bitmoji) publicly! I worked on Avatars for around 2.5 years, so it is exciting to see it finally getting into the wild.\\n\\nI never would have imagined the complexity and amount of difficult decisions it takes to get a system like this off the ground. I have a lot of respect for all the teams out there working on likeness systems for people.\\n\\nWe have such a long way to go towards representing the incredibly diverse and special population of the world, and I wish we could have won more of the fights towards further representation towards disabilities before launching.\\n\\nHowever, this is the first leg of the race, not crossing the finish line. I'm so incredibly proud of this team and can't wait to see this product evolve over time.\\n\\nEven before I joined, this was the project I wanted to start. I believe that the unique position that Facebook is in makes a virtual identity a powerful thing if done responsibly. From adding an extra layer of expression to people's content to giving people safety to post what they want in places they can't show their faces, Avatars can unlock new ways for people to use Facebook that enriches their lives. My goal being at Facebook has always been to bring a bit of joy and fun into the world, and I hope this does that even a little for people.\\n\","," \"body\": \"\\nToday Facbook launched [a test of Facebook Avatars](https://www.theverge.com/2019/6/3/18650685/facebook-avatar-messenger-newsfeed-bitmoji) publicly! I worked on Avatars for around 2.5 years, so it is exciting to see it finally getting into the wild.\\n\\nI never would have imagined the complexity and amount of difficult decisions it takes to get a system like this off the ground. I have a lot of respect for all the teams out there working on likeness systems for people.\\n\\nWe have such a long way to go towards representing the incredibly diverse and special population of the world, and I wish we could have won more of the fights towards further representation towards disabilities before launching.\\n\\nHowever, this is the first leg of the race, not crossing the finish line. I'm so incredibly proud of this team and can't wait to see this product evolve over time.\\n\\nEven before I joined, this was the project I wanted to start. I believe that the unique position that Facebook is in makes a virtual identity a powerful thing if done responsibly. From adding an extra layer of expression to people's content to giving people safety to post what they want in places they can't show their faces, Avatars can unlock new ways for people to use Facebook that enriches their lives. My goal being at Facebook has always been to bring a bit of joy and fun into the world, and I hope this does that even a little for people.\\n\""," \"date_created\": \"2019-05-02T23:00:00.000Z\","," \"slug\": \"launching-facebook-avatars\","," \"title\": \"Launching Facebook Avatars\","," \"uuid\": \"590f9528-a367-41a7-a382-7f4e110334fb\","," \"url\": \"2019-03-19-watercooling-a-playstation-4\""," \"body\": \"\\n## Concepting out a custom, watercooled PS4\\n\\nI had every intention of making this a reality! Once I found out about the PS5 coming I decided to put this project on hold and work on one for the next generation :) Of course, getting ahead of myself, I have many of the watercooling parts already ready to go in a drawer in my office...\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bccb165053b140d981d98_IMG_0203.png)\\n\\nFist concept sketches in Procreate on iPad.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bcccca78c76365a54648a_IMG_0204.png)\\n\\nStarted working on doing some higher quality drawings. Technical drawing is so cool to me – It's a skill I would really love to learn eventually.\\n\\nI pulled apart my PS4 to get a better understanding of the sizes of the parts that I would need to design around. There isn't a lot of wasted space, mostly just a cutout for the 2.5\\\" HDD/SSD.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bccf79e56a08debafb165_IMG_1140.jpeg)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bcd0784cbd6084eac0101_IMG_1143.jpeg)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bcd15d2261f40108f8640_IMG_1146.jpeg)\\n\\nThe actual GPU/CPU combo is tiny!\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd074aeff3eed177ee3f4_Screen%20Shot%202021-03-12%20at%2012.34.29%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd08cc4c38455ed7606cd_Custom%20PS4%20Scrap.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd09acc008303441c40ec_Screen%20Shot%202019-12-22%20at%206.55.05%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd0afd1987f377f0810c1_Screen%20Shot%202019-12-22%20at%206.55.31%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd0bb7a2c85e0187ad29d_Screen%20Shot%202019-12-22%20at%206.55.55%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604595933ae2c8a437fd5a7b_D2C46A7UkAAkizd.jpeg)\\n\\nThe most complete render I got to. My plan was to 3D print the metal parts, and cut the glass/acrylic myself. (Also, add a bunch of USB up front! Like the 4 front controller ports on consoles like the Gamecube.)\\n\","," \"body\": \"\\n## Concepting out a custom, watercooled PS4\\n\\nI had every intention of making this a reality! Once I found out about the PS5 coming I decided to put this project on hold and work on one for the next generation :) Of course, getting ahead of myself, I have many of the watercooling parts already ready to go in a drawer in my office...\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bccb165053b140d981d98_IMG_0203.png)\\n\\nFist concept sketches in Procreate on iPad.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bcccca78c76365a54648a_IMG_0204.png)\\n\\nStarted working on doing some higher quality drawings. Technical drawing is so cool to me – It's a skill I would really love to learn eventually.\\n\\nI pulled apart my PS4 to get a better understanding of the sizes of the parts that I would need to design around. There isn't a lot of wasted space, mostly just a cutout for the 2.5\\\" HDD/SSD.\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bccf79e56a08debafb165_IMG_1140.jpeg)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bcd0784cbd6084eac0101_IMG_1143.jpeg)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bcd15d2261f40108f8640_IMG_1146.jpeg)\\n\\nThe actual GPU/CPU combo is tiny!\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd074aeff3eed177ee3f4_Screen%20Shot%202021-03-12%20at%2012.34.29%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd08cc4c38455ed7606cd_Custom%20PS4%20Scrap.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd09acc008303441c40ec_Screen%20Shot%202019-12-22%20at%206.55.05%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd0afd1987f377f0810c1_Screen%20Shot%202019-12-22%20at%206.55.31%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bd0bb7a2c85e0187ad29d_Screen%20Shot%202019-12-22%20at%206.55.55%20PM.png)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604595933ae2c8a437fd5a7b_D2C46A7UkAAkizd.jpeg)\\n\\nThe most complete render I got to. My plan was to 3D print the metal parts, and cut the glass/acrylic myself. (Also, add a bunch of USB up front! Like the 4 front controller ports on consoles like the Gamecube.)\\n\""," \"date_created\": \"2019-03-19T00:00:00.000Z\","," \"slug\": \"watercooling-a-playstation-4\","," \"title\": \"Watercooling A Playstation 4?\","," \"uuid\": \"e0cd0ca1-8955-4606-8dce-123259459c11\","," \"url\": \"2018-11-15-printing-jewelry\""," \"body\": \"\\nMy wife is a huge Kingdom Hearts fan, so once I discovered that 3D printing metal was not only possible, but also not overly expensive, I decided I'd make her a custom Keyblade piece.\\n\\n## Sketching\\n\\nI started by sketching in procreate using some various key + kingdom hearts references. Sketching right on the iPad with the pencil always feels super good for this part of the process. The portability is great – I actually ended up sketching these on a flight from San Francisco to St. Louis.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936180/post/3d-jewelry/IMG_0217_jjuypc.jpg)\\nSome of the concept sketches. Being a personal piece, there are all sorts of hidden meanings in the symbols here.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936179/post/3d-jewelry/IMG_0218_tni82m.jpg)\\nA shading pass to work out texture, feel and weight a bit. Love the way this came out. Reminds me of Majora's Mask :) Happy accidents!\\n\\n## 3D Renders\\n\\nI'll try to remember to come back and post some of my exploratory sketches, but jumping right to how the renders came out:\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936635/post/3d-jewelry/604588753fdb244e04e47e20_emc_test_gbn1xy.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936635/post/3d-jewelry/604588f4a750bf39b64f0c2e_1432_c0s7gd.jpg)\\n\\nThese were rendered using C4D + Octane. Material-wise, I think a few of the materials are from one of the GSG material packs. I tend to prefer to make all my own metal materials, as it is quite fun to tinker with all the exact values.\\n\\n## Prototyping\\n\\nFirst I printed a cheap plastic copy to get a feel for the size and iterate on some small details.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936638/post/3d-jewelry/60458ad47914e40a5f9786c6_IMG_0460_rdrjfk.jpg)\\n\\nThe prototype was printed in a smooth fine detail plastic for around $10. I was glad I printed a prototype first, as the wheel spokes in the design ended up looking far too fine in the printed design. I ended up going back to the model and beefing them up a bit.\\n\\n## Final Prints\\n\\nI printed the final key through [Shapeways](https://www.shapeways.com/) and found a chain to match.\\n\\nThe final print was in a rose gold plated brass, and ended up costing around $34. Not bad at all! It was on my doorstep within two weeks of hitting order as well, which is super reasonable.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936635/post/3d-jewelry/60458a217f4f0738e4383d9e_IMG_0531_tmqyoc.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936639/post/3d-jewelry/60458aa42205df690e2e48cd_ezgif-2-e53e6f075123_small_mfzgbe.gif)\\n\\nIt feels pretty awesome to hold the cold metal of a physical object that you designed entirely in 3D. I definitely plan on coming back and exploring this space further.\\n\","," \"body\": \"\\nMy wife is a huge Kingdom Hearts fan, so once I discovered that 3D printing metal was not only possible, but also not overly expensive, I decided I'd make her a custom Keyblade piece.\\n\\n## Sketching\\n\\nI started by sketching in procreate using some various key + kingdom hearts references. Sketching right on the iPad with the pencil always feels super good for this part of the process. The portability is great – I actually ended up sketching these on a flight from San Francisco to St. Louis.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936180/post/3d-jewelry/IMG_0217_jjuypc.jpg)\\nSome of the concept sketches. Being a personal piece, there are all sorts of hidden meanings in the symbols here.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936179/post/3d-jewelry/IMG_0218_tni82m.jpg)\\nA shading pass to work out texture, feel and weight a bit. Love the way this came out. Reminds me of Majora's Mask :) Happy accidents!\\n\\n## 3D Renders\\n\\nI'll try to remember to come back and post some of my exploratory sketches, but jumping right to how the renders came out:\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936635/post/3d-jewelry/604588753fdb244e04e47e20_emc_test_gbn1xy.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936635/post/3d-jewelry/604588f4a750bf39b64f0c2e_1432_c0s7gd.jpg)\\n\\nThese were rendered using C4D + Octane. Material-wise, I think a few of the materials are from one of the GSG material packs. I tend to prefer to make all my own metal materials, as it is quite fun to tinker with all the exact values.\\n\\n## Prototyping\\n\\nFirst I printed a cheap plastic copy to get a feel for the size and iterate on some small details.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936638/post/3d-jewelry/60458ad47914e40a5f9786c6_IMG_0460_rdrjfk.jpg)\\n\\nThe prototype was printed in a smooth fine detail plastic for around $10. I was glad I printed a prototype first, as the wheel spokes in the design ended up looking far too fine in the printed design. I ended up going back to the model and beefing them up a bit.\\n\\n## Final Prints\\n\\nI printed the final key through [Shapeways](https://www.shapeways.com/) and found a chain to match.\\n\\nThe final print was in a rose gold plated brass, and ended up costing around $34. Not bad at all! It was on my doorstep within two weeks of hitting order as well, which is super reasonable.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936635/post/3d-jewelry/60458a217f4f0738e4383d9e_IMG_0531_tmqyoc.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936639/post/3d-jewelry/60458aa42205df690e2e48cd_ezgif-2-e53e6f075123_small_mfzgbe.gif)\\n\\nIt feels pretty awesome to hold the cold metal of a physical object that you designed entirely in 3D. I definitely plan on coming back and exploring this space further.\\n\""," \"date_created\": \"2018-11-15T00:00:00.000Z\","," \"slug\": \"printing-jewelry\","," \"title\": \"Printing Jewelry\","," \"uuid\": \"ddb7edd5-c1ef-49c7-9b4f-4242a197717d\","," \"url\": \"2017-12-20-inspo-2017\""," \"body\": \"\\n## All the images that inspired me this year.\\n\\nI like to keep a running album of my creative inspiration throughout the year. It is cool to look back on overall, and I find I continue to pull from these references even years later.\\n\\nMy inspiration this year leaned heavily towards the 3D – I started learning 3D this year and was trying to absorb as much from others and the world around me as possible.\\n\\nI didn't go a good enough job of tracking all my sources this year, I've started logging these as I go to make sure I can credit them in the future.\\n\\nA few select below. View the full set here: https://goo.gl/photos/qeTYKqGErL45REbW7\\n\\n![Ash Thorp – NONE](/static/img/post/attachments/inspo-2017/ash-thorp_none.jpg)\\n![Color Factory – San Francisco 2017](/static/img/post/attachments/inspo-2017/color-factory_san-francisco-2017.jpg)\\n![Ghost in the Shell – 1995](/static/img/post/attachments/inspo-2017/Ghost-in-the-Shell-1995.jpg)\\n![Shirley Liang – Unknown](/static/img/post/attachments/inspo-2017/shirley-liang_unknown.jpg)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-1.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-4.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-5.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-6.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-7.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-8.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-9.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-10.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-11.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-12.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-13.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-14.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-15.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-16.png)\\n![Various – Ghost in the Shell Artbook](/static/img/post/attachments/inspo-2017/various_ghost-in-the-shell-artbook.jpg)\\n\\nYou can check out the rest of the set here: https://goo.gl/photos/qeTYKqGErL45REbW7\\n\\nIf I missed credit for a piece that you know please let me know so I can add it. Eternally grateful for all the incredible makers that inspire me every day 🙏🏽\\n\","," \"body\": \"\\n## All the images that inspired me this year.\\n\\nI like to keep a running album of my creative inspiration throughout the year. It is cool to look back on overall, and I find I continue to pull from these references even years later.\\n\\nMy inspiration this year leaned heavily towards the 3D – I started learning 3D this year and was trying to absorb as much from others and the world around me as possible.\\n\\nI didn't go a good enough job of tracking all my sources this year, I've started logging these as I go to make sure I can credit them in the future.\\n\\nA few select below. View the full set here: https://goo.gl/photos/qeTYKqGErL45REbW7\\n\\n![Ash Thorp – NONE](/static/img/post/attachments/inspo-2017/ash-thorp_none.jpg)\\n![Color Factory – San Francisco 2017](/static/img/post/attachments/inspo-2017/color-factory_san-francisco-2017.jpg)\\n![Ghost in the Shell – 1995](/static/img/post/attachments/inspo-2017/Ghost-in-the-Shell-1995.jpg)\\n![Shirley Liang – Unknown](/static/img/post/attachments/inspo-2017/shirley-liang_unknown.jpg)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-1.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-4.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-5.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-6.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-7.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-8.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-9.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-10.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-11.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-12.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-13.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-14.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-15.png)\\n![Unknown – Unknown](/static/img/post/attachments/inspo-2017/unknown_unknown-16.png)\\n![Various – Ghost in the Shell Artbook](/static/img/post/attachments/inspo-2017/various_ghost-in-the-shell-artbook.jpg)\\n\\nYou can check out the rest of the set here: https://goo.gl/photos/qeTYKqGErL45REbW7\\n\\nIf I missed credit for a piece that you know please let me know so I can add it. Eternally grateful for all the incredible makers that inspire me every day 🙏🏽\\n\""," \"date_created\": \"2017-12-20T00:00:00.000Z\","," \"slug\": \"inspo-2017\","," \"title\": \"Inspo 2017\","," \"uuid\": \"29c16a02-af00-48fa-9223-1522ec3a521e\","," \"url\": \"2017-12-07-facebookdesign-device-wallpapers\""," \"body\": \"\\nI created a series of wallpapers for the facebook.design site using C4D & Octane Render. It was cool to get to flex some 3D muscle for work, since my day to day generally doesn't get to touch this. Hope to get to explore this space much further in the future.\\n\\nCheck them out here:\\n\\n- [iOS 11 GUI](https://design.facebook.com/toolsandresources/ios-11-iphone-gui/)\\n- [Download directly](https://drive.google.com/file/d/16em0EMSvXmxKbJW1nP1GS25zTOMBPShh/view?usp=sharing)\\n- [On Twitter](https://twitter.com/iamnbutler/status/940640473227526144)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc60b2b4bbb5405568859_explorations3_1sfs.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6101c103c9d2416a18e_Mainexplorations3_2export0015.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc629c9faa40f65e13fe2_organic_1_12.png)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc634c9faa4d7b5e13feb_fabric_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc634aed5e2b47d274a25_geometric_3.jpg)\\n![]()\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc63dab4a9ca1e5948307_primitive_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/6045806b5a521e063b5bf05d_splash_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6448be2898da758376e_splash_2.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc647358c451a529efa52_geometric_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc65dc2e0fa0614c37657_organic_1_3.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc65dc64ea247520004f8_organic_1_4.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc65d8d872fb9dd03fab5_organic_1_5.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6624b464b35e79f368a_organic_1_9.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6624b464b51a39f368b_organic_1_10.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc66f2b4bbb7c7d568892_3_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc66ffd66351d943873a4_3_2.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc66f9aeabaa09db9104f_sf.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6739c5d4fa030db22f3_2_3.jpg)\\n\","," \"body\": \"\\nI created a series of wallpapers for the facebook.design site using C4D & Octane Render. It was cool to get to flex some 3D muscle for work, since my day to day generally doesn't get to touch this. Hope to get to explore this space much further in the future.\\n\\nCheck them out here:\\n\\n- [iOS 11 GUI](https://design.facebook.com/toolsandresources/ios-11-iphone-gui/)\\n- [Download directly](https://drive.google.com/file/d/16em0EMSvXmxKbJW1nP1GS25zTOMBPShh/view?usp=sharing)\\n- [On Twitter](https://twitter.com/iamnbutler/status/940640473227526144)\\n\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc60b2b4bbb5405568859_explorations3_1sfs.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6101c103c9d2416a18e_Mainexplorations3_2export0015.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc629c9faa40f65e13fe2_organic_1_12.png)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc634c9faa4d7b5e13feb_fabric_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc634aed5e2b47d274a25_geometric_3.jpg)\\n![]()\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc63dab4a9ca1e5948307_primitive_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/6045806b5a521e063b5bf05d_splash_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6448be2898da758376e_splash_2.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc647358c451a529efa52_geometric_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc65dc2e0fa0614c37657_organic_1_3.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc65dc64ea247520004f8_organic_1_4.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc65d8d872fb9dd03fab5_organic_1_5.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6624b464b35e79f368a_organic_1_9.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6624b464b51a39f368b_organic_1_10.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc66f2b4bbb7c7d568892_3_1.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc66ffd66351d943873a4_3_2.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc66f9aeabaa09db9104f_sf.jpg)\\n![](https://uploads-ssl.webflow.com/60453108a750bf32c24d79eb/604bc6739c5d4fa030db22f3_2_3.jpg)\\n\""," \"date_created\": \"2017-12-07T00:00:00.000Z\","," \"slug\": \"facebook-design-device-wallpapers\","," \"title\": \"Facebook.design Device Wallpapers\","," \"uuid\": \"b7a3cbd6-ec8f-4031-a57f-e74c6e56bead\","," \"url\": \"2016-05-11-spacelink\""," \"body\": \"\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122928/project/spacelink/22d86625220422e9b44619000db9249e9e79e163-screenshot-2016-02-19-13.54.12.8b6ff64a31790288f1b061ccc4fe027a54591f84_lcuq4d.png)\\n\\n## The Project\\n\\nThis project is an exploration of infinite space and communication. The ideas of space, space travel and communication in space have always fascinated me. As this is an art project I wanted to take a personal approach, exploring a topic that is important to me. The goal of the assignment is to use a dataset to create art. I struggled to find a dataset that would allow me to do exactly what I wanted, so I decided to use the data I found as a creative medium rather than to use it as a direction for my narrative.\\n\\nThe dataset I used to generate this piece is a TSV from NASA detailing communications made on their network in 1995. Originally I wanted to find a set of data with communications between mission control and spacecrafts, but I couldn't find anything like that unfortunately. I decided to instead use the data I had to generate a map. I had some technical issues at first. I was attempting to map nodes to DOM elements, but quickly (less than 2000 nodes) the browser became sluggish and unresponsive. I then switched to SVG mapping, which allowed me to map over 35 thousand elements simultaneously.\\n\\nWe rarely stop to consider the huge amount of information that we are sending constantly, forever. Communication isn't a constant stream, but something sporadic. Seeing it visually mapped creates interesting and random forms, generating art as it goes. The map created is reminiscent of stars. Over time the map scrolls, showing the ever-continuing stream of data that is moving through a system. The piece is fascinating to watch, and because it is in constant motion it interesting forms that are found must be saved in your mind as they quickly disappear.\\n\\nOf course, since the data is from a set and not live we will eventually see repeating forms and patterns. If I had more time to explore this project I would have loved to bring in a live data stream to be mapped. I also would have liked to build out controls that would allow the observer to manipulate the visuals of the art piece.\\n\\nThe visual style of the piece was inspired by old technology. The dataset is from 1995, as well as the \\\"glory days\\\" of NASA are in the past as well. The movement of the map is designed after tape-based data storage, where data would be recorded as a tape was fed through the system.\\n\\n[View Project](http://iamnbutler.github.io/spacelink/) [View on Github](https://github.com/iamnbutler/spacelink)\\n\","," \"body\": \"\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122928/project/spacelink/22d86625220422e9b44619000db9249e9e79e163-screenshot-2016-02-19-13.54.12.8b6ff64a31790288f1b061ccc4fe027a54591f84_lcuq4d.png)\\n\\n## The Project\\n\\nThis project is an exploration of infinite space and communication. The ideas of space, space travel and communication in space have always fascinated me. As this is an art project I wanted to take a personal approach, exploring a topic that is important to me. The goal of the assignment is to use a dataset to create art. I struggled to find a dataset that would allow me to do exactly what I wanted, so I decided to use the data I found as a creative medium rather than to use it as a direction for my narrative.\\n\\nThe dataset I used to generate this piece is a TSV from NASA detailing communications made on their network in 1995. Originally I wanted to find a set of data with communications between mission control and spacecrafts, but I couldn't find anything like that unfortunately. I decided to instead use the data I had to generate a map. I had some technical issues at first. I was attempting to map nodes to DOM elements, but quickly (less than 2000 nodes) the browser became sluggish and unresponsive. I then switched to SVG mapping, which allowed me to map over 35 thousand elements simultaneously.\\n\\nWe rarely stop to consider the huge amount of information that we are sending constantly, forever. Communication isn't a constant stream, but something sporadic. Seeing it visually mapped creates interesting and random forms, generating art as it goes. The map created is reminiscent of stars. Over time the map scrolls, showing the ever-continuing stream of data that is moving through a system. The piece is fascinating to watch, and because it is in constant motion it interesting forms that are found must be saved in your mind as they quickly disappear.\\n\\nOf course, since the data is from a set and not live we will eventually see repeating forms and patterns. If I had more time to explore this project I would have loved to bring in a live data stream to be mapped. I also would have liked to build out controls that would allow the observer to manipulate the visuals of the art piece.\\n\\nThe visual style of the piece was inspired by old technology. The dataset is from 1995, as well as the \\\"glory days\\\" of NASA are in the past as well. The movement of the map is designed after tape-based data storage, where data would be recorded as a tape was fed through the system.\\n\\n[View Project](http://iamnbutler.github.io/spacelink/) [View on Github](https://github.com/iamnbutler/spacelink)\\n\""," \"date_created\": \"2016-05-10T23:00:00.000Z\","," \"slug\": \"spacelink\","," \"title\": \"Spacelink\","," \"uuid\": \"ac4f79b1-4084-4ce7-851b-01cf6ea66927\","," \"url\": \"2015-11-25-design-workshop-posters\""," \"body\": \"\\nAfter I wrapped up a period of deep design workshop exploration I wrote up some of what I discovered and created these posters.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122428/project/workshop-posters/Poster-Book_fo8fk8.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122429/project/workshop-posters/Poster-Book2_ik1fmj.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122429/project/workshop-posters/Poster-Book3_xmqplx.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122429/project/workshop-posters/Poster-Book4_qxpsj3.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122429/project/workshop-posters/Poster-Book5_diu07s.jpg)\\n\\nAn expanded version of the copy on the posts:\\n\\n## 1. Design = Making\\n\\n---\\n\\n### WHAT IS CUUUBIC?\\n\\nIt is a project about exploring new techniques and ways of making. Rather than starting with a problem and trying to solve it, I chose a concept and started making things and exploring to find what I could discover. It was a very freeing process.\\n\\n### Why CUUUBIC?\\n\\nFrom the beginning I started working with voxels, which is a 3D pixel, or a cube. I needed a simple name to categorize everything under, so I thought it was suitable.\\n\\n### What was the work made in?\\n\\nI experimented with quite a few technologies, but the primary ones used were Photoshop, Illustrator, Blender, Maya and a program called MagicaVoxel.\\n\\n#### Making to find a problem (and yourself.)\\n\\nDesign as making is the idea of finding a problem through exploration, rather than starting with a problem using it to design a solution. Starting from a pre-existing problem may limit exploration, whereas starting right from making makes it easier to explore without the burden of fitting a solution. The conclusions found through making can be fluid, changing as further making brings to light new ideas. The process of making work can become the work itself. Through creating a body of work you can begin to discover meaning and a voice.\\n\\nA designer creates value by making work. The quality of the work will be judged by individuals and the design community as a whole, but good or bad each piece of work builds on who the designer is as a whole. The value mentioned here isn’t monetary value or how good the design is, it is the work’s place in the voice of the designer overall.\\n\\n## 2. The Project\\n\\n---\\n\\nStep into a world of intense color and imagination gone wild. Cuuubic is an exploration of color and space and the relationship between 3D objects. The work goes beyond a generated image and takes the viewer on a journey through the beautiful spaces that color, light and material generate when interacting. Shadow and reflection amplify these spaces, often creating textures or colors completely different than the original objects have. The project focused on exploration and design as a process. Exploration wasn’t limited to only creating visual work, but exploring a vast amount of tools, using varied techniques and experimenting with the possibilities of materials, the way the light moves, and the way reflections interact. Not every avenue taken was successful but the failures lead the way to a process that created many visually stunning results. In employing a wide and deep process I hoped to discover a voice that would resonate with both myself and the audience. Through sharing my work with others I’ve become that guy that makes art with cubes and things, which speaks to the voice that I’ve begun to create.\\n\\nThe work can be described as imagination gone wild (but not that wild.) It explores color and space and the relationship between objects. The interesting part of the work goes beyond just the image generated. It is the play between the objects, materials and reflections. Shadows and reflections form that bring out new color and shapes created by the interaction of materials and light. The length of the project was short, so I focused my exploration on exploring those interactions. Through sharing my work with others I’ve become that makes art with cubes and things, which I think speaks to the idea of making being part of defining a voice. The work matters because it shows the results of my making and research, a step toward creating a voice and exploration into a territory of design I have not stepped before.\\n\\n## 3. Selfish Design\\n\\n---\\n\\n### Or how the project became personal without it meaning to\\n\\n## 4. Complexity vs Impact\\n\\n---\\n\\n### MORE COMPLEX DOESN’T MEAN MORE EFFECTIVE\\n\\nI started this project wanting to explore the concept of worlds, either digital or imaginary. Something that doesn’t exist in our own world, beyond what we see in our everyday lives, like an alternate reality. I spent a lot of time working with more realistic (non-abstract) imagery like landscapes, but I found they took a long time to create a single piece, which stopped me from creating work rapidly and exploring multiple ideas. The also needed to feel believable, which changed the type of reaction the audience had when viewing them. By working with simple shapes like cubes and rectangles I could build a variety of simple to moderately complex environments very quickly, which allows time to explore in the rendering phase, which is usually where the magic happens.\\n\\nThe joy of working in 3D tools versus traditional tools like Photoshop or Illustrator is that the compositions can be rotated and manipulated in 3D, which often returns interesting and unexpected results. This process greatly aids discovery through making. I would love to return to making more complex pieces, as I think they are great at communicating a specific feeling, but for now the time investment wouldn’t allow me to work as effectively\\n\\n## 5. Tools are just tools\\n\\n---\\n\\n### Learning new things is great but can get in the way of making.\\n\\n## 6. Who came before you?\\n\\n---\\n\\n### Finding others who have done work similar to yours can help you understand where your work belongs.\\n\\n## 7. What is the message? (What did I find?)\\n\\n---\\n\\n### Making is good, but making for a reason is better.\\n\\nI started exploring if I could discover a connection between color and an observer’s emotional response. I examined topics like how emotion and color are related, what kind of emotions certain kinds of colors gave off, and if people reacted to the same piece differently. From my observations different color schemes give off very different feels. Softer colors and materials give a calm, warm and soft feeling. Darker colors and reflective materials in dark light give off cooler and more serious emotion. Dull colors and rough textures feel old and worn, uninspired and even depressing. The theme of connecting color and emotion seemed very obvious to me, and without testing against users or doing additional research to improve upon this theory I wasn’t going to make much progress with it. I realized that I was still in the early phases on my exploration, and likely should not have taken such an open-ended approach with a project that has such a short deadline.\\\\\\nAs I continued making I began to notice details that were not planned, but became the central themes to the work. Details like a new color being created in a reflection, or two shapes combining because of the perspective the image is rendered at. These “happy accidents” became the focus of my project as further pursued the interaction in the spaces between the colors and shapes I had chosen. In my most recent work I’ve tried to continue to explore these interactions and create work that would allow me to share them clearly. I believe that with time for further exploration I could isolate more clearly the message I want to convey with these pieces, but for now I continue to explore and create in hope of a revelation.\\n\\n## 8. Don’t give up on an idea before you have made anything.\\n\\n---\\n\\n### The Blank Canvas Effect can be terrifying, don’t let it stop you for creating.\\n\\n“One of the things that I think holds me back is a fear of creating or writing things that are bad. Once something is made it feels so permanent, and that is terrifying to me.”\\n\","," \"body\": \"\\nAfter I wrapped up a period of deep design workshop exploration I wrote up some of what I discovered and created these posters.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122428/project/workshop-posters/Poster-Book_fo8fk8.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122429/project/workshop-posters/Poster-Book2_ik1fmj.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122429/project/workshop-posters/Poster-Book3_xmqplx.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122429/project/workshop-posters/Poster-Book4_qxpsj3.jpg)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637122429/project/workshop-posters/Poster-Book5_diu07s.jpg)\\n\\nAn expanded version of the copy on the posts:\\n\\n## 1. Design = Making\\n\\n---\\n\\n### WHAT IS CUUUBIC?\\n\\nIt is a project about exploring new techniques and ways of making. Rather than starting with a problem and trying to solve it, I chose a concept and started making things and exploring to find what I could discover. It was a very freeing process.\\n\\n### Why CUUUBIC?\\n\\nFrom the beginning I started working with voxels, which is a 3D pixel, or a cube. I needed a simple name to categorize everything under, so I thought it was suitable.\\n\\n### What was the work made in?\\n\\nI experimented with quite a few technologies, but the primary ones used were Photoshop, Illustrator, Blender, Maya and a program called MagicaVoxel.\\n\\n#### Making to find a problem (and yourself.)\\n\\nDesign as making is the idea of finding a problem through exploration, rather than starting with a problem using it to design a solution. Starting from a pre-existing problem may limit exploration, whereas starting right from making makes it easier to explore without the burden of fitting a solution. The conclusions found through making can be fluid, changing as further making brings to light new ideas. The process of making work can become the work itself. Through creating a body of work you can begin to discover meaning and a voice.\\n\\nA designer creates value by making work. The quality of the work will be judged by individuals and the design community as a whole, but good or bad each piece of work builds on who the designer is as a whole. The value mentioned here isn’t monetary value or how good the design is, it is the work’s place in the voice of the designer overall.\\n\\n## 2. The Project\\n\\n---\\n\\nStep into a world of intense color and imagination gone wild. Cuuubic is an exploration of color and space and the relationship between 3D objects. The work goes beyond a generated image and takes the viewer on a journey through the beautiful spaces that color, light and material generate when interacting. Shadow and reflection amplify these spaces, often creating textures or colors completely different than the original objects have. The project focused on exploration and design as a process. Exploration wasn’t limited to only creating visual work, but exploring a vast amount of tools, using varied techniques and experimenting with the possibilities of materials, the way the light moves, and the way reflections interact. Not every avenue taken was successful but the failures lead the way to a process that created many visually stunning results. In employing a wide and deep process I hoped to discover a voice that would resonate with both myself and the audience. Through sharing my work with others I’ve become that guy that makes art with cubes and things, which speaks to the voice that I’ve begun to create.\\n\\nThe work can be described as imagination gone wild (but not that wild.) It explores color and space and the relationship between objects. The interesting part of the work goes beyond just the image generated. It is the play between the objects, materials and reflections. Shadows and reflections form that bring out new color and shapes created by the interaction of materials and light. The length of the project was short, so I focused my exploration on exploring those interactions. Through sharing my work with others I’ve become that makes art with cubes and things, which I think speaks to the idea of making being part of defining a voice. The work matters because it shows the results of my making and research, a step toward creating a voice and exploration into a territory of design I have not stepped before.\\n\\n## 3. Selfish Design\\n\\n---\\n\\n### Or how the project became personal without it meaning to\\n\\n## 4. Complexity vs Impact\\n\\n---\\n\\n### MORE COMPLEX DOESN’T MEAN MORE EFFECTIVE\\n\\nI started this project wanting to explore the concept of worlds, either digital or imaginary. Something that doesn’t exist in our own world, beyond what we see in our everyday lives, like an alternate reality. I spent a lot of time working with more realistic (non-abstract) imagery like landscapes, but I found they took a long time to create a single piece, which stopped me from creating work rapidly and exploring multiple ideas. The also needed to feel believable, which changed the type of reaction the audience had when viewing them. By working with simple shapes like cubes and rectangles I could build a variety of simple to moderately complex environments very quickly, which allows time to explore in the rendering phase, which is usually where the magic happens.\\n\\nThe joy of working in 3D tools versus traditional tools like Photoshop or Illustrator is that the compositions can be rotated and manipulated in 3D, which often returns interesting and unexpected results. This process greatly aids discovery through making. I would love to return to making more complex pieces, as I think they are great at communicating a specific feeling, but for now the time investment wouldn’t allow me to work as effectively\\n\\n## 5. Tools are just tools\\n\\n---\\n\\n### Learning new things is great but can get in the way of making.\\n\\n## 6. Who came before you?\\n\\n---\\n\\n### Finding others who have done work similar to yours can help you understand where your work belongs.\\n\\n## 7. What is the message? (What did I find?)\\n\\n---\\n\\n### Making is good, but making for a reason is better.\\n\\nI started exploring if I could discover a connection between color and an observer’s emotional response. I examined topics like how emotion and color are related, what kind of emotions certain kinds of colors gave off, and if people reacted to the same piece differently. From my observations different color schemes give off very different feels. Softer colors and materials give a calm, warm and soft feeling. Darker colors and reflective materials in dark light give off cooler and more serious emotion. Dull colors and rough textures feel old and worn, uninspired and even depressing. The theme of connecting color and emotion seemed very obvious to me, and without testing against users or doing additional research to improve upon this theory I wasn’t going to make much progress with it. I realized that I was still in the early phases on my exploration, and likely should not have taken such an open-ended approach with a project that has such a short deadline.\\\\\\nAs I continued making I began to notice details that were not planned, but became the central themes to the work. Details like a new color being created in a reflection, or two shapes combining because of the perspective the image is rendered at. These “happy accidents” became the focus of my project as further pursued the interaction in the spaces between the colors and shapes I had chosen. In my most recent work I’ve tried to continue to explore these interactions and create work that would allow me to share them clearly. I believe that with time for further exploration I could isolate more clearly the message I want to convey with these pieces, but for now I continue to explore and create in hope of a revelation.\\n\\n## 8. Don’t give up on an idea before you have made anything.\\n\\n---\\n\\n### The Blank Canvas Effect can be terrifying, don’t let it stop you for creating.\\n\\n“One of the things that I think holds me back is a fear of creating or writing things that are bad. Once something is made it feels so permanent, and that is terrifying to me.”\\n\""," \"date_created\": \"2015-11-25T00:00:00.000Z\","," \"slug\": \"design-workshop-posters\","," \"title\": \"Design Workshop Posters\","," \"uuid\": \"2303b53e-80dd-4e3b-b62d-74f80566546d\","," \"url\": \"2015-08-21-music-stats\""," \"body\": \"\\n## The Project\\n\\nMusic Stats is a visual art & infographic site. It's generated from my personal music listening history, showing 3 axis of data – total plays, recency of track, and \\\"hotness\\\" – custom score based on how frequently a song is played in relation to when it was added.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936180/post/music-stats/Screenshot_2015-10-17_05.02.34_vfty5o.png)\\n\\nIndividual bars represent songs. Taller bars are more frequently played, while warmer colored ones are hotter (played very frequently.)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936185/post/music-stats/Screenshot_2015-10-20_22.39.09_dhxriu.png)\\n\\nClicking on a bar opens a modal with its info, and does a search for the song on Youtube.\\n\\n## The Tech\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936182/post/music-stats/Screenshot_2015-10-17_05.02.35_p6cfwi.jpg)\\n\\nThe site is built in Javascript using [d3.js](https://d3js.org/) to generate the charts from TSV data sets, and a custom implementation of the Youtube API & I'm Feeling Lucky to grab the first video available. [Check out the script](https://github.com/iamnbutler/music-stats/blob/master/js/scripts.js).\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936183/post/music-stats/Screenshot_2015-10-17_19.23.28_yl2nli.png)\\n\\nThe gradient on each bar is unique – it's created by an SVG polyfill filter generated using each song's plays, recency and hotness.\\n\\n## The Result\\n\\nAs a visual piece I think the work was sucessful – to show off interesting listening trends visually. I wish I could have got filtering built in time so the data could be explored futher – I think this overall would have made the piece more exciting over all.\\n\\nI had plans to make it so anyone could add their own TSV/CSV to see their own results, and did get this working in code, but didn't have time to solve how to allow people to upload their own data. Maybe in the future!\\n\\n[Go to Site](http://iamnbutler.github.io/music-stats/) [View on Github](https://github.com/iamnbutler/music-stats)\\n\","," \"body\": \"\\n## The Project\\n\\nMusic Stats is a visual art & infographic site. It's generated from my personal music listening history, showing 3 axis of data – total plays, recency of track, and \\\"hotness\\\" – custom score based on how frequently a song is played in relation to when it was added.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936180/post/music-stats/Screenshot_2015-10-17_05.02.34_vfty5o.png)\\n\\nIndividual bars represent songs. Taller bars are more frequently played, while warmer colored ones are hotter (played very frequently.)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936185/post/music-stats/Screenshot_2015-10-20_22.39.09_dhxriu.png)\\n\\nClicking on a bar opens a modal with its info, and does a search for the song on Youtube.\\n\\n## The Tech\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936182/post/music-stats/Screenshot_2015-10-17_05.02.35_p6cfwi.jpg)\\n\\nThe site is built in Javascript using [d3.js](https://d3js.org/) to generate the charts from TSV data sets, and a custom implementation of the Youtube API & I'm Feeling Lucky to grab the first video available. [Check out the script](https://github.com/iamnbutler/music-stats/blob/master/js/scripts.js).\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936183/post/music-stats/Screenshot_2015-10-17_19.23.28_yl2nli.png)\\n\\nThe gradient on each bar is unique – it's created by an SVG polyfill filter generated using each song's plays, recency and hotness.\\n\\n## The Result\\n\\nAs a visual piece I think the work was sucessful – to show off interesting listening trends visually. I wish I could have got filtering built in time so the data could be explored futher – I think this overall would have made the piece more exciting over all.\\n\\nI had plans to make it so anyone could add their own TSV/CSV to see their own results, and did get this working in code, but didn't have time to solve how to allow people to upload their own data. Maybe in the future!\\n\\n[Go to Site](http://iamnbutler.github.io/music-stats/) [View on Github](https://github.com/iamnbutler/music-stats)\\n\""," \"date_created\": \"2013-11-27T00:00:00.000Z\","," \"slug\": \"music-stats\","," \"title\": \"Music Stats\","," \"uuid\": \"977c1aa9-5e21-41ce-8e39-0c8094866317\","," \"url\": \"2013-11-27-league-of-legends-launcher\""," \"body\": \"\\nA sketch exploring some small improvements to the League of Legends game launcher.\\n\\n## The Problem\\n\\nThere are a few easily addressable problems with the current launcher:\\n\\n- It plays music when launched, and has no option to mute. Sometimes the volume is loud and you don't realize it, and this is super shocking. You end up either having to mute your system or listen to the music while the game patches.\\n- On lower end machines the launcher animations can be a bit heavy, especially if you are doing something else at the same time.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936179/post/lol-launcher/old-launcher_cqahv4.jpg)\\n\\n## My Approach\\n\\nI made a few improvements here, like being able to log in while the game is patching, disabling music, animations. I also took a visual pass across the whole launcher to be more stylistically consistent to where the game is going.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936180/post/lol-launcher/604bb2aa65053b8df597914e_client-launcher-real-pixels-p-1080_opakoe.png)\\n\\nBeyond just the launcher, I started playing with what some of the tiles in the launcher could look like!\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936182/post/lol-launcher/604bb2aac64ea24338ffa728_real-pixels_y93tti.jpg)\\n\\nThat's it for now! I want to explore this a bit further in the future.\\n\","," \"body\": \"\\nA sketch exploring some small improvements to the League of Legends game launcher.\\n\\n## The Problem\\n\\nThere are a few easily addressable problems with the current launcher:\\n\\n- It plays music when launched, and has no option to mute. Sometimes the volume is loud and you don't realize it, and this is super shocking. You end up either having to mute your system or listen to the music while the game patches.\\n- On lower end machines the launcher animations can be a bit heavy, especially if you are doing something else at the same time.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936179/post/lol-launcher/old-launcher_cqahv4.jpg)\\n\\n## My Approach\\n\\nI made a few improvements here, like being able to log in while the game is patching, disabling music, animations. I also took a visual pass across the whole launcher to be more stylistically consistent to where the game is going.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936180/post/lol-launcher/604bb2aa65053b8df597914e_client-launcher-real-pixels-p-1080_opakoe.png)\\n\\nBeyond just the launcher, I started playing with what some of the tiles in the launcher could look like!\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636936182/post/lol-launcher/604bb2aac64ea24338ffa728_real-pixels_y93tti.jpg)\\n\\nThat's it for now! I want to explore this a bit further in the future.\\n\""," \"slug\": \"league-of-legends-launcher\","," \"title\": \"League of Legends Launcher\","," \"uuid\": \"2c4ff3bb-17d0-424c-8b30-b8774ebf60ba\","," \"url\": \"2013-11-05-creating-visualizations-in-isadora\""," \"body\": \"\\n![](https://res.cloudinary.com/yaminateo/video/upload/v1637120269/project/isadora/academy-leader_eryomr.mp4)\\n\\nThese are a few outputs from a project using Isadora to create motion visuals.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637119624/project/isadora/604e6a3ea8cd2be7c9c89736_Screenshot_2013-11-05_00.33.13_bq7fm2.png)\\n\\nIsadora is a node driven software that also interfaces with hardware like arduinos, sensors, etc.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121210/project/isadora/IMG_0008_culnun.jpg)\\n\\nUsing the built in web cam, IR sensors and a dial I was able to create a variety of really cool visuals.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637119625/project/isadora/604e6a334cfde041003ff69b_Screenshot_2013-10-15_15.16.05_svedfe.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637119625/project/isadora/604e6a33c2649a7265b26abe_Screenshot_2013-10-15_15.08.19_a6nwp7.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121095/project/isadora/CleanShot_-_2021-11-16_at_22.44.28_2x_lyq2gb.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121059/project/isadora/CleanShot_-_2021-11-16_at_22.48.48_zrc93q.gif)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121053/project/isadora/CleanShot_-_2021-11-16_at_22.49.48_tfw6qr.gif)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1637120374/project/isadora/Screenshot_2013-10-08_00.50.00_ppwo1r.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121105/project/isadora/CleanShot_-_2021-11-16_at_22.44.09_2x_ganuxr.png)\\n\","," \"body\": \"\\n![](https://res.cloudinary.com/yaminateo/video/upload/v1637120269/project/isadora/academy-leader_eryomr.mp4)\\n\\nThese are a few outputs from a project using Isadora to create motion visuals.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637119624/project/isadora/604e6a3ea8cd2be7c9c89736_Screenshot_2013-11-05_00.33.13_bq7fm2.png)\\n\\nIsadora is a node driven software that also interfaces with hardware like arduinos, sensors, etc.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121210/project/isadora/IMG_0008_culnun.jpg)\\n\\nUsing the built in web cam, IR sensors and a dial I was able to create a variety of really cool visuals.\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637119625/project/isadora/604e6a334cfde041003ff69b_Screenshot_2013-10-15_15.16.05_svedfe.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637119625/project/isadora/604e6a33c2649a7265b26abe_Screenshot_2013-10-15_15.08.19_a6nwp7.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121095/project/isadora/CleanShot_-_2021-11-16_at_22.44.28_2x_lyq2gb.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121059/project/isadora/CleanShot_-_2021-11-16_at_22.48.48_zrc93q.gif)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121053/project/isadora/CleanShot_-_2021-11-16_at_22.49.48_tfw6qr.gif)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1637120374/project/isadora/Screenshot_2013-10-08_00.50.00_ppwo1r.png)\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1637121105/project/isadora/CleanShot_-_2021-11-16_at_22.44.09_2x_ganuxr.png)\\n\""," \"date_created\": \"2013-11-05T00:00:00.000Z\","," \"slug\": \"creating-motion-graphics-in-isadora\","," \"title\": \"Creating Motion Graphics in Isadora\","," \"uuid\": \"01e3eb3e-7e6b-4e13-b0b3-3cbca1190bba\","," \"url\": \"2013-01-11-splash-page-2013\""," \"body\": \"\\nProbably the earliest web project I have images or code of. This was my very first web site that I ever put online!\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636439834/project/splash-page/CleanShot_-_2021-11-09_at_00.00.56_2x_wdqnvq.png)\\n\\n[View Site](http://iamnbutler.github.io/splash-page/) [View on Github](https://github.com/iamnbutler/splash-page)\\n\","," \"body\": \"\\nProbably the earliest web project I have images or code of. This was my very first web site that I ever put online!\\n\\n![](https://res.cloudinary.com/yaminateo/image/upload/v1636439834/project/splash-page/CleanShot_-_2021-11-09_at_00.00.56_2x_wdqnvq.png)\\n\\n[View Site](http://iamnbutler.github.io/splash-page/) [View on Github](https://github.com/iamnbutler/splash-page)\\n\""," \"date_created\": \"2013-01-11T00:00:00.000Z\","," \"slug\": \"spash-page-2013\","," \"title\": \"Splash Page 2013\","," \"uuid\": \"6a8e27cf-c35a-4190-a1e9-76f78c6ee379\",","2dbe68f","f070005","parents",[20],"author",{"_601":602,"_603":604,"_605":606},"committer",{"_601":602,"_603":604,"_605":606},"message","tinysearch WIP\n\nLeft off stuck at `Error: Engine directory could not be created`\n\nLooks like there is work ongoing on this here: https://github.com/tinysearch/tinysearch/issues/152","signature","subject","tinysearch WIP","authors",[600],{"_601":602,"_603":604},"name","Nate Butler","email","iamnbutler@gmail.com","time",1656848315,"documentNavigation","repo","iamnbutler/iamnbutler.github.io","repoId","077a62f3-be49-4ad9-923b-62e0436d739f","ownerId","user:1714999","organization","site","nexthub","private","admin","settings","maintainer","triage","starred","stars","watchers","watching","pinned","notify","views",[748,749,750,751,752,753,754,755,756,757,758,759,760],"navigation",{"_628":629,"_709":710,"_711":712,"_713":714,"_715":716,"_717":718,"_67":719},"sources",[],"viewer","meta",{"_701":702,"_703":704,"_705":706,"_617":26,"_707":669,"_708":26,"_623":36,"_624":48},"branches",[645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662,663,664,665,666,667,668,669,670,671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696,697,698,699,700],"tags",[643,644],"cloneUrl","https://git.nexthub.sh/iamnbutler/iamnbutler.github.io.git","v18.0.0","v19.0.0","14-2","2017.3","add-gpui-extended-context-post","add-post-tags","backblaze-assets","dependabot/npm_and_yarn/defu-6.1.6","dependabot/npm_and_yarn/devalue-5.8.1","dependabot/npm_and_yarn/h3-1.15.10","dependabot/npm_and_yarn/multi-04ca55b44c","dependabot/npm_and_yarn/picomatch-2.3.2","dependabot/npm_and_yarn/postcss-8.5.14","dependabot/npm_and_yarn/rollup-4.59.0","dependabot/npm_and_yarn/smol-toml-1.6.1","dependabot/npm_and_yarn/svelte-5.55.7","dependabot/npm_and_yarn/svgo-4.0.1","dependabot/npm_and_yarn/vite-6.4.2","fix-backblaze-integration","fix-backblaze-issue-take2","glfs-test","global-tags","gpui-ui-post","import-and-sort","integrate-data-repo","lists","main","mellow-fjord/site-reliability-cleanup","nate-journal","revert-34-fix-backblaze-integration","tiny-search-2","unified-feed","update-nuxt","v-11","v-12","v-13","v-14","v-15","v-16","v-18","v-19","v-20","v-21","v-3","v-4","v11-newsprint","v14-1","v14-effect","v18","v19/add-mh-2","v21","v23","v5-04-21-06","v5-static","v8","v8_js","v9","v9-2020-eleventy","description","Personal Site","owner","iamnbutler","section","","head","empty","pins",[731,732,733],"documents",{"_728":729,"_730":36},"code",{"_724":725,"_726":727},"automations",{"_722":86,"_723":-5},"delivery",{"_720":36,"_721":-5},"ckQnXds0_OG2x4LL3veMKJ2xpXN","releases","applications","workflows","deployments","commits",822,"changes",11,"counts",{},"total",{"_734":726,"_601":746,"_30":726,"_737":747,"_626":739,"_740":26,"_741":739,"_742":727},{"_734":743,"_601":744,"_30":743,"_737":745,"_626":739,"_740":26,"_741":739,"_742":36},{"_734":735,"_601":736,"_30":735,"_737":738,"_626":739,"_740":26,"_741":739,"_742":36},"id","issues","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_734":726,"_601":746,"_30":726,"_737":791,"_626":739,"_740":26,"_741":739},{"_734":743,"_601":744,"_30":743,"_737":790,"_626":739,"_740":26,"_741":739},{"_734":735,"_601":736,"_30":735,"_737":789,"_626":739,"_740":26,"_741":739},{"_734":786,"_601":787,"_30":786,"_737":788,"_626":26,"_740":26,"_741":739},{"_734":783,"_601":784,"_30":783,"_737":785,"_626":26,"_740":26,"_741":739},{"_734":722,"_601":781,"_30":715,"_737":782,"_626":26,"_740":26,"_741":739},{"_734":723,"_601":778,"_30":779,"_737":780,"_626":26,"_740":26,"_741":739},{"_734":720,"_601":776,"_30":720,"_737":777,"_626":26,"_740":26,"_741":739},{"_734":772,"_601":773,"_30":774,"_737":775,"_626":26,"_740":26,"_741":739},{"_734":711,"_601":770,"_30":711,"_737":771,"_626":26,"_740":26,"_741":26},{"_734":767,"_601":768,"_30":767,"_737":769,"_626":26,"_740":26,"_741":26},{"_734":764,"_601":765,"_30":764,"_737":766,"_626":26,"_740":26,"_741":26},{"_734":761,"_601":762,"_30":761,"_737":763,"_626":26,"_740":26,"_741":26},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794771066440,"sidebar","expanded"]