رقصنده با کد
782 subscribers
1.69K photos
850 videos
207 files
666 links
Here are some interesting things I've come across during my learning process. That's it. Admin ID:
@alithecodeguy
Download Telegram
html-standard.pdf
13.7 MB
مستندات رسمی HTML5
Living Standard — Last Updated 26 December 2022
#html #document
This media is not supported in your browser
VIEW IN TELEGRAM
ساخت المان جمع‌شونده بدون CSS وفقط با HTML
#html #tip @alithecodeguy
html-cheat-sheet.pdf
271.2 KB
Html Cheat Sheet
#html #cheatsheet
نکته HTMLای:

- pageX/Y gives the coordinates relative to the <html> element in CSS pixels.

- clientX/Y gives the coordinates relative to the viewport in CSS pixels.

- screenX/Y gives the coordinates relative to the screen in device pixels

#html #tip @alithecodeguy
هر صفحه یا وب‌اپلیکیشنی که توی یک مرورگر اجرا بشه ، در نهایت باید تابع محدودیت‌های مرورگر باشه و در پایین‌ترین سطح فقط از ابزارهایی که مرورگر در اختیارش قرار میده می‌تونه استفاده کنه. هر کتابخانه یا ابزاری هم که تا الان استفاده کردید ، موقع اجرا به یکی از ویژگی‌ها و امکانات مرورگر تبدیل میشه تا اجرا بشه که بهشون میگن BrowserAPIs.
در همین خصوص ، برای گرفتن یا ارسال دیتا از بک‌اند یا یک سرور ثانویه هم ، صفحه شما فقط می‌تونه از یکی از این چهارتا ویژگی استفاده کنه :
1. HTTP
2. WEB SOCKETS
3. API POLLING
4. SERVER SENT EVENTS (SSE)
ابزارهایی مثل SignalR یا LightStreamer هم اومدن همینارو تحت شرایطی با هم ترکیب کردن و در اختیار برنامه‌نویس قرار دادن.
موضوع حتی وقتی جالب‌تر میشه که این سوال براتون پیش بیاد که پس وقتی یک آدرس رو میزنیم تا یک سایت رو ببینیم چی پیش میاد؟ وقتی شما سایتی رو باز می‌کنید در حقیقت دارید یک fetch ساده میزنید یا متد Get. به همین سادگی. کارای نمایشش رو مرورگر گردن میگیره.
برای مطالعه بیشتر :
https://www.linkedin.com/pulse/ways-send-data-from-backend-frontend-priyank-rai/
آیا تموم شد؟ اگر نخواید سخت بگیرید آره. همین بودن.
ولی اگر کمی موشکافی کنید میبینید ۳ تا دیگه هم هست :
5. Web RTC
6. Push Notifications
7. Web Transport
که تقریبا مفاهیم جدیدی هستن و ممکنه همه مرورگرها پشتیبانی نکنن.
برای مطالعه بیشتر این لینک رو پیشنهاد میکنم:
https://dev.to/snickdx/connection-types-in-web-apps-15ie
------
اگر مورد دیگه‌ای هست که بلدید ولی اینجا نیومده ، ممنون میشم با رفرنس کامنت کنید که یاد بگیریم ❤️
#tip #browser #html #dom
این پست احتمالا خفن‌ترین مطلب ساده‌ایه که تا حالا پست کردم.
گاهی اوقات میخواید یک سایت دیگه رو داخل آی‌فریم توی سایت خودتون نمایش بدید و مشکل وقتی پیش بیاد که از پیش ارتفاع صفحه مقصد رو نمی‌دونید و مجبورید ارتفاع فیکس به آی‌فریم بدید که مشخصا درست نیست. اگر این دو تا صفحه روی یک دامین نباشن که دیگه بدتر.
توی این کدسندباکس راهشو گذاشتم (بدون استفاده از لایبرری یا فریمورک خاصی):
https://codesandbox.io/p/devbox/dynamically-height-iframe-xddjlq

پاورقی۱: توی کدسندباکس تست نکنید. روی دستگاه خودتون تستش کنید. محیط سندباکس با آی‌فریم مشکل داره.
پاورقی۲: توی تستاتون حتما مطمن بشید که سایت مقصد این اجازه رو داده که آی‌فریمش کنید در غیر اینطورت یا خطا دیده میشه یا سفید.

مطالب بیشتر در کانال رقصنده با کد :
https://t.iss.one/alithecodeguy
و همچنین کانال یوتیوب:
https://www.youtube.com/alithecodeguy

#html #iframe
امروز سخترین روز کاریم بود چون مجبور بودم یه اینپوت رنج خاصی رو پیاده سازی کنم. ولی چیزهای جالبی هم یاد گرفتم. مثلا اینکه مشابه کد در تصویر می‌تونید زیر اینپوت رنجاتون تیک بندازید.
عملا ته دیگ داکیومنت‌های ام‌دی‌انه 😄

#css #html
ساخت‌های فایل‌های پرزنت مثل پاورپوینت با استفاده از HTML و JS
جذابه!
#js #html
به جای دنبال کردن خبر افرادی که "بودنشون چه تاثیری داشته که نبودنشون داشته باشه" ، بیاید برید فایل‌های HTML خودتون رو بندازید توی این سایت تا اینقدر غلط ازتون دربیاره که کلا شک کنید اصلا html بلد هستید یا نه
https://validator.w3.org/

#html
نکته پیشرفته از اچ‌تی‌ام‌ال

توی تصویر ، چرا لینک سوم رفتار بلاک لولی از خودش نشون میده ولی لینکای دیگه اینطوری نیستن؟ مگه میشه رفتار پیش فرض یک المان تغییر کنه؟

بر اساس داکیومنت رسمی اچ‌تی‌ام‌ال که مشاهده می‌کنید ، بله در مورد تگ لینک این اتفاق میفته.
یعنی تگ لینک رفتار اینلانی داره مگر اینکه حاوی المانی باشه که اون رفتار بلاکی داشته باشه.

#html #web
عجب سایتی هستش این.
https://csszengarden.com/

برای یک کد ثابت HTML ، کد‌های مختلف css نوشتن.
از حالت کلاسیک تبدیل میشه به کارتونی ، یا دیجیتال یا انیمیشن وکلی استایل‌های دیگه.
پیشنهاد می‌کنم بهش سر بزنید. خیلی جالبه.

#html #css
Have you ever wondered how these little previews are generated when you share a link on social media?

It's all about the Open Graph Protocol.

This is the simplest way to use it: just add the following code to the "head" section of your site and share the link. You will be surprised!


<meta property="og:title" content="<your_preferred_title>" />
<meta property="og:type" content="<your_preferred_type>" />
<meta property="og:url" content="<your_link_url>" />
<meta property="og:image" content="<your_preferred_image_address>" />


read more : https://ogp.me/

#html
Did you know this little trick in HTML?

DOM Manipulation is awesome!

#html
The HTTP Permissions-Policy header provides a mechanism to allow and deny the use of browser features in a document or within any <iframe> elements in the document.

#html
Video playback rate control in #HTML using #JS
دو تا متد جالب روی DOM

#html #dom
html questions with answers.pdf
127.2 KB
۷۸ سوال ناب HTML با جواب

#html #interview