How to merge a standalone repo into a monorepo, while maintaining git history.
#note2self
ALT # filter-repo requires a fresh clone
$ git clone git@github.com/smeijer/old-project.git ~/dev/old-project
$ cd ~/dev/old-project
# make history look like files were always in a /packages/subfolder
$ git filter-repo --to-subdirectory-filter packages/old-project
$ cd ~/dev/monorepo
$ git remote add old-project ~/dev/old-project
# tags can conflict with local tags, its possible to import & rename later
$ git fetch --no-tags old-project
$ git merge --allow-unrelated-histories old-project/main
$ git remote remove old-project
A basic mental model of TypeScript types.
A side by side comparison of JavaScript code vs Type level code to help you think of the type system as any other programming language.
gist: gist.github.com/anuraghazra/…
1/n
The Ultimate #DesignSystems Resources List 🌈
All the relevant, latest resources to help you create your design system. 💥
* Blog posts
* Tools
* Plugins
* Libraries
* List of Design Systems
* Design Tokens
* Slides and videos
* Books
* Conferences
> bit.ly/3JKdefQ
For a very long time I've had some mystery JS code plaguing our app's CPU performance. We're talking 40% on my 2019 MBP 16" with absolutely nothing happening on the screen.
I FOUND IT! 🎉
I won't say which OSS library it was publicly, but we're back down to 0.2 CPU baby!
😌
ALT The following text:
Steps to reproduce the bug
1. Open sandbox: https://codesandbox.io/s/polished-worker-5ugu3i
2. Type "a"
3. Press tab
4. Hit enter
5. Notice no item is now selected
6. Type "a" again
7. Now, click on the clear button
8. Notice the first item remains selected
ALT The following code:
test("issue 1652", async () => {
render(<Example />);
await type("a");
await press.Tab();
await press.Enter();
expect(getOption("Apple")).not.toHaveFocus();
await type("a");
await click(getCancelButton());
expect(getOption("Apple")).not.toHaveFocus();
});
The open/closed React component:
A component that is based on the open/closed principle, which states that “software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification”.
Thread 👇
Horrible Experience after ordering an appliance from @Flipkart@_Kalyan_K@flipkartsupport
Order ID: OD225248070020255000
Detailed Experience in the attached image
@Lets_Colive Why don't you just remove banner of live meet, everyday waited for hours just to get in, because no staff is there, why false advertise.
#colive#fraud#boycott#boycottcolive
#5: Most state is remote state. Streamline remote state via a custom "useApi" hook, react-query, or swr.
The result? WAY less code.
react-query/swr add:
✅Caching
✅Invalidates & refetches stale data
✅Dedupes requests
✅Auto retries
✅Refetch on refocus/reconnect
Problem: Fetching in useEffect means React components render, then fetch. This can lead to slow network waterfalls.
Solution: Fetch as you render. Use react-query's prefetching (prefetch in the parent) or use @remix_run which does this by default via nested routes.
#react
ALT Fetch in useEffect involves a network waterfall of 9 steps. Render as you fetch retrieves data for all components in parallel, so the page loads faster.
🧵1/8 Ever wondered why you're not able to conditionally call hooks in @reactjs?
For example, this component early returns a `null` to avoid loading data into a `useState`. It's invalid React code.
Why? How do hooks work under-the-hood?
Let's dive into React's internals.
ALT Alt: A React functional component that returns null conditionally before a useState, which is not allowed.
Two years of active work and we're happy about where we got so we're releasing @getReshaped v1.0 today. Together with @hi_drozdenko we've packed all of our 10 years of building design systems into this project and hope you all enjoy using it.
producthunt.com/posts/reshap… 👀
My biggest 5 coding mistakes as a Creative Developer during my career. A thread going through specific nitty-gritty of some code that I had implemented wrongly in some of my previous projects. 🧵
On the 28th of March, eyebrows went up across the world as HackerEarth community members opened the Practice portal and saw the design update.
Here's a thread about why we released this update and how it was done! 🧵
Best practices for writing code-comments by @ellenspertus: bit.ly/codecmts. Often, comments should only answer questions code can't (e.g. the "why")
ALT While all of these points are true, it would be a mistake to go to the other extreme and never write comments. Here are some rules to help you achieve a happy medium:
Rule 1: Comments should not duplicate the code.
Rule 2: Good comments do not excuse unclear code.
Rule 3: If you can’t write a clear comment, there may be a problem with the code.
Rule 4: Comments should dispel confusion, not cause it.
Rule 5: Explain unidiomatic code in comments.
Rule 6: Provide links to the original source of copied code.
Rule 7: Include links to external references where they will be most helpful.
Rule 8: Add comments when fixing bugs.
Rule 9: Use comments to mark incomplete implementations.
The rest of this article explains each of these rules, providing examples and explaining how and when to apply them.
ALT A website usually uses external resources like images, CSS, and JavaScript. Those files need to be loaded from network or cache. The main thread could request them one by one as they find them while parsing to build a DOM, but in order to speed up, "preload scanner" is run concurrently. If there are things like <img> or <link> in the HTML document, preload scanner peeks at tokens generated by HTML parser and sends requests to the network thread in the browser process.
✎ For design systems, should you version the component library as a whole or should you version individual components? In this post, I break down the pros and cons of each strategy: bradfrost.com/blog/post/desi…