David K 🎹 @DavidKPiano Twitter profile

Pinned Tweet

David K 🎹

@DavidKPiano

1 year

We're making it even easier to create state diagrams. ➡️ state . new

37

188

2K

Last Seen Profiles

@mya_jesuss

@NatureComms

@TreoEileRIR

@bigtime

@BugleArchivist

@RealShaky69

@JimGlogowski

@hmmda900

@yuriichioo

@kha_ryn25

@NatGeoMag

@yorkshire_rfu

@bellehavenband

@BGrandmere

@concourseproj

@AlSkuratovich

@chaerinsource

@JElliottIndia

@bubbles_indo

@elkejinheaven

@xybox

@sniper_ma

@ICHRCanada

@sgnsfwtweet

@redcshidae

@thesapphirebook

@SNHU_Baseball

@park_eunrii

@wabsterr

@realHDGames

@piervak

@Lindyt18

@real_loveree

@runthenums

@tokyominato23_2

@TheMatrixMovie

David K 🎹

@DavidKPiano

4 years

Facebook is extremely over-engineered for a birthday reminder app

93

6K

47K

David K 🎹

@DavidKPiano

5 years

Developers: lets/ ├ store ├ files ├ in └ some/ ├ super ├ organized └ opinionated/ ├ hierarchical └ structure Also developers: import { something } from "../../../../../../../"

136

2K

7K

David K 🎹

@DavidKPiano

5 years

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

2K

6K

David K 🎹

@DavidKPiano

1 year

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.

51

376

5K

David K 🎹

@DavidKPiano

5 years

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"

25

1K

5K

David K 🎹

@DavidKPiano

2 years

⚛️ 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.

100

612

5K

David K 🎹

@DavidKPiano

6 years

The levels of testing code

44

2K

5K

David K 🎹

@DavidKPiano

4 years

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)

113

944

5K

David K 🎹

@DavidKPiano

2 years

⚛️ 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.

104

529

4K

David K 🎹

@DavidKPiano

5 years

"I know enough TypeScript to be dangerous" "Yeah? How much TypeScript is that?" "any"

26

588

4K

David K 🎹

@DavidKPiano

5 years

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

28

586

3K

David K 🎹

@DavidKPiano

1 year

⚛️ 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`...

81

422

3K

David K 🎹

@DavidKPiano

4 years

🔢 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!

40

591

3K

David K 🎹

@DavidKPiano

5 years

31

1K

3K

David K 🎹

@DavidKPiano

2 years

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

71

318

3K

David K 🎹

@DavidKPiano

4 years

GitHub is acquiring all of npm. That's going to take them forever to download.

29

343

3K

David K 🎹

@DavidKPiano

6 years

This can't just be me

34

966

3K

David K 🎹

@DavidKPiano

4 years

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

448

3K

David K 🎹

@DavidKPiano

5 years

We really really really really really really really lly r e a l l y really really need you to learn CSS.

47

428

3K

David K 🎹

@DavidKPiano

1 year

Software estimation is hard

53

278

3K

David K 🎹

@DavidKPiano

6 years

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.

60

865

3K

David K 🎹

@DavidKPiano

6 years

JavaScript equality is wild

30

886

3K

David K 🎹

@DavidKPiano

5 years

Level of CSS skill required to... Style a new Bootstrap site: ■□□□□□□□□□ Style a website: ■■■□□□□□□□ Style an app: ■■■■■■□□□□ Style a legacy Bootstrap site: ■■■■■■■■■■■■■■■■■

29

432

3K

David K 🎹

@DavidKPiano

6 years

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

22

697

2K

David K 🎹

@DavidKPiano

5 years

14

538

2K

David K 🎹

@DavidKPiano

4 years

It's funny how tech companies are lazy about diversity & inclusion but absolutely insistent on supporting IE11 for like 3 users

35

373

2K

David K 🎹

@DavidKPiano

4 years

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

606

2K

David K 🎹

@DavidKPiano

2 years

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.

73

211

2K

David K 🎹

@DavidKPiano

5 years

.red + .blue 🔴🔵 (adjacent sibling) .red ~ .blue 🔴...🔵 (general sibling) .red > .blue 🔴 └🔵 (direct descendent) .red .blue 🔴 . . . . . . . . . . . └🔵 (literally no idea)

29

472

2K

David K 🎹

@DavidKPiano

7 months

useEffect was a mistake useEffect was a mistake

108

72

2K

David K 🎹

@DavidKPiano

4 years

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

82

400

2K

David K 🎹

@DavidKPiano

4 years

can(2020) .beTheYear() .thatWeStop() .making(apis && libraries) .thatLookLike(this)?.please; (or am I the only one who doesn't like overused builder patterns?)

107

225

2K

David K 🎹

@DavidKPiano

4 years

I'm just kidding; they also undermine democracy and do massive user data collection at scale, which requires a lot of engineering effort.

6

123

2K

David K 🎹

@DavidKPiano

3 years

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

32

306

2K

David K 🎹

@DavidKPiano

4 years

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.

55

287

2K

David K 🎹

@DavidKPiano

3 years

Types of open-source libraries

26

405

2K

David K 🎹

@DavidKPiano

4 years

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 ⛴️🔒

40

340

2K

David K 🎹

@DavidKPiano

3 years

16

245

2K

David K 🎹

@DavidKPiano

3 years

❌ 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

40

202

2K

David K 🎹

@DavidKPiano

4 years

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.

37

142

2K

David K 🎹

@DavidKPiano

8 months

17

260

2K

David K 🎹

@DavidKPiano

2 years

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:

35

193

2K

David K 🎹

@DavidKPiano

4 years

CSS-only! 🤯

Jane Ori 💜 CSS Contortionist

@Jane0ri

4 years

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!

55

503

2K

19

204

2K

David K 🎹

@DavidKPiano

1 year

@gabe_g2i Make it $2 million and I'll also never use JavaScript again

16

23

2K

David K 🎹

@DavidKPiano

3 years

TypeScript has really good garbage collection It just marked half of my code as garbage

26

129

2K

David K 🎹

@DavidKPiano

4 years

David K 🎹

@DavidKPiano

4 years

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

448

3K

11

354

2K

David K 🎹

@DavidKPiano

7 years

🏠 New @CodePen : CSS Responsive House (with a sprinkle of JS) based on an awesome @dribbble by @galgalshir -

25

377

1K

David K 🎹

@DavidKPiano

2 years

useEffect tip: don't

76

131

1K

David K 🎹

@DavidKPiano

1 year

Completely rewriting your codebase is a great way to eliminate legacy bugs and replace them with modern bugs

31

149

1K

David K 🎹

@DavidKPiano

2 years

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"

19

208

1K

David K 🎹

@DavidKPiano

3 years

I love TypeScript. It keeps me from coding too fast.

38

108

1K

David K 🎹

@DavidKPiano

4 years

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".

49

157

1K

David K 🎹

@DavidKPiano

2 years

💥 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

David K 🎹

@DavidKPiano

4 years

🚀 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. ▶️

58

296

1K

David K 🎹

@DavidKPiano

3 years

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

66

1K

David K 🎹

@DavidKPiano

1 year

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

76

1K

David K 🎹

@DavidKPiano

4 years

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

237

1K

David K 🎹

@DavidKPiano

2 years

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 ✨

Brian Lovin

@brian_lovin

2 years

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 😍

29

72

1K

22

164

1K

David K 🎹

@DavidKPiano

9 months

✨ 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]) );

47

117

1K

David K 🎹

@DavidKPiano

5 years

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

326

1K

David K 🎹

@DavidKPiano

4 years

What I hear whenever someone complains about using a helpful 15 KB dependency in their 2.1 MB JavaScript app

16

204

1K

David K 🎹

@DavidKPiano

4 years

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*

42

230

1K

David K 🎹

@DavidKPiano

4 years

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

163

1K

David K 🎹

@DavidKPiano

3 years

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.

20

163

1K

David K 🎹

@DavidKPiano

5 years

"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. 🧮

25

313

1K

David K 🎹

@DavidKPiano

3 years

The life of an OSS maintainer 😅

18

133

1K

David K 🎹

@DavidKPiano

3 years

.meeting + .meeting { margin-top: 15min !important; }

21

160

1K

David K 🎹

@DavidKPiano

4 years

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?

25

91

1K

David K 🎹

@DavidKPiano

5 years

🚀 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

251

1K

David K 🎹

@DavidKPiano

2 years

⚛️ 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

191

1K

David K 🎹

@DavidKPiano

5 months

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

41

152

1K

David K 🎹

@DavidKPiano

2 years

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.

44

134

1K

David K 🎹

@DavidKPiano

6 years

ℹ️ Quick tip - more often than not, "boolean flags" should be considered code smells. Consider using string enums instead:

60

325

1K

David K 🎹

@DavidKPiano

2 years

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:

52

199

1K

David K 🎹

@DavidKPiano

4 years

Just a reminder that life's too short to reject someone's PR just because they did things differently than you would have done.

25

166

1K

David K 🎹

@DavidKPiano

4 years

Hey React developers: ┳┻| ┳┻| ┻┳| ┻┳| ┳┻| ┳┻| ┻┳| ┻┳| ┳┻| ┳┻| ┻┳| ┳┻| ┻┳| ┳┻| _ ┻┳| •.•) You don't need to worry ┳┻|⊂ﾉ about Suspense/Concurrent ┻┳| Mode right now

30

118

1K

David K 🎹

@DavidKPiano

2 years

⚛️ 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

120

1K

David K 🎹

@DavidKPiano

3 years

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

242

1K

David K 🎹

@DavidKPiano

3 years

Pro-tip for UI developers: always assume that your users will rage-click any of your buttons multiple times out of frustration. Program accordingly.

36

132

1K

David K 🎹

@DavidKPiano

2 years

⚛️ 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

111

1K

David K 🎹

@DavidKPiano

6 years

⚛️ 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

275

1K

David K 🎹

@DavidKPiano

4 years

Note to self: "/slackfont webdings" works and you will regret it

25

203

1K

David K 🎹

@DavidKPiano

4 years

🖌️ 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.

18

243

1K

David K 🎹

@DavidKPiano

4 years

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?

74

90

1K

David K 🎹

@DavidKPiano

18 days

🏪 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

57

144

1K

David K 🎹

@DavidKPiano

3 years

Making TypeScript happy is a full-time job.

35

84

1K

David K 🎹

@DavidKPiano

2 years

How to make accurate software estimations in 2 easy steps: 1. Compare to similar work 2. Determine which Fibonacci t-shirt size you'll use 3. Anticipate distractions/meetings 4. Find which undocumented legacy code will be touched 5. Realize it's impossible 6. ??? 7. Medium

27

142

1K

David K 🎹

@DavidKPiano

5 years

Unpopular opinion: you should write E2E/integration tests *first*, always. They should be directly related to business logic (user) requirements. Only when an E2E/integration test fails should you even think about writing unit tests. And be willing to delete those unit tests.

97

218

1K

David K 🎹

@DavidKPiano

5 years

Front-end devs: "You're creating a new function/object instance every render, that's going to kill performance" Also front-end devs: "The bundled app is 2.3 MB, loads pretty fast on my machine"

26

166

1K

David K 🎹

@DavidKPiano

7 months

Internally screaming

atlas

@creatine_cycle

7 months

Just one more state variable bro. Just one more hook and the page will have everything it needs. Just one more state variable please bro. Bro? Add one more state variable please bro

543

941

11K

46

54

995

David K 🎹

@DavidKPiano

7 months

@thekitze This is silly, just import the ID directly: import { "8209a50a-f86e-4f4d-9627-95ff3ca447ca" as id } from 'uuidv4';

16

13

990

David K 🎹

@DavidKPiano

3 years

That feeling when your pull request finally gets merged after an entire week 🇺🇲

11

95

979

David K 🎹

@DavidKPiano

4 months

TypeScript tip: use undefined explicitly instead of making a property optional, when applicable. ⚠️ email?: string ✅ email: string | undefined Why? It's too easy to forget to specify a property, especially in large codebases or refactors. You can make it optional later.

40

77

830

David K 🎹

@DavidKPiano

6 years

The top 3⃣ things I want to read in READMEs, vs. actual READMEs: Introduction License Philosophy Features Compatibility Contributing Changelog Community Preface Overview Installation 1⃣ Examples 2⃣ API 3⃣

22

237

941

David K 🎹

@DavidKPiano

4 years

Ultrawide monitors are for people who indent their code with 4 spaces instead of 2

87

60

944

David K 🎹

@DavidKPiano

9 months

I used to think that E2E tests >>> unit tests. Now I think most unit tests are useless and most E2E tests are redundant. What's useful IMO: 🧪 Unit tests that test core units of biz logic 🧪 E2E tests that test full user journeys And you don't need to write that many tests!

50

100

945

David K 🎹

@DavidKPiano

4 years

I don't want no-code. I want full code that is visually augmented with tools that work with & improve my code. And I want those visual tools to make it easier for future developers to write full code confidently.

37

87

937

David K 🎹

@DavidKPiano

4 years

11

176

931

David K 🎹

@DavidKPiano

2 years

⚛️ React tip: you should almost never fetch inside render. Start fetching as early as possible, e.g. on route change or when an event occurs (click, submit, etc.). Mental model should be: ✅ Read from fetched data in render NOT: ❌ Start fetching in render

38

105

932