Чеботаев Роман. Frontend Blog
Чеботаев Роман. Frontend Blog
  • 35
  • 111 343
Emmet - как писать HTML и CSS быстрее
➡️ Telegram t.me/frontend_blog_tg
➡️ Доп. материалы и сообщество boosty.to/romanchebotaev
➡️ Менторинг frontend-blog.ru/services/mentoring/
*О видео*
Шпаргалка: docs.emmet.io/cheat-sheet/
Сайт: emmet.io/
80% сценария и текста для видео написано ChatGPT
0:00 Вступление
0:57 HTML
4:33 CSS
5:49 Конец
Что такое Emmet
Плагин Emmet, также известный как Zen Coding, является инструментом для ускорения и упрощения процесса написания HTML и CSS кода. Он был разработан с целью повысить производительность веб-разработчиков и упростить создание макетов.
Emmet использует специальный синтаксис, который позволяет разрабатывать HTML и CSS код путем написания коротких аббревиатур и сокращений. Например, чтобы создать простую HTML таблицу с тремя строками и двумя столбцами, вам необходимо будет использовать следующую аббревиатуру: "table угловая скобка tr3 угловая скобка td2".
Кроме того, Emmet предоставляет возможность автоматического расширения аббревиатур в полноценный код. Например, если вы введете "ul угловая скобка li.item$*5", Emmet автоматически превратит эту аббревиатуру в HTML код с пятью элементами списка, пронумерованными от "item1" до "item5".
Emmet также поддерживает динамические аббревиатуры, которые могут быть использованы для создания разнообразного контента, такого как текст, изображения, ссылки и т.д. Например, аббревиатура "p угловая скобка .lorem10" создаст абзац с 10 словами из текста Lorem Ipsum.
Плагин Emmet широко поддерживается во многих популярных редакторах кода, таких как Visual Studio Code, Sublime Text, Atom, PhpStorm и других. Он является мощным инструментом для увеличения производительности и упрощения работы веб-разработчиков, позволяя им быстро и эффективно создавать различные элементы интерфейса и разметку веб-страниц.
มุมมอง: 561

วีดีโอ

React Developer Tools - как пользоваться Profiler
มุมมอง 4.6Kปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* 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: th-cam.com/video/...
Gatsby.js - генератор статичных сайтов (SSG)
มุมมอง 491ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* 0:00 О Gatsby.js 1:16 Установка 3:36 Файловая структура проекта 7:07 GraphQL 8:38 Создание записи 9:43 Залив на GitHub 11:29 Деплой на Netlify 13:20 Как добавить свой домен 14:37 Подписывайтесь на канал В видео рассказываю как создать блог с помощ...
Тёмная тема для Web страницы. HTML, CSS и JS
มุมมอง 726ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Видео урок как HTML, CSS и JS создать тёмную тему для сайта или страницы. Переключение с помощью кнопок и инциализация из статуса значения системы.
Module Federation. Микрофронтенды с помощью Webpack
มุมมอง 11Kปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Module Federation. Микрофронтенды с помощью Webpack Module Federation - это подход к разработке веб-приложений в среде JavaScript, который позволяет динамически подгружать модули (код) из других приложений в рамках одного браузера. Этот подход поз...
Base64 в JavaScript. Функции Btoa и Atob
มุมมอง 537ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* В видео рассказывается как кодировать и раскодировать строку в формат Base64 в JavaScript стандартными средствами языка. `atob` и `btoa` - это две функции, предоставляемые JavaScript, которые позволяют кодировать и декодировать строки с использова...
Webpack Bundle Analyzer. Анализ размера зависимостей в проекте
มุมมอง 1.6Kปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* www.npmjs.com/package/webpack-bundle-analyzer Webpack Bundle Analyzer - это инструмент для анализа и визуализации размера бандлов, созданных с помощью Webpack. Он позволяет разработчикам легко определить, какие модули и зависимости составляют боль...
Анимация SlideIn/SlideOut в React. Метод OnTransitionEnd
มุมมอง 538ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Код github.com/chebotaevroman/react_animation_slide_in_out Анимация Fade In/Out th-cam.com/video/lXw0dXJnMTg/w-d-xo.html Видео про SlideIn, SlideOut (SlideIn, SlideUp) анимацию в React, как её сделать и пример кода на гитхабе. Анимация делается с ...
Плагин для Pixel Perfect верстки
มุมมอง 596ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Макет из видео - freedesignresources.net/modular-ui-dashboard/ Google Chrome плагин для Pixel Perfect верстки. Как установить расширение в Google Chrome, включить и использовать для того что бы верстать идеально до пикселя (Pixel Perfect). Простой...
Оператор is в TypeScript. Предикаты типов. Type Guard
มุมมอง 799ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Видео про ключевое слово is в TypeScript. С помощью него можно выводить типы (или сужать), делать проверки на тип и легче работать с тайпскриптом. Так же ненужных конструкций с жестким указанием типов станет меньше, а код чище и проще. С помощью к...
Копирование объектов в JavaScript. StructuredClone. Производительность
มุมมอง 604ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Материалы и Статьи 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...
color: currentColor - Как работает в CSS?
มุมมอง 2582 ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Как применять значение currentColor в CSS. Пример с Hover анимацией svg иконки в кнопке. Как можно наследовать менять цвет в CSS разными способами.
Анимации FadeIn, FadeOut в React и onAnimationEnd
มุมมอง 6662 ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Код на гитхабе: github.com/chebotaevroman/react_animations_onAnimationEnd Тайминги 0:00 Неправильный пример с setTimeout 4:55 onAnimationEnd - немного лучше 6:26 onAnimationEnd - финал Как сделать анимации FadeIn и FadeOut в React с применением со...
Web Worker в React, Typescript, Webpack 5
มุมมอง 3K2 ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Код: github.com/chebotaevroman/web-worker-webpack-react-ts Видео про Web Worker в JS: th-cam.com/video/7dHP6PpQ4os/w-d-xo.html Как применять Web Worker в React с использованием Typescript, Webpack 5. Видео как исполнять код в JS и React асинхронно...
React Hook Form - быстрый гайд. Работа с массивами в форме
มุมมอง 1.1K2 ปีที่แล้ว
➡️ Telegram t.me/frontend_blog_tg ➡️ Доп. материалы и сообщество boosty.to/romanchebotaev ➡️ Менторинг frontend-blog.ru/services/mentoring/ *О видео* Метки 0:00 Создание проекта create-react-app 2:58 Обычная форма 7:58 Примеры из мануала 9:37 Массивы Гайд по библиотеке работы с формами - React Hook Form. Пример как работать с массивами, создавать и удалять элементы. Уроки по обучению Frontend'у...
URL параметры в Axios
มุมมอง 7412 ปีที่แล้ว
URL параметры в Axios
Переменные окружения в React. Environment Variables
มุมมอง 3.3K2 ปีที่แล้ว
Переменные окружения в React. Environment Variables
Как улучшить консоль iTerm2 в MacOs
มุมมอง 3.3K2 ปีที่แล้ว
Как улучшить консоль iTerm2 в MacOs
The final. Authorization on JWT tokens. Lesson 5: Refresh
มุมมอง 8K2 ปีที่แล้ว
The final. Authorization on JWT tokens. Lesson 5: Refresh
Authorization on JWT tokens. Lesson 4: Profile
มุมมอง 2.8K2 ปีที่แล้ว
Authorization on JWT tokens. Lesson 4: Profile
Authorization on JWT tokens. Lesson 3: Logout
มุมมอง 4.7K2 ปีที่แล้ว
Authorization on JWT tokens. Lesson 3: Logout
Authorization on JWT tokens. Lesson 2: Login
มุมมอง 14K2 ปีที่แล้ว
Authorization on JWT tokens. Lesson 2: Login
Authorization on JWT tokens. Lesson 1: UI on React
มุมมอง 14K2 ปีที่แล้ว
Authorization on JWT tokens. Lesson 1: UI on React
Authorization on JWT tokens. Lesson 0: Brief theory
มุมมอง 10K2 ปีที่แล้ว
Authorization on JWT tokens. Lesson 0: Brief theory
Тестирование в JavaScript. TDD. Jest. Простой пример
มุมมอง 7922 ปีที่แล้ว
Тестирование в JavaScript. TDD. Jest. Простой пример
Gap для Flex контейнеров. Пора пользоваться!
มุมมอง 5922 ปีที่แล้ว
Gap для Flex контейнеров. Пора пользоваться!
10 Вещей, которыми я пользуюсь в GitKraken. Сравнение с WebStorm
มุมมอง 1.2K2 ปีที่แล้ว
10 Вещей, которыми я пользуюсь в GitKraken. Сравнение с WebStorm
Git Reflog - как восстановить потерянные данные
มุมมอง 8552 ปีที่แล้ว
Git Reflog - как восстановить потерянные данные
F.lux - как программисту беречь зрение и легче засыпать
มุมมอง 1.8K2 ปีที่แล้ว
F.lux - как программисту беречь зрение и легче засыпать
Web Workers в JavaScript. Зачем нужены Веб Воркеры
มุมมอง 3.6K2 ปีที่แล้ว
Web Workers в JavaScript. Зачем нужены Веб Воркеры