Браузер для фронтенд-разработчиков
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
Что такое атрибут key? Для чего он нужен?
Key помогает React определять, какие элементы были изменены, добавлены или удалены. Key нужен для лучшего определения порядка элементов в списке.
Key всегда должен присваивается на верхнем уровне:
Правильно:
Неправильно (Приглядитесь к its a trap):
Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта.
Более подробно про key можете прочитать здесь
Key помогает React определять, какие элементы были изменены, добавлены или удалены. Key нужен для лучшего определения порядка элементов в списке.
Key всегда должен присваивается на верхнем уровне:
Правильно:
const howUseKey = () => {
const array = [1, 2, 3];
return (
<div>
{array.map((item) => (
<div key={item}>{item}</div>
))}
</div>
);
};
Неправильно (Приглядитесь к its a trap):
const howNotUseKey = () => {
const array = [1, 2, 3];
return (
<div>
{array.map((item) => (
<div className="its a trap">
<div key={item}>{item}</div>
</div>
))}
</div>
);
};
Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта.
Более подробно про key можете прочитать здесь
❤3👍3
Вопрос с собеседования:
❓ Что такое Secure ("безопасные") и HttpOnly cookies?
"Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг secure никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 and Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом secure.
Куки HTTPonly не доступны из JavaScript через свойства Document.cookie, и через XMLHttpRequest и Request API, что помогает избежать межсайтового скриптинга (XSS). Устанавливайте этот флаг для тех cookie, к которым не требуется обращаться через JavaScript. В частности, если куки используются только для поддержки сеанса, то в JavaScript они не нужны, так что в этом случае следует устанавливать флаг HttpOnly.
➡️ Подробнее
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Куки HTTPonly не доступны из JavaScript через свойства Document.cookie, и через XMLHttpRequest и Request API, что помогает избежать межсайтового скриптинга (XSS). Устанавливайте этот флаг для тех cookie, к которым не требуется обращаться через JavaScript. В частности, если куки используются только для поддержки сеанса, то в JavaScript они не нужны, так что в этом случае следует устанавливать флаг HttpOnly.
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
💅8❤6
Recharts: простая визуализация данных для React 👩💻
Recharts — библиотека, которая поможет добавить графики и диаграммы в ваш проект. Легко подключается, настраивается и отлично работает с React. Хотите показать тренды, сравнить показатели или сделать крутой аналитический дашборд? С этой библиотекой всё это можно сделать за пару строк кода. Выбирайте линейные графики, круговые диаграммы, гистограммы или что-то своё.
👀 Посмотреть библиотеку
#инструменты
Recharts — библиотека, которая поможет добавить графики и диаграммы в ваш проект. Легко подключается, настраивается и отлично работает с React. Хотите показать тренды, сравнить показатели или сделать крутой аналитический дашборд? С этой библиотекой всё это можно сделать за пару строк кода. Выбирайте линейные графики, круговые диаграммы, гистограммы или что-то своё.
#инструменты
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2
Тренируем регулярки на Regex101
На Regex101 вы сможете тестировать регулярные выражения в реальном времени, разбирать их структуру с подробными объяснениями каждой части, а также находить и исправлять ошибки благодаря встроенным подсказкам. Ресурс поддерживает синтаксисы для популярных языков программирования, таких как JavaScript, Python и PHP, и позволяет легко проверять ваши регулярки на примерах. Это идеальный инструмент как для новичков, так и для опытных разработчиков, желающих упростить работу с текстовыми шаблонами.
👀 Перейти к сервису
#тренажёр
На Regex101 вы сможете тестировать регулярные выражения в реальном времени, разбирать их структуру с подробными объяснениями каждой части, а также находить и исправлять ошибки благодаря встроенным подсказкам. Ресурс поддерживает синтаксисы для популярных языков программирования, таких как JavaScript, Python и PHP, и позволяет легко проверять ваши регулярки на примерах. Это идеальный инструмент как для новичков, так и для опытных разработчиков, желающих упростить работу с текстовыми шаблонами.
#тренажёр
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥3❤1
Вопрос с собеседования:
❓ В чем разница между HTML и XHTML?
— XHTML - это приложение XML, которое является довольно строгим языком с угловыми скобками.
— HTML - это приложение SGML, которое является гораздо менее строгим языком с угловой скобкой.
— (XML также является применением SGML.)
При написании кода XHTML придерживаются того же синтаксиса, который характерен для HTML. При этом разница между HTML и XHTML состоит в наборе некоторых обязательных правил.
Правила XHTML следующие.
// Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
// Значения любых атрибутов необходимо заключать в кавычки.
// Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
// Должна соблюдаться правильная вложенность тегов.
// Нельзя использовать сокращенные атрибуты тегов.
// Вместо атрибута name следует указывать id.
// Следует определять DTD (document type definition, описание типа документа) с помощью элемента DOCTYPE.
Подробнее с примерами: http://htmlbook.ru/xhtml/sintaksis-xhtml
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
— HTML - это приложение SGML, которое является гораздо менее строгим языком с угловой скобкой.
— (XML также является применением SGML.)
При написании кода XHTML придерживаются того же синтаксиса, который характерен для HTML. При этом разница между HTML и XHTML состоит в наборе некоторых обязательных правил.
Правила XHTML следующие.
// Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
// Значения любых атрибутов необходимо заключать в кавычки.
// Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
// Должна соблюдаться правильная вложенность тегов.
// Нельзя использовать сокращенные атрибуты тегов.
// Вместо атрибута name следует указывать id.
// Следует определять DTD (document type definition, описание типа документа) с помощью элемента DOCTYPE.
Подробнее с примерами:
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Please open Telegram to view this post
VIEW IN TELEGRAM
💅7❤2
Codepip
Сборник мини-игр для изучения веб-технологий: Flexbox, Grid, CSS-анимации и многое другое.
👀 Потыкать игры
#тренажёры
Сборник мини-игр для изучения веб-технологий: Flexbox, Grid, CSS-анимации и многое другое.
#тренажёры
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1
Вопрос с собеседования:
❓ Чем полезны data- атрибуты?
HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData().
Синтаксис HTML
Доступ в JavaScript
Доступ в CSS
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Синтаксис HTML
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>
Доступ в JavaScript
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Доступ в CSS
article::before {
content: attr(data-parent);
}
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
#web
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9💅4
Современный JavaScript. От новичка до профи [2024]
Курс. По мере прохождения вы погрузитесь в интереснейший мир JavaScript. Обучение начинается с основных концепций языка и продолжается передовыми техниками программирования.
Вне зависимости от уровня подготовки, курс обеспечит вас всей самой необходимой информацией для успешного освоения JS.
👀 Посмотреть курс
#js
Курс. По мере прохождения вы погрузитесь в интереснейший мир JavaScript. Обучение начинается с основных концепций языка и продолжается передовыми техниками программирования.
Вне зависимости от уровня подготовки, курс обеспечит вас всей самой необходимой информацией для успешного освоения JS.
#js
Please open Telegram to view this post
VIEW IN TELEGRAM
TsParticles
Мощная библиотека для создания интерактивных анимаций частиц, которая легко настраивается и поддерживает интеграцию с популярными фреймворками.
👀 Посмотреть
Coderoll | Frontend
Мощная библиотека для создания интерактивных анимаций частиц, которая легко настраивается и поддерживает интеграцию с популярными фреймворками.
Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1
Вопрос с собеседования:
❓ Какие элементы в HTML5 могут иметь aria атрибут?
Любой элемент
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
💅11❤3
SVGOMG — онлайн-инструмент для оптимизации SVG
Уменьшает размер файлов без потери качества, удаляет лишние атрибуты, упрощает пути и сжимает данные. Превью в реальном времени показывает изменения, а удобный интерфейс ускоряет работу. Улучшает производительность и ускоряет загрузку сайтов.
👀 Посмотреть
Coderoll | Frontend
Уменьшает размер файлов без потери качества, удаляет лишние атрибуты, упрощает пути и сжимает данные. Превью в реальном времени показывает изменения, а удобный интерфейс ускоряет работу. Улучшает производительность и ускоряет загрузку сайтов.
Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥1