ProGraphs
تفاوت pseudo-class و pseudo-element در CSS چیست ؟ #interviewquestion #css @ProGraphs
جواب:
شبه کلاس یا pseudo-class ها با علامت دو نقطه (:) مشخص می‌شوند و عناصر را تحت شرط خاصی انتخاب می‌کنند. مثلا عنصری که موس روی آن قرار دارد. یا عنصری که اولین فرزند والدش هست.
چند نمونه از pseudo-class ها:
چند نمونه از pseudo-element ها:
شبه کلاس یا pseudo-class ها با علامت دو نقطه (:) مشخص می‌شوند و عناصر را تحت شرط خاصی انتخاب می‌کنند. مثلا عنصری که موس روی آن قرار دارد. یا عنصری که اولین فرزند والدش هست.
چند نمونه از pseudo-class ها:
:placeholder-shown, :first-child, :hover, :invalid
شبه عناصر یا pseudo-element ها با دو تا دو نقطه (::) مشخص می‌شوند و عناصر مجازی ایجاد می‌کنند که در DOM وجود ندارند. برای مثال فرض کنید می‌خواهیم اولین خط یک متن را انتخاب کنیم، شبه عنصری به نام first-line وجود دارد که به ما اجازه می‌دهد به اولین خط یک متن مانند یک عنصر HTML استایل بدهیم. در حالی که در حقیقت اولین خط متن درون یک عنصر نیست و این عنصر به صورت مجازی ایجاد شده است.چند نمونه از pseudo-element ها:
::placeholder, ::first-letter, ::before, ::afterیک گالری از زیباترین وب‌سایت‌هایی که برای شما انتخاب شده‌اند 🎊
https://bestwebsite.gallery/sites
#link #webdesign #gallery
@ProGraphs
https://bestwebsite.gallery/sites
#link #webdesign #gallery
@ProGraphs
Best Website Gallery
Best Website Gallery – Web Design Inspiration… | Best Website Gallery
The most beautiful websites handpicked for you — since 2008!
ویژگی‌های جدید Create React App 2
https://scotch.io/tutorials/whats-new-in-create-react-app-2
#link #js #react
@ProGraphs
https://scotch.io/tutorials/whats-new-in-create-react-app-2
#link #js #react
@ProGraphs
Scotch
What's New in Create React App 2
Yes!! It keeps getting better, I am as excited as you are. Create-react app is the most widely used react boiler plate there is today, it helps you focus on writing code, and then handles the build and testing for you. It literarily does all the work for…
با استفاده از آبجکت console در مرورگر خیلی ساده می‌توانیم زمان اجرای یک عملیات جاوااسکریپتی را ببینیم. کافی است قبل از عملیات متد time و بعد از عملیات متد timeEnd را فراخوانی کنیم تا زمان بین این دو فراخوانی در کنسول چاپ شود.
#quicktip #js
@ProGraphs
#quicktip #js
@ProGraphs
برای یه دوره رایگان، آموزش‌های تر و تمیز و خوبی داره 👌🏻
https://www.theodinproject.com
#link #learn
@ProGraphs
https://www.theodinproject.com
#link #learn
@ProGraphs
Theodinproject
Your Career in Web Development Starts Here | The Odin Project
The Odin Project empowers aspiring web developers to learn together for free
آیا در مورد Resetting و Normalizing در CSS شنیده‌اید؟ تفاوت آنها چیست؟
#interviewquestion #css
@ProGraphs
#interviewquestion #css
@ProGraphs
🔸 نتایج نظرسنجی از Developer ها در سال 2018 توسط سایت stackoverflow
https://insights.stackoverflow.com/survey/2018
#link #survey #overview
@ProGraphs
https://insights.stackoverflow.com/survey/2018
#link #survey #overview
@ProGraphs
ProGraphs
آیا در مورد Resetting و Normalizing در CSS شنیده‌اید؟ تفاوت آنها چیست؟ #interviewquestion #css @ProGraphs
جواب:
مرورگر‌ها برای ایجاد ظاهر اولیه عناصر، استایل‌های پیشفرضی را اعمال می‌کنند. اما این استایل‌های پیشفرض در همه‌ی مرورگر‌ها یکسان نیستند. در نتیجه بعضی عناصر html در همه‌ی مرورگر‌ها ظاهر یکسانی نخواهند داشت.
برای حل این مشکل CSS Reset تقریبا تمام استایل‌های پیشفرض را بی‌اثر می‌کند. به این ترتیب عناصر ظاهر خاصی نخواهند داشت و باید از پایه ظاهر آنها را بسازیم.
اما CSS Normalize برای تمام عناصر یک ظاهر اولیه می‌سازد با این هدف که در تمام مرورگر‌ها یکسان نمایش داده شوند. یعنی یا استایل‌های پیشفرض را حفظ می‌کند یا آنها را به صورتی تغییر می‌دهد که در تمام مرورگر‌ها یکسان باشند.
مرورگر‌ها برای ایجاد ظاهر اولیه عناصر، استایل‌های پیشفرضی را اعمال می‌کنند. اما این استایل‌های پیشفرض در همه‌ی مرورگر‌ها یکسان نیستند. در نتیجه بعضی عناصر html در همه‌ی مرورگر‌ها ظاهر یکسانی نخواهند داشت.
برای حل این مشکل CSS Reset تقریبا تمام استایل‌های پیشفرض را بی‌اثر می‌کند. به این ترتیب عناصر ظاهر خاصی نخواهند داشت و باید از پایه ظاهر آنها را بسازیم.
اما CSS Normalize برای تمام عناصر یک ظاهر اولیه می‌سازد با این هدف که در تمام مرورگر‌ها یکسان نمایش داده شوند. یعنی یا استایل‌های پیشفرض را حفظ می‌کند یا آنها را به صورتی تغییر می‌دهد که در تمام مرورگر‌ها یکسان باشند.
اینجا می‌تونید ببینید هر فونتی رو چه سایت‌هایی استفاده می‌کنند. 👇🏻
https://www.fontreach.com/
#link #font
@ProGraphs
https://www.fontreach.com/
#link #font
@ProGraphs
Font Reach
FontReach - Best Free Fonts
You can download Sans-serif, Serif, Script, Handwritten, Calligraphy, Brush, Movies, Memes & many other font families. You can use these fonts for your Personal use to see their appearance before buying them for commercial use to apply in your projects.
فرض کنید می‌خواهیم همه‌ی لینک‌هایی که به یک فایل pdf اشاره می‌کنند را با یک رنگ خاص مشخص کنیم. این کار با کمک attribute selector ها به سادگی قابل انجام است ولی اگر پسوند فایل اشتباها با حروف بزرگ نوشته شده باشد (مثلا PdF) رنگ لینک تغییر نخواهد کرد.
برای حل این مشکل باید سلکتور را incase sensitive کنیم تا به کوچک و بزرگی حروف حساس نباشد. روش انجام این کار را در تصویر می‌بینید.
#quicktip #css
@ProGraphs
برای حل این مشکل باید سلکتور را incase sensitive کنیم تا به کوچک و بزرگی حروف حساس نباشد. روش انجام این کار را در تصویر می‌بینید.
#quicktip #css
@ProGraphs
ویژگی‌هایی که قراره به زودی در Vue ببینیم 👌
https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf
#link #js #vue
@ProGraphs
https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf
#link #js #vue
@ProGraphs
Medium
Plans for the Next Iteration of Vue.js
Last week at Vue.js London I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth…
ProGraphs
آیا این دو تابع یک مقدار را return می‌کنند؟ #interviewquestion #js @ProGraphs
جواب: خیر!
همانطور که می‌دانید استفاده از semicolon در جاوااسکریپت اختیاری است. در نتیجه خود زبان سعی می‌کند انتهای هر statement را حدس بزند.
بنابراین در تابع دوم که عبارت return و آبجکت در دو خط جدا قرار دارند اشتباها فکر می‌کند که دو عبارت جدا هستند، یک return خالی و یک آبجکت. به این ترتیب تابع دوم undefined را return می‌کند. تابع اول هم مشخصا به درستی آبجکت مورد نظر را return می‌کند.
نتیجه اخلاقی: مقداری که می‌خواهید از تابع return کنید را رو‌بروی return بنویسید و نه در خط بعد.
همانطور که می‌دانید استفاده از semicolon در جاوااسکریپت اختیاری است. در نتیجه خود زبان سعی می‌کند انتهای هر statement را حدس بزند.
بنابراین در تابع دوم که عبارت return و آبجکت در دو خط جدا قرار دارند اشتباها فکر می‌کند که دو عبارت جدا هستند، یک return خالی و یک آبجکت. به این ترتیب تابع دوم undefined را return می‌کند. تابع اول هم مشخصا به درستی آبجکت مورد نظر را return می‌کند.
نتیجه اخلاقی: مقداری که می‌خواهید از تابع return کنید را رو‌بروی return بنویسید و نه در خط بعد.
🔺نقشه راه برای UI/UX Designer شدن 👇🏻
https://github.com/togiberlin/ui-ux-designer-roadmap
#link #ui #ux #designer #roadmap
@ProGraphs
https://github.com/togiberlin/ui-ux-designer-roadmap
#link #ui #ux #designer #roadmap
@ProGraphs
GitHub
GitHub - togiberlin/ui-ux-designer-roadmap: Roadmap on becoming a UI/UX designer in 2017
Roadmap on becoming a UI/UX designer in 2017. Contribute to togiberlin/ui-ux-designer-roadmap development by creating an account on GitHub.
با استفاده از متد Object.preventExtensions می‌توانید از اضافه شدن پراپرتی جدید به یک آبجکت جلوگیری کنید. دقت کنید که پراپرتی‌های موجود تغییری نخواهند کرد و فقط امکان افزودن پراپرتی از بین می‌رود.
#quicktip #js
@ProGraphs
#quicktip #js
@ProGraphs
🔺نقشه راه برای توسعه‌دهنده حرفه‌ای Angular شدن در سال 2018 👇🏻
https://github.com/sulco/angular-developer-roadmap
#link #angular #roadmap
@ProGraphs
https://github.com/sulco/angular-developer-roadmap
#link #angular #roadmap
@ProGraphs
این قطعه کد برای چک کردن وجود یا عدم وجود یک پراپرتی در یک آبجکت نوشته شده است.
آیا مشکلی در این کد می‌بینید؟ روش بهتری برای انجام این کار می‌شناسید؟
(سوال خیلی خوبیه، بیشتر بهش دقت کنید!)
#interviewquestion #js
@ProGraphs
آیا مشکلی در این کد می‌بینید؟ روش بهتری برای انجام این کار می‌شناسید؟
(سوال خیلی خوبیه، بیشتر بهش دقت کنید!)
#interviewquestion #js
@ProGraphs
