Коллекция HTML/CSS лайфхаков
#почитать
⏱ Читать статью
#почитать
А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6👎3🔥1
Когда мобильной версии мало: зачем и как включать «Версию для ПК»
#почитать
Представьте, вам присылают макет интерфейса:
- Desktop-версия, содержит очень много функционала.
- Mobile-версия, отображает сообщение "Функционал не доступен. Откройте приложение на Desktop".
Начнёте ли спорить и доказывать, что так делать нельзя? Возможно у вас получится переубедить ваших коллег.
А что если не получится?
Тогда в этом случае, максимум что вы можете сделать — включить поддержку отображения Desktop версии на мобильных устройствах с помощью опции "Версия для ПК", чтобы пользователи могли воспользоваться недоступным функционалом.
⏱ Читать статью
#почитать
Представьте, вам присылают макет интерфейса:
- Desktop-версия, содержит очень много функционала.
- Mobile-версия, отображает сообщение "Функционал не доступен. Откройте приложение на Desktop".
Начнёте ли спорить и доказывать, что так делать нельзя? Возможно у вас получится переубедить ваших коллег.
А что если не получится?
Тогда в этом случае, максимум что вы можете сделать — включить поддержку отображения Desktop версии на мобильных устройствах с помощью опции "Версия для ПК", чтобы пользователи могли воспользоваться недоступным функционалом.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
Золотое сечение в дизайне 2025: современные подходы к применению в веб и мобильном дизайне
#почитать
Золотое сечение (φ ≈ 1.618) — это математическая константа, которая представляет собой отношение двух величин, при котором отношение суммы этих величин к большей из них равно отношению большей к меньшей. Простыми словами: если у нас есть отрезок длиной A+B, то A/B = (A+B)/A ≈ 1.618.
В 2025 году актуальность золотого сечения только возросла. Почему?
Во-первых, исследования нейродизайна показывают, что человеческий мозг обрабатывает изображения, построенные по принципу золотого сечения, на 15-20% быстрее, чем произвольно структурированные композиции.
⏱ Читать статью
#почитать
Золотое сечение (φ ≈ 1.618) — это математическая константа, которая представляет собой отношение двух величин, при котором отношение суммы этих величин к большей из них равно отношению большей к меньшей. Простыми словами: если у нас есть отрезок длиной A+B, то A/B = (A+B)/A ≈ 1.618.
В 2025 году актуальность золотого сечения только возросла. Почему?
Во-первых, исследования нейродизайна показывают, что человеческий мозг обрабатывает изображения, построенные по принципу золотого сечения, на 15-20% быстрее, чем произвольно структурированные композиции.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2
Как понимать новые функции CSS
#почитать
⏱ Читать статью (en)
#почитать
Допустим, вы проводите популярный опрос по веб-разработке, посвященный CSS, и вам нужно решить, что включить в релиз этого года.
Вы можете подумать, что можете просто ввести “новые функции CSS 2025” в Google. Но хотя это и дает многообещающих зацепок, оно выводит множество шаблонного контента, который провозглашает CSS Grid “следующим большим событием”, несмотря на то, что поддерживается уже более восьми лет.
Нам нужен другой подход. В этой статье я сосредоточусь на CSS, но все ресурсы, ссылки на которые приведены здесь, охватывают все функции веб-платформы, включая JavaScript и HTML.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
Зачем нужны логические свойства CSS
#почитать
⏱ Читать статью
#почитать
Сегодня я хотел бы поговорить о логических свойствах CSS — новом (и, возможно, более эффективном) способе определения свойств, которые по своей природе являются направленными.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Модернизация с Web-платформой: уменьшение движения
#почитать
Демонстрация того, как современная веб-платформа может упростить уменьшение движения на старой кодовой базе.
⏱ Читать статью
#почитать
Демонстрация того, как современная веб-платформа может упростить уменьшение движения на старой кодовой базе.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
Создаём свой Telegram-клон с помощью Next.js и TailwindCSS
#почитать
Рассмотрим процесс создания клона веб-версии Telegram с использованием Next.js, TailwindCSS и Stream SDK.
⏱ Читать статью
#почитать
Рассмотрим процесс создания клона веб-версии Telegram с использованием Next.js, TailwindCSS и Stream SDK.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🙈4👍1
Расширенное использование attr() в CSS
#почитать
Теперь можно брать значения из атрибутов HTML, имеющих типы, так что если в элемент поместить атрибут data-font-size="2.2rem", то его значение можно присвоить.
⏱ Читать статью
#почитать
Теперь можно брать значения из атрибутов HTML, имеющих типы, так что если в элемент поместить атрибут data-font-size="2.2rem", то его значение можно присвоить.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Разноцветное выделение в CSS
#почитать
::selection — это круто, но использование селекторов типа :nth-child(5n+2) — это гораздо интереснее.
⏱ Читать статью
#почитать
::selection — это круто, но использование селекторов типа :nth-child(5n+2) — это гораздо интереснее.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
Creating an Auto-Closing Notification With an HTML Popover
#почитать
Атрибут HTML popover превращает элементы в элементы верхнего уровня, которые можно открывать и закрывать с помощью кнопки или JavaScript. Большинство всплывающих элементов могут быть закрывающимися, когда пользователь щелкает или нажимает на кнопку за пределами всплывающего окна. В настоящее время в HTML popover нет встроенной функции автозакрытия, но ее легко добавить. Автозакрывающиеся всплывающие окна полезны для таких пользовательских интерфейсов, как баннерные уведомления - например, пуши-оповещения о новых сообщениях в телефонах.
⏱ Читать статью
#почитать
Атрибут HTML popover превращает элементы в элементы верхнего уровня, которые можно открывать и закрывать с помощью кнопки или JavaScript. Большинство всплывающих элементов могут быть закрывающимися, когда пользователь щелкает или нажимает на кнопку за пределами всплывающего окна. В настоящее время в HTML popover нет встроенной функции автозакрытия, но ее легко добавить. Автозакрывающиеся всплывающие окна полезны для таких пользовательских интерфейсов, как баннерные уведомления - например, пуши-оповещения о новых сообщениях в телефонах.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
Обработка SVG данных через Clipboard API
#почитать
Функция находится в статусе ограниченной доступности в Baseline.
Объекты ClipboardItem позволяют писать и читать данные в буфер обмена в различных форматах, в том числе и SVG (image/svg+xml). Это удобно, если нужно скопировать или вставить графику в веб-приложения, сохраняя векторное качество изображения.
⏱ Читать статью
#почитать
Функция находится в статусе ограниченной доступности в Baseline.
Объекты ClipboardItem позволяют писать и читать данные в буфер обмена в различных форматах, в том числе и SVG (image/svg+xml). Это удобно, если нужно скопировать или вставить графику в веб-приложения, сохраняя векторное качество изображения.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Прожариваем React
#почитать
Я пишу на React с 2018 года, делаю это, на мой взгляд, более-менее сносно. Мне нравится тезис о том, что профессионализм заключается не только в умении использоваться достоинства инструмента, но и в умении чётко видеть его недостатки. Поэтому возникла идея сделать что-то типа прожарки React, указав на лично меня раздражающие моменты. С какими-то я смирился, с какими-то нет, что-то научился обходить. Если вас бесит в React что-то, что я не упомянул, не стесняйтесь писать в комментариях, было бы очень интересно сравнить мои ощущения с вашими.
И важное: несмотря на указанные ниже проблемы, я до сих пор считаю React прекрасным и удобным инструментом для создания фронтенда, в частности SPA.Громких слов типа «ReactJS не пригоден для разработки» тут не будет - пригоден, да ещё как! Но... и на Солнце бывают пятна.
⏱ Читать статью
#почитать
Я пишу на React с 2018 года, делаю это, на мой взгляд, более-менее сносно. Мне нравится тезис о том, что профессионализм заключается не только в умении использоваться достоинства инструмента, но и в умении чётко видеть его недостатки. Поэтому возникла идея сделать что-то типа прожарки React, указав на лично меня раздражающие моменты. С какими-то я смирился, с какими-то нет, что-то научился обходить. Если вас бесит в React что-то, что я не упомянул, не стесняйтесь писать в комментариях, было бы очень интересно сравнить мои ощущения с вашими.
И важное: несмотря на указанные ниже проблемы, я до сих пор считаю React прекрасным и удобным инструментом для создания фронтенда, в частности SPA.Громких слов типа «ReactJS не пригоден для разработки» тут не будет - пригоден, да ещё как! Но... и на Солнце бывают пятна.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥2❤1
Как сделать галерею-карусель со слайдером на OwlCarousel2 и FancyBox
#почитать
Галерея-карусель со слайдером — это удобный способ показать изображения на сайте с возможностью листания и полноэкранного просмотра. В этом руководстве мы создадим такой компонент с помощью библиотек OwlCarousel2 и FancyBox. Вы сможете:
Листать изображения влево и вправо
Выделять центральное изображение
По клику открывать картинку в модальном окне с возможностью пролистывания
Все будет работать без сборщиков, на обычном HTML + CSS + JS. Используем две библиотеки:
OwlCarousel2 — мощная карусель, которая умеет всё, что нужно;
Fancybox — лёгкий лайтбокс, который открывает изображения в модальном окне с затемнением фона и анимацией
⏱ Читать статью
#почитать
Галерея-карусель со слайдером — это удобный способ показать изображения на сайте с возможностью листания и полноэкранного просмотра. В этом руководстве мы создадим такой компонент с помощью библиотек OwlCarousel2 и FancyBox. Вы сможете:
Листать изображения влево и вправо
Выделять центральное изображение
По клику открывать картинку в модальном окне с возможностью пролистывания
Все будет работать без сборщиков, на обычном HTML + CSS + JS. Используем две библиотеки:
OwlCarousel2 — мощная карусель, которая умеет всё, что нужно;
Fancybox — лёгкий лайтбокс, который открывает изображения в модальном окне с затемнением фона и анимацией
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2❤1🙈1
Все единицы измерения в CSS от лучших к худшим
#почитать
CSS использует разные единицы измерения для задания размеров, отступов, шрифтов и других свойств. Разделяют абсолютные и относительные единицы. Понимание различий между ними — фундаментальная основа адаптивной, масштабируемой и удобной в поддержке вёрстки.
⏱ Читать статью
#почитать
CSS использует разные единицы измерения для задания размеров, отступов, шрифтов и других свойств. Разделяют абсолютные и относительные единицы. Понимание различий между ними — фундаментальная основа адаптивной, масштабируемой и удобной в поддержке вёрстки.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥1
Создание вращающейся ручки на основе Input Range
#почитать
⏱ Читать статью
#почитать
Когда-то давно, будучи ещё совсем зелёным и несмышлёным кодером, мне взбрело в голову сделать своё приложение. Моих знаний хватало на какой‑нибудь «Hello, World!», но кое‑что выдать я мог. И на тот момент мне позарез нужно было реализовать кноб — тот самый круглый регулятор, который можно крутить и он будет менять значения. И как любой уважающий себя программист, я сразу же полез гуглить стековерфлоу и прочее непотребство, дабы найти тот самый рецепт хлеба сладкого ответ на вопрос, который так долго меня волновал. Однако перешерстив весь интернет, ничего путёвого я не нашёл. Расстроившись, я забил на эту идею. Но какие‑то угольки веры в то, что у меня получится это сделать, тлели в моей охолодевшей к этому миру душонке. И вот на днях, когда я начал работать над своим проектом (небольшая программка, если она найдёт отклик в народных массах, то и по ней напишу парочку руководств, но пока что спустимся на землю), мне опять ударила моча в голову с этими кнобами. Тем более, что все предпосылки ведут именно к этому. Они нужны в интерфейсе. Забравшись в православный яндекс и одновременно в бездуховный гугл, я опять наткнулся на мель отсутствия нужной мне информации. Были только решения с какими‑то библиотеками и интересными историями на jQuery. Плюнув на всё и засучив рукава, я вдруг осознал, что этот мир нуждается в моём компетентном и всем так очень нужном мнении (спойлер: нет). Тогда я принялся за gehirnsturm и молниеносно придумал пару решений. Первое заключалось в SVG на основе path, но оно показалось мне чересчур геморройным. Там много JS надо написать, но не надо никаких стилей зато. И вот второе решение отчасти продолжает идею первого, но с некоторыми отличиями: оно немножко проще в том плане, что начальное, конечное и текущее значение, а также шаг уже вмонтированы в него, что существенно сокращало труды мои праведные. Но, как гласит закон сохранения энергии, энергия не приходит и не уходит, она лишь изменяется. Поправьте, если не так. А это значит, что если где‑то стало проще, то где‑то стало сложнее.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6👎3🔥1
Скрываем без JavaScript элементы, требующие JavaScript
#почитать
Я всё тщательно проверил и убедился, что мой сайт отлично (или хотя бы вполне неплохо) работает даже без JavaScript. Но, когда JavaScript недоступен, иногда бывает немного тяжеловато скрывать вещи, скрывать которые необходимо. Всего 7 строк кода (или даже однострочника, для самых душных) достаточно, чтобы скрывать на странице элементы, требующие JavaScript. Поэтому вам не придётся краснеть перед пользователи, которые без JavaScript заметили бы, как хромает функциональность вашего сайта.
⏱ Читать статью
#почитать
Я всё тщательно проверил и убедился, что мой сайт отлично (или хотя бы вполне неплохо) работает даже без JavaScript. Но, когда JavaScript недоступен, иногда бывает немного тяжеловато скрывать вещи, скрывать которые необходимо. Всего 7 строк кода (или даже однострочника, для самых душных) достаточно, чтобы скрывать на странице элементы, требующие JavaScript. Поэтому вам не придётся краснеть перед пользователи, которые без JavaScript заметили бы, как хромает функциональность вашего сайта.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤1🔥1
Все говорят, что работы в айти стало меньше...
На самом деле, работы полно. Мы подготовили 7 правильных каналов с вакансиями для тестировщиков, аналитиков, проджект-менеджеров и программистов.
В чем фишка этих каналов?
— зарплатная вилка🍴во всех вакансиях
— еженедельные подборки стажировок для начинающих — как здесь (для QA), здесь (для PM) и здесь (для BA&SA)
— быстрый телеграм/email контакт для прямой связи с рекрутером
— удобная навигация по уровням/условиям работы/направлениям тестирования
▪️QA Jobs — работа для тестировщика
▪️PM Jobs — работа для Project и Product менеджера
▪️BA & SA Jobs — работа для бизнес- и системых аналитиков
▪️C# & .NET Jobs — работа для C# инженеров
▪️DS&ML Jobs — работа для DS инженеров
▪️PHP Jobs — работа для PHP разработчиков
▪️JAVA Jobs — работа для Java разработчиков
▪️Python Jobs — работа для Python разработчиков
Подписаться на все каналы сразу
На самом деле, работы полно. Мы подготовили 7 правильных каналов с вакансиями для тестировщиков, аналитиков, проджект-менеджеров и программистов.
В чем фишка этих каналов?
— зарплатная вилка🍴во всех вакансиях
— еженедельные подборки стажировок для начинающих — как здесь (для QA), здесь (для PM) и здесь (для BA&SA)
— быстрый телеграм/email контакт для прямой связи с рекрутером
— удобная навигация по уровням/условиям работы/направлениям тестирования
▪️QA Jobs — работа для тестировщика
▪️PM Jobs — работа для Project и Product менеджера
▪️BA & SA Jobs — работа для бизнес- и системых аналитиков
▪️C# & .NET Jobs — работа для C# инженеров
▪️DS&ML Jobs — работа для DS инженеров
▪️PHP Jobs — работа для PHP разработчиков
▪️JAVA Jobs — работа для Java разработчиков
▪️Python Jobs — работа для Python разработчиков
Подписаться на все каналы сразу
🤬7
Пиши на JavaScript правильно: лучшие практики разработки в 2025 году
#почитать
JavaScript постоянно развивается: с каждым годом в нем появляются новые возможности, а устаревшие подходы уступают место более эффективным решениям. В этой статье мы рассмотрим ключевые современные практики, которые помогут вам писать чистый, надежный и производительный JavaScript-код.
⏱ Читать статью
#почитать
JavaScript постоянно развивается: с каждым годом в нем появляются новые возможности, а устаревшие подходы уступают место более эффективным решениям. В этой статье мы рассмотрим ключевые современные практики, которые помогут вам писать чистый, надежный и производительный JavaScript-код.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11
Getting Creative With HTML Dialog
#почитать
Любите вы их или не любите, но независимо от того, показываете ли вы оповещение, сообщение или подписываетесь на рассылку, диалоговые окна привлекают внимание к определенному фрагменту контента, не отправляя человека на другую страницу. В прошлом диалоговые окна использовали сочетание разделения, ARIA и JavaScript. Но элемент HTML dialog сделал их более доступными и стилизуемыми бесчисленными способами.
Как же вы можете вывести дизайн диалоговых окон за рамки шаблонов и фреймворков? Как придать им стиль, чтобы они отражали визуальную индивидуальность бренда и помогали рассказывать его истории? Вот как я делаю это в CSS, используя ::backdrop, backdrop-filter и анимацию.
⏱ Читать статью
#почитать
Любите вы их или не любите, но независимо от того, показываете ли вы оповещение, сообщение или подписываетесь на рассылку, диалоговые окна привлекают внимание к определенному фрагменту контента, не отправляя человека на другую страницу. В прошлом диалоговые окна использовали сочетание разделения, ARIA и JavaScript. Но элемент HTML dialog сделал их более доступными и стилизуемыми бесчисленными способами.
Как же вы можете вывести дизайн диалоговых окон за рамки шаблонов и фреймворков? Как придать им стиль, чтобы они отражали визуальную индивидуальность бренда и помогали рассказывать его истории? Вот как я делаю это в CSS, используя ::backdrop, backdrop-filter и анимацию.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7