Инкапсуляция UI на примере чат-виджета
#почитать
В рамках платформенного стрима мы занимаемся разработкой и развитием платформы для создания своих чат‑ботов. Cделать хорошего и полезного бота временами бывает сложно, поэтому для помощи разработчикам мы создаем инструменты, которые помогают ускорить разработку и упростить работу с ботами. В этой статье я расскажу, как реализовать изолированный UI, грамотно организовать код на примере виджета чата, и какие проблемы могут возникнуть в процессе разработки.
В мире разработки, как и в жизни, мы постоянно балансируем между сотрудничеством и самостоятельностью: каждый компонент системы, как человек в обществе, хочет быть особенным и уникальным, но при этом быть готовым к сотрудничеству с другими. Мы исследуем технический подход, который помогает применить эту философию на практике: как создать программный элемент, который будет самостоятелен, но в то же время будет хорошо взаимодействовать с остальной системой.
⏱ Читать статью
#почитать
В рамках платформенного стрима мы занимаемся разработкой и развитием платформы для создания своих чат‑ботов. Cделать хорошего и полезного бота временами бывает сложно, поэтому для помощи разработчикам мы создаем инструменты, которые помогают ускорить разработку и упростить работу с ботами. В этой статье я расскажу, как реализовать изолированный UI, грамотно организовать код на примере виджета чата, и какие проблемы могут возникнуть в процессе разработки.
В мире разработки, как и в жизни, мы постоянно балансируем между сотрудничеством и самостоятельностью: каждый компонент системы, как человек в обществе, хочет быть особенным и уникальным, но при этом быть готовым к сотрудничеству с другими. Мы исследуем технический подход, который помогает применить эту философию на практике: как создать программный элемент, который будет самостоятелен, но в то же время будет хорошо взаимодействовать с остальной системой.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться
#почитать
Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.
Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.
⏱ Читать статью
#почитать
Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.
Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
Всё, что вы хотели знать, но стеснялись спросить о кастомных курсорах в CSS
#почитать
Курсоры могут сделать сайт как гораздо удобнее, так и намного хуже. В этой статье обсудим встроенные курсоры CSS и посмотрим, как с помощью CSS (и немножко — с JavaScript) создавать кастомные курсоры, чтобы ваш сайт лучше запоминался пользователям.
Также сравним плюсы и минусы применения CSS и JavaScript для создания кастомных курсоров. Обсудим, когда стоит отказаться от курсоров по умолчанию и как учитывать потребности пользователей с ограниченными возможностями. Чтобы во всё это вникнуть, вам понадобятся базовые представления об HTML, CSS и JavaScript.
⏱ Читать статью
#почитать
Курсоры могут сделать сайт как гораздо удобнее, так и намного хуже. В этой статье обсудим встроенные курсоры CSS и посмотрим, как с помощью CSS (и немножко — с JavaScript) создавать кастомные курсоры, чтобы ваш сайт лучше запоминался пользователям.
Также сравним плюсы и минусы применения CSS и JavaScript для создания кастомных курсоров. Обсудим, когда стоит отказаться от курсоров по умолчанию и как учитывать потребности пользователей с ограниченными возможностями. Чтобы во всё это вникнуть, вам понадобятся базовые представления об HTML, CSS и JavaScript.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
Правило @import в CSS: модульность и организация стилей
#почитать
Если вы только начинаете свой путь в веб-разработке, то наверняка уже столкнулись с необходимостью писать CSS-код так, чтобы он был понятным, организованным и легко поддерживаемым. Представьте, что у вас есть проект с десятками компонентов, и все стили свалены в один огромный файл. Кошмар, правда? Вот тут на сцену выходит правило @import в CSS, которое позволяет загружать стили из других файлов, делая ваш код модульным и структурированным. В этой статье мы разберём, как работает @import, его историю, особенности использования и почему оно до сих пор актуально в 2025 году.
⏱ Читать статью
#почитать
Если вы только начинаете свой путь в веб-разработке, то наверняка уже столкнулись с необходимостью писать CSS-код так, чтобы он был понятным, организованным и легко поддерживаемым. Представьте, что у вас есть проект с десятками компонентов, и все стили свалены в один огромный файл. Кошмар, правда? Вот тут на сцену выходит правило @import в CSS, которое позволяет загружать стили из других файлов, делая ваш код модульным и структурированным. В этой статье мы разберём, как работает @import, его историю, особенности использования и почему оно до сих пор актуально в 2025 году.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Декодирование CSS селекторов: :has(:not) и :not(:has)
#почитать
При комбинировании CSS функций вложенность функций имеет значение. В статье мы рассмотрим разницу между :has(:not) и :not(:has), а также то, как подходить к декодированию CSS селекторов, использующих эти вложенные CSS функции.
⏱ Читать статью
#почитать
При комбинировании CSS функций вложенность функций имеет значение. В статье мы рассмотрим разницу между :has(:not) и :not(:has), а также то, как подходить к декодированию CSS селекторов, использующих эти вложенные CSS функции.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5
10 свойств в CSS о которых вы, вероятно, не знали
#почитать
Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <font-size>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.
⏱ Читать статью
#почитать
Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <font-size>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Библиотеки JavaScript для всплывающих окон: обзор лучших решений
#почитать
Всплывающие окна (popups, модальные окна) — важный инструмент в веб-разработке. Они помогают отображать уведомления, формы, изображения и другие элементы без перезагрузки страницы. JavaScript-библиотеки делают этот процесс удобным и гибким. Давайте рассмотрим популярные решения и их особенности.
⏱ Читать статью
#почитать
Всплывающие окна (popups, модальные окна) — важный инструмент в веб-разработке. Они помогают отображать уведомления, формы, изображения и другие элементы без перезагрузки страницы. JavaScript-библиотеки делают этот процесс удобным и гибким. Давайте рассмотрим популярные решения и их особенности.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Что если использовать контейнерные единицы измерения для... всего?
#почитать
Как-то подумалось, а что, если использовать контейнерные единицы измерения для каждого элемента в дизайне? Наверное, тогда, всё будет хорошо масштабироваться. Контейнерные единицы измерения, если вы о них не слышали, это такие же единицы измерения (вроде, px или rem, но более тесно связанные с единицами измерения области просмотра, например, vw или vi), размер которых зависит от контейнера, в котором они находятся.
Оказалось, сюрприз-сюрприз, все не так просто. Есть множество вещей, с которыми контейнерные запросы работают плохо, или для которых они просто не подходят.
В качестве эксперимента мы взяли довольно простой макет из сетки с карточками разного размера. Не считайте этот демонстрационный пример хорошим, это просто то, что первым пришло в голову.
⏱ Читать статью
#почитать
Как-то подумалось, а что, если использовать контейнерные единицы измерения для каждого элемента в дизайне? Наверное, тогда, всё будет хорошо масштабироваться. Контейнерные единицы измерения, если вы о них не слышали, это такие же единицы измерения (вроде, px или rem, но более тесно связанные с единицами измерения области просмотра, например, vw или vi), размер которых зависит от контейнера, в котором они находятся.
Оказалось, сюрприз-сюрприз, все не так просто. Есть множество вещей, с которыми контейнерные запросы работают плохо, или для которых они просто не подходят.
В качестве эксперимента мы взяли довольно простой макет из сетки с карточками разного размера. Не считайте этот демонстрационный пример хорошим, это просто то, что первым пришло в голову.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Три подхода к селектору & (амперсанд) в CSS
#почитать
& — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода.
⏱ Читать статью
#почитать
& — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Форматирование текста в JavaScript: методы bold(), italics() и другие
#почитать
⏱ Читать статью
#почитать
Исторический контекст: откуда взялись эти методы?
Методы вроде bold() и italics() появились в JavaScript на заре веба, в середине 90-х, когда браузеры вроде Netscape Navigator доминировали в интернете. Тогда веб был больше про документы, чем про интерактивные приложения. Эти методы были частью раннего API строк в JavaScript, чтобы разработчики могли быстро форматировать текст для отображения в HTML-документах. Например, bold() оборачивает строку в тег <b>, а italics() — в <i>. Это было удобно для простых задач, когда CSS ещё не стал стандартом стилизации, а HTML использовался для оформления текста.
Однако с развитием веба и приходом CSS такие методы начали терять популярность. Почему? Потому что CSS позволяет гибко управлять стилями, а методы вроде bold() привязаны к конкретным HTML-тегам, что делает их менее универсальными. Тем не менее, они всё ещё поддерживаются в современных браузерах и могут быть полезны для новичков или в специфических сценариях.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍1🔥1
Меню для отзывчивого интерфейса без скриптов
#почитать
Простое и понятное меню навигации — важнейшая часть удобного интерфейса. Отзывчивость меню тоже критична, ведь сейчас более половины всего интернет-трафика приходится на мобильные устройства.
В подходе mobile-first разработка начинается с самого маленького экрана — мобильного, и по мере увеличения ширины добавляются новые стили и элементы. В итоге страница автоматически подстраивается под размер окна браузера.
Хотя адаптивное меню — ключевой элемент хорошего UX, для его реализации не обязательно использовать JavaScript. В этом руководстве мы покажем, как сделать отзывчивое mobile-first меню только с помощью HTML и CSS.
⏱ Читать статью
#почитать
Простое и понятное меню навигации — важнейшая часть удобного интерфейса. Отзывчивость меню тоже критична, ведь сейчас более половины всего интернет-трафика приходится на мобильные устройства.
В подходе mobile-first разработка начинается с самого маленького экрана — мобильного, и по мере увеличения ширины добавляются новые стили и элементы. В итоге страница автоматически подстраивается под размер окна браузера.
Хотя адаптивное меню — ключевой элемент хорошего UX, для его реализации не обязательно использовать JavaScript. В этом руководстве мы покажем, как сделать отзывчивое mobile-first меню только с помощью HTML и CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Как переносить «висячие» слова на следующую строку с помощью JavaScript
#почитать
В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.
⏱ Читать статью
#почитать
В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Новый способ стилизации отступов в CSS
#почитать
Стилизация отступов в таких компонентах пользовательского интерфейса, как календари, карточки или сетки данных, может значительно улучшить читаемость и придать общий эстетический вид. Однако достижение этого эффекта в макетах с grid и flexbox традиционно требует неудобных обходных путей с использованием бордеров, псевдоэлементов или фоновых трюков. Такие обходные пути могут быть проблематичными по ряду причин.
⏱ Читать статью
#почитать
Стилизация отступов в таких компонентах пользовательского интерфейса, как календари, карточки или сетки данных, может значительно улучшить читаемость и придать общий эстетический вид. Однако достижение этого эффекта в макетах с grid и flexbox традиционно требует неудобных обходных путей с использованием бордеров, псевдоэлементов или фоновых трюков. Такие обходные пути могут быть проблематичными по ряду причин.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Полное руководство по типу Number и объекту Math
#почитать
Числа — это основа многих программ, будь то расчёты в играх, обработка данных в формах или генерация случайных событий. В JavaScript числа представлены типом Number, который охватывает как целые, так и дробные значения. А для сложных математических операций есть встроенный объект Math, который предоставляет множество полезных методов. Если вы новичок в веб-разработке, понимание чисел и их возможностей в JavaScript — это ключ к созданию динамичных и функциональных приложений. В этой статье мы подробно разберём тип Number, объект Math, специальные значения вроде Infinity и NaN, а также покажем, как использовать их в реальных проектах.
⏱ Читать статью
#почитать
Числа — это основа многих программ, будь то расчёты в играх, обработка данных в формах или генерация случайных событий. В JavaScript числа представлены типом Number, который охватывает как целые, так и дробные значения. А для сложных математических операций есть встроенный объект Math, который предоставляет множество полезных методов. Если вы новичок в веб-разработке, понимание чисел и их возможностей в JavaScript — это ключ к созданию динамичных и функциональных приложений. В этой статье мы подробно разберём тип Number, объект Math, специальные значения вроде Infinity и NaN, а также покажем, как использовать их в реальных проектах.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Эти CSS-техники устарели
#почитать
⏱ Читать статью
#почитать
Общаясь с коллегами, я заметил, что они незнакомы с последними возможностями CSS. Как обычно, у всех свои причины. У кого-то много повседневной рутины. Кому-то в принципе неинтересно, что нового происходит в CSS. А кто-то по привычке использует подходы десятилетней давности и ему норм.
Как фанату CSS, мне грустно. Сколько же прикольных вещей проходит мимо них. Да и их код может быть меньше, надёжнее и проще для понимания. В общем, я собрал несколько фрагментов кода, которые были популярны давным-давно, и переписал их с помощью новых возможностей CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
Создаем галерею-сетку со слайдером: HTML, CSS и JavaScript
#почитать
В этом проекте мы реализуем красивую галерею на примере направлений путешествий для турагентства. Карточки располагаются в сетке, при клике открывается модальное окно со слайдером. Всё работает на чистом JavaScript, без сторонних библиотек.
⏱ Читать статью
#почитать
В этом проекте мы реализуем красивую галерею на примере направлений путешествий для турагентства. Карточки располагаются в сетке, при клике открывается модальное окно со слайдером. Всё работает на чистом JavaScript, без сторонних библиотек.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Библиотеки JavaScript для создания фотогалереи
#почитать
Веб-разработчики часто сталкиваются с задачей создания фотогалерей для сайтов. Хорошая галерея не только облегчает пользователям просмотр изображений, но и делает сайт более привлекательным и удобным. В этой статье рассмотрим несколько популярных библиотек для создания фотогалерей на JavaScript, которые помогут вам быстро и эффективно решить эту задачу.
⏱ Читать статью
#почитать
Веб-разработчики часто сталкиваются с задачей создания фотогалерей для сайтов. Хорошая галерея не только облегчает пользователям просмотр изображений, но и делает сайт более привлекательным и удобным. В этой статье рассмотрим несколько популярных библиотек для создания фотогалерей на JavaScript, которые помогут вам быстро и эффективно решить эту задачу.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
Forwarded from джоброкет 🚀 вакансии в IT
This media is not supported in your browser
VIEW IN TELEGRAM
🪐 Новые вакансии фронтендеров
🚀 Lead Frontend Developer (с функциями системного аналитика) в Senior Soft, до 290 000 ₽
Подробнее➡️
https://jobrocket.ru/job/lead-frontend-developer-s-funkciyami-sistemnogo-analitika-senior-soft-3dc5daf0
🚀 Frontend-разработчик в Human Help, до 80 000 ₽
Подробнее➡️
https://jobrocket.ru/job/frontend-razrabotchik-human-help-b324db4a
🚀 React Frontend Developer в Ziphy, до 390 000 ₽
Подробнее➡️
https://jobrocket.ru/job/react-frontend-developer-ziphy-6e7ee0e9
🚀 Angular-разработчик в ИП, 285 000 - 335 000 ₽
Подробнее➡️
https://jobrocket.ru/job/angular-razrabotchik-nda-cc42d977
🚀 HTML-верстальщик в NDA (веб), 50 000 - 60 000 ₽
Подробнее➡️
https://jobrocket.ru/job/html-verstalshik-nda-veb-228edc88
🚀 Fullstack-разработчик в DataNest, 200 000 - 280 000 ₽
Подробнее➡️
https://jobrocket.ru/job/fullstack-razrabotchik-datanest-7c4cf183
🚀 Разработчик (PHP/Symfony/Angular/Node.js) в Core12, 150 000 - 250 000 ₽
Подробнее➡️
https://jobrocket.ru/job/razrabotchik-phpsymfonyangularnodejs-core12-e074ee3d
🚀 Дизайнер интерфейсов в Vondo, до 120 000 ₽
Подробнее➡️
https://jobrocket.ru/job/dizajner-interfejsov-vondo-04cca7d0
🚀 Fullstack PHP JS в IT-компания (Сколково), 250 000 - 300 000 ₽
Подробнее➡️
https://jobrocket.ru/job/fullstack-php-js-it-kompaniya-7830d561
🚀 Frontend Developer в Infomediji, 380 000 - 570 000 ₽
Подробнее➡️
https://jobrocket.ru/job/frontend-developer-infomediji-9d262255
🚀 UI Lead Designer в NDA (продуктовый стартап на Кипре), oт 380 000 ₽
Подробнее➡️
https://jobrocket.ru/job/ui-lead-designer-nda-produktovyj-startap-na-kipre-79327b83
🚀 Frontend-разработчик в HR-tech проект, 300 000 - 400 000 ₽
Подробнее➡️
https://jobrocket.ru/job/frontend-razrabotchik-hr-tech-proekt-867f27bb
🚀 React-разработчик (контракт), oт 80 000 ₽
Подробнее➡️
https://jobrocket.ru/job/react-razrabotchik-proekt-0b417d4e
🚀 AI-Native Fullstack Developer (React Native) в Unimatch Lab, oт 300 000 ₽
Подробнее➡️
https://jobrocket.ru/job/ai-native-fullstack-developer-react-native-unimatch-lab-faa3acf2
Больше вакансий frontend здесь⤵️
https://jobrocket.ru/?categories=frontend
🚀 Lead Frontend Developer (с функциями системного аналитика) в Senior Soft, до 290 000 ₽
Подробнее
https://jobrocket.ru/job/lead-frontend-developer-s-funkciyami-sistemnogo-analitika-senior-soft-3dc5daf0
🚀 Frontend-разработчик в Human Help, до 80 000 ₽
Подробнее
https://jobrocket.ru/job/frontend-razrabotchik-human-help-b324db4a
🚀 React Frontend Developer в Ziphy, до 390 000 ₽
Подробнее
https://jobrocket.ru/job/react-frontend-developer-ziphy-6e7ee0e9
🚀 Angular-разработчик в ИП, 285 000 - 335 000 ₽
Подробнее
https://jobrocket.ru/job/angular-razrabotchik-nda-cc42d977
🚀 HTML-верстальщик в NDA (веб), 50 000 - 60 000 ₽
Подробнее
https://jobrocket.ru/job/html-verstalshik-nda-veb-228edc88
🚀 Fullstack-разработчик в DataNest, 200 000 - 280 000 ₽
Подробнее
https://jobrocket.ru/job/fullstack-razrabotchik-datanest-7c4cf183
🚀 Разработчик (PHP/Symfony/Angular/Node.js) в Core12, 150 000 - 250 000 ₽
Подробнее
https://jobrocket.ru/job/razrabotchik-phpsymfonyangularnodejs-core12-e074ee3d
🚀 Дизайнер интерфейсов в Vondo, до 120 000 ₽
Подробнее
https://jobrocket.ru/job/dizajner-interfejsov-vondo-04cca7d0
🚀 Fullstack PHP JS в IT-компания (Сколково), 250 000 - 300 000 ₽
Подробнее
https://jobrocket.ru/job/fullstack-php-js-it-kompaniya-7830d561
🚀 Frontend Developer в Infomediji, 380 000 - 570 000 ₽
Подробнее
https://jobrocket.ru/job/frontend-developer-infomediji-9d262255
🚀 UI Lead Designer в NDA (продуктовый стартап на Кипре), oт 380 000 ₽
Подробнее
https://jobrocket.ru/job/ui-lead-designer-nda-produktovyj-startap-na-kipre-79327b83
🚀 Frontend-разработчик в HR-tech проект, 300 000 - 400 000 ₽
Подробнее
https://jobrocket.ru/job/frontend-razrabotchik-hr-tech-proekt-867f27bb
🚀 React-разработчик (контракт), oт 80 000 ₽
Подробнее
https://jobrocket.ru/job/react-razrabotchik-proekt-0b417d4e
🚀 AI-Native Fullstack Developer (React Native) в Unimatch Lab, oт 300 000 ₽
Подробнее
https://jobrocket.ru/job/ai-native-fullstack-developer-react-native-unimatch-lab-faa3acf2
Больше вакансий frontend здесь
https://jobrocket.ru/?categories=frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍1
CSS font-palette: управление цветами шрифтов
#почитать
Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.
⏱ Читать статью
#почитать
Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5