Pull to refresh
19
0
Александр Духовняк @shanhaichik

Frontend

Кроссбраузерная кастомизация системного скроллбара

Reading time 8 min
Views 144K
2ГИС corporate blog JavaScript *HTML *


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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.
Подробности
Total votes 127: ↑116 and ↓11 +105
Comments 132

Кластер Docker Swarm за 30 секунд

Reading time 5 min
Views 85K
Southbridge corporate blog System administration **nix *Virtualization *Server Administration *
Tutorial
Translation


В этом июне, в качестве лейтмотива конференции DockerCon мы видели демо, в котором 3-узловой Swarm-кластер был создан за 30 секунд используя набор инструментов для кластеризации Swarm, интегрированную в Docker Engine 1.12.


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


Читать дальше →
Total votes 29: ↑27 and ↓2 +25
Comments 7

Service Workers. Инструкция по применению

Reading time 9 min
Views 108K
2ГИС corporate blog Website development *JavaScript *Programming *Client optimization *


Количество выходов в интернет с мобильных устройств ежегодно растёт на 2-4% в год. Качество связи не успевает за такими темпами. Как итог, даже самое лучшее веб-приложение обеспечит ужасный опыт, если пользователь не сможет его загрузить.

Проблема в том, что до сих пор нет хорошего механизма управления кэшем ресурсов и результатов сетевых запросов. В своей статье я хочу рассказать как Service Worker (SW) может помочь в решении этой задачи. Объясню в формате рецептов — какие элементы и в какой пропорции смешать, чтобы получить нужный результат, исходя из задачи и требований.
Поехали!
Total votes 57: ↑57 and ↓0 +57
Comments 39

Быстрый запуск Github репозитория c Angular CLI в вашем браузере

Reading time 2 min
Views 11K
Website development *JavaScript *Angular *
Translation
image

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

Именно поэтому была создана среда разработки StackBlitz, которая позволяет редактировать Angular CLI проекты в браузере. В ней сейчас пишутся примеры из официальной документации Angular.io!

Круто было бы быстро запустить любой Angular CLI проект с Github прямо в браузере, просто изменив URL-адрес?
Читать дальше →
Total votes 32: ↑29 and ↓3 +26
Comments 3

Знай сложности алгоритмов

Reading time 2 min
Views 887K
Algorithms *
Translation
Эта статья рассказывает о времени выполнения и о расходе памяти большинства алгоритмов используемых в информатике. В прошлом, когда я готовился к прохождению собеседования я потратил много времени исследуя интернет для поиска информации о лучшем, среднем и худшем случае работы алгоритмов поиска и сортировки, чтобы заданный вопрос на собеседовании не поставил меня в тупик. За последние несколько лет я проходил интервью в нескольких стартапах из Силиконовой долины, а также в некоторых крупных компаниях таких как Yahoo, eBay, LinkedIn и Google и каждый раз, когда я готовился к интервью, я подумал: «Почему никто не создал хорошую шпаргалку по асимптотической сложности алгоритмов? ». Чтобы сохранить ваше время я создал такую шпаргалку. Наслаждайтесь!
Читать дальше →
Total votes 312: ↑296 and ↓16 +280
Comments 99

«Быстрорастворимый» фронтенд. Лекция в Яндексе

Reading time 12 min
Views 24K
Яндекс corporate blog JavaScript *Client optimization *Interfaces *
Ускорить доставку элементов фронтенда на устройство пользователя можно несколькими способами. Разработчик Артём Белов из самарского офиса норвежской компании Cxense попробовал самые многообещающие: HTTP/2, Server Push, Service Worker, а также оптимизацию в процессе сборки и на стороне клиента. Итак, что же нужно сделать, чтобы сократить время отклика приложения до минимума?


Выясняется, что алгоритмы сжатия существуют уже давно. Это произошло где-то в июне — видимо, где-то над Самарой пролетал метеорит и идея проверить новые алгоритмы сжатия, Zopfli и Brotli, пришла мне и парню из соседней компании. Больше чем уверен, вы читали его статью, это Александр Субботин. Статья разошлась на Medium, и он известен, а я нет.

Total votes 71: ↑68 and ↓3 +65
Comments 21

Быстрые релизы огромного масштаба

Reading time 7 min
Views 20K
Website development *Open source *Development of mobile applications *Web services testing *Build automation *
Translation
Со временем в софтверной индустрии придумали несколько способов более быстрого и безопасного выпуска качественного кода. Многие основаны на идеях вроде непрерывной интеграции, непрерывной поставки ПО, гибкой методологии разработки, DevOps и разработки через тестирование. Все эти методологии объединяет одно: они позволяют разработчикам быстро выпускать код безопасными, небольшими, последовательными шагами.

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

В течение многих лет мы обновляли фронтенд Facebook трижды в день, используя простую стратегию веток master и release. Инженеры избирательно выбирали из ветви master изменения в коде, которые прошли ряд автоматизированных тестов, для включения в ветвь release, откуда происходили ежедневные обновления. В целом, таким способом выбиралось от 500 до 700 изменений в день. Раз в неделю мы отрезали новую ветвь release и собирали изменения, которые не отобрались в течение недели.


Читать дальше →
Total votes 29: ↑29 and ↓0 +29
Comments 7

Как я использую git

Reading time 6 min
Views 89K
Git *Version control systems *

Intro


Основам git мне пришлось научиться на своем первом месте работы (около трех лет назад).
С тех пор я считал, что для полноценной работы нужно запомнить всего-лишь несколько команд:


  • git add <path>
  • git commit
  • git checkout <path/branch>
  • git checkout -b <new branch>

И дополнительно:


  • git push/pull
  • git merge <branch>
  • git rebase master (а что, можно еще и на другие ветки ребейзить? О_о)

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

Читать дальше →
Total votes 117: ↑106 and ↓11 +95
Comments 195

Что за черт, Javascript

Reading time 17 min
Views 147K
VK corporate blog Abnormal programming *Website development *JavaScript *IT Standards *
Translation


Этот пост — список забавных и хитрых примеров на JavaScript. Это отличный язык. У него простой синтаксис, большая экосистема и, что гораздо важнее, огромное сообщество.


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

Читать дальше →
Total votes 104: ↑89 and ↓15 +74
Comments 155

33 способа ускорить ваш фронтенд в 2017 году

Reading time 20 min
Views 85K
Badoo corporate blog High performance *Website development *JavaScript *Programming *
Translation

enter image description here


Вы уже используете прогрессивную загрузку? А как насчёт технологий Tree Shaking и разбиения кода в React и Angular? Вы настроили сжатие Brotli или Zopfli, OCSP stapling и HPACK-сжатие? А как у вас обстоят дела с оптимизацией ресурсов и клиентской части, со вложенностью CSS? Не говоря уже о IPv6, HTTP/2 и сервис-воркерах.

Читать дальше →
Total votes 87: ↑84 and ↓3 +81
Comments 39

WebRTC: Делаем peer to peer игру на javascript

Reading time 13 min
Views 37K
Badoo corporate blog JavaScript *Programming *Game development *Canvas *
Tutorial
Недавно мне довелось поработать над прототипом видеочата. Это был отличный повод поближе познакомиться с концепциями WebRTC и опробовать их на практике. Как правило, когда говорят про WebRTC, подразумевают организацию аудио- и видеосвязи, но эта технология может применяться и для других интересных вещей. Я решил попробовать сделать peer-to-peer игру и поделиться опытом ее создания. Видео того что получилось и подробности реализации под катом.


Читать дальше →
Total votes 94: ↑92 and ↓2 +90
Comments 52

Структуры данных для самых маленьких

Reading time 22 min
Views 321K
Website development *JavaScript *Algorithms *
Translation
James Kyle как-то раз взял и написал пост про структуры данных, добавив их реализацию на JavaScript. А я взял и перевёл.

Дисклеймер: в посте много ascii-графики. Не стоит его читать с мобильного устройства — вас разочарует форматирование текста.


Читать дальше →
Total votes 91: ↑87 and ↓4 +83
Comments 51

Фильтруй правильно, или вредные советы по фильтрации в Angular.Js

Reading time 3 min
Views 11K
Инфопульс Украина corporate blog Website development *JavaScript *Angular *


Всем привет. Эта статья писалась довольно долго, пару раз переписывалась заново, и, в итоге, меня не устроила. Уж слишком менторский получался тон. А тут, вдруг, грядет пятница, конец спринта, и значит, можно расслабиться. И так, не воспринимайте слишком серьезно, всего лишь несколько советов о том, как готовить фильтры в Angular.JS

Кому интересно или хочется немного расслабиться — вперед под кат и всем хорошей пятницы!
Путь ниндзя здесь начинается.
Total votes 17: ↑14 and ↓3 +11
Comments 20

5 достойных изучения проектов с открытым исходным кодом на React Native

Reading time 2 min
Views 40K
Plarium corporate blog Programming *Development for iOS *Development of mobile applications *ReactJS *
Translation
Изучение открытого исходного кода – это лучший способ научиться писать качественный код, особенно если речь идет о новом инструменте с не полностью сформировавшимися стандартами. Одним из таких инструментов является React Native. Он постоянно дорабатывается, функциональность его API расширяется с каждым релизом, а количество библиотек растет. В то же время большинство обучающих ресурсов по работе с React Native очень поверхностны и не идут дальше вступительных рекомендаций. Но даже несмотря на это, изучение исходного кода должно быть нормой для каждого разработчика.

Я хочу представить 5 проектов с открытым исходным кодом, которые я изучаю сам и советую остальным.

Читать дальше →
Total votes 29: ↑25 and ↓4 +21
Comments 7

Конкурс по программированию на JS: Классификатор слов

Reading time 5 min
Views 73K
Hola corporate blog Sport programming *Entertaining tasks JavaScript *Algorithms *
Компания Hola объявляет начало весеннего конкурса по программированию! Призовой фонд увеличен:

  1. Первое место: 3000 USD.
  2. Второе место: 2000 USD.
  3. Третье место: 1000 USD.
  4. Возможно, мы решим отметить чьи-то чрезвычайно оригинальные решения двумя специальными призами в 400 USD.
  5. Если Вы отправите кому-то ссылку на этот конкурс, поставив наш адрес в CC, и этот человек займёт призовое место, Вы получите половину суммы приза (разумеется, не в ущерб награде победителя). За одного победителя такую награду может получить только один человек — тот, кто отправил ссылку первым.

Мы ищем талантливых программистов, поэтому авторы интересных решений будут приглашены на собеседования.

Опубликовано дополнение: Тестовая программа, часто задаваемые вопросы, типичные ошибки.
Опубликовано дополнение: О ходе тестирования.


Правила


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

Условия конкурса на английском языке размещены на GitHub. Ниже — перевод на русский язык.

Читать дальше →
Total votes 38: ↑34 and ↓4 +30
Comments 620

Async/Await в javascript. Взгляд со стороны

Reading time 6 min
Views 135K
JavaScript *Programming *
Sandbox


В последнее время все больше моих друзей, коллег и людей из сообщества говорят про работу с асинхронными функциями и в частности про использование async/await на своих проектах. Я решил разобраться для себя, что это за зверь и стоит ли его использоваться при разработке боевых проектов.

Первое что хочется развеять, это распространенное заблуждение о том, что async/await — это фича ES7.

По моему мнению, использование терминов ES6 и ES7 само по себе не очень верное и может ввести разработчиков в заблуждение. После удачного релиза спецификации ES2015, называемой ES6, у многих людей сложилось ошибочное мнение, что все в нее не вошло и заполифилено через babel — это фичи ES7. Это не так. Вот список того что появится с релизом спецификации ES2016. Как видите он не такой большой и async/await в нем никак не значится.

Я хочу, чтобы мы говорили правильно. И говоря о той, или иной фиче, ссылались на конкретную спецификацию в рамках которой она описана и реализована, а не мифические ES6, ES7 … ESN.
Читать дальше →
Total votes 37: ↑34 and ↓3 +31
Comments 53

Атом — минимальный кирпичик реактивного приложения

Reading time 15 min
Views 45K
JavaScript *Programming *Algorithms *
Recovery mode
Здравствуйте, меня зовут Дмитрий Карловский и я… клиент-сайд разработчик. За плечами у меня 8 лет поддержки самых различных сайтов и веб-приложений: от никому не известных интернет-магазинов, до таких гигантов как Яндекс. И всё это время я не только фигачу в продакшн, но и точу топор, чтобы быть на самом острие технологий. А теперь, когда вы знаете, что я не просто хрен с горы, позвольте рассказать вам про один архитектурный приём, которым я пользуюсь последний год.

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

Осторожно: чтение может вызвать вывих мозга, приступ холивара, а также бессонные ночи рефакторинга.
Читать дальше →
Total votes 55: ↑49 and ↓6 +43
Comments 36

Почему я больше не использую MVC-фреймворки

Reading time 16 min
Views 132K
Website development *JavaScript *Functional Programming *Angular *ReactJS *
Translation


Уважаемые хабравчане.

Поскольку дискуссия вокруг статьи идет весьма активно, Жан-Жак Дюбре (он читает комментарии) решил организовать чаты в gitter.

Вы можете пообщаться с ним лично в следующих чатах:
https://gitter.im/jdubray/sam
https://gitter.im/jdubray/sam-examples
https://gitter.im/jdubray/sam-architecture

Также автор статьи разместил примеры кода здесь: https://bitbucket.org/snippets/jdubray/

По поводу кода он оставил следующий комментарий:
I don't code for a living, so I am not the best developer, but people can get a sense of how the pattern works and that you can do the exact same thing as React + Redux + Relay with plain JavaScript functions, no need for all these bloated library (and of course you don't need GraphQL).
Читать дальше →
Total votes 78: ↑67 and ↓11 +56
Comments 254

Повышаем отказоустойчивость системы на nodejs

Reading time 5 min
Views 37K
Website development *Node.JS *
Отказоустойчивость системы на nodejs
3 года назад я поверил в будущее nodejs и начал кампанию по имплементации этого языка в самые “проблемные” сервисы нашего проекта. У нас все получалось — нагрузка падала, стабильность повышалась. Но все же были грабли, о которых захотелось рассказать.

Это не исчерпывающее руководство к действию, просто я делюсь своим опытом, если вы профи в nodejs можете дописать в коментах свои рекомендации, на которые я с удовольствием сошлюсь в статье.
Читать дальше →
Total votes 43: ↑36 and ↓7 +29
Comments 48

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Registered
Activity