This media is not supported in your browser
VIEW IN TELEGRAM
Пример из практики: Портфолио Анатолия Туврона
Один из лучших советов, который я могу дать любому разработчику, чтобы не устать от работы над своим портфолио, - это работать как можно быстрее. Если вы знаете, что легко устаете от проекта, я настоятельно рекомендую делать его, когда у вас есть время, а затем торопиться, как сумасшедший. Это относится и к кодированию, и к дизайну.
Вдохновляйтесь сайтами, которые вам нравятся, подбирайте цвета, которые соответствуют вашему настроению, шрифты, которые вам нравятся, используйте свой любимый инструмент дизайна и не перемудрите.
https://tympanus.net/codrops/2022/01/14/case-study-anatole-touvrons-portfolio/
👉 @frontend_1
Один из лучших советов, который я могу дать любому разработчику, чтобы не устать от работы над своим портфолио, - это работать как можно быстрее. Если вы знаете, что легко устаете от проекта, я настоятельно рекомендую делать его, когда у вас есть время, а затем торопиться, как сумасшедший. Это относится и к кодированию, и к дизайну.
Вдохновляйтесь сайтами, которые вам нравятся, подбирайте цвета, которые соответствуют вашему настроению, шрифты, которые вам нравятся, используйте свой любимый инструмент дизайна и не перемудрите.
https://tympanus.net/codrops/2022/01/14/case-study-anatole-touvrons-portfolio/
👉 @frontend_1
👍4❤1
CSS Blend Modes
Руководство с множеством интерактивных примеров работы с причудливыми эффектами режима смешивания CSS.
https://garden.bradwoods.io/notes/css/blend-modes
👉 @frontend_1
Руководство с множеством интерактивных примеров работы с причудливыми эффектами режима смешивания CSS.
https://garden.bradwoods.io/notes/css/blend-modes
👉 @frontend_1
🔥4👍2
Совет по CSS 💡
Возможно, вы не знаете, что мы можем легко регулировать пространство между элементом и его контуром 🤩.
👉 @frontend_1
Возможно, вы не знаете, что мы можем легко регулировать пространство между элементом и его контуром 🤩.
👉 @frontend_1
👍9
CSS-функции min(), max() и clamp()
Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности использования этих восхитительных функций, может понадобиться научиться думать по-новому.
https://ishadeed.com/article/use-cases-css-comparison-functions/
👉 @frontend_1
Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности использования этих восхитительных функций, может понадобиться научиться думать по-новому.
https://ishadeed.com/article/use-cases-css-comparison-functions/
👉 @frontend_1
👍5❤1
Совет по использованию инструментов Chrome Dev Tools 💡
Возможно, вы не знаете об этом приеме для быстрого использования предыдущего результата консольного выражения ✨.
👉 @frontend_1
Возможно, вы не знаете об этом приеме для быстрого использования предыдущего результата консольного выражения ✨.
👉 @frontend_1
👍4
Полный 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
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
YouTube
Полный Full Stack курс ReactJS + NodeJS для начинающих за 4 часа! (MongoDB, Express, React, NodeJS)
В этом видео ты научишься с нуля разрабатывать бэкенд на стэке MERN (MongoDB, Express, React, NodeJS) и подключать к фронтенду свой бэкенд. Также, к завершению урока ты научишься деплоить своё приложение на Heroku + Vercel.
Курс идеально подойдёт для новичков…
Курс идеально подойдёт для новичков…
👍11
Интерактивное руководство по рендерингу в React
В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.
Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?
Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.
https://ui.dev/why-react-renders
👉 @frontend_1
В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.
Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?
Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.
https://ui.dev/why-react-renders
👉 @frontend_1
👍5