Ответы пользователя Klein Maximus

Как проектировать сайт на vue, чтобы его можно было потом сделать приложением?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Посмотрите https://quasar.dev/ - можно разрабатывать SPA, SSR, PWA, мобильные (через Cordova/Capacitor) и desktop (через Electron) приложения на Vue.

Ответ написан более трёх лет назад

Комментировать

Как скрыть дочерний элемент, если он полностью не вмещается в родителя?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Если я правильно понял задачу, можно сделать на чистом CSS - https://codepen.io/kleinmaximus/pen/gOPEKNq

Ответ написан более трёх лет назад

5 комментариев

Как обновить данные в componentDidMount, если данные идут из socket-а?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Типа такого:

class WS extends React.Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
    this.ws = new WebSocket("ws://api...");
  }

  componentDidMount() {
    this.ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
  }

  componentWillUnmount() {
    this.ws.close();
  }
}

или на хуках

import React, { useEffect, useState } from 'react';

function ws() {
  const [message, setMessages] = useState([]);

  useEffect(() => {
    const ws = new WebSocket("ws://api...");
    ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
    return () => ws.close();
  }, []);
}

Как можно заметить, на хуках логика не размазана по всему компоненту, а находится в одном месте.

А еще лучше обернуть все это в React Context и подписываться на него в нужных компонентах через useContext (или Consumers). Тогда и очередь сообщений модно копить со всеми нужными мета-данными (например, временем получения).

Ответ написан более трёх лет назад

6 комментариев

Какой есть буржуйский ресурс с адекватной аналитикой для выбора востребованного языка/платформы для изучения?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Заходим на https://www.upwork.com/ и смотрим по результатам поиска количество вакансий: Python - 1880, Javscript - 2200, PHP - 2800 и т. д. Можно углубиться и в разные фреймворки. Лучше зарегистрироваться, тогда появится больше фильтров, например Experience Level.

Ответ написан более трёх лет назад

Комментировать

Что за зверь .speed?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Свойство экземпляра класса, видимо.

...
   constructor(props) {
      ...
      this.speed = 1000;
      ...
    }
...

Ответ написан более трёх лет назад

1 комментарий

Где найти работу джуниору по Java/C#/PHP/JavaScript?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

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

Лучше, чтобы вакансии были с небольшим тестовым заданием. Делаете задание - получаете обратную связь. Делаете еще и еще. А поскольку Вашу работу будет оценивать не какой-то непонятный человек с fl.ru, которому надо плагин прикрутить к jQuery, а, вероятнее всего, более опытный специалист чем Вы, то и обратная связь будет достаточно адекватная.

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

И нужно выбрать что-то одно. То, что знаете лучше всего, а не то, за что, как Вам кажется, платят больше всего денег. Это скорее всего не так. PHP, так PHP. Javascript, так Javascript. Фронт или бэк.

А лучше еще больше сузиться. Например, только React/Vue/Angular/... Или только Wordpress/Yii/Laravel/... Если размазывать свое время прыгая с технологии на технологию не получится стать специалистом, поскольку просто не будет времени на глубокое изучение.

Ну и ходить, ходить на собеседования и интервью! Бить в одну и ту же точку! Работы много и для джунов, и для миддлов, и для сеньоров.

Ответ написан более трёх лет назад

Комментировать

VUE.JS createElement - как использовать html entities в render-функции?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Необходимо использовать фукнцию render, так как возможностей template не хватает

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

все дочерние элементы просто пропадают,

Это логично! innerHTML просто перезаписывает всё дерево детей компонента.

Можно, конечно, извращаться путем вложения лишних тэгов span

Ну, только такой вариант :) При использовании директивы v-html тоже пришлось бы оборачивать свой html-код в тег.

Ответ написан более трёх лет назад

4 комментария

Как суммировать все значения отмеченных checkbox?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

https://jsfiddle.net/KleinMaximus/sohzx029/

Ответ написан более трёх лет назад

Комментировать

Что можно, а что нельзя сохранять в redux store?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Хранить можно все что угодно, в том числе ref-ы на элементы. Но нужно ли?

Ответ написан более трёх лет назад

13 комментариев

Как работает react context?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Провайдер контекст транслирует дочерним компонентам какое-то значение.

Это может быть состояние (реактивное и изменяемое), могут быть какие-то функции (например, для изменения состояния), может быть вообще просто нативный объект (например, какая-то конфигурация приложения, которую не нужно менять) или просто константа (ну, вдруг пнадобится). Тут все зависит от того, что требуется передать вниз по дереву компонентов.

Соответственно, если нужно что-то изменяющееся, отслеживаемое и реактивное, то да, надо передавать состояние (state провайдера) и без него никак.

Это очень похоже на Redux. Но не стоит беспокоиться, что на каждый чих провайдер будет перерисовывать все дерево. Просто детей надо передавать в провайдер через children. В таком случае при изменении стейта будут ререндериться только Consumer-ы этого контекста (или те компоненты, которые используют useContext).

Ответ написан более трёх лет назад

6 комментариев

Как организовать передачу данных в React получаемых по websocket?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

На стороне сервера можно делать что угодно. Можно самостоятельно все сделать, можно использовать что-то типа https://socket.io/

На клиенте нужно подписаться на обновления сокета, например через useEffect связав с данными в useState.
Еще можно обернуть подключение в провайдер React Context.

Ответ написан более трёх лет назад

1 комментарий

Как сделать скачивание и открытие файла в новом окне React?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Все зависит от того, что и как должно происходить.
По контексту вопроса не совсем это понятно.
Самый простой вариант открыть какую то ссылку в другой окне - добавить target="_blank":
<a href="..." target="_blank">...</a>

Ответ написан более трёх лет назад

2 комментария

Как можно использовать псевдоклассы инлайн в react?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Зависит от того, что Вы используете для инлайн-стилизации.
Если просто обычный объект, то никак.
Если что-то типа Radium, то вот пример.

Ответ написан более трёх лет назад

Комментировать

Как решить проблему jsx-a11y/click-events-have-key-events и jsx-a11y/no-noninteractive-element-interactions?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Если используете НЕ интерактивный элемент (например, div, а не button), то добавьте обработку хотя бы одного события из onKeyUp, onKeyDown, onKeyPress.

https://github.com/evcohen/eslint-plugin-jsx-a11y/...

Либо начните использовать интерактивные элементы button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, textbox

https://github.com/evcohen/eslint-plugin-jsx-a11y/...

Самый простой, но и самый ХУДШИЙ вариант - отключить линтер для конкретных правил в этом файле (вставить в начало файла):

/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */

Ответ написан более трёх лет назад

Комментировать

Как показать модальное окно на сайте?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

https://codesandbox.io/s/semantic-ui-example-nydet - вроде все работает?

Ответ написан более трёх лет назад

1 комментарий

Как подкорректировать календарь на нужный формат?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Строка 108:

let firstMonthDay = new Date(year, month).getDay();
let firstDay = firstMonthDay > 0 ? firstMonthDay - 1 : 6;

Ну и в 259 нужную последовательность указать:
["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"]

Ответ написан более трёх лет назад

2 комментария

Как лучше писать стили в React приложении?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Я использую и Styled Components, и CSS Modules. Все зависит от конкретной задачи. Где-то удобнее использовать Styled Components, где-то CSS Modules. И даже инлайн стили иногда могут пригодиться. И все это, конечно же, можно совмещать ;)

Ответ написан более трёх лет назад

2 комментария

Как подключить препроцессор less в create-react-app?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Вот тут можно посмотреть - https://blog.bitsrc.io/using-less-with-create-reac...

Ответ написан более трёх лет назад

Комментировать

Как передать данные из одного компонента в другой компонент?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

Нужно каким-либо образом оформить глобальное хранилище и добавлять избранные фотографии туда. Это можно сделать при помощи Redux, MobX и пр., но проще всего будет через React Context.

Ответ написан более трёх лет назад

1 комментарий

Как лучше писать стили CSS Modules или Styled Components?

Klein Maximus @kleinmaximus

Senior Full-stack Javascript Developer

На текущем проекте у нас CSS Modules, на предыдущем был styled-components. И то, и то можно использовать. Это вопрос личных предпочтений. Но, пожалуй, styled-components - это более "React way", нежели CSS Modules.

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт