Веб-разработка *

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

Реализация этого эффекта на CSS выглядит вполне убедительно. Мне пришлось немного поломать голову, чтобы выяснить, как он работает, и теперь я хочу объяснить это вам. Кроме того, я воспроизвёл этот эффект не только для текста, но и для растровых изображений и SVG, а так же написал несколько примесей Sass, чтобы облегчить работу с ним.

Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

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

Очередная история переезда на чужбину в нескольких частях.

Кратко об авторе

30 лет. Специальность — радиофизик. Специализация — Компьютерная электроника. Основное направление — разработка электроники и встраиваемого программного обеспечения. Опыт работы — 10 лет. Опыт фриланса — 4 года.

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

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

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

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

Дисклеймер от автора (автор — девушка): Я не разрабатываю движки баз данных. Я создаю веб-приложения. Я участвую в 4-6 разных проектах каждый год, то есть создаю много веб-приложений. Я вижу много приложений с различными требованиями и различными потребностями хранения данных. Я разворачивала большинство хранилищ, о которых вы слышали, и несколько, о которых даже не подозреваете.

Несколько раз я делала неправильный выбор СУБД. Эта история об одном таком выборе — почему мы сделали такой выбор, как бы узнали что выбор был неверен и как мы с этим боролись.Это все произошло на проекте с открытым исходным кодом, называемым Diaspora.

КДПВ

Вечерело

Мы с товарищем, сделали простенький тест (github) на проверку доступности data-uri в браузерах. Выглядит он следующим образом:



В textarea javascript'ом вставляется navigator.userAgent. В этот момент я не знаю, что меня стукнуло в голову, но вместо DOMContentLoaded, я написал . По-быстрому проверив корректную работу в десктопных браузерах и на нескольких мобильных устройствах, подключённых к интернету через wi-fi, мы успокоились и разошлись по домам.

Солнце продиралось сквозь занавески

Утром, в полупустом вагоне метро, я как всегда открыл браузер на своем телефоне, на котором со вчерашнего вечера была открыта тестовая страничка. Сказать, что я удивился, когда я не увидел вывода userAgent внутри textarea — ничего не сказать.

Добравшись до компьютера, решил потратить немного времени на поиск проблемы. Запустив страничку на десктопе и в эмуляторе, я ничего не заметил. Открыл на телефоне. Чудеса! Всё работает.

Увидев включённый значок wi-fi, я начал догадываться о причинах проблемы. Я отключил wi-fi, подключил телефон к компьютеру и начал дебаг с помощью веб-инспектора десктопного сафари.

Недавно написал свой велосипед и выложил его на хабре. Вот он: «Простейший Connection pool без DataSource в Java». Статья не из самых удачных, только прошу больше не минусовать. Итак, чтобы не повторять такие ошибки самому и, возможно, предостеречь кого-то от таких ошибок, решил перевести статью «Seven Things You Should Never Code Yourself» достаточно известного в среде open-source деятеля IT-области — Andy Lester'а. Итак, кому интересно, прошу под кат.

Исповедь 1

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

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

К сожалению, давно пропали топики-ссылки, но иногда бывают крайне занимательные вещи из первых рук. Рекомендую пост Анатолия Воробея (работает разработчиком в «Гугле»).

В видеоформате MP4 (стандарт MPEG-4) есть возможность записать «время создания» любого потока данных, с помощью специальной метки. Значение этой метки в стандарте: количество секунд, прошедших с 1 января 1904 года, или так называемое «время по эпохе макинтоша», потому что маки первыми стали использовать такой отсчет времени. Меж тем, в современных серверах намного проще иметь дело с «временем по эпохе Юникса», а именно количеством секунд, прошедших с 1 января 1970 года. В результате этого, во множестве программ, которые работают на Линуксе или других юниксовских операционных системах, есть кусок кода, который выглядит примерно так:

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

Чему равна константа «разница между временем по юниксу и временем по макинтошу»? Она равна в точности числу секунд, прошедших между 1 января 1904 и 1 января 1970. Это 66 лет, из которых 17 были високосными (проверьте, если не доверяете мне). Всего дней получается: 66 * 365 + 17 = 24 107, а секунд, учитывая 86 400 секунд в сутках: 24 107 * 86 400 = 2 082 844 800. Это правильное значение константы.

Всем привет!

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

Когда много людей, используя разные инструменты, пишут и редактируют css, со временем этот css может получиться очень запутанным, неконсистентым и в целом начинает выглядеть плохо. Например, кому-то удобнее писать вендорные префиксы в одном порядке, кому-то — в другом, кто-то ставит кавычки вокруг url, кто-то — нет, а кто-нибудь фикся срочную багу к релизу мог бы, к примеру, написать position: relative в начале блока свойств, незаметив что где-нибудь внизу между color и box-shadow, уже есть position: absolute, и долго гадать, почему у него ничего не работает.



Но несмотря на то, что все пишут код по-разному, у нас в репозитории идеальный порядок: css-код полностью консистентен, и прекрасно выглядит. Весь.

Как мы этого добились, можно прочитать под катом.

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

DC.js

Библиотека позволяет создавать великолепные многоуровневые/масштабируемые кроссплатформенные графики и диаграммы с моментальным перерендерингом при пользовательском взаимодействии. За процесс визуализации отвечает знаменитая d3.js, а за анализ многомерных наборов данных crossfilter.js. Кстати кроссфильтр — проект небезызвестной компании Square.

chart.renderlet(function(chart){
    // smooth the rendering through event throttling
    dc.events.trigger(function(){
        // focus some other chart to the range selected by user on this chart
        someOtherChart.focus(chart.filter());
    });
})

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

Так, Mac OS X впервые была показана под кодовым названием Rhapsody в 1997 году, но выпуск первой версии состоялся только спустя четыре года. Выпуск Windows Vista планировался на 2003 год как второстепенное обновление между Windows XP и полноценной новой версией, но ждать пришлось целых три года.

Однако оба упомянутых примера – ничто в сравнении с проектом Xanadu, который в конце апреля был без лишней помпы представлен на мероприятии в калифорнийском Чемпенском университете. Разработка Xanadu началась 54 года назад – в 1960 году. Это самое долго разрабатываемое ПО в истории.

Решил собрать сервисы, которые могут быть полезны веб-разработчикам и дизайнерам. Буду рад, если кто-то найдет для себя полезный сервис. Осторожно, под катом куча картинок!

Каждый программист — проектировщик API. Хорошие программы состоят из модулей, а протокол взаимодействия модулей — это тоже API. Хорошие модули используются повторно.

API — это большая сила и большая ответственность. У хорошего API будут благодарные пользователи; поддержка плохого превратится в кошмар.

Публичный API — не воробей, опубликуешь — не уберешь. Есть только одна попытка сделать все правильно, поэтому постарайся.

API должно быть легко использовать, но сложно использовать неправильно. Сделать что-то простое с помощью такого API должно быть просто; сложное — возможно; сделать что-то неправильно должно быть невозможно, или, по крайней мере, трудно.

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

Перед разработкой API собери требования с долей здорового скептицизма. Осознай общие задачи и реши их.

Оформляй требования как шаблоны использования API. Сверяйся с ними в процессе проектирования.

update (10.06.2014): Алексей опубликовал отчет ФБК за 2013й год, сослался на этот пост и обещал доделать систему в 2014м. И это круто. Хабр — сила.

Введение

Я должен был написать этот пост примерно год назад. В конце 2012го года, будучи директором Фонда Борьбы с Коррупцией, я, в числе других сотрудников фонда, организовывал второй фандрайзинг на РосПил, где мы сделали ряд обещаний касающихся разработки информационной системы Фонда, за которые давно следовало отчитаться.

РосПил — это первый действительно успешный общественный проект в России, логотип которого, кстати, придумал анонимный пользователь Хабра, а сайт на руби также бесплатно сделал Павел Сенько. Суть проекта — проведение формальных юридических расследований подозрительных закупок с zakupki.gov.ru путем обращения в госорганы и придания гласности результатам.



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

Именно поэтому в просьбу денег (рабочая ссылка на полную презентацию, см. слайд 25) было включено создание такой информационной системы. А также обещание раскрыть ее для других юристов и организаций. Фандрайзинг был успешен, собрали более десяти миллионов рублей и такую систему ФБК действительно разрабатывал под моим руководством в качестве директора фонда и менеджера продукта. Порядка миллиона рублей на это было потрачено и я чувствую себя обязанным официально поделиться сделаным на общественные (ваши) деньги. Весь код и дизайны лицензированы по открытой лицензии Creative Commons (Attribution-NonCommercial-ShareAlike 4.0 International), что отражено в договорах с Фондом подписанных Алексеем.

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

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

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

Мы решили провести небольшой эксперимент — пригласить шесть детей от шести до десяти лет и показать им гаджеты из недалёкого прошлого.

Хочу поделиться двумя примерами того, как западные компании уважительно относятся к деньгам клиентов и не стараются их оставить себе в случае очевидных ошибок клиентов. Этого очень не хватает русским компаниям, особенно сотовым операторам, которые дошли уже до того, что при неправильном вводе USSD-команды показывают «анекдот» и списывают от 30 рублей.

Сегодня в мастер ветку Django приняли совершенно дикий с точки зрения логики pull request.

Во всем проекте, включая код, общепринятые термины master/slave были изменены на leader/follower.

Вот как обосновал это автор патча fcurella:

Документация и некоторые тесты содержат ссылки на master/slave конфигурацию БД.
Несмотря на то что эта терминология использовалась достаточно долгое время, эти термины могут нести расистcкую подоплеку для пользователей.
Этот патч заменяет все использования master и slave на leader и follower.

Видимо Мизулина это достаточно интернациональный термин, а не только российский.

Это случилось: Хабр получил новый дизайн в стиле остальных ТМ-продуктов.



Вообще-то я люблю перемены, и редизайн привычных вещей вызывает в первую очередь оптимизм. Это как перестановка мебели в квартире: обстановочку освежать надо. Но помимо приятного чувства новизны некоторые изменения вызывают вопросы. Понятно, что Хабр уже не торт и мы всегда будем помнить его тёплое ламповое старое лого, но я хочу поговорить про то, что можно оценить вполне объективно — про юзабилити нового хабрадизайна.