Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (1)

Наибольший вклад в теги

Все теги (8)

Лучшие ответы пользователя

Все ответы (13)
  • Как при достижении условного брейкпоинта ширины экрана сменить через js href у ссылки?

    @tehfreak
    Вот современный способ проверки на соответствие медиавыражению:
    if (window.matchMedia('(max-width: 700px)').matches) {
      for (const linkElement of document.querySelectorAll('.order-project__more-details-btn')) {
        linkElement.setAttribute('href', 'examples-foundation-640')
      }
    }

    А вот документация: https://developer.mozilla.org/ru/docs/Web/API/Wind...
    Ответ написан
    1 комментарий
  • Как лучше загрузить сайт на React на GitHub для доказательства, что он действительно на React?

    @tehfreak
    Github Pages это хостинг статических стайтов. И у него есть два режима работы:

    1. Хостинг из указанной ветки
    Можно руками закоммитить содержимое папки build в какую-то ветку, и выбрать эту ветку в качестве источника в настройках репозитория в разделе Pages.

    Это можно частично автоматизировать с помощью, например, этого инструмента.

    Вот пример команды для развертывания проекта на основе CRA (Create React App)

    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "deploy": "npm run build && gh-pages -d dist"
    }


    2. Хостинг артефактов
    Можно полностью автоматизировать сборку и развертывание при коммите в репозиторий, написав сценарий с помощью Github Actions. В этом случае нужно выбрать Github Actions в качестве источника в настройках репозитория в разделе Pages.

    Вот пример автоматизации развертывания проекта на основе CRA

    Репозиторий с исходным кодом: https://github.com/tehfreak/example-react-cra-ghpa...
    Сценарий сборки и развертывания в этом репозитории: https://github.com/tehfreak/example-react-cra-ghpa...
    Собранный код доступен по этой ссылке: https://tehfreak.github.io/example-react-cra-ghpag...

    Вот пример автоматизации развертывания проекта на основе NextJS

    Репозиторий с исходным кодом: https://github.com/tehfreak/example-react-nextjs-g...
    Сценарий сборки и развертывания в этом репозитории: https://github.com/tehfreak/example-react-nextjs-g...
    Собранный код доступен по этой ссылке: https://tehfreak.github.io/example-react-nextjs-gh...

    В этих примерах сценарии максимально упрощены. В реальных проектах сценарии сборки и развертывания чуть сложнее. Но эти сценарии вполне можно использовать как есть для работы над небольшими пет-проектами.

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

    Я рекомендую автоматизировать развертывание. Happy hacking!
    Ответ написан
    2 комментария
  • Как высчитать и вернуть разницу в секундах в сравнении времени?

    @tehfreak
    В общем случае так:
    const dateA = new Date('...')
    const dateB = new Date('...')
    
    // разница в секундах с точностью до миллисекунды
    const differenceInSeconds = (dateA.getTime() - dateB.getTime()) / 1000
    
    // затем можно или отбросить дробную часть
    console.log(Math.trunc(differenceInSeconds))
    // или округлить одним из методов
    console.log(Math.round(differenceInSeconds))

    В вашем случае, судя по комментарию к вопросу, должно быть как-то так:
    let lastReqDate
    app.get('/api/v1/example', (req, res) => {
      const date = new Date()
      let diff
      if (lastReqDate != null) {
        diff = (date.getTime() - lastReqDate.getTime()) / 1000
      }
      if (diff != null && diff < 120) {
          diff = Math.ceil(diff) // округление до ближайшего большего целого
          res.header('Retry-After', diff)
          res.status(429) // Too Many Requests
          res.send({ retryAfter: diff })
      } else {
          lastReqDate = date
          // выполнение запроса разрешено
      }
    })
    Ответ написан
    Комментировать
  • Как отрисовать данные которые приходят асинхроно?

    @tehfreak
    Вот полная версия требуемого компонента с индикатором загрузки и обработкой ошибки:
    class Lectures extends React.PureComponent {
    
        state = {
            lectures: null,
            lecturesError: null,
            lecturesPending: true,
        }
    
        async componentDidMount() {
            await this.fetchLectures()
        }
    
        async fetchLectures() {
            this.setState({ lectures:null, lecturesError:null, lecturesPending:true })
            try {
                const lectures = (await firebase.database().ref('lectures').once('value')).val()
                console.log(lectures)
                this.setState({ lectures, lecturesError:null, lecturesPending:false })
            } catch (lecturesError) {
                console.error(lecturesError)
                this.setState({ lectures:null, lecturesError, lecturesPending:false })
            }
        }
    
        render() {
            const { lectures, lecturesError, lecturesPending } = this.state
            return (
                <section>
                    <h1>Лекции</h1>
                    {lecturesPending && (
                        <div>Загружаются...</div>
                    )}
                    {lecturesError != null && (
                        <div>Не удалось загрузить: {lecturesError.message}</div>
                    )}
                    {lectures != null && (
                        <ul>
                            {lectures.map((lecture) => (
                                <li
                                    key={lecture.id}
                                >
                                    {lecture.name}
                                </li>
                            ))}
                        </ul>
                    )}
                </section>
            )
        }
    }
    Ответ написан
    Комментировать
  • Нужно ли дробить страницу на компоненты, которые не несут в себе никакого функционала?

    @tehfreak
    В общем случае следует выносить в отдельные компоненты ради возможности переиспользования этих компонентов. А также ради инкапсуляции и локализации верстки и логики, в том числе чтобы упростить понимание родительского компонента.
    Ответ написан
    Комментировать