ProGraphs
با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟ #interviewquestion #js @ProGraphs
جواب: Window Title
چند وقت پیش 4 قانون ساده برای تعیین مقدار this را بررسی کردیم. همچنین دیدیم که برای تعیین مقدار this در یک تابع، فقط به جایی که تابع صدا شده است توجه می‌کنیم و اصلا کاری نداریم که کجا و چطور تعریف شده است.
حالا با استفاده از همین 4 قانون، مقدار this را تعیین می‌کنیم:
1- آیا تابع با کلمه کلیدی new صدا شده است؟
خیر.
2- آیا تابع با استفاده از call یا apply صدا شده است؟
خیر.
3- آیا تابع به عنوان متد آبجکت و به صورت obj.func صدا شده است؟
خیر! شاید فکر کنید که تابع داخل آبجکت تعریف شده است. اما گفتیم که نحوه‌ی تعریف شدن تابع، تاثیری در مقدار this ندارد و فقط نحوه‌ی صدا شدن تابع را بررسی می‌کنیم.
در اینجا تابع به صورت IIFE تعریف شده است. یعنی بلافاصله به صورت معمولی صدا شده و واضح است که به صورت obj.printTitle صدا نشده است.
4- آیا جواب سوال‌های بالا خیر بود؟
بله! بنابراین تابع به صورت معمولی صدا شده و مقدار this، آبجکت window است. (اگر در حالت strict-mode بودیم، مقدار this برابر undefined بود). بنابراین مقدار window.title یا همان متغیر گلوبال title در کنسول چاپ می‌شود.
چند وقت پیش 4 قانون ساده برای تعیین مقدار this را بررسی کردیم. همچنین دیدیم که برای تعیین مقدار this در یک تابع، فقط به جایی که تابع صدا شده است توجه می‌کنیم و اصلا کاری نداریم که کجا و چطور تعریف شده است.
حالا با استفاده از همین 4 قانون، مقدار this را تعیین می‌کنیم:
1- آیا تابع با کلمه کلیدی new صدا شده است؟
خیر.
2- آیا تابع با استفاده از call یا apply صدا شده است؟
خیر.
3- آیا تابع به عنوان متد آبجکت و به صورت obj.func صدا شده است؟
خیر! شاید فکر کنید که تابع داخل آبجکت تعریف شده است. اما گفتیم که نحوه‌ی تعریف شدن تابع، تاثیری در مقدار this ندارد و فقط نحوه‌ی صدا شدن تابع را بررسی می‌کنیم.
در اینجا تابع به صورت IIFE تعریف شده است. یعنی بلافاصله به صورت معمولی صدا شده و واضح است که به صورت obj.printTitle صدا نشده است.
4- آیا جواب سوال‌های بالا خیر بود؟
بله! بنابراین تابع به صورت معمولی صدا شده و مقدار this، آبجکت window است. (اگر در حالت strict-mode بودیم، مقدار this برابر undefined بود). بنابراین مقدار window.title یا همان متغیر گلوبال title در کنسول چاپ می‌شود.
🔺 HEML, an open source markup language for building responsive email.
https://heml.io/
#link #tool #html #css
@ProGraphs
https://heml.io/
#link #tool #html #css
@ProGraphs
🔺 ابزار مدیریت پروژه YouTrack
https://www.jetbrains.com/youtrack/
#tool #agile #projectmanagement
@ProGraphs
https://www.jetbrains.com/youtrack/
#tool #agile #projectmanagement
@ProGraphs
JetBrains
YouTrack: Project management for all your teams
Everything in one place. Track tasks, manage projects, maintain a knowledge base, support your customers, collaborate, and deliver great products. Designed with every member of your team in mind. Free for teams of up to 10. In our cloud or on your server.
در مطالب قبلی متدهای flat و flatMap که در ES2019 اضافه شده‌اند را بررسی کردیم.
یکی از کاربردهای جالب متد flat، اضافه کردن چند آیتم در یک موقعیت خاص از آرایه به صورت شرطی است.
به کد داخل تصویر دقت کنید. اگر شرط اول true باشد، آرایه [1, 2, 3] و اگر نه، یک آرایه خالی در موقعیت مورد نظر اضافه می‌شود.
و در نهایت چون کل آرایه را flat می‌کنیم، یک آرایه تک بعدی دریافت می‌کنیم.
#quicktip #js
@ProGraphs
یکی از کاربردهای جالب متد flat، اضافه کردن چند آیتم در یک موقعیت خاص از آرایه به صورت شرطی است.
به کد داخل تصویر دقت کنید. اگر شرط اول true باشد، آرایه [1, 2, 3] و اگر نه، یک آرایه خالی در موقعیت مورد نظر اضافه می‌شود.
و در نهایت چون کل آرایه را flat می‌کنیم، یک آرایه تک بعدی دریافت می‌کنیم.
#quicktip #js
@ProGraphs
فرض کنید یک عنصر container داریم که دو عنصر فرزند داخل آن قرار دارند و این CSS را بر روی عناصر اعمال کرده‌ایم.
فاصله‌ی دو عنصر child از هم در راستای عمودی چند پیکسل است؟
#interviewquestion #css
@ProGraphs
فاصله‌ی دو عنصر child از هم در راستای عمودی چند پیکسل است؟
#interviewquestion #css
@ProGraphs
ProGraphs
فرض کنید یک عنصر container داریم که دو عنصر فرزند داخل آن قرار دارند و این CSS را بر روی عناصر اعمال کرده‌ایم. فاصله‌ی دو عنصر child از هم در راستای عمودی چند پیکسل است؟ #interviewquestion #css @ProGraphs
جواب: 80px
یکی از مفاهیم مهم در CSS مفهوم margin collapsing است.
این مفهوم معمولا به این صورت توضیح داده می‌شود که وقتی دو عنصر زیر هم قرار دارند و به هردوی آن‌ها در راستای عمودی margin می‌دهیم، فاصله‌ی دو عنصر در راستای عمودی، به اندازه‌ی مقدار بزرگ‌تر margin خواهد بود و نه جمع آن‌ها.
یعنی در این مثال که دو مقدار 50px و 30px را داریم، انتظار داریم که فاصله‌ی دو عنصر 50px باشد.
اما این تمام ماجرا نیست!
برای درک کامل این موضوع باید با مفهوم BFC آشنا باشیم (در یکی از مطالب، مفهوم BFC و نحوه‌ی ایجاد آن را بررسی کردیم).
نکته مهم این است که بلاک‌های BFC، از margin collapsing جلوگیری می‌کنند. و همچنین هر آیتم داخل flex-container یک BFC است.
در نتیجه وقتی از flexbox استفاده می‌کنیم، پدیده margin collapsing اتفاق نمی‌افتد!
حالا دوباره به کد سوال دقت کنید:
چون هر دو عنصر داخل flex-container هستند، margin collapsing اتفاق نمی‌افتد و فاصله‌ی دو عنصر به اندازه‌ی جمع marginهای دو عنصر، یعنی 80px خواهد بود (و نه 50px).
یکی از مفاهیم مهم در CSS مفهوم margin collapsing است.
این مفهوم معمولا به این صورت توضیح داده می‌شود که وقتی دو عنصر زیر هم قرار دارند و به هردوی آن‌ها در راستای عمودی margin می‌دهیم، فاصله‌ی دو عنصر در راستای عمودی، به اندازه‌ی مقدار بزرگ‌تر margin خواهد بود و نه جمع آن‌ها.
یعنی در این مثال که دو مقدار 50px و 30px را داریم، انتظار داریم که فاصله‌ی دو عنصر 50px باشد.
اما این تمام ماجرا نیست!
برای درک کامل این موضوع باید با مفهوم BFC آشنا باشیم (در یکی از مطالب، مفهوم BFC و نحوه‌ی ایجاد آن را بررسی کردیم).
نکته مهم این است که بلاک‌های BFC، از margin collapsing جلوگیری می‌کنند. و همچنین هر آیتم داخل flex-container یک BFC است.
در نتیجه وقتی از flexbox استفاده می‌کنیم، پدیده margin collapsing اتفاق نمی‌افتد!
حالا دوباره به کد سوال دقت کنید:
چون هر دو عنصر داخل flex-container هستند، margin collapsing اتفاق نمی‌افتد و فاصله‌ی دو عنصر به اندازه‌ی جمع marginهای دو عنصر، یعنی 80px خواهد بود (و نه 50px).
یکی دیگر از apiهای کاربردی گوگل کروم تابع $$ است. این تابع مشابه متد document.querySelectorAll عمل می‌کند.
با این تفاوت که خروجی تابع querySelectorAll از نوع Array-Like است و به متدهای آرایه‌ها دسترسی ندارد.
ولی خروجی تابع $$ یک آرایه معمولی است. بنابراین می‌توانیم مستقیما تابع‌هایی مثل map را روی آن اجرا کنیم.
(به مطلبی که راجع به Array-Likeها منتشر کردیم مراجعه کنید)
#quicktip #devtools #js
@ProGraphs
با این تفاوت که خروجی تابع querySelectorAll از نوع Array-Like است و به متدهای آرایه‌ها دسترسی ندارد.
ولی خروجی تابع $$ یک آرایه معمولی است. بنابراین می‌توانیم مستقیما تابع‌هایی مثل map را روی آن اجرا کنیم.
(به مطلبی که راجع به Array-Likeها منتشر کردیم مراجعه کنید)
#quicktip #devtools #js
@ProGraphs
🔺 Flowchart Maker & Online Diagram Software ✨
https://www.draw.io/
#tool #software #flowchart #diagram
@ProGraphs
https://www.draw.io/
#tool #software #flowchart #diagram
@ProGraphs
app.diagrams.net
Flowchart Maker & Online Diagram Software
draw.io is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays…
org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays…
ProGraphs
با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟ #interviewquestion #js @ProGraphs
جواب: "two" !
با بررسی این کد متوجه می‌شویم که دو مقداری که با هم مقایسه می‌شوند، نوع متفاوتی دارند (یکی boolean و یکی number). و چون از عملگر == استفاده کرده‌ایم، نوع داده‌ی یکی از این مقادیر به صورت خودکار تغییر می‌کند تا شرط، بین دو مقدار با نوع یکسان چک شود.
پس منطقاً انتظار داریم عدد 20، به مقدار true تبدیل شود (همه‌ی اعداد به جز 0، truthy هستند). و سپس مقدار "one" در کنسول چاپ شود.
اما این اتفاق نمی‌افتد 😄
چرا "two" در کنسول چاپ شد؟
اگر به spec زبان جاوااسکریپت مراجعه کنیم، متوجه می‌شویم که متاسفانه وقتی با استفاده از عملگر ==، هر مقداری را با true یا false مقایسه می‌کنیم، به جای اینکه مقدار مورد نظر به boolean تبدیل شود، مقدار boolean به عدد تبدیل می‌شود 😐 (حتما خودتان با مقادیر مختلف این عملیات را تست کنید).
یعنی در این کد مقدار true، تبدیل به عدد 1 می‌شود. سپس عدد 1 با عدد 20 مقایسه می‌شود و در نتیجه وارد قسمت else می‌شویم و "two" در کنسول چاپ می‌شود (دقیقا برعکس چیزی که انتظار داشتیم)!
مشخص است که این کد برای بیشتر دولوپرها کاملا گیج کننده است و باید از یک روش دیگر برای مقایسه با true یا false استفاده کنیم:
روش اول: اگر یک طرف شرط، true یا false بود، از عملگر === استفاده کنیم:
با بررسی این کد متوجه می‌شویم که دو مقداری که با هم مقایسه می‌شوند، نوع متفاوتی دارند (یکی boolean و یکی number). و چون از عملگر == استفاده کرده‌ایم، نوع داده‌ی یکی از این مقادیر به صورت خودکار تغییر می‌کند تا شرط، بین دو مقدار با نوع یکسان چک شود.
پس منطقاً انتظار داریم عدد 20، به مقدار true تبدیل شود (همه‌ی اعداد به جز 0، truthy هستند). و سپس مقدار "one" در کنسول چاپ شود.
اما این اتفاق نمی‌افتد 😄
چرا "two" در کنسول چاپ شد؟
اگر به spec زبان جاوااسکریپت مراجعه کنیم، متوجه می‌شویم که متاسفانه وقتی با استفاده از عملگر ==، هر مقداری را با true یا false مقایسه می‌کنیم، به جای اینکه مقدار مورد نظر به boolean تبدیل شود، مقدار boolean به عدد تبدیل می‌شود 😐 (حتما خودتان با مقادیر مختلف این عملیات را تست کنید).
یعنی در این کد مقدار true، تبدیل به عدد 1 می‌شود. سپس عدد 1 با عدد 20 مقایسه می‌شود و در نتیجه وارد قسمت else می‌شویم و "two" در کنسول چاپ می‌شود (دقیقا برعکس چیزی که انتظار داشتیم)!
مشخص است که این کد برای بیشتر دولوپرها کاملا گیج کننده است و باید از یک روش دیگر برای مقایسه با true یا false استفاده کنیم:
روش اول: اگر یک طرف شرط، true یا false بود، از عملگر === استفاده کنیم:
20 === true
روش دوم: خودمان طرف دیگر شرط را به boolean تبدیل کنیم:Boolean(20) == true
روش سوم: اگر با یکی از 6 نفری که گزینه درست رو انتخاب کردند همکار هستید، هر طور که دوست دارید شرط رو بنویسید 😁احتمالا شما هم با این مشکل مواجه شده‌اید که یک متن را روی یک تصویر قرار دهید و تشابه رنگ متن و تصویر باعث ناخوانا شدن متن در بعضی نقاط شود.
برای حل این مشکل با استفاده از mix-blend-mode می‌توانیم خیلی ساده و فقط با CSS، در همه‌ی نقاط بین متن و تصویر contrast ایجاد کنیم.
#quicktip #css #trick
@ProGraphs
برای حل این مشکل با استفاده از mix-blend-mode می‌توانیم خیلی ساده و فقط با CSS، در همه‌ی نقاط بین متن و تصویر contrast ایجاد کنیم.
#quicktip #css #trick
@ProGraphs
🔺 چیز‌هایی که دوست داریم در سال 2019 به CSS اضافه شود.
https://css-tricks.com/2019-css-wishlist/
#link #css
@ProGraphs
https://css-tricks.com/2019-css-wishlist/
#link #css
@ProGraphs
CSS-Tricks
2019 CSS Wishlist | CSS-Tricks
What do you wish CSS could do natively that it can't do now? First, let's review the last time we did this in 2013.
🔺 احتمالاً jQuery از Bootstarp5 حذف خواهد شد.
https://kutt.it/DDYQ8j
#link #bootstrap #jquery
@ProGraphs
https://kutt.it/DDYQ8j
#link #bootstrap #jquery
@ProGraphs
SD Times
Bootstrap 5 expected to completely replace jQuery - SD Times
The open-source framework for building responsible mobile solution on the web is moving away from jQuery in favor of JavaScript.
ProGraphs
با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟ #interviewquestion #js @ProGraphs
جواب: false
احتمالا همه‌ی ما با مفهوم Operator Precedence آشنا هستیم و می‌دانیم که یک عبارت که از چند عملگر تشکیل شده، بر اساس اولویت عملگرها parse می‌شود (و نه لزوما از چپ به راست).
اما چند عملگر با اولویت یکسان چطور؟
آیا چند عملگر با اولویت یکسان همیشه از چپ به راست parse می‌شوند؟
برای درک این موضوع باید با مفهوم Associativity آشنا باشیم. Associativity مشخص می‌کند که چند عملگر با اولیت یکسان، به چه ترتیبی اعمال می‌شوند.
این مقدار برای بعضی عملگرها مثل < و > "left-to-right" و برای بعضی عملگرها مثل :? و = "right-to-left" است.
دوباره به کد سوال دقت کنید:
اولویت عملگرها یکسان است. پس با توجه به Associativity عملگر <، عبارت را از چپ به راست می‌خوانیم:
احتمالا همه‌ی ما با مفهوم Operator Precedence آشنا هستیم و می‌دانیم که یک عبارت که از چند عملگر تشکیل شده، بر اساس اولویت عملگرها parse می‌شود (و نه لزوما از چپ به راست).
اما چند عملگر با اولویت یکسان چطور؟
آیا چند عملگر با اولویت یکسان همیشه از چپ به راست parse می‌شوند؟
برای درک این موضوع باید با مفهوم Associativity آشنا باشیم. Associativity مشخص می‌کند که چند عملگر با اولیت یکسان، به چه ترتیبی اعمال می‌شوند.
این مقدار برای بعضی عملگرها مثل < و > "left-to-right" و برای بعضی عملگرها مثل :? و = "right-to-left" است.
دوباره به کد سوال دقت کنید:
اولویت عملگرها یکسان است. پس با توجه به Associativity عملگر <، عبارت را از چپ به راست می‌خوانیم:
(3 > 2) > 1
true > 1
حالا فقط یک عبارت ساده با یک عملگر داریم:true > 1
1 > 1
false