Последние записи

Материальный дизайн

Перевод официальной спецификации Google для Material Design: http://www.google.com/design/spec/material-design/

Уже переведено 15 разделов:

ES6 изнутри: стрелочные функции

Перевод статьи ES6 In Depth: Arrow functions  с сайта hacks.mozilla.org, опубликовано на css-live.ru с разрешения автора — Джейсона Орендорфа.

ES6 изнутри — серия статей про новые возможности, добавленные в язык программирования JavaScript в 6-е издание стандарта ECMAScript, сокращенно ES6.

Стрелки существовали в JavaScript с самого начала. В первых руководствах по JavaScript советовали оборачивать встроенные скрипты в HTML-комментарии. Это помешало бы браузерам без поддержки JS ошибочно отобразить ваш код JS в виде текста.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #1

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация текста на SVG

Красивая анимация SVG текста.

See the Pen Animated text with Snapsvg by yoksel (@yoksel) on CodePen.

Посмотреть живой пример


(далее…)

Воображаемый диалог о прогрессивном улучшении

Перевод статьи A fictional conversation about progressive enhancement с сайта tommorris.org, с разрешения автора — Тома Морриса.

— Я разочаровался в современной веб-разработке. Кучи раздутых фреймворков, горы скриптов, одностраничных приложений, ссылок с #! — всё как-то переусложнено. Мы забыли старые приемы прогрессивного улушения, а взамен  получили жуткие нелепости вроде бесконечного скроллинга, которые прикольно выглядят, но проку для пользователя от них никакого. Мы будто заново изобрели эпоху флэш-заставок, но радуемся тому, что сделали весь этот бессмысленный хлам не на флэше, а на JavaScript.

(далее…)

CSS-функция element()

Перевод статьи CSS element() function с сайта iamvdo.me, с разрешения автора — Винсента де Оливейры.

В июле я написал про продвинутые приемы работы с CSS-фильтрами, в частности, backdrop-filter и filter(). Сегодня я хочу поделиться намного более потрясающей возможностью CSS. Но прежде чем начать, хочу предупредить: она работает только в Firefox, другие браузеры пока не торопятся ее поддерживать. Может быть, скоро это изменится. Очень на это рассчитываю. Так что прочитайте и передайте другим.

Если вы читаете эту статью не в Firefox, наверное, вам стоит переключиться на него, чтобы увидеть примеры в действии. На всякий случай я добавил видео.

element()

(далее…)

Десять заповедей логичных файлов стилей

Перевод статьи The ten commandments of sane style sheets с сайта benfrain.com, автор — Бен Фрейн.

Десять заповедей

  1. Да будет у тебя единственное место в коде для каждого ключевого селектора
  2. Не вкладывай (ежели не вкладываешь медиавыражений, переопределений, либо сие воистину необходимо)
  3. Не используй селекторов по ID (даже ежели мнишь, что сие необходимо)
  4. Не пиши браузерных префиксов в исходных файлах стилей
  5. Используй переменные для размеров, цветов и z-индекса
  6. Всегда первыми пиши правила для мобильных устройств (сторонись max-width)
  7. Используй миксины для стеков шрифтов
  8. Комментируй все магические числа и браузерные хаки
  9. Не встраивай изображений в код
  10. Не пиши сложного CSS там, где простой CSS достаточен

Блаженны соблюдающие сии правила, ибо они наследуют логичные таблицы стилей.

Аминь.

(далее…)

CSS жив и здоров

Перевод статьи CSS is Alive and Wells с сайта sitepoint.com, автор — Луис Лазарис

Растущая популярность React, библиотеки для пользовательских интерфейсов, которую создал Facebook, породила немало споров о CSS и о том, есть ли у него будущее в его нынешнем виде — в форме отдельного файла с объявлениями, откуда страница или фрагмент разметки берет информацию для оформления.

Здесь я не буду повторяться или приводить плюсы и минусы. Если вы не в курсе, можете ознакомиться с данной темой, пройдя по этим ссылкам:

Зато я сейчас убедительно докажу, что CSS жив и здоров.

(далее…)

О моратории на новые браузерные функции, предложенном PPK

Перевод статьи On PPK’s moratorium on new browser features с сайта https://dev.opera.com/, с разрешения автора — Брюса Лоусона

Знаменитый разработчик и автор множества статей Питер Пол Кох (PPK) недавно призвал к «мораторию на новые браузерные функции на год или около того». Если вы не читали его статью «Хватит толкать веб вперед», просмотрите ее: он выдвигает интересные тезисы, как всегда.

(далее…)

Как стать выдающимся фронтенд-разработчиком

Перевод статьи How to Become a Great Front-End Engineer с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

Недавно я получил электронное письмо от читателя моего блога, которое почему-то заставило меня всерьез задуматься. Вот что оно гласило:

Привет, Филип, можно спросить, как вы стали выдающимся фронтенд-разработчиком?

Что-нибудь посоветуете?

(далее…)

Если мы остановимся, мы двинемся вспять

Перевод статьи If we stand still, we go backwards с сайта jakearchibald.com, c разрешения автора — Джейка Арчибальда.

Недавно PPK заявил, что веб движется слишком быстро в неправильном направлении, и попросил однолетнего моратория на веб-фичи. Я настолько разозлился, что тут же бросился к словарю, чтобы уточнить значение слова «мораторий». Оказалось, что оно значит «приостановка».

Я немного вспылил в твиттере, что было не совсем правильно, так что вот более взвешенный ответ:

(далее…)

Хватит толкать веб вперед

Перевод статьи Stop pushing the web forward с сайта www.quirksmode.org, c разрешения автора — Питера Пола Коха.

Честное предупреждение. Вам это очень не понравится. Я хочу временно прекратить толкать веб вперед. Я хочу моратория на новые браузерные штучки на год или около того.

С недавних пор я в глубоких сомнениях по поводу всего этого подталкивания веба вперед. Зачем толкать его вперед? И вперед к чему именно? Нужен ли нам такой веб, к чему мы его толкаем? Вам не доводилось слышать эти вопросы.

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

Ну-ка, назовите сходу все новые функции, выпущенные браузерами в 2015! Видите? Не можете. В этом-то и проблема.

Мы получаем всё больше функций, которые становятся всё сложнее и требуют для работы всё больше полифилов и др. инструментов — инструментов, являющихся частью проблемы, а не ее решения.

Я не думаю, что это то, к чему надо толкать веб вперед. Нативные приложения всегда будут намного лучше в нативных задачах, чем браузер. Вместо этого нам надо бы сосредоточиться на сильных сторонах веба: простоте, URLах и доступности.

Машина инноваций на всех парах мчит не туда. Нам нужен перерыв. Нам нужна возможность «с чувством, с толком» разобраться с теми функциями, что у нас уже есть — без инструментов! Кроме того, нам нужно время для основательного обсуждения, куда мы хотим толкать веб вперед. Годовой мораторий на новинки дал бы нам это время.

(далее…)

Лакомые кусочки Grid-раскладки, часть 2: основы и терминология

Перевод статьи Grid Tidbits part 2: terminology and basics с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

В этой статье мы познакомимся с терминологией «CSS Grid Layout», основами определения grid-шаблонов и размещения в них элементов.

Это вторая из цикла относительно небольших статей про «Grid Layout». В первой части мы узнали о назначении grid-ов и о текущей ситуации в браузерах.

Для этого «лакомого кусочка» мы сделаем следующее:

  • Возьмём элемент и превратим его в grid.
  • Увидим, как элементы сами размещаются в grid’е
  • Поупражняемся в том, как управлять этим размещением

(далее…)

Лакомые кусочки Grid-раскладки, часть 1: зачем и почему

Перевод статьи Grid tidbits, part 1: the Why and Where с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

CSS Grid Layout — новый способ управления раскладкой в браузере. У него и других модулей (например, flexbox) разные возможности и перспективы, но в чем-то они и перекрываются. Да, и совсем скоро он появится во многих браузерах.  В этой статье мы узнаем, что это за модуль и для чего он нужен.

Это первая из нескольких статей приемлемой длины про «Grid Layout». Вместо того, чтобы написать статью «всё, что нужно знать про Grid Layout» (которая никогда бы не появилась на свет из-за моей лени), я решил разбить её на легко усваиваемые части. Поскольку эта спецификация довольно большая, понятие «приемлемая длина» — очень условное.

Статьи предполагают по крайней мере базовые знания CSS-раскладки, в том числе Flexbox.

(далее…)

Золотая рыбка CSS3 Grid Layout (часть 2)

В прошлой статье золотая рыбка Grid Layout выполнила для нас множество прекрасных желаний, но тем не менее, это далеко не всё, на что она способна. При помощи волшебства Grid Layout можно творить такие вещи, для которых раньше нам бы понадобилось куча «костылей» и хаков, либо исключительно JavaScript.

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

(далее…)

10 способов уменьшить количество перекомпоновок и повысить производительность

Перевод статьи 10 Ways to Minimize Reflows and Improve Performance с сайта www.sitepoint.com, автор — Крейг Баклер.

Хотя веб-страницы достигают 2МБ, производительность остается острой темой. Чем шустрее ваше приложение, тем лучше пользовательский опыт и выше конверсия.

При этом я и сам не без греха по части добавления необдуманных CSS3-анимаций и манипулирования множеством DOM-элементов, не задумываясь о последствии. Если дело касается визуальных эффектов, то в «браузерном мире» есть два термина:

(далее…)

«Готов» ли HTML?

Перевод статьи Is HTML «complete»? с сайта brucelawson.co.uk, автор — Брюс Лоусон.

Не так давно Тим Брей написал интересный пост под названием </html>, в котором он заявляет:

Никто, похоже, не заинтересован в работе над «словарем» (под которым понимаются те штуковины в угловых скобках, из которых состоит HTML).

На мой взгляд, HTML готов. Это ни в коем случае не означает, что я считаю, будто вся платформа веб-программирования находится в надлежащем состоянии…

Давайте отложим инструменты и сосредоточимся на более важных проблемах.

(далее…)