🔵 Сделать ошибки TypeScript более красивыми и человекочитаемыми в VSCode с помощью Pretty TypeScript Errors.🎀

https://github.com/yoavbls/pretty-ts-errors

👉 @frontend_1

Пример из практики: Портфолио Анатолия Туврона

Один из лучших советов, который я могу дать любому разработчику, чтобы не устать от работы над своим портфолио, - это работать как можно быстрее. Если вы знаете, что легко устаете от проекта, я настоятельно рекомендую делать его, когда у вас есть время, а затем торопиться, как сумасшедший. Это относится и к кодированию, и к дизайну.

Вдохновляйтесь сайтами, которые вам нравятся, подбирайте цвета, которые соответствуют вашему настроению, шрифты, которые вам нравятся, используйте свой любимый инструмент дизайна и не перемудрите.

https://tympanus.net/codrops/2022/01/14/case-study-anatole-touvrons-portfolio/

👉 @frontend_1

Реализуйте операции над множествами в JavaScript с помощью этой шпаргалки 🚀

👉 @frontend_1

CSS Blend Modes

Руководство с множеством интерактивных примеров работы с причудливыми эффектами режима смешивания CSS.

https://garden.bradwoods.io/notes/css/blend-modes

👉 @frontend_1

Совет по CSS 💡

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

👉 @frontend_1

CSS-функции min(), max() и clamp()

Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности использования этих восхитительных функций, может понадобиться научиться думать по-новому.

https://ishadeed.com/article/use-cases-css-comparison-functions/

👉 @frontend_1

Совет по использованию инструментов Chrome Dev Tools 💡

Возможно, вы не знаете об этом приеме для быстрого использования предыдущего результата консольного выражения ✨.

👉 @frontend_1

Полный Full Stack курс ReactJS + NodeJS для начинающих за 4 часа! (MongoDB, Express, React, NodeJS)

00:00:00 Бэкенд (начало)
00:00:28 Теория по бэкенду
00:08:26 Начало разработки бэкенда
00:10:25 Установка библиотеки Express
00:10:57 Подключаем модульный подход для NodeJS (import, export, es6 и т.п.)
00:12:15 Начинаем разработку приложения на Express
00:19:11 Делаем HTTP-запросы на приложение через Insomnia
00:20:05 Создаем тестовую авторизацию
00:23:26 Подключаем JSON Web Token (JWT)
00:27:08 Делаем регистрацию + подключаем базу данных MongoDB
00:31:18 Создаем модель UserModel
00:36:07 Устанавливаем Express Validator и подключаем в проект
00:44:38 Создаем пользователя в БД
00:45:45 Шифруем пароль с помощью BCrypt
00:48:45 Подключаемся к БД через программу MongoDB Compass
00:51:47 Обрабатываем ошибки
00:57:17 Скрываем пароль юзера из ответа
00:58:35 Делаем реальную авторизацию
01:04:53 Делаем роут на получение информации о профиле
01:05:52 Создаем middleware (функцию посредник) - checkAuth.js
01:16:47 Делаем небольшой рефакторинг index.js
01:19:52 Создаем функционал для статей (CRUD)
01:50:18 Делаем загрузку картинок на сервер (Multer)
01:56:10 Возвращаем статические файлы (загруженные картинки)
01:57:54 Создаем middleware - handleValidationErrors.js
02:01:06 Рефакторим итоговый код бэкенда

02:05:09 Фронтенд
02:06:22 Изучаем структуру фронтенд проекта
02:09:16 Подключаем React Router
02:13:34 Подключаем Redux Toolkit
02:15:26 Создаем slice для статей (posts)
02:19:20 Настраиваем Axios
02:21:13 Исправляем ошибку CORS
02:23:23 Создаем асинхронный action в Redux Toolkit
02:25:32 Сохраняем в стейт статус запроса и сами статьи
02:32:58 Вытаскиваем тэги из бэкенда
02:36:28 Делаем вывод полной записи
02:44:01 Создаем функционал для авторизации
03:00:10 Проверяем авторизован пользователь или нет
03:06:00 Сохранять токен в LocalStorage, чтобы не выкидывало из аккаунта
03:16:55 Делаем форму регистрации
03:24:38 Разрешаем удалять статью только автору
03:27:44 Форма создания статьи + Simple Editor
03:34:24 Загрузка изображения на сервер
03:43:04 Отправка статьи на бэкенд
03:51:43 Рендерим статьи с помощью React Markdown
03:54:10 Удаление статьи
04:01:55 Редактирование статьи
04:09:49 Что сказала кукуруза? (итого)
04:10:25 Домашние задания для тебя
04:13:02 Деплой блога на Heroku + Vercel
04:14:24 Heroku
04:17:56 Vercel
04:23:45 Конец

https://www.youtube.com/watch?v=GQ_pTmcXNrQ

👉 @frontend_1