• Не найдены значения из json, как исправить?

    @twoone
    fetch, в отличии от рендера react, это асинхронная операция, поэтому к моменту первого рендера items имеют значение undefined, а следовательно и метода .map также не существует. Проще всего сделать items опциональным -
    function Activity({ items = []}) {}
    Ответ написан
    Комментировать
  • Какой язык поможет научиться грамотно подходить разработке на БЭ?

    @twoone
    Дело в том что крутая архитектура не идет со стороны "хипстерских" языков, она скрывается за энтерпрайз разработкой, пик которой сейчас приходится на c# (.net core, orleans, akka.net). Все это если и будет в nodejs... Это совершенно не нужно в nodejs так как он совершенно для другово. Nodejs это небольшие проекты и serveless и этим его компетенция и будет ограничена, так как скорость не позволяет его в энтерпрайзе использовать. Поэтому если вы хотите быть крутым разработчиком серверных приложений я бы рекомендовал c#. Ну а типы вполне покроет стек nodejs + ts. Этого больше чем достаточно.
    Ответ написан
    9 комментариев
  • Как исправить ошибку при декларации графики в Typescript?

    @twoone
    Для объявления пользовательских деклараций в корне проекта принято создавать директорию types, в которой для каждого покета создаетя поддиректоория содержащая файл index.d.ts. Имя поддиректории задается исходя из име пакета. В вашем случаи будет так ./types/svg/index.d.ts

    Для декларирования расширения достаточно объявления безтелесной декларации -
    declare module "*.svg";

    Осталось лишь указать путь до директории types вtsconfig.json в массиве "typeRoots": ["./types"]

    Для компилятора этого достаточно. Что косается поля include, по оно содержит массив путей для файлов участвующих в компиляции и в большинстве случаев объявляется совместно с полем exclude. В паре они помогают оптимизировать процесс компиляции.
    Ответ написан
    1 комментарий
  • Метод это функция или свойство?

    @twoone
    В классике метод (method) это функция ассоциированная с экземпляром класса (instance) (его объектом) или в случае статического метода непосредственно с самим классом. Свойствами (properties) называют геттеры (getters/get) или сетторы (setters/set). Так же геттер обозначают как акссесор, а сеттор как мутатор. Но зачастую можно встретить упоминание что геттер и сеттор, это аксессоры. Если метод содержит логику, то данные ассоциируются с полями (field). Методы, поля и свойства обозначают как члены (members) объекта\класса.

    Реализация классов в JavaScript отличается от классической поскольку построена на прототипах, что вносит некую долю путаницы. Путанница связанна с тем, что проблемы возникающие от потери контекста (this) вынуждают разработчиков изучать javascript намного глубже, чем это требуется в других классических языках. Из-за того что на уровне движка v8 все является членами объекта, то большинство склоняется что все в объекте это поля. И до момента объявления непосредственно методов {method(){}} это было справедливо. После необходимо разделять эти понятия даже если это всего лиш синтаксический сахар, поскольку даже в классических языках методы на самом низком уровне не могут быть чем-то отличными от полей. И всеже для ясности из называют методами.

    Исходя из всего этого методы точно не могут обозначатся свойствами.
    Ответ написан
    2 комментария
  • Верный способ инвалидации данных в redux store при работе с API?

    @twoone
    Первым делом стоит уяснить что логика должна быть распределенна по отдельным функциям\экшенам. Вторым делом необходимо запомнить что компоненты должны быть максимально простые. Они должны выполнять роль посредника между логикой приложения и шаблоном. Отсюда следует что обязанность компонента page заключается лишь в уведомлении приложения о изменении состояния непосредственно страницы (зашли\вышли\может_что-то_ещё_наподобие_прокидования_данных_конкретного_роута). Когнетивной нагрузки совсем мало.

    Но современные приложения зачастую очень сложные и требуют множества логики, речь о которой шла в "вопервых" и которая и должна быть сосредоточена в экшенах (зашел\вышел). То есть экшены должны представлять из себя древовидную структуру вызовов.

    Ситуация с сообщением об ошибки которую вы обозначили как проблему вполне нормальная для spa + single app state. Вот если бы у вас была событийная модель, то вы бы с подобным не столкнулись, но точно также пришлось городить несуразицу если бы потребовалось сохранить последнее состояние. Поэтому пока при построении приложения используется только один архитектурный подход подобное не избежно.

    Решение вы озвучили - необходимо завести экшены сбрасывающие состояние ошибок. Все остальные решения будут лишь излишними абстракциями над этим.
    Ответ написан
    Комментировать
  • Не работает роутинг на github pages. Как исправить?

    @twoone
    Роутинг spa приложений предполагает что сервер на любые аадреса будет отдавать index.html запускающего приложение роутинг которого уже будет рендерить страницу соответствующую маршруту. gh-pages такое не умеет поскольку является хостингом статики. Для разрешения проблемыd в корне вашего приложения создайте файл с именем 404.html и поместите в него следующий код -
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Single Page Apps for GitHub Pages</title>
        <script type="text/javascript">
            // Single Page Apps for GitHub Pages
            // https://github.com/rafrex/spa-github-pages
            // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
            // ----------------------------------------------------------------------
            // This script takes the current url and converts the path and query
            // string into just a query string, and then redirects the browser
            // to the new url with only a query string and hash fragment,
            // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
            // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
            // Note: this 404.html file must be at least 512 bytes for it to work
            // with Internet Explorer (it is currently > 512 bytes)
            // If you're creating a Project Pages site and NOT using a custom domain,
            // then set segmentCount to 1 (enterprise users may need to set it to > 1).
            // This way the code will only replace the route part of the path, and not
            // the real directory in which the app resides, for example:
            // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
            // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
            // Otherwise, leave segmentCount as 0.
            var segmentCount = 1;
            var l = window.location;
            l.replace(
                l.protocol + '//' + l.hostname + ( l.port ? ':' + l.port : '' ) +
                l.pathname.split( '/' ).slice( 0, 1 + segmentCount ).join( '/' ) + '/?p=/' +
                l.pathname.slice( 1 ).split( '/' ).slice( segmentCount ).join( '/' ).replace( /&/g, '~and~' ) +
                ( l.search ? '&q=' + l.search.slice( 1 ).replace( /&/g, '~and~' ) : '' ) +
                l.hash
            );
        </script>
    </head>
    <body>
    </body>
    </html>


    Кроме того помнине что в случаи отсутствия домена все внутренние ссылки (переходы\картинки и т.п.) должны включать имя вашего репозитория.
    Ответ написан
    1 комментарий
  • Как остановить interval в RxJS?

    @twoone
    Rxjs потрясающая библиотека позволяющая реализовывать любые сценарии, но требующая мышления абстракциями продвигаемой ею идеалогией. И если я правильно понял ваш случай, то проще всего применить оператор take.

    Ответ написан
    Комментировать
  • Деплой full stack проекта на node js и react?

    @twoone
    Существует два лагеря первый из которых проповедует разделение репозиториев на клиент и сервер, а вторая за объединенный моно-репозиторий. И обе категории правы, поскольку у удних проект состоит из клиента и сервера, а у других один сервер может быть как на множество клиентов, так и на оборот.

    В вашем случае, скорее всего нужно склонятся к монорепозиторию (может потребоватся использование lerna) которые будут состоять из директорий client\server и тому подобное. С дев разработкой можно поступить несколькими путями. Либо запускать реальный сервер (могут возникнуть проблемы с приватными ключами у сторонних разработчиков), либо использовать моки (трбуется постоянная синхронизация которая может быть решена расшариванием моков необходимых для тестирования сервера).

    И для прод сборки и развертывания обязательно используйти ci\cd (github actions например) с помощью которых настроете сборку проекта так как только пожелаете.
    Ответ написан
    Комментировать
  • Не могу определиться: PHP или Python?

    @twoone
    Все зависит от ваших потребностей и возможностей. Если вы легко можете представить свою жизнь как жизнь среднестатестического инженера (средний уровень достатка и средний уровень комфорта на работе), то выбирайте php. Если же вы хотите взять по максимуму от занятия программированием, то не стоит смотретьв сторону средних проектов разрабатываемых компаниями в которых царят коммунистическая отмосфера и рабское отношение к людям. Если вы уверены в своих возможностях как технаря, то учите c# который по технической части далеко впереди упомянутых вами языков и который уже сегодня используют в проде многие крупные компании. Запвтра этот язык займет нишу которая была плотно закреплена все последнии пятнадцать лет за java.

    Если кто-то скажет что c# сложный для первого языка, то это полный бред. Подумайте сами, чем китайскому ребенку сложнее итальянского? Первый язык всегда дается одинаково сложно! Настоящая сложность начинается при изучении последующих языков использующих другие парадигмы. Так вот с c# будет намного легче перейти на другой нежели на него самого.

    Доводы что на php проще начать фрилансить чем на c# подкрепляются статистикой с сайтов фриланса. Частично это правда. c# там не нужен. Но там и джуны не нужны! Там на один копеечный заказ грызня ведется между сотней студеий и просто вольных менеджеров, которым лишь бы урвать заказ и делегировать его за 10 проентов от тех копеек которые за него предлагают. Единственное куда вас возьмут это конторка работа в которой сопоставима с работой на галере.

    И научитесь думать за себя сами. Вы спросили что лучше php или python и вам ответили. Если спросить какой язык лучше, то вам перечислют все существующие языки поскольку все их кто-то учит и каждый отказывается признавать что его выбор отстой. Завтра будет необходим только c#, javascript\typescript, nodejs.
    Ответ написан
    Комментировать
  • Зачем создавать игровой движок? Чем плох Unity или UE4?

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

    Сегодня мнение о собственных игровых движках осталось лишь у крупных компаний, для которых отчисления за псевдобесплатные движки кажущиеся незначительными для маленьких команд, представляются большими расходами. Да и староверы, которые ещё пишут под старые мобилки. Все остольные используют unity\ue. Это очень продвинутые движки позволяющие максимально сосредоточится на раззработке непосредственно игр.

    Поскольку современные движки очень продвинутые, а игроки искушенные, от разработчиков требуется немалых знаний. Прежжде всего необходимо хорошо разбираться в редакторе выбранного движка, в ЯП лежащим в его основе и обязательно в архитектуре современных игр. Понимать процесс рендера, физику, математику. Кроме того необходимо обеспечить свою игру дружественным артом что требует хорошее владение ps, il, 3d редакторами и редакторами текстурирования. Понимать основы цифровой графики, незнание которых сказываются сразуже в виде рфонящих и несходящихся швов графических ассетов. И никуда не дется без понимания анимации, работы со звуком и оптимизации ассетов. Да, ещё нужно уметь писать сценарии, поскольку сегодня они требуются даже для пазлов.

    В общем нельзя делать игры которые будут нравятся пользователям не посвятив этому очень много времени. Но те кто только встанет на этот путь сразу же поймут насколько увлекательное и захватывающее время препровождение их ожидает. Настолько гемдев захватывавет что меняет саму сущность человека, его мировозрение.
    Ответ написан
    Комментировать
  • Разница при обучении javascript backend?

    @twoone
    Поскольку в основе и серверного и клиентского javascript лежит движок v8 синтаксис и основные языковые конструкции идентичны. Разница начинается в реализации api которые у браузера и десктопа значительно отличаются. Кроме того сильно разнятся архитектурные подходы, стек прилегающих технологий (БД, кеширование, nginx, логирование, docker, безопасность, управление нагрузкой, оптимизации которыми на клиенте принебрегают, зачастую администрирование) и повседневные задачи (работа с потоками, понимание сокетов, работа с байтами). Но нельзя сказать что мир фронтенда проще поскольку чуть в сторону от базовых фраймворков, сразу начинается геометрия, svg\сcanvas, анимация, понимание дизайна\арта, не совсем просто dom api.

    Поэтому если вы сомневаетесь с чего начать, то лично я бы посоветовал выбирать между работой с логами в консоли и создания красивого интерфейса. Некоторые вянут в консоли, другие утомляются от красивых анимашек. К чему у вас больше лежит душа? В чем уже есть опыт?
    Ответ написан
    2 комментария
  • Как понять внутреннее устройство Promises в Javascript?

    @twoone
    Давным давно, когда в javascript еще не было Promise, я изучал исходники доступных на тот момент нескольких альтернатив и могу сказать что тому кто только недавно познокомился с концепцией асинхронности бет не так просто разобраться во множестве конструкций необходимых для чистоты кода. Ссылки на лучшие реализации на текущей момент вам уже дали, но если захочется чего-то очень простого с комментами, то можете будет полезен упрощенный до максимума вариант написанный на скорую руку.

    Ответ написан
    Комментировать
  • Как сделать чтобы при скроле менялся цвет меню?

    @twoone
    Можно отслеживать активные секции с помощью IntersectionObserver. Но нужно помнить, что он работает ожидаемым образом только в том случае, если размеры первой и последней секции превосходят половину вьюпорта, что для реальных проектов практически дефакто. Иначе придется эксперементировать с конфигурацией IntersectionObserver.

    Ответ написан
    2 комментария
  • Как реализовать цикл в этой ситуации?

    @twoone
    Можно реализовать бесконечный ротатор на основе генераторов.

    Ответ написан
    1 комментарий
  • Как сделать смену стилей CSS в зависимости от времени суток с помощью JS?

    @twoone
    Если сайт является spa то будет необходимо реализовать постоянную проверку времени и изменение темы путем вызова метода changeTheme.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link id="time-theme" rel="stylesheet" href="">
        <script src="./time-theme.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    let timeRanges = new Set([
        {range: {from: `24`, to: `4`}, name:`night`, href:`./dark-theme.css`},
        {range: {from: `4`, to: `12`}, name: `morning`, href:`./light-theme.css`},
        {range: {from: `12`, to: `17`}, name: `day`, href:`./light-theme.css`},
        {range: {from: `17`, to: `24`}, name: `evening`, href:`./dark-theme.css`},
    ]);
    
    const changeTheme = timeRanges => {
        let currentHour = new Date().getHours();
    
        for(let {range, href, name} of timeRanges){
            if(currentHour >= range.from && currentHour <= range.to){
                Object.assign(document.querySelector(`link#time-theme`), { href });
        
                break;
            }
            
        }
    }
    
    changeTheme(timeRanges);
    Ответ написан
    1 комментарий
  • Как реализовать команду на js?

    @twoone
    Если я правильно вас понял..
    Ответ написан
    Комментировать
  • Как всё-таки ПРАВИЛЬНО вставлять картинки в canvas?

    @twoone
    Изображение представляется файлом хранящимся на сервере и заключающего в себе информацию о пикселях в виде двухмерного массива чисел. Самый простой способ получить эти данные в программе загрузить их с помощью объекта Image, а затем передать его в метод drawImage для отрисовки на канвасе. Если вы не дождетесь полной загрузки данных то рисовать будет попросту нечего. Поэтому Ваша цель заключается в полной загрузке всех изображений и отрисовки их в нужном порядке. Этого проще всего добится с помощью Promise.

    Ответ написан
    Комментировать