وقتی سیستمتو عوض میکنی

#fun
☕️ @CodeExplore

رفتن به خط بعد در جاوا اسکریپت ✌️

☄️قبل از این، اگه می‌خواستی رشته‌ای رو در چند خط بنویسی، باید از \n برای ایجاد خط جدید استفاده می‌کردی:

const message = "This is line 1\nThis is line 2\nThis is line 3";
console.log(message);
/*
This is line 1
This is line 2
This is line 3
*/

با استفاده از بک‌تیک‌ها، می‌تونی به سادگی این کار رو انجام بدی:

const message = `This is line 1
This is line 2
This is line 3`;
console.log(message);
/*
This is line 1
This is line 2
This is line 3
*/

#javascript #js #trick
☕️ @CodeExplore

📚سه تا کتاب رایگان و کاربردی برای ماشین لرنینگ و مباحث مربوط به اون

▪️An Introduction to Statistical Learning

این کتاب مفاهیم اساسی Statistical Learning رو به زبان ساده توضیح میده.

▪️Machine Learning Yearning

توی این کتاب به بهترین روش‌های پیاده‌سازی پروژه‌های ماشین لرنینگ و افزایش کارایی اونها پرداخته شده.

▪️The Hundred-Page Machine Learning Book

یک راهنمای کوتاه و جامع که مبانی و کاربردهای اصلی ماشین لرنینگ رو پوشش میده.

#machine #learning #book
☕️ @CodeExplore

دوستانی که هدفشون کشور آلمان هست ، بهتون بگم که برای پیدا کردن شغل می تونید از Xing ( مثل لینکدین می مونه ولی با این تفاوت که تو کشور آلمان خیلی محبوبه) می تونید استفاده کنید ، حتی شغل ریموت هم می تونید پیدا کنید و اینکه تو بعضی از آگهی ها بودجه و حقوق رو مشخص میکنن.

👉 xing.com

#xing
☕️ @CodeExplore

☄️خوش اومدین به یک پست دیگه از آموزش های TailwindCss

◀️در ادامه مباحث قبلی ما رسیدیم به گروه بندی و اینکه چطور مشخص کنیم اگه گروهمون هاور شد فلان اتفاق بیوفته
حالا امروز میخام بیشتر عمیق بشیم توی این مبحث و جزئیات بیشتری رو پیش ببریم

ببینین اول از همه بزارین من مثال کدشو که از داک خود تیلویند اوردم نشونتون بدم:

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <a href="{person.url}">{person.name}</a>
        <p>{person.title}</p>
      </div>
      <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>

یکم پهپ قاطیش کردن بیخیال شما کلاس های تیلویند رو دریابین
اینجا ما یه سینتکس داریم که به این صورت نوشته شده:

group/{name}
group-hover/{name}

الان ما با این اسم حرکت به المنت خودمون یه اسم میدیم تا توی گروهی که ساختیم انتخابش کنیم و با اون اسم بهش دسترسی داشته باشیم
💎توی مثال بالا، هر li ما داخل گروه اسمش item هست و اون پایین ترش داخل تگ a که اسم edit گرفته، گفته هروقت روش هاور شد، ایتم ما برای فلان اتفاق بیوفته و راحت دسترسی داره به اون تگ داخل گروه

حالا پایین تر رو ببینین:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

اینجا دیگه خیلی خفن شده و گفتیم این گروه ما هروقت کلاس is-published گرفتن، فلان تگ ما دیسپلی block بگیره، یعنی راحت میتونیم سلکتور های مختلفی رو ست کنیم و کلی با جی اس بلا سرش بیاریم

یا حتی میتونیم مثل کد پایین بیایم و با سلکتور های دیگه کار کنیم، قبلا راجب این براکت های باز و بسته گفتم توی تیلویند:

<div class="group">
  <div class="group-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

✨خب گروه بندی هارو کامل باهم بررسی کردیم
یه مبحث دیگه که خیلی خفنه peer هست ( پیر نیستا جوونه )😂
ما داخل گروه بندی ها، گروهمون طوری بود که المنت ها داخل اون گروه اصلی باشن
ولی داخل peer اینا کنار هم قرار دارن و همینطوری استایل هارو با اسم peer بهشون میدیم

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>

داخل این مثال ما اومدیم کلاس peer رو به input دادیم و بعدش هم به p کنارش گفتیم هروقت input ما invalid بود، نشون داده بشه
درکل سینتکسل کلی اینطوریه که شما مدیفایر رو بعد از peer مشخص میکنین:

peer-{modifire)
peer-focus
peer-required

⚡️یه نکته مهم اینه که این کلاس peer باید قبل از peer-{modifire} ست بشه
حالا ما اون اسم دهی که داخل گروه ها گفتیم رو اینجا هم داریم این مثال رو دقت کنین:

html 
<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

سلکتور ها کلا خیلی طولانیه مبحثش و من یه سلکتور دیگه بگم و بریم:

<ul class="*:bg-sky-50 ...">
  <li class="bg-red-50 ...">Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>

👑سلکتور * رو وقتی استفاده میکنیم که بخایم یه استایل رو به تمام فرزندان تگمون بدیم همینطور که توی مثال بالا میبینین

#tailwind #tailwind_9
☕️ @CodeExplore

ساختن اکانت توی سایت های فریلنسری خارجی قرار نیست بهتون پروژه و کار بده.

من میخوام توی این پست راجب تجربه خودم از کار بین المللی بدون داشتن اکانتی توی سایت ها صحبت کنم.
‏اول از همه اینکه پروژه هایی که چرب و چیل هستند و از طرف کارفرمای کاربلد میان معمولا به این سایت ها راه پیدا نمیکنند و توسط افراد نتورک همون شرکت یا کارفرما انجام میشن. پروژه هایی میان روی این سایت ها که کارفرماشون معمولا دنبال یکی هست که کار رو ارزون انجام بده.
‏در نتیجه فضای حاکم بر این سایت ها اینجوریه که اکثریت پروژه ها به فریلنسرهایی داده میشه که کمترین پول رو در ازای اون پروژه طلب کنند. عملا این فضا برای ما که میخواییم درآمد خوبی داشته باشیم مناسب نیست.
‏احراز هویت شما توسط هر شخص و شرکتی هم که انجام شده باشه تهش شما در واقع ایرانی هستید و ممکنه هر زمانی اکانتتون بن بشه. با وجود این همه ریسک و مانع به نظر من ارزش اینو نداره که فعالیتمون معطوف به این سایت ها باشه. اما چیکار کنیم؟
‏من از وقتی که فریلنسری رو توی مارکت بین المللی شروع کردم تنها تمرکزم روی این بوده که کلاینت هایی که میگیرم تبدیل به ارتباط بشن برام، و توسط اونا من داخل یه شبکه ریفرالی به افراد بیشتری معرفی بشم و کار و کلاینت بیشتری سراغم بیاد، اینجا یه چیزی خیلی مهمه اونم کیفیت بالای کاره.
‏کیفیت کار باید همیشه سعی کنید که چند درجه بالاتر از مبلغی باشه که میگیرید. به اصطلاح اُور دلیور کنید، اما مواظب باشید که کمتر از مبلغی که نرخ مناسب کارتون هست نگیرید. بازار رو خراب نکنید در واقع. تا اینجا شما یه سری کلاینت ثابت دارید که بهتون پروژه میدن، اما چطوری گسترشش بدیم؟
‏حضور مستمر و مداوم آنلاین. روی اینترنت اگه اظهار وجود نکنید کسی متوجه شما نخواهد شد. خیلی از بچه هارو میبینم که کارشون به شدت خوبه اما چون پورتفولیویی ندارن که در دسترس باشه به مشکل میخورن. کارتون رو پست کنید، با همکاراتون کانکت شید و یه پورتفولیو آپدیت شده داشته باشید.
‏در آخر این تجربه و نظر منه و دیدم دوستانی هستند که علارغم مواردی که من گفتم تونستن به درآمد خوبی از این سایت ها برسند، اما روشی که من گفتم خیلی مطمئن تر و آینده دار تره.

📱 https://x.com/mvhdigharib

#freelance
☕️ @CodeExplore

به نظرتون توی کدنویسی سخت ترین مبحثی که یک برنامه نویس باهاش سروکار داره چیه؟🤔

#programming
☕️ @CodeExplore

صبحمون رو با یک آهنگ سم و باحال شروع کنیم😂🔥
واسه بقیه دوستان هم بفرستید ، حال و هواشون عوض شه❤️
متن آهنگ رو براتون تو کامنت می‌فرستم.

#music
☕️ @CodeExplore

🟠 یک منبع عالی برای برنامه نویسا و طراحان سایت که به دنبال Loading animation های ساده و جذاب هستن. این سایت مجموعه‌ای از انیمیشن‌های CSS و SVG رو ارائه میده که به راحتی قابل استفاده و سفارشی سازی هستند. با استفاده از این انیمیشن‌ها، میتونید تجربه کاربری سایت‌ها و برنامه‌ها رو بهبود ببخشید.

‏UIBall Loaders گزینه‌های متنوعی از انیمیشن‌ها رو فراهم میکنه که میتونن به صورت مستقیم در پروژه‌های شما استفاده بشن 💡

🔗uiball.com/loaders

#loader #animation
☕️ @CodeExplore

💫 تو این تصویر کور دولوپرهای تیم Pydantic رو می بینید

و بازم یک ایرانی دیگه تو یک تیم خفن. افتخار میکنیم که حسن رمضانی تو این تصویر می بینیم. حسن رمضانی سمت راستیه هست.✨

🌐 گیت هاب حسن رمضانی
🖥 تجربه مهاجرت حسن رمضانی ( آلمان )

واسه همتون آرزوی موفقیت داریم و امیدواریم که بهترین ها براتون رقم بخوره:)💚

#developer #pydantic #library
☕️ @CodeExplore

برعکس کردن تکست در پایتون ⌨️

🔴در واقع این قابلیت با استفاده از اسلایس کردن در پایتون به کار میره، که در آینده آموزشش رو میزاریم، فعلا در همین حد بدونید که شما میتونید به این شکل یک مجموعه(در این مثال یک استرینگ) رو قاچ قاچ کنید!

txt="CodeExplore"
print(txt[t1:t2:t3])

#در اینجا فرض میکنیم t1,t2,t3 همگی عدد صحیح هستند، t1 در واقع start رو مشخص میکنه و t2 مورد stop رو مشخص میکنه و آخری که t3 هستش step رو مشخص میکنه. 
#در واقع step میگه که با چه اندازه ای توی کاراکترا پیش بره، start نقطه شروع رو مشخص میکنه که پیشفرض 0 هست و stop هم نقطه پایان رو مشخص میکنه که پیشفرض شماره آخرین حرف کاراکتره

برگردیم به مثال خودمون، اینجا استپ رو منفی گذاشتیم تا به عقب بره، اینطوری تکست برعکس میشه:

a = "Hello World!"
print(a[::-1])

"""
!dlroW olleH
"""

#python #step #slice
☕️ @CodeExplore

⚡️سلام عزیزای دلم امروز اومدیم بازم چیزای جدیدی از TailwindCss یاد بگیریم

توی این پست قصد داریم راجب flex و grid داخل تیلویند صحبت کنیم و خب شاید نشه توی یه پارت جمعش کرد

💥اول از همه با مبحث Flex شروع میکنیم و میریم که بررسی کنیم این عزیز دل چیا داره
خب ما برای اینکه بخایم display یه المنت رو flex کنیم میام و کلاس flex رو بهش میدیم که خب واقعا واضحه
اما نکته جالب برای نوشتن align-items و justify-content هستش که برای align-items ما فقط کلاس items رو مینویسیم و جلوش مقدارش رو، ولی برای justify-content از justify
مثال رو باهم ببینیم:

<div class="flex align-center justify-center> 
</div> 

✅و خب برای مقادیرش این لیست پایین کمکتون میکنه:

justify-normal
justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly
justify-stretch
items-start
items-end
items-center
items-baseline
items-stretch

خب حالا ما داخل فلکس یه مبحثی داریم به اسم flex-basis که خب اینطوری استایل دهی میشه:
basis-*
که خب مقادیرش مثل همون واحد های اندازه تیلوینده که قبلا گفتیم و چیز خاصی نداره مثلا basis-20

🟡برای تغییر جهت و دایرکشن flex از لیست زیر به راحتی میتونین استفاده کنین:

flex-row
flex-row-reverse
flex-col
flex-col-reverse

نکته بعدی راجب flex-wrap هستش که اینم خب توضیح خاصی نداره خداییش چی بگم لیستش خدمتتون:

flex-wrap
flex-wrap-reverse
flex-nowrap

◀️برای خود مقادیر flex:

flex-1 // 1 1 0%
flex-auto // 1 1 auto
flex-initial // 0 1 auto
flex-none // none

◀️برای مقادیر flex-grow:

grow // flex-grow: 1;
grow-0 //flex-grow: 0;

‼️یه مبحثی هم داریم به اسم order که میاد اولویت بندی میکنه اون المنت ها و نحوه قرار گیری رو
از order-1 تا order-12 داریم ولی برای اولین و اخرین هم دوتا order-first و order-last هستن که کارمون رو راحت میکنن

اینم بگم دوستان اموزش تیلویند بر فرض این میره جلو که شما عزیزان Css رو بلدین و خب برای همین وقتی استایل هارو بلد باشین توضیح خاصی واقعا نمیتونم بدم چون خیلی از کلاس های تیلویند اصن با اسمشون معلومه چیکار میکنن
ادامه مباحث که درباره گرید هست بره برای پست بعدی خسته نشین☕

#tailwind #tailwind_10
☕️ @CodeExplore

⚪️سایت Omatsuri یک جعبه ابزار برای web developer هاست که شامل ابزارهای مختلفی مثل Page dividers ،SVG compressor، Gradient generator و بسیاری از ابزار های دیگه هست و میتونه توی فرایند توسعه وب به شما کمک کنه. Omatsuri به صورت اوپن سورس ارائه شده و تمام ابزارهای اون به صورت رایگان قابل استفاده هستن.

🔗 https://omatsuri.app

#web #developer #tools
☕️ @CodeExplore

روانشناسی رنگ ها 👀

میدونین که رنگ ها و تم ها چقدر توی طراحی نرم افزار و سایت ها مهمن ، این عکس کمکتون میکنه با توجه به نرم افزار رنگ های مناسبی انتخاب کنید😂

#color #theme
☕️ @CodeExplore

هعی

#fun
☕️ @CodeExplore

درج مقادیر بین یک آرایه در جاوا اسکریپت ✌️

✅تصور کنید که یک آرایه از اعداد، مشابه زیر دارید:

const arr = [0, 1, 2, 3, 5, 6, 7, 8];

⭐️حالا میخوایم 4 رو سر جای خودش توی آرایه اضافه کنیم، به راحتی می تونید این کار رو با استفاده از splice درArray’s prototype انجام بدین. syntax of the splice به شکل زیر هست:

arr.splice(index, itemsToDelete, item1ToAdd, item2ToAdd, ...)

برای اضافه کردن عدد 4 در index4 باید کد زیر رو اجرا کنین:

arr.splice(4, 0, 4);

آرایه به روز شده به شکل زیر هست:

[0, 1, 2, 3,4, 5, 6, 7, 8]

#javascript #js #trick #array
☕️ @CodeExplore

سایت democoding 🪫

✔️ این سایت بهتون کد های CSS و HTML آماده میده و میتونین ازش برای یادگیری،ایده پردازی و حتی کپی UI های خفن استفاده کنید. به طور خلاصه یک سایتی مثل codepen هست، البته بعضی از سورس کدها هم به همین سایت codepen وصل میشن

🔗 Democoding

#democoding
☕️ @CodeExplore

📌یه سایت خفن آوردم برای فرانت کارای عزیز که باهاش اشکال خداییش نامنظم و در عین حال خوشگل و زیبا بسازین برای پروژه هاتون

🌐 https://www.blobmaker.app/

#site
☕️ @CodeExplore

🔥خب خب بیاین باهم بریم ادامه TailwindCss رو یاد بگیریم

⚡️خب اول از همه باید بگم برای اینکه ما بیایم دیسپلی المنت رو grid کنیم فقط کافیه کلاس grid رو بهش بدیم
بعد از اون دیگه خیلی راحت میتونیم ستون و ردیف هاشو تنظیم کنیم
داخل تیلویند به صورت پیش فرض از 1 تا 12 در نظر گرفته شده برای ستون و ردیف ها ولی خب میتونین بیشتر و کمترش هم کنین که البته نیاز نیست خداییش
خب برای اینکه شما بیاین ستون و ردیف هارو مشخص کنین این کلاس ها در اختیارتونه

grid-cols-1
grid-rows-1
grid-cols-2
grid-rows-2
....
grid-cols-12
grid-rows-12

البته نیاز نیست هردو رو باهم به کار ببرین صرفا لیست کردیم
اینم بگم شما وقتی grid-rows هارو مشخص نکنین دیفالتش auto هست و خودش میگیره
پس بنظرم ستون هارو مشخص کنین کافی باشه حالا دیگه تصمیم با خودتون

حالا ما یه چیزی هم داریم به اسم span که میتونیم بگیم این المنت ما چند تا ستون یا ردیف رو مال خودش کنه
ما برای ستون و ردیف ها یه سینتکس داریم براش فقط اسمش فرق داره
این لیست رو دقت کنین:

col-span-1
row-span-1
col-span-2
row-span-2
....
col-span-12
row-span-12
col-span-full
row-span-full

✅و خب اینم میدونین که میتونیم نقطه شروع و پایان المنت هارو هم مشخص کنیم که از چه ستونی شروع بشن یا توی چه ستونی تموم بشن
حالا هم ستون هم ردیف رو باهم میبینیم:

col-start-1
col-end-1
row-start-1
row-end-1
col-start-2
col-end-2
row-start-2
row-end-2
...
col-start-13
col-end-13
row-start-13
row-end-13

الان ما اینجا تا عدد 13 رو داریم، دلیلش رو نمیگم میخام ببینم کدومتون Css و مبحث Grid رو بلدین به من توی کامنتا بگین چرا با اینکه 12 تا ستون داریم، اینجا تا 13 زده؟🦦

خب یه مبحث دیگه راجب Grid Auto Flow هستش که خب مربوط به دیسپلی گرید میشه و این کلاس هارو براش داریم:

grid-flow-row
grid-flow-col
grid-flow-dense
grid-flow-row-dense
grid-flow-col-dense

داخل سیستم گرید، ما علاوه بر اینکه میتونیم تعداد ستون هارو مشخص کنیم، حتی میتونیم جدای از اون، بیایم بگیم هر ستون ما چه سایزی به صورت اتوماتیک بگیره: (هم ستون هم ردیف)

auto-cols-auto
auto-cols-min
auto-cols-max
auto-cols-fr

💎برای ردیف هم فقط cols رو با rows عوض کنین

و اما مبحث مهم آخر که هم برای فلکس هستش هم گرید، فاصله بین ایتم هاس که همون gap هستش
برای تنظیم gap، ما هم میتونیم از اندازه های تیلویند که قبلا یاد گرفتیم استفاده کنیم هم جهت محورش یعنی افقی یا عمودی یا هردو رو مشخص کنیم:

gap-1
gap-x-1
gap-y-1

📌و خب این قسمت و قسمت قبلی خیلی خیلی مهم بودن سعی کنین حتما تمرین کنین باهاشون

#tailwind #tailwind_10
☕️ @CodeExplore