<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Uli Troyo</title>
    <description>The latest articles on Forem by Uli Troyo (@ulitroyo).</description>
    <link>https://forem.com/ulitroyo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F74413%2Fa2a162d6-7e75-4778-9553-94fb105a8c74.png</url>
      <title>Forem: Uli Troyo</title>
      <link>https://forem.com/ulitroyo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/ulitroyo"/>
    <language>en</language>
    <item>
      <title>Dear (Rust) Devs: Article Request</title>
      <dc:creator>Uli Troyo</dc:creator>
      <pubDate>Sun, 02 Mar 2025 01:32:12 +0000</pubDate>
      <link>https://forem.com/ulitroyo/dear-rust-devs-article-request-38ne</link>
      <guid>https://forem.com/ulitroyo/dear-rust-devs-article-request-38ne</guid>
      <description>&lt;p&gt;This is a request to &lt;strong&gt;all&lt;/strong&gt; devs for a new type of article that outlines the non-obvious features and quirks of the languages you use the most.&lt;/p&gt;

&lt;h2&gt;
  
  
  All My Dev Tools Are Written In [Language]
&lt;/h2&gt;

&lt;p&gt;Here's my issue:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Nearly all my developer tools are open-source projects written in &lt;strong&gt;Rust&lt;/strong&gt; (&lt;a href="https://www.nushell.sh" rel="noopener noreferrer"&gt;&lt;strong&gt;Nushell&lt;/strong&gt;&lt;/a&gt;, &lt;a href="https://helix-editor.com" rel="noopener noreferrer"&gt;&lt;strong&gt;Helix&lt;/strong&gt;&lt;/a&gt;, &lt;a href="https://wezterm.org/index.html" rel="noopener noreferrer"&gt;&lt;strong&gt;WezTerm&lt;/strong&gt;&lt;/a&gt;, and more).&lt;/li&gt;
&lt;li&gt;I don't &lt;em&gt;need&lt;/em&gt; Rust for anything, and I have my hands full with other languages I use for work.&lt;/li&gt;
&lt;li&gt;I would like to learn enough Rust to modify my tools and contribute to the projects.&lt;/li&gt;
&lt;li&gt;I don't have a lot of time to devote to learning.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you're a dev, I know you can likely relate:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You want to port a project to the web but you haven't touched JavaScript since 2005 and have no idea where to start with modern tooling.&lt;/li&gt;
&lt;li&gt;You want to customize your &lt;a href="https://neovim.io" rel="noopener noreferrer"&gt;&lt;strong&gt;Neovim&lt;/strong&gt;&lt;/a&gt; config but you don't know &lt;strong&gt;Lua&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;You want to build custom tooling or workflows in &lt;a href="https://logseq.com" rel="noopener noreferrer"&gt;&lt;strong&gt;Logseq&lt;/strong&gt;&lt;/a&gt; but you don't know &lt;strong&gt;Clojure&lt;/strong&gt; (or &lt;strong&gt;Datalog&lt;/strong&gt;, whatever that is).&lt;/li&gt;
&lt;li&gt;You have a use case where a &lt;strong&gt;Bash&lt;/strong&gt; script is the quickest solution but you forgot Bash doesn't support floats so 3 hours later you're uh... bashing your head in frustration.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So my personal problem is in Rust, but I would love for there to be an ecosystem of this kind of article available for ALL languages: an 80/20 introduction to a language, for programmers of other languages.&lt;/p&gt;

&lt;h2&gt;
  
  
  The 80/20 Rule
&lt;/h2&gt;

&lt;p&gt;You've likely come across this truism, but in case you haven't, it goes like this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;80% of a company's profits come from just 20% of its clients.&lt;/li&gt;
&lt;li&gt;80% of all community problems are started by 20% of the users.&lt;/li&gt;
&lt;li&gt;80% of your memories with someone come from just 20% of the time you spend together.&lt;/li&gt;
&lt;li&gt;You spend roughly 80% of your time playing just 20% of the video games you own, a.k.a. you spent $70 on &lt;a href="https://store.steampowered.com/app/2909400/FINAL_FANTASY_VII_REBIRTH/" rel="noopener noreferrer"&gt;Final Fantasy VII Rebirth&lt;/a&gt; but have barely played it as you clock your 300th hour in &lt;a href="https://www.playbalatro.com" rel="noopener noreferrer"&gt;Balatro&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The 80/20 rule is a heuristic that helps you focus on what's important:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You should probably prioritize the needs of that 20% of your clients before anything else.&lt;/li&gt;
&lt;li&gt;You should probably kidnap that 20% of your users and drop them in the middle of the Mojave Desert.&lt;/li&gt;
&lt;li&gt;You should probably spend less time with the people you love, those unmemorable nobodies.&lt;/li&gt;
&lt;li&gt;Only ever play mobile &lt;a href="https://medium.com/geekculture/what-are-roguelites-740799dff3ee" rel="noopener noreferrer"&gt;roguelites&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We can extrapolate what this means for programming languages:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;When learning a programming language, 80% of the headaches come from just 20% of the stuff you don't yet know.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Your Mission
&lt;/h2&gt;

&lt;p&gt;So can you do me a favor, please? Whatever you primary programming language is, identify the 20% of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;usage rules&lt;/li&gt;
&lt;li&gt;coding styles &amp;amp; idioms&lt;/li&gt;
&lt;li&gt;language quirks&lt;/li&gt;
&lt;li&gt;standard library utilities&lt;/li&gt;
&lt;li&gt;dev tools&lt;/li&gt;
&lt;li&gt;macros&lt;/li&gt;
&lt;li&gt;other unintuitive stuff to newcomers to the language&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;that you use 80% of the time, or that you see in GitHub projects of that language 80% of the time. Whatever will make reading code in that language easier to a newcomer.&lt;/p&gt;

&lt;p&gt;Basically, when you were learning your language, &lt;em&gt;what did you struggle to understand or use correctly?&lt;/em&gt; And from that list, what's roughly that 20% you use 80% of the time, or that you see in roughly 80% of the open-source projects you browse?&lt;/p&gt;

&lt;p&gt;Can you then write an article where you tell me about these things? Name it something like "Rust 80/20" or "TypeScript 80/20". And in whatever social media platform you choose to share your article give it a hashtag like &lt;code&gt;#rust8020&lt;/code&gt; or &lt;code&gt;#ts8020&lt;/code&gt;?&lt;/p&gt;

&lt;p&gt;To give you an example of the stuff I'm struggling trying to read Rust code:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How do I know when to use a &lt;code&gt;::prelude&lt;/code&gt; thingy VS using the actual thing? What even IS a prelude?&lt;/li&gt;
&lt;li&gt;When is it acceptable to reach for a macro VS a regular function? I've seen APIs written both ways, as in &lt;a href="https://docs.rs/clap/latest/clap/" rel="noopener noreferrer"&gt;&lt;code&gt;clap&lt;/code&gt;&lt;/a&gt; &lt;em&gt;derive&lt;/em&gt; vs &lt;em&gt;builder&lt;/em&gt; APIs.&lt;/li&gt;
&lt;li&gt;When am I more likely to encounter lifetimes? I get scared whenever I see the little tick marks, because I never know when to expect them.&lt;/li&gt;
&lt;li&gt;The whole business with &lt;code&gt;unwrap&lt;/code&gt; and &lt;code&gt;!&lt;/code&gt; and &lt;code&gt;?&lt;/code&gt;. I find it very unintuitive.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What I Am NOT Asking For
&lt;/h2&gt;

&lt;p&gt;I am not asking for beginner's guides, though. There are already a great series of articles titled "learn X in 15 minutes" like &lt;a href="https://tylerneylon.com/a/learn-lua/" rel="noopener noreferrer"&gt;this excellent beginner's guide to Lua&lt;/a&gt; that take you through the main syntax of a language. Thing is, once you know one programming language (or a few), picking up the features of another is mostly just learning a few syntax differences and implementation details. Generally, there are already good beginner guides for every language, even those you've never heard of, such as &lt;a href="https://janet.guide" rel="noopener noreferrer"&gt;this excellent guide to a language named Janet&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I'm also not asking for pedantic style guides. Those are for language fanboys, not casual users. Don't tell me how to write idiomatic &lt;strong&gt;Python&lt;/strong&gt;. I know &lt;a href="https://www.youtube.com/c/theprimeagen" rel="noopener noreferrer"&gt;ThePrimeagen&lt;/a&gt; used to do that in Stack Overflow back in 2010 or whatever, but unless you have aspirations to be a mustachioed Twitch streamer dev, don't tell me about your idiomatic Python. Only tell me idiomatic rules if there's a particularly dumb construct you see in actual code all the time and I should know about it, like ugly &lt;a href="https://www.w3schools.com/python/python_lists_comprehension.asp" rel="noopener noreferrer"&gt;list comprehensions&lt;/a&gt; and &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator" rel="noopener noreferrer"&gt;ternary operators&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  A JavaScript Example
&lt;/h2&gt;

&lt;p&gt;If you get what I'm looking for and have enough sauce to get cooking, you can stop reading. (Just link me your article in the comments after plz.) But if you'd like a more thorough explanation of what I mean, I want to give a brief overview of an article I would've found useful when I got started with JS. This won't be an actual 80/20 introduction to JavaScript, but I bet most of us are at least somewhat familiar in order for this to make sense, and get a better idea of the type of article I'd love to see.&lt;/p&gt;




&lt;h3&gt;
  
  
  1. In JavaScript, we pass around functions like they're your ex-boyfriend.
&lt;/h3&gt;

&lt;p&gt;Whether or not it's a good idea, in JavaScript we like to encapsulate functionality in functions, and then pass them around like memory overhead isn't a thing. Because functions are &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function" rel="noopener noreferrer"&gt;first-class constructs&lt;/a&gt; in JavaScript, we can, and do, pass them around like variables all the time. This is a common pattern in functional programming, which is much more popular now, and most languages now support lambdas and closures. This wasn't always true though, and I used to find the function shenanigans of JavaScript very confusing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;passing in functions as parameters to functions&lt;/li&gt;
&lt;li&gt;passing in function &lt;em&gt;calls&lt;/em&gt; as parameters to other functions&lt;/li&gt;
&lt;li&gt;returning function arguments as functions within objects&lt;/li&gt;
&lt;li&gt;calling a function's mom within another function and having &lt;em&gt;her&lt;/em&gt; mom do some work from within yet another function&lt;/li&gt;
&lt;li&gt;having said grandma function &lt;em&gt;promise&lt;/em&gt; to return a modified clone of herself in the future unless there's some sort of unhandled network error&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As such, here's a short guide to get you up-to-speed with some of the most common ways you'll see functions being passed around in JS. &lt;em&gt;(Note to the reader: if this was an actual article, I would spend a LOT more time explaining closures, but this is just an example.)&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// An imported function&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;importedFunction&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;some-npm-dependency&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// A regular JS function&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;goodLittleFunction&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Do stuff here&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// A gross un-labled arrow function that&lt;/span&gt;
&lt;span class="c1"&gt;// is super popular to use right now because&lt;/span&gt;
&lt;span class="c1"&gt;// it means JS devs don't have to bother&lt;/span&gt;
&lt;span class="c1"&gt;// learning scoping rules or prototype&lt;/span&gt;
&lt;span class="c1"&gt;// binding, even though it prevents error&lt;/span&gt;
&lt;span class="c1"&gt;// messages from being nicely labeled&lt;/span&gt;
&lt;span class="c1"&gt;// because they are anonymous. Have you&lt;/span&gt;
&lt;span class="c1"&gt;// ever had a moment in debugging where&lt;/span&gt;
&lt;span class="c1"&gt;// you go "and then some random function&lt;/span&gt;
&lt;span class="c1"&gt;// gets called, but I don't care which&lt;/span&gt;
&lt;span class="c1"&gt;// function it is, event though this is&lt;/span&gt;
&lt;span class="c1"&gt;// where the error is coming from"?&lt;/span&gt;
&lt;span class="c1"&gt;// No?&lt;/span&gt;
&lt;span class="c1"&gt;// Well we are JS devs, and that's how&lt;/span&gt;
&lt;span class="c1"&gt;// we decided we're going to do things.&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;lilArrowFunction&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Do stuff here&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// Sometimes arrow functions get a single parameter&lt;/span&gt;
&lt;span class="c1"&gt;// as input, in which case you can skip the parens&lt;/span&gt;
&lt;span class="c1"&gt;// altogether. You can tell it's still an arrow&lt;/span&gt;
&lt;span class="c1"&gt;// function because it still has an arrow, but my&lt;/span&gt;
&lt;span class="c1"&gt;// brain is wonky and I used to have trouble parsing&lt;/span&gt;
&lt;span class="c1"&gt;// arrow functions without parentheses in my head.&lt;/span&gt;
&lt;span class="c1"&gt;// Also, notice this function is returning another&lt;/span&gt;
&lt;span class="c1"&gt;// function, which will be modified by whatever&lt;/span&gt;
&lt;span class="c1"&gt;// argument you passed in to the function. This is&lt;/span&gt;
&lt;span class="c1"&gt;// a very common pattern in JS, and functional&lt;/span&gt;
&lt;span class="c1"&gt;// programming in general.&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;yourExBoyfriend&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;param&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Do stuff with `param`.&lt;/span&gt;
    &lt;span class="c1"&gt;// The effect of this returned function&lt;/span&gt;
    &lt;span class="c1"&gt;// will be permanently different depending&lt;/span&gt;
    &lt;span class="c1"&gt;// on what the value of `param` is.&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// Now let's demonstrate how you'll see functions being used.&lt;/span&gt;

&lt;span class="c1"&gt;// Here we pass a function to another function. If you check&lt;/span&gt;
&lt;span class="c1"&gt;// the documentation to `importedFunction`, it likely uses&lt;/span&gt;
&lt;span class="c1"&gt;// this passed-in function as a callback, meaning it will do&lt;/span&gt;
&lt;span class="c1"&gt;// the work that `importedFunction` is supposed to do, and&lt;/span&gt;
&lt;span class="c1"&gt;// then it will do whatever you specify in `goodLittleFunction`.&lt;/span&gt;
&lt;span class="c1"&gt;// This is a way for you to specify your own functionality&lt;/span&gt;
&lt;span class="c1"&gt;// that gets run as a custom step in other people's code.&lt;/span&gt;
&lt;span class="nf"&gt;importedFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;goodLittleFunction&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Here we are creating a new arrow function at the same time&lt;/span&gt;
&lt;span class="c1"&gt;// we pass it into `importedFunction` as a parameter. This is&lt;/span&gt;
&lt;span class="c1"&gt;// how we can quickly encapsulate a function *call* as the work&lt;/span&gt;
&lt;span class="c1"&gt;// that needs to be done.&lt;/span&gt;
&lt;span class="nf"&gt;importedFunction&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;lilArrowFunction&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="c1"&gt;// You'll often see this when dealing with DOM event handlers&lt;/span&gt;
&lt;span class="c1"&gt;// on the browser. In the following, when the user clicks the&lt;/span&gt;
&lt;span class="c1"&gt;// button, the browser will call our `lilArrowFunction`.&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;my-button&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;lilArrowFunction&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Often, you'll see badly-named parameters being used in the body&lt;/span&gt;
&lt;span class="c1"&gt;// of these types of functions. Read the documentation, and you'll&lt;/span&gt;
&lt;span class="c1"&gt;// likely see that the function you're using exposes some kind of&lt;/span&gt;
&lt;span class="c1"&gt;// object you're supposed to use to derive your functionality.&lt;/span&gt;
&lt;span class="nf"&gt;importedFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;yourExBoyfriend&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="c1"&gt;// In the example below, the browser gives you an object containing&lt;/span&gt;
&lt;span class="c1"&gt;// a bunch of information about the event that triggered the event&lt;/span&gt;
&lt;span class="c1"&gt;// listener. Here, the user has badly named the event parameter `e`&lt;/span&gt;
&lt;span class="c1"&gt;// for convenience, which is only acceptable because this is a VERY&lt;/span&gt;
&lt;span class="c1"&gt;// common use case, and it prevents the developer from typing out&lt;/span&gt;
&lt;span class="c1"&gt;// 'event' in its entirety repeatedly. I'd say it even helps&lt;/span&gt;
&lt;span class="c1"&gt;// readability. You'll likely also see `fn`, `err`, `msg`&lt;/span&gt;
&lt;span class="c1"&gt;// and a few other obvious ones, but there are also some other&lt;/span&gt;
&lt;span class="c1"&gt;// common ones that are a bit less obvious:&lt;/span&gt;
&lt;span class="c1"&gt;// - `cb` for a callback function, a.k.a. a wrapped function call&lt;/span&gt;
&lt;span class="c1"&gt;// - `req` and `res` for the request and response objects of some&lt;/span&gt;
&lt;span class="c1"&gt;//   network functionality, such as `fetch`, or in web server code.&lt;/span&gt;
&lt;span class="c1"&gt;// - `el` for an HTML element reference in browser code&lt;/span&gt;
&lt;span class="c1"&gt;// - `ctx` for 'context' used in browser graphics APIs and in code&lt;/span&gt;
&lt;span class="c1"&gt;//   that encapsulates some sort of state that is passed around.&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;midas-input&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;input&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;gold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. JS dev tooling is complex; use &lt;a href="https://bun.sh" rel="noopener noreferrer"&gt;Bun&lt;/a&gt; instead
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;(Note to the reader: notice that this is not relevant to reading code, but writing it. Having an opinion here is OK, because you're not tricking the reader into thinking this is how things are commonly done, but rather a tip on how THEY can get started more easily. However, if I wanted to show some typical server code, I would not be appropriate to use Bun or &lt;a href="https://deno.com" rel="noopener noreferrer"&gt;Deno&lt;/a&gt;; I would just show some common Node and &lt;a href="https://expressjs.com" rel="noopener noreferrer"&gt;Express&lt;/a&gt; code.)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You want to throw some JS on the browser. You &lt;em&gt;could&lt;/em&gt; install a thousand dev dependencies, install React for no reason, run a local development server, have the dev server compile your React into HTML, and a bunch more cartoonishly exaggerated steps in the style of a 90s infomercial... or you could just install Bun!&lt;/p&gt;

&lt;h4&gt;
  
  
  Step 1: install Bun
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-fsSL&lt;/span&gt; https://bun.sh/install | bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Step 2: start a new Bun project
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;my-experiment &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nb"&gt;cd &lt;/span&gt;my-experiment &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; bun init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Step 3: write your HTML boilerplate
&lt;/h4&gt;

&lt;p&gt;index.html&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;http-equiv=&lt;/span&gt;&lt;span class="s"&gt;"X-UA-Compatible"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"ie=edge"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;My JS Experiment&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"my-experiment.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Step 4: install an NPM dependency
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bun i cowsay
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Step 5: use that dependency in your JS
&lt;/h4&gt;

&lt;p&gt;my-experiment.js&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;cowsay&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;cowsay&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cowDialog&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;cowsay&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;say&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I don't like to say 'moo'&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cowDialog&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Step 6: Directly execute your HTML using Bun!
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bun ./index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Bun v1.2.4 ready in 47.77 ms

➜ http://localhost:3000/

Press h + Enter to show shortcuts
Bundled page in 22ms: index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Bam! Now you can open &lt;code&gt;http://localhost:3000/&lt;/code&gt; on your browser, and should see the following in your dev console:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; ___________________________
&amp;lt; I don't like to say 'moo' &amp;gt;
 ---------------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Now Go Write Me Some Articles! Pretty Please.
&lt;/h2&gt;

&lt;p&gt;That's my basic idea for these 80/20 articles. If you like it, I'd love to see one for whatever language you want to throw at me: &lt;strong&gt;React&lt;/strong&gt;, &lt;strong&gt;Julia&lt;/strong&gt;, &lt;strong&gt;Svelte&lt;/strong&gt;, &lt;strong&gt;Nushell&lt;/strong&gt;, &lt;strong&gt;C++&lt;/strong&gt;, &lt;strong&gt;Zig&lt;/strong&gt;, &lt;strong&gt;Odin&lt;/strong&gt;, &lt;strong&gt;Nim&lt;/strong&gt;, &lt;strong&gt;Crystal&lt;/strong&gt;, whatever! And remember to link me in a comment so I can see them. And write the Rust one ASAP because I'm over here waiting. Get to it. Up and atom. Remember I'm paying you nothing!&lt;/p&gt;

</description>
      <category>programming</category>
      <category>rust</category>
      <category>productivity</category>
      <category>help</category>
    </item>
    <item>
      <title>Dark Mode is breaking your branding—easy fix!</title>
      <dc:creator>Uli Troyo</dc:creator>
      <pubDate>Tue, 29 Jun 2021 01:59:47 +0000</pubDate>
      <link>https://forem.com/ulitroyo/about-your-transparent-logo-1ik0</link>
      <guid>https://forem.com/ulitroyo/about-your-transparent-logo-1ik0</guid>
      <description>&lt;p&gt;As more sites and apps support dark mode, I've seen tons of logos and profile avatars saved as transparent PNGs and SVGs begin to break. The fix is simple, though: make sure that your art has a border in a contrasting color. If your art is all black (the most common situation) or otherwise mostly dark, a thin white border will be invisible on a light background, but will set off your art nicely on a dark mode background. Similarly, if your art contains a lot of light color, a dark border will prevent it from washing out on light backgrounds.&lt;/p&gt;

&lt;p&gt;Below is my example for both cases. Notice how I add a 10-pixel white border on the first logo to suit the art, and a 1-pixel border &lt;em&gt;and&lt;/em&gt; a drop-shadow to the second logo to keep it subtle since the art is more complex:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgtp39rvy6eoatyprrp6k.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgtp39rvy6eoatyprrp6k.jpg" alt="Demo of logos with transparency shown over backgrounds of their same color, compared to the same transparent logos using a contrasting border." width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's literally all I have to say! I've seen this a lot in the wild and it's apparent it bears to be mentioned. I hope you didn't need the help, but you're welcome if it did ;)&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>images</category>
    </item>
    <item>
      <title>Why Everyone Is Fighting About CSS/UX and JS</title>
      <dc:creator>Uli Troyo</dc:creator>
      <pubDate>Sat, 02 Feb 2019 18:01:02 +0000</pubDate>
      <link>https://forem.com/ulitroyo/why-everyone-is-fighting-about-cssux-and-js-4cpp</link>
      <guid>https://forem.com/ulitroyo/why-everyone-is-fighting-about-cssux-and-js-4cpp</guid>
      <description>&lt;p&gt;&lt;em&gt;TL;DR: There isn’t one. There’s no short way to say any of this, yet one of the reasons you keep fighting is because you misunderstand what the fight is about. Read the damn article. Please and thank you.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I hate intros. Let’s just dive in and I’ll fill you in where pertinent.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Great Divide
&lt;/h2&gt;

&lt;p&gt;Chris Coiyer’s essay &lt;a href="https://css-tricks.com/the-great-divide/" rel="noopener noreferrer"&gt;"The Great Divide"&lt;/a&gt; broke the frontend dev community, inviting no small amount of snarkiness and drama on Twitter and elsewhere. In case you haven’t read the piece (and you should), it revolves around an observed division between frontend developers who use primarily JavaScript-related technologies to do their job, and frontend developers for whom JavaScript is only one of the many technologies they employ to do their more UX-centric job. The thing that everyone seems to be missing is that this is not a prescriptive view of how frontend-land should work, but rather, a descriptive view derived from real-life interviews Chris and his buddy Dave Rupert have conducted on their podcast &lt;a href="https://shoptalkshow.com/" rel="noopener noreferrer"&gt;ShopTalk Show&lt;/a&gt; (dot com).&lt;/p&gt;

&lt;p&gt;In other words, the split is real. Chris and Dave are merely putting it into words.&lt;/p&gt;

&lt;p&gt;Chris concludes in “The Great Divide” that this rift in focus is happening because frontend-land has basically ballooned away from the old context where frontend development was comprised of merely styling server-rendered components. He notes that many frontend developers are using JavaScript in a way more closely reminiscent of usual MVC-style backend programming, while others are focusing on using a more rounded set of tools, and primarily CSS, to make the frontend experience better and more accessible, and thus, if we’re to helpfully describe the jobs frontend developers are being hired to do, we should be distinguishing between JS Engineers and UX Engineers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Class Warfare
&lt;/h2&gt;

&lt;p&gt;The discussion, though, immediately devolved into whether JS Engineers (I’ve gone ahead and accepted Chris’s proposed nomenclature) do more work than UX Engineers, and whether UX Engineers deserve to be paid the same as JS Engineers.&lt;/p&gt;

&lt;p&gt;I should note: if you've seen the discussion online and the outline I'm presenting doesn't jibe with your version of the events, that's fine. The web is a big place, and it's entirely possible you and I have witnessed two sides of the same coin. I'm trying to contextualize what &lt;em&gt;I've&lt;/em&gt; seen with this narrative I'm building; I hope that's OK with you.&lt;/p&gt;

&lt;p&gt;Anyway, as a surprise to nobody in the industry, we have a recurring theme of derision and general snootiness toward other people’s tech, an attitude which developer Aurynn Shaw incisively terms &lt;a href="https://blog.aurynn.com/2015/12/16-contempt-culture" rel="noopener noreferrer"&gt;“contempt culture”&lt;/a&gt;. In this case, we began to see this contempt target UX Engineers... and I’m certain a number of you reading this are now thinking “you mean designers, though, right? How is design also engineering?”&lt;/p&gt;

&lt;p&gt;Because here's the thing: even when no offense is meant, a lot of people don’t think UX Engineers are a thing, or that they’re glorified web designers at best. I observed this same attitude in the discussions surrounding the ShopTalk interviews of people who were primarily doing design-centric work. I’m not going to nag you one way or the other about whether this is correct; I’m merely pointing out that this is an attitude that people hold.&lt;/p&gt;

&lt;p&gt;I'm likewise going to point out that people who take part in this culture of contempt often don't mean harm with their dismissiveness (citation needed, sure, but it’s &lt;em&gt;my&lt;/em&gt; writeup). People are not necessarily trying to be jerks when they dismiss Ruby for being slow, nor when they dismiss JavaScript for “having been written in ten days”, nor when they dismiss Java as tech for stuffy old farts, nor when they dismiss Elixir as a toy language, nor when they dismiss PHP for being PHP, nor when they dismiss web development as “not real programming”, nor when they dismiss UX Engineers as “not engineers”. Sometimes the snootiness is just abrasive opinion based on passive biased observation.&lt;/p&gt;

&lt;p&gt;Not many are keen on defending this behavior, though, because to people specializing in the technologies being disdained, these opinions often constitute a direct attack. You can pin a huge asterisk on this point, but basically: turns out when a person feels other people are shitting on the thing that pays the bills, that person might (rightly or understandably, your choice) get defensive. And that’s precisely what we saw on Twitter.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://labs.jensimmons.com/" rel="noopener noreferrer"&gt;Jen Simmons&lt;/a&gt; (W3C's Working Group, Mozilla, Layout Land) describes the animosity toward UX Engineers as “class warfare”, and shot a number of choice spicy tweets toward a particular lean of JS Engineers:&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089611136666927106-446" src="https://platform.twitter.com/embed/Tweet.html?id=1089611136666927106"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089611136666927106-446');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089611136666927106&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089611137459671040-594" src="https://platform.twitter.com/embed/Tweet.html?id=1089611137459671040"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089611137459671040-594');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089611137459671040&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089611138176860161-614" src="https://platform.twitter.com/embed/Tweet.html?id=1089611138176860161"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089611138176860161-614');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089611138176860161&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089611138906636290-885" src="https://platform.twitter.com/embed/Tweet.html?id=1089611138906636290"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089611138906636290-885');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089611138906636290&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;I’m not doing you the (dis)favor of including any of the shittier tweets thereafter flung in Jen's direction: it’s the web—use your imagination. On the more sensible side of things, though, this argument gets more nuanced. &lt;a href="https://github.com/gaearon" rel="noopener noreferrer"&gt;Dan Abramov&lt;/a&gt; (React, Redux, create-react-app) writes:&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089630864336740352-71" src="https://platform.twitter.com/embed/Tweet.html?id=1089630864336740352"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089630864336740352-71');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089630864336740352&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089631271309975553-125" src="https://platform.twitter.com/embed/Tweet.html?id=1089631271309975553"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089631271309975553-125');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089631271309975553&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089631513858228224-244" src="https://platform.twitter.com/embed/Tweet.html?id=1089631513858228224"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089631513858228224-244');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089631513858228224&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;I'm obviously putting Dan in the JS Engineer camp because, you know, React. Then there are people who don't fully identify with either of our new frontend designations. For example, &lt;a href="https://www.amazon.com/You-Dont-Know-Js-Book/dp/B01AY9P0P6" rel="noopener noreferrer"&gt;Kyle Simpson&lt;/a&gt; (You Don't Know JS, Frontend Masters) writes:&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1087514283817267201-180" src="https://platform.twitter.com/embed/Tweet.html?id=1087514283817267201"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1087514283817267201-180');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1087514283817267201&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1087514284660277249-541" src="https://platform.twitter.com/embed/Tweet.html?id=1087514284660277249"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1087514284660277249-541');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1087514284660277249&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1087514285637554176-222" src="https://platform.twitter.com/embed/Tweet.html?id=1087514285637554176"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1087514285637554176-222');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1087514285637554176&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;Among other opinions, though, you can see folks beginning to tire of the incessant barrage of negativity. &lt;a href="https://youtu.be/lK3OiJvwgSc" rel="noopener noreferrer"&gt;Das Surma&lt;/a&gt; (Google, HTTP203) sums it up thusly (and I really wish I could say “Surma surmises” but it’s wrong diction):&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1087415492116185089-662" src="https://platform.twitter.com/embed/Tweet.html?id=1087415492116185089"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1087415492116185089-662');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1087415492116185089&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;h2&gt;
  
  
  Basic as HTML
&lt;/h2&gt;

&lt;p&gt;By the time Surma makes this statement, though, we’ve lost all semblance of a common thread of discussion. It’s no longer about how frondend development is evolving, but about whether CSS and HTML are difficult as technologies, by way of defending people whose job might often go no further programming-wise (though in my case obviously not dismissing the wealth of education and experience required for UX Engineering).&lt;/p&gt;

&lt;p&gt;This is where &lt;a href="https://m.signalvnoise.com/author/dhh/" rel="noopener noreferrer"&gt;DHH&lt;/a&gt;, whose JavaScript framework &lt;a href="https://stimulusjs.org/" rel="noopener noreferrer"&gt;Stimulus&lt;/a&gt; (and indeed his entire work on &lt;a href="https://rubyonrails.org/" rel="noopener noreferrer"&gt;Rails&lt;/a&gt;) pivots on the idea that the web is becoming unnecessarily complex and we’re all better off focusing on making app development as straightforward as possible, gives us his unsurprisingly direct opinion that &lt;a href="https://m.signalvnoise.com/designing-for-the-web-ought-to-mean-making-html-and-css/" rel="noopener noreferrer"&gt;designing for the web ought to mean making HTML and CSS&lt;/a&gt;. Here's his tweet on the subject:&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1088234367715921920-288" src="https://platform.twitter.com/embed/Tweet.html?id=1088234367715921920"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1088234367715921920-288');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1088234367715921920&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;I’ll admit that I think the discussion did seem to have jumped the shark a bit around the time DHH said this (though in the name of defending UX Engineers, so I’m not faulting anyone).... I mean, isn’t the whole point of web technologies to be accessible? Shouldn’t we take pride on the fact that HTML and CSS are as easy as they are powerful?&lt;/p&gt;

&lt;h2&gt;
  
  
  Wait, what were we talking about?
&lt;/h2&gt;

&lt;p&gt;Somewhere around this point, there seemed to be a shift in the atmosphere: a secondary argument began to emerge... and it is where I think everything became real convoluted, and it's where people are having trouble reconciling what the hell is even going on with this whole UX vs. JS thing. Because while one side was fighting about whether UX is as cool as JS or whatever, an adjacent and more interesting talk began to make its way forward...&lt;/p&gt;

&lt;p&gt;From my personal vantage, it started with DHH, who goes on to make a second appearance in this story with an observation about the state of web technologies, this time in a post about how &lt;a href="https://m.signalvnoise.com/paying-tribute-to-the-web-with-view-source/" rel="noopener noreferrer"&gt;View Source is on the decline and how we shouldn’t let it die&lt;/a&gt;. Here's his tweet on that subject:&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089179428788133888-137" src="https://platform.twitter.com/embed/Tweet.html?id=1089179428788133888"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089179428788133888-137');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089179428788133888&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;(Here &lt;a href="https://tomdale.net/" rel="noopener noreferrer"&gt;Tom Dale&lt;/a&gt; throws a spicy one at DHH; I'm including these for no better reason than it's funny:)&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089230610743332865-292" src="https://platform.twitter.com/embed/Tweet.html?id=1089230610743332865"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089230610743332865-292');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089230610743332865&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1089284763230195717-792" src="https://platform.twitter.com/embed/Tweet.html?id=1089284763230195717"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1089284763230195717-792');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089284763230195717&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;Anyway, the idea that View Source is worth saving is pretty interesting, because I knew I couldn’t be the only one who thinks the original discussion is coalescing into a second and more nuanced conversation, namely: &lt;a href="https://twobithistory.org/2018/05/27/semantic-web.html" rel="noopener noreferrer"&gt;what is going on with the semantic web?&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Wait, what? Who is even bringing up the semantic web?
&lt;/h2&gt;

&lt;p&gt;Well, look, allow me a brief leap in context. In case you're not familiar and didn't bother reading the article I linked to just now, the semantic web was Sir Tim-Berners Lee's idea for the future of the web, where web pages would be intelligible to humans as well as computers. To be realistic about it, though, the semantic web ultimately amounted to not much more than a bunch of &lt;a href="https://schema.org/" rel="noopener noreferrer"&gt;schema tags&lt;/a&gt; that we were supposed to throw into our HTML to make it easier for Google to do their job, but while it's fun to be cynical about it, let's not forget the real reason the notion of the semantic web exists: the dream of a decentralized web where everyone owns their data and &lt;a href="https://www.theguardian.com/technology/2010/nov/22/tim-berners-lee-facebook" rel="noopener noreferrer"&gt;information silos aren't a thing&lt;/a&gt;. More pertinently, though, the semantic web illustrates that, ever since the beginning of the web, there's been the idea that &lt;strong&gt;the web is meant to be accessible and open&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Agree or disagree—not the point. I'm only claiming &lt;em&gt;this&lt;/em&gt; is what is at the heart of this second round of the fight pitting JS against UX: whether or not JS is becoming bloat that is keeping the web from being accessible and open.&lt;/p&gt;

&lt;p&gt;As you can probably tell, this &lt;em&gt;also&lt;/em&gt; runs in contempt culture territory, because it implies that frontend Javascript technologies are bad for the web. And while I think this argument has more intellectual merit than whether UX engineers are less cool than JS engineers or whatever, as you might infer, things once again got pretty heated. For the sake of brevity, here's a cursory list of the types of arguments being made:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Some people argue that using so much JS on the frontend is creating a scene where the fabric of the web that's supposed to tie us together is no longer human-accessible (implication being that's a problem).&lt;/li&gt;
&lt;li&gt;Some people argue that it doesn't matter because the web is only a delivery method for digital products.&lt;/li&gt;
&lt;li&gt;Some people argue that JS frameworks make the web impractical or inaccessible for people with accessibility needs.&lt;/li&gt;
&lt;li&gt;Some people argue that, while accessibility concerns are a valid criticism, it doesn't mean that frameworks and best practices aren't still evolving and this is a solvable problem.&lt;/li&gt;
&lt;li&gt;Some people argue that frameworks are making people overly reliant on technologies not inherent to the web, and new developers are losing grasp of the possibilities of raw technologies.&lt;/li&gt;
&lt;li&gt;Some people argue that frameworks help tame the complexity of the web and allow people to become productive faster.&lt;/li&gt;
&lt;li&gt;Some people argue that frameworks are needlessly bulky and make the web experience worse for people with crappier internet.&lt;/li&gt;
&lt;li&gt;Some people argue that's &lt;em&gt;also&lt;/em&gt; a solvable problem....&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I wanted to back each of those sentiments with individual tweets expressing them concretely, but that's a &lt;em&gt;lot&lt;/em&gt; of work, so I'm using my editorial discretion and not doing any of that. However, you can go on Twitter or Dev.to or Medium and do your own research—people &lt;em&gt;are&lt;/em&gt; expressing these opinions.&lt;/p&gt;

&lt;h2&gt;
  
  
  None of this is new
&lt;/h2&gt;

&lt;p&gt;This whole fight about the state and future of the web has long been a simmering disturbance in the Force, usually felt by developers as no more than a dull background throb, but every once in a while coming back with a jolt. This is evidently one such time. As developers though, we recognize this recurring argument as the worn motif of old, morphed but yet familiar, and existing as long as our industry has existed: &lt;strong&gt;what role should computers play on the theme of our collective human experience?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;...yeah, OK—I'll tone down the philosophical flight of fancy.&lt;/p&gt;

&lt;p&gt;But you &lt;em&gt;know&lt;/em&gt; what I'm saying, at least. This is the industry that coined the &lt;a href="https://en.wikipedia.org/wiki/Hacker_ethic" rel="noopener noreferrer"&gt;hacker ethic&lt;/a&gt;, and &lt;a href="https://www.gnu.org/philosophy/free-sw.en.html" rel="noopener noreferrer"&gt;free software&lt;/a&gt;, and &lt;a href="https://opensource.org/osd-annotated" rel="noopener noreferrer"&gt;open source&lt;/a&gt;, and &lt;a href="https://creativecommons.org/about/" rel="noopener noreferrer"&gt;Creative Commons&lt;/a&gt;, and "&lt;a href="https://medium.com/backchannel/the-definitive-story-of-information-wants-to-be-free-a8d95427641c" rel="noopener noreferrer"&gt;information wants to be free&lt;/a&gt;," and the aforementioned &lt;a href="https://www-sop.inria.fr/acacia/cours/essi2006/Scientific%20American_%20Feature%20Article_%20The%20Semantic%20Web_%20May%202001.pdf" rel="noopener noreferrer"&gt;semantic web&lt;/a&gt;, and shit, we could even take it as far back as Doug Engelbart's notion of &lt;a href="http://dougengelbart.org/content/view/138/000/" rel="noopener noreferrer"&gt;augmenting human intelligence with computers&lt;/a&gt;. All I'm saying is that developers have been known to entertain thoughts about the nature of the relationship between humans and computers.&lt;/p&gt;

&lt;p&gt;So one good thing that's emerged from this fight is a renewed vigor in visiting this topic from the point of view of the web: what do we want out of it? What do we want the web to look like? What's worth preserving, and what's expendable? What new features do we want to see? Who's role is it to bring this all about? And what role will frontend engineers of every persuasion play?&lt;/p&gt;

&lt;p&gt;Indeed, some of the people I've already mentioned in tweets have some pretty sharp observations on the future of the web. For example, in his excellent talk about the future of JavaScript, Kyle Simpson talks about whether we should let JavaScript become a mere compilation target (&lt;a href="https://youtu.be/lDLQA6lQSFg?t=1670" rel="noopener noreferrer"&gt;relevant bits at 27:50&lt;/a&gt;):&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/lDLQA6lQSFg"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;And in one of her great videos about modern CSS, Jen Simmons recommends to stop reaching for frameworks such as Bootstrap and to begin to use raw CSS and all its awesome features (&lt;a href="https://youtu.be/0Gr1XSyxZy0?t=509" rel="noopener noreferrer"&gt;relevant bits at 8:29&lt;/a&gt;):&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/0Gr1XSyxZy0"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;And it couldn’t hurt to also watch this other excellent talk about why the semantic web as originally envisioned failed, and what we can do about it (&lt;a href="https://youtu.be/oKiXpO2rbJM?t=4164" rel="noopener noreferrer"&gt;summary slide thrown at around 1:09:24&lt;/a&gt;).&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/oKiXpO2rbJM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;But maybe I digress....&lt;/p&gt;

&lt;h2&gt;
  
  
  Get to the point, author guy
&lt;/h2&gt;

&lt;p&gt;Yeah, ok. My point is that there are a number of us (whoops, I guess I &lt;em&gt;am&lt;/em&gt; choosing sides after all) who think the web should be a batteries-included, accessible platform for everyone, and that we should try hard to maintain its open and semantic nature. Some of us (me) even go so far as to buy into Sir Tim Berners-Lee’s idea that the web should be wholly decetralized and become &lt;a href="https://solid.inrupt.com/docs/expressing-ld-with-turtle" rel="noopener noreferrer"&gt;solid scheming turtles all the way down&lt;/a&gt; or whatever. In this newly morphed discussion, let's call this extreme &lt;strong&gt;side A&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Then there’s others who think that it doesn’t matter if the web is just a compilation target: that the web only matters insofar as people are using it for real business purposes, and if this is so, then our only concern should be to deliver a good experience to our product’s users, and this hippy-dippy notion of the web as a place where we can hold hands and view readable source be damned. Let’s call this extreme &lt;strong&gt;side B&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;No doubt, most people will have opinions that fall somewhere along that continuum, rather than at either extreme.&lt;/strong&gt; To conclude, though:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Chris Coiyer’s “the Great Divide” is meant to be descriptive, not prescriptive, of the state of frontend development.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The conversation of whether UX Engineers should be paid as much as JS Engineers is mired in misunderstanding of what the hell UX Engineers even do and whether the appellation is just a fancy new name for “designers”, a word which in this context seems to carry the weight of substantial misplaced disgust. I would stay away from this.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The conversation among &lt;em&gt;sensible&lt;/em&gt; developers centers more around whether it’s OK or not that we’re using so much JS framework magic on the frontend that it’s in fact evolving the industry—less like &lt;a href="https://bulbapedia.bulbagarden.net/wiki/Evolution" rel="noopener noreferrer"&gt;gradually leveling up a Pokémon&lt;/a&gt;, and more akin to &lt;a href="https://bulbapedia.bulbagarden.net/wiki/Evolutionary_stone" rel="noopener noreferrer"&gt;forcing a Thunderstone-induced transformation on Pikachu&lt;/a&gt;. I think there are good points to be had either way, but everyone involved would probably benefit from being careful not to tread in contempt-culture territory. Not that you need &lt;em&gt;me&lt;/em&gt; refereeing your shit, but you know, it's my blog.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Also, no surprises, but Twitter commenters who are &lt;em&gt;not&lt;/em&gt; sensible can indeed be so much fodder for a hefty trash compactor.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;But fuck’em, because there’s a neat adult conversation to be had about the future of the web &lt;em&gt;in spite&lt;/em&gt; of these people, so let’s, you know, get crackin' on that front: let's discuss the role of JS frameworks; let's discuss whether Web Assembly is really going to replace JavaScript, and whether we want it to; let's even discuss &lt;a href="https://youtu.be/adgI8-W1VjE" rel="noopener noreferrer"&gt;all the great new features available on the web...&lt;/a&gt; There's a lot to talk about, valid interpretations of our future as web denizens and as developers, and we should definitely sit down and talk it out.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You go first, though.&lt;/p&gt;




</description>
      <category>javascript</category>
      <category>css</category>
      <category>webdev</category>
      <category>internetdrama</category>
    </item>
  </channel>
</rss>
