توییتر فرانت اند – Telegram

توییتر فرانت اند

@frontendtwitter

596 subscribers

3 photos

22 videos

292 links

🎉 با توجه به اینکه خیلی از دوستان در توییتر فعالیت ندارن، اینجا یه سری پست های مفید فرانت اند که تو توییتر پیدا میشه رو می فرستم که برای همه قابل استفاده باشه. اگه نیازی باشه در مورد بعضی موارد هم توضیح میدم

😊ارتباط: @ho3ein_shabani

Download Telegram

About

Blog

Apps

Platform

توییتر فرانت اند

596 subscribers

توییتر فرانت اند

⚡️ یه سایت فوق‌العاده برای هرکاری که میخواید با DOM انجام بدید! تو این سایت برای هرموضوعی از ساده(مثل اضافه کردن کلاس به یک المنت) تا پیشرفته(مثل زوم کردن یه عکس) راه‌حل به همراه کد وجود داره 😊

#JavaScript
https://twitter.com/equinusocio/status/1263464840825356289?s=20

👨🏻‍💻 آدرس سایت
🚀 لینک گیتهاب

@frontendtwitter

Mattia Astorino

I just found this site! Learn the basics to manipulate DOM and #html with vanilla #js. It's cool also as "reminder". 😍🔥 https://t.co/fYO2pNifXP

870 views13:47

توییتر فرانت اند

در کروم جدید ظاهر دیت پیکر نیتیو خود مرورگر بهبود پیدا کرده و خیلی تر و تمیز و خوشگل تر شده 😊

#a11y #HTML
https://twitter.com/equinusocio/status/1264195746745778176?s=20

📝 لیست کل تغییرات کروم ۸۳ برای فرم ها

@frontendtwitter

Mattia Astorino

So Chrome 83 shipped new pickers design with improved #a11y... https://t.co/i6zQPCE75A

369 views14:12

توییتر فرانت اند

⚡️ استایل های دیفالت جدید برای فرم‌ها در کروم ۸۳ و مقایسش با ورژن قبلی کروم رو میتونید در تصویر مشاهده کنید

#HTML
https://twitter.com/hakimel/status/1265254160087334912?s=20

@frontendtwitter

Hakim El Hattab

Chrome's new default form styles are out 👀

402 views13:23

توییتر فرانت اند

⚡️ اگه متنی دارای اهمیت زیادی هستش و میخواید اون رو بولد(bold) کنید، سعی کنید بجای استفاده از تگ b از تگ strong استفاده کنید. چرا؟ چون تگ b فقط "ظاهر" بولد میده نه مفهوم semantic بولد بودن رو که برای موتورهای جستجو و افراد با مشکلات دیداری کاربرد داره; ولی تگ strong علاوه بر بعد ظاهری قضیه، مفهوم semantic درستی رو هم ایجاد میکنه

#HTML #a11y
https://twitter.com/equinusocio/status/1265555244676759558?s=20

@frontendtwitter

Mattia Astorino

#CSS — Make it short 🔥

406 views12:22

توییتر فرانت اند

This media is not supported in your browser

VIEW IN TELEGRAM

🎉 با وب‌ اپ Blobs میتونید حباب های SVG بسازید و با کدی که بهتون میده به راحتی هرجا خواستید استفاده کنید

لینک ریپو گیتهاب

#HTML #SVG
https://twitter.com/ProductHunt/status/1267131309152964608?s=20

@frontendtwitter

646 viewsedited 16:52

توییتر فرانت اند

⚡️ قبلا اگه میخواستید توی یه صفحه ای به یه قسمت خاصی از صفحه لینک بدید که وقتی لینک باز شد، اسکرول بخوره به اون قسمت، باید تو اون صفحه یه تگ a قرار میداشت تا به id اون لینک بدید:

...
<a href="#section">Section</a>
...

ولی به وسیله text fragments میتونید بدون احتیاج به تگ a به هر قسمت از متن که میخواید لینک بدید. این تکنیک الان داره موقع سرچ کردن تو گوگل استفاده میشه 😁

#HTML
https://twitter.com/umaar/status/1270725394350522373?s=20

جدول پشتیبانی در caniuse
@frontendtwitter

Text fragments are being used in Google Search and it's pretty useful. If you append: #:~:text=Word To a destination URL, the browser will automatically find and highlight that piece of text on page load. Browser support: https://t.co/h7vpNzGcip https://t.co/KGTU7PDqEP

499 views09:49

توییتر فرانت اند

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️ با المنت نیتیو meter میتونید سطح یه چیزی رو نسبت به یه مقدار کلی نشون بدید مثلا اینکه چقدر فضای خالی از حافظه باقی مونده

پ.ن: نمیدونستم همچین المنتی هم وجود داره تو HTML 😁راستی، شکل این المنت تو مرورگر های مختلف خیلی باهم فرق میکنه. حتما قبل استفاده به این مورد توجه کنید. البته میشه تا حدی کاستومایزش کرد.

#HTML
https://twitter.com/sulco/status/1273951686160265216?s=20

لینک MDN
@frontendtwitter

439 viewsedited 14:32

توییتر فرانت اند

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️ با مشخص کردن اتریبیوت های width و height برای تگ img، مرورگر های مدرن یه فضایی برای عکستون حتی قبل از لود شدنش در نظر میگیرن که با لود شدن عکس، کل layout شیفت نشه یهو و ثابت بمونه

#HTML
https://twitter.com/addyosmani/status/1276779799198007301?s=20

@frontendtwitter

512 views10:16

توییتر فرانت اند

⚡️ زمانی که لینک میدید به یک سایت دیگه و مقدار اتریبیوت target رو _blank میدید تا تو یه تب جدید باز شه، حتما برای بحثای امنیتی، اتریبیوت rel لینک رو noopener یا noreferrer بدید. اینجوری اون صفحه جدید هیچ دسترسی ای به سایت شما پیدا نمیکنه

پ.ن: از rule های ESLint هستش...

#HTML
https://twitter.com/frontenddude/status/1277862161663119360?s=20

میتونید در مورد مشکلاتی که این روش حل میکنه بیشتر مطالعه کنید

@frontendtwitter

FrontEnd Dude 👨‍💻

🔥 When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues? 🛠️Adding rel="noopener" or rel="noreferrer" to your target="_blank" links avoids these issues. #100DaysOfCode #CodeNewbie…

602 views15:12

توییتر فرانت اند

⚡️ ۴ نکته مفید HTML:

- تصویر اول: یک meta تگ داریم که باهاش میتونید تعیین کنید صفحه هر n ثانیه یکبار رفرش بشه

- تصویر دوم: با meta تگ theme-color میتونید به آدرس‌بار بالای مرورگر های موبایل (مخصوصا کروم) رنگ دلخواهتون رو بدید

- تصویر سوم: اینپوت ها میتونن type با مقدار color داشته باشن، که اگه یوزر روشون بزنه، color picker نیتیو دستگاه باز میشه تا رنگ رو انتخاب کنه

- تصویر چهارم: خود HTML یک المنت نیتیو dialog داره که باهاش میتونید مودال ها یا پرامپت ها رو نمایش بدید!

#HTML
https://twitter.com/ravinwashere/status/1278277652525142016?s=20

@frontendtwitter

Handful #HTML Tips To Make Things Easier! #100DaysOfCode #CodeNewbie

505 views12:40

توییتر فرانت اند

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️ در صورتی که favicon سایتتون رو با فرمت SVG بدید، میتونید در شرایط مختلف مثلا زمان dark mode، رنگشو عوض کنید!

#CSS #HTML
https://twitter.com/CodyWebHouse/status/1280515162806550529?s=20

@frontendtwitter

588 views12:12

توییتر فرانت اند

🔥 در آوردن میکی‌ماوس تنها با یک المنت HTML

#CSS #HTML
https://twitter.com/jonkantner/status/1281246698753478657?s=20

لینک کدپن

@frontendtwitter

Mickey Mouse drawn using a single element https://t.co/9WU0ArLcqX @CodePen #CSS #Sass

591 views19:19

توییتر فرانت اند

⚡️ میدونستید تو اینپوت با تایپ number میتونید حرف "e" رو تایپ کنید؟ مخفف exponent و نشون دهنده توان عدد هستش!

پ.ن: ماشین حسابا هم اعداد بزرگ رو این مدلی نشون میدن

#HTML
https://twitter.com/taimoorsattar7/status/1281481844891017216?s=20

@frontendtwitter

<input type="number"> consider e letter as number. Maybe e letter has some meaning in the past. #100DaysOfCode #CodeNewbie #javascript #HTML

465 viewsedited 11:51

توییتر فرانت اند

⚡️ با تگ wbr میتونید جایی که "احتمالا" قراره یه کلمه بره خط بعدی رو مشخص کنید. این باعث میشه که اگه فضای کافی برای نشون دادن کل کلمه در یک خط وجود نداشته باشه، نصف کلمه رو خط اول و نصفش تو خط دوم نیفته و مستقیم بره خط دوم و کلمه کامل در خط دوم نمایش داده شه

#HTML
https://twitter.com/frontenddude/status/1282652206957842432?s=20

@frontendtwitter

FrontEnd Dude 👨‍💻

🔥 Have you heard about the <wbr> tag? Use the <wbr> tag to define word break opportunities. If the text can be displayed on one line, it won’t break. If there’s not enough space, it will. #100DaysOfCode #CodeNewbie #HTML #Frontend #webdev #coding #programming…

493 views15:20

توییتر فرانت اند

🚀 عکسایی که با جاواسکریپت(مثلا به شکل کامپوننت های React) لود میشن، کمی دیرتر تشخیص داده میشن واسه همین زمان لودشون میره بالا. میتونید با لینک preload، عکس‌ها رو preload کنید تا عملا سریعتر لود بشن

#HTML #performance
https://twitter.com/addyosmani/status/1283295232633659392?s=20

@frontendtwitter

Tip: Preload critical images the browser discovers late to improve performance https://t.co/QsIa1CBHCZ ~ Useful if images are loaded via JavaScript, React components etc.

610 views14:27

توییتر فرانت اند

⚡️ چجوری مثل یه برنامه نویس حرفه ای با Chrome DevTools کار کنیم.

#Chrome
https://twitter.com/javascriptking/status/1287687856857612288

🔥لینک مقاله

@frontendtwitter

JavaScript Kingdom

Use Chrome DevTools Like a Senior Frontend Developer https://t.co/PrQnfMUisS #chrome #developers #javascript #html #CSS

715 views08:16

توییتر فرانت اند

🤯بازی دوز این بار فقط با Html Css بدون هیچ خط کد Javascript.

حالا برید ببینید چجوری نحوه تشخیص برنده رو بدون Javascript نوشته 🙂.

#CSS #HTML
https://twitter.com/jh3yy/status/1290728468880199680

🔥لینک کدپن

@frontendtwitter

Jhey 🐻🛠️✨

Fancy a game of Tic-Tac-Toe? 😁🕹️ How about this CSS powered version? 😎 HTML, SVG, && some CSS for this 👍 No JavaScript required! ✋😮 💻codepen.io/jh3y/pen/BVaGKP via @CodePen

1.11K views12:53

توییتر فرانت اند

⚡️ روش های زیادی رو دیدیم برای اینکه ترتیب یک لیست را ریورس کنیم، ولی یکی از روش های جالب دیگه، استفاده از این اتریبیوت جالبه!

#html #tip
https://twitter.com/denicmarko/status/1334757918584020992

@frontendtwitter

Marko ⚡ Denic

HTML tip: You can use the `reverse` attribute to set the list’s (`<ol>`) items in reverse order. Items will be numbered from high to low.

1.19K viewsAsleMammad, 14:32

توییتر فرانت اند

⚡️ میدانستید که می توانید از خود کروم هم یک سکرین شات از المنت مورد نظر بگیرید و هیچ نیازی به اکستنشن خاصی نیست؟

#chrome #tip
https://twitter.com/AngeloFaella16/status/1335877093759086596

@frontendtwitter

Angelo Faella 💡

📌 Chrome #DevTools tip You can take a screenshot of a particular element in the DOM: - Select the node - Press Ctrl+Shift+P (or Cmd+Shift+P) - Type "screenshot" - Click on "Capture node screenshot" #javascript #html

1.39K viewsAsleMammad, 21:08

توییتر فرانت اند

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️ تایم‌لپس فوق‌العاده‌ و باحال کشیدن تصویر ایلان ماسک با HTML+CSS 😮

🔥 لینک کدپن

#html #css #codepen
https://twitter.com/asyrafhussin4/status/1351740905821069312

@frontendtwitter

3.33K viewsCinna, 17:08