Как сделать интерактивную карту для сайта
HTML и SVG: создаём интерактивную карту
Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.
Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript’ом.
Что же, начнём?
Самые нетерпеливые, могут сразу посмотреть демо, но я предлагаю читать обо всём по порядку.
Готовим карту
Для начала нам нужна суть. То бишь сама карта. В случае, если гугл не помогает, то её можно нарисовать и самому, даром что в Inkscape это сделать не трудно.
Я же, к примеру, возьму карту одной круглой страны (исходник на Wikimedia Commons)
Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов
стили fill и stroke, зато взамен даю этим элементам нужные мне class и id. Например, для регионов и для городов.
Далее, в секции изображения помещаем до боли знакомое:
Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. Diff.
Результат: 
Вставляем SVG в HTML
Достаточно подробно этот процесс был освещён в хабратопике К вопросу о кроссбраузерном использовании SVG.
Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:
Все браузеры, поддерживающие SVG, его корректно «скушают» и покажут. И даже дадут нам с ним поработать. При одном условии: если веб-сервер отдаст его с MIME-типом image/svg+xml. Другой MIME-тип может очень смутить Google Chrome (но не Оперу, которая из тега твёрдо знает, что идёт за SVG и на провокации не поддаётся).
Второй правильный метод — вставка SVG-кода прямо в HTML. Великолепно с точки зрения скриптинга, но поддержка браузерами пока похуже. Кстати, заметьте, что SVG, вставленный в «либеральный» HTML, всё-таки остаётся «суровым» XML’ем. Так что кавычки и закрывающие теги обязательны.
Подводные грабли
Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так: 
Чтобы заставить браузеры работать с SVG так, как мы ожидаем, следует убрать в SVG-файле из тега атрибуты width и height (или задать им значения в 100%), а вставить специально предназначенный для браузеров атрибут viewBox со значениями координат левого верхнего и правого нижнего углов изображения:
Diff.
Результат: 
Взаимодействуем с SVG
Чтобы нам взаимодействовать с SVG, вписаннным прямо в HTML, ничего не нужно — он уже часть DOM веб-страницы.
Получить доступ к SVG, вставленным через чуть сложнее:
Да, jQuery работает с SVG, но только частично. Например, я заметил, что не работают функции addClass и removeClass, а так же поиск по классам ( jQuery(«.class») ). Приходится извращаться.
Интерактивная карта для веб-приложения за пару часов
В прошлой статье я кратко рассказала о возможностях kepler.gl — нового Open Source инструмента для визуализации и анализа больших наборов гео-данных.
Рисунок 1. Варианты карт, созданных с помощью kepler.gl (by Uber)
Данное веб-приложение позволяет за считанные минуты создать информативную, и что немаловажно, красочную интерактивную карту на основе произвольных наборов гео-данных. Однако, возникает вопрос что делать с ней дальше? Как поделиться полученными результатами с коллегами, друзьями или заказчиками?
Сравниваем альтернативные варианты
Вся «магия» kepler.gl происходит на клиенте, поэтому приложение предлагает только 2 способа поделиться своими результатами с другими:
К счастью, kepler.gl – это не только веб-инструмент, но и React компонент, с помощью которого можно быстро создать демо-сайт с вашими визуализациями или интегрировать их в уже существующее веб-приложение.
Примечание. Обрабатывая и агрегируя данные на лету, kepler.gl зачастую требует достаточно много ресурсов. Поэтому стоит быть особенно внимательным при его интеграции в приложения, заточенные под мобильные.
Такой вариант использования kepler.gl позволит:
Последний из рассмотренный вариант потребует дополнительных усилий со стороны создателя гео-визуализации и без программирования обойтись уже не получится. Однако, как вы скоро убедитесь, реализовать его так же не составит особого труда.
Создаем демо-приложение
Пришло время перейти от теории к практике. Для того, чтобы познакомить вас с основными этапами интеграции kepler.gl в ваш код, я сделала небольшое демо-приложение.
Оно позволяет пользователю посмотреть информацию о платных московских парковках в одном из двух режимов – общем или агрегированном. При этом приложение дает возможность только просматривать созданные нами визуализации, переключаться между ними и работать с картой в read-only режиме. Весь исходный код и live-версия доступна на GitHub.
Рисунок 2. Два режима просмотра карты, предоставляемых демо-приложением
Для создания этого демо я использовала свой собственных шаблон проекта. Однако, если вы решите самостоятельно «поиграть» с kepler.gl, но у вас еще не сложилось личных предпочтений, рекомендую вам использовать create-react-app, который заметно уменьшит время на создание основы вашего будущего приложения.
Добавляем kepler.gl в проект
Kepler.gl представляет собой React-компонент, использующий Redux для хранения и управления своим состоянием. Для того, чтобы добавить его к проекту, достаточно установить соответствующий npm-package:
Данный npm-пакет включает в себя:
Настраиваем Redux хранилище для работы kepler.gl
Kepler.gl использует Redux для управления своим состоянием в процессе создания и обновления карт. Поэтому перед использованием компонента KeplerGl нам потребуется добавить соответствующий редьюсер к редьюсеру приложения.
Важно помнить, что по умолчанию компонент KeplerGl предоставит пользователю все доступные возможности по самостоятельному редактированию, загрузке, обновлению и фильтрации данных. Чтобы ограничить набор действий, разрешенных пользователю, нужно в параметрах начального состояния передать сведения о режиме карты (для чтения или для редактирования) и доступных элементах управления картой:
Так же нам нужно будет установить react-palm, который kepler.gl использует для управления side-эффектами и добавить taskMiddleware из этого npm-пакета к Redux хранилищу своего приложения:
Примечание. В настоящее время команда Uber Engineering активно работает над новой версией kepler.gl в которой не будет зависимости от react-palm.
По умолчанию kepler.gl ожидает, что его объект-состояние будет расположен на верхнем уровне состояния всего приложения и доступен по имени keplerGl. Если же конфигурация Redux хранилища отличается от ожидаемой, то для корректной работы соответствующего React-компонента достаточно явно указать место расположение его состояния в иерархии с помощью свойства getState.
Встраиваем React-компонент KeplerGl
Для быстрого рендеринга карт с большим количеством отображаемых элементов (до миллионов гео-точек!) kepler.gl использует desk.gl – WebGL фреймворк для визуализации данных, и MapBox – Open Source гео-платформу, предоставляющая удобное API и широкие возможности по кастомизации создаваемых карт. Поэтому, одним из обязательных параметров, передаваемых компоненту KeplerGl, является API токен для доступа к сервису MapBox.
Для получения токена нужно зарегистрироваться на сайте www.mapbox.com. MapBox предоставляет на выбор несколько различных тарифных планов, но для небольших приложений будет достаточно бесплатной версии с 50,000 просмотрами в месяц.
После создания аккаунта нужно перейти в раздел токенов и сформировать публичный ключ для доступа к сервису.
Устанавливаем полученный токен в соответствующую переменную среды:
Теперь можно перейти к созданию React-компонента для отображения сведений о платных парковках. В нашем случае это будет просто обертка над компонентом KeplerGl, принимающая в качестве параметров размеры карты:
Добавляем ParkingMap в приложение. На данном этапе вместо информации о парковках просто отобразиться карта без каких-либо сведений, ведь мы еще не передали данных, на основе которых строятся наши визуализации.
Загружаем данные и конфигурации карты
Для того, чтобы отобразить свои данные на карте, нужно передать KeplerGl набор данных, на основе которых будет создана карта, и желаемую конфигурацию финальной визуализации. Это можно сделать воспользовавшись одним из двух методов — addDataToMap или updateVisData.
Первый метод позволяет не только загрузить необходимый набор данных и полностью задать/обновить конфигурацию соответствующего экземпляра компонента KeplerGl, включая настройки визуализации(visState) и карты(mapState), а также стиль используемой карты(mapStyle).
В качестве параметра метода addDataToMap принимает объект, содержащий следующие сведения:
Примечание. Данные из объекта конфигураций всегда имеют более высокий приоритет по сравнению с настройками, переданными в объекте “options”.
Метод updateVisData позволяет обновить только используемые наборы данных без полного изменения конфигурации используемого компонента. В качестве параметра он так же, как и первый метод принимает объект, который содержит сведения о новом наборе или наборах данных и параметр «options» для обновления некоторых настроек отображения карты.
Инициализация карты
Таким образом, для первичной загрузки данных нам потребуется метод addDataToMap. В создаваемом демо-приложении база данных о платных парковках Москвы загружается при первом обращении к приложению отдельным запросом. Полученные исходные данные необходимо подготовить для загрузки в KeplerGl. Для этого в большинстве случаев достаточно одного из предопределенных процессоров, которые портируют csv / json данные в поддерживаемый kepler.gl формат данных.
Переключение между режимами
Для переключения между режимами просмотра карты нам нужно определить еще одну функцию действия. Так как в текущей версии KeplerGl нет простого способа изменить только конфигурацию карты, не затрагивая при этом данные, то наиболее подходящим методом для переключения между режимами также будет метод addDataToMap:
Параметр dataset является обязательным, поэтому каждый раз при переключении режима просмотра карты мы будем повторно передавать исходный набор данных, загруженный при старте приложения. Сведения о конфигурации карты при этом каждый раз будут обновляется. В этой статье я не буду подробно останавливатся на том, как реализованы вспомогательные методы getMapConfig и getDatasets, с исходным кодом которых вы можете ознакомится на GitHub.
Примечание. В настоящее время API KeplerGl очень ограничено и расчитано на самые базовые случаи (добавление и обновление данных). При этом сами разработчики признают, что текущая версия не предусматривает эффективного метода для обновления только конфигураций или для real-time обновления данных. Однако, не стоит забывать, что проект находится в стадии активной разработки и есть надежда на скорое расширение его функциональных возможностей.
Кастомизируем элементы карты
KeplerGl включает в себя не только контейнер с гео-визуализацией, но и элементы управления картой, тултип, боковую панель для управления отображаемыми данными, диалоговое окно загрузки данных в формате csv, json или geojson и т.д. При этом, каждый и перечисленных компонентов можно легко заменить на собственную версию с помощью системы внедрения зависимостей (dependency injection).
Для того, чтобы заменить базовый компонент на его кастомизированную версию достаточно:
В создаваемом нами демо-приложении мы не хотим давать пользователю возможности самостоятельно настраивать режим просмотра, фильтровать существующую или загружать новые данные.
В теории для этого достаточно указать, что компонент KeplerGl находится в read only режиме, который появился только в версии 0.0.27 Однако даже в этой версии все элементы управления все равно отображаются пользователю в течении нескольких первых мгновений до загрузки карты, а лишь потом скрываются. Чтобы избежать этого, мы можем явно заменить нежелательные компоненты на null-компонент, воспользовавшись методом injectComponents:
Удобно, что KeplerGl не только позволяет заменить базовые компоненты на кастомизированные, но с помощью метода withState дает возможность добавить дополнительные действия и параметры состояния для новых компонентов.
Как использовать несколько карт одновременно
Если вы планируете использовать несколько различных компонентов KeplerGL в рамках одного приложения, то каждому из них в параметрах обязательно нужно задать уникальный id, необходимый для добавления/обновление данных и конфигураций каждой из карт:
Альтернативным вариантом является использование функции connect из Redux и функции forwardTo из kepler.gl. В этом случае достаточно просто для соответствующей функции диспетчера указать id соответствующей карты:
Заключение
KeplerGl позволяет добавить в веб-приложение, созданное на основе React, красочные интерактивные карты. Благодаря использованию фреймворка desk.gl компонент он может легко отобразить миллионы гео-точек в удобном для их просмотра и анализа формате.
Широкие возможности по кастомизации не только создаваемых визуализаций, но и стилей карты, а также форматов взаимодействия с пользователем, делают KeplerGl очень привлекательным инструментом для создания сложных картографических визуализаций и дашбордов.
Однако, ограниченное лишь базовыми сценариями API, процессинг данных на клиенте, а также использование MapBox без возможности выбора другого источника карт, сокращают число проектов, для которых данный инструмент может быть использован.
Но не стоит забывать, что на сегодняшний день проект еще очень молод и находится в активной фазе разработки, так что многие из перечисленных недостатков могут стать неактуальными в ближайшем будущем.
Как сделать интерактивную карту с помощью Python и open source библиотек
Когда документация вводит в ступор
Несколько месяцев назад я хотел создать интерактивную карту для интересного веб-приложения, которое мы разрабатывали. Я провел часы в интернете в поисках идеальной библиотеки для начала работы, но мне было очень трудно смотреть документацию, так как не было надлежащего пошагового руководства для реализации и настройки визуальных элементов по мере необходимости. Мне хотелось, чтобы у меня было руководство, в котором сравниваются функции и правильная реализация вместе с подробностями о настройке. Эта статья — попытка написать такое руководство.
Далее в статье сравниваются реализации интерактивной фоновой карты (хороплета) с использованием трех популярных библиотек, доступных для Python, а также подробности и настройки окончательного результата.
Предварительные требования
Библиотека Geo Pandas полезна, когда нужно получить данные в требуемом формате. В примере используется файл GeoJSON индийских штатов. Вы можете начать с любого общедоступного Shapefile или GeoJSON.
Altair
Altair — библиотека визуализации для Python, основанная на Vega. Хороплет реализуется минимальными усилиями и включает интерактивные элементы — выделение, всплывающие подсказки и т.д.
Altair совместима с fastpages. Вы можете создавать простые записи блога в считанные минуты, просто конвертируя файлы Jupyter Notebook с помощью минимального количества кода. Ознакомьтесь с Readme на GitHub.
Читаем Shapefile как фрейм GeoPandas:
Фрейм выглядит так:
Создаем базовый слой и слой хороплета:
Код выше должен визуализировать интерактивную карту с функцией отображения подсказки и подсветки при выборе (клике).
Реализация c помощью Plotly
Библиотека Plotly для построения графиков на Python отрисовывает готовые к публикации карты с большим количеством интерактивных и настраиваемых функций.
Доступны пользовательские конфигураций базовой карты из Mapbox, OSM и другие стилевые опции, а также простая реализация с помощью Plotly Express и обширная документация. Это делает Plotly одним из предпочтительных вариантов для создания интерактивных карт.
Создание базового слоя и добавление частей карты:
Код выше должен визуализировать интерактивную карту с отображением подсказки и функцией масштабирования. Эта реализация включает большое количество других возможностей, подробнее о которых написано здесь.
Реализация с помощью Folium
Folium сочетает в себе простоту использования экосистемы Python и сильные стороны картографирования библиотеки leaflet.js. Это позволяет визуализировать настраиваемые, отзывчивые и интерактивные хороплетные карты, а также передавать богатые векторные, растровые, HTML-визуализации в виде маркеров на карте.
Библиотека имеет ряд встроенных наборов частей карт из OpenStreetMap, Mapbox и Stamen, а также поддерживает пользовательские наборы через API Mapbox или Cloudmade. Поддерживаются изображения, видео, GeoJSON и TopoJSON.
Добавление базовых слоев и слоев Choropleth:
Код выше должен отображать интерактивную хороплетную карту с подсказкой по наведению, кликом для увеличения масштаба и пользовательским окном, всплывающим по клику.
Заключение
Эти три инструмента позволяют без особых хлопот реализовать индивидуально настроенные интерактивные карты для веб-сайтов.
Уважаемые читатели, а вам приходилось делать такие интерактивные карты для своих проектов?
Получить востребованную профессию с нуля или Level Up по навыкам и зарплате, можно пройдя онлайн-курсы SkillFactory:
Как сделать интерактивную карту на сайт, без сторонних библиотек. SVG + HTML + CSS + jQuery
В этом видео я показываю, как быстро и просто сделать интерактивную SVG-карту, которая часто используется на сайтах торговых комплексов, на сайтах по продаже квартир и т. д.
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
Дубликаты не найдены
Лига фрилансеров
1.2K постов 15.1K подписчика
Правила сообщества
Не забывайте поддерживать авторов плюсами!
— Добавлять нетематические посты, последнее решение за модератором
— Рекламировать какую-либо продукцию в виде постов
— Делится любыми интересными историями, связанными с фрилансом 🙂
Делал недавно интерактивную карту в той же связке, но без использования встраиваемых изображений. В векторном редакторе делается svg c необходимым контуром разделенным на слои (к примеру как в видео контур коровы), затем в html вставляется через тег object и через js обрабатываем как угодно. Хоть hover-ы вешай, хоть стили меняй. Если интересно могу подробней рассказать.
Мне интересно, расскажи пжлст. Подписываюсь на тебя.
не в плане пост сделать, а просто на почту написать)
может и Вы видос запилите, что бы мы могли созерцать? Мне лично, было бы интересно
Не, я из лл, так что пока не выйдет.
Можно и так, просто изображение дает больше визуала. Оно может быть красочным и привлекательным. Как например и делают в недвижимости. На фото дома накладывают области подъездов или этажей с возможностью выбора. И пользователь делает выбор основываясь на фотографии или рендере района/дома.
@Insp1, Автор, напишите мне пожалуйста на email: mit5x@yandex.ru У меня есть платная задача по SVG плану микрорайона. Нужно сделать ещё пару домов на плане интерактивными
Делал подобное только для ЖК, пиши расскажу что да как shushpka38@yandex.ru
Ну, сама карта действительно сделана без сторонних библиотек.
Коммент из разряда докопаться.
jQuery там лишь для вывода попап-окна. Обрабатывайте событие как хотите, при наведении на элемент, хоть на чистом JS, хоть на CSS.
Сама карта реализуется без библиотек вроде Raphaël, Snap.svg и т. д.
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
98 лайков за месяц это зашло? Да и комменты сомнительные. Плюс реклама университета, не попадает ли она под запрет сообщества?
leaflet.js чем не угодил? Тоже самое только в пару кликов.
Про преподавание
Мне всегда везло с педагогами. Достаточно сказать, что физиологию мне преподавал человек с именем Адольф, про адскую жестокость которого ходили байки на весь СГМУ. Ну из, типа, «На 5 знает бог, на 4 я, а ты на пересдачу»
В этот раз мне достался человек с именем Игорь, но мне почти год казалось, что Адольф. Хотя вопреки расхожему мнению html и css языками программирования не являются, я был не в силах постичь азы устройства верстки в том ключе, который от меня требовался.
В каждом его кодревью/проверке домашки, я видел мета-сообщения типа «Иисусе, еще один быдлокодер. Щас выучит пару трюков и начнет пилить ролики на ютуб».
И это оказалось проблемой не только моей. Весь наш братский чат крыл такое обучение отборными запрещенными нынче в интернетах словами. Вся аргументация великомученных свидетелей кодревью Игоря в 17й строке была достаточно логична. Мы заплатили практически стоимость ершика на винзаводе, а нас заставляют гуглить!
Но я добрался до финала и защитил диплом. Ну как, тоже, защитил, во-первых я не знаю никого, кто бы этого не сдюжил, а во-вторых диалог был примерно такой:
— А кто у вас куратор?
— Работа сделана практически идеально.
Когда я взял свое первое задание на фрилансе, я был спокоен, от части потому что его стоимость была 200р, но в основном потому что я знал, что и где нужно смотреть и как мыслить. У меня был метод, с боями вложенный мне в голову Игорем.
Я знаю, что написал ужасный код, внутренний Игорь мне сказал об этом, но домашку приняли отписываясь восторгами. В итоге, я написал в учебный отдел, с просьбой вернуть мне Игоря незамедлительно! Потому что я хочу страдать! Выстрадывать каждую строку и функцию хочу! А не кататься на розовом пони, засирая информационные просторы веба. Миру точно не нужен еще один быдлокодер. Я хочу быть нормальным джуном, адекватным и понимающим.
Но Игорь перестал заниматься студентами.
Ответ на пост «Вакансия»
Напомнило мне историю, произошедшую несколько лет назад, когда я искала работу JS джуном. В резюме я указала, что владею vanilla JS, имела тогда в виду, что никаких фреймворков не знаю. Внезапно позвонила HR из какой-то гос. организации, уже не помню откуда. Общаемся, задаём друг другу вопросы.
Тут она внезапно говорит: «О! Вы владеете vanilla JS? Очень хорошо, это очень мощный фреймворк.» Я тогда на несколько секунд зависла, испугавшись, что реально есть такой фреймворк (а кто ж их знает, они каждый день выходят новые), а не то что я имела в виду.
Потом, когда пришла домой, я решила всё таки загуглить, чтобы в случае чего убрать из резюме эту строчку. Но гугл выдал первым результатом статью на Хабре (на тот момент, по крайней мере, это был топ результат):
Сама статья на хабре является юмором (отсылка к тому, что сам по себе javascript неплох). Фух, всё в резюме нормально! Но на тот момент меня очень повеселило то, что HR прямо во время нашего разговора гуглила по порядку незнакомые ей слова, пытаясь быть «в теме» того, что у кандидата написано в резюме 🙂
Вакансия
“JavaScript, так же, для краткости, называемый Java. ”
Нам тут страничку с формой отправки на почту надо.
Пролистывая посты в горячем, наткнулся на пост про мы сначала посмотрим работу, а потом поговорим про оплату. Вспоминая в комментариях некоторые смешные моменты и неадекватных клиентов, в голове всплыла другая не менее интересная история.
На дворе был конец две тысячи четырнадцатого года. Декабрь выдался на редкость снежным и болезненным из-за простуд, а также налетевшей апатии ко всему существующему. Мне в мессенджер пишет человек, с которым мы когда-то вместе работали.
— У нас тут есть простая задачка на тысячу рублей. Надо создать страничку с формой записи и отправки на почту. Сделаешь?
Мне скидывают некое подобие ТЗ, я вспоминаю HTML, создаю шаблон для этого, обработчик на PHP делаю. Всё замечательно работает. Скидываю, чтобы посмотрели. И тут начинается замечательный квест!
Заказчики оказались довольными результатами, но надо сделать, чтобы человек не просто отправлял форму, а мог выбрать время для записи. Через час прилетает ещё требование о том, что надо сделать так, что два человека не могли выбрать одно и то же время и это надо отслеживать.
На следующий день просят сделать, чтобы помимо отправки формы со временем и отслеживанием, была возможность администрировать эти записи прямо внутри. Причём можно было добавлять новые данные для отправки формы. Календарь, с возможностью редактирования расписания. Одна страничка говорите?
Меня уже подхватил азарт: JQuery, JS обработчики, сторонние библиотеки. Рутина сменилась азартом вкупе со стрессом. Работу сделал так как надо. Успели к сроку. Залил к ним на хост. Честно сказал, что это совсем не тысяча рублей с них, а больше на порядок.
В назначенный день эта страница стала доступна для записи и. хост за 150 рублей, на котором крутился их сайт, упал под ДДОС из желающих записаться в первый час. Посмеялись над этим. Да и как-то забыл. У меня была основная работа, апатия ко всему, в том числе и к деньгам (работа-то кормила). Забил на это. Через неделю пишет: давай номер карты. Высылаю деньги.
Да, заплатили на порядок больше. Моя работа понравилась. Предлагали ещё переделать их сайт, добавив интерактивности, но с WordPress мне работать не сильно хотелось.
Мораль сей басни: если работаете со знакомыми или друзьями, то хотя бы на листе бумаги фиксируйте всё, что нужно сделать за те деньги, которые озвучили, чтобы полтора часа работы не превратились в неделю разработки и отладки за ту же сумму.
ЗЫ: желающих сделать свой фейсбук или амазон за 5 тысяч рублей меньше не становится, к сожалению.
Риск передачи коронавируса
Перевод, надеюсь, не требуется?
О работе на toptal
По просьбе из предыдущего поста напишу немного о том, как начать работать на зарубежных заказчиков. Буду рад, если кто-то поделится своим опытом в комментах.
Не буду описывать весь опыт, расскажу только непосредственно про Toptal. Топтал это не биржа в обычном понимании, типа фл.ru или upwork. Это бодишоп, что значит, что работать вы будет непосредственно на Toptal LLC, который будут перечислять вам деньги, получаемые от клиента. Это и плюс и минус. Плюс в том, что нет проблем с получением денег от клиентов, нет всех этих согласований, обоснований и так далее. Минус в том, что в среднем топтал выставляет клиенту x2 вашего рейта. То есть вы получили 5к, клиент заплатил 10к. Вот на эти «2%» топтал и живет.
Теперь про то, как туда попасть.
Чтобы начать работать, вам необходимо пройти отбор, состоящий из четырех шагов:
1. Простое собеседование на тест вашего английского
2. Решение алгоритмических задач по типу тех, что на codewars
3. Тоже самое, что и второй шаг, но уже в живую со скринером, который будет наблюдать за процессом решения
Подробнее про шаги
Тестовое собеседование предназначено для того, чтобы проверить насколько свободно вы говорите по-английски, насколько вы способны поддерживать диалог и для того, чтобы порекламировать, как классно у них работать.
Если вы прошли первый шаг (а завалить его можно, если у вас плохой английский), то вам на почту приходит ссылка на 3 задачи, минимум 2 их которых вам нужно решить за 90 минут. Это не просто, но возможно. Потренируйтесь перед этим шагом, порешайте задачи на codewars. Мне трудно оценить их сложность, но три задачи я не успел решить, решил только две.
Мои рекомендации перед этим шагом:
— решайте задачи на codewars
— узнавайте больше про алгоритмы, стандартные приёмы и типовые задачи (могу посоветовать курс на юдеми: JavaScript Algorithms and Data Structures Masterclass)
— подготовьте ручку и бумажку, чтобы можно было просто и быстро порисовать алгоритм и решения или какие-то иные вещи
Если вы успешно прошли второй шаг, вас повторение этого же шага, но уже со скринером —человеком, который будет наблюдать за процессом и иногда спрашивать вас о том, что вы делаете) Такое парное программирование, но второй человек просто оценивает то, что вы делаете. Вам нужно будет решить две задачи. В дополнение к предыдущим рекомендациям я бы посоветовал обязательно проговаривать свои мысли вслух — во-первых, это всегда положительно влияет на скринера — это веселее чем просто смотреть за молчаливо пыхтящем человеком, который то пишет, то стирает какие-то непонятные строки кода. А во-вторых, следя за вашей логикой скринер может подсказать что-то или как-то вас скорректировать. Плюс, понимая, что вы делаете всё правильно, но просто не успеваете по времени, скринер может просто зачесть вам задачу, ведь смысл в проверки способности найти работающее решение, а не в только решении за определённое количество времени.
Ну и обязательно приготовьте бутылку воды — говорить полтора часа да еще и в стрессе очень утомительно.
Если вы пройдете и этот этап, то вас ждёт тестовый проект, заточенный под ваши скиллы. У меня это был бэк+фронт мини-травел системы. Ничего необычного, все инструменты можешь выбирать самостоятельно. Оценивается код, паттерны и завершенность. Здесь наверное странно давать советы, просто следуйте best practice:
1. Грамотно структурируйте файлы проекта (обе его части)
2. Покрывайте код тестами
3. Обрабатывайте ошибки
На этап даётся две недели, у меня ушло порядка 20 часов на бэк и фронт. Тесты я не написал, так-как поленился, что не очень хорошо.
Если вы прошли и этот этап, то вам нужно будет заполнить профиль, определиться с рейтом (ревьюер подскажет вам), сделать профессиональную фотку и всё, вы среди топталеров!
Рейт для разных стран различен, рейты вроде как обсуждать запрещено, но знаю людей с рейтами от 25 до 60$/час.
Дальше вам нужно откликаться на проекты, соглашаться на митинги с клиентами и работать!
Пост получился объемный и я начал понимать, а я уже устал писать, поэтому быстро пройдусь по пунктам, которые хотел упомянуть:
— поиск проекта у меня занимал (я работал на двух разных проектах) менее недели. Обычно 3 дня.
— рейт можно сменить, написав в саппорт в слаке
— деньги приходят дважды в месяц с задержкой в две недели
— вывожу на ИП на патенте (не Москва, поэтому патент стоит 14тр год)
— есть возможность работать фуллтайм (8 часов в рабочие американские дни), парт-тайм(4 часа), по часам
— на фулл-тайме никакой проверки типа мониторинга экрана или чего-то подобного нет
— я устраивался как full-stack, но можно и бэком и фронтом и, говорят, devops
— можно взять отпуск или просто нерабочие дни, но за свой счет
Наверное я еще что-то забыл, но если будет интересно, спрашивайте, постараюсь рассказать.
Прошу прощения, что без картинок и должного оформления, но я думаю, что тем, кому может быть полезен пост, он будет полезен и без них.
Люди изучающие JavaScript
Использую array.sort() чтобы отсортировать этот список
Одно и то же
Типичный клиент
— Не могли бы вы сделать бесконечную прокрутку, а так же добавить к ней постраничный вывод информации?
— Постойте, я не понимаю. Вы хотите бесконечную прокрутку или постраничный вывод?
— Да. Не могли бы вы так же.
(Разработчик бьётся головой о ноутбук)
P.S. А ещё бесконечный скролл неплохо дополняется футером с важными ссылками, которые больше нигде не дублируются.
Веб-разработчики достигнут Нирваны
6. Повторить
Как-то так
Смотрю курс по TypeScript. Лектор: «да, мы можем надеяться, что другой разработчик прочитает доки и использует функцию правильно, но в программировании нет места надежде».
В ПРОГРАММИРОВАНИИ НЕТ МЕСТА НАДЕЖДЕ
P.s курс англоязычный и там это даже сильнее прозвучало: There’s no hope in coding!
Javascript теперь официально rocket science
Интерфейс панели управления сделан на JS и работает в Chromium, а для бекенда используется C/C++ поверх Linux для x86
Типичный день на бирже
Наглядно про веб-технологии
Перевод, думаю, не нужен 🙂
Во все тяжкие: Веб-разработчик с нуля. 1 год
Цель — Senior Frontend Developer.
Работа (настоящее время): Trainee Frontend Developer в компании «Корус Консалтинг СНГ».
Локация: г. Санкт-Петербург.
Привет! Пролетел год, с того самого дня, как я твердо решил освоить профессию инженера-программиста (веб-разработчика). И в этом посте мне не хочется рассказывать в привычной мне манере о том, что я сделал за последний месяц и о трудностях с которыми столкнулся. Вкратце, расскажу об этом в конце поста, а сейчас позволю себе кое-что поведать.
Этот год был интересен для меня не столько программированием, сколько открытием для себя новой плоскости, знакомство с людьми, чье мышление и навыки довольно интересны сами по себе.
Каждый человек рожден для того, чтобы развить в себе способность разбираться за короткий промежуток времени и решить задачу в любой сфере, неважно в какой. В истории, примеров людей, реализовавших эту способность, десятки. Современная жизнь требует от человека решение задач в разных плоскостях, но общество заставляет становиться узкоспециализированным специалистом в одной сфере, абсолютно неспособного ни на что, стоит только его вытянуть за пределы его плоскости влияния. И, как вы понимаете, жизнь со всеми ее ситуациями делает и будет продолжать делать это с каждым. Неважно, программист ты или врач, сантехник или менеджер, тебе обязательно придется столкнуться с реалиями жизни и со сферами, которые тебе не знакомы. Поэтому очень важно научиться быстро разбираться в любой сфере и принимать правильные решения.
В связи с этим, я решил помочь таким же как и я и создал базу тестовых заданий для frontend разработчиков. На данный момент она пополняется исключительно теми заданиями, которые присылали мне. По мере возможности, я буду ее пополнять. Я думаю, еще порядка 15-20 заданий, я в ближайшие дни туда выложу. Так же, приветствую пулреквесты. На гитхабе есть подобный репозиторий, но там очень мало тестовых, и в основном задания от крупных компаний. Но ведь больше как раз маленьких компаний, и было бы хорошо +- понимать, какие тестовые могут быть в этой компании и вообще, какие навыки и знания будут требоваться при работе там, с учетом особенности сферы и т.д. С другой стороны это позволит работодателям не расслабляться и постоянно менять тестовые. Дабы действительно брать на работу только тех, кто решил задачу, а не тех, кто скопировал решение из чужого репозитория или канала на ютубе, а потом будет сидеть и тупить на работе.
Что же касается моего развития, то я публично выкладываю материалы, которые я закончил изучать. Можете смело глядеть и подбирать для себя то, что хотите. У меня вкус хороший, надеюсь.
На этом я хочу сегодня закончить. Развиваемся дальше. Впереди у меня еще месяц стажировки, TypeScript и React. Но об этом в следующем отчете.
Всем профессионального роста и силы. Не забывайте, что мир сам по себе тайна, которую стоит раскрыть для себя. Не капсулируйте весь мир в одной плоскости!