Human
Sylhet, Bangladesh
Joined February 2016
- Tweets1.9K
- Following435
- Followers193
- Likes5K
Lahin retweeted
Indexes are tricky when your database is sharded โก
A database needs to be partitioned and sharded when the data goes big or the load surges. So, how would indexes work in such situations?
I just published a video explaining how indexes work in a distributed database like DynamoDB, along with the trade-offs they make, and the pros and cons of picking one over another.
give it a watch - youtu.be/eQ3eNd5WbH8
Note: this fundamental concept holds for any distributed database in the world and is an essential building block for you to understand and use them better.
โก I keep writing and sharing my practical experience and learnings every day, so if you resonate then follow along. I keep it no fluff.
#AsliEngineering #DatabaseFundamentals #SystemDesign
Lahin retweeted
๐ Curious about the React Compiler? I wrote about one of the core compiler transformations:
recompiled.dev/blog/ssa/
Lahin retweeted
In TypeScript, I often prefer to use a Record over a switch statement.
โ
It's easy to read.
โ
It's typically less code.
โ
It's safer. With a switch, I have to do extra work to assure it's exhaustive. With a Record, if I forget to handle a case, it won't compile.
Lahin retweeted
Todayโs learning: Cloudflare can break React hydration in the most funny way possible :D
1. Make a React site that renders `<p>My email: [email protected]</p>`
2. Put it behind Cloudflare
3. Hydration mismatch!
Lahin retweeted
I think the most scary thing about this is that it obfuscates the distinction between FE and BE devs.
Lahin retweeted
Problem: TypeScript can't validate runtime data.
Solution: Use Zod to validate runtime data.
6 things I validate at runtime via Zod:
โ
URL
โ
Cookie
โ
Form inputs
โ
Environment variables
โ
localStorage/sessionStorage
โ
JSON in REST API responses
Examples:
![// Validate REST API response has expected JSON
const getUserResponseSchema = z.object({
id: z.number().positive(),
name: z.string().nonempty(),
});
// Validate environment vars have expected values
const envSchema = z.object({
VITE_ENVIRONMENT: z.union([
z.literal("local"),
z.literal("dev"),
z.literal("qa"),
z.literal("prod"),
]),
VITE_API_BASE_URL: z.string().nonempty(),
VITE_ENABLE_MOCK_APIS: z.union([z.literal("TRUE"), z.literal("FALSE")]),
VITE_ENABLE_DEV_TOOLS: z.union([z.literal("TRUE"), z.literal("FALSE")]),
});
// Validate form inputs are populated correctly
const addProductFormSchema = z.object({
name: z.string().min(1).max(50),
description: z.string().min(2).max(50),
price: z.number().min(1).max(100),
});](https://pbs.twimg.com/media/F6Ea0e2W8AAn5JG.jpg?name=orig)
ALT // Validate REST API response has expected JSON const getUserResponseSchema = z.object({ id: z.number().positive(), name: z.string().nonempty(), }); // Validate environment vars have expected values const envSchema = z.object({ VITE_ENVIRONMENT: z.union([ z.literal("local"), z.literal("dev"), z.literal("qa"), z.literal("prod"), ]), VITE_API_BASE_URL: z.string().nonempty(), VITE_ENABLE_MOCK_APIS: z.union([z.literal("TRUE"), z.literal("FALSE")]), VITE_ENABLE_DEV_TOOLS: z.union([z.literal("TRUE"), z.literal("FALSE")]), }); // Validate form inputs are populated correctly const addProductFormSchema = z.object({ name: z.string().min(1).max(50), description: z.string().min(2).max(50), price: z.number().min(1).max(100), });
One of my most favourite person. I learned so many things from him.
I hope I will continue learn from him more and more.
This Post is from an account that no longer exists. Learn more
Lahin retweeted
React: The Most Common Mistakes in 2023
I'm presenting this talk at @kc_dc in July!
The list:
State:
Needless state
Global state overuse
Syncing state via useEffect
Reading state after setting it
Multiple setState calls in a row
Putting state in the wrong spot
Storing related data in separate pieces of state
Http:
Not caching
Fetching in useEffect
Not using modern libraries
Workflow:
Not using a framework
Not using Tailwind
Not using TypeScript
Not mocking
Ineffective testing
Not using custom dev tools
Poor folder structure
Few/poor reusable components
Weak ESLint rules
Weak error handling
What else would you put on this list?
Learn CIDR notation and subnetting in context of AWS VPC.
codemacaw.com/2023/05/13/cidโฆ
#aws #SoftwareEngineering
Lahin retweeted
๐ช๐ต๐ ๐๐บ๐ฎ๐๐ผ๐ป ๐๐ฏ๐ฎ๐ป๐ฑ๐ผ๐ป๐ฒ๐ฑ ๐ ๐ถ๐ฐ๐ฟ๐ผ๐๐ฒ๐ฟ๐๐ถ๐ฐ๐ฒ๐ ๐๐ฟ๐ฐ๐ต๐ถ๐๐ฒ๐ฐ๐๐๐ฟ๐ฒ ๐ถ๐ป ๐๐ฎ๐๐ผ๐ฟ ๐ข๐ณ ๐ ๐ผ๐ป๐ผ๐น๐ถ๐๐ต?
In the latest post (check in the comments), a team that works on Prime Video explained their approach to ensuring that customers receive high-quality content. They use a tool to monitor every stream viewed by customers and use it to identify quality issues.
The tool was intended to run on a small scale, so they noticed that ๐ผ๐ป๐ฏ๐ผ๐ฎ๐ฟ๐ฑ๐ถ๐ป๐ด ๐บ๐ผ๐ฟ๐ฒ ๐๐๐ฟ๐ฒ๐ฎ๐บ๐ ๐๐ผ ๐๐ต๐ฒ ๐๐ฒ๐ฟ๐๐ถ๐ฐ๐ฒ ๐๐ฎ๐ ๐๐ฒ๐ฟ๐ ๐ฒ๐
๐ฝ๐ฒ๐ป๐๐ถ๐๐ฒ. So, they decided to revise the architecture.
The initial architecture consisted of ๐๐ฒ๐ฟ๐๐ฒ๐ฟ๐น๐ฒ๐๐ ๐ฐ๐ผ๐บ๐ฝ๐ผ๐ป๐ฒ๐ป๐๐ ๐ผ๐ฟ๐ฐ๐ต๐ฒ๐๐๐ฟ๐ฎ๐๐ฒ๐ฑ ๐ฏ๐ ๐๐ช๐ฆ ๐ฆ๐๐ฒ๐ฝ ๐๐๐ป๐ฐ๐๐ถ๐ผ๐ป๐. What they did here is to move expensive operations between components into a single process to keep the data more trans within process memory.
Building initial solutions with serverless components was a good choice because it enabled it to be done quickly and scale each component, yet such a way of using some components ๐ฐ๐ฎ๐๐๐ฒ๐ฑ ๐ถ๐๐๐๐ฒ๐ ๐ฎ๐ ๐ฑ% ๐ผ๐ณ ๐๐ต๐ฒ ๐ฒ๐
๐ฝ๐ฒ๐ฐ๐๐ฒ๐ฑ ๐น๐ผ๐ฎ๐ฑ.
After the analysis, they concluded that the distributed approach didn't bring many benefits, so they packed all the components into a single process. ๐ ๐ผ๐๐ถ๐ป๐ด ๐๐ต๐ฒ๐ถ๐ฟ ๐๐ฒ๐ฟ๐๐ถ๐ฐ๐ฒ ๐๐ผ ๐ฎ ๐บ๐ผ๐ป๐ผ๐น๐ถ๐๐ต ๐ฟ๐ฒ๐ฑ๐๐ฐ๐ฒ๐ฑ ๐๐ต๐ฒ๐ถ๐ฟ ๐ถ๐ป๐ณ๐ฟ๐ฎ๐๐๐ฟ๐๐ฐ๐๐๐ฟ๐ฒ ๐ฐ๐ผ๐๐ ๐ฏ๐ ๐ผ๐๐ฒ๐ฟ ๐ต๐ฌ% ๐ฎ๐ป๐ฑ ๐ถ๐ป๐ฐ๐ฟ๐ฒ๐ฎ๐๐ฒ๐ฑ ๐๐ฐ๐ฎ๐น๐ถ๐ป๐ด ๐ฐ๐ฎ๐ฝ๐ฎ๐ฏ๐ถ๐น๐ถ๐๐ถ๐ฒ๐.
Image credits: Amazon.
_______
If you like my posts, please follow me, @milan_milanovic, and hit the ๐ on my profile to get a notification for all my new posts.
Grow with me ๐!
#technology #softwareengineering #cloudcomputing #techworldwithmilan #softwarearchitecture
Lahin retweeted
A sign you may benefit from useReducer: You're making multiple setState calls in a row.
With useReducer, multiple pieces of state can be updated via a single dispatch.
ALT // Multiple setState calls setUser(user); setIsLoading(false); // With useReducer, one dispatch can update multiple pieces of state. // Passing user here updates the isLoading state in the reducer too. ๐ dispatch({ type: "save-user", payload: user });
Lahin retweeted
Bye-bye Sinon... Hello, Node.js 20 - using mocks, spies, and stubs natively in @Nodejs ๐คฏ๐ฅ
๐งต/1
#javascript #community #opensource #nodejs #news #tutorial #node #metaprogramming #testing #100daysofcode #github
Lahin retweeted
The Node.js Security Best Practices just landed!๐
Thanks to everybody involved. Especially the @nodejs Security WG.
Check it out: nodejs.org/en/docs/guides/seโฆ
Lahin retweeted
TIL: if you create a page, add this HTML code, and open it on a phone:
<link rel="preload" href="img.jpg" media="(min-width: 800px)">
<meta name="viewport" content="width=device-width">
the browser will load img.jpg even though the phone is much narrower than 800px!
Why? โฌ๏ธ
Compound Component is a good example of Inversion of Control
gist.github.com/lahin31/b1e0โฆ
#react
