| Rad Dev (JS) 🖤 |
2.69K subscribers
401 photos
18 videos
10 files
723 links
#JS 👑

سعیدی‌را‌د هستم، اینجا تجربم و چیزایی که یاد می‌گیرم رو به اشتراک می‌ذارم.

ارتباط:

@AminKhoy78

مخلصم 👨‍💻🖤
Download Telegram
اگه تازه جاوا اسکربپت یاد گرفتین یا دارین یادش می‌گیرین، این ریپو 30 تمرین جاوا اسکریپت با سورس‌کد و بدون سورس‌کد قرار داده که می‌تونه چند قدم جلو بندازتتون:

🔗 https://github.com/wesbos/JavaScript30

@Mern_stack_01
Please open Telegram to view this post
VIEW IN TELEGRAM
❤26🔥4👍3
یه الگوریتم معروف هست به اسم Stalin Sort. روش کارش این‌طوریه که میاد اعدادی که روند صعودی آرایه رو به هم می‌زنن رو حذف می‌کنه. یجورایی آرایه رو مرتب می‌کنه، اما با حذف یسری آیتم‌ها:

const list = [1, 2, 5, 3, 6, 4, 10];

sortedResult = stalinSort(list);

console.log(sortedResult) // [1, 2, 5, 6, 10]


کدش هم این‌جا هست:

🔗 https://github.com/kedmenecr/stalin-sort-js

مسلما تو پروژه های واقعی بهش نیاز نمی‌شه. صرفا یه الگوریتم فانه.

@Mern_stack_01
Please open Telegram to view this post
VIEW IN TELEGRAM
❤30😁13👍2
اگه این کانفیگ رو به وی‌اس‌کد اضافه کنین وقتی فایل رو سیو می‌کنین خودش ایمپورت‌ها رو مرتب می‌کنه و حتی ایمپورت هایی که استفاده نکردین رو پاک می‌کنه:

{
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
}
}


مثلا:

// Before save
import z from "./z";
import React from "react";
import a from "./a";

// After save
import React from "react";
import a from "./a";
import z from "./z";


@Mern_stack_01
👍31❤11
این سایت اومده یسری سوال چالشی و مصاحبه‌ای از Css و Js رو به صورت سطح‌بندی‌شده و همراه با جواب تشریحی گذاشته که اگه در حال یادگیری هستین خیلی می‌تونه واسه درک بهتر کمک‌تون کنه:

🔗 https://30secondsofinterviews.org/

@Mern_stack_01
Please open Telegram to view this post
VIEW IN TELEGRAM
❤33👍5🔥5💯1
مواردی که در راستای امنیت Api باید بلد باشید:

🔗 https://roadmap.sh/api-security-best-practices

@Mern_stack_01
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24👍5💯2
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13👍2👎2⚡1💯1
اگه انگلیسی‌تون در حدی نیست که مقالات انگلیسی رو بخونید، لینک مقاله رو بفرستید به ChatGPT و این متن رو زیرش بنویسید:

“محتوای این لینک رو بهم یاد بده”

به زبون آدمی‌زاد و با دید فنی بهتون توضیح می‌ده، نه این که فقط ترجمه کنه.

@Mern_stack_01
❤55👍15🔥4⚡1😁1💯1
یه لیست خوب و دسته‌بندی‌شده از ابزارهایی که به درد دولوپر فرانت‌اند می‌خورن:

🔗 https://github.com/nafasebra/awesome-webdesign-tools

@Mern_stack_01
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24👍3⚡1💯1
یه چک‌لیست خیلی جامع واسه فرانت‌اند (جاوا اسکریپت، امنیت، سئو، پروداکشن و …)

🔗 https://github.com/thedaviddias/Front-End-Checklist

لینک‌ها و منابع خیلی مفیدی توش هست. حتما بهش یه سر بزنید.

@Mern_stack_01
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤4
کدوم کد رو ترجیح می‌دین؟

@Mern_stack_01
❤20🔥4💯1
| Rad Dev (JS) 🖤 |
در رابطه با این Poll باید بگم یه چیزی وجود داره یه اسم Best Practice Trap. یعنی تله بست‌پرکتیس‌ها.
اکثرا وقتی یه best practice می‌بینیم به عنوان یه فکت مطلق برداشت می‌کنیم که همیشه درسته، همه ‌جا باید ازش استفاده کرد و …

تو کد بالا دولوپر کم‌تجربه کد 2 رو انتخاب می‌کنه. چون احتمالا با یه اصلی به اسم DRY آشنایی داره و می‌گه نباید کد رو تکرار کرد.
نمی‌دونه تو کد دوم باید کلی if نوشت که خودش باعث کثیفی کد می‌شه. نمی‌دونه تو ماه های آینده نیاز های یوزر و ادمین از هم‌دیگه جدا می‌شن و اون‌موقع هم قراره کلی if دیگه به فانکشن اضافه ‌بشه و در نتیجه فانکشن تبدیل می‌شه به یه هیولا که نمی‌شه حتی بهش دست زد دیگه.
گاهی اوقات کمی تکرار بهتر از abstraction زودهنگام هست.

در نتیجه سعی کنید تو تله Best Practice نیفتید. بست‌پرکتیس‌ها فکت مطلق نیستن.
اکثر بست‌پرکتیس‌ها عمدتا واسه یه context خاص تعریف می‌شن.

@Mern_stack_01
❤62👍20👎6🤯6⚡2😁2🔥1
کانال رسمی آپارات در یوتوب :))

@Mern_stack_01
😁150🤡15❤3💯1💔1
دلیل این که درخواست های اقوام برای آموزش برنامه‌نویسی به فرزندان‌شون رو رد می‌کنم اینه که موفق‌شدن تو این حوزه فقط 30 درصد به استاد / مدرس بستگی داره و مابقیش بر عهده خود شخصه.

اراده، انگیزه، علاقه، حتی عرضه، نوع شخصیت، حتی ارتباطات و … کلی چیز دیگه موثرند.

حالا اگه شخص این وسط یه درصد موفق نشه، همه تقصیرا میفته گردن مدرس بیچاره.

اگه می‌خواید بعدا مزه پشیمونی رو تجربه نکنید، شما هم همچین درخواست هایی رو از اقوام رد کنید.

@Mern_stack_01
👍92❤14💯3⚡2👎1
| Rad Dev (JS) 🖤 |
فایل package.json صرفا فقط واسه نگه‌داری dependency نیست. کلی کار باحال می‌شه باهاش انجام داد. یکی از کارایی که می‌شه انجام داد Script Composition (ترکیب اسکریپت‌ها) هست. یعنی از طریق یه اسکریپت، یه اسکریپت دیگه رو اجرا کنید. این قابلیت باعث می‌شه اسکریپت…
در ادامه این پست، تو package.json می‌تونید واسه نام‌گذاری اسکریپت‌ها از : استفاده کنید. یعنی این‌طوری:

{
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",

"build": "tsc",
"build:client": "vite build",
"build:server": "tsc"
}
}


کاراکتر : هیچ معنی خاصی واسه npm نداره و فقط یه Naming Convention بین برنامه‌نویس‌هاست.

این ساختار تو پروژه های بزرگ خیلی خوانا‌تره.

@Mern_stack_01
❤25👍3⚡2
قدیما که ادا هایی مثل دوتا مانیتور و تم دارک و قهوه و ماچا و … نبودن، تو همچین محیطی کد می‌زدیم.

@Mern_stack_01
😁57👍11🤡8🤯4⚡3💯1💔1
اگه Coding Interview رو کنکور در نظر بگیریم، LeetCode می‌شه کتاب کنکوری.

یکی از سایت هایی که مهارت حل مسئله شما رو به شدت تقویت می‌کنه و در نتیجه واسه Coding Interview خیلی آماده‌تر می‌شید، سایت LeetCode هست:

🔗 LeetCode.com

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

@Mern_stack_01
Please open Telegram to view this post
VIEW IN TELEGRAM
❤38👍9👎1
| Rad Dev (JS) 🖤 |
در ادامه این پست، تو package.json می‌تونید واسه نام‌گذاری اسکریپت‌ها از : استفاده کنید. یعنی این‌طوری: { "scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage", "build": "tsc", "build:client":…
در ادامه این پست، احتمالا دیدید که یسری اسکریپت های package.json رو بدون run اجراشون می‌کنیم. مثلا به جای npm run start می‌نویسیم npm start.

دلیلش اینه که خود npm واسه یسری keywordها شورت‌کات تعریف کرده. مثل:

- npm start
- npm test
- npm stop
- npm restart

@Mern_stack_01
❤24👍7⚡2👎1💯1
فرانت‌اند هم این‌قد پر استرس؟

موقع نوشتن useEffect باید با سرعت نور تایپ کنیم تا یه‌وقت فرصتی به auto save ادیتور ندیم که بخواد useEffect ناقص رو تو مرورگر اجرا کنه و تو تکرار رندر بیفته و سیستم کرش کنه.

@Mern_stack_01
😁89❤5🤯4👎2💯2👍1💔1
اکثرا اگه بخوایم سمت فرانت‌اند با کوکی‌ها کار کنیم از document.cookie استفاده می‌کنیم. اما از دردسرای این روش هر چی بگم کم گفتم.

مثلا واسه خوندن کوکی باید slice و find و split بزنیم.
حتی حذف کوکی هم دردسره.

اما خبر خوب اینه که یه Api جدید اضافه شده به اسم CookieStore که کار باهاش خیلی راحت‌تره. هم ایجاد کوکی، هم خوندن کوکی و ... حتی حذف کوکی. حتی باهاش می‌تونین Watch بنویسین. خیلی خوبه :))

پشتیبانی مرورگرا رو هم داره و به نظرم دیگه باید از document.cookie خداحافظی کنیم. CookieStore حتی تو Service Worker هم کار می‌کنه.

@Mern_stack_01
❤41👍6🔥2💯2
آقا سمت برنامه‌نویسی نیاید.

کاملا جدی.

@Mern_stack_01
👍93🤯28😁15🤡8💔7👎2⚡1❤1💯1