Начнём эту неделю со старой книги — “Бег с Лидьярдом” (авторы Гарт Гилмор и Артур Лидьярд).

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

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

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

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

“Тренируйся, не перенапрягайся,” — это один из ключевых принципов Лидьярда, который подчеркивает важность сбалансированного подхода к тренировкам.

Книга очень классная. Если ещё не читали, очень рекомендую.

“Больше никаких трейлов, Денис” говорил я себе, на Повлене. Но… рекламный баннер в сториз нашёптывал мне совершенно о другом.

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

Вот такая интересная статистика с прошлого года.

Май — сентябрь: хот-доги из Costco и root bear отлично делают своё дело. Добавим к этому передвижение на машине (потому что пешком в Канаде ходить невозможно) и получаем плавное увеличение веса. Октябрь — декабрь: по возвращению в Нови Сад и нужно вспомнить вкус всех кобасиц и пива. Но потом в доме появились весы 😀.

До марта я усердно бегал, чтобы вернуться в форму и вот результат: желаемые 73.5 достигнуты. Потом снова что-то пошло не по плану, но я работаю над этим и понимаю что и где поломалось.

Кстати, Денис 2021-го вряд ли стал бы есть такое. А Денис 2024-го ест и в восторге.

Сегодня пришло в голову поискать исследования на тему влияния музыки на общее состояние во время пробежки. Когда-то слышал, что музыка может снизить восприятие сложности бега примерно на 10%.

Оказывается, действительно проводились такие исследования. Например, в 2010 году, исследование проведенное спортивным психологом К.И. Карагеоргисом, показало, что музыка может улучшить спортивные результаты двумя способами: она может либо отсрочить наступление усталости, либо повысить работоспособность. Согласно этому исследованию, воздействие музыки приводит к “более высоким, чем ожидалось, уровням выносливости, мощности, производительности или силы”. Наилучший темп музыки для повышения эффективности бега на беговой дорожке находится в диапазоне от 123 до 131 удара в минуту (bpm). Конечно, всё индивидуально и зависит от возможностей, темпа бега. Но вот, ради примера пару плейлистов из Spotify на 120bmp и 140bmp.

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

А где-то в середине полукилометрового подъема я понял, что начинаю раздражаться и музыка мешает. Снял наушники, убрал в сумочку и дальше пополз в тишине. С тех пор перестал слушать музыку даже на легких пробежках. И, знаете, оказалось очень классно слушать тишину и мир вокруг. Это как-то по-другому, не как с музыкой, за которой ничего не слышишь. Появилось больше сосредоточенности и мыслей во время пробежек.

Google Photos подкинул воспоминания с прошлого мая. Тогда мы ещё жили в Канаде и были полны уверенности, что вот, конец-то доехали до финиша.

Природа в Канаде очень красивая. Хотя, я могу так сказать про любую страну. Это же природа, она красива всем своим многообразием.

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

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

В очередной раз полез гуглить определение VO2 max и хочу поделиться тому, что нашел.

Для начала, обращаясь к себе: VO2 max — это максимальное потребление кислорода (МПК). Надеюсь, когда-нибудь я это запомню.

Если верить часам, мой показатель 44. Кажется, это значение лежит на границе областей “такое себе” и “в целом норм”. Кстати, данные из базы знаний Garmin выглядят позитивнее.

Еще на глаза попалась статья “Стоит ли беспокоиться о своем VO2max?”. Если кратко, то: VO2max сложно вычислять, поэтому исследований не так мало; но любая физ нагрузка — это хорошо.

С появлением AI, появляются новые методы предсказания VO2 max. Они основываются на анализе данных с носимых устройств. Это круто тем, что можно делать прогнозы основываясь на повседневной активности. На хабре, есть перевод одного из таких исследований — Предсказание VO2max с помощью машинного обучения.

Подписывайтесь, ставьте лайки 😀

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

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

Не знаю, что именно так сильно повлияло на общее состояние: резкая жара, трасса, которая оказалась монотонной и скучной или утренняя тренировка по теннису. А может всё вместе.

Но в итоге добежал. Можно было бы лучше, но как есть. Это тот самый забег, когда рад не времени, за которое пробежал, а самому факту: добежал 🙂

Планировал лёгкую пробежку, а вышла темповая. Чтобы добраться до места сбора, решил поехать на велосипеде. Но оказалось, что колесо спущено. Качаю — не накачивается. Спустя десять минут, решил ехать как есть, время-то идёт. В итоге, не успел на разминку. Приехал и, как в триатлоне, спрыгнув с вела побежал. Так и вышла темповая.

Ну а после попил кофе в Тишлере.

У меня VS Code выглядит довольно аскетично. Простая белая тема, минимум настроек. Иногда переключаюсь на темную тему, но рано или поздно возвращаюсь к белой.

Шрифт Fira Code.

Плагины must have для работы с Vue: Vue(Volar, не Vetur), ESLint, Prettier, GraphQL.

Еще дополнительно у меня установлены:

— эмулятор VIM
— Better Comments
— Color Highlight
— EditorConfig
— TODO Highlight

Файл .vscode/settings.json содержит вот такой конфиг:

{
  // prettier
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // to see functions arguments name (optional)
  "javascript.inlayHints.parameterNames.enabled": "all",
  // quick suggestions while typing (optional)
  "editor.quickSuggestions": {
    "strings": true
  }
  // Common settings
  "workbench.statusBar.visible": false,
  "workbench.sideBar.location": "right",
  "editor.fontSize": 13,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.fontWeight": "500",
  "search.showLineNumbers": true,
  // For VIM
  "editor.lineNumbers": "relative",
  "editor.rulers": [100],
  "workbench.iconTheme": "vscode-icons",
  "workbench.activityBar.location": "hidden",
  "telemetry.telemetryLevel": "off",
  "explorer.compactFolders": false,
  "workbench.editor.showTabs": "none",
  "breadcrumbs.enabled": false,
}

1,000s of Opinions on HTMX. Статья о JavaScript-библиотеке HTMX. В ней обсуждаются плюсы и минусы HTMX, а также мнения разработчиков, которые ее использовали. Некоторые разработчики считают HTMX простым и продуктивным решением, другие же считают его ненужно сложным. В целом, в статье говорится, что HTMX – это новая и интересная технология, которая заслуживает внимания.

Fonts for Accessibility with Eleni Beveratou. Это подкаст, в котором Eleni Beveratouо говорит шрифтах и доступности.

Feature-Sliced Design. Описание архитектурной методологии для фронтенд проектов. Помните, раньше всем рекомендовалось познакомиться с БЭМ? Вот тут то же самое, только про архитектуру.

Naming things needn’t be hard. Ресурс содержит списков слов, категоризованных по темам, которые можно использовать для нейминга.

Вышел плагин Figr Identity для Figma. Он помогает пользователям создавать и управлять системами дизайна: позволяет генерировать масштабируемые библиотеки компонентов, управлять стилями и переменными.

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

Плюсы пробежки вдоль залива: очень красиво. Минусы, пульс от такой красоты скачает. Только выравняешь, как тут же “ой, солнце на травку красиво падает”. И пульс снова уходит в гору 😀

Гранат обыкновенный (wiki)

Примечание: Это статья — конспект моей лекции. В ней описываются ключевые понятия.

Обновление: В примерах ниже обновились url, в результате запросы по http не работают. Поэтому я внес небольшие корректировки и при получении url картинок заменяю http на https. Работающий код можно посмотреть тут https://codepen.io/denisfl/pen/xxeQzpp.

Чтобы взаимодействовать с сервером (запрашивать или отправлять данные), нам нужны методы. Каждый запрос, который мы отправляем на сервер, включает в себя endpoint и тип отправляемого запроса. Endpoint — это, своего рода, шлюз между клиентом и сервером. В зависимости от валидности запроса сервер отправляет ответ. Если запрос успешен, сервер возвращает данные, например, в формате JSON. В случае ошибки, сервер возвращает сообщение об ошибки. Ответы сервера обычно сопровождаются кодами состояния (status codes), которые помогают понять, что сервер пытается сказать при получении запроса.

Например: 200–299 — успешный запрос, 400–499 — ошибка клиента, 500–599 — ошибка сервера. Вот тут можно посмотреть полный список кодов: HTTP response status codes.

Методы для отправки HTTP-запросов

GET. С помощью него клиент запрашивает у сервера содержимое ресурса.

HEAD. Это метод для получения заголовков ресурса. Обычно применяется для получения метаданных и проверки менялся ли ресурс с момента последнего посещения и существует ли он.

POST. Через этот метод клиент может передать данные в теле сообщения. Это могут быть какие-то данные с заполненной формы. POST является неидемпотентным методом, то есть при его отправке результат может отличаться. Кроме того, ответы на него не будут кэшироваться.

OPTIONS. С помощью него можно запросить список методов, которые он или его ресурс поддерживает. Также OPTIONS можно использовать для того, чтобы «пропинговать» сервер — протестировать его работоспособность.

PUT. Метод создаёт новый ресурс или заменяет существующий данными, которые указаны в теле запроса.

PATCH. Работает таким же образом, как и PUT, только по отношению к части ресурса.

DELETE. Клиент сообщает о том, что хотел бы удалить некий ресурс.

TRACE. С помощью него можно проверить, изменяют ли промежуточные узлы в сети запрос клиента.

CONNECT. Запускает туннель между клиентом и сервером.

Как запросить данные

XMLHttpRequest. Это довольно старый метод, тем не менее он все еще используется.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

Axios. Это клиент созданный на Промисах, был создан для удобства работы с HTTP-запросами.

axios.get('https://api.example.com/data')
     .then(response => console.log(response.data))
     .catch(error => console.error('Ошибка:', error));

Fetch API. Это функция JavaScript, которую можно использовать для отправки запроса на любой URL-адрес веб-API и получения ответа.

fetch('https://api.example.com/data')
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(error => console.error('Ошибка:', error));

Fetch и Axios очень похожи по функциональности. Axios создавался в тот момент, когда Fetch API не поддерживалось в разных браузерах и нужно было обеспечить совместимость с Internet Explorer. Сейчас можно использовать и то и другое, в зависимости от того, с чем комфортнее работать.

Запросили, получили, показали

Обычно если мы что-то запросили с сервера через GET, мы хотим это показать. В самом простом случае, мы вставляем полученные данные в DOM. Тут мы не говорим о современных решениях для работы с Virtual DOM.

Возьмем данные с http://pets-v2.dev-apis.com/pets и отрендерим их на страницы.

Для запроса используем fetch api:

async function fetchData() {
  try {
    const response = await fetch('http://pets-v2.dev-apis.com/pets');
    if (!response.ok) {
      throw new Error('Ошибка при загрузке данных');
    }
    const data = await response.json();

    // Допустим, у вас есть элемент в DOM для вставки данных
    const container = document.getElementById('pets-container');

    // Очищаем контейнер перед вставкой новых данных
    container.innerHTML = '';

    // Вставляем данные в DOM
    data.forEach(pet => {
      const petElement = document.createElement('div');
      petElement.textContent = `Имя: ${pet.name}, Вид: ${pet.animal}`;
      container.appendChild(petElement);
    });
  } catch (error) {
    console.error('Произошла ошибка:', error);
  }
}

// Вызываем функцию для загрузки данных
fetchData();

И применим этот код к html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pets Data</title>
  <style>
    .pet {
      margin-bottom: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    .pet img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div id="loading-message">Загрузка данных...</div>
  <div id="pets-container"></div>

  <script>
    async function fetchData() {
      const loadingMessage = document.getElementById('loading-message');
      const container = document.getElementById('pets-container');

      try {
        const response = await fetch('http://pets-v2.dev-apis.com/pets');
        if (!response.ok) {
          throw new Error('Ошибка при загрузке данных');
        }
        const data = await response.json();

        loadingMessage.style.display = 'none'; // Скрываем сообщение о загрузке

        // Очищаем контейнер перед вставкой новых данных
        container.innerHTML = '';

        // Вставляем данные каждого питомца в DOM
        data.forEach(pet => {
          const petElement = document.createElement('div');
          petElement.classList.add('pet');

          // Вставляем изображения питомца
          pet.images.forEach(imageUrl => {
            const img = document.createElement('img');
            img.src = imageUrl;
            petElement.appendChild(img);
          });

          // Вставляем информацию о питомце
          const info = document.createElement('div');
          info.innerHTML = `
            <p><strong>Имя:</strong> ${pet.name}</p>
            <p><strong>Вид:</strong> ${pet.animal}</p>
            <p><strong>Город:</strong> ${pet.city}</p>
            <p><strong>Штат:</strong> ${pet.state}</p>
            <p><strong>Описание:</strong> ${pet.description}</p>
            <p><strong>Порода:</strong> ${pet.breed}</p>
          `;
          petElement.appendChild(info);

          container.appendChild(petElement);
        });
      } catch (error) {
        console.error('Произошла ошибка:', error);
        loadingMessage.textContent = 'Ошибка загрузки данных';
      }
    }

    // Вызываем функцию для загрузки данных
    fetchData();
  </script>
</body>
</html>

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

Внутри функции fetchData мы обращаемся к внешним переменным, таким как loadingMessage и container. Эти переменные были определены в том же контексте, где и функция fetchData, и, следовательно, они доступны ей как внешние переменные.

Функция fetchData использует доступ к DOM-элементам loadingMessage и container, чтобы изменять их содержимое и стили. Это возможно благодаря замыканию, которое сохраняет ссылку на лексическое окружение, в котором была определена функция fetchData.

Внутри цикла forEach создается замыкание для каждой итерации. Это происходит потому, что каждый раз, когда вызывается метод appendChild() или устанавливается свойство innerHTML, создается новая функция, которая сохраняет ссылку на лексическое окружение функции fetchData.

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

В примере нижу функция fetchData и все переменные, которые она использует, организованы внутри объекта fetchDataObject. Все внутренние переменные функции, такие как loadingMessage и container, теперь доступны через ключевое слово this. Таким образом, объект fetchDataObject является замыканием, которое сохраняет доступ к своему лексическому окружению, включая переменные и методы.

const fetchDataObject = {
  loadingMessage: document.getElementById('loading-message'),
  container: document.getElementById('pets-container'),

  fetchData: async function() {
    const _self = this; // Сохраняем ссылку на текущий объект в переменной _self

    try {
      const response = await fetch('http://pets-v2.dev-apis.com/pets');
      if (!response.ok) {
        throw new Error('Ошибка при загрузке данных');
      }
      const data = await response.json();

      _self.loadingMessage.style.display = 'none'; // Используем _self для доступа к свойству loadingMessage
      _self.container.innerHTML = ''; // Используем _self для доступа к свойству container

      data.forEach(pet => {
        const petElement = document.createElement('div');
        petElement.classList.add('pet');

        pet.images.forEach(imageUrl => {
          const img = document.createElement('img');
          img.src = imageUrl;
          petElement.appendChild(img);
        });

        const info = document.createElement('div');
        info.innerHTML = `
          <p><strong>Имя:</strong> ${pet.name}</p>
          <p><strong>Вид:</strong> ${pet.animal}</p>
          <p><strong>Город:</strong> ${pet.city}</p>
          <p><strong>Штат:</strong> ${pet.state}</p>
          <p><strong>Описание:</strong> ${pet.description}</p>
          <p><strong>Порода:</strong> ${pet.breed}</p>
        `;
        petElement.appendChild(info);

        _self.container.appendChild(petElement);
      });
    } catch (error) {
      console.error('Произошла ошибка:', error);
      _self.loadingMessage.textContent = 'Ошибка загрузки данных'; // Используем _self для доступа к свойству loadingMessage
    }
  }
};

fetchDataObject.fetchData();

// Вызываем метод fetchData объекта fetchDataObject для загрузки данных
fetchDataObject.fetchData();

В примере с объектом fetchDataObject, мы используем this внутри объекта для доступа к его свойствам (this.loadingMessage, this.container) и методам. Здесь this указывает на сам объект fetchDataObject, поэтому мы можем обращаться к его свойствам и методам через this.

В то же время, в асинхронной функции fetchData, когда мы создаем переменные loadingMessage и container, мы получаем доступ к этим переменным, используя this, потому что в момент выполнения асинхронной функции контекст может измениться и this может потерять своё значение. Таким образом, мы сохраняем доступ к нужным нам переменным, используя их как свойства объекта this.

А теперь перепишем объект fetchDataObject, используя стрелочные функции.

const fetchDataObject = {
  loadingMessage: document.getElementById('loading-message'),
  container: document.getElementById('pets-container'),

  fetchData: async () => {
    const { loadingMessage, container } = fetchDataObject;

    try {
      const response = await fetch('http://pets-v2.dev-apis.com/pets');
      if (!response.ok) {
        throw new Error('Ошибка при загрузке данных');
      }
      const data = await response.json();

      loadingMessage.style.display = 'none';
      container.innerHTML = '';

      data.forEach(pet => {
        const petElement = document.createElement('div');
        petElement.classList.add('pet');

        pet.images.forEach(imageUrl => {
          const img = document.createElement('img');
          img.src = imageUrl;
          petElement.appendChild(img);
        });

        const info = document.createElement('div');
        info.innerHTML = `
          <p><strong>Имя:</strong> ${pet.name}</p>
          <p><strong>Вид:</strong> ${pet.animal}</p>
          <p><strong>Город:</strong> ${pet.city}</p>
          <p><strong>Штат:</strong> ${pet.state}</p>
          <p><strong>Описание:</strong> ${pet.description}</p>
          <p><strong>Порода:</strong> ${pet.breed}</p>
        `;
        petElement.appendChild(info);

        container.appendChild(petElement);
      });
    } catch (error) {
      console.error('Произошла ошибка:', error);
      loadingMessage.textContent = 'Ошибка загрузки данных';
    }
  }
};

fetchDataObject.fetchData();

Теперь функция fetchData не создает собственный контекст this, а вместо этого использует контекст объекта fetchDataObject. Мы также использовали деструктуризацию объекта внутри функции для получения доступа к свойствам loadingMessage и container.

https://zellij.dev

Когда-то давно, примерно лет 12 назад, я много работал с WordPress. Хотя он всегда позиционировал себя CMS для блогов, многие делали на нем не только блоги, потому что WordPress предоставлял удобную админку. Темы и плагины писать тоже было удобно. Но с развитием фронтенда со всеми сборщиками, реактами и полной сепарацией от бэкенда, возникла проблема: темы WP всегда были неотделимы от него, а фронтенд становился сложнее. В результате верстать и писать логику на js стало неудобно.

Спустя много лет, я решил посмотреть как же развивается WordPress и с удивлением обнаружил, что он теперь у него есть api. Более того, теперь можно запрашивать данные не только через REST API, но из GraphQL.

Изменилось все, даже способ установки. Так, к примеру, для установки WordPress на локальной машине можно использовать Docker образ для WordPress. Появились решения вроде LocalWP, Kinsta позволяющие запускать WordPress на локальной машине в один клик.

И это очень здорово, потому что команда WordPress решила ту самую проблему разработки тем и адаптировала свою систему под современные задачи.

По url https://yourdomain/wp-json/ доступен список всех роутов.

С помощью плагина WPGraphQL можно добавить поддержку GraphQL.

Ниже опишу пример создания блога на WordPress + Nextjs.

Установим wordpress. Я использовал LocalWP.

Выбираем Create a new site и прокликиваем опции, оставляя все настройки по умолчанию. В результате, работающий на локальной машине WordPress должен выглядеть вот так. Нам нужен адрес сайта: notes.local.

Если хотите использовать сразу production сервер, могу посоветовать railway.app. Для простого пет-проекта подойдет бесплатный тариф.

После развертывания проекта, нам потребуется url, по которому будет доступен WordPress. В моем случае это dailynotes.up.railway.app.

Этот адрес сайта потребуется нам для запросов. Его следует вынести в .env файл, а сам файл добавить в .gitignore, чтобы этот файл не попал на github. Одна из причин по которой так следует делать: чтобы разные настройки не перемешивались. Например, на локальной машине у вас может быть один адрес сайта, а на продакшене другой. Другая причина — в .env файлах можно хранить ключи доступа, которые не должны быть доступны публично.

Следующим шагом устанавливаем nextjs: npx create-next-app@latest.

В корневой директории проекта я сделал файл .env.local и добавил туда url сайта:

NEXT_PUBLIC_WORDPRESS_API_URL=https://dailynotes.up.railway.app

В этом примере я использую сразу путь к сайту на railway. Потому что кроме установки плагина я не планирую никаких изменений в WordPress и хочу сразу получать настоящие данные со своего блога.

Для получения данных мы создадим в корневой файл ./helpers/api.js:

const API_URL = `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/graphql

async function fetchAPI(query = '', { variables } = {}) {
  const headers = { 'Content-Type': 'application/json' }

  const res = await fetch(API_URL, {
    headers,
    method: 'POST',
    body: JSON.stringify({
      query,
      variables,
    }),
  })

  const json = await res.json()
  if (json.errors) {
    console.error(json.errors)
    throw new Error('Failed to fetch API')
  }
  return json.data
}

export async function fetchNotes() {
  const data = await fetchAPI(`
  query FetchNotes {
    posts(where: {status: PUBLISH}) {
      nodes {
        id
        title
        content
        date
      }
    }
  }
  `)
  return data?.posts
}

fetchAPI предназначена для выполнения асинхронных запросов к API с использованием метода POST. Она принимает два аргумента: query (по умолчанию пустая строка) и объект параметров с именем variables (по умолчанию пустой объект).

Для получения постов мы будем использовать fetchNotes(), которая в свою очередь будет использовать функцию fetchApi(). На странице ./page.js можно будет вызвать fetchNotes(), чтобы запросить данные:

import { fetchNotes } from '@/app/helpers/api'

export default async function Home() {
  const notes = await fetchNotes()
  return (
    <section>
      {notes.nodes.map((note) => {
        return (
          <article className="note" key={note.id}>
            <h2>{note.title}</h2>
            <div className="note-content" dangerouslySetInnerHTML={{ __html: note.content }}></div>
          </article>
        )
      })}
    </section>
  )
}

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

Upd: пост был написан 09 января 2022.

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

Около двух лет я носил Apple Watch Series 3. Носил их и днём и ночью, делая перерывы лишь на подзарядку. Но спустя какое-то время мне надоело заряжать каждый день, получать на них уведомления (даже если отключить звук и вибрацию, остается видна красная точка-индикатор), ставить на них обновления их и думать, что вот вышли новые часы и вот мои S3 уже не так хороши.

В какой-то момент я просто снял Apple Watch и больше не надевал. Поначалу без часов было немного странно. Мне очень нравилось что:

— ничего не надо заряжать
— если оставить телефон в другой комнате, то ничто не может меня побеспокоить. И тут важен именно психологический момент: нужно осознано взять и оставить телефон далеко. Не перевести его в беззвучный, а именно где-то оставить, чтобы иногда не заглядывать в него «а вдруг что-то важное».

В то же время, часы были нужны. На руке ощущалась непривычная пустота.

Однажды на Авито наткнулся на продажу старых советских часов Seconda. Это механические часы на калибре 2609. Очень милые и простые часы. Я носил их несколько месяцев, пока случайно не открутил с вала заводную головку. Заводить часы всё так же не составляло проблем. Проблема возникла при корректировке времени — ее невозможно было сделать (удобным способом). Особенность в том, что их суточная погрешность -20/+40 секунд. То есть раз в два-три дня приходилось изворачиваться, чтобы скорректировать время.

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

В какой-то момент я даже начал собирать коллекцию часов, которые мне нравятся, на Pinterest. В этой коллекции есть как доступные по цене модели, так и те, которые никак не вписываются в разумные траты. Все часы из этой коллекции выглядят красиво (для меня конечно же, коллекция-то моя 😀 ), но не все они функциональны. Это те самые часы, в которых можно пойти на встречу, в кафе или в гости. Они хорошо дополняют вечерний взрослый наряд. Но хотелось чего-то повседневного. Того, что можно носить не снимаю. Купаться, работать во дворе и не бояться сломать. К тому же они должны стоить не слишком дорого, чтобы в случае их поломки, не нужно было копить пару лет, а просто пойти и купить другие без ощутимого ущерба для бюджета.

Размышляя о приоритете функциональности над эстетикой я пришел к Casio G-Shock. Моя модель GA-2110SU-3A, она показалась мне одной из самых простых и имеет небольшую толщину по сравнению с остальными версиями джишоков.

Сравнивая их с Apple Watch, хочу сказать, что несмотря на практически одинаковый вес (AW – 52.8гр, G-Shock – 51гр), они ощущаются легче. Возможно из-за вида ощущения пластика, но ощущаются легче. К каучуковому ремешку Джишоков после силиконового или текстильного ремешков AW пришлось привыкать. Он жестковат и хотелось бы его немного разносить, смягчить. Но спустя месяц носки, мне кажется, что это отличный ремешок. Часы на руке сидят немного свободно и мне это удобно.

Джишоки — это просто часы, которые показывают время. Батарейки должно хватить на сколько-то там лет. На сайте Casio заявлено три года работы от батарейки, но там посмотрим.

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

Вот пример того, как светятся стрелки, если зайти в темноту из хорошо освещенной комнаты.

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

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

Радует, что эти часы абсолютно не зависят от телефона. Они самодостаточны. Это просто часы.