• Как узнать номер элемента div внутри div?

    yurakostin
    @yurakostin
    Front-end developer
    Исходя из вопроса, ответ скорее всего "нет", но вы этот JSX своими руками выводите?

    И если всё-таки нет, то попробуйте

    useEffect(() => {
            settingContent?.querySelectorAll('.item-title').forEach((item, index) => {
                    item.textContent = `${index + 1}. ${item.textContent}`
            })
        }, [])


    UPD:
    Только-только осознал, что раз jsx, значит скорее всего реакт, а значит имена классов дополняются разными хешами, и доступ к элементам можно получить через ref

    Но вариант с css гораздо лучше и правильнее =)
    Ответ написан
    1 комментарий
  • Асинхронность и чистые функции несовместимы?

    yurakostin
    @yurakostin
    Front-end developer
    Здравствуйте.

    Курите функциональное программирование. Дмитрий Беляев вам в целом всё правильно сказал: запрос, вывод в консоль, чтение из глобальной области видимости, запись в файл и всё прочее - сайд эффекты, которые в идеале нужно выполнять на границе "чистого" и "грязного" миров. Во фронтенд разработке, к сожалению, эта граница практически отсутствует, так как всё время есть какие-то события, какие-то запросы туда-сюда, и вот это вот всё, но тем не менее, вы можете писать код так, чтобы он был лучше, чище, понятнее; был прост в поддержке, и т д.

    По вашему вопросу. Логика асинхронных операций в библиотеке типа fp-ts вынесена в Task, и все преобразования над данными можно реализовывать чисто.

    Но начать лучше, пожалуй, с наиболее адекватного введения в ФП. Будьте готовы к тому, что мозг будет отказываться воспринимать информацию, и если вам не зайдёт - возвращайтесь в ФП позже. Это немного другой мир, но он по-своему прекрасен.
    Ответ написан
    Комментировать
  • Как резиново сверстать этот макет?

    yurakostin
    @yurakostin
    Front-end developer
    Посмотрите, возможно, что вам очень зайдёт вот это видео. И другие, которые есть в описании.
    Ответ написан
    Комментировать
  • Как сделать поиск по коду при нажатии на кнопку?

    yurakostin
    @yurakostin
    Front-end developer
    Здравствуйте.

    Постарайтесь перестать думать через вёрстку, и через поиск элементов.
    Я понимаю, что у вас тут всё рендерится сервером, но тем не менее.

    Если у вас все данные доступны на клиенте, тогда можете сделать так.

    А ещё проще при изменении данных фильтров отсылать запрос на сервер, и получать либо разметку, либо данные для рендера.
    Ответ написан
    Комментировать
  • Что можно сделать для портфолио начинающему react js программисту?

    yurakostin
    @yurakostin
    Front-end developer
    Покажите на github-е, что вы развиваетесь.
    Сделайте один проект так как умеете сейчас.
    Добавьте в него eslint, prettier(если их ещё нет).
    Научитесь видеть проблемы в своём коде.
    Потом сделайте другой проект, но уже с использованием, например хуков(если не используете сейчас).
    Потом добавьте TypeScript.
    Потом... потом начните писать на Haskell =)

    Ваша задача как разработчика, прийти на проекте, быстро в него погрузиться и быстро начать решать задачи бизнеса. Чем шире ваша экспертиза, тем качественнее и быстрее вы работаете.
    Поэтому делать кучу однообразных Todo - плохая затея.
    Нет смысла делать разные проекты, если всё, что вы там делаете - запрашиваете данные и отображаете их.
    Научитесь работать с картами, например Yandex или 2GIS.
    Научитесь работать с браузерным audio API.
    Ответ написан
  • Стоит ли идти в веб-разработку?

    yurakostin
    @yurakostin
    Front-end developer
    Идти или нет
    Идти в веб разработку стоит по двум причинам:
    • Веб разработка, как и любое другое ремесло - занятие, которое нужно попробовать, чтобы понять, нравится оно или нет, а значит, если вам интересно, то попробуйте, но не ждите быстрого результата. Редкий художник/писатель быстро/дорого продаёт свои работы в первый год, пока он осваивает ремесло. Возможно аналогия не самая удачная, но, надеюсь, понятная. (PS: я учился вебу год перед тем как попасть на первую работу)
    • Умение программировать учит по-другому думать и смотреть на решение любых проблем. Хотя далеко не у всех программистов системный подход к решению задач.


    Направление в разработке
    С направлением есть нюансы, которые актуальны, по крайней мере для меня ( эти нюансы справедливы для любой сферы деятельности человека).

    Предположим, что вы выучили всё, что нужно и нашли работу. И первый год уже учитесь на работе, решая бизнесовые задачи, и вы счастливы, получая деньги и делая то, что вам интересно.
    Проходит 2 года и вы чувствуете что набили оскомину, что ваша работа вас уже не радует.
    Это может говорить о том, что:
    • Вы выросли и вам нужно просить дать вам больше ответственности и других задач, или менять работу с повышением.
    • Вы выгорели на текущей работе от горящих сроков, токсичных коллег или руководства. В этом случае, если на вопрос "нравится ли мне делать то, что я делаю?" ваш внутренний голос отвечает "да, я всё ещё это люблю, я просто устал от негатива, сроков, недосыпа, etc", тогда имеет смысл поменять компанию.
    • Если же вы понимаете, что не испытываете никакой радости в принципе, а вся эйфория была только от того, что у вас был хороший заработок, тогда, к сожалению, IT - не ваше.


    Дальше, если вы всё-таки остались в IT, наступает прикольный момент, когда вы думаете, что изучили всё, что было можно изучить, или хотели бы заняться чем-то другим: мигрировать с веба на мобилки; мигрировать с интерфейсов на геймдев; мигрировать с фронта на бэкенд; etc.
    Тут наступает новый момент выбора, и у вас, очевидно, два варианта:
    • Остаться там, где вы есть.
    • Мигрировать.


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

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

    У меня тоже получилось многословно =)

    PS: всё написанное выше - не инструкция, а мой личный опыт и суждения.
    Ответ написан
    2 комментария
  • Как подгрузить новости из БД по нажатию кнопки?

    yurakostin
    @yurakostin
    Front-end developer
    Круто, что вы ставите перед собой и решаете задачи. Как я понял, ваше решение работает, и это отлично.

    Теперь поставьте перед собой две цели:
    • Сделать ваш код лучше. Например, использовать фреймворк, или пару библиотек, или хотя бы fetch, чтобы не писать столько лютого кода. Разбейте ваш код на части, абстрагируйте его. Уйдите от императивщины в сторону ООП, или ФП
    • Сами подумайте над тем как сделать лучше. Не существует единственно правильного решения задач. Особенного в js =). Всё, что вы сделали другой, более опытный разработчик сделает немного иначе, но и только. В идеале вам нужно пройти этот путь. Например, как написали выше, уменьшить количество запросов. Если у вас есть дома доска, встаньте рядом с ней(ну или воспользуйтесь старой доброй тетрадью), возьмите мел или маркер, и нарисуйте данные, которые вы получаете. Их можно как-то скомпоновать? Можно ли вообще иначе подойти к решению? Как сделать его оптимальнее, уменьшив количество запросов? Как унифицировать решение? Вероятно вы пройдёте долгий путь, но ваша экспертиза возрастёт.
    Ответ написан
    Комментировать
  • Как сбежать с фриланса?

    yurakostin
    @yurakostin
    Front-end developer
    Английский учить стоит однозначно.

    И если вам понравилось на upwork и с удалёнки в целом можно не съезжать, то возможно, что именно английский вам и стоит сейчас прокачивать в первую очередь.
    А там уже вся зарубежная(а значит более актуальная) информация будет более доступной для понимания.

    Ну или же искать компанию, которая готова взять вас с горящими глазами на обучение на не очень большую зп. И фигачить на работе(по рабочим задачам) и дома - учить js, фреймворки, сопутствующие API и библиотеки, а также, разумеется алгоритмы и структуры данных и паттерны и так далее, и тому подобное, словом, расширять кругозор себя как разработчика.
    Ответ написан
  • Как правильно вставлять в DOM c помощью js?

    yurakostin
    @yurakostin
    Front-end developer
    Попробуйте взглянуть на это: https://jsfiddle.net/z5gacj4s/2/
    Ответ написан
    Комментировать
  • Как писать Толковый ООП код в JS?

    yurakostin
    @yurakostin
    Front-end developer
    На мой вкус там, где ООП - там паттерны, а где паттерны - там не обязательно должно быть ООП.
    Вы должны понимать, зачем вы создаёте все ваши классы. Какую проблему они решают.

    Вот достаточно популярный ресурс по паттернам.

    Если вы хотите прям ООП-ООП, то у вас более половины вашего кода должно быть написано иначе(а ещё лучше на ООП языке типа Java). Не должно быть просто вызовов функций: вся работа через объекты. Никаких `$toolbar.append` и прочего.

    Опять же, я могу быть глубоко не прав, но js ни ООП, ни ФП подход не реализует в полной мере. Поэтому только и остаётся, что писать в каком-то гибридном стиле. Возможно, что это огромная проблема языка, возможно наоборот.
    Ответ написан
    Комментировать
  • Где лучше применять функциональное программирование в JavaScript?

    yurakostin
    @yurakostin
    Front-end developer
    Привет.

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

    К слову про RxJs. Я "̶н̶е̶ ̶ч̶и̶т̶а̶л̶,̶ ̶н̶о̶ ̶о̶с̶у̶ж̶д̶а̶ю̶"̶ , не изучал его, но слышал, что в библиотеке всё построено на ФП, и это одна из моих целей к изучению.

    Как с ФП так и с ООП можно решать определённые типы задач. И порой код выглядит очень усложнённым, если мы пытаемся применить ФП для решения ООП задачи и наоборот.
    Отчасти нам повезло, что js позволяет делать и так, и эдак, и не заключает нас в рамки использования какой-то одной концепции.

    Забавная статья про ФП и ООП

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

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

    Я даже не знаю как это правильно реализовать на ООП...
    class Sum {
        static sum(a, b) {
            return a + b;
        }
    }
    
    class Sum {
        constructor(a, b) {
            this.a = a;
            this.b = b;
        }
        
        sum() {
            return this.a + this.b;
        }
    }


    При том, что в функциональном стиле это arrow function в одну строку
    const sum = (a, b) => a + b;


    А в haskell это вообще великолепно:
    sum :: Int -> Int -> Int
    sum a b = a + b


    Есть, кстати, великолепный учебник по Haskell.

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

    • решал поставленную задачу
    • был легко поддерживаемым
    Ответ написан
    Комментировать
  • Решать задачи VS Продолжать учиться?

    yurakostin
    @yurakostin
    Front-end developer
    Вы что-нибудь умеете? Вы учились, или решали задачи чтобы этому научиться?
    Ответ написан
    Комментировать
  • Как систематизировать изучение JS?

    yurakostin
    @yurakostin
    Front-end developer
    Ссылок, собственно, дофига..

    https://learn.javascript.ru/
    https://github.com/getify/You-Dont-Know-JS
    jstherightway.org
    largescalejs.ru
    shop.oreilly.com/product/9780596517748.do
    https://habr.com/company/ruvds/blog/337042/

    У Кантора вполне себе систематизированный учебник. Именно с него я начал, когда понял, что jquery для меня недостаточно.
    Но дело не только в том, что вы читаете учебник. Я уже 100500 раз, наверное, это говорю, но:
    1. Вы должны решать все задачи, которые есть в списке задач к главам.
    2. Важно ещё пытаться применить полученные знания где-то: в своей работе, или в какой-то выдуманной задаче. То есть, например, нужно использовать `Array.prototype.filter` столько раз, чтобы не возникало больше вопросов "как оно работает?", чтобы руки "помнили".

    Разумеется, это всё нужно для того, если вы хотите во фронт. Пласт информации огромный. Сам js, браузерные API, и прочее-прочее..

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

    Просто решайте разные задачи: работайте с данными; рисуйте на canvas, svg; манипулируйте DOM-ом; используйте service worker-ы; etc.. Это и будет расширять ваш кругозор..
    Но начать я бы советовал всё-таки с учебника Ильи ;)
    Ответ написан
    Комментировать
  • Как правильно реализовать подписку в паттерне Observer?

    yurakostin
    @yurakostin
    Front-end developer
    Фактически есть тот, кто издаёт новости и тот, кто хочет их получать.

    Таким образом есть две сущности: Издатель и Подписчик.

    Издатель извещает о том, что что-то произошло.
    Подписчик реагирует на это происшествие.

    Так у нас получается что-то такое:

    Подписчик
    methods:
    + отреагировать на событие

    Издатель
    props:
    - подписчики

    methods:
    - оповестить подписчиков
    + добавить подписчика
    + удалить подписчика
    + издать новость

    Если уйти от псевдокода, то получится следующее:

    class Publisher {
        constructor() {
            this._subscribers = [];
            this._state = {};
        }
    
         get state() {
            return this._state;
        }
    
        set state(value) {
            this._state = Object.assign({}, this._state, value);
            // Неявный вызов, можно, наверное, сделать лучше
            this._notifySubscribers();
        }
    
        _notifySubscribers() {
            this._subscribers.forEach((subscriber) => subscriber.notify(this._state))
        }
    
        addSubscriber(subscriber) {
            this._subscribers.push(subscriber);
        }
    }
    
    class Subscriber {
        constructor(name) {
            this.name = name;
        }
    
        notify(state) {
            console.log(`${this.name}: i received a new data: `, state);
            console.log('\n\n')
        }
    }
    
    const publisher = new Publisher();
    const subscriber1 = new Subscriber('John');
    const subscriber2 = new Subscriber('Jane');
    const subscriber3 = new Subscriber('Mary');
    
    publisher.addSubscriber(subscriber1);
    publisher.state = {a: 1};
    
    publisher.addSubscriber(subscriber2);
    publisher.state = {b: 2};
    
    publisher.addSubscriber(subscriber3);
    publisher.state = {c: 3};


    Код рабочий.

    Надеюсь, что я вас нигде не обманул и всё объяснил правильно.
    Ответ написан
    Комментировать
  • Абстракция в JavaScript?

    yurakostin
    @yurakostin
    Front-end developer
    Простите, а что вы подразумеваете под абстракцией в js?

    Есть, например, абстрактные классы. Об этом можно почитать в книгах про паттерны. Абстрактные классы, да не буду заброшен я помидорами за неточность, это классы, методы которых могут быть не описаны.

    class Animal {
        constructor({name, age}) {
            if (this.constructor.name === 'Animal') {
                throw new Error(`${this.constructor.name}: can not create instance of abstract class`);
            }
            
            this.name = name;
            this.age = age;
        }
    
        name() {
            return this.name;
        }
    
        age() {
            return this.age;
        }
    
        /*
         * Абстрактный метод
        */
        talk() {}
    }
    
    class Dog extends Animal {
        talk() {
            console.log('Bark!')
        }
    }
    
    const animal = new Animal({
        name: 'Jack',
        age: 5
    }); // выбросит ошибку
    
    const dog = new Dog({
        name: 'Jack',
        age: 5
    });
    dog.talk(); // Bark!


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

    Мне кажется, что вы задали не очень корректный вопрос, или сами не понимаете, что хотели вообще спросить.
    Ответ написан
    Комментировать
  • Как работает Let на Java Script Es2015?

    yurakostin
    @yurakostin
    Front-end developer
    Если не ошибаюсь, то `one` и `two` объявляются в данном случае как свойства глобального объекта. Собственно, это можно легко проверить, если написать в вашем коде:

    console.log(window.one, window.two, window.five);

    С таким объявлением нужно быть осторожным.
    Лучше всегда через var, let, const объявлять, да и вы наверняка это сами знаете.
    Ответ написан
    Комментировать
  • Какой код начать писать на JS?

    yurakostin
    @yurakostin
    Front-end developer
    Не покупайте пока никаких книг. Завершите две основные части learn.javascript.ru.

    Среди ответов была интересная мысль про морской бой.
    Вот пусть это будет вам первая задача.
    Задача интересная.
    Сделайте очень простую реализацию. Без бэкенда и прочего, чтобы всё было максимально просто.
    Пусть будет видно сразу два игровых поля - ничего страшного.

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

    Потом всегда можно допилить, чем вы скорее всего не займётесь, но уже приобретёте хороший опыт.
    Ответ написан
    Комментировать
  • Что входит в обязанности frontenda (вопрос к работающим)?

    yurakostin
    @yurakostin
    Front-end developer
    Frontend разработчик сейчас понятие чертовски широкое.

    Думаю, что реально крутой frontend developer умеет следующее:

    • Верстать. Доступно, кроссбраузерно, адаптивно, резиново и так далее.
    • На отлично знать VanilaJS.
    • Уметь собирать проекты: стили, js, шрифты, шаблоны - всё. Webpack, пожалуй - наше всё. Ибо, насколько я помню gulp и grant - таск-менеджеры. А с этой задачей прекрасно справляется npm. Соответственно.
    • Уметь настраивать webpack и при этом помнить, что есть готовые решения для сборки.
    • Уметь как работать с npm.
    • Уметь работать с двумя-тремя популярными фреймворками. Например Vue.js,
      Angular.js, React.js + Redux.js. Представлять плюсы и минусы каждого из решений.
    • Уметь писать код. Тоже очень широкое понятие. Но, я, пожалуй, остановлюсь на том, что хороший фронтендер должен писать код, придерживаясь code style-а; выделять общие части в отдельные функции/классы и т д; давать адекватные имена переменным/функциям/классам etc. В общем держать свой код в чистоте и порядке.
    • Уметь читать чужой код. Это очень непростая работа. Нужна высокая сосредоточенность, внимательность.
    • Уметь покрывать свой код тестами.
    • Уметь планировать архитектуру клиентской части приложения. Я бы даже сказал, что очень пригодится умение писать UML схемы. Мы же не jquery карусель собрались писать на такой должности.
    • Понимать на простом уровне как работает HTTP. Как клиент отправляет данные, как их считывает сервер, как отдаёт ответ, и т д.
    • Интересоваться смежными областями. В первую очередь backend. Благо можно не учить php, ведь есть nodejs. Это тот же самый javascript, так что думаю, что шикарный фронтендер должен уметь писать и на nodejs, понимать нюансы его работы.
    • Знать больше чем html, css, js. Уметь, например, программировать на python/erlang/ClosureScript/php/c/haskell/подставь своё. Это расширяет кругозор.
    • Следить за новинками в своей области и интересующих смежных областях.
    • Уметь работать с git.
    • Уметь работать с командной строкой. На мой взгляд уметь только cd, ls, mkdir, chmod, chown и touch - не серьёзно.


    Думаю, что если ещё посижу, то напишу ещё что-нибудь, но думаю, что основная мысль понятна - нужно уметь и знать много всего.

    Список этот может показаться пугающим. Но фишка в том, что всё сразу изучить нельзя. Двигайтесь по пунктам не спеша, разбираясь в тонкостях, нюансах.
    Изучение чего-либо процесс не быстрый, но если вам нравится то, что вы делаете, то усилия окупятся обязательно.
    Ответ написан
  • Есть ли смысл использовать формы?

    yurakostin
    @yurakostin
    Front-end developer
    Код должен быть семантичным. Это на тему того, что если элемент должен представлять элемент формы, то нужно верстать элемент формы, а не то, что вам кажется более подходящим для этого случая.

    И вообще Вадима Макеева на вас нет.
    "Доступность или смерть(жизнь?)". Вы должны учитывать ситуации, когда js действительно отключён. Это довольно сложно бывает сделать в связи с тем, что торопит бизнес, в связи с тем, что не всё зависит от вас.

    Прогрессивное улучшение, постепенная деградация применимы, я думаю, и в этом случае.
    Представьте, что у вас есть форма.

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

    При выключенном js данные валидируются только сервером и результат отдаётся путём перехода на другую(или эту же) страницу.

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

    Возможно это звучит слишком олдскульно - "js только для улучшения", но нет, история не об этом.
    История о том, что для каждого конкретного случая всё может быть по-разному, но при этом всегда должен сохраняться здравый смысл у разработчика.

    Форма это форма. Если вам нужно значения двух инпутов отправлять с помощью js, то не нужно верстать два поля, кнопку submit и вешать обработчик click на кнопку. У всех элементов есть своё назначение. Оборачиваете, как и надо, ваши инпуты и кнопку в form и вешаете обработчик на событие submit. Всё. Никаких проблем. Js у вас или нет - всё будет работать.

    Снова много букв в моём ответе. Пардоньте..
    Ответ написан
    2 комментария
  • Что посоветуете почитать для левелапа в JS?

    yurakostin
    @yurakostin
    Front-end developer
    Есть мнение, что нужно изучать другие языки.
    Например, я неоднократно слышал, что те js разработчики, которые попробовали Haskell или ClojureScript, начинают мыслить по-другому.
    Посмотрите доклад Александра Соловьёва, там он немного об этом говорит (да и сам доклад просто прелесть).

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

    Гениальные решения приходят либо спонтанно, либо путём трудов. Но в любом случае и то и другое доступно для вас.
    Ответ написан
    Комментировать