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

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

Порой нужно разобраться в том где расположен каждый из элементов. Это нужно обычно для того чтобы найти баг в 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

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

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

Новый css псевдокласс – :placeholder-shown

Продолжаем разговор о новых фичах в css. На повестке дня псевдокласс, который симафорит о том показан ли плейсхолдер в инпуте или нет. Новые возможности для оформления формочек, ае-е-е! See the Pen Pop up labels when Typing with :placeholder-shown by Artem Demo (@artemdemo) on CodePen. Разумеется работать не везде, но все современные браузеры понимают и поддерживают

CSS Grid – CSS разметка

Воу, воу, воу – мы приближаемся к невероятным изменениям. В браузерах появится CSS разметка. Казалось бы – что мы там не видели? Ан нет, ничего мы там не видели! И для затравки немного синтаксиса: Наверное, это пример не дает общей картины, давайте посмотрим визуально. Итак, у нас есть вот такой код: Новый css-grid позволит