Задать вопрос

Максим

Frontend Developer
Лайки

  • Как корректно использовать пару JWT и Refresh токенов?

    @calculator212
    Я предполагал что фронтенд перед каждым запросом будет проверять не истек ли срок жизни access token, и если истек - отправляет запрос на обновление токенов, получает их, приклеивает и дальше проходит запрос. Но как в таком случае, разлогинивать пользователя при отсутствии активности в течении 1 часа?
    Его не нужно разлогинивать, т.к. проверка токена не пройдет. В общем это будет примерно так выглядеть
    1) фронт видит, что access токен истёк
    2) Отправляет refresh на точку api
    3) refresh api видит что refresh токен истёк и отправляет статус 401 например и фронт переводит пользователя на панель логина
    4) пользователь вводит учётные данные снова
    Ответ написан
    Комментировать
    Комментировать

  • Почему response.json( ) после fetch асинхронен?

    MvcBox
    @MvcBox
    Software Engineer [C/C++/JS(for Node.js)/etc]
    Для чего так было сделано?

    Все сделано логично и правильно. fetch() возвращает ответ как только все заголовки были прочитаны (не дожидаясь при этом получения полезной нагрузки). Если же надо получить и полезную нагрузку, то в ответе есть стрим, из которого уже читаете что Вам нужно (и сколько нужно).
    Все остальные методы ( Response.json(), Response.text() и т.д ) являются просто хелперскими обертками над стримом и соответственно будут асинхронными.

    Таким образом мы не делаем лишней работы и получаем тело ответа только в том случае, если оно нам действительно надо.
    Ответ написан
    Комментировать
    Комментировать

  • Как решить задачку (шахматная доска, ход конем) без использования js?

    profesor08
    @profesor08 Куратор тега CSS
    Вот ты с выделением ячейки справился. Молодец. Теперь задай для выделенной ячейки 8 теней синего цвета и позиционируй как надо.

    input[type="radio"]:checked + label {
    background: #FF0000;
    box-shadow: 60px 30px 0 0 blue, 60px -30px 0 0 blue;
    position: relative;
    z-index: 1;
}


    Можешь даже анимацию задать для тени
    label {
    transition: ease box-shadow .3s;
}
    Ответ написан
    5 комментариев
    5 комментариев

  • Что почитать по архитектуре Vue-приложения?

    @FullStackAlex
    Веб-разработчик, электрик, кочевник
    Я лично не назвал бы себя особо большым спецом. Но написал уже пару приложений от и до с Vue.js и так получилось что создал насколько я знаю первую полноценную plug and play тему для WordPress (то есть без Node.js SSR но при этом с полной SEO поддержкой, таким образом пользователь может её просто установить как обычную тему на своём сайте и использовать без каких либо дополнительных работ над кодом сайта, что на данный момент при остальных существующих концептах для WordPress в сфере Vue.js не возможно).

    При самообучении (главным образом 22-ух часовый курс от Maximilian Schwarzmüller на Udemy.com) я не натыкался на серьёзные ресурсы с углублённым обсуждением архитектуры Vue.js приложений. Наверное те кто в этом шпарит не сидят особо на тостере или stackoverflow :) По этому я лично просто подстраивал архитектуру своих приложений под endpoints данного Backend (Symfony 4 и WordPress). Для WordPress я просто организую компоненты как я бы организовал обыкновенную тему для WordPress:
    post.php ---> src/components/main/single/post.vue
    index.php ---> src/components/main/lists/posts.vue
    front-page.php ---> src/components/main/pages/home.vue
    page.php ---> src/components/main/single/page.vue
    archive-{custom-post-type}.php ----> src/components/main/lists/{custom-post-type}-posts.vue

    Сайт я делю на части Main, Header, Footer, (Sidebar, если навигация не в Header,) и Modals. (Глобальная) Коммуникация между ними происходит через Vuex модули. А Vue-Router обрабатывает HTTP запросы, используя при этом Axios.

    Обширные и многочисленные методы и hooks (activated, mounted, etc) одной компоненты пытаюсь насколько можно переносить в Mixins и делать их универсальными для использования в других компонентах чтобы держать script tag максимально чистым (когда ищешь ошибки, 200-400 строчек скрипта и 10 разных между собой связанных методов могут стать огромным pain in the ass).

    Совсем недавно натолкнулся на этого парня, которого пару статей и сайт мне понравились:
    https://markus.oberlehner.net/
    Возможно уже в его обширных статьях вы найдёте кучу нужной информации. В добавок он собирается как раз на эту тему выпускать книгу и тут можно на его newsletter подписаться (я подписался и пока никакого спама, только по теме):
    https://oberlehner.us20.list-manage.com/subscribe?...

    А вот куча интересных ссылок которые получаешь при первых же результатах поиска "Vue.js аrchitecture" (то есть без гарантий с моей стороны):
    https://v1.vuejs.org/guide/application.html
    https://learn-vuejs.github.io/vue-patterns/useful-...
    https://itnext.io/how-to-structure-a-vue-js-projec...
    https://dev.to/maxpou/3-tips-for-scaling-large-vue...

    В этой книге есть часть под названием "Large Application Patterns with Vuex":
    https://www.amazon.de/dp/B01N6VAO4P

    Эта книга тоже кажется интересная, более 200 страниц посвящены Vuex и Vue-Router:
    https://www.amazon.de/Fullstack-Vue-Complete-Guide...

    Ну и последним самые авторитетные ресурсы на эту и похожие темы с VueConf Talks:
    https://www.vuemastery.com/conferences/vuejs-amste...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/connect-tec...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...

    Have fun :)
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать анимацию трансформирующую один элемент в другой?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

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


    С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

    P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.
    Ответ написан
    Комментировать
    Комментировать

  • Как устроена авторизация по паролю в web-приложениях?

    devalone
    @devalone
    ̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻̻
    Обычно делают так: есть база данных с таблицей пользователей со следующей структурой
    id username password
    где id - primary key(целочисленное значение уникальное для каждого пользователя)
    username понятно
    password - хеш пароля, причём к этому хешу добавляется соль, общая для всей базы(хранить где-нибудь в конфиге приложения, чтоб при доступе к базе её было не найти) и какая-нибудь для пользователя, чтоб у разных пользователей пароль qwerty превращался в разные хеши.
    И также таблица сессий.
    session_key expiration_time user_id
    session_key рандомная строка(например Ku0peepia3ialete3uawai9oK3Koh2ni), которая хранится в куках пользователя
    expiration_time timestamp когда сессия заканчивается(важно на банковских приложениях например)
    user_id - id пользователя, которому принадлежит сессия.
    Также можно добавить другие данные, как например ip, user-agent и т.д.

    Когда пользователь ввёл логин и пароль в форму и нажал "войти", на сервер отправляется POST запрос с логином и паролем, сервер принимает его, хеширует пароль и проверяет в базе, есть ли такая пара, если есть, создаётся сессия и возвращается пользователю в куках(хедер Set-Cookie), клиент устанавливает их себе и при следующих запросах отправляет сессию в хедере Cookie, либо берётся та, которую отправил пользоваль и привязывается к аккаунту. Когда пользователь заходит в админку, сервер смотрит, есть ли такая сессия и имеет ли права на доступ в админку её владелец, если нет, то возвращает ошибку.
    Ответ написан
    5 комментариев
    5 комментариев

  • Как устроена авторизация по паролю в web-приложениях?

    @Alexander1705
    Обычно разделяют сессии и авторизацию:

    Сессия. Чтобы реализовать сессии сервер при первом соединении с клиентом может генерировать некоторый случайный токен и устанавливать его в куки. Тут важно, что куки должны передаваться по защищённому каналу (HTTPS). Таким образом можно сохранять некоторую информацию о сессии в базе данных или же в самих куки, но тогда нужно подписывать куки, чтобы пользователь не мог их изменять.
    В любом случае, сервер будет хранить информацию о активных сессиях в БД.
    Подписать куки можно, например, добавив в них помимо нужной вам информации какой-нибудь HMAC.

    Авторизация. Сервер никогда не хранит пароли. В базе данных хранят логин и хеш пароля (на самом деле нет). Для авторизации пользовтель передаёт логин и пароль (HTTPS). Сервер вычисляет хеш от пароля и, если он совпадает, сессия помечается как авторизованная.

    Соль. Теперь представим, что вы действительно храните логин и хеш пароля в таблице:
    login | pass_hash
------+----------
vasya | 4B32E1C...

    В идеальном мире это бы неплохо работало. Но в реальном мире 90% ваших пользователей будут иметь пароль вида 12345, password, password123, etc. Соответственно в базе данных будет много одинаковых хешей и злоумышленнику не составит труда быстро подобрать пароли большинства ваших пользователей.
    Для этого для каждого пользователя сервер сохраняет некоторые уникальные случайные данные (соль). А вместо хеша пароля хранится hash(pass + salt).
    login | salt   | hash
------+--------+-----
vasya | 4B3... | 2A3B9...

    Таким образом усложняется перебор паролей по словарю.

    Хеш. Возможно вы где-то видели или слышали про MD5. Так вот, MD5 на сегодняшний день не является надёжной криптографической хеш функцией и даже если вы примените MD5 сто или тысячу раз, это не сильно изменит ситуацию. На сегодняшний день рекомендуется использовать SHA-2 или SHA-3.

    P. S. Соль и токены обязательно должны быть сгенерированы с помощью CSPRNG.
    Ответ написан
    14 комментариев
    14 комментариев

  • Правильное тестирование Javascript?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    То есть мы импортим в тест класс, который импортит в себя другие классы?

    Надо понимать, что класс не импортирует классы, импорт/экспорт — это модули. Класс может создавать инстансы других классов или принимать инстансы как параметр конструктора, это нормально — во втором случае вы просто пишете mock: заглушку, которая предсказуемо имитирует нужное поведение. Но если вы из модуля экспортируете инстанс класса, то будут проблемы с тестированием. Например, вот так плохо:
    // A.js
class A {}
export const a = new A();

// B.js
import { a } from './A';
export class B {
    constructor() {
        this.a = a;
    }

    doStuff() {}
};

    Так как класс B неявно зависит от A, то нельзя написать заглушку для A, и тесты для B будут тестировать поведение A.

    Вот так лучше:
    // A.js
export class A {};

// B.js
export class B {
    constructor(a) {
        this.a = a;
    }

    doStuff() {}
};

// index.js
import { A } from './A';
import { B } from './B';

const a = new A();
const b = new B(a);
b.doStuff();


    Возможно ли работать с DOM в импортируемом классе?

    Если пускалка тестов это поддерживает. Для mocha, ЕМНИП, надо прикручивать karma.

    Это будет считаться юнит-тестом?

    Unit-test по определению тестирует какую-то функциональную единицу — класс, модуль, функцию, метод.
    Ответ написан
    Комментировать
    Комментировать

  • Как оптимизировать видео, вставляемое в качестве фона?

    Taraflex
    @Taraflex
    Ищу работу. Контакты в профиле.
    Уменьшите битрейт и разрешение видео.
    Переместите метаданные в начало mp4 контейнера
    Установите preload="metadata"
    htmlbook.ru/html/video/preload

    Чтобы пиксели в глаза не бросались наложите на видео сеточку из маленьких черных точек
    https://jsfiddle.net/soumyabg/wefLyrhp/
    css background dotted overlay
    Ответ написан
    5 комментариев
    5 комментариев

  • Как добавить выплывающие блоки элементам списка?

    delphinpro
    @delphinpro
    frontend developer
    Дополнение к ответу 0xD34F :
    Зависимое переключение https://jsfiddle.net/ygbs1w79/1/
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильнее сверстать такие элементы?

    @s-jet
    Вырезать png, не парится и сэкономить свое время и деньги. ИМХО никому не нужны заморочки со статическими страницами типа "визитка"
    Ответ написан
    2 комментария
    2 комментария

  • Какой опыт Git нужен веб-разработчику для работы в команде в компании?

    @Yuxus
    Желательно понимать, что делают и зачем нужны следующие команды:
    git status
git checkout
git reset
git fetch
git pull
git push
git diff
git add
git commit
git stash
    Ответ написан
    7 комментариев
    7 комментариев