Forwarded from سامان بهشتیان
خیلیها برای اولین بار اسم حریم خصوصی تفاضلی یا همون Differential Privacy رو میشنون
فرض کنید یه محصول دارید که برای میلیونها کاربر نصب شده.
شما میخواید بفهمید مردم بیشتر از کدوم قابلیت استفاده میکنن، کدوم دکمهها بیشتر کلیک میشن، یا کدوم بخشهای اپلیکیشن مشکل دارن.
حالا سؤال اصلی اینه: چطور این آمار رو بگیریم، بدون اینکه بفهمیم هر کاربر دقیقاً چی کار کرده؟
اینجاست که Differential Privacy وارد میشه.
خلاصه ماجرا اینه:
بهجای اینکه داده خام هر کاربر رو ببینی، یه مقدار نویز حسابشده به خروجی اضافه میکنی.
طوری که خروجی کلی هنوز برای تحلیل مفیده، ولی از روی اون نتونی بفهمی یه کاربر خاص دقیقاً چه چیزی فرستاده.
⚙️ این تکنیک کجا استفاده میشه؟
چند تا مثال واقعی:
- اپل برای Device Analytics ازش استفاده میکنه
- برای بعضی قابلیتهای Apple Intelligence هم استفاده شده
- در سطح سیستمعامل، برای فهمیدن الگوهای کلی استفاده از امکانات
- در بعضی سناریوهای دولتی مثل سرشماری و disclosure avoidance
- برای تحلیل رفتار کلی کاربران، بدون دسترسی به داده شخصی خام
پس اگه بخوام خیلی ساده بگم، Differential Privacy بیشتر برای جمعزدن رفتار کلی مردم استفاده میشه، نه برای دیدن رفتار تکتک افراد.
حالا مشکل اینجاست…
اگه شما جونیور یا مید لول باشی، احتمالاً اولین سؤال اینه که:
«من دقیقاً کِی باید ازش استفاده کنم؟»
جواب کوتاه:
وقتی نیاز داری از داده کاربران بینش آماری بگیری، ولی نمیخوای یا نباید داده خام رو افشا کنی.
مثلاً:
- تعداد دفعات استفاده از یه feature
- میانگین امتیاز کاربران
- تعداد crashها در یک نسخه
- الگوهای کلی جستوجو
- تشخیص اینکه کدوم مسیرها بیشتر خراب میشن
یه مثال واقعی بزنم:
فرض کنید یه تیم موبایل دارید و میخواید بفهمید کدوم بخش اپلیکیشن باعث ترک کاربر میشه.
اگه لاگ خام بفرستی، ممکنه اطلاعات حساس لو بره.
ولی اگه از Differential Privacy استفاده کنی، میتونی آمار کلی بگیری… بدون اینکه مسیر دقیق یه کاربر خاص قابل شناسایی باشه.
اینجا دقیقاً فرقش با لاگ معمولی معلوم میشه.
لاگ معمولی میگه «این کاربر این کار رو کرد».
DP میگه «در کل، این رفتار اینقدر زیاد دیده شده»… بدون اینکه بگه کدوم کاربر.
یه نکته مهم هم اینه که Differential Privacy جای همه چیز رو نمیگیره.
برای استفاده ازش باید بدونی چی رو میخوای اندازه بگیری و چقدر نویز قابل قبوله.
یعنی اگر metric خیلی حساس یا خیلی کمتعداد باشه، خروجیات ممکنه عملاً بیفایده بشه.
پس برای جونیور و مید لول، برداشت درست اینه:
- DP برای تحلیل آماری امن استفاده میشه
- برای حذف کامل ریسک نیست، ولی ریسک شناسایی فرد رو خیلی کم میکنه
- بیشتر توی analytics، telemetry، feature usage، crash reporting، و measurement کاربرد داره
- باید روی count، sum، average و موضوعات مشابه فکر کنی، نه روی هر دیتایی
خلاصه اگر بخوام در یک جمله بگم:
Differential Privacy یعنی از داده کاربران، یه تصویر کلی بگیری… بدون اینکه بشه بهراحتی فهمید هر فرد دقیقاً چی کار کرده.
Reaction 👎👍 و Share یادت نره 😉
✋ اگر تازه عضو کانال شدی٬ کلی پست تکنیکال به درد بخور و ناب رو از دست دادی٬ پس برای بررسیشون یه تایم کوچیک بذار
#سامان #مفاهیم #concept
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
فرض کنید یه محصول دارید که برای میلیونها کاربر نصب شده.
شما میخواید بفهمید مردم بیشتر از کدوم قابلیت استفاده میکنن، کدوم دکمهها بیشتر کلیک میشن، یا کدوم بخشهای اپلیکیشن مشکل دارن.
حالا سؤال اصلی اینه: چطور این آمار رو بگیریم، بدون اینکه بفهمیم هر کاربر دقیقاً چی کار کرده؟
اینجاست که Differential Privacy وارد میشه.
خلاصه ماجرا اینه:
بهجای اینکه داده خام هر کاربر رو ببینی، یه مقدار نویز حسابشده به خروجی اضافه میکنی.
طوری که خروجی کلی هنوز برای تحلیل مفیده، ولی از روی اون نتونی بفهمی یه کاربر خاص دقیقاً چه چیزی فرستاده.
⚙️ این تکنیک کجا استفاده میشه؟
چند تا مثال واقعی:
- اپل برای Device Analytics ازش استفاده میکنه
- برای بعضی قابلیتهای Apple Intelligence هم استفاده شده
- در سطح سیستمعامل، برای فهمیدن الگوهای کلی استفاده از امکانات
- در بعضی سناریوهای دولتی مثل سرشماری و disclosure avoidance
- برای تحلیل رفتار کلی کاربران، بدون دسترسی به داده شخصی خام
پس اگه بخوام خیلی ساده بگم، Differential Privacy بیشتر برای جمعزدن رفتار کلی مردم استفاده میشه، نه برای دیدن رفتار تکتک افراد.
حالا مشکل اینجاست…
اگه شما جونیور یا مید لول باشی، احتمالاً اولین سؤال اینه که:
«من دقیقاً کِی باید ازش استفاده کنم؟»
جواب کوتاه:
وقتی نیاز داری از داده کاربران بینش آماری بگیری، ولی نمیخوای یا نباید داده خام رو افشا کنی.
مثلاً:
- تعداد دفعات استفاده از یه feature
- میانگین امتیاز کاربران
- تعداد crashها در یک نسخه
- الگوهای کلی جستوجو
- تشخیص اینکه کدوم مسیرها بیشتر خراب میشن
یه مثال واقعی بزنم:
فرض کنید یه تیم موبایل دارید و میخواید بفهمید کدوم بخش اپلیکیشن باعث ترک کاربر میشه.
اگه لاگ خام بفرستی، ممکنه اطلاعات حساس لو بره.
ولی اگه از Differential Privacy استفاده کنی، میتونی آمار کلی بگیری… بدون اینکه مسیر دقیق یه کاربر خاص قابل شناسایی باشه.
اینجا دقیقاً فرقش با لاگ معمولی معلوم میشه.
لاگ معمولی میگه «این کاربر این کار رو کرد».
DP میگه «در کل، این رفتار اینقدر زیاد دیده شده»… بدون اینکه بگه کدوم کاربر.
یه نکته مهم هم اینه که Differential Privacy جای همه چیز رو نمیگیره.
برای استفاده ازش باید بدونی چی رو میخوای اندازه بگیری و چقدر نویز قابل قبوله.
یعنی اگر metric خیلی حساس یا خیلی کمتعداد باشه، خروجیات ممکنه عملاً بیفایده بشه.
پس برای جونیور و مید لول، برداشت درست اینه:
- DP برای تحلیل آماری امن استفاده میشه
- برای حذف کامل ریسک نیست، ولی ریسک شناسایی فرد رو خیلی کم میکنه
- بیشتر توی analytics، telemetry، feature usage، crash reporting، و measurement کاربرد داره
- باید روی count، sum، average و موضوعات مشابه فکر کنی، نه روی هر دیتایی
خلاصه اگر بخوام در یک جمله بگم:
Differential Privacy یعنی از داده کاربران، یه تصویر کلی بگیری… بدون اینکه بشه بهراحتی فهمید هر فرد دقیقاً چی کار کرده.
Reaction 👎👍 و Share یادت نره 😉
✋ اگر تازه عضو کانال شدی٬ کلی پست تکنیکال به درد بخور و ناب رو از دست دادی٬ پس برای بررسیشون یه تایم کوچیک بذار
#سامان #مفاهیم #concept
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
حریمخصوصی تفاضلی
خانه - حریمخصوصی تفاضلی
پیشرفت چشمگیر فناوری اطلاعات، منجر به رشد بیسابقه تولید داده شده است که این داده های بزرگ به منظور اهداف گوناگون تجاری، آموزشی، درمانی و غیره جمعآوری شده و
❤2
DevSource
📅 روز 4: لیستها و جدولها در HTML 🎯 نمایش مرتب اطلاعات تا اینجا یاد گرفتیم متن، عکس، لینک و فرم بسازیم. امروز یاد میگیریم چطور اطلاعات رو مرتب و ساختاریافته نمایش بدیم. 📝 لیستها (Lists) لیستها برای نمایش مجموعهای از آیتمها استفاده میشن. مثلاً: خرید روزانه…
📅 روز 5: پروژه Login Page با HTML
🎯 جمعبندی تمام مباحث HTML
تا اینجا یاد گرفتیم:
✅ تگهای پایه
✅ لینکها
✅ تصاویر
✅ فرمها
✅ لیستها
✅ جدولها
حالا وقتشه همه چیز رو کنار هم بذاریم و اولین صفحه واقعی خودمون رو بسازیم.
🧠 پروژه امروز: صفحه ورود (Login)
تقریباً همه سایتها یک صفحه ورود دارن.
ما هم یک نسخه ساده از اون رو فقط با HTML میسازیم.
ساختار صفحه
🔍 بیایم کد رو بررسی کنیم
عنوان صفحه
<h1>ورود به حساب کاربری</h1>
عنوان اصلی صفحه.
فرم
تمام ورودیها داخل فرم قرار میگیرن.
فیلد ایمیل
کاربر ایمیلش رو وارد میکنه.
فیلد رمز عبور
کاراکترها مخفی نمایش داده میشن.
دکمه ورود
برای ارسال فرم.
🎯 چالش امروز
سعی کن این موارد رو به پروژه اضافه کنی:
✅ یک لوگو یا عکس بالای فرم
✅ لینک "ثبت نام"
✅ لینک "فراموشی رمز عبور"
🚀 خروجی فاز HTML
اگر این ۵ روز رو کامل انجام داده باشی، الان میتونی:
✅ ساختار هر صفحهای رو بسازی
✅ فرم طراحی کنی
✅ عکس و لینک اضافه کنی
✅ اطلاعات رو با لیست و جدول نمایش بدی
📌 فاز بعدی: CSS
از فردا وارد جذابترین بخش فرانتاند میشیم:
🎨 CSS
جایی که صفحههای ساده HTML تبدیل میشن به رابطهای کاربری حرفهای و مدرن. 😎🔥
#html_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
🎯 جمعبندی تمام مباحث HTML
تا اینجا یاد گرفتیم:
✅ تگهای پایه
✅ لینکها
✅ تصاویر
✅ فرمها
✅ لیستها
✅ جدولها
حالا وقتشه همه چیز رو کنار هم بذاریم و اولین صفحه واقعی خودمون رو بسازیم.
🧠 پروژه امروز: صفحه ورود (Login)
تقریباً همه سایتها یک صفحه ورود دارن.
ما هم یک نسخه ساده از اون رو فقط با HTML میسازیم.
ساختار صفحه
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>ورود به حساب کاربری</h1>
<form>
<p>ایمیل</p>
<input
type="email"
placeholder="ایمیل خود را وارد کنید"
>
<br><br>
<p>رمز عبور</p>
<input
type="password"
placeholder="رمز عبور"
>
<br><br>
<button>
ورود
</button>
</form>
</body>
</html>
🔍 بیایم کد رو بررسی کنیم
عنوان صفحه
<h1>ورود به حساب کاربری</h1>
عنوان اصلی صفحه.
فرم
<form>
</form>
تمام ورودیها داخل فرم قرار میگیرن.
فیلد ایمیل
<input
type="email"
placeholder="ایمیل خود را وارد کنید"
/>
کاربر ایمیلش رو وارد میکنه.
فیلد رمز عبور
<input
type="password"
placeholder="رمز عبور"
/>
کاراکترها مخفی نمایش داده میشن.
دکمه ورود
<button>ورود</button>
برای ارسال فرم.
🎯 چالش امروز
سعی کن این موارد رو به پروژه اضافه کنی:
✅ یک لوگو یا عکس بالای فرم
✅ لینک "ثبت نام"
✅ لینک "فراموشی رمز عبور"
🚀 خروجی فاز HTML
اگر این ۵ روز رو کامل انجام داده باشی، الان میتونی:
✅ ساختار هر صفحهای رو بسازی
✅ فرم طراحی کنی
✅ عکس و لینک اضافه کنی
✅ اطلاعات رو با لیست و جدول نمایش بدی
📌 فاز بعدی: CSS
از فردا وارد جذابترین بخش فرانتاند میشیم:
🎨 CSS
جایی که صفحههای ساده HTML تبدیل میشن به رابطهای کاربری حرفهای و مدرن. 😎🔥
#html_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤2
DevSource
راهنمای دوره📢 جهت استفاده از دوره، روی هشتگها بزنید و مطالب را دنبال کنید 👇 دوره ۳۰ روزه رایگان HTML, CSS, JavaScript 🎓 جهت آمادگی برای ورود به React.js 🚀 شامل سه فاز: فاز اول: آموزش HTML 🪜 #html_lessons@devsourcech فاز دوم: آموزش CSS 🎨 #css_lessons@devsourcech…
اینجا آموزش فشرده HTML برای ورود به React.js تموم شده 🎉🚀
از اینجا وارد فاز دوم آمادگی ورود به ریکت یعنی دوره CSS میشیم 💻📚
دوستان در حال حاضر کارهای مربوط به ادیت، ضبط و ساخت ویدئو کوتاه در رابطه با پیشنیازهای ورود به ریکت در حال انجامه و فصل هاهم در حال ضبطه
قراره باهم کلی صحبت کنیم و به زودی منتشر میشه تا شما همیشه دسترسی داشته باشید به دوره رایگان HTML, CSS, JavaScript جهت آمادگی ورود به React.js 🎥✨
تا اون زمان پستهای کانال رو دنبال کنید و از راهنمای دوره و هشتگها استفاده کنید.
انتهای هر پست براتون چالش و تمریناتی گذاشتم
زیر پست تمریناتتون رو بفرستید میبینم من شخصاً و کمکتون میکنم 🤝💪
#Hamed
#html_lessons@devsourcech
#css_lessons@devsourcech
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir/
از اینجا وارد فاز دوم آمادگی ورود به ریکت یعنی دوره CSS میشیم 💻📚
دوستان در حال حاضر کارهای مربوط به ادیت، ضبط و ساخت ویدئو کوتاه در رابطه با پیشنیازهای ورود به ریکت در حال انجامه و فصل هاهم در حال ضبطه
قراره باهم کلی صحبت کنیم و به زودی منتشر میشه تا شما همیشه دسترسی داشته باشید به دوره رایگان HTML, CSS, JavaScript جهت آمادگی ورود به React.js 🎥✨
تا اون زمان پستهای کانال رو دنبال کنید و از راهنمای دوره و هشتگها استفاده کنید.
انتهای هر پست براتون چالش و تمریناتی گذاشتم
زیر پست تمریناتتون رو بفرستید میبینم من شخصاً و کمکتون میکنم 🤝💪
#Hamed
#html_lessons@devsourcech
#css_lessons@devsourcech
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir/
❤2
DevSource
راهنمای دوره📢 جهت استفاده از دوره، روی هشتگها بزنید و مطالب را دنبال کنید 👇 دوره ۳۰ روزه رایگان HTML, CSS, JavaScript 🎓 جهت آمادگی برای ورود به React.js 🚀 شامل سه فاز: فاز اول: آموزش HTML 🪜 #html_lessons@devsourcech فاز دوم: آموزش CSS 🎨 #css_lessons@devsourcech…
🎨 فاز 2: CSS
نقشه راه یادگیری CSS برای React 🚀
خب حالا صفحاتمون هنوز ظاهر جذابی ندارن
اینجاست که CSS وارد میشه 💻.
CSS مسئول:
رنگها 🎨
فونتها ✍️
فاصلهها 📏
چیدمان عناصر 📦
ریسپانسیو بودن 📱
هست.
🗺️ مسیر یادگیری CSS
📅 روز 6
اتصال CSS به HTML 🔗
رنگها 🌈
فونتها 🔤
Text Styling ✨
📅 روز 7
Box Model 📦
Margin
Padding
Border
📅 روز 8
Display
Block
Inline
Inline-Block
📅 روز 9
Position
Relative
Absolute
Fixed
📅 روز 10
Flexbox (بخش اول) 🧶
📅 روز 11
Flexbox (بخش دوم)
تمرین عملی 💪
📅 روز 12
CSS Grid 📐
📅 روز 13
Hover
Transition
Animation های ساده 🎬
📅 روز 14
Responsive Design 📱💻
Media Query
📅 روز 15
پروژه نهایی CSS
ساخت Landing Page 🌐
🎯 هدف این فاز
بعد از این 10 روز باید بتونی:
✅ صفحات زیبا طراحی کنی
✅ UI های مدرن بسازی
✅ صفحات موبایل و دسکتاپ طراحی کنی
✅ برای ورود به React آماده بشی
#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
نقشه راه یادگیری CSS برای React 🚀
خب حالا صفحاتمون هنوز ظاهر جذابی ندارن
اینجاست که CSS وارد میشه 💻.
CSS مسئول:
رنگها 🎨
فونتها ✍️
فاصلهها 📏
چیدمان عناصر 📦
ریسپانسیو بودن 📱
هست.
🗺️ مسیر یادگیری CSS
📅 روز 6
اتصال CSS به HTML 🔗
رنگها 🌈
فونتها 🔤
Text Styling ✨
📅 روز 7
Box Model 📦
Margin
Padding
Border
📅 روز 8
Display
Block
Inline
Inline-Block
📅 روز 9
Position
Relative
Absolute
Fixed
📅 روز 10
Flexbox (بخش اول) 🧶
📅 روز 11
Flexbox (بخش دوم)
تمرین عملی 💪
📅 روز 12
CSS Grid 📐
📅 روز 13
Hover
Transition
Animation های ساده 🎬
📅 روز 14
Responsive Design 📱💻
Media Query
📅 روز 15
پروژه نهایی CSS
ساخت Landing Page 🌐
🎯 هدف این فاز
بعد از این 10 روز باید بتونی:
✅ صفحات زیبا طراحی کنی
✅ UI های مدرن بسازی
✅ صفحات موبایل و دسکتاپ طراحی کنی
✅ برای ورود به React آماده بشی
#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcech 📄
اینپوت با React.js ⚛️
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
اینپوت با React.js ⚛️
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcech
اینپوت با React.js ⚛️
اینپوت با React.js ⚛️
DevSource
راهنمای دوره📢 جهت استفاده از دوره، روی هشتگها بزنید و مطالب را دنبال کنید 👇 دوره ۳۰ روزه رایگان HTML, CSS, JavaScript 🎓 جهت آمادگی برای ورود به React.js 🚀 شامل سه فاز: فاز اول: آموزش HTML 🪜 #html_lessons@devsourcech فاز دوم: آموزش CSS 🎨 #css_lessons@devsourcech…
📅 روز 6: شروع CSS
🧠 خبCSS چیست؟
Cascading Style Sheets
است.
اگر HTML اسکلت ساختمان باشد 🏗️
CSS طراحی داخلی، رنگآمیزی و دکوراسیون آن ساختمان است 🎨
اتصال CSS به HTML
ابتدا یک فایل به نام:
style.css
بساز.
سپس داخل HTML این خط را قرار بده:
داخل تگ <head>.
اولین استایل
تغییر رنگ متن
تغییر اندازه متن
تغییر فونت ضخیم
تغییر رنگ پسزمینه
🎯 تمرین امروز
یک صفحه HTML بساز که:
یک عنوان داشته باشد
یک متن داشته باشد
رنگ عنوان را تغییر بده
اندازه عنوان را تغییر بده
رنگ پسزمینه صفحه را عوض کن
💡 نکته مهم:
از امروز وارد بخشی شدی که ظاهر سایتها را میسازد.
تقریباً هر چیزی که در ظاهر یک سایت میبینی، با CSS ساخته شده است.
📌 فردا: Box Model — مهمترین مفهوم CSS که هر توسعهدهنده فرانتاند باید بلد باشد. 🚀
#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
🧠 خبCSS چیست؟
Cascading Style Sheets
است.
اگر HTML اسکلت ساختمان باشد 🏗️
CSS طراحی داخلی، رنگآمیزی و دکوراسیون آن ساختمان است 🎨
اتصال CSS به HTML
ابتدا یک فایل به نام:
style.css
بساز.
سپس داخل HTML این خط را قرار بده:
<link rel="stylesheet" href="style.css">
داخل تگ <head>.
اولین استایل
<h1>سلام دنیا</h1>
h1 {
color: red;
}تغییر رنگ متن
h1 {
color: blue;
}تغییر اندازه متن
h1 {
font-size: 40px;
}تغییر فونت ضخیم
h1 {
font-weight: bold;
}تغییر رنگ پسزمینه
body {
background-color: lightgray;
}🎯 تمرین امروز
یک صفحه HTML بساز که:
یک عنوان داشته باشد
یک متن داشته باشد
رنگ عنوان را تغییر بده
اندازه عنوان را تغییر بده
رنگ پسزمینه صفحه را عوض کن
💡 نکته مهم:
از امروز وارد بخشی شدی که ظاهر سایتها را میسازد.
تقریباً هر چیزی که در ظاهر یک سایت میبینی، با CSS ساخته شده است.
📌 فردا: Box Model — مهمترین مفهوم CSS که هر توسعهدهنده فرانتاند باید بلد باشد. 🚀
#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcec🖥️
صفحه لاگین 🔐
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
صفحه لاگین 🔐
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcech
هاور افکت
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
هاور افکت
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤1👍1
DevSource
#نمونه_کد_فرانت_اند@devsourcech هاور افکت #Hamed #تکنولوژی اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅ ⚠️ آدرس کانال در تلگرام( حتما جوین بشید ) 🚀 @devsourcech ✅ در بله 🔹 Ch: @devsource سایت مستندات برنامه نویسی: 🥇 https://devsource.ir
interactive-helon-lattice-grid-model.zip
19.4 KB
This media is not supported in your browser
VIEW IN TELEGRAM
#نمونه_کد_فرانت_اند@devsourcech
تکنیک Procedural Animation
لینک گیت هاب :
https://github.com/HamedFarazi/Procedural-Animation1/tree/main
لینک مشاهده لایو:
https://procedural-animation1.vercel.app/
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
تکنیک Procedural Animation
لینک گیت هاب :
https://github.com/HamedFarazi/Procedural-Animation1/tree/main
لینک مشاهده لایو:
https://procedural-animation1.vercel.app/
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤1
DevSource
#نمونه_کد_فرانت_اند@devsourcech تکنیک Procedural Animation لینک گیت هاب : https://github.com/HamedFarazi/Procedural-Animation1/tree/main لینک مشاهده لایو: https://procedural-animation1.vercel.app/ #Hamed #تکنولوژی اگر این مطلب براتون مفید بود، با زدن…
این تکنیک با Canvas ساخته نشده 🛠️
فقط با:
✅ CSS
✅ JavaScript
✅ CSS Doodle
این انیمیشن از تکنیکی به اسم Procedural Animation استفاده میکنه. 🎬
یعنی به جای اینکه 100 متن و 100 انیمیشن دستی بسازی، یک الگوریتم مینویسی که خودش موقع اجرا همهچیز رو تولید میکنه. 🤖
ترفندهای استفادهشده:
• CSS Variables
• @property
• Dynamic Keyframes
• 3D Transform
• CSS Doodle
فرانتاند مدرن بیشتر از اینکه حفظ کردن کد باشه، یاد گرفتن این جور تکنیکهاست. 🚀
1️⃣ CSS Doodle
کل افکت روی کتابخانه css-doodle.com ساخته شده.
این کتابخونه اجازه میده با CSS الگوها، انیمیشنها و آثار هنری تولید کنی. 🎨
2️⃣ CSS Custom Properties (متغیرهای CSS)
و بعد:
متغیرهای CSS فقط برای رنگ نیستن؛ میتونن انیمیشن و تم کل سایت رو کنترل کنن. 🎛️
3️⃣ @property
این قسمت خیلی مهمه:
بعد:
انیمیت میشه. 🎨 با @property میتونی متغیرهای CSS رو انیمیت کنی؛ قابلیتی که خیلیها نمیشناسن.
4️⃣ CSS 3D Transform
و:
اکثر انیمیشنهای حرفهای وب فقط با ترکیب:
translate
rotate
scale
ساخته میشن.
5️⃣ Dynamic Keyframes
این بخش خیلی حرفهایه:
جاوااسکریپت خودش Keyframe تولید میکنه. 🔄
لازم نیست همیشه Keyframe رو دستی بنویسی؛ میشه با JS تولیدشون کرد.
6️⃣ DOM Injection
و
JavaScript
style.textContent = ...;
استایل در لحظه ساخته میشه. 💻
7️⃣ Procedural Animation
کل افکت در واقع از این تکنیک استفاده میکنه:
JavaScript
و درنهایت موقع اجرا مقادیر تصادفی تولید میشن. 🎲
دوستان Procedural Animation یعنی به جای ساخت 100 انیمیشن، یک الگوریتم بنویسی که خودش انیمیشن تولید کنه.
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامهنویسی:
🥇 https://devsource.ir
فقط با:
✅ CSS
✅ JavaScript
✅ CSS Doodle
این انیمیشن از تکنیکی به اسم Procedural Animation استفاده میکنه. 🎬
یعنی به جای اینکه 100 متن و 100 انیمیشن دستی بسازی، یک الگوریتم مینویسی که خودش موقع اجرا همهچیز رو تولید میکنه. 🤖
ترفندهای استفادهشده:
• CSS Variables
• @property
• Dynamic Keyframes
• 3D Transform
• CSS Doodle
فرانتاند مدرن بیشتر از اینکه حفظ کردن کد باشه، یاد گرفتن این جور تکنیکهاست. 🚀
1️⃣ CSS Doodle
کل افکت روی کتابخانه css-doodle.com ساخته شده.
<css-doodle></css-doodle>
این کتابخونه اجازه میده با CSS الگوها، انیمیشنها و آثار هنری تولید کنی. 🎨
2️⃣ CSS Custom Properties (متغیرهای CSS)
--color-1: #fff;
--color-2: #fed790;
و بعد:
color: var(--color-1);
متغیرهای CSS فقط برای رنگ نیستن؛ میتونن انیمیشن و تم کل سایت رو کنترل کنن. 🎛️
3️⃣ @property
این قسمت خیلی مهمه:
@property --color-2 {
syntax: '<color>';
inherits: true;
initial-value: #fed790;
}بعد:
--color-2: #00bb9c;
انیمیت میشه. 🎨 با @property میتونی متغیرهای CSS رو انیمیت کنی؛ قابلیتی که خیلیها نمیشناسن.
4️⃣ CSS 3D Transform
rotate: x y z 2400deg;
و:
translate: 30vmin;
scale: 0;
اکثر انیمیشنهای حرفهای وب فقط با ترکیب:
translate
rotate
scale
ساخته میشن.
5️⃣ Dynamic Keyframes
این بخش خیلی حرفهایه:
const xKeyframes = layers.map(...)
جاوااسکریپت خودش Keyframe تولید میکنه. 🔄
لازم نیست همیشه Keyframe رو دستی بنویسی؛ میشه با JS تولیدشون کرد.
6️⃣ DOM Injection
document.createElement("style")و
JavaScript
style.textContent = ...;
استایل در لحظه ساخته میشه. 💻
7️⃣ Procedural Animation
کل افکت در واقع از این تکنیک استفاده میکنه:
JavaScript
@r(...)
@p(...);
و درنهایت موقع اجرا مقادیر تصادفی تولید میشن. 🎲
دوستان Procedural Animation یعنی به جای ساخت 100 انیمیشن، یک الگوریتم بنویسی که خودش انیمیشن تولید کنه.
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر اعلام حضور کنید ✅
⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامهنویسی:
🥇 https://devsource.ir
یکی دیگه از اشتباهات رایج توی مصاحبه های بک اند اینه که طرف سریع میره سمت حل مسئله، بدون اینکه اول مسئله رو درست تعریف و یا درک کنه.
مثلا سوال میشه: «سیستم رو طوری طراحی کن که بتونه درخواست های زیاد رو هندل کنه»
و اون شخص سریع شروع می کنه به گفتن : ردیس، کافکا، میکروسرویس، لود بالانسر و ...
در حالی که مثلا هنوز نپرسیده که :
حجم ترافیک چقدره؟
الان read سنگین تره یا write؟
ما واسمون latency مهم تره یا consistency
الان bottleneck کجاست؟
"نتیجه این میشه که راه حل از مسئله جلو میزنه"
پس یادمون باشه که توی مصاحبه های بک اند، چیزی که بیشتر از تکنولوژی مهمه اینه که چقدر می تونی مسئله رو به شکل درست بشکنی و فرضیات رو شفاف کنی.
در واقع اول باید بفهمی اصلا مشکل کجاست.
#رادمان #مصاحبه #بکند
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
مثلا سوال میشه: «سیستم رو طوری طراحی کن که بتونه درخواست های زیاد رو هندل کنه»
و اون شخص سریع شروع می کنه به گفتن : ردیس، کافکا، میکروسرویس، لود بالانسر و ...
در حالی که مثلا هنوز نپرسیده که :
حجم ترافیک چقدره؟
الان read سنگین تره یا write؟
ما واسمون latency مهم تره یا consistency
الان bottleneck کجاست؟
"نتیجه این میشه که راه حل از مسئله جلو میزنه"
پس یادمون باشه که توی مصاحبه های بک اند، چیزی که بیشتر از تکنولوژی مهمه اینه که چقدر می تونی مسئله رو به شکل درست بشکنی و فرضیات رو شفاف کنی.
در واقع اول باید بفهمی اصلا مشکل کجاست.
#رادمان #مصاحبه #بکند
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤2
🚀 همیشه برام عجیبه وقتی میبینم یه همکار فرانتاند، کدهای HTML رو دستی و کاراکتر به کاراکتر تایپ میکنه! انگار هنوز داریم با تبر کد میزنیم…
⚙️ ماجرا اینه که Emmet برای فرانتکارها مثل یه میانبر برای زندگی میمونه. مثلاً به جای اینکه نیم ساعت وقت بذاری برای ساختار یه div با چهار تا کلاس و یه ul که داخلش ۱۰ تا li داره، فقط کافیه بنویسی:
div.container>ul>li.item-$*10 و بعد کلید Tab رو بزنی. تموم شد! کل ساختار توی یک ثانیه ساخته میشه.
🔧 نکتهی جالب اینجاست که خیلیا فکر میکنن باید حتماً یه پلاگین خاص نصب کنن، اما اگه از محصولات JetBrains مثل WebStorm استفاده میکنید، Emmet خیلی وقته اونجاست و منتظره شما ازش کار بکشید. فقط کافیه فایلتون با پسوند HTML باشه.
حالا سؤال اینجاست، شما هنوز دارید تگها رو دستی باز و بسته میکنید یا از این ابزار برای سرعت بخشیدن به کارتون استفاده میکنید؟
خلاصه اینکه نذارید تایپ کردنِ ساختارهای تکراری، وقتِ اصلیتون رو برای منطقِ برنامه بگیره.
#سامان #تکنولوژی
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
⚙️ ماجرا اینه که Emmet برای فرانتکارها مثل یه میانبر برای زندگی میمونه. مثلاً به جای اینکه نیم ساعت وقت بذاری برای ساختار یه div با چهار تا کلاس و یه ul که داخلش ۱۰ تا li داره، فقط کافیه بنویسی:
div.container>ul>li.item-$*10 و بعد کلید Tab رو بزنی. تموم شد! کل ساختار توی یک ثانیه ساخته میشه.
🔧 نکتهی جالب اینجاست که خیلیا فکر میکنن باید حتماً یه پلاگین خاص نصب کنن، اما اگه از محصولات JetBrains مثل WebStorm استفاده میکنید، Emmet خیلی وقته اونجاست و منتظره شما ازش کار بکشید. فقط کافیه فایلتون با پسوند HTML باشه.
حالا سؤال اینجاست، شما هنوز دارید تگها رو دستی باز و بسته میکنید یا از این ابزار برای سرعت بخشیدن به کارتون استفاده میکنید؟
خلاصه اینکه نذارید تایپ کردنِ ساختارهای تکراری، وقتِ اصلیتون رو برای منطقِ برنامه بگیره.
#سامان #تکنولوژی
⚠️ آدرس کانال در تلگرام(حتما عضو بشید)
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir
❤1