Ahmed Elsakaan
@ixahmedxii
Followers
4,209
Following
1,002
Media
289
Statuses
2,795
23 • Software Engineer• Passionate about TypeScript, React, Monorepos and web tooling. Building and in public
London, England
Joined July 2016
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Gold Star
• 252509 Tweets
#OstechXApo
• 129617 Tweets
#仮面ライダーガヴ
• 104918 Tweets
Michigan
• 98246 Tweets
飛び降り
• 62640 Tweets
XCRY CON FANTA
• 52389 Tweets
Hells Angels
• 43548 Tweets
関東大震災
• 42360 Tweets
Ricky Pearsall
• 39206 Tweets
Cuauhtémoc
• 37014 Tweets
ドジャース
• 36300 Tweets
Oregon
• 31192 Tweets
Notre Dame
• 30176 Tweets
HOBI
• 26421 Tweets
Hersh
• 25670 Tweets
Monreal
• 25644 Tweets
防災の日
• 24738 Tweets
巻き添え
• 23310 Tweets
ゴチゾウ
• 22196 Tweets
Texas A&M
• 20938 Tweets
ショウマ
• 19450 Tweets
島本先生
• 17438 Tweets
設営完了
• 13758 Tweets
玄蕃さん
• 13495 Tweets
Idaho
• 12199 Tweets
Rayados
• 11296 Tweets
富士五湖
• 10306 Tweets
Since many are asking, here is whats in my vscode setup.
Theme: Aura theme
Font: Geist Mono
I use apc vscode extension to apply the font throughout and the non ordinary ui customisations like activity bar on the bottom.
23
25
620
Are you even a web developer if these are not your most recently run vscode commands? 🤡
64
29
555
📢 Next.js tip:
Here's a lil cute component perfect for navbar type of links where the styles change if the url is the same as the href (active links)
15
44
503
give me your best terminal command aliases, I'll start:
alias p="pnpm"
189
15
487
Soooo i'm working on something exciting 👀 be sure to attend the livestream today to find out more about this
16
14
375
Monorepos as a concept is a bit challenging to understand, and so I made a video explaining the basics of monorepos. Check it out!
6
29
350
🚨 Announcement
Releasing OrbitKit, the open source monorepo starterkit to build your next startup upon. It comes with a Next.js web app, Astro marketing website, Shadcn UI, Drizzle ORM, Storybook...etc, and so much more in the plans!
19
29
338
I just transitioned Noodle from Prisma to Drizzle ORM and the results (this is not even on the edge):
- Prisma (submitting a new waitlist entry): around 3.5-3.8 seconds in production.
- Drizzle ORM (same procedure): 250ms, sometimes dropping as low as 170ms!!
@neondatabase
and
27
11
323
Wtf is wrong with you guys
That's more than 1000 stars in less than 24 hours
13
6
306
Here is my settings.json file, adding in to the info, I use moxer icons for my file icons.
I'm also adding in a screenshot of my second favourite theme, lunar pink
Since many are asking, here is whats in my vscode setup.
Theme: Aura theme
Font: Geist Mono
I use apc vscode extension to apply the font throughout and the non ordinary ui customisations like activity bar on the bottom.
23
25
620
11
12
302
🤩 With
@DrizzleOrm
, drizzle-zod and
@trpcio
. You can have type inference and validation from the db layer all the way to the frontend.
You can use the created insert/select schema from drizzle-zod in your tRPC procedure input. You can then use that same schema in your frontend
17
10
230
NOODLE HAS PASSED 5000 STARS ⭐️
This is absolutely crazy, would’ve never thought in a million years I’d have this many stars on my work even collectively and here I am in one week we achieved it.
Thank you guys so much ❤️🫡
13
4
224
Since bun is way more than just a nodejs replacement.
Please can we have bun linter replacing ESLint.
10
4
199
This is most probably what the note taking page will look like in Noodle 🤤🤤🔥
17
6
178
🚨 MY FIRST YOUTUBE VIDEO!!!
I have just published a video about my VSCode setup, the extensions I am using and how I am configuring them.
Give it a watch!
4
10
162
Am I the only one that absolutely hates configuring ESLint?
28
4
154
Quick monorepo tip of the day
#6
:
@NxDevTools
task runner is so powerful. If you're not using it, you should. You can remove the need to use packages like concurrently, dotenv, and npm-run-all in almost all packages.
In a `project.json`, you can define tasks for your package.
5
21
154
Prototype of Noodle's module creation popover, built with framer-motion, shadcn ui and radix ui
The step animations 🤩
6
6
151
Hey 👋 I’m graduating soon and I’m now ready for job opportunities. I’m a Frontend engineer specialising in:
- Design systems
- React
- Monorepos
I’m tRPC core, mostly contributing to the docs website.
Feel free to DM me, a like and a retweet would also be much appreciated 🙏
4
17
148
My must have prettier plugins:
1. ianvs/prettier-plugin-sort-imports
This plugin allows you to automatically sort your import statements, and you can even customise how it sorts these imports, for example "react" imports at the top, followed by built in modules, then third
3
6
125
👀🚨I have been working on something for a few months now, it will be called OrbitKit. Idea behind it is to deliver a complete development setup for startups so that they focus on shipping, not even at the time of scaling up. It's a big monorepo with a next.js web app, astro
11
3
119
NOODLE IS TRENDING ON GITHUB!!!
LETSSSGGOOOOO
thank you guys so much ❤️
7
2
113
@heychazza
its the Moxer pairing, both the theme and the icons set.
as for the other bits this video explains all of what’s happening:
1
5
103
Noodle is at 10,000 github stars!
This is absolutely insane, never in a million years would I have imagined this amount of stars on a repo of mine. Thank you all so much, love you ❤️
6
2
103
Quick monorepo tip of the day
#4
:
If you're using
@turborepo
, adding the FORCE_COLOR=1 environment variable before any command leads to much better output colours.
You can also add it to your shell environment variables to not need to specify it at all.
If you do, however,
3
6
99
Quick monorepo tip of the day
#3
:
You should aim at optimising your tasks in
@turborepo
or
@NxDevTools
to maximise the chance of cache hits. This could be done by excluding test, lint, and story files from the build cache invalidators using the input option for the task. 👇
4
3
88
Would you guys like to see a monorepo boilerplate that’s fully fledged out?
I mean all types of testing, authentication, api, database, ui library with storybook and published to chromatic…etc
It will be more of a startup boilerplate rather than a typical boilerplate. Almost
18
0
87
🚨 ANNOUNCEMENT 🚨
I am pleased to announce that we are accepting users onto Noodle’s waiting list now.
The website also got a fresh coat of paint 😊
We’ll be hard at work getting the initial version out from now 🫡
5
3
83
Stop starting every big project as a monorepo without a clear reason why you need it.
Most people don’t realise that you can go very very far without one, and have great project structure as well.
If there is no genuine reason, it’s just too much overhead.
15
3
80
Quick monorepo tip of the day:
If you are setting up prisma in a pnpm workspace, update your .npmrc file to include:
public-hoist-pattern[]=*prisma*
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
Setting it only to prisma would override the default which
6
8
81
Radix ui colours with Tailwind is OP, you never need to define “dark:” colours it’s all automatic!
1
4
77
My current tech stack for large projects (monorepo):
Project wide:
- TypeScript
- NX
- ESLint
- Prettier
- Pnpm
Frontend:
- Nextjs
- Tailwind
- Storybook
Backend:
- tRPC
- next-auth
- Prisma
Testing:
- Jest
- Playwright
6
3
76
I have dedicated my entire day to get ESLint v9 working in a Next.js app....
It was actually the least of my problems getting the next eslint plugin working lmao
12
7
75
Okay, real question for
@vercel
folks, how should we go about creating component libraries now?
if you bundle it, it's basically all-or-nothing client or server components. Is it expected to have two output bundles, one for client and one for server components?
Also, most
11
0
72
Thank you very much I’m gonna steal the template
5
3
74
New
@trpcio
feature alert 🚨
You can now nest routers with plain objects without needing to call t.router again, here's how it looks like:
export const appRouter = t.router({
hello: {
foo: {
bar: {
greeting:
5
9
71
Quick monorepo tip of the day
#2
:
In a pnpm workspace, you can set the following option in the .npmrc file:
prefer-workspace-packages=true
This ensures that workspace packages are prioritised over npm registry ones, even if the registry has a newer version.
When a new package
1
8
71
I woke up today to a bill from Vercel analytics cause I got too many views on Noodle’s website.
Suffering from success 😔
5
0
69
Designing Remeda’s new docs website, would love to get people’s thoughts on this
20
0
68
@drosenwasser
When you generate prisma db types, you need to restart the tsserver for the types of PrismaClient to be picked up
6
0
65
One of the most exciting features of
@typescript
v5, in my opinion, is the new "resolvePackageJsonExports" setting, especially for monorepos, here's everything you need to know about it 👇
3
4
65
Quick monorepo tip of the day
#5
:
Hey there, fellow developers! Today's monorepo tip is all about simplifying your life with
@NxDevTools
.
If you got scoped package names like
@acme
/ui, just set your npmScope field in the nx.json file to match your scope name (like acme). That
4
7
65
I've seen people asking about how to do
@shadcn
ui in monorepos, but it's actually easy...
note however, i'm not using components.json, and css variables are set in a shared tailwind configuration file instead of a css file.
More detailed explanation below 👇
3
0
59
If you prefer multi-entry point packages in your monorepo, here is a tsup config that will automatically grab all files in specific folders AND update your package.json file to export the transpiled files. 🤩
4
4
58
I have been silent about this for a while, thinking my account is just me and my programming stuff but I feel like I need to share my thoughts, as someone who’s born in one of the countries that borders this conflict.
Let’s just firstly set things straight, I am not looking to
0
6
54
Btw I would like to thank
@NxDevTools
for technically being Noodle's first sponsor, they gave me unlimited usage for completely free on their NX cloud and it has been saving me around 7 hours every week in computation time. Love you guys ❤️
4
2
55
OrbitKit will contain the entirety of
@shadcn
ui in a design system package with
@storybookjs
as well as marketing/product specific templates.
I've swapped into radix ui colors for shadcn ui and I think it looks fabulous.
3
0
55
guess what huh, 13 hours later.
WE ARE AT 3000+ stars!! 🚀🚀🚀
it looks like we will be DOUBLING the star count again today! THIS IS INSANE
Wtf is wrong with you guys
That's more than 1000 stars in less than 24 hours
13
6
306
6
1
53
📢 ANNOUNCEMENT
You feeling lonely seeing people post their Twitter/X earnings screenshots? SAY NO MORE. With , you can join in and post your fake earnings screenshot. What are you waiting for, get it nooowww.
9
1
53
I am sooo proud to announce that I have joined the
@NxDevTools
champions program and can title myself now as an NX Champion!
I will be focusing on giving as much feedback to the NX team on multi-package Monorepos and hopefully help in making NX even better for these use cases!
6
1
51
Y'all are missing a huge, well deserved nominee for github stars and that's
@alexdotjs
.
Just saying
@trpcio
revolutionised an aspect of web dev and it made our lives easier, and this guy is a factor why I landed my first job, his impact on our community can't be understated ❤️
1
2
50
There you go guys:
This is the same one as
@samselikoff
, just using use-resize-observer instead of react-use-measure because it works inside popovers and modals.
Does anyone have a good example of a box in react that will auto animate its height/width based on its content changing?
Ive been trying to get this to work for the past 2 days now 😭🤣
4
1
9
1
2
50
🚨 Announcement
It is finally here, the first part of monorepo college blog posts! A video version will come soon. In the meantime, let me know how I did on my first blog post! 🥰
1
5
49
Plate has been my favourite way of making rich text editors for a long time. It’s amazing to see the progress of this project and I’m excited to use it for Noodle’s editor!
2
1
49
🚀 OrbitKit is now Github Trending! let’s freaking gooooo!!!
that’s 2/2!!!!
1
3
50
Just shipped v0.1.1 🚀
In this release, it's all about GH actions:
- A
@neondatabase
branch is created when a PR is opened and database migrations are applied through
@turborepo
building the web app with a dependency on db:migrate task.
- The
@neondatabase
is then destroyed
1
4
50
Tech twitter has always had the stereotype that its negative, its like every week there is a new debate topic. Is it gonna be tailwind again? maybe nextjs this time?
But this week around me has been a completely different tech twitter. It has been the most wholesome thing I’ve
3
0
45
New iteration for Remeda docs website design. This one fixes the issues that were mentioned in the first one. What do you guys think?
8
2
44
Do me a favour and get it to 10k stars pls, only 30 stars to go 🤯
2
10
45
@drosenwasser
Also in monorepos when you are bundling packages, sometimes tsserver does not pick up the types after build of a dependent package.
For example, let's assume `
@acme
/ui` which is used in `
@acme
/web`, running build in the UI library sometimes would not show the correct types in
2
0
44
Idk if hot take or not, the less TypeScript tsconfig compilerOptions you set by yourself the better, just use , most people are already copy pasting from different sources without knowing what all the options do anyways.
3
5
44
If you’re wondering when will Noodle become available:
The fact of the matter is, I have a full time job, I will dedicate as much time as possible to work on it during weekends and after/before work so it might take longer than expected.
The plan is to get the landing page and
2
0
44
I have decided that the monorepo series will be blog posts. Currently making my own blogging website, and here's a sneak peek 👀
5
1
42
Thank you to
@neondatabase
for sponsoring me on Github to continue developing OrbitKit further! You guys rock!!
0
4
43
Elaborating more on why OrbitKit is very cool:
- Uses jiti by
@unjsio
and
@t3dotgg
env to deliver typesafe env variables throughout the monorepo without the need to bundle anything.
- Full implementation of
@shadcn
UI in a dedicated UI package bundled with tsup and
@storybookjs
🚨 Announcement
Releasing OrbitKit, the open source monorepo starterkit to build your next startup upon. It comes with a Next.js web app, Astro marketing website, Shadcn UI, Drizzle ORM, Storybook...etc, and so much more in the plans!
19
29
338
2
2
43
🚀 A deep dive into OrbitKit (Part 1)
I'm starting a new X/Twitter posts series explaining bits of OrbitKit in depth to share the knowledge.
Today, I explain how a single
@tailwindcss
preset is configured and consumed by multiple apps / libraries around the workspace. 👇
2
5
42
I'm releasing my first youtube video tonight and it will be about my VSCode setup
8
0
42
📣 OrbitKit v0.1.3 is out!
In this release:
- OrbitKit gets
@playwrightweb
into the monorepo 🎉.
- CI pipeline to run the e2e tests on the apps.
- ESLint playwright configuration added.
- Dependencies updated.
Checkout the usage docs below 👇
6
4
42
It seems that y’all really like the design by the fact that 169 people bookmarked it 🤣
Soooo i'm working on something exciting 👀 be sure to attend the livestream today to find out more about this
16
14
375
9
0
41
🚨 Announcing Monorepo Alliance!
I've created a Discord server all about monorepos, come hang, discuss, ask and get help!
I'm inviting everyone from the
@turborepo
,
@NxDevTools
and
@tothemoonrepo
communities, if you are interested about monorepos, this is the place!
I believe
3
2
39
🚀 Coming very soon to OrbitKit 👀
Very soon I will introduce the third application into the starterkit, a documentation website built using
@mintlify
.
It will also be the official docs of OrbitKit.
👉 Stay tuned:
4
2
39
Noodle has tripled it's star count on Github in less than 24 hours 🤯🤯🤯🤯 you all are making me so motivated to work on this with full force ♥️
0
0
38