HTML, CSS, PHP: полная шпаргалка

https://bookflow.ru/html-css-php-polnaya-shpargalka-cheat-sheet/

👉 @frontend_1

React: революция использования фигурных скобочек

Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.

В этой статье хотелось бы обсудить несколько привычек, которые есть у нас всех и которые, возможно, пора переосмыслить.

Начнем с кастомных хуков, которым надо вернуть результат, в частности пару значений. Классическим примером может быть хук для запроса данных по сети и отслеживания в процессе ли этот запрос сейчас, чтобы добавить на страницу лоадер.

function useClient(clientId) {
const [loadedClient, setLoadedClient] = useState(null)
const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
const loadClient = async () => {
try {
setIsLoading(true)
const clientData = {} // actual data loading call goes here
setLoadedClient(clientData)
}
finally {
setIsLoading(false)
}
}

loadClient()
}, [clientId])

return [loadedClient, isLoading]
}

https://habr.com/ru/articles/727542/

✍️ @React_lib

Экосистема JavaScript восхитительно странная

Заметьте, я не говорю, что JavaScript странный, хотя он, безусловно, странный. Но суть этой статьи не в этом.
Потерпите, вместо того чтобы начать с того, как странна экосистема JavaScript, я начну с того, почему экосистема JavaScript странная.

https://fly.io/blog/js-ecosystem-delightfully-wierd/

👉 @frontend_1

Совет по CSS 💡

Легко изменить стиль текста заполнителя 🤩

👉 @frontend_1

Совет по HTML 💡

Возможно, вы не знали об этом элементе HTML 🤩

👉 @frontend_1

Совет по производительности в Интернете 💡

Предварительная выборка ресурсов следующих возможных страниц для более быстрой навигации 🚀

👉 @frontend_1

100 современных CSS-кнопок. Все стили, которые вы можете себе представить.

https://ui-buttons.web.app/

👉 @frontend_1

Интересные трюки HTML, CSS и JS

Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.

https://habr.com/ru/companies/ruvds/articles/731960/

👉 @frontend_1

Интересные трюки JS, HTML и CSS, #2

Небольшая подборка нестандартных вариантов использования HTML/JS/CSS, где каждый найдёт что-то интересное. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Предыдущая часть здесь.

В этом выпуске — DevTools для мобильных браузеров, CSS-антистресс для Booking .com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox) и др.

https://habr.com/ru/companies/ruvds/articles/748950/

👉 @frontend_1

Расширенные функции JavaScript для повышения качества кода

В этой статье я расскажу, как использовать некоторые встроенные возможности для создания наиболее мощных функций, которые повышают производительность и делают код более красивым. Я расскажу о функциях Debounce, Throttle, Once, Memoize, Curry, Partial, Pipe, Compose, Pick, Omit и Zip, которые можно сохранить в служебном файле/классе, чтобы оптимизировать качество кода как разработчика JavaScript.

Хотя функции объясняются на языке JavaScript, они могут быть легко реализованы в любом языке программирования. Как только концепция различных функций будет понята, их можно будет применять повсеместно.

https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/

👉 @frontend_1

Создание и развертывание клона LeetCode с помощью React, Next JS, TypeScript, Tailwind CSS, Firebase

0:00:00 Intro
0:00:29 Demo of The App
0:05:23 Project Setup
0:08:51 Auth Page Setup
0:13:19 Auth Page Navbar
0:18:54 AuthModal Layout UI
0:22:16 Login UI
0:29:41 Signup UI
0:31:59 ResetPassword UI
0:33:13 Integrating Recoil Auth State
0:47:31 Firebase Setup
0:52:41 Signup Functionality
1:01:21 Login Functionality
1:05:14 Auth Page Route Guard
1:08:01 Home Page UI
1:12:50 Problems Table UI
1:21:01 Youtube Video Modal
1:29:51 Topbar Update On Auth
1:32:46 Logout Functionality
1:37:11 Auth Modal Optimizations
1:38:44 Reset Password Functionality
1:42:56 React Toastify
1:47:19 Image optimizations
1:54:33 Creating [pid] page and update topbar
2:02:27 Creating Timer.tsx
2:12:31 Creating Workspace.tsx
2:15:18 Splitting The Page
2:19:47 Creating ProblemDescrition.tsx
2:26:03 Creating PreferenceNav.tsx
2:34:39 Creating Code Editor
2:41:10 Adding Test Cases UI
2:50:15 Creating EditorFooter.tsx
2:56:32 Data Handling Explained
3:01:50 Two Sum Problem
3:12:52 Reverse Linked List
3:18:05 Jump Game Problem
3:20:13 Valid Parentheses Problem
3:21:16 Search 2d Matrix Problem
3:22:01 Using SSG for [pid].tsx
3:46:47 Updating testcases UI
3:51:39 Initializing Firestore
3:55:56 Adding problems to DB
4:12:09 Fetch Problems
4:32:58 Create Users in DB
4:40:33 Fetch problem data
4:51:28 Loading skeletons
4:56:35 Get user data on the problem
5:06:23 Like functionality
5:27:51 Dislike functionality
5:39:03 Star functionality
5:46:03 Next and Previous problem
5:55:23 Solving Hydration Error
5:58:08 Confetti Celebration
6:01:43 Code Submission
6:20:50 Save code to localstorage
6:24:48 Solving bugs
6:31:08 Toggle Full Screen
6:34:13 SettingsModal UI
6:41:33 SettingsModal Functionality
6:54:23 Update Home Page
6:59:11 Sandboxing technique
7:01:58 Deployment
7:05:08 Firebase Rules

https://www.youtube.com/watch?v=GnodscC2p-A

👉 @frontend_1

Совет по HTML 💡

Легко создайте красивый индикатор выполнения, используя элемент <progress> 🤩

👉 @frontend_1

🚀 Коллекция React-компонентов и библиотек

https://github.com/brillout/awesome-react-components

👉 @frontend_1

Совет по CSS 💡

Легко реализуйте плавную прокрутку, используя всего одну строку кода 🤩

👉 @frontend_1

Типы утилит TypeScript, которые необходимо знать

https://www.builder.io/blog/utility-types

👉 @frontend_1

Совет по Javascript 💡

Возможно, вы не знаете об этом лучшем и надежном способе глубокого клонирования объектов JavaScript 🤩

👉 @frontend_1

3 вещи, о которых вы даже не подозревали, что они возможны только с помощью CSS

CSS (Cascading Style Sheets - каскадные таблицы стилей) - это как эстетика для HTML, используемого для структурирования веб-документа. Независимо от того, являетесь ли вы фронтенд-разработчиком, разработчиком полного стека или начинающим веб-дизайнером, использование таблиц стилей CSS - это то, что вы обязательно должны уметь делать!

Я буду расширять ваши горизонты, рассказывая о безграничных возможностях, которые вы можете сделать с помощью CSS, о том, что, как вы думали, можно сделать только с помощью кода.

Для того чтобы освоить некоторые из этих приемов, вы должны хорошо знать теги HTML. Вы также должны знать CSS, flexbox и CSS Grid (особенно border, margin и padding).

Гибкая модель компоновки (flexbox) предназначена для одномерного содержимого, и она отлично справляется с задачей размещения множества элементов разного размера и возврата наилучшего варианта компоновки.

https://blog.openreplay.com/three-things-you-never-thought-were-possible-with-just-css/

👉 @frontend_1

Изучите свойство преобразования CSS

Анимированное руководство упрощает изучение CSS.

👉 @frontend_1

Шпаргалка по CSS 🔥

7 способов скрыть элемент с помощью CSS 🤩

👉 @frontend_1

15 убийственных 🗡 приемов JS, о которых вы, вероятно, никогда не слышали 🔈🔥

Вот двадцать коротких и мощных приемов JavaScript, которые позволят максимально повысить производительность и минимизировать боль.

https://dev.to/ironcladdev/15-killer-js-techniques-youve-probably-never-heard-of-1lgp

👉 @frontend_1