ساخت رزومه با conva
این سایت کلی تمپلیت آماده و کاربردی در اختیار کاربر قرار میده که بتونید یه رزومه مناسب و تمیز برای ورود به بازار کار تهیه کنید. حتی نسخه free هم در اختیار کاربر قرار داده. میتونید هم با ساخت اکانت و هم بدون ساخت اکانت از امکاناتش استفاده کنید.
حتی نه تنها برای ساخت رزومه بلکه برای ساخت لوگو، پوستر، انواع پست‌ها و ... میتونید ازش استفاده کنید.
https://www.canva.com/
@alithecodeguy

🔷چرا اول فایل HTML باید از دستور <DOCTYPE html!> استفاده کنیم؟
دستور <DOCTYPE!> تگ نیست بلکه، یک دستورالعمل برای مشخص کردن نسخه یک فایل HTML است. همانطور که میدانید W3C نسخه های مختلفی از زبان HTML را ارائه داده است که هر کدام در مقایسه با هم تفاوت هایی را دارند، به این دلیل ممکن است مرورگر در تشخیص صحیح نسخه HTML استفاده شده دچار اشتباه شود و تنظیمات پیش فرض خود را اعمال کند. برای حل این مساله W3C استانداردی تعریف کرد که تمام سازندگان مرورگرها و دولوپرها از آن استاداردها طبعیت کنند بنابراین دولوپرها با اضافه کردن <DOCTYPE html!> در خط اول کدهای HTML خود به مرورگر میفهماندند که از کدام نسخه استفاده کند. البته لازم به ذکر است که این دستور برای صفحات وب که با HTML5 پیاده سازی شده اند قابل درک است و برای صفحات وب HTML4.0.1 باید از دستور دیگری استفاده کرد. برای آشنایی با جزییات بیشتر سایتهای زیر پیشنهاد میشود.
✅https://www.w3schools.com/tags/tag_doctype.asp
✅https://www.freecodecamp.org/news/what-is-the-doctype-declaration-in-html/

@alithecodeguy

🔹 دستور 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

🔹تفاوت 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