کدهالیک | codehalic
3.47K subscribers
319 photos
8 videos
66 files
359 links
دوره های آموزشیمون رو از داخل سایت ببینید

https://codehalic.ir
Download Telegram
بابک تو خیلی بامزه ای این چیه تو پنلت گذاشتی مگ ClashOfClans عه ؟ :))))))))))))))))

@codehalics | کدهالیک
😁15👎1🐳1😭1
کدهالیک | codehalic
بابک تو خیلی بامزه ای این چیه تو پنلت گذاشتی مگ ClashOfClans عه ؟ :)))))))))))))))) @codehalics | کدهالیک
یه بارم تو ی بیزینسی میدیدم که کاربر میخواد شارژ بخره هر بار که میخواد بخره ۱۲ بار ریکوست میزنه حداقل اخرم هیچ کدوم نمیخره ورداشتن ایپیشو بلاک کردن
بعدا فهمیدیم رو دکمه مادر مرده خرید که میرفت به درگاه لودینگ نزاشته بودن بعد خیلی دیر میرفت درگاه طرف هی ریکوست میزد چرا این لامصب نمیره تو درگاه !
نمیدونم چقد مرتبط بود این داستان ولی واقعا یه سری از اینایی ک زیاد ریکوست میزنن گندکاریای خودمون توی اپلیکیشنه
ما ک اونو بلاک کردیم ولی یاد گرفتیم واس این کارا یه کلید یونیک بسازیم برای یه کاربر توی ردیس که سیصد بارم زد نره سیصد تا تراکنش بسازه که بعدا بخوایم بلاکش کنیم چون‌اپ موبایل بود نمیشد دیگ ریلیز بدیم درستش کنیم اینو !

@codehalics | کدهالیک
😁9
داشتم مقاله معرفی Claude Opus 4.8 از Anthropic رو می‌خوندم و حس کردم کم‌کم داریم وارد فاز جدیدی از مدل‌های AI می‌شیم. جایی که صرفاً باهوش‌تر بودن مهم نیست، بلکه اینکه مدل چقدر قابل اعتماده اهمیت بیشتری پیدا کرده. چیزی که توی این نسخه خیلی روش تاکید شده اینه که Claude کمتر وقت‌ها الکی با اعتمادبه‌نفس جواب اشتباه میده و وقتی مطمئن نیست، راحت‌تر عدم قطعیت رو نشون میده. شاید ساده به نظر بیاد ولی به نظرم دقیقاً همین فرق بین یه مدل نمایشی و یه مدلیه که واقعاً بشه توی کار جدی بهش تکیه کرد.

از اون طرف قابلیت‌های agenticش هم خیلی خفن شده. مدل می‌تونه برای تسک‌های پیچیده چندتا workflow موازی اجرا کنه، خروجی‌ها رو بررسی کنه و بعد جمع‌بندی نهایی بده. یعنی کم‌کم داریم از «چت‌بات» فاصله می‌گیریم و می‌رسیم به چیزی شبیه همکار واقعی.

حسی که از کل مقاله گرفتم این بود که رقابت اصلی AI دیگه فقط روی benchmark و عدد و رقم نیست؛ روی اعتماد کاربره. هر مدلی که کمتر hallucinate کنه و رفتار قابل‌پیش‌بینی‌تری داشته باشه، احتمالاً برنده‌ی نسل بعدیه.

#Opus_48

https://www.anthropic.com/news/claude-opus-4-8

@codehalics | کدهالیک
👍31
یه خبر جنجالی این چند روزه مربوط به دعوای مایکروسافت با یه پژوهشگر امنیتیه که چندتا آسیب‌پذیری خطرناک ویندوز رو عمومی منتشر کرده بود و بعدش GitHub اکانتشو بست. داستان فقط بستن اکانت نیست؛ طرف میگه مایکروسافت عملاً زندگیشو خراب کرده چون نه توی برنامه bug bounty حمایتی دیده، نه گزارش‌هاش جدی گرفته شده و حالا هم دسترسیش قطع شده.

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

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

البته این وسط گیت هاب اکانت منو هم بن کرد دستش درد نکنه البته من احتمالا بخاطر استفاده از SNI Spoofing این اتفاق برام افتاد ولی شماها دیگ اینکارارو نکنین که بن میشید !

https://www.tomshardware.com/tech-industry/cyber-security/microsofts-github-bans-security-researcher-who-posted-zero-day-windows-exploits-because-company-ruined-their-life-expert-claims-action-is-vindictive-and-promises-further-retaliation

@codehalics | کدهالیک
2
‏دوستان می‌دونستید که این روشن/خاموش شدن Wifi ویندوزتون باگ نیست؟! به‌خاطر فیلترینگ شدید فایروال‌های ایرانه🤦🏻‍♀️

دلیل و راه‌حلش:
‏تست اتصال مایکروسافت (NCSI) که فیچر ویندوز ۱۰ به بعده بلاک می‌شه؛ به زبان ساده، به‌خاطر فیلترینگ، ویندوز فکر می‌کنه اینترنت قطع شده و برای همین هی وای‌فای رو خاموش/روشن می‌کنه تا اتصال برقرار شه.

‏راه غیرفعال کردنش:
‏۱. همزمان کلید Windows + R رو فشار بده (کلید ویندوز همون لوگو ویندوز روی کیبورد)
‏۲. توی کادر Run که باز شد، بنویس regedit و اینتر رو بزن.
‏۳. برو این مسیر:
‏HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\NlaSvc\Parameters\Internet
‏۴. روی EnableActiveProbing دابل‌کلیک و بعدش Value رو ۰ کن.
‏۵. سیستم رو ری‌استارت کن و تمام.

‏دیگه این فیچر غیرفعال می‌شه و VPNتون قطع نمی‌شه :(
‏ البته تا وقتی که غیرفعاله حتی اگه اینترنت قطع باشه، همیشه «Connected» نشون
می‌ده


https://x.com/geekzahra/status/2060532878862352755?s=46


@codehalics | کدهالیک
2👍1
کدهالیک | codehalic
این مدت که اینترنت ملی بود یه چیزی خیلی رو مخ بود توی مک بوک ۱ دقیقه اینترنت نداری اما دلیلش چیه : حل مشکل تأخیر اینترنت روی مک (وقتی وصلی ولی ۱ دقیقه نت نداری) اگه اینترنتت داخلیه، macOS اول یه تست می‌زنه و همین باعث delay میشه. راه‌حل توی Terminal بزن:…
قبلا همین داستان روی اپل و مک بوک ها داشتیم که وقتی نت ملی بود بهتون یه سلوشون یاد دادم از قدیم پستش اینجاست
راستی یادتون باشه الان که اینترنت وصل شد برشگردونید به حالت قبلی یعنی روشنش کنین اگر خاموشش کردید !

@codehalics | کدهالیک
👍1
امروز یه پروژه جدید دیدم به اسم Perry که ایده‌اش برام جالب بود. ماجراش اینه که می‌خواد TypeScript رو مستقیم به اپلیکیشن Native تبدیل کنه؛ یعنی به‌جای اینکه برای ساخت اپ دسکتاپ یا موبایل مجبور باشیم بریم سمت Electron، WebView، Node Runtime یا چیزهای سنگین‌تر، با همون TypeScript کد بزنیم ولی خروجی نهایی شبیه یه اپ واقعی و سبک‌تر روی سیستم‌عامل اجرا بشه.

چیزی که این پروژه رو مهم می‌کنه، دقیقاً از همون درد معروف توسعه چندپلتفرمی میاد. TypeScript برای خیلی از تیم‌ها زبان راحت، سریع و آشناییه، ولی وقتی بحث خروجی واقعی برای ویندوز، مک، لینوکس، موبایل یا حتی ابزارهای CLI می‌رسه، معمولاً یا باید هزینه پرفورمنس بدی، یا حجم اپ زیاد می‌شه، یا درگیر runtime و bridge و WebView می‌شی. Perry انگار داره تلاش می‌کنه این فاصله رو کم کنه؛ یعنی هم راحتی TypeScript رو نگه داره، هم خروجی سبک‌تر و Native‌تر بده.

https://www.perryts.com/

@codehalics | کدهالیک
4👎1
کدهالیک | codehalic
امروز یه پروژه جدید دیدم به اسم Perry که ایده‌اش برام جالب بود. ماجراش اینه که می‌خواد TypeScript رو مستقیم به اپلیکیشن Native تبدیل کنه؛ یعنی به‌جای اینکه برای ساخت اپ دسکتاپ یا موبایل مجبور باشیم بریم سمت Electron، WebView، Node Runtime یا چیزهای سنگین‌تر،…
سینتکش هم بامزه است بزارید یه مثال بزنم براتون که این جا بیوفته :

فرض کن می‌خوای یه ابزار داخلی ساده بسازی؛ مثلاً یه پنل کوچک برای تیم عملیات که فایل JSON تراکنش‌ها رو باز کنه، سرچ کنه، خطاها رو هایلایت کنه و خروجی بده.

چند تا راه داری :
یا با React وب می‌سازی و توی مرورگر بازش می‌کنی.

یا با Electron می‌سازی که بشه اپ دسکتاپ، ولی حجمش زیاد می‌شه چون با خودش runtime و مرورگر داره.

یا با زبان‌های Native مثل Swift/Kotlin/C#/C++ می‌سازی که خروجی سبک‌تره، ولی تیم فرانت/JS باید وارد فضای جدیدی بشه.

ولی Perry می‌خواد بگه: همون TypeScript رو نگه دار، ولی خروجی رو Native بده. مثلاً یه چیزی شبیه این می‌نویسی:

import { App, VStack, Text, Button, State } from "perry/ui"

const count = State(0)

App({
title: "Counter",
width: 400,
height: 300,
body: VStack(16, [
Text(`Count: ${count.value}`),
Button("Increment", () => count.set(count.value + 1)),
]),
})


بعد با یه دستور مثل perry counter.ts -o counter تبدیلش می‌کنی به برنامه‌ای که روی سیستم اجرا می‌شه. طبق داکیومنت خود Perry، همین مثال یک پنجره Native روی مک/ویندوز/لینوکس باز میکنه !
چی میخوای دیگ :))))))))

Easy peasy lemon squeezy

@codehalics | کدهالیک
5
خیلی وقت بود نرفته بودیم سر قوانین مهندسی نرم افزار امروز یه قوانین بامزه رو که تقریبا هممون تا الان حسش کردیم رو بررسی میکنیم :

امروز یه قانون بامزه دیدم به اسم Putt’s Law که خیلی خلاصه می‌گه توی سازمان‌های فنی، معمولاً اونایی که تکنولوژی رو عمیق می‌فهمن تصمیم‌گیر نهایی نیستن، و اونایی که تصمیم نهایی رو می‌گیرن، همیشه عمق فنی ماجرا رو نمی‌بینن. برای همین هم خیلی وقت‌ها مدیر فکر می‌کنه «این که کاری نداره، تا هفته بعد آماده‌ست»، ولی تیم فنی می‌دونه پشت همون «کاری نداره» کلی وابستگی، تست، ریسک، زیرساخت، دیتابیس و بدبختی خوابیده. از اون طرف هم اگر آدم‌های فنی از بیزینس و محصول دور بمونن، ممکنه بهترین راه‌حل فنی دنیا رو بسازن، اما دقیقاً مسئله درست رو حل نکنن. تهش انگار این قانون می‌گه درد اصلی تیم‌های نرم‌افزاری فقط تکنولوژی نیست؛ فاصله بین فهم فنی و قدرت تصمیم‌گیریه.

#lawsofsoftwareengineering

@codehalics | کدهالیک
2
کدهالیک | codehalic
خیلی وقت بود نرفته بودیم سر قوانین مهندسی نرم افزار امروز یه قوانین بامزه رو که تقریبا هممون تا الان حسش کردیم رو بررسی میکنیم : امروز یه قانون بامزه دیدم به اسم Putt’s Law که خیلی خلاصه می‌گه توی سازمان‌های فنی، معمولاً اونایی که تکنولوژی رو عمیق می‌فهمن…
این قانون خیلی عمیقه. دقیقاً یکی از دردهای همیشگی ما فنی‌ها همینه؛ ممکنه بهترین، تمیزترین و مهندسی‌شده‌ترین راه‌حل دنیا رو بسازیم، ولی آخرش بفهمیم اصلاً چیزی نبوده که بیزینس لازم داشته. نمونه‌اش هم تا دلتون بخواد برای من اتفاق افتاده. یه چیزی ساختم که از نظر فنی واقعاً پرفکت بوده، همه‌چیزش فکرشده، قابل توسعه، تمیز و خفن؛ بعد آخر کار فهمیدم نیاز واقعی بیزینس یه چیزی بوده که شاید اگر اول درست حرف می‌زدیم و نیازمندی رو دقیق درمی‌آوردیم، ده دقیقه هم ازم وقت نمی‌گرفت. ولی من برای مشکلی در حد پیکان، یه فراری خیلی خفن و مجهز ساخته بودم که آخرش هیچ‌کس نه لازم داشتش، نه ازش سر درمی‌آورد.

یه زمانی آلمانی می‌خوندم، یه ضرب‌المثل بامزه داشتن که می‌گفت:
Erst denken, dann handeln.
لریش میشه: اول فکر کن، بعد عمل کن. حالا این «فکر کردن» توی کار فنی دقیقاً یعنی قبل از دست به کد شدن، بشینی با بیزینس حرف بزنی، مسئله رو بفهمی، نیازمندی رو دقیق دربیاری، بفهمی درد اصلی کجاست و بعد بری سراغ راه‌حل. ولی متأسفانه خیلی از ماها از همون اول می‌پریم وسط اجرا، چون ساختن برامون جذاب‌تر از فهمیدنه. در حالی که اشتباه محضه؛ تو اصلاً چه می‌دونی نیازمندی دقیق بیزینس چیه که داری براش سولوشن طراحی می‌کنی؟ خیلی وقت‌ها مهارت اصلی این نیست که راه‌حل پیچیده‌تر بسازیم؛ مهارت اصلی اینه که بفهمیم اصلاً لازم هست چیزی بسازیم یا نه.


@codehalics | کدهالیک
👍2
سایت بالا بود و همه‌چیز ظاهراً درست کار می‌کرد. حتی لینک مستقیم عکس‌هایی که روی S3 بودند بدون مشکل باز می‌شدند و 200 برمی‌گشتند. اما کاور بعضی عکس‌ها در پروداکشن 500 می‌داد. وقتی DevTools را چک کردم، دیدم مرورگر به‌جای اینکه مستقیم عکس را از S3 بگیرد، دارد مسیر /_next/image را صدا می‌زند. همان‌جا مشخص شد مشکل از خود عکس یا S3 نیست، بلکه از Image Optimization در Next.js است. چون وقتی از کامپوننت Image استفاده می‌کنیم و optimization روشن باشد، Next.js عکس را از منبع می‌گیرد، resize و optimize می‌کند و بعد به مرورگر تحویل می‌دهد. این یعنی سرور کوچک من با 1 vCPU و 2GB RAM عملاً داشت نقش Image CDN را بازی می‌کرد. در محیط production، داخل Docker، با عکس‌های بزرگ PNG و سایزهایی مثل 3840، این پردازش گاهی به timeout یا خطای 500 می‌رسید. راه‌حل این بود که برای این شرایط، optimization را در Next.js خاموش کنم و images.unoptimized: true بگذارم تا مرورگر مستقیم عکس را از S3 بگیرد. خلاصه اگر لینک مستقیم S3 درست کار می‌کند اما /_next/image خطای 500 می‌دهد، احتمالاً مشکل از optimizer خود Next.js است، نه از فایل عکس یا S3.

نتیجه ساده است: اگر لینک مستقیم عکس درست کار می‌کند اما /_next/image خطای 500 می‌دهد، احتمالاً مشکل از S3 نیست؛ مشکل از این است که سرور Next.js توان پردازش و optimize کردن آن عکس را ندارد. برای سرورهای کوچک، image optimization واقعی باید روی CDN انجام شود، نه روی خود اپلیکیشن.

Hossein Molavi | The Engineering Mind

@codehalics | کدهالیک
👍12
در دیجیکالا برای حفظ سلامت معماری کدبیس‌های TypeScript و کنترل وابستگی بین ماژول‌ها، از ابزاری داخلی برای تحلیل coupling و cohesion استفاده می‌کنیم. حالا تصمیم گرفتیم نسخه ساده‌ای از این ابزار را با نام ts-modularity متن‌باز کنیم. این ابزار با اجرای دستور npx ts-modularity کدبیس را اسکن می‌کند و ساختار وابستگی‌ها، کلاسترهای طبیعی، چرخه‌های پنهان و بخش‌هایی را که نیاز به refactor دارند، به‌صورت بصری در مرورگر نمایش می‌دهد. هدف ts-modularity این است که تیم‌ها بتوانند خیلی سریع تصویر واضح‌تری از معماری واقعی کد خود داشته باشند و تصمیم‌های بهتری برای بهبود ساختار ماژول‌ها بگیرند.

https://github.com/mberneti/ts-modularity


@codehalics | کدهالیک
👏20👍2
یه قابلیت خیلی کم‌تر دیده‌شده توی Git هست به اسم rerere.

اسمش یعنی: Reuse Recorded Resolution
یعنی چی؟ یعنی اگه یه بار یه merge conflict رو حل کردی، Git می‌تونه یادش بمونه دفعه بعد اگه همون conflict تکرار شد، همون راه‌حل قبلی رو خودش دوباره اعمال کنه.
فقط کافیه یک بار فعالش کنی:
git config --global rerere.enabled true
از اون به بعد، مخصوصاً توی rebase، mergeهای تکراری، branchهای طولانی یا وقتی چند بار به یه conflict مشابه می‌خوری، Git کم‌کم می‌فهمه قبلاً چی کار کردی.

https://git-scm.com/book/en/v2/Git-Tools-Rerere

نمونه واقعی:
https://gist.github.com/skipcloud/f1033afb4fa5681d69fa63458cc95928

@codehalics | کدهالیک
9👎1
کدهالیک | codehalic
یه قابلیت خیلی کم‌تر دیده‌شده توی Git هست به اسم rerere. اسمش یعنی: Reuse Recorded Resolution یعنی چی؟ یعنی اگه یه بار یه merge conflict رو حل کردی، Git می‌تونه یادش بمونه دفعه بعد اگه همون conflict تکرار شد، همون راه‌حل قبلی رو خودش دوباره اعمال کنه. فقط…
مثلاً فرض کن یه branch قدیمی داری و هر بار که با main ری‌بیسش می‌کنی، سر یک فایل config یا یک import خاص conflict می‌خوری.
بار اول خودت conflict رو حل می‌کنی و به Git می‌گی کدوم نسخه درسته.
از دفعه بعد، اگر دوباره دقیقاً همان conflict پیش بیاد، Git می‌گه:
Resolved using previous resolution
یعنی: «داداش اینو قبلاً با هم حل کرده بودیم، من یادمه.»
همین‌جاست که rerere از یه قابلیت عجیب Git تبدیل می‌شه به یه نجات‌دهنده واقعی.

@codehalics | کدهالیک
5👎1
امروز یه چیزی دیدم که بعد مدت ها خستگیمو در کرد :))))
کدهالیک از مرز ۳۰۰۰ کاربر گذشت.

الان خانواده کدهالیک به ۳٬۰۱۶ نفر رسیده و تا امروز ۵٬۵۸۲ ثبت‌نام روی دوره‌ها داشتیم. بیشتر از ۱۷٬۷۴۴ بازدید محتوا ثبت شده، ۱۱٬۱۵۹ بازدید یکتا داشتیم و فقط در بخش ویدیوها، یادگیرنده‌ها بیش از ۸۳۳ ساعت و ۳۳ دقیقه آموزش دیده‌اند. ( این آمار مربوط به یک ماه گذشته است و کدهالیک نزدیک به 1 ساله که متولد شده و آماری از اون تایم تا یه ماه پیش ازش در دسترسمون نیست دی:)

چیزی که برای ما جذاب‌تر از خود عددهاست، عمق یادگیریه. تا امروز ۲٬۷۳۹ ویدیو کامل دیده شده، ۴٬۱۳۷ ویدیو توسط کاربران تماشا شده، ۱۹۹٬۳۵۵ رویداد یادگیری ثبت شده و ۴۰۷ یادگیرنده فعال داریم که واقعاً دارن مسیرشون رو جلو می‌برن.

این مسیر با همراهی شما معنی پیدا کرده. ممنونیم که کنار کدهالیک هستید و بهمون انگیزه می‌دید که جدی‌تر، بهتر و کاربردی‌تر ادامه بدیم.

https://codehalic.ir/

@codehalics | کدهالیک
16🔥5
کدهالیک | codehalic
امروز یه چیزی دیدم که بعد مدت ها خستگیمو در کرد :)))) کدهالیک از مرز ۳۰۰۰ کاربر گذشت. الان خانواده کدهالیک به ۳٬۰۱۶ نفر رسیده و تا امروز ۵٬۵۸۲ ثبت‌نام روی دوره‌ها داشتیم. بیشتر از ۱۷٬۷۴۴ بازدید محتوا ثبت شده، ۱۱٬۱۵۹ بازدید یکتا داشتیم و فقط در بخش ویدیوها،…
یه آمار خیلی جذاب دیگه از کدهالیک:

بین فعال‌ترین یادگیرنده‌های کدهالیک، کاربری داریم که تا امروز ۲۷ ساعت و ۱۶ دقیقه آموزش دیده. بعد از اون هم چندین کاربر دیگه داریم که بین ۱۲ تا ۲۵ ساعت از آموزش‌های سایت رو تماشا کردن.

یعنی فقط ۱۳ نفر از فعال‌ترین یادگیرنده‌ها، روی هم بیشتر از ۲۰۷ ساعت آموزش دیدن.

جذاب‌تر اینکه میانگین تکمیل آموزش بین این کاربران، در بیشتر موارد بالای ۹۰٪ بوده. یعنی صرفاً وارد دوره نشدن؛ واقعاً نشستن، دیدن، جلو رفتن و یاد گرفتن.

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

@codehalics | کدهالیک
🔥8👍3
کدهالیک | codehalic
یه آمار خیلی جذاب دیگه از کدهالیک: بین فعال‌ترین یادگیرنده‌های کدهالیک، کاربری داریم که تا امروز ۲۷ ساعت و ۱۶ دقیقه آموزش دیده. بعد از اون هم چندین کاربر دیگه داریم که بین ۱۲ تا ۲۵ ساعت از آموزش‌های سایت رو تماشا کردن. یعنی فقط ۱۳ نفر از فعال‌ترین یادگیرنده‌ها،…
یه آمار قشنگ دیگه هم از همراهی شما داریم.
در طول یک سال گذشته، ۳۶ نفر از مسیر «کافی بده» از کدهالیک حمایت کردن و مجموع حمایت‌ها به ۵٬۱۶۵٬۳۷۶ تومان رسیده.

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

https://www.coffeebede.com/codeholic

ممنونیم که فقط مخاطب نیستید؛ همراه این مسیر هستید.

@codehalics | کدهالیک
👍156🔥1
یه چیز جدید توی css یاد گرفتم باهاتون میخوام شیر کنم !

پارالاکس یعنی وقتی کاربر صفحه رو اسکرول می‌کنه، لایه‌های مختلف با سرعت متفاوت حرکت کنن؛ مثلاً متن عادی بالا بیاد ولی عکس پس‌زمینه کمی کندتر جابه‌جا بشه و صفحه حس عمق بگیره. قبلاً برای این کار معمولاً سراغ JavaScript می‌رفتیم، ولی الان با CSS جدید می‌شه خود انیمیشن رو به اسکرول وصل کرد؛ یعنی انیمیشن به جای زمان، با حرکت اسکرول جلو می‌ره. مثلاً خیلی ساده می‌تونیم بگیم عکس داخل یک بخش، موقع اسکرول کمی بالا و پایین حرکت کنه:
.parallax {
overflow: hidden;
view-timeline-name: --parallax;
}

.parallax img {
animation: moveImage linear both;
animation-timeline: --parallax;
animation-range: cover;
}

@keyframes moveImage {
from {
transform: translateY(-20%);
}

to {
transform: translateY(20%);
}
}

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

https://dan-webnotes.com/posts/2026-06-02-css-native-parallax-effect/

@codehalics | کدهالیک
16🔥2
کدهالیک | codehalic
یه چیز جدید توی css یاد گرفتم باهاتون میخوام شیر کنم ! پارالاکس یعنی وقتی کاربر صفحه رو اسکرول می‌کنه، لایه‌های مختلف با سرعت متفاوت حرکت کنن؛ مثلاً متن عادی بالا بیاد ولی عکس پس‌زمینه کمی کندتر جابه‌جا بشه و صفحه حس عمق بگیره. قبلاً برای این کار معمولاً…
از این داریم توی صفحه دوره کدهالیک استفاده میکنیم میتونین به طور نمونه یکی از دوره ها رو با دسکتاپ باز کنین سمت چپ که ثبت نام دوره است داره با همین انمیشن parallax کند تر از باقی قسمت ها بالا میره که روی هر دیوایس با هر Height ای تمرکزش روی ثبت نام در دوره باشه که دیده شه !
خود همینم از دل یه باگ برای یه کاربر میومد که Height دیوایسش انقد کم بود که دکمه ثبت نام رو نمیدید !

به طور مثال این صفحه رو توی دسکتاپ ببینید :
https://codehalic.ir/courses/frontend-codecamp-beginners

@codehalics | کدهالیک
🔥82
یه باگ عجیب توی VSCode و github.dev پیدا شده که داستانش خیلی ترسناکه:

فقط با کلیک روی یه لینک، ممکن بود مهاجم به GitHub Token شما برسه؛ یعنی همون چیزی که می‌تونه به ریپوهای خصوصی‌تون دسترسی داشته باشه و حتی روی بعضی ریپوها تغییر ایجاد کنه.

ماجرا از اینجا شروع می‌شه که github.dev در واقع یه VSCode داخل مرورگره. حالا پژوهشگر امنیتی نشون داده بود که با ترکیب یک Jupyter Notebook، Webview و چند میان‌بر کیبورد، می‌شه کاری کرد VSCode فکر کنه خود کاربر داره یه اکستنشن رو نصب می‌کنه؛ در حالی که پشت صحنه، یه کد مخرب داره توکن GitHub رو می‌دزده.

جزییات این باگ در این لینک :
https://blog.ammaraskar.com/github-token-stealing/


@codehalics | کدهالیک
😱1