🔺ببینین CSS نویسهای سراسر دنیا چه نظری درباره این زبان دارن:
https://2020.stateofcss.com
- این نتیجه نظرسنجی سال ۲۰۲۰ هست. برای شرکت توی نظرسنجی امسال اینجا رو ببینین.
#css
https://2020.stateofcss.com
- این نتیجه نظرسنجی سال ۲۰۲۰ هست. برای شرکت توی نظرسنجی امسال اینجا رو ببینین.
#css
Stateofcss
The State of CSS 2020: Demographics
The annual survey about the latest trends in CSS.
🔺چند بازی فوقالعاده که با #جاوااسکریپت و HTML نوشته شدن:
https://github.blog/2021-10-05-13-tiny-and-terrific-entries-from-the-js13kgames-competition
- جدا از خود بازیها، توی این لینک سورس کد هر بازی هم قرار گرفته که فرصت خوبیه برای آشنا شدن با کدهای مختلف و انواع تکنیکهای کدنویسیِ کمحجم و البته با عملکرد بالا
ـ js13kGames یک مسابقه ساخت بازی با جاوااسکریپت و HTML هست که از سال 2012 داره برگزار میشه و مهمترین قانونش اینه که هر بازی حداکثر باید ۱۳ کیلوبایت باشه
#javanoscript #links
https://github.blog/2021-10-05-13-tiny-and-terrific-entries-from-the-js13kgames-competition
- جدا از خود بازیها، توی این لینک سورس کد هر بازی هم قرار گرفته که فرصت خوبیه برای آشنا شدن با کدهای مختلف و انواع تکنیکهای کدنویسیِ کمحجم و البته با عملکرد بالا
ـ js13kGames یک مسابقه ساخت بازی با جاوااسکریپت و HTML هست که از سال 2012 داره برگزار میشه و مهمترین قانونش اینه که هر بازی حداکثر باید ۱۳ کیلوبایت باشه
#javanoscript #links
The GitHub Blog
13 tiny and terrific entries from the js13kGames competition
If you think about it, 13kB isn’t really a lot. The image above is 81kB. This page weighs over 3MB (waaay more if you include the videos). That’s why it’s so incredibly impressive that the
Ditty | دیتی
🔺الگوی طراحی Decorator به زبان #ساده - از این الگو زمانی استفاده میکنیم که میخوایم به آبجکتها ویژگی اضافه کنیم یا رفتار اونها رو تغییر بدیم - در واقع با این الگو میتونیم به آبجکتهای موجود، در زمان اجرای کد (Run-time) ویژگی اضافه کنیم. بدون اینکه مجبور…
🔺الگوی طراحی Facade به زبان #ساده
- اگه با کد، کلاس، ابزار، کتابخونه و یا هر چیزی سر و کار داریم که پیادهسازی طولانی و پیچیدهای داره، با این الگو میتونیم اون پیچیدگیها رو مخفی کنیم تا کدهای سادهتر و با قابلیت استفاده مجدد داشته باشیم
- از لینک زیر با Facade که یکی از راحتترین الگوهاست آشنا بشین:
https://ditty.ir/461
#oop 💯
- اگه با کد، کلاس، ابزار، کتابخونه و یا هر چیزی سر و کار داریم که پیادهسازی طولانی و پیچیدهای داره، با این الگو میتونیم اون پیچیدگیها رو مخفی کنیم تا کدهای سادهتر و با قابلیت استفاده مجدد داشته باشیم
- از لینک زیر با Facade که یکی از راحتترین الگوهاست آشنا بشین:
https://ditty.ir/461
#oop 💯
دیتی | Ditty.ir
الگوهای طراحی به زبان ساده - Facade
این الگو جزئیات کار با یک کد پیچیده رو مخفی میکنه تا بتونیم کدهایی با حجم کمتر و با قابلیت استفاده مجدد داشته باشیم
🔺این چند تا نکته باحال حتماً به کارتون میاد وقتی دارین توی گوگل سرچ میکنین:
14 Tips to Google like a Pro ⚡️🔎
#links
14 Tips to Google like a Pro ⚡️🔎
#links
DEV Community
14 tips to Google like a pro
Google is one of the most powerful tools, and believe it or not, Googling is one of the most...
🔺یک ویژگی قراره به جاوااسکریپت مرورگرها اضافه بشه به اسم Sanitizer API که همونطور که از اسمش مشخصه، برای پاکسازی و تمیز کردن رشتههای آلوده و مخرب هنگام کار با DOM استفاده میشه:
- اما وقتی که میخوایم از این رشته استفاده کنیم و اون رو بذاریم توی صفحه، با استفاده از Sanitizer کدهای مخرب اون رو پاک کردیم که خروجی یک رشته خالص و پاک هست 👌
نکته: این ویژگی توی مرحله Experimental هست و هنوز هیچ مرورگری اون رو ساپورت نکرده ¯/_(ツ)_\¯
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API
// Unsanitized string of HTML- توی این کد برای مثال کاربر رشتهای رو وارد کرده که شامل کد مخرب هست. تگ اسکریپت و alert که اگه بطور مستقیم استفاده بشه، یک alert ناخواسته نمایش داده میشه.
const input = "abc <noscript>alert(1)</noscript> def";
const el = document.getElementById("target");
👉 el.setHTML(input, new Sanitizer());
alert(target.innerHTML); // "abc def"
- اما وقتی که میخوایم از این رشته استفاده کنیم و اون رو بذاریم توی صفحه، با استفاده از Sanitizer کدهای مخرب اون رو پاک کردیم که خروجی یک رشته خالص و پاک هست 👌
نکته: این ویژگی توی مرحله Experimental هست و هنوز هیچ مرورگری اون رو ساپورت نکرده ¯/_(ツ)_\¯
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API
MDN Web Docs
HTML Sanitizer API - Web APIs | MDN
The HTML Sanitizer API allows developers to take strings of HTML and filter out unwanted elements, attributes, and other HTML entities when they are inserted into the DOM or a shadow DOM.
🔺دوستان لاراولی! برای بالا بردن سرعت برنامه حتماً از دستورات آرتیزان زیر استفاده کنین:
همچنین تا جایی که میتونین کوئریها رو Cache کنین. اینها راه حلهای رایگان ولی واقعاً موثری هستن.
چند روز پیش وقتی میخواستم دیتی رو انتقال بدم، هاستهای چندین شرکت رو تست کردم. با اینکه همگی ادعا داشتن که هارد NVMe و سرور لایتاسپید دارن، سرعتها خیلی تفاوت داشت. بالاخره یک هاستینگ خوب پیدا کردم که واقعاً سرعتش فوقالعادس! همه Response ها زیر ۲۰۰ میلیثانیه (۰.۲ ثانیه) میاد. در صورتی که روی هاستهای قبلی همون Response ها ۵ برابر دیرتر میومدن!
این پست رو هم ببینین:
https://ashallendesign.co.uk/blog/6-quick-and-easy-ways-to-speed-up-your-laravel-website
php artisan config:cacheواقعاً سرعت برنامه چندین برابر بالا میره!
php artisan route:cache
php artisan view:cache
همچنین تا جایی که میتونین کوئریها رو Cache کنین. اینها راه حلهای رایگان ولی واقعاً موثری هستن.
چند روز پیش وقتی میخواستم دیتی رو انتقال بدم، هاستهای چندین شرکت رو تست کردم. با اینکه همگی ادعا داشتن که هارد NVMe و سرور لایتاسپید دارن، سرعتها خیلی تفاوت داشت. بالاخره یک هاستینگ خوب پیدا کردم که واقعاً سرعتش فوقالعادس! همه Response ها زیر ۲۰۰ میلیثانیه (۰.۲ ثانیه) میاد. در صورتی که روی هاستهای قبلی همون Response ها ۵ برابر دیرتر میومدن!
این پست رو هم ببینین:
https://ashallendesign.co.uk/blog/6-quick-and-easy-ways-to-speed-up-your-laravel-website
ashallendesign.co.uk
6 Quick & Easy Ways to Speed Up Your Laravel Website
Learn 6 easy ways that you can improve your Laravel website's performance and speed. By using these tips, you'll be able to provide a better customer experience.
🔺یک لیست کامل از همه پکیجها، کتابخونهها، ابزارها و ... مرتبط با Vue.js:
https://github.com/vuejs/awesome-vue
#vue #links
https://github.com/vuejs/awesome-vue
#vue #links
GitHub
GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js
🎉 A curated list of awesome things related to Vue.js - vuejs/awesome-vue
👍1
🔺مایکروسافت برای VS Code نسخه وب (مرورگر) هم راهاندازی کرد:
https://vscode.dev
- البته بعضی از ویژگیهای نسخه دسکتاپ مثل پشتیبانی از بعضی پلاگینها رو نداره
#links
https://vscode.dev
- البته بعضی از ویژگیهای نسخه دسکتاپ مثل پشتیبانی از بعضی پلاگینها رو نداره
#links
vscode.dev
Visual Studio Code for the Web
Build with Visual Studio Code, anywhere, anytime, entirely in your browser.
👍1
🔺یک لیست از کلی ابزار و پلاگین و فریمورک و ... برای #جاوااسکریپت:
https://github.com/sorrycc/awesome-javanoscript
#javanoscript #links
https://github.com/sorrycc/awesome-javanoscript
#javanoscript #links
GitHub
GitHub - sorrycc/awesome-javanoscript: 🐢 A collection of awesome browser-side JavaScript libraries, resources and shiny things.
🐢 A collection of awesome browser-side JavaScript libraries, resources and shiny things. - sorrycc/awesome-javanoscript
Ditty | دیتی
🔺یک لیست از کلی ابزار و پلاگین و فریمورک و ... برای #جاوااسکریپت: https://github.com/sorrycc/awesome-javanoscript #javanoscript #links
🔺نوبتی هم باشه نوبت ریاکته!
- یک لیست از کلی ابزار و پلاگین و فریمورک و ... برای #ریاکت:
https://github.com/enaqx/awesome-react
#react #links
- یک لیست از کلی ابزار و پلاگین و فریمورک و ... برای #ریاکت:
https://github.com/enaqx/awesome-react
#react #links
GitHub
GitHub - enaqx/awesome-react: A collection of awesome things regarding React ecosystem
A collection of awesome things regarding React ecosystem - enaqx/awesome-react
Ditty | دیتی
🔺نوبتی هم باشه نوبت ریاکته! - یک لیست از کلی ابزار و پلاگین و فریمورک و ... برای #ریاکت: https://github.com/enaqx/awesome-react #react #links
🔺 دوستان اگه برای زبان یا فریمورک مورد علاقهتون چنین لیستی میخواین، توی گوگل بزنین [اسم زبان] Awesome چنین لیستهایی میاره. مثلاً:
Awesome PHP
Awesome Laravel
هر چند این اَبَر لیست رو ببینین که یک لیست از همه لیستهاست:
https://github.com/sindresorhus/awesome
#links
Awesome PHP
Awesome Laravel
هر چند این اَبَر لیست رو ببینین که یک لیست از همه لیستهاست:
https://github.com/sindresorhus/awesome
#links
GitHub
GitHub - sindresorhus/awesome: 😎 Awesome lists about all kinds of interesting topics
😎 Awesome lists about all kinds of interesting topics - sindresorhus/awesome
🔺بنیان جاوااسکریپت رو از دیتی یاد بگیرین:
ditty.ir/series/javanoscript-101
- بیشترین چیزها از جاوااسکریپت رو توی کمترین زمان یاد میگیریم
- با کلی مثال مهمترین موضوعهای جاوااسکریپت رو بررسی میکنیم
- ثابت میکنم که جاوااسکریپت #راحت و قابل فهمه :))
- ۴۱ قسمت متنی + ویدئویی
- نسخه ویدئویی در مجموع ۵ ساعت هست
- هر ویدئو مدت زمانی حدود ۱۰ دقیقه یا کمتر داره
- نسخه متنی کاملاً رایگانه. هدیه من به همراهان دیتی 💝
- با خرید ویدئوها، از ادامه فعالیتهای دیتی هم #حمایت میکنین 😊
- ۳۰٪ #تخفیف برای ویدئوها با کد JS-30 (برای ۱۰۰ نفر اول)
» سرفصلها رو از اینجا ببینین
#javanoscript
ditty.ir/series/javanoscript-101
- بیشترین چیزها از جاوااسکریپت رو توی کمترین زمان یاد میگیریم
- با کلی مثال مهمترین موضوعهای جاوااسکریپت رو بررسی میکنیم
- ثابت میکنم که جاوااسکریپت #راحت و قابل فهمه :))
- ۴۱ قسمت متنی + ویدئویی
- نسخه ویدئویی در مجموع ۵ ساعت هست
- هر ویدئو مدت زمانی حدود ۱۰ دقیقه یا کمتر داره
- نسخه متنی کاملاً رایگانه. هدیه من به همراهان دیتی 💝
- با خرید ویدئوها، از ادامه فعالیتهای دیتی هم #حمایت میکنین 😊
- ۳۰٪ #تخفیف برای ویدئوها با کد JS-30 (برای ۱۰۰ نفر اول)
» سرفصلها رو از اینجا ببینین
#javanoscript
دیتی | Ditty.ir
آموزش جامع جاوااسکریپت به زبان ساده
صفر تا صد جاوااسکریپت توی ۵ ساعت! 😃
توی این دوره آموزشی، جاوااسکریپت مدرن رو به طور کامل و به همراه کلی نکته هم به صورت متنی و هم به صورت ویدئویی یاد میگیریم 🎉 💪
توی این دوره آموزشی، جاوااسکریپت مدرن رو به طور کامل و به همراه کلی نکته هم به صورت متنی و هم به صورت ویدئویی یاد میگیریم 🎉 💪
🔺آیا برای یک مسئله جاوااسکریپتی چند راه حل دارین و میخواین ببینین کدوم سریعتره؟ این وبسایت رو ببینین:
https://hasty.dev
- با این وبسایت میتونین سرعت راه حلهای خودتون رو بررسی کنین 👌
#javanoscript #links
https://hasty.dev
- با این وبسایت میتونین سرعت راه حلهای خودتون رو بررسی کنین 👌
#javanoscript #links
hasty.dev
Unlock Performance Insights: Optimize JS with Benchmarking on HASTY
Explore HASTY, your go-to platform for reliable JS benchmark tests. Improve your JavaScript performance and coding efficiency today
🔺پرامیس (Promise) های جاوااسکریپت به زبان #ساده
- یکی از مهمترین ویژگیهایی که از ES6 به جاوااسکریپت اضافه شد، پرامیسها بودن که برای مدیریت کردن عملیات ناهمگام استفاده میشن
- توی این پست، هم به صورت متنی و هم به صورت ویدئویی میخوایم با این ویژگی آشنا بشیم:
ditty.ir/courses/es6/promises/XGQw5
- این پست قبلاً نوشته شده بود و به تازگی بازنویسی شده 😉
#javanoscript
- یکی از مهمترین ویژگیهایی که از ES6 به جاوااسکریپت اضافه شد، پرامیسها بودن که برای مدیریت کردن عملیات ناهمگام استفاده میشن
- توی این پست، هم به صورت متنی و هم به صورت ویدئویی میخوایم با این ویژگی آشنا بشیم:
ditty.ir/courses/es6/promises/XGQw5
- این پست قبلاً نوشته شده بود و به تازگی بازنویسی شده 😉
#javanoscript
دیتی | Ditty.ir
Promise ها | همه چیز از ES6 جاوااسکریپت
یکی از پراستفادهترین ویژگیهای جاوااسکریپت که از ES6 به این زبان اضافه شده، پرامیسها هستن که توی این قسمت میخوایم مفصل اونها رو بررسی کنیم
🔺پراکسیها توی #جاوااسکریپت چه کاربردی دارن؟ 🤔
- با پراکسیها میتونیم تقریباً همه اتفاقهایی که برای یک آبجکت رخ میده رو مدیریت و کنترل کنیم
- مثلاً میتونیم خوندن، ویرایش و یا حذف یک پراپرتی یا متد رو کنترل کنیم تا جوری که دلمون میخواد این اتفاقها رخ بدن!
- توی این پست، هم به صورت متنی و هم #ویدئویی مفصل با پراکسیهای جاوااسکریپت آشنا میشیم:
ditty.ir/456
- این پست قبلاً نوشته شده بود و به تازگی بازنویسی شده 😉
#javanoscript
- با پراکسیها میتونیم تقریباً همه اتفاقهایی که برای یک آبجکت رخ میده رو مدیریت و کنترل کنیم
- مثلاً میتونیم خوندن، ویرایش و یا حذف یک پراپرتی یا متد رو کنترل کنیم تا جوری که دلمون میخواد این اتفاقها رخ بدن!
- توی این پست، هم به صورت متنی و هم #ویدئویی مفصل با پراکسیهای جاوااسکریپت آشنا میشیم:
ditty.ir/456
- این پست قبلاً نوشته شده بود و به تازگی بازنویسی شده 😉
#javanoscript
دیتی | Ditty.ir
Proxy ها | همه چیز از ES6 جاوااسکریپت
با پراکسی میتونیم اتفاقهایی که برای یک آبجکت رخ میده مثل تغییر مقدار یا حذف یک پراپرتی رو کنترل کنیم
🔺جالبترین ویژگیهای ES6؟ 🤔
Anonymous Poll
58%
Arrow Functions
20%
Modules
33%
Promises
16%
Classes
15%
Proxy
28%
Destructuring
16%
Rest Parameters
29%
Spread Operator
9%
Set
6%
...Others (comment)
🔺کد تمیز، خوانا و البته مدرن با Destructuring #جاوااسکریپت
ــ Destructuring بهمون کمک میکنه تا از نوشتن کدهای اضافی و تکراری جلوگیری کنیم
- در واقع Destructuring برای آرایهها و آبجکتها به کار میره که با اون میتونیم به شکل خواناتر به اعضای یک آرایه یا آبجکت دسترسی داشته باشیم
- توی این پست (متن و ویدئویی) مفصل درباره این ویژگی آشنا بشیم:
ditty.ir/459
#javanoscript
ــ Destructuring بهمون کمک میکنه تا از نوشتن کدهای اضافی و تکراری جلوگیری کنیم
- در واقع Destructuring برای آرایهها و آبجکتها به کار میره که با اون میتونیم به شکل خواناتر به اعضای یک آرایه یا آبجکت دسترسی داشته باشیم
- توی این پست (متن و ویدئویی) مفصل درباره این ویژگی آشنا بشیم:
ditty.ir/459
#javanoscript
دیتی | Ditty.ir
Destructuring | همه چیز از ES6
با ویژگیای آشنا میشیم که با اون میتونیم کدهایی خلاصهتر، خواناتر و مدرنتر داشته باشیم
This media is not supported in your browser
VIEW IN TELEGRAM
🔺توی جدیدترین نسخه VS Code میتونیم لیستی از همه تمهای موجود رو داشته باشیم و بدون اینکه یک تم رو نصب کنیم، یک پیشنمایش از اون رو ببینیم 🤩
۱. توی VS Code دکمههای Ctrl + K + T رو بزنین
۲. گزینه Browse Additional Color Themes رو بزنین تا لیستی از تمها براتون نمایش داده باشه
۳. پیشنمایش هر تمی رو که انتخاب کنین همون لحظه اعمال میشه
#tricks
۱. توی VS Code دکمههای Ctrl + K + T رو بزنین
۲. گزینه Browse Additional Color Themes رو بزنین تا لیستی از تمها براتون نمایش داده باشه
۳. پیشنمایش هر تمی رو که انتخاب کنین همون لحظه اعمال میشه
#tricks