<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>stepansite</title><link>https://stepansite.com/</link><description>Recent content on stepansite</description><generator>Hugo</generator><language>uk</language><lastBuildDate>Wed, 04 Nov 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://stepansite.com/index.xml" rel="self" type="application/rss+xml"/><item><title>Зробив F1-трекер</title><link>https://stepansite.com/2026/gridlineup/</link><pubDate>Tue, 27 Oct 2026 12:00:00 +0000</pubDate><guid>https://stepansite.com/2026/gridlineup/</guid><description>&lt;p&gt;Додивився Drive to Survive і на якийсь час залип на гонках F1.&#10;Проблема в тому, що пілоти міняють команди швидше, ніж я встигаю запам&amp;rsquo;ятати, хто де їздить. А команди тим часом міняють назви.&lt;/p&gt;&#10;&lt;blockquote&gt;&#10;&lt;p&gt;Honda → Brawn → Mercedes. Renault → Lotus → Renault → Alpine.&lt;/p&gt;&#10;&lt;/blockquote&gt;&#10;&lt;h2 id="табличка"&gt;Табличка&lt;/h2&gt;&#10;&lt;p&gt;Почалося все з однієї таблиці на голому HTML: роки згори вниз, команди зліва направо, в клітинках пілоти.&#10;Щоб нарешті бачити, хто куди перейшов і коли.&lt;/p&gt;</description></item><item><title>В АмстерДам</title><link>https://stepansite.com/2025/amsterdam/</link><pubDate>Mon, 23 Jun 2025 00:00:00 +0000</pubDate><guid>https://stepansite.com/2025/amsterdam/</guid><description>&lt;h2 id="інтро"&gt;Інтро&lt;/h2&gt;&#10;&lt;p&gt;Короткий переліт, симпатичний аеропорт, близько до міста, і залізнична станція просто в ньому.&lt;/p&gt;&#10;&lt;p&gt;Прикордонник привітався з посмішкою і перепитав, куди я їду. В Амстердам. Так, але для чого? «There&amp;rsquo;s a conference tomorrow». «Oh, there&amp;rsquo;s a conference tomorrow?»&#10;Підозріло усміхається, ніби в мене на лобі написано, що я їду вживати і пісяти в їхні гарні амстердамські канали.&lt;/p&gt;&#10;&lt;p&gt;Поїзд з аеропорту швидкий, сучасний і зручний - домчав прямо до Amsterdam Centraal.&lt;/p&gt;</description></item><item><title>Mac-застосунки</title><link>https://stepansite.com/2025/mac-apps/</link><pubDate>Mon, 06 Jan 2025 15:00:00 +0200</pubDate><guid>https://stepansite.com/2025/mac-apps/</guid><description>&lt;p&gt;Переглянув свою папку завантажень і вирішив поділитися списком корисних Mac-застосунків, які я встановив. Багато з них можна встановити через Homebrew.&lt;/p&gt;&#10;&lt;h2 id="встановлення-homebrew"&gt;Встановлення Homebrew&lt;/h2&gt;&#10;&lt;p&gt;Якщо у вас ще немає Homebrew, встановіть його:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="background-color:#f7f7f7;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;/bin/bash -c &lt;span style="color:#0a3069"&gt;&amp;#34;&lt;/span&gt;&lt;span style="color:#cf222e"&gt;$(&lt;/span&gt;curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh&lt;span style="color:#cf222e"&gt;)&lt;/span&gt;&lt;span style="color:#0a3069"&gt;&amp;#34;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="продуктивність-і-утиліти"&gt;Продуктивність і утиліти&lt;/h2&gt;&#10;&lt;p&gt;&lt;strong&gt;&lt;a href="https://rectangleapp.com/" target="_blank" rel="noreferrer"&gt;Rectangle&lt;/a&gt;&lt;/strong&gt; - керування вікнами за допомогою клавіатурних скорочень&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="background-color:#f7f7f7;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;brew install --cask rectangle&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;&lt;a href="https://karabiner-elements.pqrs.org/" target="_blank" rel="noreferrer"&gt;Karabiner-Elements&lt;/a&gt;&lt;/strong&gt; - потужна утиліта для налаштування клавіатури&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="background-color:#f7f7f7;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;brew install --cask karabiner-elements&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;&lt;a href="https://apphousekitchen.com/" target="_blank" rel="noreferrer"&gt;AlDente&lt;/a&gt;&lt;/strong&gt; - контроль заряду батареї для збереження її здоров&amp;rsquo;я&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="background-color:#f7f7f7;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;brew install --cask aldente&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;&lt;a href="https://syncthing.net/" target="_blank" rel="noreferrer"&gt;Syncthing&lt;/a&gt;&lt;/strong&gt; - синхронізація файлів між пристроями без хмари&lt;/p&gt;</description></item><item><title>Спогади про майбутнє</title><link>https://stepansite.com/2024/grandpa-tribute/</link><pubDate>Sat, 07 Sep 2024 00:00:00 +0000</pubDate><guid>https://stepansite.com/2024/grandpa-tribute/</guid><description>&lt;p&gt;Мій дід Олександр дуже любив тепло. Навіть у літню спеку він ходив у штанях і сорочці з довгим рукавом. Взимку натоплював хату так, що було гаряче, і залишався в двох светрах. &amp;ldquo;Бррр, як холодно надворі&amp;rdquo; - часто казав він, повертаючись в дім.&lt;/p&gt;&#10;&lt;p&gt;Дід пережив війну дитиною, виріс у дитбудинку, все життя працював на заводах. Його головною справою були двигуни і коробки передач вантажівок, але він міг полагодити і трансформатор, і блок живлення. Якось зібрав діодний міст, щоб оживити зарядку свого простенького мобільного. Хату, де жила вся родина - він, бабуся і моя ще юна мама, - теж побудував своїми руками.&lt;/p&gt;</description></item><item><title>Їздив в Париж</title><link>https://stepansite.com/2024/paris/</link><pubDate>Sat, 20 Apr 2024 00:00:00 +0000</pubDate><guid>https://stepansite.com/2024/paris/</guid><description>&lt;h2 id="інтро"&gt;Інтро&lt;/h2&gt;&#10;&lt;p&gt;Ідея відвідати Париж у мене з&amp;rsquo;явилась одразу після переїзду до Лондона.&#10;Кілька разів у житті я намагався вивчити французьку мову і з нетерпінням чекав можливості&#10;випробувати свій скромний словниковий запас і нареші замовити &lt;em&gt;кофі е кґуассан, с-ів-ву-плє&lt;/em&gt;.&#10;Цікаво було особисто побачити як інженерний тріумф Ейфеля, так і відчути атмосферу міста загалом.&lt;/p&gt;&#10;&lt;p&gt;Тому, коли місяць тому я випадково знайшов дешеві квитки на поїзд до столиці Франції, не вагаючись&#10;скористався можливістю реалізувати свій давній задум. Заразом проїхатись найдовшим підводним тунелем на світі,&#10;і повезти свою дівчину в Париж.&lt;/p&gt;</description></item><item><title>Відвідав Базель</title><link>https://stepansite.com/2022/basel/</link><pubDate>Sat, 23 Apr 2022 00:00:00 +0000</pubDate><guid>https://stepansite.com/2022/basel/</guid><description>&lt;h2 id="місто-на-кордоні-трьох-країн"&gt;Місто на кордоні трьох країн&lt;/h2&gt;&#10;&lt;p&gt;Літав в Базель на вихідні. 1.5 години - ідеальна тривалість перельоту: мінімум радіації і вереску немовлят (дві однаково шкідливі для здоров&amp;rsquo;я речі).&#10;Європейський Аеропорт Базеля розташований на території Франції&lt;/p&gt;&#10;&lt;p&gt;&amp;ndash; Куди прямуєте? - питає мадам на паспортному контролі&lt;br&gt;&#10;&amp;ndash; Базель&lt;br&gt;&#10;&amp;ndash; З якою метою: бізнес, туризм?&lt;br&gt;&#10;&amp;ndash; Туризм&lt;br&gt;&#10;&amp;ndash; Туризм?! - здивовано перепитує мадам. Схоже це не дуже популярний варіант відповіді&lt;/p&gt;&#10;&lt;p&gt;Маленьке місто, історична частина зустрічає вузькими пішохідними вуличками і різнокольоровими ставнями на вікнах.&#10;По-літньому тепла погода і прозора вода в Рейні налаштовує на розслаблену прогулянку набережною.&#10;Всі зручності присутні, включаючи столики біля мобільних і постійних кав&amp;rsquo;ярень, вузька доріжка для прогулянок біля самої води.&#10;Останню швейцарці успішно використовують для посиденьок і розпиття напоїв різної міцності.&#10;Є навіть зони для купання: за буйки не запливати. Chill with respect - слоган на білборді.&lt;/p&gt;</description></item><item><title>Повертався в Лондон</title><link>https://stepansite.com/2021/flight-notes/</link><pubDate>Sun, 12 Sep 2021 00:00:00 +0000</pubDate><guid>https://stepansite.com/2021/flight-notes/</guid><description>&lt;h2 id="в-кракові-2300"&gt;В Кракові 23:00&lt;/h2&gt;&#10;&lt;p&gt;Мій напівпустий літак їде на зліт злітну смугу, щоб зірватись і лягти на курс до Лондона.&#10;Під ногами використана серветка та сліди чипсів - раянейр занадто бюджетний лоукост для прибирання в салоні після кожного рейсу.&#10;Точкове освітлення синього кольору разом з жовтою підсвіткою знаків над сидіннями пасажирів створюють атмосферу кіберпанку.&lt;/p&gt;&#10;&lt;figure class="gallery-item"&gt;&lt;a href="https://stepansite.com/2021/flight-notes/20210911_225559_hu_eceef2f1a42fbfc4.jpg" data-pswp-avif="/2021/flight-notes/20210911_225559_hu_87ada325b9b0397a.avif" data-pswp-width="1920" data-pswp-height="1200" data-caption="cyberpunk light in plane cabin"&gt;&lt;picture&gt;&lt;source type="image/avif" srcset="https://stepansite.com/2021/flight-notes/20210911_225559_hu_13f18cd6e44f35d1.avif 600w, https://stepansite.com/2021/flight-notes/20210911_225559_hu_9771e3c70e7a765f.avif 900w, https://stepansite.com/2021/flight-notes/20210911_225559_hu_c37bdfb99616ecad.avif 1200w" sizes="(min-width: 768px) 750px, 100vw"&gt;&lt;img src="https://stepansite.com/2021/flight-notes/20210911_225559_hu_b43407d3b1cef6d5.jpg" srcset="https://stepansite.com/2021/flight-notes/20210911_225559_hu_9cbaecffb172dc50.jpg 600w, https://stepansite.com/2021/flight-notes/20210911_225559_hu_b81ff8789a189784.jpg 900w, https://stepansite.com/2021/flight-notes/20210911_225559_hu_b43407d3b1cef6d5.jpg 1200w" sizes="(min-width: 768px) 750px, 100vw" width="1200" height="750" alt="cyberpunk light in plane cabin" loading="lazy" decoding="async"&gt;&lt;/picture&gt;&lt;/a&gt;&lt;/figure&gt;&#10;&#10;&lt;blockquote&gt;&#10;&lt;p&gt;&lt;code&gt;хай тек / лоу лайф&lt;/code&gt;&lt;/p&gt;</description></item><item><title>Був змушений ізолюватися</title><link>https://stepansite.com/2020/self-isolation/</link><pubDate>Wed, 02 Sep 2020 00:00:00 +0000</pubDate><guid>https://stepansite.com/2020/self-isolation/</guid><description>&lt;style&gt;&#10;#title {&#10;&#9;font-family:"Menlo","Osaka-Mono","Courier New";&#10;}&#10;.opacity {&#10; -webkit-transition: opacity 0.2s ease;&#10;}&#10;&lt;/style&gt;&#10;&lt;script type="text/javascript"&gt;&#10;&#10;&#10;var countDownDate = new Date("Sep 9, 2020 14:30:00").getTime();&#10;&#10;var timerHTML = "&lt;span id='days'&gt;&lt;/span&gt;d &lt;span id='hours'&gt;&lt;/span&gt;h &lt;span id='minutes'&gt;&lt;/span&gt;m &lt;span id='seconds'&gt;&lt;/span&gt;s"&#10;&#10;var container = document.getElementById("title")&#10;container.innerHTML = timerHTML&#10;&#10;&#10;function fade(element) {&#10; element.className = "opacity";&#10; element.style.opacity = 1;&#10; setTimeout(function() {element.style.opacity = 0}, 790);&#10;};&#10;&#10;function addZero(num) {&#10; if (num &lt; 10) {&#10; return "0" + num;&#10; } else {&#10; return num;&#10; }&#10;};&#10;&#10;function enableElementsOpacity(elementsArray) {&#10; for (i = 0; i &lt; elementsArray.length; i++) {&#10; elementsArray[i].style.opacity = 1;&#10; } &#10;}&#10;&#10;&#10;&#10;var x = setInterval(function() {&#10;&#10; enableElementsOpacity(container.children);&#10;&#10; &#10; var now = new Date().getTime();&#10; &#10; &#10; var distance = countDownDate - now;&#10; &#10; &#10; var days = Math.floor(distance / (1000 * 60 * 60 * 24));&#10; var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));&#10; var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));&#10; var seconds = Math.floor((distance % (1000 * 60)) / 1000);&#10;&#10; daysSpan = document.getElementById("days");&#10; hoursSpan = document.getElementById("hours");&#10; minutesSpan = document.getElementById("minutes");&#10; secondsSpan = document.getElementById("seconds");&#10;&#10; daysSpan.innerHTML = days;&#10; hoursSpan.innerHTML = addZero(hours);&#10; minutesSpan.innerHTML = addZero(minutes);&#10; secondsSpan.innerHTML = addZero(seconds);&#10; &#10; fade(secondsSpan);&#10; &#10; if (seconds == 0) {&#10; fade(minutesSpan);&#10; }&#10; &#10; if (minutes == 0 &amp;&amp; seconds == 0) {&#10; fade(hoursSpan);&#10; }&#10; &#10; if (hours == 0 &amp;&amp; minutes == 0 &amp;&amp; seconds == 0) {&#10; fade(daysSpan);&#10; }&#10; &#10; &#10; if (distance &lt; 0) {&#10; clearInterval(x);&#10; container.innerHTML = "00h:00m:00s";&#10; }&#10;}, 1000);&#10;&#10;&lt;/script&gt;&#10;&lt;p&gt;Той самий рейс Київ-Лютон, з різницею в 6 місяців, і я знову на нульовому меридіані.&#10;Світ змінився за минулі пів року і тепер я змушений був заповнити нескінченну форму і вказати деталі моєї подорожі та місця перебування у Великобританії. В цьому місці я повинен пробути наступні 14 днів, мінімізуючи контакти з іншими людьми.&lt;/p&gt;</description></item><item><title>Налаштував ергономічну розкладку</title><link>https://stepansite.com/2020/keyboard-layouts/</link><pubDate>Mon, 31 Aug 2020 00:00:00 +0000</pubDate><guid>https://stepansite.com/2020/keyboard-layouts/</guid><description>&lt;h2 id="інтро"&gt;Інтро&lt;/h2&gt;&#10;&lt;p&gt;Коли я задумав придбати ергономічну клавіатуру від Microsoft вирішив одразу поцікавитись альтернативними (очевидно, ергономічними) розкладками, оскільки у відгуках стверджували що така клавіатура без навичок сліпого набору не має сенсу. А набирати наосліп зручніше і швидше з оптимізованим розміщенням літер.&lt;/p&gt;&#10;&lt;p&gt;З англійськими розкладками все досить просто. Їх є декілька варіантів, Colemac i Dvorak підтримуються кожною з найпопулярніших ОС. Більш екзотичні можна легко знайти й скачати, хоча б з вікі.&lt;/p&gt;&#10;&lt;p&gt;Я зупинився на Colemac. Менш зручний варіант в плані набору тексту, але зі збереженням розташування більшості літер, задіяних у сполученнях клавіш. Тобто, Ctrl+q/w/a/z/x/c/v/b можна використовувати як і раніше, однією лівою. P, S, та F переїхали недалеко.&#10;Загалом, звикнути і запам&amp;rsquo;ятати можна відносно швидко. Допомагає тримати шпаргалку роздрукованою, або відкритою на другому моніторі. А ще переналаштувати &lt;code&gt;CapsLock -&amp;gt; Backspace&lt;/code&gt; - так швидше виправляти помилки, яких перший час буде чимало.&lt;/p&gt;</description></item><item><title>Прилетів у Лондон</title><link>https://stepansite.com/2020/london-flight/</link><pubDate>Sun, 01 Mar 2020 00:00:00 +0000</pubDate><guid>https://stepansite.com/2020/london-flight/</guid><description>&lt;h2 id="31a"&gt;31A&lt;/h2&gt;&#10;&lt;p&gt;Сиджу в останньому ряду біля вікна. Британський акцент розрізнив щойно зайшов у літак. Поруч схожий на ірландця і Роршага чоловік. За ним - українець в масці, який зняв її, щоб жерти сандвіч і чхати. Я ж поспав годинку і з&amp;rsquo;їв протеїновий батончик. Сусіди продовжують напихатись сандвічами, англієць-ірландець п&amp;rsquo;є чай з двома порціями молока.&lt;/p&gt;&#10;&lt;p&gt;Розносять це все темношкіра стюардеса та висока індуска, на ім&amp;rsquo;я Кармен. &amp;ldquo;Keep my fingers crossed&amp;rdquo; - каже вона поки один з пасажирів шукає дрібні гроші. Широка посмішка, брекети. Її емоції змусили мене посміхнутись і місс подумала що я щось хочу придбати. Дякую, але не сьогодні. Почекаю, щоб дівчата пішли та послухаю збережений в телефоні запис Гуфовського. Найкращий блогер ютубу.&lt;/p&gt;</description></item><item><title>Я був тут</title><link>https://stepansite.com/top/places/</link><pubDate>Sat, 25 Jan 2020 02:01:12 +0200</pubDate><guid>https://stepansite.com/top/places/</guid><description>&lt;p&gt;&lt;a href="https://stepansite.com/2020/places-map/" rel="noreferrer"&gt;Карта відвіданих міст&lt;/a&gt;. Залишу це тут.&lt;/p&gt;&#10;&#10;&#10;&#10;&lt;script src='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js'&gt;&lt;/script&gt;&#10;&lt;link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css' rel='stylesheet' /&gt;&#10;&lt;div id='map' style='width: 100%; height: 500px;'&gt;&lt;/div&gt;&#10;&lt;script defer&gt;&#10;mapboxgl.accessToken = "pk.eyJ1Ijoic3RlcGhhbjIxIiwiYSI6ImNsMm5lOHViMTE2YmQzb3BraGtrd2hzdXIifQ.UVLMX1yr359G9FroBX5cdQ";&#10;&#10; &#10;const map = new mapboxgl.Map({&#10; container: "map",&#10; style: "mapbox://styles/mapbox/light-v10?optimize=true",&#10; zoom: 3,&#10; center: [14.0213,47.9296]&#10;});&#10;&#10;&#10;&#10;&#10;fetch("https:\/\/gist.githubusercontent.com\/lynxrv21\/4575fad9fd66fc08a776081384b3cc81\/raw\/places.geojson")&#10;.then( response =&gt; response.json() )&#10;.then( data =&gt; {&#10; map.loadImage("https://a.tiles.mapbox.com/v4/marker/pin-m+7e7e7e.png?access_token=" + mapboxgl.accessToken, function(error, image) {&#10; if (error) throw error;&#10; map.addImage("custom-marker", image);&#10; &#10; map.addLayer({&#10; id: "markers",&#10; type: "symbol",&#10; &#10; source: {&#10; type: "geojson",&#10; data: data&#10; },&#10; "minzoom": 0.5,&#10; "maxzoom": 15,&#10; layout: {&#10; "icon-image": "custom-marker",&#10; "icon-allow-overlap": true&#10; }&#10; });&#10; });&#10;});&#10;&#10;map.on('click', function(e) {&#10; var features = map.queryRenderedFeatures(e.point, {&#10; layers: ['markers'] &#10; });&#10;&#10; if (!features.length) {&#10; return;&#10; }&#10;&#10; var feature = features[0];&#10;&#10; var popup = new mapboxgl.Popup({ offset: [0, -15] })&#10; .setLngLat(feature.geometry.coordinates)&#10; .setHTML('&lt;h4&gt;' + feature.properties.title + '&lt;/h4&gt;&lt;i&gt;' + feature.properties.date + '&lt;/i&gt;')&#10; .addTo(map);&#10;});&#10;&#10;map.addControl(new mapboxgl.FullscreenControl());&#10;&lt;/script&gt;</description></item><item><title>Додав карту</title><link>https://stepansite.com/2020/places-map/</link><pubDate>Tue, 21 Jan 2020 22:00:00 +0000</pubDate><guid>https://stepansite.com/2020/places-map/</guid><description>&lt;p&gt;Давно хотів відмічати міста в яких довелось побувати.&#10;Тому, натрапивши на &lt;a href="https://gist.github.com/janikvonrotz/37dc61480790b07ab91d88d624caef2b" target="_blank" rel="noreferrer"&gt;гітхаб&lt;/a&gt; одного швейцарця вирішив зробити й собі таку.&lt;/p&gt;&#10;&lt;blockquote&gt;&#10;&lt;p&gt;маркери клікабельні&lt;/p&gt;&#10;&lt;/blockquote&gt;&#10;&#10;&#10;&#10;&lt;script src='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js'&gt;&lt;/script&gt;&#10;&lt;link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css' rel='stylesheet' /&gt;&#10;&lt;div id='map' style='width: 100%; height: 500px;'&gt;&lt;/div&gt;&#10;&lt;script defer&gt;&#10;mapboxgl.accessToken = "pk.eyJ1Ijoic3RlcGhhbjIxIiwiYSI6ImNsMm5lOHViMTE2YmQzb3BraGtrd2hzdXIifQ.UVLMX1yr359G9FroBX5cdQ";&#10;&#10; &#10;const map = new mapboxgl.Map({&#10; container: "map",&#10; style: "mapbox://styles/mapbox/light-v10?optimize=true",&#10; zoom: 3,&#10; center: [14.0213,47.9296]&#10;});&#10;&#10;&#10;&#10;&#10;fetch("\/2020\/places-map\/places.json")&#10;.then( response =&gt; response.json() )&#10;.then( data =&gt; {&#10; map.loadImage("https://a.tiles.mapbox.com/v4/marker/pin-m+7e7e7e.png?access_token=" + mapboxgl.accessToken, function(error, image) {&#10; if (error) throw error;&#10; map.addImage("custom-marker", image);&#10; &#10; map.addLayer({&#10; id: "markers",&#10; type: "symbol",&#10; &#10; source: {&#10; type: "geojson",&#10; data: data&#10; },&#10; "minzoom": 0.5,&#10; "maxzoom": 15,&#10; layout: {&#10; "icon-image": "custom-marker",&#10; "icon-allow-overlap": true&#10; }&#10; });&#10; });&#10;});&#10;&#10;map.on('click', function(e) {&#10; var features = map.queryRenderedFeatures(e.point, {&#10; layers: ['markers'] &#10; });&#10;&#10; if (!features.length) {&#10; return;&#10; }&#10;&#10; var feature = features[0];&#10;&#10; var popup = new mapboxgl.Popup({ offset: [0, -15] })&#10; .setLngLat(feature.geometry.coordinates)&#10; .setHTML('&lt;h4&gt;' + feature.properties.title + '&lt;/h4&gt;&lt;i&gt;' + feature.properties.date + '&lt;/i&gt;')&#10; .addTo(map);&#10;});&#10;&#10;map.addControl(new mapboxgl.FullscreenControl());&#10;&lt;/script&gt;&#10;&#10;&lt;h2 id="how-to"&gt;How-to&lt;/h2&gt;&#10;&lt;p&gt;Позначки на карті записані в &lt;a href="https://docs.mapbox.com/help/glossary/geojson/" target="_blank" rel="noreferrer"&gt;GeoJSON&lt;/a&gt; форматі, який можна згенерувати на одному з сервісів на зразок &lt;a href="https://geojson.io/" target="_blank" rel="noreferrer"&gt;geojson.io&lt;/a&gt; чи &lt;a href="https://geojson.net/" target="_blank" rel="noreferrer"&gt;geojson.net&lt;/a&gt;. Потрібно лише поставити маркер на карті і, клікнувши на нього, записати додаткові параметри.&lt;/p&gt;</description></item><item><title>Про Мене</title><link>https://stepansite.com/top/about/</link><pubDate>Fri, 03 Jan 2020 03:47:12 +0200</pubDate><guid>https://stepansite.com/top/about/</guid><description>&lt;h2 id="привіт"&gt;Привіт!&lt;/h2&gt;&#10;&lt;p&gt;Хтось дійсно читає особисті сторінки в еру фейсбуків та ютуба?&#10;Якщо так, то дякую за візит :)&lt;/p&gt;&#10;&lt;p&gt;Я працюю розробником пз і надихнувшись прикладом крутих хлопців та дівчат з Гітхабу вирішив додати ще один сайт до вже наявних в інтернеті 1.7+ мільярдів.&lt;/p&gt;&#10;&lt;p&gt;Планую писати про свій досвід розробки та враження від відвіданих міст.&#10;З часом тут буде більше контенту, а поки що можете поділитись своїми ідеями або залишити коментар - контакти в футері внизу сторінки&lt;/p&gt;</description></item></channel></rss>