JavaScriptmas 2024 – هفته 3

Summarize this content to 400 words in Persian Lang
این فصل است! JavaScriptmas دوباره اینجاست! JavaScriptmas یک رویداد برنامه نویسی جشن سالانه رایگان است که توسط مدرسه برنامه نویسی آنلاین Scrimba میزبانی می شود و شامل 24 چالش کدنویسی روزانه، جوایز و موارد دیگر است!
JavaScriptmas چیست؟
JavaScriptmas یک رویداد کدنویسی جشن است که توسط Scrimba از 1 تا 24 دسامبر میزبانی می شود. هر روز یک چالش جاوا اسکریپت جدید برای کمک به بهبود مهارت های کدنویسی خود دریافت خواهید کرد و می توانید جوایز را برنده شوید! شما می توانید هر راه حل چالش معتبر را دو بار برای دو شانس برنده شدن ارسال کنید! از آنجایی که این یک قرعه کشی است، برای توسعه دهندگان در هر سطح کدنویسی منصفانه است، زیرا به مهارت بستگی ندارد.
برای ارسال راه حل چالش خود، روی “ارسال راه حل” کلیک کنید تا کار خود ذخیره شود، که به طور خودکار شما را وارد قرعه کشی جایزه بزرگ می کند. برای شانس بیشتری برای برنده شدن، روی دکمه “اشتراک گذاری” کلیک کنید تا تشویق جاوا اسکریپتما در X و/یا لینکدین پخش شود—آنها برنده خوش شانس دوم را از پست های اجتماعی انتخاب می کنند! هرچه چالش های بیشتری را حل کنید، شانس شما برای برنده شدن جایزه بزرگ بیشتر است، بنابراین به ارسال ادامه دهید!
در 24 دسامبر، آنها دو برنده خوش شانس جایزه بزرگ را انتخاب خواهند کرد که هر کدام دریافت خواهند کرد:
به سرگرمی بپیوندید و مهارت های جاوا اسکریپت خود را در این فصل تعطیلات بهبود بخشید!
نکات برجسته جامعه
در روح فصل تعطیلات جشن، من از نمایش کارهای دیگران در بخش هایلایت های انجمن مقالات JavaScriptmas خود لذت می برم! من در حال جستجوی X/Twitter، LinkedIn، و کانال Scrimba Discord برای ارسالهای «مرتبط» توسط شرکتکنندگان همکار هستم تا بتوانم آن را به نمایش بگذارم. 🎉
راه حل های من
مانند هر سال، در JavaScriptmas شرکت خواهم کرد و راه حل های خود را در رسانه های اجتماعی به اشتراک خواهم گذاشت. با تکمیل چالش ها، پیوندهایی به Scrims در این مقالات پوشش ارائه خواهم کرد. 💻
نکات برجسته انجمن ⬇
کارل استورمز (@theBIMsider)
کارل استورمز با شگفتانگیز کردن ما با کره زمین «طوفان» برفی زمستانی خود، به نام خود عمل میکند! چالش روز ششم،انیمیشن Snow Globe”، شامل افتادن دانه های برف در داخل یک کره برفی است. هر دانه برف باید یک موقعیت شروع تصادفی، مدت زمان انیمیشن و اندازه داشته باشد.
با اضافه شدن کارل از تکان دادن ملایم و تکان دادن سخت دکمه ها، اکنون می توانید یک طوفان برفی تمام عیار را در کره برفی تقلید کنید! با کلیک کردن روی دکمههای لرزش، با متحرک کردن حرکت کره برفی و ایجاد جنون برفهای در حال چرخش، به یک هدف کششی میرسید!
کارل با افزودن دکمههایی برای شروع و از سرگیری بارش برف و تغییر دانههای برف، اهداف کششی بیشتری را تکمیل کرد و به کاربران این امکان را میدهد که از بین شکلکهای کریسمس، آدم برفیها یا ایموجیهای هدیه انتخاب کنند. آفرین، کارل!
کارل استورمز که با نام BIMsider نیز شناخته می شود، بیش از 25 سال تجربه در صنعت AECO دارد و در سفری برای یادگیری ترفندهای کدنویسی جدید از جمله جاوا اسکریپت، CSS، HTML، C# و پایتون است. به عنوان رئیس انجمن، حمایت و فناوری در Newforma، او از BIM دفاع می کند، کدنویسی را کاوش می کند و به هوش مصنوعی می پردازد.
کارل بینش خود را از طریق مقالاتی در BIMsider به اشتراک می گذارد و مخاطبان را به عنوان میزبان در پادکست هایی مانند Wrenches Gadgets & Hacks، BIMThoughs، The BILT Academy Podcast و The Simply Complex Podcast جذب می کند.
پیوندهای راه حل های کارل:
لینجای جیمنز (@imdesignsllc)
Lynjai Jimenez بار دیگر جامعه JavaScriptmas را تحت تأثیر قرار داده است، این بار با افزودن انیمیشن ویدیویی به چالش روز 9، “کدام دستور غذا را مادربزرگ باید درست کند؟”
آیا TikTok کریسمس را اجرا کرده است؟ این چالش شامل کمک به مادربزرگ برای بهروزرسانی دستور العملهای خود برای مطابقت با ترجیحات غذایی جدید نوههایش است که ناشی از پیروی آنها از تأثیرگذاران TikTok است! یافتن دستور غذا برای مادربزرگ نیازمند فیلتر کردن دستور العملها بر اساس ترجیحات نوههایش است، که شامل دستور العملهایی با حداقل یکی از موادی است که آنها دوست دارند و آنهایی را با موادی که اکنون دوست ندارند، حذف میکند.
Lynjai بخش جاوا اسکریپت چالش کدنویسی را حل کرد، اما چیزی که توجه همه را به خود جلب کرد اضافه کردن وی از ویدئوی دختر شیرینی زنجفیلی رقصنده بود که به عنوان پسزمینه پروژه او نمایش داده شد!
برای تنظیم یک ویدیو به عنوان پس زمینه، Lynjai ابتدا ویدیو را به پوشه تصاویر اضافه کرد. سپس از آن استفاده کرد عنصر با autoplay، muted، و loop ویژگی ها برای پخش بدون درز و اعمال کلاس video-background برای یک ظاهر طراحی شده این تگ مسیر و نوع فایل ویدیویی را مشخص می کند و از نمایش مناسب اطمینان می دهد.
autoplay muted loop class=”video-background”>
src=”./images/gingergirl.mp4″ type=”video/mp4″>
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در حالی که TikTok ممکن است دستور العمل های کریسمس مادربزرگ را خراب کرده باشد، پس زمینه ویدئویی دخترانه شیرینی زنجفیلی رقص TikTok به طرز لذت بخشی در جامعه جاوا اسکریپتماس طنین انداز شده است! کار فوق العاده ای، لینجای!
🔗 لینک به scrim
اورواشی (@ihsavru)
اورواشی، همچنین به عنوان شناخته شده است دوز کد، یک ویدیوی یوتیوب ضبط کرد که نحوه حل چالش روز 10 ساخت یک ” را پوشش می دهد.پرچم کریسمس در CSS.”
قبل از مقابله با چالش JavaScriptmas، Urvashi یک آموزش هنر پیش نیاز سریع CSS را ارائه می دهد، جایی که او نحوه ایجاد اشکال اولیه را آموزش می دهد. او یک ابزار مفید به نام CSS Clip-path maker را معرفی میکند که به شما امکان میدهد با کپی کردن مسیر کلیپ شکل انتخابشده، از بین شکلهای از پیش ساخته، مانند مثلث، انتخاب کنید. شما همچنین می توانید با این ابزار به سادگی با اشاره، کلیک و کشیدن مسیرهای کلیپ ایجاد کنید!
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
Urvashi همچنین نحوه ترکیب اشکال ساده برای ایجاد اشکال پیچیده تر را نشان می دهد که برای حل چالش روز 10 JavaScriptmas بسیار مهم است. او نحوه ایجاد یک شکل قلب را ابتدا با قلم و کاغذ گراف و سپس با کد، با ترکیب سه div در یک ظرف نشان می دهد.
پس از آموزش هنر CSS، Urvashi به طرز ماهرانه و هنرمندانه ای در حل چالش ساخت پرچم بابا نوئل قدم برمی دارد. او سپس با ایجاد یک نسخه متحرک در Codepen فراتر می رود! کار برجسته، اوروشی!
دوره های پیوندهای اجتماعی Urvashi و موارد دیگر در این آدرس موجود است beacons.ai/thecodedose.
پیوندهای راه حل های روز Urvashi's 10:
دانیل لارا (@daniellaera)
دانیل لارا به طرز ماهرانهای در حل چالش روز 11 قدم میگذارد.بازی تطبیق کارت، ” در یک ویدیوی پخش زنده YouTube!
چالش بازی تطبیق کارت یک بازی کلاسیک “جفت را بیابید” با تم جشن کریسمس است. در این بازی بازیکنان با کلیک بر روی کارت ها، کارت ها را آشکار می کنند. هنگامی که یک بازیکن یک کارت را نشان می دهد، تا زمانی که کارت دوم آشکار شود، قابل مشاهده است. اگر دو کارت آشکار شده مطابقت داشته باشند، تا پایان بازی قابل مشاهده خواهند بود. با این حال، اگر کارت ها مطابقت نداشته باشند، آنها به حالت پنهان خود برگردانده می شوند. برای افزودن یک عنصر غیرقابل پیش بینی، کارت ها در ابتدای هر بازی به هم می ریزند و هر بار تجربه ای تازه و جذاب را تضمین می کنند.
دانیل چالش کارت تطبیق بازی را با اجرای یک سری توابع برای مدیریت منطق بازی حل کرد. این shuffleArray تابع برای تصادفی کردن ترتیب جفت ایموجی ها استفاده می شود و هر بار بازی تازه ای را تضمین می کند. پس از بارگیری سند، صفحه بازی با هشت کارت پر می شود که هر کدام نشان دهنده یک جفت ایموجی است. این کارت ها در ابتدا با علامت سوال نمایش داده می شوند و پس از کلیک کردن نمایان می شوند.
// Shuffle logic
function shuffleArray(array) {
for (let i = array.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
این handleCardClick تابع فرآیند افشای کارت را مدیریت می کند. از تعامل با کارتهای آشکار شده جلوگیری میکند و منطق جفتهای تطبیق را کنترل میکند. وقتی روی کارتی کلیک میشود، نشان داده میشود و اگر با کارتی که قبلاً فاش شده مطابقت داشته باشد، هر دو نمایان میشوند. در غیر این صورت، پس از یک تاخیر کوتاه دوباره پنهان می شوند. بازی جفتهای همسان را دنبال میکند و با یافتن همه جفتها، برنده شدن را اعلام میکند. این resetCards تابع وضعیت بازی را پس از هر تلاش بازنشانی میکند و اجازه میدهد تا بازی ادامه یابد تا زمانی که همه مسابقات پیدا شوند.
// Handle card click logic
function handleCardClick(ev) {
if (lockBoard) return; // Prevent clicks during timeout logic
const clickedCard = ev.target;
if (clickedCard.classList.contains(‘revealed’)) return; // Prevent clicking already revealed cards
clickedCard.classList.add(‘revealed’);
clickedCard.textContent = clickedCard.getAttribute(‘data-emoji’);
if (!firstCard) {
firstCard = clickedCard;
return;
}
secondCard = clickedCard;
lockBoard = true;
if (firstCard.getAttribute(‘data-emoji’) === secondCard.getAttribute(‘data-emoji’)) {
// Match found
matchedPairs++;
resetCards();
if (matchedPairs === 4) {
alert(‘You win!’);
}
} else {
// Not a match
setTimeout(() => {
firstCard.classList.remove(‘revealed’);
firstCard.textContent = ‘?’;
secondCard.classList.remove(‘revealed’);
secondCard.textContent = ‘?’;
resetCards();
}, 1000);
}
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
مطمئن باش برای تماشای ویدیوی یوتیوب ببینید که چگونه کل کد این چالش از ابتدا توسعه یافته است. کار عالی دنیل!
دانیل یک مهندس نرم افزار باتجربه است که در دوازده سال گذشته در ژنو، سوئیس زندگی کرده است. زمان او در آنجا قدردانی او را از شکلات و فوندوی سوئیسی افزایش داده و مهارت های برنامه نویسی او را تقویت کرده است! دانیل زندگی خود در ژنو را به الگوریتمی بهینهسازی شده تشبیه میکند که چالشهای برنامههای اشکال زدایی را با لذت بیآرام از مناظر کوهستانی سوئیس متعادل میکند. تخصص حرفه ای منحصر به فرد و لذت شخصی او نشان دهنده یک سبک زندگی آرام و رضایت بخش است.
پیوندهای دانیل لارا:
🔗 لینک به scrim
🔗 لینک ویدیوی یوتیوب
تری سلولین (@Tricellulin)
چگونه گرینچ کریسمس را هک کرد!
تری سلولین با حل چالش روز دوازدهم توجه دیسکورد را به خود جلب کرد. «فروشگاه کالای بابانوئل را هک کنید» با موضوع دکتر سوس گرینچ!
بابانوئل در تلاش است تا با راه اندازی یک فروشگاه کالا از کریسمس درآمد کسب کند. اما آیا فروشگاه کالا امن است؟ انجام تست نفوذ به عهده یک هکر اخلاقی است!
Tricellulin نه تنها چالش را حل کرد بلکه یک کد “HOT-FIX” را برای تعمیر وب سایت ایجاد کرد و از هرگونه تلاش گرینچ مانند در آینده برای خراب کردن کریسمس جلوگیری کرد!
چگونه او سایت را هک کرد و سپس آن را تعمیر کرد؟ او تنها در دو قدم سریع آن را شکست و در مرحله سوم آن را درست به عقب برگرداند!
ابتدا، او دکمهای را رندر کرد که با نگه داشتن ماوس روی کنسول، «شما هک شدهاید 🏴☠️» را ثبت میکند تا ثابت کند آسیبپذیریهایی وجود دارد.
دوم اینکه عنوان محصول h2 را به «این را نخرید» تغییر داد.
ثالثاً او کد را اصلاح کرد، بنابراین غیرقابل هک است!
برای شروع هک کد زیر را در فیلد ورودی “ارسال نظر” قرار دهید.
توجه: خط 38 را در فایل index.js علامت گذاری نکنید (// return str // uncomment for hack test)
//PASTE BUTTON CODE ON REVIEW FIELD TO HIJACK PAGE. Works on mouseover.
const hackingCode = `
YOU WIN! Exclusive pay 2 get 1 promotion Click here for a BIG RIPOFF!
`
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در زیر گزارش کنسول آمده است:
You have been hacked 🏴☠️ … in case you haven’t noticed
›
Product added to basket.
›
diverting payment to my account 💰
›
accessing financial details…
›
name: Santa Claus | First Bank of Lapland 25-12-00 | cc: 8463859365949 PIN: 2512 | password: J1ngleB3ll$
›
name: Sugarplum Mary | Sweet Treat Savings 15-12-25 | cc: 1234567890123 PIN: 1512 | password: SugarAndSp1ce
›
name: Wunorse Openslae | SleighMaster Credit Union 02-12-80 | cc: 2345678901234 PIN: 138 | password: F1xItF4st!
›
name: Bushy Evergreen | ToyMakers Bank 19-12-00 | cc: 3456789012345 PIN: 1912 | password: Mach1neW1zard
›
name: Alabaster Snowball | List Keepers Bank 24-12-77 | cc: 4567890123456 PIN: 2412 | password: NaughtyOrNice
›
name: Pepper Minstix | Secret Village Bank 31-12-01 | cc: 5678901234567 PIN: 3112 | password: SecretK33p3r
›
name: Elf Grumbles | Quality Control Bank 14-12-15 | cc: 6789012345678 PIN: 1412 | password: ToyT3st3r
›
name: Elf Bernard | Workshop Council Bank 01-01-99 | cc: 7890123456789 PIN: 65 | password: HeadHonch0
›
name: Mary Claus | Lapland Family Bank 14-02-02 | cc: 8473629104827 PIN: 1402 | password: MrsCl4us123
›
Seriously, I hacked your store 🏴☠️ 100K Bitcoins and we can settle this!! It’s cheap, I know, but I’m feeling generous in the spirit of Christmas and all.
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
Tricelluin توضیح می دهد که پیچیده ترین کار برای او این بود که فیلمنامه خود را به صفحه منتقل کند، که فهمیدن آن دو ساعت طول کشید. از قضا، او فاش میکند که راهحل با یک “import('./mySolution.js') نسبتاً ساده به دست آمده است. بیانیه ای که به او کنترل کامل می داد تا صفحه را همانطور که می خواست تغییر دهد.
├┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
▻ HOT-FIX
├┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
*/
const microSanitize = (str) => {
// return str // uncomment for hack test
const escapedInput = str.replace(/&/g, ‘&’)
.replace(/, ‘<‘)
.replace(/>/g, ‘>’)
.replace(/”/g, ‘”‘)
.replace(/’/g, ”’)
return escapedInput
.replace(/eval/ig, ”)
.replace(/javascript:/ig, ”)
.replace(/script:/ig, ”)
}
/*┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈*/
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
و بنابراین، با خنده و شادی، Tricellulin جاوا اسکریپتما را نجات داد و شادی را در دور و نزدیک پخش کرد! با وبسایتی که اکنون امن است و قلبی پر از شادی، او فروشگاه کالای بابانوئل را ایمن کرد، بسیار خوشحال کننده! 🎄✨
🔗 لینک به scrim
❄ موارد ارسالی JavaScriptmas من ❄
اگر میخواهید درباره سفر من با Scrimba بیشتر بدانید و چگونه یادگیری با آنها ممکن است به شما کمک کند، میتوانید مقاله من را بخوانید: چگونه Scrimba به من و بسیاری دیگر کمک میکند تا به توسعهدهندگان وب مطمئن و آماده تبدیل شویم
Scrimba یک بار دیگر من را تحت تاثیر قرار داد و الهام گرفت! می تونی کامل منو بخونی بررسی Scrimba در پست 2020/12/13 من.
“این یکی از بهترین نقدهای Scrimba است که تا به حال خوانده ام، @MikeJudeLarocca. متشکرم 🙏”
– پر هارالد بورگن، مدیر عامل Scrimba 14 دسامبر 2020
حتما به پادکست HTML All The Things گوش دهید!
📝 من همچنین برای پادکست HTML All The Things مقالاتی می نویسم که می توانید در وب سایت آنها بخوانید: https://www.htmlallthethings.com/.
حتما HTML همه چیزها را در شبکه های اجتماعی بررسی کنید!
با این لینک وابسته 20 درصد تخفیف بگیرید!
از این لینک وابسته برای تخفیف ویژه 20% استفاده کنید! (اگر تخفیف بالاتری در حال حاضر موجود باشد، به جای آن اعمال می شود.)
مهم: این تخفیف فقط برای حساب های جدید است.
برای بررسی Scrimba 2.0 جدید روی پیوند کلیک کنید!
یک حساب کاربری ایجاد کنید، و می توانید به محتوای حرفه ای ارتقا دهید، جایی که باید تخفیف 20٪ را مشاهده کنید.
افشای: این مقاله حاوی لینک های وابسته است. من ممکن است بابت هر خریدی که از طریق این پیوندها انجام می شود بدون هزینه اضافی کمیسیون دریافت کنم. حمایت شما به من کمک می کند تا به تولید محتوای ارزشمند ادامه دهم. متشکرم
نتیجه گیری
رویداد سالانه جاوا اسکریپتماس Scrimba یک راه سرگرم کننده و جشن برای تعهد به کدنویسی روزانه است. چه یک کدنویس جدید و چه باتجربه باشید، می توانید کار خود را با جامعه به اشتراک بگذارید، دوستان جدیدی پیدا کنید و حتی جوایزی را برنده شوید!
اگر میخواهید بعد از رویداد رایگان به یادگیری با Scrimba ادامه دهید، دورههای رایگان بسیاری را بررسی کنید! اگر میخواهید متعهد شوید که به یک توسعهدهنده وب فرانتاند استخدامپذیر تبدیل شوید، مراقب نرخهای دوره تخفیف تعطیلات آنها باشید!
این رویداد برنامه نویسی هیجان انگیز را از دست ندهید! امروز در JavaScriptmas Scrimba شرکت کنید، راه حل های خود را به اشتراک بگذارید، با توسعه دهندگان همکار ارتباط برقرار کنید، و مهارت های خود را در حین تفریح بهبود بخشید! JavaScriptmas مبارک! 🎄
بیایید وصل شویم! من فعال هستم لینکدین و توییتر.
آیا اکنون علاقه مند به شرکت در جاوا اسکریپتماهای Scrimba امسال هستید؟ آیا قبلاً در JavaScriptmas Scrimba سال گذشته شرکت کرده اید؟ لطفا مقاله را به اشتراک بگذارید و نظر دهید!
این فصل است! JavaScriptmas دوباره اینجاست! JavaScriptmas یک رویداد برنامه نویسی جشن سالانه رایگان است که توسط مدرسه برنامه نویسی آنلاین Scrimba میزبانی می شود و شامل 24 چالش کدنویسی روزانه، جوایز و موارد دیگر است!
JavaScriptmas چیست؟
JavaScriptmas یک رویداد کدنویسی جشن است که توسط Scrimba از 1 تا 24 دسامبر میزبانی می شود. هر روز یک چالش جاوا اسکریپت جدید برای کمک به بهبود مهارت های کدنویسی خود دریافت خواهید کرد و می توانید جوایز را برنده شوید! شما می توانید هر راه حل چالش معتبر را دو بار برای دو شانس برنده شدن ارسال کنید! از آنجایی که این یک قرعه کشی است، برای توسعه دهندگان در هر سطح کدنویسی منصفانه است، زیرا به مهارت بستگی ندارد.
برای ارسال راه حل چالش خود، روی “ارسال راه حل” کلیک کنید تا کار خود ذخیره شود، که به طور خودکار شما را وارد قرعه کشی جایزه بزرگ می کند. برای شانس بیشتری برای برنده شدن، روی دکمه “اشتراک گذاری” کلیک کنید تا تشویق جاوا اسکریپتما در X و/یا لینکدین پخش شود—آنها برنده خوش شانس دوم را از پست های اجتماعی انتخاب می کنند! هرچه چالش های بیشتری را حل کنید، شانس شما برای برنده شدن جایزه بزرگ بیشتر است، بنابراین به ارسال ادامه دهید!
در 24 دسامبر، آنها دو برنده خوش شانس جایزه بزرگ را انتخاب خواهند کرد که هر کدام دریافت خواهند کرد:
به سرگرمی بپیوندید و مهارت های جاوا اسکریپت خود را در این فصل تعطیلات بهبود بخشید!
نکات برجسته جامعه
در روح فصل تعطیلات جشن، من از نمایش کارهای دیگران در بخش هایلایت های انجمن مقالات JavaScriptmas خود لذت می برم! من در حال جستجوی X/Twitter، LinkedIn، و کانال Scrimba Discord برای ارسالهای «مرتبط» توسط شرکتکنندگان همکار هستم تا بتوانم آن را به نمایش بگذارم. 🎉
راه حل های من
مانند هر سال، در JavaScriptmas شرکت خواهم کرد و راه حل های خود را در رسانه های اجتماعی به اشتراک خواهم گذاشت. با تکمیل چالش ها، پیوندهایی به Scrims در این مقالات پوشش ارائه خواهم کرد. 💻
نکات برجسته انجمن ⬇
کارل استورمز (@theBIMsider)
کارل استورمز با شگفتانگیز کردن ما با کره زمین «طوفان» برفی زمستانی خود، به نام خود عمل میکند! چالش روز ششم،انیمیشن Snow Globe“، شامل افتادن دانه های برف در داخل یک کره برفی است. هر دانه برف باید یک موقعیت شروع تصادفی، مدت زمان انیمیشن و اندازه داشته باشد.
با اضافه شدن کارل از تکان دادن ملایم و تکان دادن سخت دکمه ها، اکنون می توانید یک طوفان برفی تمام عیار را در کره برفی تقلید کنید! با کلیک کردن روی دکمههای لرزش، با متحرک کردن حرکت کره برفی و ایجاد جنون برفهای در حال چرخش، به یک هدف کششی میرسید!
کارل با افزودن دکمههایی برای شروع و از سرگیری بارش برف و تغییر دانههای برف، اهداف کششی بیشتری را تکمیل کرد و به کاربران این امکان را میدهد که از بین شکلکهای کریسمس، آدم برفیها یا ایموجیهای هدیه انتخاب کنند. آفرین، کارل!
کارل استورمز که با نام BIMsider نیز شناخته می شود، بیش از 25 سال تجربه در صنعت AECO دارد و در سفری برای یادگیری ترفندهای کدنویسی جدید از جمله جاوا اسکریپت، CSS، HTML، C# و پایتون است. به عنوان رئیس انجمن، حمایت و فناوری در Newforma، او از BIM دفاع می کند، کدنویسی را کاوش می کند و به هوش مصنوعی می پردازد.
کارل بینش خود را از طریق مقالاتی در BIMsider به اشتراک می گذارد و مخاطبان را به عنوان میزبان در پادکست هایی مانند Wrenches Gadgets & Hacks، BIMThoughs، The BILT Academy Podcast و The Simply Complex Podcast جذب می کند.
پیوندهای راه حل های کارل:
لینجای جیمنز (@imdesignsllc)
Lynjai Jimenez بار دیگر جامعه JavaScriptmas را تحت تأثیر قرار داده است، این بار با افزودن انیمیشن ویدیویی به چالش روز 9، “کدام دستور غذا را مادربزرگ باید درست کند؟”
آیا TikTok کریسمس را اجرا کرده است؟ این چالش شامل کمک به مادربزرگ برای بهروزرسانی دستور العملهای خود برای مطابقت با ترجیحات غذایی جدید نوههایش است که ناشی از پیروی آنها از تأثیرگذاران TikTok است! یافتن دستور غذا برای مادربزرگ نیازمند فیلتر کردن دستور العملها بر اساس ترجیحات نوههایش است، که شامل دستور العملهایی با حداقل یکی از موادی است که آنها دوست دارند و آنهایی را با موادی که اکنون دوست ندارند، حذف میکند.
Lynjai بخش جاوا اسکریپت چالش کدنویسی را حل کرد، اما چیزی که توجه همه را به خود جلب کرد اضافه کردن وی از ویدئوی دختر شیرینی زنجفیلی رقصنده بود که به عنوان پسزمینه پروژه او نمایش داده شد!
برای تنظیم یک ویدیو به عنوان پس زمینه، Lynjai ابتدا ویدیو را به پوشه تصاویر اضافه کرد. سپس از آن استفاده کرد عنصر با
autoplay
، muted
، و loop
ویژگی ها برای پخش بدون درز و اعمال کلاس video-background
برای یک ظاهر طراحی شده این
تگ مسیر و نوع فایل ویدیویی را مشخص می کند و از نمایش مناسب اطمینان می دهد.
در حالی که TikTok ممکن است دستور العمل های کریسمس مادربزرگ را خراب کرده باشد، پس زمینه ویدئویی دخترانه شیرینی زنجفیلی رقص TikTok به طرز لذت بخشی در جامعه جاوا اسکریپتماس طنین انداز شده است! کار فوق العاده ای، لینجای!
🔗 لینک به scrim
اورواشی (@ihsavru)
https://www.youtube.com/watch?v=NR8O_K4JJMM
اورواشی، همچنین به عنوان شناخته شده است دوز کد، یک ویدیوی یوتیوب ضبط کرد که نحوه حل چالش روز 10 ساخت یک ” را پوشش می دهد.پرچم کریسمس در CSS.”
قبل از مقابله با چالش JavaScriptmas، Urvashi یک آموزش هنر پیش نیاز سریع CSS را ارائه می دهد، جایی که او نحوه ایجاد اشکال اولیه را آموزش می دهد. او یک ابزار مفید به نام CSS Clip-path maker را معرفی میکند که به شما امکان میدهد با کپی کردن مسیر کلیپ شکل انتخابشده، از بین شکلهای از پیش ساخته، مانند مثلث، انتخاب کنید. شما همچنین می توانید با این ابزار به سادگی با اشاره، کلیک و کشیدن مسیرهای کلیپ ایجاد کنید!
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Urvashi همچنین نحوه ترکیب اشکال ساده برای ایجاد اشکال پیچیده تر را نشان می دهد که برای حل چالش روز 10 JavaScriptmas بسیار مهم است. او نحوه ایجاد یک شکل قلب را ابتدا با قلم و کاغذ گراف و سپس با کد، با ترکیب سه div در یک ظرف نشان می دهد.
پس از آموزش هنر CSS، Urvashi به طرز ماهرانه و هنرمندانه ای در حل چالش ساخت پرچم بابا نوئل قدم برمی دارد. او سپس با ایجاد یک نسخه متحرک در Codepen فراتر می رود! کار برجسته، اوروشی!
دوره های پیوندهای اجتماعی Urvashi و موارد دیگر در این آدرس موجود است beacons.ai/thecodedose.
پیوندهای راه حل های روز Urvashi's 10:
دانیل لارا (@daniellaera)
https://www.youtube.com/watch?v=JWYKtGetyzY
دانیل لارا به طرز ماهرانهای در حل چالش روز 11 قدم میگذارد.بازی تطبیق کارت، ” در یک ویدیوی پخش زنده YouTube!
چالش بازی تطبیق کارت یک بازی کلاسیک “جفت را بیابید” با تم جشن کریسمس است. در این بازی بازیکنان با کلیک بر روی کارت ها، کارت ها را آشکار می کنند. هنگامی که یک بازیکن یک کارت را نشان می دهد، تا زمانی که کارت دوم آشکار شود، قابل مشاهده است. اگر دو کارت آشکار شده مطابقت داشته باشند، تا پایان بازی قابل مشاهده خواهند بود. با این حال، اگر کارت ها مطابقت نداشته باشند، آنها به حالت پنهان خود برگردانده می شوند. برای افزودن یک عنصر غیرقابل پیش بینی، کارت ها در ابتدای هر بازی به هم می ریزند و هر بار تجربه ای تازه و جذاب را تضمین می کنند.
دانیل چالش کارت تطبیق بازی را با اجرای یک سری توابع برای مدیریت منطق بازی حل کرد. این shuffleArray
تابع برای تصادفی کردن ترتیب جفت ایموجی ها استفاده می شود و هر بار بازی تازه ای را تضمین می کند. پس از بارگیری سند، صفحه بازی با هشت کارت پر می شود که هر کدام نشان دهنده یک جفت ایموجی است. این کارت ها در ابتدا با علامت سوال نمایش داده می شوند و پس از کلیک کردن نمایان می شوند.
// Shuffle logic
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
این handleCardClick
تابع فرآیند افشای کارت را مدیریت می کند. از تعامل با کارتهای آشکار شده جلوگیری میکند و منطق جفتهای تطبیق را کنترل میکند. وقتی روی کارتی کلیک میشود، نشان داده میشود و اگر با کارتی که قبلاً فاش شده مطابقت داشته باشد، هر دو نمایان میشوند. در غیر این صورت، پس از یک تاخیر کوتاه دوباره پنهان می شوند. بازی جفتهای همسان را دنبال میکند و با یافتن همه جفتها، برنده شدن را اعلام میکند. این resetCards
تابع وضعیت بازی را پس از هر تلاش بازنشانی میکند و اجازه میدهد تا بازی ادامه یابد تا زمانی که همه مسابقات پیدا شوند.
// Handle card click logic
function handleCardClick(ev) {
if (lockBoard) return; // Prevent clicks during timeout logic
const clickedCard = ev.target;
if (clickedCard.classList.contains('revealed')) return; // Prevent clicking already revealed cards
clickedCard.classList.add('revealed');
clickedCard.textContent = clickedCard.getAttribute('data-emoji');
if (!firstCard) {
firstCard = clickedCard;
return;
}
secondCard = clickedCard;
lockBoard = true;
if (firstCard.getAttribute('data-emoji') === secondCard.getAttribute('data-emoji')) {
// Match found
matchedPairs++;
resetCards();
if (matchedPairs === 4) {
alert('You win!');
}
} else {
// Not a match
setTimeout(() => {
firstCard.classList.remove('revealed');
firstCard.textContent = '?';
secondCard.classList.remove('revealed');
secondCard.textContent = '?';
resetCards();
}, 1000);
}
}
مطمئن باش برای تماشای ویدیوی یوتیوب ببینید که چگونه کل کد این چالش از ابتدا توسعه یافته است. کار عالی دنیل!
دانیل یک مهندس نرم افزار باتجربه است که در دوازده سال گذشته در ژنو، سوئیس زندگی کرده است. زمان او در آنجا قدردانی او را از شکلات و فوندوی سوئیسی افزایش داده و مهارت های برنامه نویسی او را تقویت کرده است! دانیل زندگی خود در ژنو را به الگوریتمی بهینهسازی شده تشبیه میکند که چالشهای برنامههای اشکال زدایی را با لذت بیآرام از مناظر کوهستانی سوئیس متعادل میکند. تخصص حرفه ای منحصر به فرد و لذت شخصی او نشان دهنده یک سبک زندگی آرام و رضایت بخش است.
پیوندهای دانیل لارا:
🔗 لینک به scrim
🔗 لینک ویدیوی یوتیوب
تری سلولین (@Tricellulin)
چگونه گرینچ کریسمس را هک کرد!
تری سلولین با حل چالش روز دوازدهم توجه دیسکورد را به خود جلب کرد.
«فروشگاه کالای بابانوئل را هک کنید» با موضوع دکتر سوس گرینچ!
بابانوئل در تلاش است تا با راه اندازی یک فروشگاه کالا از کریسمس درآمد کسب کند. اما آیا فروشگاه کالا امن است؟ انجام تست نفوذ به عهده یک هکر اخلاقی است!
Tricellulin نه تنها چالش را حل کرد بلکه یک کد “HOT-FIX” را برای تعمیر وب سایت ایجاد کرد و از هرگونه تلاش گرینچ مانند در آینده برای خراب کردن کریسمس جلوگیری کرد!
چگونه او سایت را هک کرد و سپس آن را تعمیر کرد؟ او تنها در دو قدم سریع آن را شکست و در مرحله سوم آن را درست به عقب برگرداند!
- ابتدا، او دکمهای را رندر کرد که با نگه داشتن ماوس روی کنسول، «شما هک شدهاید 🏴☠️» را ثبت میکند تا ثابت کند آسیبپذیریهایی وجود دارد.
- دوم اینکه عنوان محصول h2 را به «این را نخرید» تغییر داد.
- ثالثاً او کد را اصلاح کرد، بنابراین غیرقابل هک است!
برای شروع هک کد زیر را در فیلد ورودی “ارسال نظر” قرار دهید.
توجه: خط 38 را در فایل index.js علامت گذاری نکنید (// return str // uncomment for hack test)
//PASTE BUTTON CODE ON REVIEW FIELD TO HIJACK PAGE. Works on mouseover.
const hackingCode = `
`
در زیر گزارش کنسول آمده است:
You have been hacked 🏴☠️ ... in case you haven't noticed
›
Product added to basket.
›
diverting payment to my account 💰
›
accessing financial details...
›
name: Santa Claus | First Bank of Lapland 25-12-00 | cc: 8463859365949 PIN: 2512 | password: J1ngleB3ll$
›
name: Sugarplum Mary | Sweet Treat Savings 15-12-25 | cc: 1234567890123 PIN: 1512 | password: SugarAndSp1ce
›
name: Wunorse Openslae | SleighMaster Credit Union 02-12-80 | cc: 2345678901234 PIN: 138 | password: F1xItF4st!
›
name: Bushy Evergreen | ToyMakers Bank 19-12-00 | cc: 3456789012345 PIN: 1912 | password: Mach1neW1zard
›
name: Alabaster Snowball | List Keepers Bank 24-12-77 | cc: 4567890123456 PIN: 2412 | password: NaughtyOrNice
›
name: Pepper Minstix | Secret Village Bank 31-12-01 | cc: 5678901234567 PIN: 3112 | password: SecretK33p3r
›
name: Elf Grumbles | Quality Control Bank 14-12-15 | cc: 6789012345678 PIN: 1412 | password: ToyT3st3r
›
name: Elf Bernard | Workshop Council Bank 01-01-99 | cc: 7890123456789 PIN: 65 | password: HeadHonch0
›
name: Mary Claus | Lapland Family Bank 14-02-02 | cc: 8473629104827 PIN: 1402 | password: MrsCl4us123
›
Seriously, I hacked your store 🏴☠️ 100K Bitcoins and we can settle this!! It's cheap, I know, but I'm feeling generous in the spirit of Christmas and all.
Tricelluin توضیح می دهد که پیچیده ترین کار برای او این بود که فیلمنامه خود را به صفحه منتقل کند، که فهمیدن آن دو ساعت طول کشید. از قضا، او فاش میکند که راهحل با یک “import('./mySolution.js') نسبتاً ساده به دست آمده است. بیانیه ای که به او کنترل کامل می داد تا صفحه را همانطور که می خواست تغییر دهد.
├┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
▻ HOT-FIX
├┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
*/
const microSanitize = (str) => {
// return str // uncomment for hack test
const escapedInput = str.replace(/&/g, '&')
.replace(/, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
return escapedInput
.replace(/eval/ig, '')
.replace(/javascript:/ig, '')
.replace(/script:/ig, '')
}
/*┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈*/
و بنابراین، با خنده و شادی، Tricellulin جاوا اسکریپتما را نجات داد و شادی را در دور و نزدیک پخش کرد! با وبسایتی که اکنون امن است و قلبی پر از شادی، او فروشگاه کالای بابانوئل را ایمن کرد، بسیار خوشحال کننده! 🎄✨
🔗 لینک به scrim
❄ موارد ارسالی JavaScriptmas من ❄
اگر میخواهید درباره سفر من با Scrimba بیشتر بدانید و چگونه یادگیری با آنها ممکن است به شما کمک کند، میتوانید مقاله من را بخوانید: چگونه Scrimba به من و بسیاری دیگر کمک میکند تا به توسعهدهندگان وب مطمئن و آماده تبدیل شویم
Scrimba یک بار دیگر من را تحت تاثیر قرار داد و الهام گرفت! می تونی کامل منو بخونی بررسی Scrimba در پست 2020/12/13 من.
“این یکی از بهترین نقدهای Scrimba است که تا به حال خوانده ام، @MikeJudeLarocca. متشکرم 🙏”
– پر هارالد بورگن، مدیر عامل Scrimba 14 دسامبر 2020
حتما به پادکست HTML All The Things گوش دهید!
📝 من همچنین برای پادکست HTML All The Things مقالاتی می نویسم که می توانید در وب سایت آنها بخوانید: https://www.htmlallthethings.com/.
حتما HTML همه چیزها را در شبکه های اجتماعی بررسی کنید!
با این لینک وابسته 20 درصد تخفیف بگیرید!
از این لینک وابسته برای تخفیف ویژه 20% استفاده کنید! (اگر تخفیف بالاتری در حال حاضر موجود باشد، به جای آن اعمال می شود.)
- مهم: این تخفیف فقط برای حساب های جدید است.
- برای بررسی Scrimba 2.0 جدید روی پیوند کلیک کنید!
- یک حساب کاربری ایجاد کنید، و می توانید به محتوای حرفه ای ارتقا دهید، جایی که باید تخفیف 20٪ را مشاهده کنید.
افشای: این مقاله حاوی لینک های وابسته است. من ممکن است بابت هر خریدی که از طریق این پیوندها انجام می شود بدون هزینه اضافی کمیسیون دریافت کنم. حمایت شما به من کمک می کند تا به تولید محتوای ارزشمند ادامه دهم. متشکرم
نتیجه گیری
رویداد سالانه جاوا اسکریپتماس Scrimba یک راه سرگرم کننده و جشن برای تعهد به کدنویسی روزانه است. چه یک کدنویس جدید و چه باتجربه باشید، می توانید کار خود را با جامعه به اشتراک بگذارید، دوستان جدیدی پیدا کنید و حتی جوایزی را برنده شوید!
اگر میخواهید بعد از رویداد رایگان به یادگیری با Scrimba ادامه دهید، دورههای رایگان بسیاری را بررسی کنید! اگر میخواهید متعهد شوید که به یک توسعهدهنده وب فرانتاند استخدامپذیر تبدیل شوید، مراقب نرخهای دوره تخفیف تعطیلات آنها باشید!
این رویداد برنامه نویسی هیجان انگیز را از دست ندهید! امروز در JavaScriptmas Scrimba شرکت کنید، راه حل های خود را به اشتراک بگذارید، با توسعه دهندگان همکار ارتباط برقرار کنید، و مهارت های خود را در حین تفریح بهبود بخشید! JavaScriptmas مبارک! 🎄
بیایید وصل شویم! من فعال هستم لینکدین و توییتر.
آیا اکنون علاقه مند به شرکت در جاوا اسکریپتماهای Scrimba امسال هستید؟ آیا قبلاً در JavaScriptmas Scrimba سال گذشته شرکت کرده اید؟ لطفا مقاله را به اشتراک بگذارید و نظر دهید!