Вопрос с собеседования:
❓ Что такое DOM?
Объектная Модель Документа (DOM) является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.
DOM (Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
DOM (Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
❤16💅2
CSS Diner 🍽️
Для тренировки селекторов CSS идеален CSS Diner! Игра помогает разобраться в основах селекторов и понять, как выбирать элементы в DOM.
👀 Посмотреть или поиграть
#css
Для тренировки селекторов CSS идеален CSS Diner! Игра помогает разобраться в основах селекторов и понять, как выбирать элементы в DOM.
#css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤1
CodeRoll | Frontend
Вопрос с собеседования: ❓ Что такое DOM? Объектная Модель Документа (DOM) является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может…
Вопрос с собеседования:
❓ Что такое Virtual DOM? Как он работает?
Virtual DOM - это абстракция HTML DOM, которая выборочно отображает поддеревья узлов на основе изменений состояния. Он обеспечивает минимальное количество манипуляций с DOM, чтобы поддерживать ваши компоненты в актуальном состоянии.
Подробнее по теме: раз , два , три
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Подробнее по теме:
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6💅2👍1
Вопрос с собеседования:
❓ Как можно оптимизировать загрузку внешних ресурсов на странице?
— Уменьшите количество HTTP-запросов
— Используйте поддомены для параллельного скачивания
— Используйте кэш браузера
— Используйте CDN для загрузки популярных JavaScript библиотек
— Используйте Gzip-сжатие
Почитать подробнее
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
— Используйте поддомены для параллельного скачивания
— Используйте кэш браузера
— Используйте CDN для загрузки популярных JavaScript библиотек
— Используйте Gzip-сжатие
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
💅4❤3
Продвинутые концепции языка JavaScript и ООП [2023]
Этот продвинутый курс по JavaScript охватывает ООП, асинхронность, Event Loop, модульность, структуры данных и сборку. Он требует базовых знаний JS, HTML и CSS.
👀 Глянуть курс
#js
Этот продвинутый курс по JavaScript охватывает ООП, асинхронность, Event Loop, модульность, структуры данных и сборку. Он требует базовых знаний JS, HTML и CSS.
#js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
Вопрос с собеседования:
❓ Что такое canvas в HTML 5?
Это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации. Изображения в правой части статьи являются примерами использования , примеры их создания приводятся в этой статье.
Статья
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#html
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#html
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7💅5
Чистый код: фундаментальное руководство по JavaScript
Статья о принципах чистого кода с 10 примерами кода JS и TS, которые иллюстрируют принципы
👀 Посмотреть, почитать
#js
Статья о принципах чистого кода с 10 примерами кода JS и TS, которые иллюстрируют принципы
#js
Please open Telegram to view this post
VIEW IN TELEGRAM
Вопрос с собеседования:
❓ Что такое HTTPS?
HTTPS (HyperText Transfer Protocol Secure) — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности. Данные в протоколе HTTPS передаются поверх криптографических протоколов SSL или TLS. В отличие от HTTP с TCP-портом 80, для HTTPS по умолчанию используется TCP-порт 443
Почитать подробнее
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8💅2
6 инструментов, которые облегчают работу веб-разработчику
BundlePhobia
Быстро оценивайте размер npm-пакетов, прежде чем добавлять их в проект. Поможет избежать перегрузки приложения лишними зависимостями и держать его быстрым.
👉 https://bundlephobia.com
Polypane
Браузер для веб-разработчиков с поддержкой всех экранов и устройств в одном окне. Отлично подходит для тестирования адаптивности и доступности.
👉 https://polypane.app
CSS Grid Generator
Легкий способ создать сложные макеты на CSS Grid за пару минут. Просто укажите нужное количество строк и столбцов — и код готов!
👉 https://cssgrid-generator.netlify.app
CodeSandbox
Онлайн-редактор для быстрого прототипирования на React, Vue, Angular и других фреймворках. Удобно для тестирования компонентов и мелких проектов.
👉 https://codesandbox.io
Sizzy
Браузер, заточенный под тестирование на множестве устройств одновременно. Идеален для кроссбраузерной проверки, поддерживает отладку и сразу показывает, как страница выглядит на разных экранах.
👉 https://sizzy.co
Can I Use
Быстро проверяйте поддержку фич HTML, CSS и JavaScript в разных браузерах. Прекрасный способ убедиться, что ваш код работает везде.
👉 https://caniuse.com
Каждый из этих инструментов экономит время и помогает создавать более качественные и производительные веб-приложения👨💻
#web
BundlePhobia
Быстро оценивайте размер npm-пакетов, прежде чем добавлять их в проект. Поможет избежать перегрузки приложения лишними зависимостями и держать его быстрым.
👉 https://bundlephobia.com
Polypane
Браузер для веб-разработчиков с поддержкой всех экранов и устройств в одном окне. Отлично подходит для тестирования адаптивности и доступности.
👉 https://polypane.app
CSS Grid Generator
Легкий способ создать сложные макеты на CSS Grid за пару минут. Просто укажите нужное количество строк и столбцов — и код готов!
👉 https://cssgrid-generator.netlify.app
CodeSandbox
Онлайн-редактор для быстрого прототипирования на React, Vue, Angular и других фреймворках. Удобно для тестирования компонентов и мелких проектов.
👉 https://codesandbox.io
Sizzy
Браузер, заточенный под тестирование на множестве устройств одновременно. Идеален для кроссбраузерной проверки, поддерживает отладку и сразу показывает, как страница выглядит на разных экранах.
👉 https://sizzy.co
Can I Use
Быстро проверяйте поддержку фич HTML, CSS и JavaScript в разных браузерах. Прекрасный способ убедиться, что ваш код работает везде.
👉 https://caniuse.com
Каждый из этих инструментов экономит время и помогает создавать более качественные и производительные веб-приложения👨💻
#web
👍4🔥4❤1
Вопрос с собеседования:
❓ Каким способом, возможно вложить js-объект в localstorage?
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
localStorage.setItem(‘Object’, JSON.stringify(Object))
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
💅9❤8
Вопрос с собеседования:
❓ Расскажите про тег keygen
Используется для генерации пары ключей — закрытого и открытого. Когда форма отправляется на сервер, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передается вместе с формой. Сами ключи необходимы для шифрования и расшифровки данных, создания и проверки цифровой подписи.
Подробнее — раз , два
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Подробнее —
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
💅6👍2😁2❤1
Браузер для фронтенд-разработчиков
Polypane позволяет одновременно просматривать сайт на разных экранах, тестировать доступность и контрастность, синхронизировать скроллинг и клики между всеми экранами, поддерживает hot-reload для фреймворков вроде React и Vue, а также предоставляет данные по SEO и производительности.
👀 Потыкать браузер
#web
Polypane позволяет одновременно просматривать сайт на разных экранах, тестировать доступность и контрастность, синхронизировать скроллинг и клики между всеми экранами, поддерживает hot-reload для фреймворков вроде React и Vue, а также предоставляет данные по SEO и производительности.
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👍1
Вопрос с собеседования:
❓ Что такое архитектурный паттерн MVP?
Данный подход позволяет создавать абстракцию представления. Для этого необходимо выделить интерфейс представления с определенным набором свойств и методов. Презентер, в свою очередь, получает ссылку на реализацию интерфейса, подписывается на события представления и по запросу изменяет модель.
Признаки презентера:
Двухсторонняя коммуникация с представлением;
Представление взаимодействует напрямую с презентером, путем вызова соответствующих функций или событий экземпляра презентера;
Презентер взаимодействует с View путем использования специального интерфейса, реализованного представлением;
Один экземпляр презентера связан с одним отображением.
Подробнее — раз , два , три , четыре
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Признаки презентера:
Двухсторонняя коммуникация с представлением;
Представление взаимодействует напрямую с презентером, путем вызова соответствующих функций или событий экземпляра презентера;
Презентер взаимодействует с View путем использования специального интерфейса, реализованного представлением;
Один экземпляр презентера связан с одним отображением.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
💅7❤2
👨💻 Tabler Icons — легковесные иконки для ваших проектов
Набор из более чем 4300 современных SVG-иконок с минималистичным дизайном. Они быстро загружаются, легко настраиваются по размеру, цвету и толщине линий, что делает их отличным выбором для использования в React, Vue и других фреймворках. Набор полностью бесплатный и подходит для коммерческих проектов. Благодаря Tabler Icons интерфейс становится более профессиональным, а интеграция занимает всего несколько минут.
👀 Посмотреть иконки
#web
Набор из более чем 4300 современных SVG-иконок с минималистичным дизайном. Они быстро загружаются, легко настраиваются по размеру, цвету и толщине линий, что делает их отличным выбором для использования в React, Vue и других фреймворках. Набор полностью бесплатный и подходит для коммерческих проектов. Благодаря Tabler Icons интерфейс становится более профессиональным, а интеграция занимает всего несколько минут.
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤3
date-fns — удобная JS-библиотека для работы с датами
Легковесная библиотека для работы с датами и временем в JavaScript. Она позволяет обрабатывать даты без лишних зависимостей и сложностей, как в других библиотеках (например, Moment.js).
В чём удобство библиотеки:
✅ Она легкая — модульная структура: импортируешь только нужные функции.
✅ Современная — работает с нативными объектами Date.
✅ Мощная — более 200 функций для форматирования, парсинга, вычислений, локализации и других операций с датами.
✅ Поддержка таймзон — через дополнение date-fns-tz.
Подойдёт, когда нужно быстро работать с датами и важна производительность и модульность
👀 Посмотреть поближе
#js
Легковесная библиотека для работы с датами и временем в JavaScript. Она позволяет обрабатывать даты без лишних зависимостей и сложностей, как в других библиотеках (например, Moment.js).
В чём удобство библиотеки:
Подойдёт, когда нужно быстро работать с датами и важна производительность и модульность
#js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1
Вопрос с собеседования:
❓ Что такое инкапсуляция?
Инкапсуляция - это механизм, который объединяет данные и методы, манипулирующие этими данными, и защищает и то и другое от внешнего вмешательства или неправильного использования. Когда методы и данные объединяются таким способом, создается объект.
Почитать подробнее на Хабре
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9💅5
Hero Patterns
Онлайн-коллекция готовых к использованию SVG-фонов, которые легко интегрировать в веб-проекты. Можно быстро находить и использовать стильные и легкие фоны в формате SVG и настраивать их под конкретные проекты
👀 Посмотреть поближе
#front
Онлайн-коллекция готовых к использованию SVG-фонов, которые легко интегрировать в веб-проекты. Можно быстро находить и использовать стильные и легкие фоны в формате SVG и настраивать их под конкретные проекты
#front
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2
Оптимизация изображений 👀
Изображения могут значительно замедлять загрузку вашего сайта. Вот несколько инструментов, которые помогут оптимизировать их и улучшить производительность:
🛠 Инструменты:
TinyPNG https://tinypng.com
Сжимает PNG и JPEG без заметной потери качества.
Squoosh https://https://squoosh.app/
От Google, позволяет настроить степень сжатия и получить максимальную гибкость.
ImageOptim https://imageoptim.com/mac
Для пользователей macOS — оптимизирует изображения прямо на устройстве.
Avif.io https://avif.io
Конвертация изображений в современный формат AVIF с минимальным весом.
📌 Советы:
#инструменты
Изображения могут значительно замедлять загрузку вашего сайта. Вот несколько инструментов, которые помогут оптимизировать их и улучшить производительность:
🛠 Инструменты:
TinyPNG https://tinypng.com
Сжимает PNG и JPEG без заметной потери качества.
Squoosh https://https://squoosh.app/
От Google, позволяет настроить степень сжатия и получить максимальную гибкость.
ImageOptim https://imageoptim.com/mac
Для пользователей macOS — оптимизирует изображения прямо на устройстве.
Avif.io https://avif.io
Конвертация изображений в современный формат AVIF с минимальным весом.
📌 Советы:
Используйте векторные изображения (SVG) для иконок и простых графиков.
Настраивайте атрибуты width и height, чтобы избежать смещения при загрузке.
Загружайте изображения в разных разрешениях и используйте srcset для адаптивности.
#инструменты
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥2
🎨 Дизайн-системы: Создание масштабируемых UI-компонентов
🎨 Дизайн-система — это набор повторно используемых компонентов и стандартов, которые помогают поддерживать единообразие и качество пользовательского интерфейса на протяжении всего проекта.
Преимущества использования дизайн-систем:
1) Консистентность
Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку.
2) Масштабируемость
Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты.
3)Ускорение разработки
Готовые компоненты и шаблоны сокращают время разработки и тестирования.
Как создать дизайн-систему?
Определите основные элементы
Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.).
Создайте библиотеку компонентов
Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов.
Интегрируйте в проект
Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость.
💡 Полезные ресурсы:
Storybook Documentation
Atomic Design by Brad Frost
Создание дизайн-системы позволяет обеспечить качество и масштабируемость интерфейсов на всех уровнях разработки. Это важный шаг для профессиональной работы над крупными проектами.
🎨 Дизайн-система — это набор повторно используемых компонентов и стандартов, которые помогают поддерживать единообразие и качество пользовательского интерфейса на протяжении всего проекта.
Преимущества использования дизайн-систем:
1) Консистентность
Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку.
2) Масштабируемость
Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты.
3)Ускорение разработки
Готовые компоненты и шаблоны сокращают время разработки и тестирования.
Как создать дизайн-систему?
Определите основные элементы
Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.).
Создайте библиотеку компонентов
Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов.
Интегрируйте в проект
Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость.
💡 Полезные ресурсы:
Storybook Documentation
Atomic Design by Brad Frost
Создание дизайн-системы позволяет обеспечить качество и масштабируемость интерфейсов на всех уровнях разработки. Это важный шаг для профессиональной работы над крупными проектами.
Storybook
Get started with Storybook | Storybook docs
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.
❤2👍2
Библиотека, которая добавит классные проф анимации в проект 🚀
Motion (она же бывшая Framer Motion) — мощная библиотека для создания анимаций в React и других экосистемах.
Что делает её уникальной:
👀 Посмотреть-потыкать
#инструменты
Motion (она же бывшая Framer Motion) — мощная библиотека для создания анимаций в React и других экосистемах.
Что делает её уникальной:
— Простота использования: можно добавить сложные анимации в пару строк кода.
— Гибкость: поддерживает кастомизацию для любых сценариев.
— Производительность: создана для плавной работы даже в сложных интерфейсах.
— Недавно Framer Motion стал независимым проектом под названием Motion и теперь доступен не только для React, но и для других платформ, включая Vanilla JS и Vue.
#инструменты
Please open Telegram to view this post
VIEW IN TELEGRAM