Сегодня я хочу рассказать о JsonDiscovery, браузерном расширении для просмотра JSON. Возможно вы скажете: «у нас и так полно подобных расширений!». Да, полно, но фичи JsonDiscovery отличают его от других и делают его действительно мощным.

Давайте же взглянем поближе...

Всем привет! Меня зовут Роман Дворнов, я Lead Engineer в команде Frontend Architecture в Авито. Мы занимаемся созданием и развитием технической платформы фронтенда, чтобы другие команды могли быстрее создавать интерфейсы и продукты. Мы с коллегами запланировали серию онлайнов, в которых будем обсуждать актуальные вопросы разработки клиентской части.

11 декабря на нашем ютуб-канале пройдёт первый прямой эфир. Обсудим инфраструктуру фронтенда. В дискуссии будут участвовать эксперты из Яндекса, Tinkoff, Mail.Ru и Авито. Под катом — примерные вопросы, которые планируем обсуждать (дополняйте список), и ссылка на предстоящую трансляцию. Добавляйте пост в закладки: после встречи обновим его и выложим видео.

Тестировать регресс верстки скриншотами модно, этим никого не удивишь. Мы давно хотели внедрить этот вид тестирования у себя. Всё время смущали вопросы простоты поддержки и применения, но в большей степени — пропускная способность решений. Хотелось, чтобы это было что-то простое в использовании и быстрое в работе. Готовые решения не подошли, и мы взялись делать свое.

Под катом расскажем, что из этого вышло, какие задачи решали, и как мы добились того, чтобы тестирование скриншотами практически не влияло на общее время прохождения тестов. Этот пост — расшифровка доклада, который прозвучал на HolyJS 2017 Moscow. Видео можно посмотреть по ссылке, а почитать и посмотреть слайды — далее.

В прошедшую субботу в офисе Avito прошел SPA Meetup. Это митап-сателит Moscow.js, ориентированный на фронтенд-разработчиков, которым интересна тема веб-приложений (Single Page Application), и сочувствующих им. Это уже третья встреча, которая получилась весьма насыщенной: 3 доклада, 2 блица, свободный микрофон, панельная дискуссия и, конечно же, живое общение. В этом посте мы немного расскажем о том, как это было, и поделимся видеозаписями докладов.

basis.js – JavaScript-фреймворк для разработки одностраничных веб-приложений, ориентированный на скорость и эффективность. Возможно он пока не такой популярный. Но благодаря моим выступлениям на различных конференциях и meetup'ах, некоторые уже слышали о нем и заинтересовались. Однако, чтобы начать использовать фреймворк или разбираться в нем, большинству не хватает руководства.

И вот, собрав волю в кулак (ну какой программист не любит писать документацию?), я сел писать руководство. Просто, доступно, последовательно.

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

В первой части руководства будет рассмотрено как начать работать с basis.js и какие инструменты можно использовать. В качестве примера будет создано несколько простых представлений, затронут вопрос модульности и организации файлов проекта.

От переводчика: В продолжении темы проприетарности (переводы статей раз и два), Lea Verou написала свою статью на A list apart, в которой она дает советы для веб-разработчиков. На перевод сподвиг заголовок статьи :)

Официальное заявление: каждый раз, когда вы причисляете проприетарную фичу к CSS3, умирает котенок. Любая -webkit- фича, которая не присутствует в спецификациях (хотя бы в черновиках) не относится к CSS3. Да, некоторые фичи выдают за CSS3, но они вовсе не являются частью CSS3. И это не придирки. Это очень важный момент, так как такое положение вещей поощряет определенные компании (*кхе* Apple *кхе*) игнорировать процесс стандартизации, реализуя то, что они придумали, в WebKit, и популяризируя это среди разработчиков, как лучшее изобретение после колеса. Новые блестящие игрушки ослепляют нас и мы тоже начинаем их раскручивать, внося свой вклад в повсеместное использование.

Бывает при выводе информации требуется ее декорировать для лучшего восприятия, нередко оформление сопровождается в том числе и текстом. При выделении и копировании этой информации, оформление копировать не нужно, т.к. нужна только сама информация, и желательно в исходном виде. То есть при копировании часть выделенного текста не должна попадать в буфер обмена.
В моем случае это исходный код, который сопровождается нумерацией строк, так нагляднее и есть возможность сослаться на строку кода. Однако, если мы хотим скопировать часть кода, то он должен копироваться без номера строки.
Многие highlighter'ы этим грешат, при копировании кода копируют в том числе и номера строк. Выходят из ситуации по разному: либо используют хитрую верстку, при которой возможно несовпадении нумерации со строками (можно заметить на github например), или используют специальную кнопку, которая показывает в отдельном окне код без форматирования. Мне показались эти подходы неудовлетворительными, потому решил найти другое решение.
В данной заметке я опишу решение, к которому в итоге пришел. Решение, конечно, частное, но может кому то оказаться полезным в решении собственных задач.

Последнее время на Хабре появляется не так много хороших статей о веб-разработке. Но сейчас не об этом.
Иногда хабралюди делятся интересными идеями, но не раскрывают их сути. И может зря. Потому как в ходе написания статьи (описания) замечаешь то, чего не видел раньше, другие ходы и решения, а читающим проще понять идею и дать дельный совет.
Так несколько дней назад на хабре появилась статья «Электронное табло», в которой автор поделился ссылкой на свою поделку, но из-за недостаточного описания статья получилась из разряда — «посмотри, что я сделал».
Насколько инетересней могла быть статья, если бы автор добавил побольше описания. Потому захотелось показать на примере этой статьи, как можно было бы сделать немного лучше, а заодно и поделиться своей реализацией его задачи.

Летом прошлого года компания Apple анонсировала новую версию своего браузера Safari. Неожиданностью стало то, что данный браузер работает не только под Mac OS, но и под Windows XP/Vista. Данный факт дал возможность в первую очередь веб-разработчикам ознакомиться с браузером и тестировать свои разработки в нем, не имея возможности, как например у меня, работы на компьютерах Apple.
На данный момент этот браузер проходит бета-тестирование, и доступен всем желающим для скачивания. Все мы уже не раз читали заявления по поводу того, что Safari быстрее всех, но это вызывает противоречивые мнения. Хотя хочу заметить, что в собственных тестах, часто Safari оказывается на первом месте. Но скорость, браузера хоть и важна, но не является приоритетной. Нам, как веб-разработчикам, важно знать, что представляет из себя браузер, что в нем поддерживается, что нет. В этом плане данный браузер только радует. Он поддерживает стандарты так же хорошо как и FF, и Opera. Конечно, есть свои недоработки, но у кого их нет? У меня выходит так, что все что работает в FF и Opera, так же работает и в Safari. Крайне редко замечаются какие то глюки, ощущение, что баги чаще случаются в других браузерах — но это субъективно. Так же стоит отметить, что Safari идет в авангарде, и многие фишки впервые были внедрены именно в нем, к примеру, тот же <canvas>.
Мне до недавнего времени казалось, что браузер пытаются сделать более стабильным, потому не выпускают релиз. Было странным, что уже больше полугода релиз не может состояться. Однако, на днях наткнулся на интересный блог, где описываются нововведения. Оказывается до сих пор в браузер вводят новую функциональность. Нет, не новые табы и настройки, а именно ту функциональность, которую могут задействовать веб-разработчики. Многие вещи еще тестируются, и доступны только в ночных сборках.

Многие наверняка сталкивались с проблемой, когда какой-нибудь текст нужно выводить в одну строку. При этом текст может быть весьма длинным, а ширина блока, в котором этот текст находится, обычно ограничена, хотя бы тем же размером окна браузера. На эти случаи придумано свойство text-overflow, которое внесено в рекомендацию CSS3, а впервые было реализовано в IE6, очень давно. В случае использования этого свойства для блока, если его текст больше по ширине чем сам блок, то текст обрезается и в конце ставится многоточие. Хотя тут не все так просто, но вернемся к этому чуть позже.
С Internet Explorer'ом все понятно, что же относительно других браузеров? И хотя в настоящий момент из спецификации CSS3 свойство text-overflow исключено, Safari его поддерживает (по крайней мере, в 3-й версии), Opera тоже (с 9-й версии, правда называется свойство -o-overflow-text). А Firefox — нет, не поддерживает, и даже в 3-й версии не будет. Печально, но факт. Но может можно что-то сделать?

Если Вы веб-разработчик, то у вас наверняка возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.

Сразу замечу, данный пост не попытка подлить масла в огонь браузерной холивар. Это маленький рассказ об одном моем открытии в браузере Opera.
Многие наверняка слышали, что Опера «фиксит» работу некоторых сайтов (и js библиотек), чтобы те в свою очередь нормально работали в этом браузере. Я как то натыкался на страницу с перечислением какие сайты и какие проблемы на них исправлены. Но как то не задумывался, как же они это «правят».