Как сделать карту событий
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») ). Приходится извращаться.
Интерактивные карты
Как бесплатно сделать интерактивную карту: сервис Interacty
Рассказываем, как с помощью бесплатного редактора расставить точки на интерактивной карте (или любой картинке), подписать все объекты и встроить ее к себе на сайт.
Как выбрать формат для переупаковки вашей истории?
Переупаковка контента — это придание старому содержанию новой структуры и формы. Подходящий формат может выбрать интеллект-карта.
Мой план изучения мультимедиа
Как выстроить свой план изучения и освоения мультимедиа?1. Запоминаем, что главный источник знаний — это люди. Люди пишут книги, посты, выступают на конференциях, делают презентации и видеоролики. Поэтому для погружения нам нужно составить список людей, кто знает то.
Как выбрать формат для своей мультимедийной истории?
Как выбрать мультимедийный формат для вашей истории?Мультимедийная история — это развернутый материал, созданный как комбинация нескольких форматов представления информации. Ключевых видов — 5. Это видео, изображение, текст, аудио, инфографика. Каждый из них включает.
Как в пару кликов нанести на интерактивную карту сто и более адресов
Для этого вам потребуется иметь аккаунт в Google и заранее подготовить файл в Excel.
Как создать интерактивную карту в конструкторе Яндекс Карты
Два клика и ни строчки кода. Онлайн-картография для новичков
Как создать интерактивную карту в Carto
Визуализируй как известные медиа мира. При анализе большого объема геоданных, создании многослойных карт можно воспользоваться онлайн-инструментом Carto.
Как создать интерактивную карту в сервисе Storymap
Если нужно создать простую, наглядную, адаптированную к мобильным устройствам карту с небольшим количеством точек-маркеров
Как визуализировать большое количество данных: открытая платформа Ушахиди
Сервис работает с информацией из различных источников: SMS, MMS, блоги, Twitter, принимает фото, видео и другие данные из сети
Как создать интерактивную карту с сервисами ESRI
Ключевое слово, которое объединяет все сервисы сторимэп — история. А истории, как известно, можно рассказывать по-разному
Как сделать интерактивную карту: обзор сервисов
Преимущество карт в том, что они наглядны, а с помощью интерактивных сервисов ещё и многофункциональны
Проекты, построенные на мультимедийных картах
Исследование о детских садах делалось «в стол», но попало на «Проект»
Обывательский вопрос — Москва и Подмосковье застраиваются, а есть ли инфраструктура для жителей, например, достаточно ли детских садов? Привел к масштабному исследованию: как в России обстоят дела с дошкольным устройством детей.
Как нерешенная экологическая проблема заставила создать сайт, группы в соцсети и мессенджере
Куда завело «Шоссе в никуда»
Не имеет значения, в каком регионе России вы живете, — про Рублевку слышали все. Именно там живет российская элита. Интересно узнать: у кого участок больше? Сколько стоит дом? Кто где живет. Искать ответы на эти и другие вопросы отправилась команда проекта «Шоссе в никуда». Путешествие получилось интересным.
Как Google Карты и доска Lino помогли провести сетевую игру для школьников
Сетевую игру приурочили к 75-летию Победы. Школьники изучали города-герои и отвечали на контрольные вопросы.
Как NGS сравнивал Новосибирск с мировыми столицами
Редакция ngs.ru посмотрела и сравнивала, как Новосибирск выглядит на фоне других городов и как устроена жизнь у них и «у них».
Три сервиса, чтобы следить, как по миру распространяется новый вид коронавируса
Данные о распространении нового вида коронавируса на сервисах обновляются в режиме онлайн. Внешне и функционально они во многом схожи, но у каждого есть свои фишки.
Проект «Полезный город» — карта для тех, кто хочет жить осознанно
Карта проекта «Полезный город» прививает горожанам правильные привычки и объединяет экологию, благотворительность, здоровый образ жизни.
«Поисковый центр» — приложение без лишних функций
Следить за семьей стало проще. Достаточно установить приложение «Поисковый центр», которое определяет местоположение человека с точностью до трех метров.
Гринпис России создал карту, которая помогает делать города чище
Карта пунктов сбора вторсырья Recyclemap существует с 2011 года. Ежемесячно ее посещает 50 тысяч человек, теперь они знают, как сделать города чище.
Что вы не узнаете о капитальном ремонте, пока не проанализируете открытые данные
Преподаватель журналистики со студентами работали с открытыми данными и выяснили много интересного про капитальный ремонт в Перми. Их опыт можно применить в любом регионе.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Как создавать интерактивные карты
Недавно была опубликована интерактивная карта, отображающая демографические изменения в Европе с 2001 по 2011 год — период, для которого доступна максимально подробная статистика от каждого муниципального образования. С помощью цветовой шкалы обозначается степень убыли или прироста населения буквально в каждой точке Европы (за исключением России и стран СНГ) и Турции.
Один из разработчиков команды Airbnb принимал участие в работе над созданием этой демографической карты. Хотите узнать, как самостоятельно создать подобный проект? Тогда добро пожаловать под кат.
Предварительные условия
Для нашего примера мы используем набор данных по Берлину, содержащий в себе сведения о зданиях и количестве их этажей.
Для начала подготовим рабочую среду:
Установите Tilemill — это картографическое приложение, позволяющее быстро и просто создавать карты, используя разные источники данных.
Скачайте готовый shape—файл, который уже содержит нужные данные. Если у вас есть свой набор данных, то их нужно объединить с shape—файлом. Есть много способов сделать это, например, с помощью Quantum GIS.
Заведите аккаунт на Mapbox — там есть бесплатный тариф с ограничением в 50 000 просмотров карты.
Создаем новый проект
Мы начинаем с добавления слоя, на котором будут отображаться данные нашей карты. Запустим Tilemill и создадим новый проект.
Теперь слева вы можете увидеть карту мира, а справа некоторые правила Carto CSS (язык для оформления карт, используемый в TileMill). Таким образом, в левой части экрана отражается превью вашей карты, а в правой вы определяете стили для разных её частей.
Внедрение данных
Добавляем наш shape—файл в качестве нового слоя (пиктограмма слоя в левом нижнем углу, Add Layer). ID — это уникальный идентификатор слоя в проекте. Выбираем shape—файл как источник данных и жмём Save.
Проверим, что всё работает нормально. Раскрасим наш shape—файл, добавив следующие строки:
С помощью идентификатора «buildings», присвоенного при добавлении слоя, мы можем установить стиль. Ваша карта должна выглядеть следующим образом:
В нашем примере мы хотим визуализировать этажность зданий. Убираем стиль стран и устанавливаем черный фон карты.
Для стиля этажности зданий мы можем раскрасить только определенные, подходящие нам объекты. В этом примере маленькие здания покрашены в зеленый цвет, средние — в оранжевый, а более высокие выкрашены в голубой. Вы можете использовать какие угодно цвета (в данном примере для выбора цветов использовался Chroma.js Color Scale Helper).
Теперь вы должны увидеть нечто вроде этого:
Добавление интерактивности
Вы можете извлечь данные из атрибутивной таблицы и отобразить их на карте с помощью подсказок/всплывающих окон. В нашем примере мы хотим отобразить всплывающее окно с подсказкой по этажности здания. Чтобы включить эту функцию, нужно нажать на пиктограмму руки в левом нижнем углу и выбрать «Teaser». Теперь мы должны определить слой («buildings»), на котором хотим поддерживать интерактивность, и добавить «floors» в разделе «Content to be shown on hover».
После сохранения проекта, при наведении курсора на здание будет всплывать окошко с информацией.
Экспорт mbtiles
Интерактивность можно экспортировать в формат MBTiles, специально разработанный для хранения карт и возможности доступа к ним онлайн и оффлайн.
Но прежде чем мы экспортируем наш слой, установим прозрачный фон.
В конечном итоге код должен выглядеть так:
Чтобы экспортировать слой в mbtiles, нужно нажать «Export» в правом верхнем углу и выбрать «MBTiles». Вам придётся подождать, пока данные отрисуются. Если вы не можете определить слой, воспользуйтесь следующими настройками для экспорта карты:
Загрузка на MapBox
Если вы не видите карту, используйте строку поиска. Сохраните карту и копию ID (его можно найти в разделе «Project» —> «Info»).
Веб—приложение
Для отображения карты в браузере мы используем Mapbox.js, ведь он уже включает в себя слой «сетки» для описания взаимодействия данных, в которой нам нужно отобразить значения этажности. Вы можете также использовать Leaflet в сочетании с utfgrid Plugin.
Для начала вы можете использовать этот шаблонный код. Он загружает карту и показывает число этажей в консоли при наведении курсора на здания. Просто измените ключ доступа и ID карты.
Как видите, вышеописанным способом можно быстро и просто создавать интересные картографические проекты. Конечно, если у вас уже есть готовые данные, это ключевой компонент.
Как сделать интерактивную карту на сайт, без сторонних библиотек. SVG + HTML + CSS + jQuery
В этом видео я показываю, как быстро и просто сделать интерактивную SVG-карту, которая часто используется на сайтах торговых комплексов, на сайтах по продаже квартир и т. д.
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
Дубликаты не найдены
Лига фрилансеров
1.2K постов 15.2K подписчиков
Правила сообщества
Не забывайте поддерживать авторов плюсами!
— Добавлять нетематические посты, последнее решение за модератором
— Рекламировать какую-либо продукцию в виде постов
— Делится любыми интересными историями, связанными с фрилансом 🙂
Делал недавно интерактивную карту в той же связке, но без использования встраиваемых изображений. В векторном редакторе делается 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. Но об этом в следующем отчете.
Всем профессионального роста и силы. Не забывайте, что мир сам по себе тайна, которую стоит раскрыть для себя. Не капсулируйте весь мир в одной плоскости!