معرفی متدولوژی کمتر شناخته شده Inverted Triangle CSS

https://hackernoon.com/managing-large-s-css-projects-using-the-inverted-triangle-architecture-3c03e4b1e6df

#link #css #cssmethodology #itcss

@ProGraphs

اگه به دنبال گرادینت‌های جذاب برای سایتتون هستین، سایت Grabient می‌تونه بهتون کمک کنه!

https://www.grabient.com/

#link #color #gradient

@ProGraphs

مقدار متغیر x چی باشه که نتیجه شرط true بشه ؟

#interviewquestion #js

@ProGraphs

آقای maximilian schwarzmüller که یکی از معروفترین مدرس های سایت یودمی هستش سال گذشته توی کانال یوتیوب خودش یه مقایسه از سه فریمورک محبوب Vue و Angular و React انجام داد که اون زمان خیلی مورد استقبال قرار گرفت. حالا امسال دوباره یه مقایسه جدید با توجه به تغییرات جدید این فریمورک ها انجام داده.
با این که مقایسه ی بین این فریم ورک ها کمی خسته کننده و تکراری شده ولی دیدن این ویدیو خالی از لطف نیست.

https://www.youtube.com/watch?v=SWZ_4YBFBhs

#link #js #vue #angular #react

@ProGraphs

Figma

- اپ طراحی رابط کاربری
- رقیب جدی Sketch و Adobe XD
- بدون نیاز به نصب
- کاملا آنلاین
- دارای قابلیت کار کردن همزمان چند طراح روی یک طرح

🔻حتما یه بار امتحانش کنین! 😎

https://www.figma.com

#link #tool #design #ui #figma

@ProGraphs

​​حتما دیدید که وقتی با گوگل کروم یک صفحه با زبان خارجی رو باز میکنیم مرورگر پیشنهاد ترجمه صفحه رو میده.
اما اگر بخواهیم یک قسمت صفحه یا یک کلمه خاص به هیچ وجه ترجمه نشود، کافیست آن قسمت را داخل یک تگ با کلاس "notranslate" قرار بدیم (این کلاس برای google translate تعریف شده است).
و یا اگر می خواهیم کل صفحه ترجمه نشود کافیست در قسمت head از متا تگی که تو عکس میبینید استفاده کنیم.

#quicktip #html

@ProGraphs

جواب: NaN
NaN تنها مقدار توی جاوااسکریپت هست که با خودش برابر نیست 😅

ویژگی های جدید Angular 6

https://scotch.io/bar-talk/game-changing-features-of-angular-v6

#link #js #angular

@ProGraphs

Canva: Online Logo Maker

- یه وب‌سایت خوب برای تنبل‌ها 😅
- یه ابزار طراحی راحت
- دارای بیش از یک میلیون عکس و طرح و فونت
- با بیش از ۴۰ دسته‌بندی مختلف و کلی طرح آماده

🔺 بِکِش و رها کُن 😋


https://www.canva.com

#link #design #logo

@ProGraphs

فرض کنید 12 عنصر HTML کنار هم داریم. چطور فقط با یک سلکتور CSS هر 7 عنصر اول رو رنگی کنیم ؟‌ (مشابه شکل)

#interviewquestion #css

@ProGraphs

Flaticon: مخزنی بزرگ از انواع آیکون‌ها

- آیکون‌‌های زیبا و خلاقانه
- جست و جوی سریع و راحت آیکون
- دانلود آیکون با فرمت SVG, PNG, PSD و سایر فرمت‌ها

https://www.flaticon.com

#link #icon

@ProGraphs

​​ES6 Destructuring
همانطور که میدونید در جاوااسکریپت به روش زیر میتوانیم یک آبجکت یا آرایه با چند عضو ایجاد کنیم:
var x = [1, 2, 3]
var y = { one: 1, two: 2 }
با استفاده از Destructuring که در نسخه ES6 جاوااسکریپت معرفی شد میتوانیم از سینتکس مشابه برای استخراج همزمان مقادیر از یک آبجکت یا آرایه استفاده کنیم (تصویر1)

اگر مقداری برای متغیر پیدا نشود. مقدار آن متغیر undefined خواهد بود (مشابه متغیرهای five و d در تصویر)
تعریف متغیر و destructuring میتواند در مراحل مختلف کد انجام شود (تصویر 2)

#quicktip #js #destructuring

@ProGraphs

جواب

کد این سوال را هم میتوانید اینجا ببینید:

https://codepen.io/prographs/pen/GYRegd?editors=1100

این سایت هر روز پروژه های مربوط به حوزه front-end development که دیروز بیشترین رشد رو در گیت هاب داشتند لیست میکنه.

https://bestofjs.org/

#link

@ProGraphs

تفاوت display های inline و inline-block در CSS چیست ؟

#interviewquestion #css

@ProGraphs

چند نمونه از کاربردهای ریاضیات در front-end development

https://www.chenhuijing.com/blog/math-and-front-end/

#link #math

@ProGraphs

​​نکات تکمیلی Destructuring
1) مقادیر پیشفرض: اگر مقدار مورد نظر در آرایه یا آبجکت پیدا نشود. مقدار پیشفرض به جای undefined استفاده میشود (قسمت ۱ کد در تصویر)

2) نام دلخواه متغیر: اگر در destructuring یک آبجکت بخواهیم اسم متغیر مشابه پراپرتی آبجکت نباشد از این روش استفاده میکنیم (قسمت ۲ کد در تصویر)

3) ترکیب 1 و 2 : اگر هم بخواهیم متغیر مقدار پیشفرض داشته باشد و هم نام متغیر ایجاد شده دلخواه باشد (قسمت ۳ کد در تصویر)

4) پرش از روی مقادیر آرایه: (قسمت ۴ کد در تصویر).

5) عملگر Rest: با استفاده از عملگر Rest میتوانیم بقیه مقادیر آرایه را در یک آرایه جدید استخراج کنیم. دقت کنید که استفاده از این قابلیت در آبجکت ها هنوز استانداردسازی نشده. (قسمت ۵ کد در تصویر)

6) اما چرا زمانی که object destructuring با تعریف متغیر همراه نیست از عملگر پرانتز استفاده میکنیم ؟
به این دلیل که '{}' در جاوااسکریپت نشان دهنده یک بلاک کد هست و برای تمایز بلاک کد و عبارت destructuring از پرانتز استفاده میکنیم

#quicktip #js #destructuring

@ProGraphs

جواب:
۲ تفاوت عمده بین این display ها وجود دارد:
1) برای عناصر inline-block می توان عرض و طول مشخص کرد ولی عناصر inline خیر
2) عناصر inline فقط در راستای افقی margin و padding می گیرند ولی عناصر inline-block در هر 4 جهت

این دو تفاوت را در لینک زیر بیشتر بررسی کنید:

https://codepen.io/prographs/pen/gBpYMM

بهترین منابع رایگان برای دریافت تصاویر با کیفیت:

https://unsplash.com/
https://negativespace.co/
https://stocksnap.io/
https://www.lifeofpix.com/
https://gratisography.com/
https://picography.co/
https://isorepublic.com/
https://pxhere.com/en/
https://www.rawpixel.com/
https://cdn.magdeleine.co/

🔺اگه شما هم منابع خوب دیگه‌ای می‌شناسین، می‌تونین از طریق @HiProGraphsBot بهمون معرفی کنین 😎

#link #stockphoto

@ProGraphs