Iโm available for hire as a frontend/full-stack engineer.
My skills: Typescript, React, Nextjs, Tailwind CSS, Node.js.
Link to my portfolio in the first reply.
Will appreciate a retweet ๐.
#buildinpublic
I have an idea. A behavioral interview simulator
You'll be interviewed by an AI HR (voice-only). After the interview, you'll receive an evaluation covering:
- Confidence level
- Strengths showcased during the interview
- Areas for improvement
- English fluency
How do you manage working on side projects while working full-time?
I tried it and it's exhausting.
Or Maybe it's just because I am still slow (didn't work on too many side projects)
Reduced videos sized by more than 7 times using
@cloudinary
auto optimization feature.
All I had to do was to change the URL.
Then it automatically delivers the video with the best quality and format for the browser and device viewport.
A new cool UI library released!
It was inspired by Shadcn UI and It's full of animated components that are ready to copy and paste!
The components are made with Next.js, TailwindCSS, and Framer Motion.
Huge Thanks to
@mannupaaji
for making this art!
#buildinpublic
Behavioral interview simulator
Day 1:
I used a mock interview template by
@tmeyer_me
and made the project open-source!
โ Improved Folder structure
โ Migrated views from /pages to /src folder
โ Removed stuff that I don't need for now
โ Deployed in Vercel (for
#buildinpublic
I have an idea. A behavioral interview simulator
You'll be interviewed by an AI HR (voice-only). After the interview, you'll receive an evaluation covering:
- Confidence level
- Strengths showcased during the interview
- Areas for improvement
- English fluency
How can infinite scroll slow your app?
Imagine you're building a social media feed with infinite scrolls. You render some posts, then load more as the user scrolls.
As users scroll, more and more posts are rendered. This can lead to laggy scrolling because there are too many
Last year, We spent over 3 months working on our SaaS product Fileqa, and it failed.
What is worth it?
Absolutely! While working on the product:
- I learned more about how startups work.
- Had the chance to work and learn from smart and inspiring colleagues.
Read More ๐
My coding journey so far:
โ March 2020: Started learning how to code in the pandemic. Spent 60-70h a week learning & building for a few months.
โ May 2020: Changed my college major from electrical to computer engineering
โ June 2020: Landed a remote React internship, learned
Mock interviews are the best way to prepare for interviews.
I tried
@tryexponent
and it's awesome! You get matched with people at your skill level.
You interview them and they interview you back.
I met some cool people through it, working in startups and FAANG.
You can
#buildinpublic
Behavioral interview simulator
We improved the layout UI, and also made a basic UI for the feedback page, where users see the interview feedback, it includes:
โ Detailed feedback on his answers
โ Strengths/Weaknesses showcased during the interview
โ Areas for
Last 30 days in numbers:
- 37,795 views on Linkedin
- 12K views on X
- published my first 2 articles
- 740 views on my blog
- 10 -> 246 followers on X
- +334 followers on LI
My next goal for the next 30 days?
-> Achieve all the above by 1.5
What about you?
#progress
That's exactly what I meant, most Moroccan โFrenchiesโ sadly.
If someone lives in my country and can't speak the local language, it's THEIR problem, not urs.
YOU DON'T HAVE TO FIT IN WITH THE WRONG GROUP :)
Only the ones who thinks they are better than you because they speak better French.
Which is bad la f French, English (Even on things outside of languages, like money, height, muscles etc โฆ)
It just happens that most Moroccan โFrenchiesโ haka dayrine ๐
#1
React Server Components Misconceptions
โClient components are rendered only on the browser.โ
Client components are rendered in both the server and browser.
๐๐จ๐ฐ ๐๐๐ฑ๐ญ.๐ฃ๐ฌ ๐ซ๐๐ง๐๐๐ซ๐ข๐ง๐ ๐ฐ๐จ๐ซ๐ค๐ฌ:
- Server generates initial HTML, including Server Components and
Node.js + ts-node = TypeScript in Node.js ๐ฅ
TIL, You can install ts-node to use Typescript directly in your Node.js environment, like in the example below.
ts-node transforms TypeScript into JavaScript, allowing you to directly execute TypeScript on Node.js without
Marketing Tip for Developers
How NOT to share your project:
๐ซDonโt just share the link to your project with a long description.
Most people have a short attention span on social media and won't try it.
โ Instead, share a quick demo with a brief and CLEAR description.
I will start sharing react.js challenges that I am solving and their solution.
โ
#1
React challenge: Make a traffic light
Source code:
Next challenge: Making Whack-A-Mole Game
->
Anyone wanna join me?
#buildinpublic
This is the best resource I found to learn patterns to improve a website's performance.
Patterns For JavaScript, React, and Vue.
With practical and visual examples.
It covers:
- ๐ฅ Rendering patterns.
- ๐จ Design patterns.
- ๐ Performance patterns.
- ๐ Case Studies.
Also,
"100% unit tests coverage"
Sometimes unit tests aren't enough. Because they don't guarantee that your app will function as it should.
Sometimes you may also need :
- Integration tests to check if different parts of your app work well together.
- End-to-end tests to make sure
I redone +20 leetcode problems (easy level) in the past 3 days and it feels so good ๐
Some of my old submissions were trash lol
if you aren't feeling dumb when reading your old code, then you are probably not getting better
๐ฆ๐๐ผ๐ฝ ๐๐ฎ๐๐๐ถ๐ป๐ด ๐๐ผ๐๐ฟ ๐๐ถ๐บ๐ฒ ๐ด๐ฟ๐ถ๐ป๐ฑ๐ถ๐ป๐ด ๐๐ฒ๐ฒ๐๐ฐ๐ผ๐ฑ๐ฒ
Before starting your interview preparation :
- Define what kind of companies you want to work at
- Try to reach out to people working there and ask about their interview process
From my experience,
#reactjs
#hooks
With the Hooks pattern in React, you can create shareable stateful code for different components.
A hook is a simple function with side effects, such as managing state using useState.
โฌ๏ธ
Things I learned about writing:
- Keep it concise.
- Don't use Shakespeare's words, use simple words.
- Avoid writing long paragraphs.
- Use bullet points.
- Structure your content for easy scanning and consumption.
I will start sharing react.js challenges that I am solving and their solution.
โ
#1
React challenge: Make a traffic light
Source code:
Next challenge: Making Whack-A-Mole Game
->
Anyone wanna join me?
#buildinpublic
Tried
@HeyGen_Official
and it's so cool !!
Generated an avatar video from a script in a few minutes.
I will use it to turn interview questions into an avatar video!
Frontend Roadmap for 2024.
This is the best one I have seen so far, it also has resources for each topic and recommendations on what technologies and tools to choose.
This website also has roadmaps for other careers.
This link is below.
#frontend
#career
#webdevelopment
#UseEffect
hook is a good choice for fetching data in small apps.
However, ๐ฌ๐ผ๐ ๐๐ต๐ผ๐๐น๐ฑ๐ป'๐ ๐๐๐ฒ ๐ถ๐ ๐ถ๐ป ๐ฐ๐ผ๐บ๐ฝ๐น๐ฒ๐ ๐ฎ๐ฝ๐ฝ๐.
๐ช๐ต๐?
#buildinpublic
Behavioral interview simulator
Days 4,5:
โ Refactored the interview page into small components
โ Uploaded new 2 interview video questions to
@cloudinary
โ 1 -> 3 questions
โ Timer for each question
โ At the end, the user is redirected to the feedback page
#buildinpublic
Behavioral interview simulator
Day 2,3:
โ Integrated
@Vercel
Analytics
โ Define the user journey
๐จ Refactoring the interview page into smaller components
Last month, I was learning more about UseEffect.
I wrote my notes in this article.
It covers UseEffect :
- Rules
- Best practices
- Misuses
feel free to
#roast
it xD
Do you want to prepare for frontend coding interviews, or do you want to upskill your frontend skills?
Give
@greatfrontend
a try!
It's like leetcode but for frontend, it covers:
- Designing the frontend of scalable real-world applications.
- Common Javascript interview
Just noticed that I can upload images in
@v0
You can use it to turn design screenshots into code!
The code will be in react, tailwind, and Shadcn UI.
It isn't perfect yet, but it's good for making prototypes
@nutlope
is a legend.
He built great AI apps that go viral and scale to millions on weekends.
He also makes them open source and shares how he built them.
His sauce๐
#buildinpublic
I have an idea. A behavioral interview simulator
You'll be interviewed by an AI HR (voice-only). After the interview, you'll receive an evaluation covering:
- Confidence level
- Strengths showcased during the interview
- Areas for improvement
- English fluency
Frontend Dev Isn't Only About Making a Fancy UI
You Need to Care About:
- User Experience (UX)
- Performance
- Responsiveness
- Accessibility
You might also need to Consider:
- Reusability
- State management
- Scalability
- Testing
- Security
- SEO (Search Engine
#reactjs
#memoization
After an upcoming React release, you won't have to worry about preventing unnecessary renders.
The React compiler will do it for you, all the ๐ฆ๐๐ฆ๐จ๐ข๐ณ๐๐ญ๐ข๐จ๐ง๐ฌ in your app will be automated.
narratives broken so far
โ you cant make money in open source
โ you cant build a better product in open source
โ you cant run a fully-remote team from Hawaii to Manilla timezones
โ you cant have data including salaries
โ you cant pay global salaries