| Erfan's Notes | via @DevelopixBot
⭕️ دوره آموزش Spline 💠 دوره آموزش نرمافزار طراحی سهبعدی اسپلاین (Spline) با محوریت طراحی وبسایت سهبعدی
دوره آموزش اسپلاین (طراحی وب سهبعدی) که حدود دو سال پیش ضبط کرده بودم رو منتشر کردم و میتونید در کالکشن بالا ببینید
Please open Telegram to view this post
VIEW IN TELEGRAM
من معمولا اکثر زبانهایی که بهصورت روزمره باهاشون سر و کار دارم، مفسری هستند، احتمالا شما هم JS و PHP و Python و زبان های مفسری مشابه کار میکنید
همونطور که میدونید، من طرفدار شدید پرفورمنس و بهینهسازی کد هستم و حتی پست هایی هم درمورد بنچمارک بین فریمورکها و زبانها گذاشتم قبلا که در اونها:
سناریوی فرضی ما برای بنچمارک، یک سایت هست که IO داره و Database داره و Network داره، در واقع اکثر زمانی که تلف میکنه سر IO Bound Task ها هست همونطوری که توی این پست هم توضیح دادم
ولی اخیرا برای یک پروژهای به یک تسکی خوردیم که CPU Bound خیلی سنگین بود و Memory Bound هم بود، در واقع نیاز داشتیم که روی دیتاست با حجم 12M شهر/روستا iterate کنیم و نسبت به زبان کشور، از بین 20M اسم که به زبانهای مختلف برای اون شهر/روستا بود، اسم محلیاش رو پیدا کنیم
این رو من با دیتاست کوچکتری که فقط برای ایران بود 200K شهر/روستا و 200K هم اسم متناظر، من با PHP نوشتم و نتیجه معقول بود و حدود 10-12 ثانیه طول میکشید
ولی برای اینکه IO به صورت Async باشه با JS بازنویسی کردم و به 7-8 ثانیه رسیدم با دیتای 200K x 200K
حالا وقتش بود که با دیتاست 20M x 12M تست کنیم، نهایتا باید 10-15 دقیقه طول میکشید، درسته؟ نه! طبق محاسباتی که کردیم، حدود 3-4 روز طول میکشید تا بتونه این دیتا رو بخونه و پارس کنه و مپ کنه و فیلتر کنه و اسم متناظر رو پیدا کنه🤣
اینجا بود که یکی از دوست های Rust کارم به دادم رسید و با زبان کامپایلری Rust، همون کد JS ای که نوشته بودم رو با Rust بازنویسی کرد، نتیجه به نظرتون چی شد؟ از 3-4 روز به 10 ثانیه کاهش پیدا کرد☺️
البته بازنویسیای که کرد، بسیاری از مفاهیم رو به شکل بهینهتری در سطوح پایین هندل کرد و خیلی از بارها و overhead ها رو برداشت، مثلا در نسخه JS مصرف رم حدود 24GB رسیده بود بعد از دوساعت اجرا، ولی نسخه Rust کلا 4GB رم مصرف میکرد و کلا 10 ثانیه طول میکشید روی دیتاست کامل🎉
نتیجه ماجرا این هست که حس میکنم کمکم باید یک زبان کامپایلری هم به چرخه زبان هایی که روزمره باهاشون کار میکنیم، اضافه کنیم چون واقعا تفاوت خیلی خیلی زیادی هست در کارهای CPU Bound بینشون، تفاوتی مثل ۳-۴ روز و ۱۰ ثانیه😎
همونطور که میدونید، من طرفدار شدید پرفورمنس و بهینهسازی کد هستم و حتی پست هایی هم درمورد بنچمارک بین فریمورکها و زبانها گذاشتم قبلا که در اونها:
سناریوی فرضی ما برای بنچمارک، یک سایت هست که IO داره و Database داره و Network داره، در واقع اکثر زمانی که تلف میکنه سر IO Bound Task ها هست همونطوری که توی این پست هم توضیح دادم
ولی اخیرا برای یک پروژهای به یک تسکی خوردیم که CPU Bound خیلی سنگین بود و Memory Bound هم بود، در واقع نیاز داشتیم که روی دیتاست با حجم 12M شهر/روستا iterate کنیم و نسبت به زبان کشور، از بین 20M اسم که به زبانهای مختلف برای اون شهر/روستا بود، اسم محلیاش رو پیدا کنیم
این رو من با دیتاست کوچکتری که فقط برای ایران بود 200K شهر/روستا و 200K هم اسم متناظر، من با PHP نوشتم و نتیجه معقول بود و حدود 10-12 ثانیه طول میکشید
ولی برای اینکه IO به صورت Async باشه با JS بازنویسی کردم و به 7-8 ثانیه رسیدم با دیتای 200K x 200K
حالا وقتش بود که با دیتاست 20M x 12M تست کنیم، نهایتا باید 10-15 دقیقه طول میکشید، درسته؟ نه! طبق محاسباتی که کردیم، حدود 3-4 روز طول میکشید تا بتونه این دیتا رو بخونه و پارس کنه و مپ کنه و فیلتر کنه و اسم متناظر رو پیدا کنه
اینجا بود که یکی از دوست های Rust کارم به دادم رسید و با زبان کامپایلری Rust، همون کد JS ای که نوشته بودم رو با Rust بازنویسی کرد، نتیجه به نظرتون چی شد؟ از 3-4 روز به 10 ثانیه کاهش پیدا کرد
البته بازنویسیای که کرد، بسیاری از مفاهیم رو به شکل بهینهتری در سطوح پایین هندل کرد و خیلی از بارها و overhead ها رو برداشت، مثلا در نسخه JS مصرف رم حدود 24GB رسیده بود بعد از دوساعت اجرا، ولی نسخه Rust کلا 4GB رم مصرف میکرد و کلا 10 ثانیه طول میکشید روی دیتاست کامل
نتیجه ماجرا این هست که حس میکنم کمکم باید یک زبان کامپایلری هم به چرخه زبان هایی که روزمره باهاشون کار میکنیم، اضافه کنیم چون واقعا تفاوت خیلی خیلی زیادی هست در کارهای CPU Bound بینشون، تفاوتی مثل ۳-۴ روز و ۱۰ ثانیه
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from TechTube 𝕏 تک توب
گوگل در نسخه 128 مرورگر کروم که در حال حاضر ازمایشی هست، نسخه کوچکی از هوش مصنوعی Gemini رو قرار داده که به صورت افلاین و روی خود دستگاه اجرا میشه و به توسعه دهندگان سایتها امکان استفاده از این مدل رو به صورت مجانی برای کاربردهایی مثل ترجمه، خلاصه سازی و دیگر سوالات به نسبت ساده رو میده.
🔎 mortenjust
📍 @TechTube
🔎 mortenjust
📍 @TechTube
Please open Telegram to view this post
VIEW IN TELEGRAM
مدت زیادی میشه که با Lottie سر و کار دارم و خب اگر نمیدونید، در واقع Lottie ها یکسری انیمیشنهایی Vector هستند که بهصورت JSON هستند و از روی اون JSON میشه هر فریمشون رو ساخت و انیمیت کرد
در واقع renderer های مختلفی برای Lottie روی پلتفرمهای مختلف هست، مثلا معقولترین Renderer در وب میتونه ترسیم و انیمیت کردن بهصورت SVG باشه یا حتی میشه در تمامی پلتفرمها داخل یک Canvas ترسیم کرد و Image Data هر فریم رو در هر View ای که میخواهیم نمایش بدیم
در حالت کلی، تمامی استیکرهای متحرک و ایموجیهای پریمیومی که در تلگرام میبینیم هم همون Lottie هستند که GZip شدند
با وجود تمامی این مزیتها، یک عیب بزرگی که Lottie داره این هست که Renderer هایی که براش وجود دارند معمولا بهینه نیستند و در واقع در بعضی پلتفرمها مثل وب اصلا "نمیتونند" هم بهینه باشند
یکی از سریعترین Renderer هایی که برای Lottie وجود داشته و تلگرام هم از اون استفاده میکنه، پروژه rlottie هست که توسط سامسونگ توسعه داده شده، چیز جدیدی نیست و حتی در تلگرام وب هم از نسخه WASM اش استفاده شده
حالا میخوام بهتون پروژه ThorVG رو معرفی کنم، این پروژه واقعا بینظیر هست و کمتر شناخته شده، ولی در واقع یک کیت تمام عیار برای رندر کردن SVG و WebP و Lottie و ... هست و چندین سر و گردن حتی از rlottie هم بالاتره، هم سریعتر هست و هم بهصورت فعال توسعه پیدا میکنه و هم باندل سایز بهتری نسبت به rlottie داره برای WASM
در حالت کلی، بهنظرم هرکسی که از rlottie استفاده میکرده باید همین الان بره و با ThorVG جایگزین کنه
اینجا میتونید بنچمارکهای ThorVG برای Lottie رو ببینید
در واقع renderer های مختلفی برای Lottie روی پلتفرمهای مختلف هست، مثلا معقولترین Renderer در وب میتونه ترسیم و انیمیت کردن بهصورت SVG باشه یا حتی میشه در تمامی پلتفرمها داخل یک Canvas ترسیم کرد و Image Data هر فریم رو در هر View ای که میخواهیم نمایش بدیم
در حالت کلی، تمامی استیکرهای متحرک و ایموجیهای پریمیومی که در تلگرام میبینیم هم همون Lottie هستند که GZip شدند
با وجود تمامی این مزیتها، یک عیب بزرگی که Lottie داره این هست که Renderer هایی که براش وجود دارند معمولا بهینه نیستند و در واقع در بعضی پلتفرمها مثل وب اصلا "نمیتونند" هم بهینه باشند
یکی از سریعترین Renderer هایی که برای Lottie وجود داشته و تلگرام هم از اون استفاده میکنه، پروژه rlottie هست که توسط سامسونگ توسعه داده شده، چیز جدیدی نیست و حتی در تلگرام وب هم از نسخه WASM اش استفاده شده
حالا میخوام بهتون پروژه ThorVG رو معرفی کنم، این پروژه واقعا بینظیر هست و کمتر شناخته شده، ولی در واقع یک کیت تمام عیار برای رندر کردن SVG و WebP و Lottie و ... هست و چندین سر و گردن حتی از rlottie هم بالاتره، هم سریعتر هست و هم بهصورت فعال توسعه پیدا میکنه و هم باندل سایز بهتری نسبت به rlottie داره برای WASM
در حالت کلی، بهنظرم هرکسی که از rlottie استفاده میکرده باید همین الان بره و با ThorVG جایگزین کنه
اینجا میتونید بنچمارکهای ThorVG برای Lottie رو ببینید
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
Vue & Vite Updates | VueConf US 2024
Evan You presents a talk at VueConf US 2024. Watch all the talks from this conference and more on Vue Mastery 👉 https://www.vuemastery.com/conferences
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan…
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan…
آدرس گیتهابتون رو توی این سایت وارد کنید و منتظر باشید که با استفاده از هوشمصنوعی OpenAI کاملا Roast تون کنه 😏
🌐 Github Roast
Please open Telegram to view this post
VIEW IN TELEGRAM
ظاهرا گیتهاب داون شده و دلیلش هم بخاطر تغییرات سمت دیتابیسی بوده که اعمال کردند، دارند rollback میکنند ☕️ نکته جالبی که توی این نیم ساعت داون بودن بهش رسیدم اینه که حداقل ۵-۶ تا سرچ منتهی به گیتهاب دارم در هر نیم ساعت
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
جاوا اسکریپت در ترکیب با تایپ اسکریپت واقعا عجیب و در عین حال منطقی هست. ساختار iterator ای که in در JS ارائه میده برای Vue در v-for معمولا به صورت item in Number استفاده میشه که در اون item در واقع اسم متغیر هست. حالا اگه از اون متغیر item استفاده نکنیم، تایپ اسکریپت گیر میده که باید استفاده کنی یا حذفش کنی، که وقتی حذف میشه با ساختار in Number میمونیم که بهطرز عجیبی مسخره ولی منطقی هست
یا حتی چنین ساختار هایی رو هم داریم:
اگر از state استفاده نکنید و صرفا نیاز به setState داشته باشید، مجبورید اینطوری بنویسید:
یا حتی چنین ساختار هایی رو هم داریم:
const [state, setState] = ...
اگر از state استفاده نکنید و صرفا نیاز به setState داشته باشید، مجبورید اینطوری بنویسید:
const [ , setState ] = ...
اگه دوست داشتید میتونید این مقاله بنچمارک کتابخونهها و فریمورکهای Solid و Vue و React و Svelte رو در زمینه SSR یا همون Server Side Rendering ببینید، بنچمارک معقولی هست و همونطور که توی تصویر میبینید هرکدوم باید این تصویر رو با 2400 تا div مربع بهصورت HTML جنریت کنند
خلاصه مقاله به این صورت هست که:
🖼️ Solid (863 req/s)
🖼️ Vue (353 req/s)
🖼️ Svelte(171 req/s)
🖼️ React (138 req/s)
واقعا Solid و Vue بینظیر عمل میکنند، Solid که در کل واقعا سریع هست و جایی برای تعریف نداره، ولی Vue با وجود VDOM حتی از Svelte ای که Real DOM هست هم دو برابر سریعتره!
در نهایت، این صرفا بنچمارک SSR هست و طبیعتا معیار اصلی در انتخاب یک فریمورک سرعت SSR اش نیست، ولی خب دونستن این اعداد و ارقام میتونه مفید باشه
خلاصه مقاله به این صورت هست که:
واقعا Solid و Vue بینظیر عمل میکنند، Solid که در کل واقعا سریع هست و جایی برای تعریف نداره، ولی Vue با وجود VDOM حتی از Svelte ای که Real DOM هست هم دو برابر سریعتره!
در نهایت، این صرفا بنچمارک SSR هست و طبیعتا معیار اصلی در انتخاب یک فریمورک سرعت SSR اش نیست، ولی خب دونستن این اعداد و ارقام میتونه مفید باشه
Please open Telegram to view this post
VIEW IN TELEGRAM
اگه برنامهنویس جاوااسکریپت و تایپاسکریپت هستید و حسرت میخورید که چرا نمیتونید کد های وباسمبلی (WASM) بنویسید، قطعا از AssemblyScript خوشتون میاد
این پروژه رو حدودا از دو ماه پیش میخواستم معرفی کنم ولی وقت نمیشد، این پروژه در واقع یک زبان Strict Type کامپایلری هست که سینتکساش شباهت خیلی زیادی به تایپاسکریپت داره و بهعنوان یک برنامهنویس تایپاسکریپت میتونید بهراحتی باهاش شروع بهکار کنید
البته که دسترسی به تمامی ویژگی های JS ندارید و بحث تایپها صرفا در حد warning نیست، بلکه عملا باید Strict Type بنویسید، پس خبری از TS Ignore هم نیست طبیعتا، ولی خب خیلی هیجانانگیز هست برای دولوپر های تایپاسکریپت که بدون نیاز به دونستن زبان های کامپایلری مثل C یا C++ یا Rust و ...، میتونند برنامههای WASM بنویسند
ولی خب اصلا WASM چی هست؟ وباسمبلی یا WASM در واقع روشی هست که شما کدهای باینری اسمبلی سطح پایینی بنویسید که مرورگر بتونه اونها رو بهصورت مستقیم اجرا کنه، البته کاربرد WASM بیشتر برای Port کردن برنامههای آماده به وب هست، مثلا FFMPEG یا PHP یا Curl یا ... همگی با قابلیت WASM در حال حاضر پورت شدند و میتونید در داخل مرورگرها ازشون استفاده کنید بهصورت مستقیم، ولی خب با توجه به پرفرمنس بهتری که با WASM میتونید بگیرید برای عملیات های پردازشی مثل پردازش تصویر و...، این زبان میتونه گزینه معقولی باشه برای اینکه بخشی از پروژهتون که نیاز به پردازش داره رو بهصورت WASM بنویسید
در کل، پروژه انقلابی نیست ولی خب یک گام بزرگی هست در زمینه برنامههای Hybrid ترکیبی JS و WASM، که بتونید بخش هایی از پروژهتون که نیاز هست رو WASM پیاده کنید بدون اینکه نیازمند به دونستن زبانهای سطحپایین داشته باشید
🌐 assemblynoscript.org
این پروژه رو حدودا از دو ماه پیش میخواستم معرفی کنم ولی وقت نمیشد، این پروژه در واقع یک زبان Strict Type کامپایلری هست که سینتکساش شباهت خیلی زیادی به تایپاسکریپت داره و بهعنوان یک برنامهنویس تایپاسکریپت میتونید بهراحتی باهاش شروع بهکار کنید
البته که دسترسی به تمامی ویژگی های JS ندارید و بحث تایپها صرفا در حد warning نیست، بلکه عملا باید Strict Type بنویسید، پس خبری از TS Ignore هم نیست طبیعتا، ولی خب خیلی هیجانانگیز هست برای دولوپر های تایپاسکریپت که بدون نیاز به دونستن زبان های کامپایلری مثل C یا C++ یا Rust و ...، میتونند برنامههای WASM بنویسند
ولی خب اصلا WASM چی هست؟ وباسمبلی یا WASM در واقع روشی هست که شما کدهای باینری اسمبلی سطح پایینی بنویسید که مرورگر بتونه اونها رو بهصورت مستقیم اجرا کنه، البته کاربرد WASM بیشتر برای Port کردن برنامههای آماده به وب هست، مثلا FFMPEG یا PHP یا Curl یا ... همگی با قابلیت WASM در حال حاضر پورت شدند و میتونید در داخل مرورگرها ازشون استفاده کنید بهصورت مستقیم، ولی خب با توجه به پرفرمنس بهتری که با WASM میتونید بگیرید برای عملیات های پردازشی مثل پردازش تصویر و...، این زبان میتونه گزینه معقولی باشه برای اینکه بخشی از پروژهتون که نیاز به پردازش داره رو بهصورت WASM بنویسید
در کل، پروژه انقلابی نیست ولی خب یک گام بزرگی هست در زمینه برنامههای Hybrid ترکیبی JS و WASM، که بتونید بخش هایی از پروژهتون که نیاز هست رو WASM پیاده کنید بدون اینکه نیازمند به دونستن زبانهای سطحپایین داشته باشید
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from | کانال توسعهدهندگان جاوااسکریپت |
This media is not supported in your browser
VIEW IN TELEGRAM
✨ با استفاده از کتابخونه Cursify میتونید افکتهای انیمیشنی زیبایی به Cursor موس در محیط وب بدید. این کتابخونه با React و Typenoscript و Tailwind و Framer Motion ساخته شده و بهراحتی در پروژهها بهصورت کامپوننت قابل استفاده است.
🌐 Website
💎 Channel: @DevelopixJavanoscript
🌐 Website
💎 Channel: @DevelopixJavanoscript
Forwarded from | کانال توسعهدهندگان جاوااسکریپت |
💎 وبسایت UIVerse منبعی غنی از کامپوننتهای پر استفاده و زیبا برای طراحی UI هست که میتونید بهراحتی کدهای مربوط به کامپوننتهای مورد علاقهتون دریافت کنید. لازم بهذکر هست که تمامی کامپوننتها Open-Source هستند و بدون مشکل میتونید استفاده کنید.
🌐 UIVerse.io
💎 Channel: @DevelopixJavanoscript
🌐 UIVerse.io
💎 Channel: @DevelopixJavanoscript
اگه توسعهدهنده Mini App های تلگرام هستید، احتمالا با مشکلات و موانع این کار هم آشنا هستید. ابزار جدیدی که نوشتم با عنوان TMA Studio با ارائه یک محیط Mock شبیهسازی شده فرایند توسعه مینیاپ رو سادهتر میکنه
اوپنسورس هم هست و میتونید از طریق لینک زیر در گیتهاب مشاهده کنید
⚙️ Github
🌐 Website
پ.ن: سعی میکنم در اولین فرصتی که تونستم، یک دوره توسعه مینی اپ تلگرام ضبط کنم
اوپنسورس هم هست و میتونید از طریق لینک زیر در گیتهاب مشاهده کنید
⚙️ Github
🌐 Website
پ.ن: سعی میکنم در اولین فرصتی که تونستم، یک دوره توسعه مینی اپ تلگرام ضبط کنم