سؤال جافاسكربت.
عندي الكود ده طبعا عارفين ان setTimeout غير متزامنه فكان الناتج
Two
One
طيب السؤال بقي خلي يطبع one اول وبعدين two شرط يكون ال setTimeout موجود بداخلها
console.log("one")

العرض ساري لفتره محدود 😹😹😹😹😹

قبل متجاوبوا جربوا استخدام الاتنين وشوف الاسرع لو مش عارف تستخدم ال vite قولوا وهنزلكم الطريقة.

طريقة انشاء بروجكت React باستخدام vite تابع الفيديو.

We’ve Got Some New CSS Features!

https://medium.com/@jesusmejiasg/weve-got-some-new-css-features-a3e8595fda66

10 Useful JavaScript Coding Techniques That You Should Use

https://javascript.plainenglish.io/10-useful-javascript-coding-techniques-that-you-should-use-f20bf9b8a7dd

Clean Code in TypeScript
https://link.medium.com/L75XLIEDYub

20+ React Libraries to Jumpstart your Next Project:-


1. General Utilities:-

The npm packages in this category are just packages that are helpful so few specific tasks and you may eventually need them. The packages in this include:

- moment.js — very good for working with dates
- Axios — good for handling async tasks
- React-hot-toast, React-toastify — handling small notifications and toasts
- react-icons,” @mui”/icons-material For icons
- react-paginate — For pagination
- React-share — Share things Socially
- React-slick, react-responsive-carousel — For Carousel
- clsx — For conditional classes
- react-intersection-observer — For intersection
- react-dropzone — For file upload and drag and drop.

2. Animation:-

Bringing animation to your site just makes it more fun and pleasant for your viewers. That being said, the packages under animation include:

- GSAP
- Framer motion
- React-spring
- Anime.js

3. State Management:-

Sometimes the data in your React.js application can be very difficult to manage effectively and the React content API isn’t just good enough. That being said, the packages under state management include:

- Redux
- Redux Toolkit — my personal favourite
- Recoil
- Mobx
- React Context — not recommended for big projects

4. server-side rendering:-

if you are building a highly optimized robust website you will need an SSR framework because they make routing easier, they fetch data on the server and return to the component, they optimize images so it doesn’t bottleneck performance, and much more. That being said, the packages under server-side rendering include:

- Next.js
- Gatsby.js — for only SSG (static site generation)
- Remix

ما هي TypeScript ؟

الـ TypeScript عبارة عن supersite فائقة javascript

هل TypeScript هو نفسه Javascript ؟
نعم ولا. تم إنشاء TypeScript بواسطة Microsoft وتم إنشاؤه كـ built on في Javascript باختصار ، إنه مماثل لـ Javascript ولكن مع features إضافية و كل ما تعرفه وتعلمته من Javascript سيكون مفيدًا في الدخول الي TypeScript.

أي واحد يجب أن أتعلمه أولاً؟
أنت تتعلم Javascript أولاً بشكل نهائي ثم TypeScript إذا كنت لا تعرف Javascript معرفة جيدة ، فستجد صعوبة في تعلم وفهم TypeScript.

لماذا نتعلم TypeScript !

عندما يبدأ الأشخاص في استخدام JavaScript في التطبيقات المعقدة ، فإنهم يدركون بسرعة أن JavaScript أصبحت صعبة في العمل من حيث OOP وذلك يرجع لطريقة عمل اللغة و يصعب العثور على بعض bugs لذلك تم تطوير TypeScript بواسطة Microsoft لسد هذه الفجوة.

الذي يضيفه TypeScript بالضبط إلى JavaScript هو :

Powerful type system

Type error checking at development time

Better Object-Oriented Programming

New features like Interfaces, Generics, etc.

Meta-programming like Decorators

Compile to javascript that can run on an older browser

Code Auto-completion in the editor

لا يعمل TypeScript في المتصفح أو مع node.js مثل Javascript للتنفيذ ، يحتاج TypeScript إلى compile إلى Javascript.

يتضمن استخدام TypeScript استخدام compiler على سبيل المثال ، إذا كان لديك اسم ملف app.ts ، فسيقوم compiler الـ TypeScript بإنشاء app.js. سيتم استخدام هذا واحد لتشغيل التطبيق الخاص بك.

لهذا السبب نقول أن TypeScript تساعد فيdevelopment time.

كيفية install واستخدام برنامج TypeScript

$ npm install -g typecript

لتنفيذ Compiler

$ tsc app.js

أو watch mode

$ tsc app.js -w
سيعد الـ TypeScript تلقائيًا و Compiler لـ app.ts اليapp.js عند كل Save .

مجتمع خاص بالبرمجة :
https://t.me/programmingps

Node.js visualized: Event Loop Phases

مراحل Event loop في Nodejs

https://dev.to/nodedoctors/animated-nodejs-event-loop-phases-1mcp

em & rem CSS

خلصت مذاكرة HTML, CSS, JS وعايز أطبق عليهم وأعمل مشاريع 🙂

= دي بعض المواقع اللي عليها Templates جاهزة، فيه منها مجاني وفيه مدفوع.

هتفتح الـlive demo بتاع الموقع اللي عايز تعمله وتطبقه بنفسك ولو وقفت في حاجة هتلاقي الـsource code متاح تقدر تبص عليه وتفهم هو حلها ازاي...

معلش طولت عليك...😊

تفضل يا صديقي الروابط أهي:

HTML5Up:
https://html5up.net

Templatemo:
https://templatemo.com

freehtml5:
https://freehtml5.co

Styleshout:
https://lnkd.in/dnQn8vtM

Start Bootstrap:
https://lnkd.in/dK8bVA6q

Zerotheme:
https://www.zerotheme.com

html5xcss3:
https://lnkd.in/d6mVkKD5

Colorlib:
https://lnkd.in/dKnbFUyt

Free-CSS:
https://lnkd.in/dTeSpapj

Hubspot:
https://lnkd.in/dFkDkkxx

Mobirise:
https://lnkd.in/db9RYz-Q

Bootstrap Made:
https://bootstrapmade.com

Theme For App:
https://themesfor.app

Bootstrap Taste:
https://lnkd.in/dwWsbA9U

One Page Love:
https://onepagelove.com

Tool Plate:
https://www.tooplate.com

Cruip
https://lnkd.in/dgGjsH8P

UIDeck
https://uideck.com
----------------

Push & Pop method in JavaScript

What happens when React components render: