Реализуйте операции над множествами в 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

Интерактивное руководство по рендерингу в React

В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.

Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?

Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.

https://ui.dev/why-react-renders

👉 @frontend_1

rem vs em - все, что нужно знать

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

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

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

https://dev.to/refine/rem-vs-em-everything-you-need-to-know-5342

👉 @frontend_1

Шпаргалка по HTML, CSS и JavaScript

Здесь вы можете найти примеры кода HTML, CSS и JavaScript. Каждый пример имеет пояснение. Подобная шпаргалка.

https://htmlcheatsheet.com/js/

👉 @frontend_1

Theme toggles

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

https://github.com/AlfieJones/theme-toggles

👉 @frontend_1

Javascript: базовые вопросы и понятия для самых маленьких

Javascript ― язык весьма оригинальный. Его можно любить, ненавидеть и даже бояться, но равнодушным он вас вряд ли оставит. Не знать или не понимать, с чем ты работаешь ― самая частая ошибка, допускаемая современными фронтенд‑разработчиками. Вам бы понравилось, если бы дантист, к которому вы пришли, не понимал, какой он инструмент использует и какие у него особенности работы? Очевидно, что нет. И рано или поздно, если вы действительно хотите стать профессионалами, вы разберётесь во всём, но как сделать так, чтоб это случилось раньше?

В этой статье в блоге ЛАНИТ хотелось бы показать, что о сложных вещах можно и нужно говорить просто.

https://habr.com/ru/companies/lanit/articles/718130/

👉 @frontend_1

JavaScript для самых маленьких. Часть 2

Не так давно в блоге ЛАНИТ на Хабре мы представили вашему вниманию часть нашей методички по JavaScript. Сегодня же предлагаем ознакомиться с ещё одним блоком, который затрагивает самые базовые и необходимые понятия для тех, кто только начинает свой путь в мире JavaScript.

https://habr.com/ru/companies/lanit/articles/733064/

👉 @frontend_1

50+ ChatGPT промтов для веб-разработчиков

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

В этой статье мы предоставим вам более 50 подсказок и стратегий, которые помогут вам ускорить рабочий процесс веб-разработки с помощью ChatGPT. Здесь вы найдете все, что нужно, чтобы максимально эффективно использовать ИИ в качестве веб-разработчика: от изучения концепций в качестве новичка до подготовки к собеседованиям.

https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt

👉 @frontend_1

Совет по Javascript 💡

Возможно, вы не знали, что мы можем легко добавить пользовательские проверки в форме HTML 🤩

👉 @frontend_1