Как сделать карту библиотеки

Как сделать интерактивную карту на сайт, без сторонних библиотек. 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. Повторить

Как сделать карту библиотеки

Как сделать карту библиотеки

Как сделать карту библиотеки

Javascript теперь официально rocket science

Интерфейс панели управления сделан на JS и работает в Chromium, а для бекенда используется C/C++ поверх Linux для x86

Как сделать карту библиотеки

Как сделать карту библиотеки

Типичный день на бирже

Как сделать карту библиотеки

Как сделать карту библиотеки

Как сделать карту библиотеки

Наглядно про веб-технологии

Как сделать карту библиотеки

Перевод, думаю, не нужен 🙂

Как сделать карту библиотеки

Как сделать карту библиотеки

Во все тяжкие: Веб-разработчик с нуля. 1 год

Как сделать карту библиотеки

ЦельSenior Frontend Developer.

Работа (настоящее время): Trainee Frontend Developer в компании «Корус Консалтинг СНГ».

Локация: г. Санкт-Петербург.

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

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

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

В связи с этим, я решил помочь таким же как и я и создал базу тестовых заданий для frontend разработчиков. На данный момент она пополняется исключительно теми заданиями, которые присылали мне. По мере возможности, я буду ее пополнять. Я думаю, еще порядка 15-20 заданий, я в ближайшие дни туда выложу. Так же, приветствую пулреквесты. На гитхабе есть подобный репозиторий, но там очень мало тестовых, и в основном задания от крупных компаний. Но ведь больше как раз маленьких компаний, и было бы хорошо +- понимать, какие тестовые могут быть в этой компании и вообще, какие навыки и знания будут требоваться при работе там, с учетом особенности сферы и т.д. С другой стороны это позволит работодателям не расслабляться и постоянно менять тестовые. Дабы действительно брать на работу только тех, кто решил задачу, а не тех, кто скопировал решение из чужого репозитория или канала на ютубе, а потом будет сидеть и тупить на работе.

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

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

Всем профессионального роста и силы. Не забывайте, что мир сам по себе тайна, которую стоит раскрыть для себя. Не капсулируйте весь мир в одной плоскости!

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *