وب‌اسِمبِلی برای سرعت بالا طراحی شده است و کد آن تقریباً با سرعت کدهای بومی اجرا می‌شود.

تمامی مرورگرهای اصلی (Chrome، Firefox، Safari، Edge و غیره) از WebAssembly پشتیبانی می‌کنند.

وب‌اسِمبِلی به صورت مستقل از پلتفرم کار می‌کند و در انواع سیستم‌عامل‌ها و مرورگرها قابل اجرا است.

وب‌اسِمبِلی در یک محیط امن اجرا می‌شود که به آن دسترسی مستقیم به سیستم‌عامل و فایل‌ها داده نمی‌شود، و این امنیت بیشتری را فراهم می‌کند.

با WebAssembly می‌توانید به راحتی با کدهای JavaScript‌ای تعامل کنید و داده‌ها و توابع را به اشتراک بگذارید.

در مجموع، WebAssembly یک تکنولوژی است که به بهبود کارایی و قابلیت اجرای اپلیکیشن‌های وب کمک می‌کند و استفاده از آن به خصوص در پروژه‌های پیچیده و بزرگ که نیاز به سرعت بالا دارند، روز به روز در حال افزایش است.

#️⃣ #WhatsThat #webassembly

🚀 @coolycode

Python : BeautifulSoup | Scrapy | Selenium

JavaScript : Puppeteer | Cheerio

PHP : Goutte

Ruby : Nokogiri | Watir

#️⃣ #WhatsThat #web_scraping

🆔 Channel | Group | YouTube

#WhatsThat #PWA

➊ قابل نصب : کاربران می‌توانند این اپلیکیشن‌ها رو از طریق مرورگر نصب کنند و به آیکونش رو در صفحه اصلی دستگاه خود داشته باشند‌

➋ کارکرد آفلاین : وقتی اینترنت قطع باشه، PWA می‌تونه به کمک "سرویس ورکر"ها (Service Workers) کار بکنه.

➌ به‌روزرسانی خودکار : این اپلیکیشن‌ها همیشه به‌روز هستند و نیازی به آپدیت دستی ندارند.

➍ امنیت بالا : PWA فقط از طریق HTTPS عرضه می‌شه، یعنی ارتباطات بین کاربر و سرور رمزگذاری شده و امن است.

➊ صرفه‌جویی در زمان و هزینه : یک بار توسعه برای همه پلتفرم‌ها کافی است.

➋ حجم کم‌تر : نسبت به اپلیکیشن‌های بومی، PWA حجم کمتری داره و سریع‌تر دانلود و نصب می‌شود.

➌ دسترسی آسان : کاربران بدون نیاز به فروشگاه‌های اپلیکیشن، به راحتی می‌تونند اپلکیشن های PWA را نصب و استفاده کنند.

Channel | Group | YouTube

#WhatsThat #CMS #HeadlessCMS

➊ استقلال فرانت‌اند : فرانت‌اند و بک‌اند از هم جدا هستند.

➋ چندپلتفرمی بودن : محتوا به هر دستگاهی ارسال می‌شه.

➌ کاهش ریسک امنیتی : دسترسی مستقیم به سرور کمتر می‌شه.

➊ پیچیدگی توسعه : نیاز به تخصص در چندین فناوری و ابزار مختلف.

➋ هزینه بیشتر : ممکنه به تیم‌های بزرگ‌تر و منابع بیشتری نیاز باشه.

➌ نبود رابط کاربری پیش‌ساخته : فرانت‌اند باید از طراحی بشه.

Channel | Group | YouTube

#WhatsThat #reactjs

فریم‌ورک : فریم‌ورک کنترل جریان اجرای برنامه رو در دست داره و کد شما رو به زمان و شیوه‌ای که تعیین کرده اجرا می‌کنه.

لایبرری : لایبرری به شما کنترل کامل بر جریان برنامه رو می‌ده و خودتون تصمیم می‌گیرید که چه زمانی و چگونه از لایبرری استفاده کنید.

فریم‌ورک : فریم‌ورک‌ها معماری و چهارچوب مشخصی رو تحمیل می‌کنند و شما باید برنامه‌ی خودتون رو مطابق با اونها تنظیم کنید.

لایبرری: لایبرری‌ها بدون تحمیل ساختار خاص، مجموعه‌ای از ابزارها رو در اختیار شما قرار می‌دهند تا به دلخواه از اونها استفاده کنید.

فریم‌ورک :ممکنه فریم‌ورک‌‌ها انعطاف‌پذیری شما رو محدود کنند چون باید از روش‌ها و الگوهای خاص اونها پیروی بکنید.

لایبرری : لایبرری‌ها به شما آزادی بیشتری می‌دن تا بتونید به روش دلخواه خودتون از اونها بهره‌برداری بکنید.

فریم‌ورک : فریم‌ورک‌ها برای پروژه‌های بزرگ و پیچیده طراحی شده‌اند که نیاز به ساختاردهی و مدیریت بهتر دارند.

لایبرری : لایبرری‌ها بیشتر برای انجام وظایف خاص و مشخص به کار می‌رن که ممکنه نیاز به مقیاس‌پذیری بالا نداشته باشند.

فریم‌ورک : فریم‌ورک‌ها معمولاً بخش‌های زیادی از برنامه زو به خودشون وابسته می‌کنند و تغییر فریم‌ورک ممکنه نیاز به تغییرات زیادی در برنامه داشته باشه.

لایبرری : استفاده از لایبرری‌ها معمولاً به صورت مستقل است و تغییر یا حذف آنها تأثیر زیادی بر روی سایر بخش‌های برنامه ندارد.

اینکه از فریم‌ورک یا لایبرری استفاده کنیم بستگی به نیاز پروژه‌ داره

- اگر پروژه‌ات بزرگه و نیاز به ساختار منظم و یکپارچه داری، فریم‌ورک بهتره چون کلیات کار رو مدیریت می‌کنه و بهت کمک می‌کنه سریع‌تر به نتیجه برسی.

- اگر پروژه‌ات کوچیک‌تره یا فقط نیاز به انجام یک وظیفه خاص رو داری، لایبرری بهتره چون بهت آزادی عمل بیشتری می‌ده تا فقط همون کاری که می‌خوای رو انجام بدی.

#WhatsThat #javascript #window

let myWindow = window.open("https://example.com")
// بستن تب باز شده بعد از 5 ثانیه
setTimeout(() => {
    myWindow.close();
}, 5000);

let width = window.innerWidth;
let height = window.innerHeight;

let myDiv = document.getElementById("myDiv");

myDiv.style.width = (width / 2) + "px"; 
// نصف عرض پنجره

myDiv.style.height = (height / 3) + "px"; 
// یک سوم ارتفاع پنجره

// ذخیره اطلاعات
window.localStorage.setItem("theme", "dark");

// خوندن اطلاعات
let theme = window.localStorage.getItem("theme");
console.log("تم انتخاب شده: " + theme);

// پاک کردن اطلاعات
window.localStorage.removeItem("theme");

// خوندن آدرس فعلی صفحه
console.log("آدرس فعلی: " + window.location.href);

// هدایت کاربر به صفحه دیگه
window.location.href = "https://example.com";

// تغییر قسمتی از URL بدون لود مجدد صفحه
window.location.hash = "section1"; // کاربر رو به بخش مشخصی از صفحه هدایت می‌کنه

// نمایش پیام ساده
window.alert("به وبسایت ما خوش آمدید!");

// پرسیدن سوال از کاربر
let name = window.prompt("اسمت چیه؟");
console.log("اسمی که کاربر وارد کرده: " + name);

// گرفتن تأییدیه از کاربر
let result = window.confirm("آیا مطمئن هستید که می‌خواهید ادامه دهید؟");
if (result) {
    console.log("کاربر ادامه داد");
} else {
    console.log("کاربر لغو کرد");
}

#javascript | #website

آموزش، تست کد و دیباگ کردن

#libarary | #reactjs

با Styled Components میتونید مدیریت بهتر و ساده‌تری رو استایل ها داشته باشید و از تداخل استایل‌ها جلوگیری کنید. ⚡

const Button = styled.button`
  color: ${props => props.primary ? 'red' : 'blue'};
  font-size: 1.5em;
  padding: 0.25em 1em;
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

🚀 @coolycode

یعنی اینکه توی سایت‌های سه‌بعدی، به جای دیدن تصاویر و المان های ساده و ثابت، می‌تونی اشیاء و مدل‌ها رو به شکل واقعی‌تر و از زوایای مختلف ببینی.

درسته که سایت های سه بعدی خیلی جذابن ولی خیلی مهمه که بدونیم به درد هر کسی نمیخوره.

درواقع این قابلیت بیشتر برای بازی های سه بعدی تحت وب و وبسایت های فروشگاهی که دیدن محصولاتشون از زوایای مختلف مهمه، مثل لوازم خانگی، مبلمان یا حتی طراحی‌های معماری.

❗important 🔺

اول از همه مدل‌های سه‌بعدی باید با استفاده از نرم‌افزارهای مخصوص مثل Blender، Maya و 3ds Max با دقت بالا ساخته بشن.

البته مدل‌ها حتما باید به فرمت‌های مناسب وب (مثل glTF یا OBJ) تبدیل بشن تا در مرورگرها قابل استفاده باشند !

❗important 🔺

برای نمایش مدل‌های سه‌بعدی در فرانت‌اند میتونیم از کتابخانه‌هایی مثل Three.js استفاده کنیم.

این کتابخانه‌ها به کمک WebGL ( API برای رندر گرافیک سه‌بعدی در مرورگر) عمل می‌کنند و محتوای سه‌بعدی رو مستقیماً روی صفحات وب به نمایش می‌گذارند.

و در نهایت باید با استفاده از جاوااسکریپت، ویژگی‌های تعاملی و انیمیشنی مثل چرخش، زوم و ... رو به مدل های 3D اعمال کنی 💥

درسته که در سایت های سه‌بعدی مدل های 3D خیلی مهم هستند ولی برای ایجاد حس بهتر در کاربران بهتره که به باقی المان های وبسایت انیمشن های تعاملی و خلاقانه اضافه کنید.

یکی از بهترین و قدرتمند ترین لایبرری ها برای ایجاد این نوع از وبسایت ها Framer Motion هست ( پست معرفی framer motion )

#️⃣ #WhatsThat | #3D | #WebGL | #threejs

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

#javascript #vs #article

پ.ن : اگر با زبان برنامه نویسی جاوااسکریپت کار میکنید یکی از مباحث مهمی که حتما باید بدونید primitive و refrence value هستش 👌

نکته مهمی که در مورد این لایبرری وجود داره اینه که برای react, vue و angular پکیج اختصاصی داره و میتونید توی پروژه های خودتون به سادگی ازش استفاده کنید 😁⚡

#NEWPost | #libarary

🚀 @coolycode

سم جدید جور کردم براتون بفرستید برا اینو اون و خلاصه کیف کنید، هر بار بهش فکر میکنم خندم می گیره 🔥😂

#️⃣ #NEWPost #programming

🚀 @coolycode