شمارنده‌های CSS به ما امکان می‌دهند که را بر اساس عناصر تکراری عدد تولید کنیم و بر اساس آن استایل‌بندی کنیم. شمارنده های CSS را به عنوان متغیرهایی در نظر بگیرید که مقادیر آنها قابل افزایش است.

ویژگی counter-reset:
[1] اولین مقدار نام شمارنده است
[2] به دنبال آن یک پارامتر اختیاری که مقدار شروع شمارنده را تعیین می کند (پیش فرض: 0). توجه داشته باشید که شمارنده همیشه شروع به شمارش به سمت بالا می کند، بنابراین اولین مقدار تولید شده در مورد ما 1 خواهد بود.

counter-reset: counterName 0;

ویژگی counter:
[1] اولین مقدار نام شمارنده است
[2] سبک شمارنده را "اعشاری" بودن تعریف کنید. مقادیر ممکن در اینجا مشابه مقادیر مورد استفاده برای ویژگی list-style-type است.

ویژگی counter-increment:
[1] اولین مقدار نام شمارنده است
[2] سپس از یک پارامتر اختیاری برای نشان دادن میزان افزایش شمارنده استفاده کنید.

counter-increment: counterName 1;
content: counter(counterName, decimal);

🔗https://webdesign.tutsplus.com/quick-tip-using-css-counters-to-style-incremental-elements--cms-23497t

#️⃣#tip #css
🆔@IR_javascript

اعمال مشترک شب قدر و اعمال مخصوص شب بيست ويكم ماه مبارک رمضان
التماس دعا

#️⃣#event
🆔@IR_javascript

Responsive Image Carousel

🔗https://codepen.io/noirsociety/pen/ZEwLGXB

#️⃣#code
🆔@IR_javascript

‏‌‎ Clamp کمک می‌کنه خیلی ساده‌تر عناصر توی صفحه رو Responsive کنیم. برای مثال اگه می‌خوایم اندازه یک عکس بر اساس سایز صفحه انعطاف‌پذیر اما کنترل‌شده باشه چنین دستوری می‌نویسیم:

img {
  width: clamp(200px, 100%, 400px);
}

با توجه به این کد، عرض تصویر ۱۰۰٪ هست، اما این عرض هیچوقت از ۴۰۰ پیکسل بیشتر و از ۲۰۰ پیکسل کمتر نمیشه. در واقع عرض تصویر بین ۲۰۰ و ۴۰۰ پیکسل شناور هست.این تابع می‌تونه جایگزینی برای توابعی مثل min و max و همچنین Media Query هایی باشه که برای Responsive کردن عناصر توی صفحه استفاده می‌شد.

🔗https://ditty.ir/posts/css-clamp/5jwZn
🔗https://developer.mozilla.org/en-US/docs/Web/CSS/clamp


#️⃣#tip #css
🆔@IR_javascript

‏Font-size clamp generator — با استفاده از این سایت می توانید فونت ریسپانسیو با استفاده از clamp () ایجاد کنید.

🔗https://clamp.font-size.app/

#️⃣#tool
🆔@IR_javascript

Element.closest()
متد Element.closest() نزدیکترین عنصر والد (با شروع از خود عنصر) را که با انتخابگر CSS مشخص شده مطابقت دارد را پیدا کرده و برمی گرداند. اگر هیچ عنصری با انتخابگر CSS مشخص شده مطابقت نداشته باشد، null برگردانده می شود.

<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

const el = document.getElementById("div-03");

// the closest ancestor with the id of "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">

// the closest ancestor which is a div in a div
console.log(el.closest("div div")); // <div id="div-03">

// the closest ancestor which is a div and has a parent article
console.log(el.closest("article > div")); // <div id="div-01">

// the closest ancestor which is not a div
console.log(el.closest(":not(div)")); // <article>

🔗https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

#️⃣#tip
🆔@IR_javascript

3D Tilting Card Effect

🔗https://codepen.io/tahazsh/pen/wvQwqYv

#️⃣#code
🆔@IR_javascript

Speedometer 3.0
یه ابزار خوب برای مقایسه پرفورمنس مرورگر ها
در واقع کاری که انجام میده اینه که میاد روی مرورگر شما پروژه های مختلف رو بالا میاره و بررسی می کنه که به عنوان مثال چقدر رندر آن طول میکشه بر این اساس به مرورگر شما یک امتیاز می دهد
علاوه بر این در بخش detail امکان مقایسه vue , react , angular , ... را برای یک پروژه todo می دهد
بجز موارد بالا چند texteditor , chart را با هم مقایسه می کند

🔗https://www.browserbench.org/Speedometer3.0/

#️⃣#tool
🆔@IR_javascript

«رُبما یُساق إليك قدرٌ منَ اللّٰه خیرٌ من کل أحلامك»
شايد معجزه ی از سوى خدا به سمت تو فرستاده شود كه از همه ی آرزوهايت بهتر باشد...


برگرفته از: @gizmiztel

#️⃣#event
🆔@IR_javascript

‏voici.js یک کتابخانه Node.js است که در TypeScript برای نمایش زیبا مجموعه داده ها به شکل جدولی در ترمینال نوشته شده است. برخلاف console.table() دارای ویژگی های زیادی است.

🔗https://voici.larswaechter.dev/

#️⃣#npm_module
🆔@IR_javascript

کد نویسی در شب

‏"Night Owl"- یک theme برای ویرایشگر کد VSCode است که برای برنامه‌نویسی راحت و کارآمد در تاریکی طراحی شده است. که خستگی چشم را کاهش می دهد و کد را خواناتر می کند.

#️⃣#tool
🆔@IR_javascript

‏PQL

اعتراف سخت است، اما SQL کامل نیست و کویری ها، بعضا یا بهینه نیست و یا به طرز وحشتناکی پیچیده و دشوار می شوند.

این باعث می‌شود برخی به ایجاد گزینه‌های جایگزین روی بیاورند.

به عنوان مثال، مایکروسافت زبان Kusto Query (KQL) را توسعه داده است - این زبان ساده و شهودی است، اما فقط با محصولات موجود در Microsoft Azure قابل استفاده است. سایر شرکت ها پیشرفت های مشابهی دارند، به عنوان مثال، Splunk یا Sumologic. آنها دارای همان مزایا و همان محدودیت اصلی هستند - آنها زبان های اختصاصی هستند که خارج از اکوسیستم "بومی" آنها قابل استفاده نیستند.

‏ pql یک زبان پرس و جو منبع باز است که سازندگان از KQL الهام گرفتند و سعی کردند محصول خود را با همان مزیت ها ارایه کرده و آن را به همان اندازه ساده و منطقی کنند.

🔗https://pql.dev/

#️⃣#tool
🆔@IR_javascript