Pull to refresh
5
0
Антон @f0rmat1k

Разработчик переднего конца

Send message

Компьютер, который отказывается умирать

Reading time 4 min
Views 50K
«Время жизни» технологий сократилось — смартфоны можно менять хоть каждый год. Но пока еще есть оборудование, которое работает на протяжении десятилетий и, вероятно, проработает еще долгие годы. Одна из таких систем — японский FACOM 128B, введенный в эксплуатацию в 1958 году.

Total votes 50: ↑49 and ↓1 +48
Comments 137

Sampler. Консольная утилита для визуализации результата любых shell команд

Reading time 5 min
Views 84K

В общем случае с помощью shell команды можно получить любую метрику, без написания кода и интеграций. А значит в консоли должен быть простой и удобный инструмент для визуализации.


Sampler


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


Код доступен на гитхабе. Инструкции по установке — для Linux, macOS и (экспериментально) Windows.

Читать дальше →
Total votes 298: ↑297 and ↓1 +296
Comments 54

Почему я отказался от Disqus и вам тоже пора

Reading time 2 min
Views 52K
Замена Disqus на Commento снизила размер страниц в 10 раз

Когда я завёл блог, то установил Disqus для комментариев. Это был естественный выбор: сайты по всему интернету ставили Disqus, его легко настроить, и есть бесплатный вариант использования. Я спокойно интегрировал движок комментариев и двинулся дальше.

Но вот в чём дело: я всегда знал, что Disqus немного раздувает страницы. Я ведь писал о веб-производительности и обычно старался оптимизировать страницы. Но я просто предположил, что Disqus прибавляет немного лишних килобайт. Логика: если он сильно раздувает страницы, все бы уже давно отказались от него. Очевидно, Disqus старается не увеличивать трафик, верно?

Я ошибался.
Читать дальше →
Total votes 146: ↑145 and ↓1 +144
Comments 48

Когда «Zoë» !== «Zoë», или почему нужно нормализовывать Unicode-строки

Reading time 6 min
Views 19K
Никогда не слышали о нормализации Unicode? Вы не одиноки. Но об этом надо знать всем. Нормализация способна избавить вас от множества проблем. Рано или поздно нечто подобное тому, что показано на следующем рисунке, случается с любым разработчиком.
«Zoë» — это не «Zoë»
Читать дальше →
Total votes 62: ↑60 and ↓2 +58
Comments 40

О бравом React'е замолвите слово

Reading time 8 min
Views 11K
Здравствуйте, уважаемые читатели!

Спешим вас порадовать — мы уже вовсю переводим книгу небезызвестного Стояна Стефанова о библиотеке React


Мы сочли, что этот молодой росток на массивном стволе JavaScript нелишне будет бережно прорекламировать, поэтому предлагаем почитать обзорную и слегка восторженную статью, которая, на наш взгляд, устарела всего на пару абзацев (их мы опустили)
Читать дальше →
Total votes 23: ↑18 and ↓5 +13
Comments 20

Эффективное использование Github

Reading time 13 min
Views 122K

Github — важная часть жизни современного разработчика: он стал стандартом для размещения opensource-проектов. В «2ГИС» мы используем гитхаб для разработки проектов web-отдела и хостинга проектов с открытым кодом.

Хотя большинство из нас пользуются сервисом практически каждый день, не все знают, что у него есть много фишек, помогающих облегчить работу или рутинные операции. Например, получение публичного ключа из URL; отслеживание того, с каких сайтов пользователи приходят в репозиторий; правильный шаринг ссылок на файлы, которые живут в репозиториях гитхаба; горячие клавиши и тому подобное. Цель этой статьи — рассказать о неочевидных вещах и вообще о том, что сделает вашу работу с гитхабом продуктивнее и веселее (я не буду рассматривать здесь работу с API гитхаба, так как эта тема заслуживает отдельной статьи).


Содержание



Читать дальше →
Total votes 149: ↑148 and ↓1 +147
Comments 38

Готовим WebP правильно

Reading time 4 min
Views 38K
WebPХабр уже насыщен статьями на тему «нового» формата изображений WebP (описание, сравнение с JPEG2000, сравнение с BPG, использование, подключение на сайте). К сожалению, открытыми остаются вопросы: как правильно подключить WebP на сайте, чтобы «все работало», и насколько он лучше (меньше) PNG/JPEG. В этой заметке я буду отвечать на оба вопроса.

Предполагаю, что вы уже в курсе оптимизации изображений, умеете конвертировать изображения в WebP, понимаете разницу между использованием JPEG и PNG на сайте, знаете инструменты ExifTool, jpegtran, mozjpeg, JPEGrescan, optipng, pngcrush, pngwolf, zopflipng и TruePNG, а также различаете пастеризацию молока и постеризацию изображений.

Если все так — то переходим к сути.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Comments 8

Автозапуск приложения Node.js на CentOS 6.2

Reading time 3 min
Views 16K
Для автозапуска приложений Node.js есть много способов, но после некоторых поисков мне удалось отыскать такое решение, которое и работает, и не представляет большой трудности.

Сперва я испробовал forever работает превосходно, но только до тех пор, пока вам не понадобится запустить приложение при начальной загрузке системы. Я пробовал добавить строчку в /etc/rc.d/rc.local — иногда она срабатывала, а иногда нет, и до сих пор я не разобрался, почему так.

Затем я поглядел на Upstart и на Monit. Upstart сделал сочинение скрипта для автозагрузчика таким же простым, как autoexec.bat во времена DOS, а Monit умеет проверять приложение, чтобы убедиться, что оно всё время работает.

Тут я понял, что моя потребность проста: во-первых, запускать приложение при начальной загрузке системы, а во-вторых, перезапускать, если оно упадёт (с приложениями Node.js такое случается) — и одного upstart достаточно для того, чтобы устроить и то, и другое.
Читать дальше →
Total votes 29: ↑20 and ↓9 +11
Comments 10

Искусство командной строки

Reading time 15 min
Views 249K


Вот уже как неделю английская версия the art of command line висит в секции trending на Github. Для себя я нашел этот материал невероятно полезным и решил помочь сообществу его переводом на русский язык. В переводе наверняка есть несколько недоработок, поэтому милости прошу слать пулл-реквесты мне сюда или автору оригинальной работы Joshua Levy вот сюда. (Если PR отправите мне, то я после того, как пересмотрю изменения отправлю их в мастер-бранч Джоша). Отдельное спасибо jtraub за помощь и исправление опечаток.

Enjoy!
Total votes 127: ↑122 and ↓5 +117
Comments 143

Используем WebP сегодня

Reading time 6 min
Views 140K

Это перевод статьи ребят из Aristotle Interactive.
Говорят, фотография стоит тысячи слов. Но в сети, фотография может занимать тысячу килобайт и больше! По данным HTTP Archive, изображения в среднем занимают до 64% веб-страницы. Учитывая это, оптимизация изображений — крайне важный аспект, особенно принимая во внимание то, что многие пользователи просто уйдут с сайта, если он не загрузится за несколько секунд.

Проблема с оптимизацией изображений в том, что мы хотим сохранить размер изображений, не жертвуя при этом качеством. Предыдущие попытки создать типы файлов, которые бы оптимизировали изображения лучше, чем стандартные JPEG, PNG и GIF, успеха не возымели.
Читать дальше →
Total votes 31: ↑25 and ↓6 +19
Comments 63

WebTorrent: торренты через браузер. Без плагинов, чистый JavaScript

Reading time 2 min
Views 437K


Теперь для скачивания и просмотра фильмов с торрентов не нужен отдельный торрент-клиент. Также как и для раздачи файлов по протоколу BitTorrent тоже не нужен отдельный клиент. Достаточно обычного браузера, поддерживаются Chrome, Firefox и Opera (десктоп и Android).

Всё это благодаря WebTorrent — гибриду BitTorrent и WebRTC. Скачивание и раздача происходят прямо через сайт. Встроенный плеер начинает показ фильма, как только скачано несколько процентов.
Читать дальше →
Total votes 22: ↑20 and ↓2 +18
Comments 26

С 0 до 1. Разбираемся с Redux

Reading time 9 min
Views 330K
Когда вышла версия 1.0 Redux, я решил потратить немного времени на серию рассказов о моем опыте работы с ним. Недавно я должен был выбрать “реализацию Flux” для клиентского приложения и до сих пор с удовольствием работаю с Redux.

Почему Redux?


Redux позиционирует себя как предсказуемый контейнер состояния (state) для JavaScript приложений. Редакс вдохновлен Flux и Elm. Если вы раньше использовали Flux, я советую прочитать, что Redux имеет с ним общего в разделе "Предшественники" новой (отличной!) документации.

Redux предлагает думать о приложении, как о начальном состоянии модифицируемом последовательностью действий (actions), что я считаю действительно хорошим подходом для сложных веб-приложений, открывающим много возможностей.
Читать дальше →
Total votes 15: ↑14 and ↓1 +13
Comments 16

Egret. Free open source HTML5 game engine

Reading time 5 min
Views 31K
В данной статье будет рассмотрены вопросы, возникающие во время выбора Game Engine для разработки 2D игр. И, как вариант ответов на эти вопросы, будет предложено использовать Egret.


Читать дальше →
Total votes 20: ↑15 and ↓5 +10
Comments 26

JavaScript — шаблоны наследования

Reading time 7 min
Views 58K
Примечание переводчика: Тема наследования в JavaScript является одной из самых тяжелых для новичков. С добавлением нового синтаксиса с ключевым словом class, понимание наследования явно не стало проще, хотя кардинально нового ничего не появилось. В данной статье не затрагиваются нюансы реализации прототипного наследования в JavaScript, поэтому если у читателя возникли вопросы, то рекомендую прочитать следующие статьи: Основы и заблуждения насчет JavaScript и Понимание ООП в JavaScript [Часть 1]

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

JavaScript является очень мощным языком. Настолько мощным, что в нем сосуществует множество различных способов проектирования и создания объектов. У каждого способа есть свои плюсы и минусы и я бы хотел помочь новичкам разобраться в этом. Это продолжение моего предыдущего поста, Хватит «классифицировать» JavaScript. Я получил много вопросов и комментариев с просьбами привести примеры, и для именно этой цели я решил написать эту статью.
Читать дальше →
Total votes 22: ↑15 and ↓7 +8
Comments 35

Первый интерактивный учебник по линейной алгебре

Reading time 1 min
Views 30K


«Изображение говорит больше, чем тысяча слов», — такой принцип взяли на вооружение авторы учебника «Захватывающая линейная алгебра» ("Immersive Linear Algebra") с полностью интерактивными иллюстрациями. Авторы говорят, что это первый мире учебник такого рода.
Читать дальше →
Total votes 30: ↑28 and ↓2 +26
Comments 3

Строим real-time веб-приложения с RethinkDB

Reading time 10 min
Views 43K
От переводчика: Совсем недавно узнал про эту довольно интересную базу данных и как раз наткнулся на свежую статью. На Хабре нет почти ни слова о RethinkDB, в связи с чем было решено сделать этот перевод. Добро пожаловать под кат!

image

База данных RethinkDB упрощает разработку веб-приложений, рассчитанных на обновления в режиме реального времени.
Читать дальше →
Total votes 25: ↑23 and ↓2 +21
Comments 36

Тестирование конвертеров шрифтов

Reading time 3 min
Views 100K

Всем привет.

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

Хоть на самом деле конвертеров уже появилось великое множество, не все могут превращать otf\ttf в woff\eot\svg. Существуют специализированные сервисы, которые работают с другими форматами(.pfb, .dfont и др.).
Читать дальше →
Total votes 27: ↑26 and ↓1 +25
Comments 16

Scrollissimo – плагин для плавной скролл-анимации

Reading time 4 min
Views 31K
Scrollissimo


В последнее время все большую популярность набирают анимации, проигрываемые по мере прокрутки страницы. Однако, я заметил, что подавляющее большинство браузеров не создано для таких анимаций. Прокрутка страниц мышью в них происходит не плавно (как в Firefox), а ступенчато. В результате скролл-анимации на страницах проигрываются тоже рывками. По моему мнению, проблема здесь совсем не в браузерах, а в плагинах, которые используются для создания этих анимаций. Потому что именно они допускают резкие скачки. Я считаю, что для любой анимации должна быть какая-то максимальная скорость воспроизведения, при которой анимация будет плавной, а пользователь сможет понять, что же произошло на странице. Если вы со мной согласны, то плавно и без рывков перемещайтесь под кат.
Читать дальше →
Total votes 15: ↑13 and ↓2 +11
Comments 15

Как создавать Pixel Perfect изображения в Adobe Illustrator

Reading time 14 min
Views 83K

От переводчика


Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

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

Краткое содержание


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

Настройки Abobe Illustrator


  1. Edit > Preferences > Units > General → Pixels
    Edit > Preferences > Units > Stroke → Pixels
  2. Edit > Preferences > Guides & Grid > Gridline every → 1px
    Edit > Preferences > Guides & Grid > Subdivisions → 1px
  3. Edit > Preferences > General > Keyboard Increment → 1px
  4. View > Snap to Grid
    View > Snap to Point
  5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator




Читать дальше →
Total votes 31: ↑27 and ↓4 +23
Comments 6

Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 1

Reading time 11 min
Views 113K
(от 27 июля 2012)
При написании нативного веб-приложения легко начать чувствовать себя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.

Короче, мы застреваем в спагетти-коде. К счастью, есть современные JS-фреймворки (библиотеки, задающие, кроме функций, правила организации кода --прим. перев.), помогающие поддерживать структуру и организованность в проекте, облегчающие ремонтопригодность в будущем.

■ Что такое MVC или, лучше сказать, MV*?


Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:
Читать дальше →
Total votes 58: ↑56 and ↓2 +54
Comments 23

Information

Rating
Does not participate
Location
Екатеринбург, Свердловская обл., Россия
Date of birth
Registered
Activity