- Видео 35
- Просмотров 101 253
Чеботаев Роман. Frontend Blog
Россия
Добавлен 3 янв 2022
Канал о Frontend разработке.
Рассказываю про интересные вещи в программировании, с которыми столкнулся в процессе работы.
Задонатить:
Boosty: boosty.to/romanchebotaev
Соц. сети:
Telegram: t.me/frontend_blog_tg
Vk: frontend.blog
Сайт блог:
frontend-blog.ru/
Почта
roman23.fe@gmail.com
Рассказываю про интересные вещи в программировании, с которыми столкнулся в процессе работы.
Задонатить:
Boosty: boosty.to/romanchebotaev
Соц. сети:
Telegram: t.me/frontend_blog_tg
Vk: frontend.blog
Сайт блог:
frontend-blog.ru/
Почта
roman23.fe@gmail.com
Emmet - как писать HTML и CSS быстрее
Шпаргалка: docs.emmet.io/cheat-sheet/
Сайт: emmet.io/
➡️ Telegram t.me/frontend_blog_tg
➡️ VK frontend.blog
➡️ Boosty boosty.to/romanchebotaev
80% сценария и текста для видео написано ChatGPT
0:00 Вступление
0:57 HTML
4:33 CSS
5:49 Конец
Что такое Emmet
Плагин Emmet, также известный как Zen Coding, является инструментом для ускорения и упрощения процесса написания HTML и CSS кода. Он был разработан с целью повысить производительность веб-разработчиков и упростить создание макетов.
Emmet использует специальный синтаксис, который позволяет разрабатывать HTML и CSS код путем написания коротких аббревиатур и сокращений. Например, чтобы создать простую HTML таблицу с тремя строками и двумя столбцам...
Сайт: emmet.io/
➡️ Telegram t.me/frontend_blog_tg
➡️ VK frontend.blog
➡️ Boosty boosty.to/romanchebotaev
80% сценария и текста для видео написано ChatGPT
0:00 Вступление
0:57 HTML
4:33 CSS
5:49 Конец
Что такое Emmet
Плагин Emmet, также известный как Zen Coding, является инструментом для ускорения и упрощения процесса написания HTML и CSS кода. Он был разработан с целью повысить производительность веб-разработчиков и упростить создание макетов.
Emmet использует специальный синтаксис, который позволяет разрабатывать HTML и CSS код путем написания коротких аббревиатур и сокращений. Например, чтобы создать простую HTML таблицу с тремя строками и двумя столбцам...
Просмотров: 484
Видео
React Developer Tools - как пользоваться Profiler
Просмотров 3,6 тыс.10 месяцев назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev 0:00 Начальный код 1:16 Замер производительности в React DevTools 3:15 Оптимизация кода 6:42 Повторный замер производительности Музыка Track: Feel - Land of Fire [Audio Library Release] Music provided by Audio Library Plus Watch: ruclips.net/video/qAos_41O0lc/видео.html Free Download / Stream: alplus...
Gatsby.js - генератор статичных сайтов (SSG)
Просмотров 389Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev 0:00 О Gatsby.js 1:16 Установка 3:36 Файловая структура проекта 7:07 GraphQL 8:38 Создание записи 9:43 Залив на GitHub 11:29 Деплой на Netlify 13:20 Как добавить свой домен 14:37 Подписывайтесь на канал В видео рассказываю как создать блог с помощью фреймворка Gastby.js - генератора статичных сайтов ...
Тёмная тема для Web страницы. HTML, CSS и JS
Просмотров 661Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Видео урок как HTML, CSS и JS создать тёмную тему для сайта или страницы. Переключение с помощью кнопок и инциализация из статуса значения системы.
Module Federation. Микрофронтенды с помощью Webpack
Просмотров 9 тыс.Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Module Federation. Микрофронтенды с помощью Webpack Module Federation - это подход к разработке веб-приложений в среде JavaScript, который позволяет динамически подгружать модули (код) из других приложений в рамках одного браузера. Этот подход позволяет создавать масштабируемые и гибкие приложения, г...
Base64 в JavaScript. Функции Btoa и Atob
Просмотров 460Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev В видео рассказывается как кодировать и раскодировать строку в формат Base64 в JavaScript стандартными средствами языка. `atob` и `btoa` - это две функции, предоставляемые JavaScript, которые позволяют кодировать и декодировать строки с использованием кодировки Base64. Функция `btoa` используется для...
Webpack Bundle Analyzer. Анализ размера зависимостей в проекте
Просмотров 1,4 тыс.Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev www.npmjs.com/package/webpack-bundle-analyzer Webpack Bundle Analyzer - это инструмент для анализа и визуализации размера бандлов, созданных с помощью Webpack. Он позволяет разработчикам легко определить, какие модули и зависимости составляют большую часть бандла, и оптимизировать его размер. Webpack...
Анимация SlideIn/SlideOut в React. Метод OnTransitionEnd
Просмотров 462Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Код github.com/chebotaevroman/react_animation_slide_in_out Анимация Fade In/Out ruclips.net/video/lXw0dXJnMTg/видео.html Видео про SlideIn, SlideOut (SlideIn, SlideUp) анимацию в React, как её сделать и пример кода на гитхабе. Анимация делается с помощью метода OnTransitionEnd, который легко доступен...
Плагин для Pixel Perfect верстки
Просмотров 491Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Макет из видео - freedesignresources.net/modular-ui-dashboard/ Google Chrome плагин для Pixel Perfect верстки. Как установить расширение в Google Chrome, включить и использовать для того что бы верстать идеально до пикселя (Pixel Perfect). Простой и бесплатный способ, что бы упростить вёрстку макетов
Оператор is в TypeScript. Предикаты типов. Type Guard
Просмотров 714Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Видео про ключевое слово is в TypeScript. С помощью него можно выводить типы (или сужать), делать проверки на тип и легче работать с тайпскриптом. Так же ненужных конструкций с жестким указанием типов станет меньше, а код чище и проще. С помощью ключевого слова is можно реализовать паттерн guard для ...
Копирование объектов в JavaScript. StructuredClone. Производительность
Просмотров 568Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Материалы и Статьи caniuse.com/?search=structuredClone developer.mozilla.org/en-US/docs/Web/API/structuredClone web.dev/structured-clone/ 2ality.com/2022/01/structured-clone.html Видео про копирование объектов в JavaScript, 3 разных способа - JSON.parse/JSON.stringify, deepClone из Lodash и Пример но...
color: currentColor - Как работает в CSS?
Просмотров 237Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Как применять значение currentColor в CSS. Пример с Hover анимацией svg иконки в кнопке. Как можно наследовать менять цвет в CSS разными способами.
Анимации FadeIn, FadeOut в React и onAnimationEnd
Просмотров 593Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Код на гитхабе: github.com/chebotaevroman/react_animations_onAnimationEnd Тайминги 0:00 Неправильный пример с setTimeout 4:55 onAnimationEnd - немного лучше 6:26 onAnimationEnd - финал Как сделать анимации FadeIn и FadeOut в React с применением события элементов onAnimationEnd. Программируем лёгкую а...
Web Worker в React, Typescript, Webpack 5
Просмотров 2,8 тыс.Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Код: github.com/chebotaevroman/web-worker-webpack-react-ts Видео про Web Worker в JS: ruclips.net/video/7dHP6PpQ4os/видео.html Как применять Web Worker в React с использованием Typescript, Webpack 5. Видео как исполнять код в JS и React асинхронно в фоне браузера. Урок по Frontend и веб воркерам.
React Hook Form - быстрый гайд. Работа с массивами в форме
Просмотров 1,1 тыс.Год назад
➡️ Telegram t.me/frontend_blog_tg ➡️ VK frontend.blog ➡️ Boosty boosty.to/romanchebotaev Метки 0:00 Создание проекта create-react-app 2:58 Обычная форма 7:58 Примеры из мануала 9:37 Массивы Гайд по библиотеке работы с формами - React Hook Form. Пример как работать с массивами, создавать и удалять элементы. Уроки по обучению Frontend'у на этом канале.
Переменные окружения в React. Environment Variables
Просмотров 3,2 тыс.2 года назад
Переменные окружения в React. Environment Variables
Как улучшить консоль iTerm2 в MacOs
Просмотров 3,1 тыс.2 года назад
Как улучшить консоль iTerm2 в MacOs
The final. Authorization on JWT tokens. Lesson 5: Refresh
Просмотров 8 тыс.2 года назад
The final. Authorization on JWT tokens. Lesson 5: Refresh
Authorization on JWT tokens. Lesson 4: Profile
Просмотров 2,7 тыс.2 года назад
Authorization on JWT tokens. Lesson 4: Profile
Authorization on JWT tokens. Lesson 3: Logout
Просмотров 4,6 тыс.2 года назад
Authorization on JWT tokens. Lesson 3: Logout
Authorization on JWT tokens. Lesson 2: Login
Просмотров 13 тыс.2 года назад
Authorization on JWT tokens. Lesson 2: Login
Authorization on JWT tokens. Lesson 1: UI on React
Просмотров 13 тыс.2 года назад
Authorization on JWT tokens. Lesson 1: UI on React
Authorization on JWT tokens. Lesson 0: Brief theory
Просмотров 10 тыс.2 года назад
Authorization on JWT tokens. Lesson 0: Brief theory
Тестирование в JavaScript. TDD. Jest. Простой пример
Просмотров 7102 года назад
Тестирование в JavaScript. TDD. Jest. Простой пример
Gap для Flex контейнеров. Пора пользоваться!
Просмотров 5552 года назад
Gap для Flex контейнеров. Пора пользоваться!
10 Вещей, которыми я пользуюсь в GitKraken. Сравнение с WebStorm
Просмотров 1,1 тыс.2 года назад
10 Вещей, которыми я пользуюсь в GitKraken. Сравнение с WebStorm
Git Reflog - как восстановить потерянные данные
Просмотров 7602 года назад
Git Reflog - как восстановить потерянные данные
F.lux - как программисту беречь зрение и легче засыпать
Просмотров 1,5 тыс.2 года назад
F.lux - как программисту беречь зрение и легче засыпать
Web Workers в JavaScript. Зачем нужены Веб Воркеры
Просмотров 3 тыс.2 года назад
Web Workers в JavaScript. Зачем нужены Веб Воркеры
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
Канал в телеграме с полезным контентом ➡Telegram t.me/frontend_blog_tg
От душ! Очень понятно и интересно. Спасибо
я не понял, когда и где ты указал адрес для запросов?
Спасибо, было полезно
Благодарю за помощь😊
Что если воспользоваться делегированием событий?
всё классно, четко, лаконично. Один из лучших видосов на ютубе по данной теме. Хотелось бы увидеть продолжение на различных фреймворках и shared библиотек. Роман, планируется ли продолжение данной тематики?
Спасибо! Как раз такое искал, а то либо одни картинки со схемами, то видео на 1.5 часа. Успехов тебе и каналу
Спасибо корото четка и ясно !
я твой фанат, где мерч купить?
огонь
тягомотина баговая. ружно высоту задавать . Долбокурс
ну на самом деле информации по profiler очень мало, тема раскрыта процентов на 20% от силы.
Подскажите пожалуйста что нужно сделать чтобы перестало ругаться на то что функция describe не определена
хто 1 дезлайк поставил презнавайтесь
шикарные пояснения и в целом видео