رقصنده با کد – Telegram
رقصنده با کد
780 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
🔹 دستور important در css چه زمانهایی استفاده میشود؟
با استفاده از دستور important در CSS میتوانیم تعریف کنیم که اولویت اجرای یک دستور در CSS به بالاترین اولویت تبدیل شود و اولویت اجرای بقیه دستورات را لغو کند.
معایب استفاده از این دستور :
پایین اومدن قدرت اشکال یابی
پایین اومدن خوانایی کد
بستن دست خودتون در آینده برای ایجاد تغییرات
مزیت استفاده از این دستور :
با وجود داشتن یک فایل CSS خارجی میتوانید با این دستور اولویت کدهای خود را بالاتر ببرید

@alithecodeguy
🔹تگهای معنایی(semantic tags) چه هستند و چرا ایجاد شدند؟
قبل از ارائه ی HTML5 برای مشخص کردن قسمت های مختلف صفحه از دستوراتی مانند <div id="navbar"> یا <div class="header"> استفاده میشد.
اما با ایجاد تگهای معنایی برای مرورگر مشخص شد که هر محتوایی که در این تگ ها وجود دارد از چه نوعی هستند و چه نقشی در صفحه وب دارند. درواقع این تگها اطلاعات اضافی به محتوای سایت اضافه میکنند که به موتورهای جستجوی گوگل امکان تشخیص نوع محتوا و نیز درجه اهمیت و اولویت محتواهای صفحات وب را می دهند و نقش بسزایی در بحث سئوی صفحات وب ایفا میکنند و همچنین خوانایی کد را بالا میبرد.
@alithecodeguy
ابزار Svelte رو دریابید. رقیب قدرتمندیه برای React و تا حدودی که من کار کردم نظرم رو جلب کرده. تمرکزش روی performance صفحاته و کدرنی باهاشم هرچند که مقداری متفاوته ولی چیزی نیست که اذیت کنه و در واقع از ریکت آسون تره.
چرا گفتم ابزار؟ چون بیشتر از اینکه فریم ورک باشه ، کامپایلر محسوب میشه.
در آینده مطالب بیشتری در موردش میذارم
@alithecodeguy #svelte #js
🔹تفاوت کتابخانه(library) و فریم ورک(framework)
تفاوت فریم ورک و کتابخانه، در نحوه‌ی کنترل کدهاست.
کتابخانه، مجموعه‌ای از کلاس‌ها و متد‌هاست که آنها را فراخوانی می‌کنیم و برای ساده تر شدن کد نویسی از اونا استفاده میکنیم. درواقع کنترل جریان کد دست خودمان است، این ما هستیم که تعیین میکنیم کی و کجا از چه لایبرری استفاده کنیم.
فریم ورک، فریم‌ورک مجموعه‌ی کاملی از لایبرری‌هاست.درواقع کنترل جریان برنامه دست آن فریم‌ورک هست و چارچوب و اسکلت کد ما توسط اون فریم‌ورک تعیین میشود. فریم‌ورک بستری را فراهم میکند تا بتونیم کد‌ها را نوشته و این فریم‌ورک هست که تصمیم میگیرد کی و کجا از کد‌های ما استفاده نماید. به طور کلی فریم ورک را فراخوانی نمی‌کند، بلکه فریم ورک، کدهای اضافه شده توسط کاربر را فراخوانی می‌کند.
@alithecodeguy
ممکن است بارها با عبارت falsy expressions روبرو شده باشید اما این عبارت چیست؟ در جاوا اسکریپت، عبارات Truthy به مقدار درست بولی و عبارات Falsy به مقدار غلط بولی ارزیابی می شوند.
در مجموع 6 عبارت falsy در جاوااسکریپت وجود دارد که عبارت اند از:
false
+0/-0
“ ”/’ ’/
null
undefind
NaN
@alithecodeguy
چگونه در جاوا اسکریپت فانکشن‌هایی با نام و حتی بدنه متغیر داشته باشیم؟
با استفاده از فانکشنی مشابه این عکس.
چرا ممکنه نیاز داشته باشیم از همچین چیزی استفاده کنیم؟ چون گاهی اوقات اسم و حتی بدنه فانکشنی که قراره اجرا بشه رو از قبل نمیدونیم و توی ران تایم ایجاد میشه یا از روی api خونده میشه.

این لینک هم میتونه کمکتون کنه :
https://stackoverflow.com/questions/5905492/dynamic-function-name-in-javanoscript/40918734#40918734

#js #javanoscript #dynamic #alithecodeguy @alithecodeguy
🔹لینکدین قابلیتی به‌نام Open to Work دارد که افراد جویای کار را بهتر نمایش می‌دهد.
افراد جویای کار با استفاده از این قابلیت لینکدین می‌توانند در تصویر پروفایل خود، وضعیت جویای کار بودن را با ظاهری مناسب نمایش دهند. این قابلیت به‌صورت یک نشان یا برچسب درکنار تصویر پروفایل دیده می‌شود که عبارت جویای کار یا Open to Work را نمایش می‌دهد.
1. وارد صفحه اول پروفایلتان شوید.
2. در بالای صفحه زیر عکس پروفایل از کادر خط چین گزینهShow recruiters you’re open to work را انتخاب کنید و گزینه Get started را بزنید.
3. تنظیمات و گزینه‌های شغل موردنظرتان مثل موقعیت مکانی و مدل استخدام( مثل تمام وقت یا پاره وقت، دورکاری و ..) قابل انتخاب و تنظیم است.
4. شما می توانید از طریق گزینه Choose who sees you’re open انتخاب کنید چه افرادی می توانند حالت جویای کار بودن را در پروفایل شما ببینند؟
بعد از انجام این مراحل گزینه add to profile را انتخاب کرده تا درخواست شما به صورت یک پست در لینکدین منتشر میشود و این قابلیت به تصویر پروفایل شما اضافه میگردد.
@alithecodeguy
🔹وظیفه تگ meta در html5
این تگ اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجو ارائه می دهد. این اطلاعات برای کاربران قابل مشاهده نیست، اما توسط مرورگرها و موتورهای جستجو قابل تجزیه و تحلیل می باشند، این اطلاعات میتواند به یک وبسایت برای نمایش بهتر در مرورگرها و موتورهای جستجو کمک کند. تعدادی از مهمترین metadata :
<meta charset=”UTF-8″>
با استفاده از این کد به مرورگر دستور میدهیم که تمام کاراکترها را پشتیبانی نماید
<meta name=”denoscription”>
برای مشخص کردن یه توضیح یا شرح کوتاه درباره صفحه وب استفاده میشود.( برای نمایش در موتورهای جستجوگر و بحث سئو )
<meta name=”viewport”>
ناحیه قابل مشاهده کاربر از یک صفحه وب در گوشی های موبایل ، تبلت ها و.. می باشد.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
@alithecodeguy
در صفحات عادی وب ، lang رو باید به تگ html اضافه کنیم. برای NextJs که تگ html در دسترسمون قرار نداره چیکار کنیم؟
میتونیم چندتا خط بالا رو به next.config.js اضافه کنیم. این روش روی ورژن ۱۰ به بالا کار میکنه. برای ورژن های پایین تر از _document باید استفاده کرد.
حالا lang به چه دردی میخوره؟ برای SEO و Accessability بسیار مهمه.
#js #nextjs #react #alithecodeguy @alithecodeguy
پترن regex برای استفاده در پسووردها :

"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]?).{8,}$"

- at least 8 character
- at least one lower case
- at least one upper case
- at least one number
- symbols are optional

#regex #password #alithecodeguy @alithecodeguy
حتما در کنار نام جاوااسکریپت نام babel هم حداقل یک بار به گوش شما خورده است.حالا ببینیم bable چیست؟
تعریف رسمی که برای babel ارائه شده به این صورت است که یک کامپایلر جاوااسکریپت است. درواقع یک toolchain است که برای تبدیل کدهای ECMAScript 2015 به بعد، به یک نسخه سازگار با نسخه جاوا اسکریپت موجود در مرورگرها یا محیط های فعلی و قدیمی استفاده می شود. به زبان ساده تر، اگر شما از آخرین قابلیت هایی که به ECMAScript اضافه شده در داخل کدها استفاده کنید و ممکن است مرورگرهای قدیمی تر هنوز آن قابلیت ها را پشتیبانی نکنند، در این حالت اگر از babel استفاده کنیم تغییراتی در کدهای ما ایجاد میکند که قابلیت اجرا شدن در محیط هدف ما رو داشته باشد.
https://babeljs.io/
@alithecodeguy
🔹برای کاهش ابعاد یک آرایه چند بعدی میتوانید از متد array.flat(depth) استفاده نمایید. متد flat آرایه های چند بعدی را تا سطح تعیین شده به آرایه ای با بعد کمتر تبدیل می کند. پارامتر depth برای تعیین میزان کاهش سطح استفاده میشود که آپشنال است و اگر از این پارامتر استفاده نشود آرایه تا یک سطح کاهش میابد.
@alithecodeguy
🔹هنگام استایل دهی در صفحات وب به این نکته حتما توجه داشته باشید که برخی استایل دهی های پیشفرض مرورگرها را با دستورات زیر غیرفعال کنید. زیرا هنگام بزرگ شدن پروژه مورد نظر رعایت این نکات ابتدایی شما را در مدیریت هرچه بهتر در استایل دهی کمک میکند.

@alithecodeguy
🔹تفاوت بین null و undefined :
در جاوااسکریپت undefined یک type از متغیر است، یعنی یک متغیر تعریف شده است اما به آن هیچ مقداری اختصاص داده نشده است. null یک ابجکت است که یک مقدار خالی یا ناموجدد را دارد و باید به یک متغیر assign شود. توجه داشته باشید که هردو جزو falsy value هستند.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
🔹تفاوت pass by reference و pass by value
در pass by value مقدار یک پارامتر در یک متغیر کپی میشود، در واقع یک خانه جدید در حافظه میگیرد و زمانیکه بخواهیم به متغیر مورد نظر دسترسی پیدا کنیم، به متغیر در حافظه جدید دسترسی پیدا میکنیم و کاری با حافظه قبلی نداریم.
در pass by reference متغیر با مقدارش به یک آدرس جدید از حافظه ارسال میشود. یعنی زمانیکه بخواهیم به متغیر مورد نظر دسترسی پیدا کنیم به آدرس و مقدار متغیر اصلی دسترسی پیدا میکند نه یک کپی از آن.
@alithecodeguy
🔹Npm vs Yarn
دو تا از پکیج منیجرهای معروف برای جاوااسکریپت npm و yarn هستند. در حالت کلی شباهتهای زیادی بین این دو وجود دارد اما در عین حال تفاوتهای ظریفی هم بین آنها است که باعث میشود با توجه به نیاز خود یکی را بر دیگری ترجیح بدهیم.
Npm:
در سال 2010 منتشر شد. به صورت پیشفرض زمانیکه node.js را روی سیستم خود نصب میکنیم نصب میشود. فرایند نصب پکیجها به صورت ترتیبی است. پکیجها به صورت مستقیم قابل نصب هستند. امکان اجرای کد در هنگام نصب پکیج را به کاربران میدهد.
Yarn:
در سال 2016 توسط فیسبوک منتشر شد. هدف از ایجاد yarn رسیدگی بعضی از کاستی‌های عملکردی و امنیتی کار با npm بود. Yarn به صورت یک پکیج از npm موجود است و لازم است با دستور npm install yarn نصب شود. قدرت نصب همزمان چند پکیج را باهم دارد. اجازه نصب پکیجها تنها از فایل yarn.lock یا package.json امکان پذیر است.
https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/
@alithecodeguy
🔹تفاوت آرگومان و پارامتر:
پارامتر متغیر با نام است که به یک تابع ارسال میشود به عبارت دیگر نامهایی هستند که در تعریف تابع ذکرمیشوند.
آرگومانها مقادیر واقعی هستند که به تابع ارسال میشوند.
https://developer.mozilla.org/en-US/docs/Glossary/Parameter

@alithecodeguy
🔹github pages
یکی از جذابترین استفاده‌ای که میتوانیم از گیت هاب داشته باشیم استفاده از github pages است که از این طریق میتوانید فایلهای HTML ، CSSو javanoscript را به صورت یک وبسایت نمایش دهید. تمامی فایلهای شما توسط گیت هاب مستقیما از یک مخزن در گیت هاب گرفته میشود و فایلها از طریق یک فرایند ساخت، اجرا شده و به صورت یک وبسایت منتشر میشود.
برای آشناهیی با انواع github pages و توضیحات بیشتر در این مورد به آدرس زیر مراجعه کنید.
https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages
@alithecodeguy
اگر خاطرتون باشه قصد داشتیم سایت صرافی رمزارز بایننس رو پیاده سازی کنیم. ولی خب به یه سری صفحاتش تا اکانت نداشته باشی نمیشه دسترسی داشت و اکانت هم برای ایرانیها باز نمیکنه.
به خاطر همین رفتیم سراغ صرافی کوینکس.
مخزن جدید گیت هاب برای پروژه کوینکس که کدهاش آپدیت شده و اماده استفادس.
https://github.com/alithecodeguy/CoinexFace
ترجمه هامون هم داریم پیش میریم به عنوان یه پروژه جانبی. تمرکز اومد روی این پروژه.
سعی میکنیم هر هفته حداقل یک صفحه بخوره.
از دوستان هر کسی تمایل داشت میتونه همکاری کنه. تمرکز الان روی صفحه لندینگه. توی کدها آدرس و توضیخات نوشتم. پیشنهاد میکنم فایل ریدمی رو هم بخونید.
آموزش پول ریکوست برای مشارکت:
https://opensource.com/article/19/7/create-pull-request-github
#github #opensource #coinex
Media is too big
VIEW IN TELEGRAM
برای فعال کردن github pages برای هر یک از پروژه های خود لازم است برخی از تنظیمات را بر روی ریپوزیتوری مورد نظر خود انجام دهید. در این ویدئو به تمام جزییات اشاره شده است.
This media is not supported in your browser
VIEW IN TELEGRAM
🔹فایل gitignore. چیست؟
یکی از فایلهای بسیار پر کاربرد در گیت هست. در ظاهر کمی ترسناک به نظر میرسه ولی در عین حال بسیار ساده و کاربردی هست. درواقع یک فایل ساده است که لیست تمام فایل‌هایی که نمی‌خواهیم به حالت stage دربیایند، در آن قرار می‌دهیم. به عبارت دیگر مشخص کننده مواردی است که گیت باید آنها را نادیده بگیرد. برای اینکه بدونید چطور از این فایل استفاده کنید پیشنهاد میکنم ویدئوی بالا رو مشاهده کنید.
@alithecodeguy #git #github