Меня зовут Дима, я работаю в офисе Яндекса в Санкт-Петербурге и занимаюсь внутренними сервисами в команде разработки интерфейсов Толоки. В этом году я подготовил лекцию для Школы разработки интерфейсов. Ниже — её расшифровка.

Что такое доступность интерфейсов? Для кого она важна и зачем к ней нужно стремиться? Каковы основные приемы, которые делают интерфейс доступным? Кроме этих вопросов, лекция проясняет принципы, которые лежат в основе ассистивных технологий. Я постарался разобрать теорию и большое количество практических примеров, а также показать процесс работы скринридера.


— Что скрывается под модным нынче термином accessibility? Какие у вас есть варианты? Для слепых, чтение с экрана, с ограниченными возможностями, координация движений… Все верно. Доступность — возможность использования интерфейса всеми, независимо от физических или технических ограничений.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

От клиента пришла заявка, на старом сайте, обновить все изображения, а именно добавить на них водяной знак с логотипом. Проблема заключалась в том, что картинок было более 10000 штук и находились они в разных папках и под папках.

Мы решили написать универсальный скрипт, который можно запустить из консоли или прямо в браузере и обновить все картинки на сайте.

Привет, Хабр! Представляю вашему вниманию перевод статьи Julie Marchant Fix or Kill Automatically Installed JavaScript?

В эссе Ричарда Столлмана "Ловушка JavaScript" отмечается, что люди запускают несвободные программы, которые автоматически незаметно устанавливаются в их браузеры каждый день. На самом деле он сильно преуменьшил проблему. Мало того, что большинство пользователей ежедневно запускают несвободные программы просто просматривая веб-страницы, они запускают десятки или даже сотни таких программ каждый день. Ловушка JavaScript чрезвычайно реальна и плодовита. Считается, что работа с сайтами будет нарушена без этих нестандартных, обычно проприетарных, расширений HTML, что веб-браузеры даже не предлагают очевидной возможности отключить JavaScript. Утверждается, что отключение JavaScript приведет только к путанице.

Очевидно, что нам нужно решить эту проблему. Однако, сосредоточив внимание на том являются ли скрипты "тривиальными" или свободными, г-н Столлман упускает важный момент: автоматическая незаметная установка программного обеспечения сама по себе является главной проблемой. То, что по большей части программное обеспечение оказывается несвободным, является лишь побочным эффектом.

Несмотря на заявления Google и Яндекс о поддержке поисковыми ботами парсинга сайтов SPA, надеяться на нормальную индексацию не стоит — у поисковых ботов мало ресурсов, ваше приложение должно максимально быстро отрабатывать, иначе, вам либо порежут рейтинг, либо не спарсят страницу, так же бот может не дождаться отработки всех ваших скриптов…
(исследование Google bot)

Мой маленький проект для исследования технологий — изменение посещаемости, после перехода на Server Side Rendering (SSR)

Как настроить Angular и готовые примеры ниже подкатом.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.

Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:


В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный div, имеющий margin, border и padding. Для создания CSS grid контейнера добавим свойство display: grid. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header, sidebar, footer или другие аналогичные элементы макета сайта, зависящие от его дизайна.

Предыстория

Ни для кого не секрет, что с выходом Webpack 4 стратегия разделения кода сильно поменялась. Тут даже лучше сказать, что она была заново придумана, т.к. старый подход просто перестал работать, а новый не понятно как использовать.

Для тех, кто все еще не в курсе, плагина webpack.optimize.CommonsChunkPlugin больше нет. Совсем. Вместо этого предлагается в конфиге писать следующее:

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  }
  // ...
}

Это должно работать как магия. Т.е. теперь не мы говорим webpack'у что сделать общим чанком, а он сам все сделает, да еще может даже и лучше нас.

И наступит счастье. Шутка. На самом деле нет...

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

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Все течет, все меняется, но только input[type=file] как портил нервы всем начинающим веб-разработчикам, так и продолжает это делать до сих пор. Вспомните себя N лет назад, когда вы только начинали постигать азы создания веб-сайтов. Молодой и неопытный, вы искренне удивлялись, когда кнопка выбора файла напрочь отказывалась менять цвет своего фона на ваш любимый персиковый. Именно в тот момент вы впервые столкнулись с этим несокрушимым айсбергом под названием «Загрузка файлов», который и по сей день продолжает «топить» начинающих веб-разработчиков.

На примере создания поля для загрузки файлов я покажу вам, как правильно прятать input[type=file], настраивать фокус на объекте, у которого фокуса быть не может, обрабатывать события Drag-and-Drop и отправлять файлы через AJAX. А также я познакомлю вас с парой браузерных багов и путями их обхода. Статья написана для новичков, но в некоторых моментах может быть полезна и занимательна даже для матерых разработчиков.

Я уже достаточно давно экспериментирую с CSS-переменными. Если вы к ним еще не подступались, вы можете воспользоваться этим кратким руководством, чтобы быстро во всем сориентироваться и приступить к работе.

Для кого

Для java разработчиков, которые только слышали про котлин, но руками его пока не трогали

Для чего

Показать что kotlin отлично работает с spring boot, а в сочетании с DSL в части работы с html быть удобнее классического подхода с jsp.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

FYI: На следующей неделе дайджеста не будет в связи с отпуском.

Статья написана в сентябре 2017 года



JSON захватил мир. Если сегодня любые два приложения общаются друг с другом через интернет, то скорее всего делают это с помощью JSON. Стандарт принят всеми крупными игроками: из десяти самых популярных Web API, которые разработаны в основном крупными компаниями, такими как Google, Facebook и Twitter, только один API передаёт данные в XML, а не JSON. Для примера, Twitter поддерживал XML до 2013 года, когда выпустил новую версию API исключительно на JSON. Среди остальных разработчиков JSON тоже популярен: согласно Stack Overflow, о JSON задаётся больше вопросов, чем о любом другом формате обмена данными.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Apache FreeMarker — это механизм шаблонов: библиотека Java для генерации текстового вывода (HTML-страницы, xml, файлы конфигурации, исходный код и.т.д. На вход подается шаблон, например html в котором есть специальные выражения, подготавливаются данные соответствующие этим выражением, а Freemarker динамически вставляет эти данные и получается динамически заполненный документ.

Мы в Яндексе не только много работаем с фронтендом, но и делимся своим опытом с другими. За шесть лет преподавательской практики мы запустили разные форматы обучения, о которых сегодня расскажем читателям Хабра.

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

Здесь я поделюсь своими наработками для нормализации и сброса стилей.
За несколько лет у меня сформировался небольшой файл, за основу которого, изначально, был взят нормалайз.

Почему нормалайз, а не ресет. Он заточен именно под кросбраузерность, что очень важно. Но в чистом виде он меня вообще не устраивал, различные отступы, бордеры и т. д. только мешали, потому я немного подогнал его под свои потребности, поудаляв то, что мне было не нужно.
Со временем файл разрастался, лишнее из нормалайза удалялось, недостающее добавлялось.
Основной целью его создания было максимально подготовить основу для любого проэкта, что по-моему получилось, даже очень удачно. Файл получился довольно универсальный, но все же перед подготовкой проэкта в него нужно заглядывать и возможно что-то коректировать.

Надеюсь вы подчеркнете для себя что-то полезное, здесь вы можете ознакомиться с ним.
custom-reset.css

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.