Вы уже используете прогрессивную загрузку? А как насчёт технологий Tree Shaking и разбиения кода в React и Angular? Вы настроили сжатие Brotli или Zopfli, OCSP stapling и HPACK-сжатие? А как у вас обстоят дела с оптимизацией ресурсов и клиентской части, со вложенностью CSS? Не говоря уже о IPv6, HTTP/2 и сервис-воркерах.

Давно на хабре не было постов про CSS и я решил восполнить этот пробел. Сегодня мы учимся готовить зубчатый фон используя только средства CSS и никаких изображений!

Важные требования к такому забору:

• Никаких изображений!
• Он должен спокойно тянуться по горизонтали
• Обязательно должен поддерживать неравномерный фон у подложки
• Фон не должен требовать никакой экстра-разметки. Лучше всего будет избегать псевдо-элементов (экономия — хорошо).

Поддерживаемые браузеры: Chrome, Firefox (> 3.6), Opera (>= 12), Safari (>= 5), IE10.

Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

Привет, Хабр!

Сегодня поговорим об отзывчивых значках и парочке лайфхаков со шрифтовыми иконками.

Предыстория. О трендах

В последнее время все сильнее набирает обороты тренд «отзывчивого дизайна». Идея, заложенная в эту методологию, в режиме реального времени модифицируется, дополняется и обрастает новыми функциями. Я — не фанат трендов и моды как таковой, не сложилась у меня с ними взаимная любовь. Но в профессиональной сфере все иначе: здесь тренды правят бал, и выбросить их просто так не получается.

Тема, которую сегодня хотелось бы осветить, довольно сложная и объёмная, поэтому пришлось потрудиться, чтобы представить её в более-менее наглядном и понятном виде. Те, кто доберётся до конца статьи, узнают ответ на вопрос в заголовке. Поверьте, там так оно и есть.

Меня зовут Павел Гринченко. Я был одним из участников Школы разработки интерфейсов Яндекса в Симферополе. Когда-то давно я посмотрел видеозаписи самой первой Школы 2012 года и почерпнул из них очень много полезной информации. Затем я узнал, что в моём городе пройдёт новая Школа, и решил обязательно поучаствовать.

Чтобы попасть в Школу, требовалось заполнить анкету и сделать два тестовых задания. Одно из них — по вёрстке, довольно простое. Звучало оно так: сверстать список ачивок, но максимально гибко и реюзабельно (например, используя СSS counters). Второе задание оказалось посложнее: написать обфускатор CSS-классов без использования сторонних библиотек. На входе — массив классов, на выходе — их обфусцированная версия. Но вот пара нюансов:

• Длина результирующих классов должна была получиться минимальной.
• Наиболее часто встречающиеся классы должны были занимать наименьший объём.

3 июля, сделав задания, я отправил заявку и забыл про Школу, а 26 июля мне пришло письмо о том, что я принят. Сегодня хочу рассказать вам о том, как проходил процесс обучения, какие инструменты разработки я открыл для себя и какие задачи нам приходилось с интересом решать.

Дорогие читатели, мы с вами хотели бы обсудить вопрос предустановленного ПО для VPS.

Есть несколько категорий людей, которые подключают себе VPS:

— одни умеют настраивать и обращаться с VPS;
— вторым не помешала бы инструкция и небольшая помощь;
— третьи слышали, что VPS круче виртуального хостинга, но не знают, как к нему подступиться.

Решение, которое удовлетворяет почти всех — сделать образы с предустановленным ПО. Кому-то это сэкономит время на установке LAMP, а кому-то поможет начать пользоваться сервисом без специальных знаний. Но как это лучше всего реализовать провайдеру?

Мы продолжаем публиковать лекции легендарного Гарвардского курса CS50, которые мы переводим и озвучиваем специально для JavaRush. Рады вам представить 16-ю серию с продолжением рассмотрения языка PHP (теперь для разработки веб-приложений), а также со знакомством с базами данных и MySQL. Всего в курсе 24 лекции, постепенно мы переведём все. Лекция под катом в списке всех переведённых на сегодняшний день лекций.

Что вы узнаете, прослушав этот курс:

• Основы компьютерных наук и программирования;
• Концепции алгоритмов и алгоритмичности мышления. Какие задачи можно решать с помощью программирования и каким образом;
• Концепции абстракции, структуры данных, инкапсуляции, управления памятью. Основы компьютерной безопасности. Процесс разработки ПО и веб-разработка;
• Основы языка программирования C и Scratch;
• Основы баз данных и SQL;
• Веб-разработка: основы CSS, HTML, JavaScript и PHP;
• Основы подготовки презентации проектов по программированию.

В основном в нашей компании все рабочие места были построены на базе тонких клиентов HP t5530. Исключение составляли несколько рабочих мест с особыми требованиями (экзотическое оборудование или ПО) и несколько ноутбуков ключевых сотрудников. Суммарное количество рабочих мест составляло приблизительно 120 единиц. Все это обслуживалось двумя терминальными серверами (Windows 2003 Ent), одним сервером Active Directory и одним файлохранилищем. Доступ в интернет — сервер с FreeBSD. Рабочие задачи стандартные — IE (доступ к удаленной онлайн базе), TheBat с почтой в огромных количествах, MS Office (Word/Excel), 1С.

Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em'ы или rem'ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.

Добро пожаловать в мир типографики и относительных единиц измерения =)

Ни для кого, думаю, не секрет, что touch-устройства обрабатывают «мышиные» события несколько иначе, не так, как это происходит на десктоп-браузерах…

Самый яркий для меня пример, это обработка псевдокласса :hover. Для начала iOS7, например, не будет реагировать на hover если только на элемент, или его родителя, не навешена обработка события click. Это хорошо видно вот на этом примере: jsfiddle.net/H8EmG — сколько не тыкай пальцем в текст — никаких подчеркиваний не увидишь. А в этом примере jsfiddle.net/H8EmG/1 «тычок» пальцем в текст будет приводить к его подчеркиванию. Интересный факт — пока не ткнем в другой элемент, текст так и будет сидеть под ховером…

Другой интересный пример, это обработка появления элементов «по-наведению»: jsfiddle.net/ASRm9/1 Попробуйте нажать на текст. Сперва вы увидите текст «HOVER!», появившийся внутри строки, а вот второе нажатие уже вызовет alert('click'). Это происходит потому, что iOS понимает что за :hover что-то скрыто, и старается не сломать поведение, заложенное автором сайта.

Но однажды мы столкнулись с такой багой, объяснить которую мы не смогли до сих пор, а на ее локализацию потребовался не один день отладки на iPad… Желающие подробностей, а также хитрого, как мне кажется, способа решения, наверное, всех проблем с :hover разом — прошу под кат…

Одна из самых непростых задач в верстке адаптивного сайта — это навигация. В этой статье подробно описан один из способов реализации адаптивного меню.



Демо Скачать исходники

В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.

«Ровная спина – залог здоровья позвоночника», «Сиди ровно», «Ваши мышцы спины слабые, их нужно накачать, чтобы держать спину ровной», «Выпрямься, чего сидишь горбом» – все эти фразы слышал практически каждый образованный человек не один раз в своей жизни.

На самом деле, выровненный относительно действия силы притяжения Земли, скелет будет передавать вес тела на точки опоры с минимальным напряжением мышц, поддерживающих это положение скелета. И, в то же время, внешняя характеристика правильной осанки – «ровная спина» – совершенно не отражает те процессы, которые нужны для качественного сидения или стояния.


Основная проблема внешнего статичного описания «правильной осанки» заключается в том, что живое тело, постоянно балансирующее в поле гравитации, представляется застывшей статуей, где важен внешний вид, а не внутреннее содержание. У статуй есть массивное основание, удерживающее статую от опрокидывания, живой человек же поддерживает устойчивость иначе.

Мышцы в нашем теле предназначены для движения, и даже те мышцы, которые приспособлены для длительной нагрузки в статичных позах, требуют периодического отдыха. При длительной сидячей работе отдых достигается путём смены позы. «Усталая спина» — основной симптом игнорирования принципов динамической подстройки позы, является ответом на перегрузку мышц чрезмерной статической нагрузкой.

Продолжение (часть 2).
Не понимаю, почему никто не кричит «полундра» (поискал здесь и на Хабре по слову «iknowwhatyoudownload», но ничего).

Итак, некий сайтик iknowwhatyoudownload.com по IP-адресу показывает список торрентов, скаченных и розданных с этого адреса.
Судя по всему, запустились недавно. Домен зарегистрирован 14 сентября 2016. Отображается статистика примерно за месяц. Но как долго она собиралась, неизвестно.

Фото: Flickr / Scott & Elaine van der Chijs / CC

Ранее в нашем блоге мы говорили о том, как изучение веб-технологий и вёрстки может помогать в работе представителям нетехнических профессий. Некоторые люди, начинающие глубже погружаться в мир веба, понимают, что хотят сменить род деятельности.

Это может быть страшно — сменить сферу деятельности и из нетехнаря превратиться в ИТ-специалиста. Однако вокруг нас всё больше примеров таких успешных трансформаций. В том числе — истории нескольких выпускников HTML Academy, которые не только получили новые знания, но и смогли найти работу для их применения на практике.

Под конец этого непростого года наша служба исследований собрала двадцатку самых востребованных языков программирования на hh.ru. По каждому языку отдельно посчитали динамику за год. А по первой пятерке заодно посмотрели изменения за 5 лет.

Что произошло: PHP в этом году стал самым востребованным у работодателей, отняв пальму первенства у Java. За год выросли оба, но PHP вырос сильнее. Go и Swift «выстрелили» на 161% и 100% соответственно, хотя до лидеров по количеству вакансий им еще далеко. А вот Python заметно сдал позиции, сразу на 32%.

Если сравнить с индексом TIOBE, то сразу заметно, что PHP у нас заметно выше, а Visual Basic, например, заметно ниже. Go рванул и там и тут, а вот Objective-C у TIOBE в лидерах роста, а у нас он упал на 9%. С у них, кстати, упал сильнее всех, а у нас, наоборот, вырос на 46%.


А где же 1С, спросите вы? В табличку не включили, но если интересно, то все неплохо: 2015 — 9 473, 2016 — 13 735. Прирост: 45%. В абсолютных цифрах — самый востребованный язык.

Глядя на таблицу результатов футбольного сезона, я часто задаюсь вопросами:

• Лидировала ли команда с начала сезона или совершила героический рывок в конце?
• Как зимнее трансферное окно повлияло на результаты?
• Доигрывали ли сезон команды в середине таблицы или играли в полную силу?

Статичная таблица не даёт ответов.

Поиски удачной визуализации сезона на просторах интернета закончились безуспешно, поэтому я начал экспериментировать сам.

Графики или быстро теряли читаемость с ростом количеством команд, или требовали нетривиальной концентрации при первом контакте. В итоге, всё закончилось тем, с чего началось — таблицей. Точнее, скриптом, который преобразовывает результаты сезона в интерактивную таблицу. Можно посмотреть результаты после любого тура или просто нажать на replay и наблюдать, как команды плавают вверх и вниз по таблице:


→ Живая демонстрация

Каким образом производитель устанавливает срок годности своего продукта? Например, почему на пищевой соли указан срок годности 1 год (365 дней)? Что произойдёт с NaCl на 366-й день по истечении срока годности? Что происходит с детской резиновой игрушкой через три года использования (типичный срок годности резиновых игрушек)? Почему столетнее вино продают на аукционе за тысячи долларов? Об этих вопросах редко задумываются люди, которые привыкли смотреть на срок годности каждого продукта в холодильнике и каждого товара, как будто эти цифры значат что-то важное.

Факт в том, что дата и время на упаковке не имеют практически никакого смысла. Продукт начинает портиться в первую секунду после своего изготовления, фрукты и овощи начинают разлагаться сразу после того, как их сорвали. Употребляемые в пищу продукты в любом случае будут испорченными.

Один из самых важных факторов при создании уникального и узнаваемого дизайна — цвет. Грамотный выбор цветовой схемы может определить успех или провал сайта. Когда посетитель бросает первый взгляд на веб-страницу, то выбранные вами цвета посылают ему мгновенное сообщение об этой странице. К счастью, существует много инструментов, которые помогут выбрать правильную цветовую схему. Вот пять лучших из них.