توییتر فرانت اند – Telegram

توییتر فرانت اند

@frontendtwitter

597 subscribers

3 photos

22 videos

292 links

🎉 با توجه به اینکه خیلی از دوستان در توییتر فعالیت ندارن، اینجا یه سری پست های مفید فرانت اند که تو توییتر پیدا میشه رو می فرستم که برای همه قابل استفاده باشه. اگه نیازی باشه در مورد بعضی موارد هم توضیح میدم

😊ارتباط: @ho3ein_shabani

Download Telegram

About

Blog

Apps

Platform

توییتر فرانت اند

597 subscribers

توییتر فرانت اند

یه هوک کاستوم جالب #React. به نوعی ترکیب useReduce و useEffect هستش که با توجه به type یا هر پراپرتی که با event براش dispatch میکنید میاد و side effect تون رو که داخل یه فانکشن wrap شده اجرا میکنه
https://twitter.com/DavidKPiano/status/1252234142445473795?s=20

میتونید از گیتهاب این هوک رو نصب کنید 😊
@frontendtwitter

⚛️ Just released: useEffectReducer - the dream React hook API I had in mind to manage side-effects with reducers. If you know useReducer but still get confused with useEffect, try this & let me know what you think! 💻 npm install use-effect-reducer 🔗 http…

619 viewsedited 09:40

توییتر فرانت اند

در نسخه ۹.۳.۶ نکست fast refresh خود #React (یا همون react-refresh) به صورت آزمایشی اضافه شده 😍کار جالبی که این ماژول خود ری اکت انجام میده اینه که اگه شما از یه فایل فقط کامپوننت ری اکت رو اکسپورت کنید، با تغییر این کامپوننت دیگه کل صفحه ریلود نمیشه بلکه ری اکت میاد و خودش "ری رندر" میکنه کامپوننت رو(انگار فقط استیت کامپوننت عوض شده) که باعث میشه شما سرعت فوق العاده زیادی برای دیدن نتیجه کدی که زدید داشته باشید. Dan Abramov هم در توییتی خواستش که react refresh رو در نکست تست کنیم چون فعلا در حالت آزمایشی هستش 😁
https://twitter.com/belcoDev/status/1255082332903669760?s=20

لینک گیتهاب react-refresh
@frontendtwitter

Mario Beltrán Alarcón

Yasss 🎉 Next.js v9.3.6 released with experimental React Refresh support https://t.co/OIeZjVfBx5 Looking forward to trying this in my projects. It can be enabled in next.config.js just doing:

616 views20:21

توییتر فرانت اند

یه API خیلی جالب برای event listener ها و استایل ها با یه هوک کاستوم تو #React 😍
پ.ن: هنوز پابلیش نکرده کسی همچین چیزیو
https://twitter.com/necolas/status/1255671143857446918?s=20

@frontendtwitter

If you work on libraries for React components, gestures, or events...what do you think about these APIs? https://t.co/CHMMg3S7YI

640 views04:04

توییتر فرانت اند

⚛️ با هوک useWorker میتونید تسک های به شدت سنگین (مثل sort کردن یه آرایه با ۵ میلیون عضو رندوم!) که تو اپ #React انجام میدید رو بجای thread اصلی مرورگر، بفرستید به Web Worker تا جلوی رندر شدن UI رو نگیره

https://twitter.com/kiarash_zar/status/1257410749003173888?s=20

لینک گیتهاب این پکیج 🎉
@frontendtwitter

⚛️ useWorker() - A #React Hook for Blocking-Free Background Tasks. By using this hook, you can avoid heavy blocking UI tasks by sending them to Web Worker. Github: https://t.co/APYtpEnWhs

2.15K views20:48

توییتر فرانت اند

⚛️ خب Recoil معرفی شد! لایبرری مدیریت استیت برای React از خود تیم فیسبوک 😊خیلی از مشکلات مدیریت استیت فعلی رو حل میکنه

پ.ن: تا استیبل شدنش یکم باید صبر کرد 😁

لینک ویدیو YouTube 📹

#React
https://twitter.com/kiarash_zar/status/1261238956454223874?s=20

@frontendtwitter

A state management library for React.

848 views10:21

توییتر فرانت اند

🎉 معرفی Otion: لایبرری بسیار سبک (۱.۹ کیلوبایتی) CSS-in-JS

#React
https://twitter.com/kripod97/status/1262101505383059456?s=20

@frontendtwitter

GitHub - kripod/otion: Atomic CSS-in-JS with a featherweight runtime

Atomic CSS-in-JS with a featherweight runtime. Contribute to kripod/otion development by creating an account on GitHub.

455 views12:10

توییتر فرانت اند

🎉 ساعتی قبل Gatsby محصول جدیدش رو به نام Will It Build معرفی کرد که برای مشاهده بنچمارک بیلد شدن سایت هایی که با Gatsby روی Gatsby Cloud بیلد میشن کاربرد داره

پ.ن: گتسبی با معرفی Gatsby Cloud و امروز هم با Will It Build کم کم دیگه داره از اینکه صرفا یه SSG Builder باشه بیرون میاد و به یه پلتفرم تبدیل میشه 🤔

#React
https://twitter.com/gatsbyjs/status/1265325907260190720?s=20

لینک Will It Build
@frontendtwitter

🥁🥁🥁 INTRODUCING: Will It Build! 👉 https://t.co/O2k1bItFVW #WillItBuild tracks the progress of build times for Gatsby benchmark sites, providing historical data for build times on Gatsby Cloud across several popular CMS’s and content sources like @contentful…

445 views18:28

توییتر فرانت اند

⚡️ با اوپراتور "..." میتونید پراپ های کامپوننت Reactتون رو خلاصه تر بنویسید.

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

#React
https://twitter.com/mrlaseptima/status/1271506203005325312?s=20

@frontendtwitter

clean code with JSX spread attributes. follow instagram for more : https://t.co/C1usARAkOU #FrontEnd #javascript

436 views13:28

توییتر فرانت اند

⚡️ یه مقاله به شدت پربار در مورد آنالیز کامل پرفورمنس اپ معروف Notion که در اصل با React زده شده

پ.ن:‌ حتما حتما پیشنهاد میکنم همه Reactی ها بخونن 🚀

#React #performance
https://twitter.com/addyosmani/status/1274600187231473664?s=20

@frontendtwitter

Case study: Analyzing Notion app performance

How to make a React app load ~30% faster – by tuning some configs and delaying some scripts

938 views12:07

توییتر فرانت اند

🎉 معرفی FIlbert: یه ابزار بسیار سبک ۱ کیلوبایتی برای CSS-in-JS که تقریبا یک دهم emotion و styled-components حجم داره!

لینک وبسایت

#CSS #JavaScript #React
https://twitter.com/kuldeepkeshwar/status/1279719442033725440?s=20

@frontendtwitter

filbert-js.vercel.app

filbert | Introduction

A light weight(~1KB) css-in-js solution(framework)🎨

538 views11:18

توییتر فرانت اند

🎉 معرفی Reoverlay: لایبرری مدیریت مودال‌ها برای React که توسط یکی از دوستان (@hiradarshadi) توسعه داده شده 😊

پ.ن: روشی که این لایبرری برای نشون دادن مودال ها استفاده میکنه کاملا جدیده و با اون حالت خسته کننده که مجبور بودیم یه استیت isOpen تعریف کنیم متفاوته!

لینک وبسایت و دمو
لینک ریپو گیتهاب

#React #JavaScript
https://twitter.com/hiradary/status/1281951082533486595?s=20

@frontendtwitter

hiradary.github.io

The missing solution for managing modals in React.

529 views14:08

توییتر فرانت اند

⚡️ یکی از گزینه های خوب و جایگزین redux , context برای پروژه های بزرگ XState هست که شاید برای شروع سختی داشته باشه اما در ادامه کارو ساده تر میکنه.

#React #Tools
https://twitter.com/mpocock1/status/1293094341632823303

🔥لینک وبسایت

@frontendtwitter

Here's what I'm learning about using XState at scale in React frontend apps. XState is the hardest to get started with, but handles complexity better than any framework I've ever used.

833 views06:44

توییتر فرانت اند

🎉 کنفرانس بزرگ React Summit 2020 ✨
🗓 ۱۵ و ۱۶ اکتبر ۲۰۲۰ | ساعت ۱۷:۳۰ به وقت تهران

🚀 لینک وبسایت
#React #Event
https://twitter.com/ReactSummit/status/1287643888480473088?s=20

@frontendtwitter

React Summit – The Biggest React Conference Worldwide

React Summit is an in-person and remote first (hybrid) conference of all things React, gathering OSS authors, top trainers and speakers, as well as web engineers across the globe to meet in Amsterdam and online.

773 viewsCinna, 13:30

توییتر فرانت اند

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️ اپلیکیشن Renoj توسط بچه های تیم Ribal با استفاده از React, Electron توسعه داده شده که یکسری قابلیت های جالب تو زمینه مدیریت تسک های شخصی داره که برای ویندوز و مک میتونید دانلود کنید و استفاده کنید.

🔥 لینک وبسایت (بدون VPN برید تا رایگان دانلود کنید)
🔥 لینک producthunt (برای اینکه محصول بالا بیاد اگر دوست داشتید upvote بدین)

#Task #React #Ribal
https://twitter.com/ribal_dev/status/1319924868222230528

@frontendtwitter

5.03K viewsHossein Shabani, edited 08:58

توییتر فرانت اند

⚡️ خیلی وقت ها میخواهیم که بخش های مختلف یک آبجکت را ایتریت کنیم و به مقدار های مختلف دسترسی داشته باشیم که میتوانیم از این متود ها استفاده کنیم.

#js #tip
https://twitter.com/Carlillo/status/1333553701487775745

@frontendtwitter

Carlos Caballero

#Javascript tips🐸: Convert Object to Array Object.keys -> [key1, key2] Object.values -> [value1, value2] Object.entries -> [[key1, value1], [key2, value2], ...] #typescript #angular #vue #react #codenewbie #100daysofcode

1.3K viewsAsleMammad, 17:30

توییتر فرانت اند

⚡️ یه کار جذاب از @itzArsha عزیز که با استفاده ازش میتونید یه سری بکگراند موج دار جذاب درست کنید.
خیلی خوبه تو تایم هایی که داریم کارای ریز و درشتی رو که میتونیم انجام بدیم و منتشر کنیم.

🔥 لینک وبسایت
🔥 لینک producthunt (برای اینکه محصول بالا بیاد اگر دوست داشتید upvote بدین)

#React #Wave
https://twitter.com/ArshavirAzarfar/status/1338428820970483713

@frontendtwitter

Wavelry - Product Information, Latest Updates, and Reviews 2023 | Product Hunt

You can customise a wavey background and then download it....

2.16K viewsHossein Shabani, 10:32

توییتر فرانت اند

⚡️ فیچر جدید جاواسکریپت که با استفاده از اندرلاین میتوانیم خوانایی اعداد بلند را بیشتر میکنیم.

#js #es #feature
https://twitter.com/Carlillo/status/1341369123511672833

@frontendtwitter

Carlos Caballero

#javascript tips🐸: ES2021 - Numeric separators This feature allows that numeric literals will be more readable using a visual separation (underscores) between groups of digits #typescript #angular #vue #react #100DaysOfCode #CodeNewbie

1.66K viewsAsleMammad, 11:20

توییتر فرانت اند

⚡️ ویدیویی زیبا در مورد اینکه چطور react-three-fiber کار میکند و از پتانسیل ری اکت به قدرت استفاده میکند. r3f یک ابزاری قدرتمند است که از threejs در درون خود برای رندر استفاده میکند!

#js #react #tool
https://twitter.com/0xca0a/status/1433095599889559555

nothing's more stressful than giving a talk, or worse having to hear myself afterwards. i've cut all nervous uh, ah's out my recent react-finland talk about making games in react and threejs. it's a super quick 7min intro. live coding around 2:10 youtube…

5.09K viewsAsleMammad, edited 18:17