Как стать автором
Обновить
2
0
Oleg Novikov @oinovikov

Пользователь

Отправить сообщение

Что нужно знать об устройстве коллекций, основанных на хешировании

Время на прочтение 4 мин
Количество просмотров 20K
Всем привет. На связи Владислав Родин. В настоящее время я являюсь руководителем курса «Архитектор высоких нагрузок» в OTUS, а также преподаю на курсах, посвященных архитектуре ПО.

Помимо преподавания, как вы могли заметить, я занимаюсь написанием авторского материала для блога OTUS на хабре и сегодняшнюю статью хочу посвятить запуску нового потока курса «Алгоритмы для разработчиков».





Введение


Хеш-таблицы (HashMap) наравне с динамическими массивами являются самыми популярными структурами данных, применяемыми в production'е. Очень часто можно услышать вопросы на собеседованиях касаемо их предназначения, особенностей их внутреннего устройства, а также связанных с ними алгоритмов. Данная структура данных является классической и встречается не только в Java, но и во многих других языках программирования.
Читать дальше →
Всего голосов 16: ↑14 и ↓2 +12
Комментарии 4

Как работают браузеры: принципы работы современных веб-браузеров

Время на прочтение 2 мин
Количество просмотров 189K
Просматривая одно из обучающих видео "Школы разработки интерфейсов" Яндекса, наткнулся на ссылку на офигенный труд израильской веб-программистки Тали Гарсиэль (Tali Garsiel) "How browsers work" (Как работают браузеры).

Она в течение нескольких лет отслеживала всю издаваемую информацию о внутреннем устройстве браузеров, изучала исходный код WebKit и Gecko и, в конце концов, собрала все воедино. Вот что пишет сама Тали:
Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++...
Пролистав, я был поражен — отличная работа. Внутреннее устройство браузеров, алгоритмы разбора — все хорошо иллюстрировано, доступно и понятно. И без излишних подробностей, страниц на 30-40. Как раз то, что нужно. Решил — это надо обязательно перевести. Покопался еще немного — оказалось перевод уже как 1,5 года есть!

Возможно для кого-то это давно уже не новость, но, надеюсь, для тех, кто не слышал, будет полезно (на хабре упоминаний не нашел).

Под катом содержание перевода, чтобы решить стоит ли читать.
Читать дальше →
Всего голосов 200: ↑179 и ↓21 +158
Комментарии 27

Рендеринг WEB-страницы: что об этом должен знать front-end разработчик

Время на прочтение 6 мин
Количество просмотров 226K
Приветствую вас, уважаемые хабравчане! Сегодня я бы хотел осветить вопрос рендеринга в веб-разработке. Конечно, на эту тему уже написано много статей, но, как мне показалась, вся информация довольно разрознена и отрывочна. По крайней мере, чтобы собрать всю картину в своей голове и осмыслить её, мне пришлось проанализировать немало информации (в основном — англоязычной). Именно поэтому я решил формализовать свои знания в статью, и поделиться результатом с сообществом Хабра. Думаю, информация будет полезна как начинающим веб-разработчикам, так и более опытным, чтобы освежить и структурировать свои знания.

Данное направление можно и нужно оптимизировать на этапе вёрстки/frontend-разработки, поскольку, очевидно, что разметка, стили и скрипты принимают в рендеринге непосредственное участие. Для этого соответствующие специалисты должны знать некоторые тонкости.
Читать дальше →
Всего голосов 121: ↑110 и ↓11 +99
Комментарии 42

Вводим текст красиво

Время на прочтение 8 мин
Количество просмотров 53K
Сырые, но важные данные вроде номеров телефонов или кредиток — это именно то, что пользователи чаще всего вводят в наших приложениях. И с этим есть огромная проблема. Перепроверять 16 цифр своего Мастеркарда или 11 цифр номера телефона — это сущий ад для любого юзера. Решать эту проблему, естественно, приходится разработчикам, от лица которых я и пишу этот пост.

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

Для начала хотелось следующего:

  1. Указал маску вроде +7 (___) ___-__-__
  2. Повесил её на EditText
  3. ...
  4. PROFIT

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

Начав работать над этим направлением, мы осознали, что создание полноценного языка описания формата — это сродни написанию своего RegEx-движка, что, честно говоря, в наши планы не входило. В итоге мы пришли к варианту, когда такой язык при необходимости можно добавить в любой момент (даже в клиентском коде) или пользоваться простеньким DSL, доступным из коробки (что в нашей практике решило 90% задач).

Посмотрев на то, что получилось, мы решили, что это круто, и надо бы поделиться с сообществом. Так у нас и родилась библиотека для Android-разработки Decoro. И сейчас я покажу пару фокусов из её арсенала.
Читать дальше →
Всего голосов 45: ↑44 и ↓1 +43
Комментарии 27

Полное руководство по созданию классических приложений на JavaScript

Время на прочтение 8 мин
Количество просмотров 15K

Еще недавно разработка классических приложений считалась сложной задачей — для этого приходилось учить специальный язык программирования, например Java или C++. К счастью, сейчас веб-разработчики могут создавать прекрасные классические приложения, конвертируя код JavaScript в полноценные программы. Давайте разберемся, что для этого нужно.

Читать далее
Всего голосов 12: ↑4 и ↓8 -4
Комментарии 3

Беспроводные устройства Xiaomi в умном доме ioBroker

Время на прочтение 9 мин
Количество просмотров 43K
Приветствую всех любителей домашней автоматизации. Решил поделиться опытом использования беспроводных Xiaomi устройств с интерфейсом ZigBee. Я, честно говоря, против применения любых беспроводных устройств в любой автоматизации, от серьезных АСУТП больших объектов до малой автоматики типа охранно-пожарной сигнализации или умного дома, но… Решения Xiaomi подкупили дешевизной, доступностью, отличным дизайном и множеством положительных отзывов от пользователей, решил попробовать.

Этот пост следует воспринимать, как пошаговую инструкцию для интеграции ZigBee устройств в инфраструктуру умного дома. Описанное здесь ни в коем случае не является аксиомой и можно найти много других способов подключения ZigBee устройств. Если всё же пропускать детальное описание, то можно составить впечатление о сложности или легкости объединения устройств от разных производителей в одну локальную платформу на примере ZigBee и ioBroker (о нём чуть позже). Я расскажу в этой статье, как подключить устройства к умному дому, отобразить информацию с них на планшете или просто в браузере и отправить сообщения через телеграм о смене состояния устройств. Если я вас заинтересовал, то прошу под кат.
Всего голосов 35: ↑35 и ↓0 +35
Комментарии 36

Создаём королевскую форму для приёма банковских карт

Время на прочтение 8 мин
Количество просмотров 17K


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


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


Для создания формы мы будем использовать следующие инструменты:


  1. Нативный JS
  2. BinKing — вспомогательный сервис для создания платёжных форм: https://github.com/sdandteam/binking
  3. IMask — инструмент для создания масок полей ввода: https://imask.js.org/
  4. Tippy — инструмент для создания тултипов: https://atomiks.github.io/tippyjs/

Читать дальше →
Всего голосов 16: ↑6 и ↓10 -4
Комментарии 22

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

Время на прочтение 17 мин
Количество просмотров 358K


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

Если вы давно хотели разобраться в CORS и вас достали постоянные ошибки, добро пожаловать под кат.

Ошибка в консоли вашего браузера


No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/

Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy.


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

Эти всплывающие ошибки в процессе разработки просто раздражают. Но на самом деле, CORS — это невероятно полезный механизм в мире неправильно настроенных веб серверов, злоумышленников, орудующих в интернете и организаций, продвигающих веб-стандарты.

Но давайте-ка пойдем к истокам…
Читать дальше →
Всего голосов 59: ↑58 и ↓1 +57
Комментарии 14

Ответ HR-девицам

Время на прочтение 2 мин
Количество просмотров 78K
Re: IT-холостяк и три HR-девицы to HRMuse

HR, позволь тебе ответить
С высот айтишника седин:
Ты знаешь, прогеры — не дети,
Мы не последний хрен едим.


Читать дальше →
Всего голосов 298: ↑253 и ↓45 +208
Комментарии 44

Уважаемые рекрутеры, а вы не офигели?

Время на прочтение 3 мин
Количество просмотров 196K

Ловите мое никому неинтересное мнение по поводу проблемы, от которой у меня уже знатно подгорает.

Нахожусь в поиске работы. Но думаю свое резюме убрать с сайта соискателей, ибо достало.

99% моего времени отнимает прочтение рекрутерского спама, ответы на по определению неподходящие вакансии и прохождение технических интервью, в которых я не пройду, потому что у меня ИЗНАЧАЛЬНО нерелевантный опыт. Это мы вместе с техническим интервьюером понимаем уже в процессе разговора.

Читать далее
Всего голосов 398: ↑333 и ↓65 +268
Комментарии 411

Китайский «Кикстартер» от Xiaomi: лечим бессонницу электричеством и умными подушками

Время на прочтение 5 мин
Количество просмотров 4.6K

Xiaomi, как я рассказывал раньше, ловко перенесла идею западного краудфандинга на китайскую почву. Идея себя оправдала: проекты на платформе Youpin множатся. Я просмотрел три последних месяца и собрал еще топ-10 успешных проектов. Активнее всего пользователи вкладывались в гаджеты для борьбы с бессонницей, многофункциональные инструменты и умную технику для дома. Интересно узнать, насколько выбор китайских пользователей совпадает с интересами русскоязычной аудитории.

Чем нас сегодня порадует Xiaomi?
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 3

Создание видеочата с помощью Node.js + Socket.io + WebRTC

Время на прочтение 8 мин
Количество просмотров 29K

Сегодня, специально к старту нового потока по веб-разработке, поделимся с вами туториалом, из которого вы узнаете, как создать видеочат с помощью JavaScript и NodeJS. Также вы научитесь использовать PeerJS, WebRTC и Socket.io.

Читать далее
Всего голосов 8: ↑5 и ↓3 +2
Комментарии 10

Частые ошибки в настройках Nginx, из-за которых веб-сервер становится уязвимым

Время на прочтение 8 мин
Количество просмотров 62K

Nginx — это веб-сервер, на котором работает треть всех сайтов в мире. Но если забыть или проигнорировать некоторые ошибки в настройках, можно стать отличной мишенью для злоумышленников. Detectify Crowdsource подготовил список наиболее часто встречающихся ошибок, делающих сайт уязвимым для атак.

Nginx — один из наиболее часто используемых веб-серверов в Интернете, поскольку он модульный, отзывчивый под нагрузкой и может масштабироваться на минимальном железе. Компания Detectify регулярно сканирует Nginx на предмет неправильных настроек и уязвимостей, из-за которых могут пострадать пользователи. Найденные уязвимости потом внедряются в качестве теста безопасности в сканер веб-приложений.

Мы проанализировали почти 50 000 уникальных файлов конфигурации Nginx, загруженных с GitHub с помощью Google BigQuery. С помощью собранных данных нам удалось выяснить,  какие ошибки в конфигурациях встречаются чаще всего.

Читать далее
Всего голосов 68: ↑67 и ↓1 +66
Комментарии 23

Сделаем худший Vue.js в мире

Время на прочтение 5 мин
Количество просмотров 16K
Некоторое время назад я опубликовал похожую статью про React, где с помощью пары строк кода мы создали крошечный клон React.js с нуля. Но React — далеко не единственный инструмент в современном фронтенд-мире, Vue.js стремительно набирает популярность. Давайте разберемся, как работает этот фреймворк, и создадим примитивный клон, похожий на Vue.js, в образовательных целях.

Реактивность


Как и React.js, Vue является реактивным, то есть все изменения в состоянии приложения автоматически отражаются в DOM. Но в отличие от React, Vue отслеживает зависимости во время рендеринга и обновляет только связанные части без каких-либо «сравнений».

Ключ к реактивности Vue.js — это метод Object.defineProperty. Он позволяет указывать настраиваемый метод getter / setter для поля объекта и перехватывать каждый доступ к нему:
Читать дальше →
Всего голосов 32: ↑31 и ↓1 +30
Комментарии 4

Принципы для разработки: KISS, DRY, YAGNI, BDUF, SOLID, APO и бритва Оккама

Время на прочтение 8 мин
Количество просмотров 232K
image

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

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

Последовательное применение этих принципов упростит ваш переход от миддла к сеньору. Вы можете обнаружить, что некоторые (вероятно) вы применяете интуитивно.

Принципов много. Мы остановимся на семи самых важных. Их использование поможет вам в развитии и позволит стать лучшим программистом.

1. YAGNI

You Aren’t Gonna Need It / Вам это не понадобится

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

Этот принцип применим при рефакторинге. Если вы занимаетесь рефакторингом метода, класса или файла, не бойтесь удалять лишние методы. Даже если раньше они были полезны – теперь они не нужны.

Может наступить день, когда они снова понадобятся – тогда вы сможете воспользоваться git-репозиторием, чтобы воскресить их из мертвых.
Читать дальше →
Всего голосов 22: ↑19 и ↓3 +16
Комментарии 9

Как я узнал о тайных услугах Мегафона

Время на прочтение 3 мин
Количество просмотров 125K
Добрый день всем!

Началось всё с того, что поздно вечером мне позвонила девушка из Мегафона и пролепетала что-то про скидочные купоны-талоны, которые появятся в моём личном кабинете. Мол, это просто партнерская программа и она не хочет, чтобы я пропустил такую прекрасную возможность.
Читать дальше →
Всего голосов 192: ↑179 и ↓13 +166
Комментарии 293

Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

Время на прочтение 14 мин
Количество просмотров 217K


Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.

Содержание:

  1. Кто такой фронтендер и чем он занимается?
  2. С чего начать и что читать? Чек-лист обучения
  3. Какие трудности могут быть? Ошибки в начале пути
  4. Подготовка к собеседованию на Junior-разработчика

Читать дальше →
Всего голосов 34: ↑33 и ↓1 +32
Комментарии 22

Делаем станцию мониторинга загрязнённости воздуха в домашних условиях

Время на прочтение 6 мин
Количество просмотров 28K

В этой статье я расскажу о том, как собрать датчик загрязнённости воздуха в домашних условиях и зачем это нужно.

Читать далее
Всего голосов 37: ↑34 и ↓3 +31
Комментарии 69

10 современных раскладок в одну строку CSS-кода

Время на прочтение 7 мин
Количество просмотров 32K

В данной статье рассматривается несколько эффективных строк CSS-кода, которые выполняют серьезную работу и помогают создавать надёжную современную разметку.

Читать далее
Всего голосов 41: ↑40 и ↓1 +39
Комментарии 12

Вы не знаете как должны работать модальные окна

Время на прочтение 10 мин
Количество просмотров 26K

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


В этом материале я постарался собрать максимально полный свод правил, рекомендаций и примеров реализации по которым модальные окна должны работать.


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


Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

Читать дальше →
Всего голосов 26: ↑26 и ↓0 +26
Комментарии 20

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность