aaronmbushnell-com-x5e6nn.txt (5632B)
1 [1] Aaron Bushnell 2 3 Hi, I'm Aaron! 4 5 Born and raised in the midwest and notorious [3]golden retriever hoarder. 6 7 • [4] 8 Featherhour 9 • [5] 10 Mastodon 11 • [6] 12 GitHub 13 • [7] 14 Twitch 15 • [8] 16 Spotify 17 • [9] 18 Twitter 19 20 You are beautiful. ❤️ 21 22 [10] Aaron Bushnell 23 24 Hi, I'm Aaron! 25 26 Born and raised in the midwest and notorious [11]golden retriever hoarder. 27 28 • [12] 29 Featherhour 30 • [13] 31 Mastodon 32 • [14] 33 GitHub 34 • [15] 35 Twitch 36 • [16] 37 Spotify 38 • [17] 39 Twitter 40 41 You are beautiful. ❤️ 42 43 [18]← View all posts 44 August 28, 2023 45 46 Keep your stack short 47 48 Not long ago [19]I wrote about using Gatsby.js on a Craft CMS project. If you 49 want to learn more about that particular pairing you may want to read that 50 post. But, for the sake of this one, I'll briefly summarize the tech stack: 51 52 [20]Craft CMS handles the backend (content). [21]Gatsby.js, [22]GraphQL, and 53 [23]React handles frontend. The on-paper benefits sound like a great approach 54 for building a website: 55 56 • Craft CMS: The best CMS out there (in my opinion) 57 • React: One templating language for static-generated content and client-side 58 interactivity 59 • GraphQL: A centralized dataset accessible from a single API 60 • Performance: Serving a compiled, static version of the site is extremely 61 fast 62 63 If this were a web framework's website you'd see a column of ✅s next to another 64 framework's pitiful column of ❌s. 65 66 But, there's always a catch 67 68 There's no such thing as a free lunch and that goes double for programming. 69 70 If you've ever set up a system like this it's tempting to think that—once it's 71 established—the hardest part is over. But, it's not. 72 73 The hardest part isn't setting it up. It's coming back to it a year later. 74 75 A year later you're more likely to be mired in: 76 77 • Time-consuming training and documentation for team members 78 • Out-of-date dependencies 79 • Updates that cause breaking changes across your stack 80 • Workflows that make trivial updates time-consuming 81 82 You wind up with a great deal of complexity that prevents you from adding the 83 features your client needs ASAP. While your stack is conceptually 84 well-separated and tidy, the separation itself becomes your greatest liability 85 to be productive. 86 87 Low abstraction trends 88 89 Maybe you've heard, but [24]there's a post or two about [25]Tailwind and its 90 controversial approach. 91 92 I'm not going to proselytize a framework or tool. But there's an obvious influx 93 in tools like Tailwind that aim to reduce overhead and abstractions. 94 95 Tailwind does this by encouraging you to style your components directly in your 96 templates: 97 98 <!-- High Abstraction --> 99 <div class="card"></div> 100 101 <!-- Low Abstraction (Tailwind) --> 102 <div class="bg-white rounded-lg p-4"></div> 103 104 React (by way of JSX) allows you to put your structure and interactions into a 105 single file. (And, if you inline your styles, you can collocate everything). 106 107 <button onClick={() => alert('I think you are great!')}> 108 What do you think about me? 109 </button> 110 111 Developers find value in these types of low-overhead tools because: 112 113 1. They can collocate a component's structure, functionality, and styling into 114 a single file 115 2. Detecting "leakage" can be easier because changes to structure, 116 functionality, and styling can occur in this single file 117 118 Shortening the stack 119 120 Revisiting our Gatsby.js example, there's a similarly large distance between 121 the content being stored and the views being presented. It's separated by 122 tools, by protocol, and even by language. All of these bridges require 123 connectors—any of which can fail for any number of reasons and require 124 intervention. 125 126 But, if we were to reduce the stack from Craft CMS, Gatsby.js, GraphQL, and 127 React to just Craft CMS and [26]Twig (Craft's templating language) it 128 eliminates a massive set of complexity and overhead. 129 130 Not only does it reduce a large number of dependencies, but it eliminates all 131 of the connecting protocols and an entirely different language to keep the 132 stack working. It means fewer bridges to cross, fewer competing dependencies, 133 and a dramatically simpler stack to revisit a year later. 134 135 Wrapping up 136 137 I do want to be clear in stating that this isn't an indictment against 138 Gatsby.js, Craft, or a pairing between the two. Rather, I hope it causes you to 139 consider all technical challenges not as something that needs to be solved 140 once, but sustained indefinitely. 141 142 When you're building something it's not quite appropriate to ask "will this be 143 hard to set up?". You're smart and I believe you can set it up! 144 145 Instead, ask yourself: "Will this be harder a year later?" 146 147 148 References: 149 150 [1] https://aaronmbushnell.com/ 151 [3] https://aaronmbushnell.com/images/goldens.png 152 [4] https://featherhour.com/ 153 [5] https://mastodon.social/@aaronbushnell 154 [6] https://github.com/aaronbushnell 155 [7] https://www.twitch.tv/aaronbushnell 156 [8] https://open.spotify.com/user/aaronmbushnell 157 [9] https://twitter.com/aaronbushnell 158 [10] https://aaronmbushnell.com/ 159 [11] https://aaronmbushnell.com/images/goldens.png 160 [12] https://featherhour.com/ 161 [13] https://mastodon.social/@aaronbushnell 162 [14] https://github.com/aaronbushnell 163 [15] https://www.twitch.tv/aaronbushnell 164 [16] https://open.spotify.com/user/aaronmbushnell 165 [17] https://twitter.com/aaronbushnell 166 [18] https://aaronmbushnell.com/ 167 [19] https://aaronmbushnell.com/running-gatsby-js-sites-with-craft-cms 168 [20] https://craftcms.com/ 169 [21] https://www.gatsbyjs.com/ 170 [22] https://graphql.org/ 171 [23] https://react.dev/ 172 [24] https://www.google.com/search?q=site%3Amedium.com+tailwind 173 [25] https://tailwindcss.com/ 174 [26] https://twig.symfony.com/