Pull to refresh
8
0
Павел Щеголев @Carduelis

Principle Front-end Engineer

Send message

Habr, iXBT.Live, Pikabu и Яндекс.Дзен: сравнение четырех площадок и их ППА через один пост

Reading time6 min
Views30K
Внезапно подвернулся удобный случай сравнить в лоб четыре блоговые платформы и их программы поддержки авторов. Аудитория везде разная, но процент айтишников и гаджетоманов на всех высок.


Кому эта статья может быть интересна? Тем, кто связан с контентом, IT, ведет блог на одной из них и присматривается к другим.
Читать дальше →

Мама, я сделал Хабр

Reading time3 min
Views55K


Мне 17 лет и я уже несколько месяцев делаю клон мобильного приложения Хабра, назвав его соответствующе, модно, со стилем и пафосной точкой в конце — habra. Получилось реализовать несколько фич, которых пока нет ни в официальном приложении из плей маркета, ни на самом сайте.


Ссылка на web-приложение для самых нетерпеливых — habra.js.org. Всех остальных — прошу под кат.

Just for fun: Сколько «живет» iOS до Jailbreak

Reading time1 min
Views4.1K

Привет, Хабр!

Наткнулись тут в Википедии на информацию: сколько дней продержалась каждая версия iOS до Jailbreak. В итоге соорудили инфографику just for fun.

Читать далее

База данных населённых пунктов России

Reading time2 min
Views18K
Да, ещё одна. И совсем не всех. Эта база данных вовсе не собирается хвастаться десятками тысяч строк. Как раз наоборот: цель — предоставить необходимый минимум. Естественно, необходимость использовать справочник населённых пунктов есть во многих проектах. И получить полную БД можно легко и просто из ФИАС. Так зачем же нужен этот «велосипед»?
Читать дальше →

Визуализация сложных данных с использованием D3 и React

Reading time9 min
Views16K

Существует много возможныx вариантов реализации сложных графиков в ваших проектах. Я за несколько лет попробовал все возможные варианты. Сначала это были готовые библиотеки типа AmCharts 4. AmCharts сразу же оказался большим и неповоротливым. После этого были более гибкие и дружелюбные библиотеки, такие как Recharts. Recharts был поначалу очень хорош, но со временем сложные фичи создавались такими костылями, которые даже показывать стыдно, а какие-то фичи и вовсе были невозможны в реализации. Таким образом, я пришел к D3 и решаю на нем любые задачи, связанные с графиками. Иногда это занимает немного больше времени по сравнению с готовыми инструментами. Но остается одно неоспоримое преимущество – мы всегда знаем, что никогда не упремся в рамки и ваш код не захочется отправить в помойку через пару месяцев.


Какая цель этой статьи? Я хочу рассказать вам про крутой инструмент и о том, как его максимально эффективно использовать в связке с React. Мы последовательно разберем универсальный рецепт для построения компонентов любой сложности.


Создание Dashboard в Kibana для мониторинга логов

Reading time5 min
Views26K


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

В Ситимобил для работы с логами мы используем ELK-стек (ElasticSearch, Logstash, Kibana), и объём приходящих туда данных огромен. Найти в этой массе запросов проблемы, которые могут появиться после деплоя нового кода, довольно сложно. И для их наглядного выявления в Kibana есть раздел Dashboard.

На Хабре есть довольно много статей с примерами, как настроить ELK-стек для получения и хранения данных, но о создании Dashboard актуальных материалов нет. Поэтому я хочу показать, как в Kibana создавать визуальное представление данных на основе приходящих логов.

Читать дальше →

Создание favicon для сайта 2020

Reading time10 min
Views146K

Что такое favicon и для чего он нужен?


Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

image

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

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

Какой формат использовать для favicon?


Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?


  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows

Читать дальше →

Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее

Reading time8 min
Views45K

Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions. На дворе 2020 год, а мы продолжаем обсуждать «нововведения» ES6-синтаксиса и преимущества MobX над Redux. Существует много причин использовать Redux в своем проекте, но так как я не знаю ни одной, расскажу о том, почему мы выбрали MobX.

Почему?

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

Reading time10 min
Views28K

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


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


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


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

Читать дальше →

История архитектуры Dodo IS: ранний монолит

Reading time12 min
Views16K

Или каждая несчастная компания с монолитом несчастлива по-своему.

Разработка системы Dodo IS началась сразу же, как и бизнес Додо Пиццы — в 2011 году. В основе лежала идея полной и тотальной оцифровки бизнес-процессов, причем своими силами, что еще тогда в 2011 году вызывало много вопросов и скептицизма. Но вот уже 9 лет мы идем по такому пути — с собственной разработкой, которая начиналась с монолита.

Эта статья — «ответ» на вопросы «Зачем переписывать архитектуру и делать такие масштабные и долгие изменения?» к предыдущей статье «История архитектуры Dodo IS: путь бэкофиса». Начну с того как начиналась разработка Dodo IS, как выглядела изначальная архитектура, как появлялись новые модули, и из-за каких проблем пришлось проводить масштабные изменения.

Читать далее

Выбор архитектурного стиля. Часть 2

Reading time3 min
Views8.1K
Привет, Хабр. Сегодня я продолжаю серию публикаций, которую написал специально к старту нового потока курса «Software Architect».





Введение


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

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

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

Как мы распилили монолит. Часть 2, Frame Manager

Reading time6 min
Views9K
Привет, меня зовут Стас, я работаю в команде Тинькофф Бизнеса. В прошлой статье мой коллега Ваня рассказал, как у нас устроена архитектура приложений. Несколько раз Ваня упомянул некий Frame Manager, который служит оркестратором приложений, и сейчас я расскажу про него более подробно.

image
Читать дальше →

Как провести технический аудит фронтенд-приложения на примере высоконагруженного информационного портала

Reading time7 min
Views4.6K
Под аудитом сайта как правило понимают комплексный анализ факторов, влияющих на его видимость в поисковых системах, то есть, SEO-аудит. Также начинают набирать популярность UX-аудиты, которые оценивают эффективность, удобство и логику пользовательских интерфейсов.

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

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

Финансовые графики для вашего приложения

Reading time4 min
Views24K


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


В статье расcмотрю три основных для меня библиотеки, сделаю сравнение и дополню комментариями из личного опыта.

Читать дальше →

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

Reading time3 min
Views40K

Это я, пишу скрипт по перебору параметров для POST запроса на gov.tr, сидя перед границей в Хорватию.

Как все начиналось


Мы с моей женой путешествуем по миру и работаем удаленно. Недавно переезжали из Турции в Хорватию (самая оптимальная точка, чтобы заехать в Европу). Чтобы не сесть на карантин в Хорватии, нужно иметь справку об отрицательном анализе на ковид, сделанном не позже 48 часов до въезда.

Выяснили, что относительно выгодно (2500 рублей) и быстро (всем результаты приходят в течение 5 часов) делают тест в аэропорту Стамбула, из которого мы как раз и вылетали.
Читать дальше →

Опыт создания нескольких 3д сцен без перезагрузки страницы (three.js)

Reading time4 min
Views4.6K

Что делаю


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


Небольшой опыт работы с three.js у меня был, поэтому, после ознакомления с примерами GLTFLoader, была выбрана именно эта библиотека.


Данные о сценах хранятся в отдельном json файле и содержат информацию о пути к сцене, освещении, маршруте камеры и т.д. но в данном материале они нас интересуют в меньшей мере.


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

Читать дальше →

11 инструментов для разработки микрофронтендов, о которых стоит знать

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



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

Дэн Абрамов, в мае прошлого года, писал в своём Твиттере о том, что он не понимает микрофронтенды. Он полагает, что задачи, которые они должны решать, уже решены средствами хороших компонентных моделей. «Может, микрофронтенды — это решение организационных проблем, а не технических? Например, когда две команды разработчиков не могут ни о чём договориться, в том числе — об инфраструктуре проекта», — размышляет он.

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

Как перенести на TypeScript большую кодовую базу React UI-компонентов

Reading time12 min
Views14K

Привет! Меня зовут Иван Греков, я работаю UI-разработчиком в frontend-команде Badoo. Главные задачи нашей команды — создание новых и поддержка существующих пользовательских интерфейсов для сайтов и приложений Badoo и Bumble. 

Когда в конце 2019 года мы начали параллельно работать над несколькими проектами, мы задумались над повышением стабильности кода и возможностью его многократного использования. Для этого мы решили переписать наши 630 React UI-компонентов на TypeScript. Я расскажу о том, как мы работали над ними без перерыва в доставке фич и как организовали поэтапный переход на TypeScript для UI-разработчиков, которым этот язык был в новинку.

Читать далее

Дайджест интересных материалов для мобильного разработчика #360 (31 августа — 6 сентября)

Reading time4 min
Views3.7K
В новом выпуске разбираемся со скруглением иконок (два раза!), с UI-тестами и MVI, мультиплатформенными приложениями и CI/CD, проектированием интерфейсов, самыми зарабатывающими приложениями и многим другим.

Читать дальше →

Юнит-тесты переоценены

Reading time36 min
Views32K
Предлагаем вам перевод поста «Unit Testing is Overrated» от Alex Golub, чтобы подискутировать на тему юнит-тестов. Действительно ли они переоценены, как считает автор, или же являются отличным подспорьем в работе? Опрос — в конце поста


Результаты использования юнит-тестов: отчаяние, мучения, гнев

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

В процессе развития отрасли разработки ПО совершенствовались и методики тестирования. Они постепенно сдвигались в сторону автоматизации и повлияли на саму структуру ПО, порождая такие «мантры», как «разработка через тестирование» (test-driven development), делая упор на такие паттерны, как инверсия зависимостей (dependency inversion), и популяризируя построенные на их основе высокоуровневые архитектуры.

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

Однако, несмотря на существование различных подходов, современные «best practices» в основном подталкивают разработчиков к использованию конкретно юнит-тестирования. Тесты, область контроля которых находится в пирамиде Майка Кона выше, или пишутся как часть более масштабного проекта (часто совершенно другими людьми), или полностью игнорируются.

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

Information

Rating
Does not participate
Location
Amsterdam, Noord-Holland, Нидерланды
Date of birth
Registered
Activity