Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

CSS трюки и секреты

Каскадный таблицы стилей обладают огромным функционалом и скрывают много интересных особенностей, а порой и подводных камней. За время работы у меня накопилось (и продолжает накапливаться) библиотека связанных с CSS трюков и секретов. Что-то забывается, что-то кажется сегодня ненужным, но может пригодится в будущем. Поэтому самое правильное, это записывать и делиться и самому проще потом найти и кому-то еще может оказаться полезно.

Делаем качественный кастомный чекбокс

Многие примеры кастомных элементов совершенно не соответствуют проблемам действительности. Начнем с того как в принципе делается кастомный чекбокс и откуда идет необходимость. С необходимость все просто – нативный дизайн чебоксов мало кому нравится и смотрится не очень почти в любом сайте. Теперь как его, собственно, изменить – нативный компонент изменить не получится, каким он родился,

Схлопывание внешних отступов у элементов

Отличная статья с визуальными примерами о том как работает схлопывание внешних отступов у элементов – What’s the Deal with Margin Collapse?. Как-то так получилось, что не все фронтенд разработчики знают об этом поведении внешних отступов. Когда схлопывание происходит У двух соседних элементов. У дочернего элемента. В том случае, если высота элемента равна нулю, то схлопнуться

Подкрашиваем положение всех элементов на странице

Порой нужно разобраться в том где расположен каждый из элементов. Это нужно обычно для того чтобы найти баг в css. Например, отловить как внезапно нарисовался скроллбар или почему появился лишний overflow. Самое простое решение для этого – выделить все элементы добавив им рамку. Однако, использовать стиль border не стоит потому что поедет верстка, так как

Новые приключения в адаптивном дизайне

Доклад Виталия Фридмана (Vitaly Friedman) о том как сделать веб лучше и быстрее для всех. Виталий копает в браузерных технология так глубоко, что скоро найдет нефть. В этом и вся прелесть его докладов. Рекомендую всегда. Я перечислю основные моменты видео, самая презентация целиком находится ниже. Сжимаем изображения Помимо gzip существует еще как минимум 2 технологии

Тестируем скорость выборки css селекторов

Каждый раз как говорю о том, что нужно оптимизировать css селекторы, не использовать каскады, то слышу в ответ – “так и так быстро работает, тем более на небольшом количестве элементов”. И тут сложно не согласиться – действительно быстро, если немного элементов, более того вы скорее всего и не сталкивались толком с проблемами медлительности из-за кривых

Новая разметка grid, цвет каретки, стиль декоративной линии, position sticky

Немного новостей из мира обновлений в хроме. Остальные браузеры тоже подхватывают конечно, но пока выступают только в роли догоняющих. Новая разметка grid В сентябре прошлого года я писал о том, что в браузеры собираются внедрять новую css разметку. Так вот она уже в хроме! Можно брать и пользоваться. Кстати, поддерживается всеми современными браузерами. Сайт с

Скорость выборки css селекторов

Разные селекторы по-разному обрабатываются браузером (капитан очевидность). Как следствие одни работают быстрее чем другие. Имеет смысл внимательно подходить к работе с селекторами с самого начала, потому что когда уже нужно решать проблему с перформансом написано столько кода, что мама не горюй. Разные селекторы по скорости работы. Чем ниже, тем хуже. ID, например Класс, например

Коллеция веб демок – анимация, скрипты

Очень приятная коллеция примеров визуальных веб решений – анимация, скрипты. Аж больше 300 штук, собранных отовсюду в сети. Автор конечно проделал большую работу, разумеется большая часть этих примеров так и останется на полках фронтендеров, но для вдохнавления все равно стоит посмотреть 😉 Ссылки по теме: https://github.com/airen/DemoHouse https://airen.github.io/DemoHouse/ Update По какой-то причине автор удалили этот репозиторий,

Меняем в path атрибут “d” через css

Если кто не в курсе, то в SVG для описания некоей кривой используется строка, которая добавляется через атрибут “d”. Если нужно было его поменять то делали это при помощи JS. Оказывается, что уже можно и через CSS. Правде вопрос с поддержкой остается открытым ? А теперь поясним коротеньким видео: sooooo this is new! ? pic.twitter.com/vjQneEno6h

Ограничиваем ширину элемента количеством символов

Ширину элемента можно выставлять не только стандартными размерами в пикселях или в процентах, но и в ширине символов шрифта. В некоторых случаях это может быть очень удобно. Однако, тут есть одно “но” (как же без этого, верно?) – это не работает с любым шрифтом. Точнее даже не так – это будет работать только с моношрифтами.