David K 🎹
@DavidKPiano
Followers
70K
Following
95K
Media
1K
Statuses
24K
Making state machines at @statelyai · prev. @Microsoft · I play piano
Orlando, FL
Joined December 2012
We're making it even easier to create state diagrams. ➡️ state . new
40
187
2K
Facebook is extremely over-engineered for a birthday reminder app.
88
6K
45K
Interviewer:.Invert this binary tree. Junior dev:.Here's the algorithm I memorized. Experienced dev:.Let me find a library for that. Senior dev:.Does inverting the tree align with our core business objectives?.
136
464
9K
Developers:.lets/.├ store.├ files.├ in.└ some/. ├ super. ├ organized. └ opinionated/. ├ hierarchical. └ structure. Also developers: .import { something } from ". /. /. /. /. /. /. /".
136
2K
7K
Junior dev: "why isn't this working?".Senior dev: "oh, you just need to do X, Y, and Z".Junior dev: (wow they're so smart).Senior dev: (wow I made that mistake so many times).
48
1K
6K
GitHub Copilot is really amazing. I used to spend hours writing error-prone & sometimes incorrect code manually, but now, that error-prone incorrect code is automatically generated in seconds.
48
354
5K
Developers:."I guess accessibility is important to some people, we'll get around to it". Developers at conferences:.🗣️ "CAN YOU INCREASE THE FONT SIZE I CAN'T READ THE CODE".
24
1K
5K
⚛️ React tip: when conditionally rendering component based on some string enum (like a role), use an object to map enum values to components. This can be cleaner than using conditional operators, and it keeps the logic organized & clear.
96
596
5K
Junior developers:. "I have no idea how to solve this one problem; I'll never get good if I just keep Googling for the answer". Senior developers:. (46 tabs open to Google and StackOverflow for one problem).
109
901
4K
Fun fact: "auth" is short for "it's either authentication or authorization but I don't remember the difference right now".
58
231
4K
⚛️ React tip: for most forms, you don't need useState(). or any hooks at all! You can read form data directly from the form by element name:. Object.fromEntries(new FormData(formEl));. You don't even need a form library most of the time.
102
513
4K
"I know enough TypeScript to be dangerous". "Yeah? How much TypeScript is that?". "any".
25
565
3K
There's a lot of confusion between what transpilers, compilers, and interpreters are. Transpilation *is* compilation. TypeScript is *compiled* to JavaScript. JavaScript is *interpreted* to Java by recruiters.
25
577
3K
today is national enemy day everyone post your nemesis.
41
128
3K
⚛️ Here's a fun React tip: `useReducer` is a better `useState`, and it's easier to adopt than you may think. Group related values together and spread them in the reducer. Then, updating is just:. updateThing({ prop: newValue }). And there's even more benefits to `useReducer`.
77
411
3K
🔢 Quick tip: if you're sorting an array in JS and keep forgetting how to write the compare functions (like I do), here's a mnemonic device:. (a, z) => a - z // ascending, like "a to z".(a, z) => z - a // descending, like "z to a". Hope this helps someone!
38
570
3K
TypeScript saves you so much time by preventing many programming mistakes & runtime errors, leaving you more time to do other things such as deciphering & fixing insignificant TypeScript errors.
60
297
3K
GitHub is acquiring all of npm. That's going to take them forever to download.
25
327
3K
Developers sitting in meetings and fixing CSS bugs all day:. "Funny how I get paid for this". Developers working on open-source software that thousands of companies and developers depend on:. "Funny how I don't get paid for this".
47
430
3K
We.really. really. really. really. really. really. really.lly. r e a l l y. really. really need you to learn CSS.
44
407
3K
I've noticed this lately:. Sometimes a 100-line code change takes under an hour. ⏳.And sometimes a 1-line code change takes over a day. 📅. Please don't judge effort by lines of code written.
58
818
3K
90% of software complexity comes from developers having opinions.
164
201
3K
Level of CSS skill required to. Style a new Bootstrap site:.■□□□□□□□□□. Style a website:.■■■□□□□□□□. Style an app:.■■■■■■□□□□. Style a legacy Bootstrap site:.■■■■■■■■■■■■■■■■■.
28
410
2K
Me: I think I'm done.JavaScript: Looks good to me.Me: Hope it works.JS: I believe in you.Me: . JS: undefined is not a function. Me: I thi--.TypeScript: Nope.Me: What abou--.TS: Wrong.Me: . TS: cannot invoke an expression whose type lacks a call signature.
20
677
2K
E2E tests make sure the app is working properly. Integration tests make sure the code is working properly. Unit tests make sure the developer is working properly.
18
584
2K
Fun discovery: the National Hurricane Center (NHC) website still uses <map> and <area> elements for these clickable graphics. It works without JS and can be easily made accessible (area & img elements need alt text).
48
107
2K
It's funny how tech companies are lazy about diversity & inclusion but absolutely insistent on supporting IE11 for like 3 users.
34
334
2K
Async/await is *too* convenient sometimes. One of the most common mistakes I've seen is missing try/catch blocks for handling errors. Assume every awaited statement can reject ⚠️. Try to catch this in code reviews.
68
207
2K
.red + .blue.🔴🔵 (adjacent sibling). red ~ .blue.🔴. 🔵 (general sibling). red > .blue.🔴. └🔵 (direct descendent). red .blue.🔴. └🔵 (literally no idea).
28
460
2K
The stages of debugging 3rd-party library code:. 1. console.log().2. Google the error message.3. Read StackOverflow links.4. Read GitHub issues.5. Delete cache & reinstall.6. Tweet.7. Cry.8. Consider a new career as an artisanal sourdough baker.9. ???.10. Read the source code.
78
383
2K
can(2020). beTheYear(). thatWeStop(). making(apis && libraries). thatLookLike(this)?.please;. (or am I the only one who doesn't like overused builder patterns?).
100
208
2K
@thekitze To be fair, all you need is the name of the things and their versions, not all the silly quotes and curly braces.
15
7
2K
I'm just kidding; they also undermine democracy and do massive user data collection at scale, which requires a lot of engineering effort.
6
113
2K
🔲 Merge Conflict: Accept All Current.🔲 Merge Conflict: Accept All Incoming.☑️ Merge Conflict: Accept the things I cannot change, the courage to change the things I can, and the wisdom to know the difference.
11
269
2K
1. Write messy code (MVP deadline).2. Ship it ASAP.3. Now refac— Fix showstopper bugs.4. Fix bugs that bugfixes caused.5. Okay, now refac— Add new features.6. Fix bugs that features caused.7. Unfix bugs that users thought were a feature.8. Refac— More features. 100. Refactor.
31
294
2K
TypeScript is great because instead of coding for less than ½ an hour and debugging for 2 hours, you can code for 2 hours and debug for less than ½ an hour.
52
271
2K
Quick CSS tip: did you know that you can use "empty" values to conditionally apply styles with CSS variables?. --some-var: /**/;.var(--some-var, value);. I call it the prop-and-lock technique, since it works like canal locks ⛴️🔒.
39
328
2K
❌ Front-end is harder than back-end.❌ Back-end is harder than front-end.✅ Both front-end and back-end have many different areas of focus with really deep rabbit holes, so their difficulty is asymptotically equivalent.
39
194
2K
I am convinced that the fastest way to refactor code (for better or worse) is to just post it on Twitter and wait a couple minutes.
33
137
2K
One of my favorite quick refactoring techniques is to keep the old function/method around and assert ✅ that the outputs are the same in development. This lets you validate refactors before writing tests. I use this with the Strangler Fig pattern:
34
187
2K
Okay, listen. If you're going to fetch in useEffect(. ), you should at least make sure that you're handling:. - Loading states.- Error handling (rejections & HTTP error codes).- Race conditions & cancellation. This isn't over-engineering. It's the minimum code to prevent bugs.
78
169
2K
If you have index files in your app code that look like this, just delete them ❌. Import directly; avoid barrel files. They don't really make your codebase more organized, and have a bunch of downsides.
82
124
2K
CSS-only! 🤯.
I made an SVG to show off Space Toggle as a state machine - no JS required! Vanilla #CSS binary logic goodness! Check it out here and lmk what you think!
19
195
2K
TypeScript has really good garbage collection. It just marked half of my code as garbage.
26
124
1K
Developers sitting in meetings and fixing CSS bugs all day:. "Funny how I get paid for this". Developers working on open-source software that thousands of companies and developers depend on:. "Funny how I don't get paid for this".
10
327
1K
🏠 New @CodePen: CSS Responsive House (with a sprinkle of JS) based on an awesome @dribbble by @galgalshir -
23
363
1K
Completely rewriting your codebase is a great way to eliminate legacy bugs and replace them with modern bugs.
28
146
1K
I'm convinced that being an expert in a technology is less "I am very smart and memorized the docs" and more "I struggled enough to know the workarounds to most of the weird parts".
18
198
1K
Fun fact: the variable `i` in for-loops (e.g., for (var i = 0; i < 10; i++)) stands for "index". In nested loops, `j` stands for "jndex" and `k` stands for "kndex".
45
148
1K
💥 React tip: if you have an effect that needs to be executed when your app starts, it's definitely okay to execute it *outside* the component, and *not* in useEffect(). This is especially true if the effect should only execute once, which is an unavoidable constraint sometimes.
44
152
1K
🚀 Excited to launch the first of many future tools on the XState Inspector!. Visualize and control any machine in your apps, regardless of framework, in real-time. Integrate it with one line of code. ▶️
57
292
1K
I don't believe that form input validity is boolean. There should be at least 3 states:. - Valid.- Invalid.- I literally just started typing, can you at least wait until I'm done before you yell at me.
34
64
1K
TypeScript tip: stop using optional properties so much in your internal app logic. ❌ prop?: string;.✅ prop: string | undefined;. Being explicit about undefined values eliminates the silent bugs that happen when you forget to provide a value.
64
100
1K
ChatGPT will never fully replace developers because there are still extremely difficult unsolved problems in software development, like whether or not to git rebase.
45
71
1K
It's amazing how often the difference between "I'll never understand how to do this" and "I'm pretty comfortable doing this" is literally just trying it once.
16
224
1K
✨ JavaScript tip: my new favorite way to turn an array into a key-value mapped object is by using `Object.fromEntries(. )`. Doesn't seem obvious at first, but it's really concise: . Object.fromEntries(. arr .map(item => [item.key, item.value]).);
43
114
1K
Loved this cursor glow by @linear so much that I had to recreate it with CSS and a little bit of JS on @CodePen: . 🔗 It uses CSS variables, radial gradients, and a clever inset to achieve the effect ✨
This is neat — the cursor glow hits the edges of neighboring boxes, but doesn't illuminate their fills until the mouse actually crosses over. Lovely work, as always 😍
22
163
1K
The five stages of @typescriptlang:. 🤨 Denial: "This doesn't make things any easier".😠 Anger: "Missing index signature!?".🤔 Bargaining: "<any>".😞 Depression: "I have to refactor everything".🙂 Acceptance: "Never doing another JS project without TS ever again".
40
318
1K
What I hear whenever someone complains about using a helpful 15 KB dependency in their 2.1 MB JavaScript app
15
191
1K
If you're new to web dev, the difference between HTML, CSS, and JS might be confusing. Let's clear it up:. HTML is how the website is *structured*. CSS is how the website *looks*. JS is how the website *works*. and how it sometimes *stops working*.
41
226
1K
Due to the current situation, it is recommended to avoid putting all state in a single, global state store and isolate your state locally instead, to prevent the spread of bugs. 🐞.
17
159
1K
Devs on the job hunt: you're in really high demand right now. You should be interviewing them just as much as they are interviewing you. Ask them about benefits. Ask them about company culture. Ask them to implement a string-to-integer conversion algorithm on their whiteboard.
18
148
1K
"Solving" a software problem by saying which tools or framework you'll use is like solving a math problem by saying which calculator you'll use. 🧮.
23
294
1K
Ever have one of those days where you have a solid 2-hour burst of productivity and then feel unproductive for the next 5 months?.
24
85
1K
🚀 Let's get visual. Excited to announce a major update to XState viz - you can now 💾 save, 🔗 share, and 🍴 fork statechart visualizations, as well as many more features + enhancements. Try it out: Example:
27
244
1K
XState v5 is finally here 🚀. → Express any logic, from promises to state machines.→ Much simpler API.→ Massively improved TypeScript experience.→ Smaller bundle size, zero deps.→ Advanced statechart features.→ New docs, examples++. npm i xstate
40
150
1K
⚛️ React tip: did you know that you can use the `key` prop to "reset" individual components? They're not only for lists!. Changing the key creates a new instance of the component. No more useState/useEffect juggling for these resetting use-cases. Demo:
45
177
1K
ℹ️ Quick tip - more often than not, "boolean flags" should be considered code smells. Consider using string enums instead:
59
316
1K
Gonna be honest, React devs: if your app logic is super simple and only requires fetching + displaying data (CRUD), the only state management you really need is React Query + *maybe* useState. Consider state management libraries when the logic gets more exciting than that.
40
131
1K
Super excited to announce Stately Studio 1.0 🚀 . We've been working hard to make app logic as visual & collaborative as possible with many new features:. 🤝 Teams + roles.📦 Private projects.✨ Editor improvements.⬆️ JS/TS Exports.➕ More!. Get started:
50
197
1K
Just a reminder that life's too short to reject someone's PR just because they did things differently than you would have done.
24
156
1K
State management libraries can be roughly categorized 2 ways:. ⏺ Single (global, atomic store) vs. multi (local, distributed).⚡️ Direct (manipulate state) vs. indirect (send events). Here's how I'd categorize some JS state management libraries:
25
234
1K
⚛️ React tip: `isFocused` should almost never be a prop. Focusing is a fire-and-forget effect, not a prop. Treating it like a prop can lead to undesirable UX, or impossible states:. <Input isFocused={true} />.<Input isFocused={true} /> . Use a ref and focus in event handlers.
21
117
1K
Hey React developers:. ┳┻| .┳┻| .┻┳|.┻┳| .┳┻| .┳┻| .┻┳| .┻┳| .┳┻| .┳┻| .┻┳| .┳┻| .┻┳| .┳┻| _ .┻┳| •.•) You don't need to worry.┳┻|⊂ﾉ about Suspense/Concurrent.┻┳| Mode right now.
28
114
1K
Pro-tip for UI developers: always assume that your users will rage-click any of your buttons multiple times out of frustration. Program accordingly.
33
124
1K
⚛️ Did you know that you can use CSS variables in @reactjs? Add them to the style={{. }} attribute for dynamic, customizable effects such as staggered animations:
20
266
1K
⚛️ React context tip that I didn't learn until recently:. The Provider is *optional* – you might not need it!. This makes working with React context simpler for singleton-like ("global") usage.
21
108
1K
🏪 Excited to announce XState Store!. → Extremely simple API.→ Extremely small (< 1kb min/gzip).→ XState-compatible (if you need the power).→ Extra strong typing (inferred!). npm i @xstate/store
56
139
1K
🖌️ I made a cheatsheet for event-driven finite state machines with @excalidraw! This describes the basic important concepts, and is applicable in any programming language.
17
234
1K
In JavaScript we've largely eschewed `var` in favor of `let` or `const`, and do-while loops in favor of for or while loops. but I just discovered that using `var` and do-while loops together can result in some pretty nice code (IMO):. Good idea? Bad idea?
70
88
987
Note to self: "/slackfont webdings" works and you will regret it
23
187
951
In-person meetings at the office are a wonderful way to help your developers take a break from being productive.
26
76
982