• Что за свойство pointer-events?

    IU_Sviridov
    @IU_Sviridov
    Развиваюсь в направлении web-разработки
    Отличное и лаконичное свойство - используем в проекте.
    https://developer.mozilla.org/ru/docs/Web/CSS/poin...

    Если тебе требуется, чтобы события мыши не отслеживались - указываешь pointer-events: none. В частности - у тебя список из 3 элементов с чекбоксами. Напротив чекбокса ссылки. Если чекбокс снимается - навешивается класс disabled и в нем можно прописать:
    .disabled {
      opacity: 0.8;
      pointer-events: none;
    }
    Ответ написан
  • Почему не работает css переменная?

    IU_Sviridov
    @IU_Sviridov
    Развиваюсь в направлении web-разработки
    :root {
      /* Вместо буквы c - английской у тебя стоит с - русская, твой IDE не подсвечивает это */
      --сolor-main: #ff00ff;


    Проверяй:
    Твой вариант: --сolor-main: #ff00ff;
    Мой вариант: --color-main: #ff00ff;
    Ответ написан
    2 комментария
  • Как вы обыгрываете 500 ошибку в UI/UX?

    IU_Sviridov
    @IU_Sviridov
    Развиваюсь в направлении web-разработки
    1 вариант, но с поправкой на то, что в ui/ux оно выводится в правом нижнем углу и ничего не происходит более. Пользователь понимает, что он ввел некорректные креды или проблема с сервером и больше не пытается что-то сделать. Но у нас пользователи достаточно продвинутые и поймут, что при условии что сервак сбоит - не будет пытаться делать что-то дальше и тратить свое время.
    Технически выглядит следующим образом:

    - Есть errorService - который вызывается глобально в необходимом вам месте в коде.
    - Принимает 4 параметра в следующем виде: errorService (statusCode, title, description, source)
    - async handleError(statusCode, title, description, source), формирует что-то вроде строки userAnswer в зависимости от statusCode и передает ее дальше (this.__handleUserResponse({ title, description, userAnswer, source }))
    Вот пример дальнейшей обработки:
    __handleUserResponse(response) {
            switch (response.userAnswer) {
                case 'toLogin':
                    window.location = '/Home/Login/';
                    break;
                case 'reload':
                    location.reload(true);
                    break;
                case 'goBack':
                    Backbone.history.history.back();
                    break;
                case 'showLoginPopup':
                    LoginService.showLoginPopup();
                    break;
                case 'close':
                    break;
                case 'showNotification': {
                    let text = null;
                    const title = this.__filterServiceMessageText(response.title);
    
                    try {
                        let parsedDescription;
                        if (response.source) {
                            parsedDescription = response.source;
                        } else if (response.description) {
                            parsedDescription = JSON.parse(response.description);
                        }
                        if (parsedDescription) {
                            if (Array.isArray(parsedDescription.extraData)) {
                                parsedDescription.extraData.forEach(item => {
                                    text = item.message || item.Message || parsedDescription.message || '';
                                    if (text) {
                                        this.showNotification({ text });
                                    }
                                });
                            } else if (parsedDescription.extraData) {
                                if (typeof parsedDescription.extraData === 'string') {
                                    text = parsedDescription.extraData;
                                } else {
                                    text = Object.values(parsedDescription.extraData).join('\n');
                                }
    
                                if (text || title) {
                                    this.showNotification(text ? { text, title } : title);
                                }
                            } else if (parsedDescription.message) {
                                text = parsedDescription.message;
    
                                if (text || title) {
                                    this.showNotification(text ? { text, title } : title);
                                }
                            }
                        }
                    } catch (e) {
                        if (text || title) {
                            this.showNotification(text ? { text, title } : title);
                        }
                    }
                    break;
                }
                default:
                    break;
            }
        }
    Ответ написан
    Комментировать
  • Как вы боритесь с непонятным материалом?

    IU_Sviridov
    @IU_Sviridov
    Развиваюсь в направлении web-разработки
    У меня стоял этот вопрос достаточно остро. На самом деле все достаточно просто)

    Факты:
    1. При самообучении смотрел YDNJS / Hexlet.io / Codewars / Codepen.io - только практика с изучением теории,
    изучать JS без моментальной практики - большая ошибка. Нужно дебажить и смотреть как это работает, экспериментировать.

    2. Приступив на работе к достаточно сложной задаче и изучая все подряд, получая постепенно review кода - я за 1.5 месяца загрузил в себя очень много материала и дальше я почувствовал определенную легкость в изучении материала. Ты всегда можешь понять при общении с коллегами - что актуально, как и что изучать в данный момент времени.

    3. Если возникает "умственная вялость" - когда смотришь на event и не понимаешь, что происходит. Бери перерыв. 10 минут - 20 минут или переключайся на другие задачи, ты все успеешь. Сон - питание - спорт. (обрати большое внимание на эти факторы)

    4. JS не изучается за 3 месяца даже самым лютым бойцом в этом направлении. Он действительно сложнее, чем можно себе это представить. Многие знают JS на поверхностном уровне.

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

    6. Принимай активное участие в JS-сообществе (комментируй, общайся, знакомься, ходи на митапы и конференции)
    Ответ написан
    Комментировать
  • Выравнивание (по колличеству контента) блоков в Flexbox?

    IU_Sviridov
    @IU_Sviridov
    Развиваюсь в направлении web-разработки
    flex - контейнер придуман для гибкой верстки, он не предусматривает статику.
    1. Ты можешь подогнать размеры контейнеров внутри по размеру так, чтобы было именно такое расположение.
    2. Ты можешь выделить каждую колонку в отдельный контейнер и разместить элементы так, как тебе будет удобно(к примеру div)
    Ответ написан
  • Как сделать отступы внутри блока?

    IU_Sviridov
    @IU_Sviridov
    Развиваюсь в направлении web-разработки
    https://codepen.io/SynteticCat/pen/LqomBa?editors=0100 - один из вариантов решения

    a - строчный элемент, то есть inline - element по умолчанию
    Чтобы изменить этот момент, используют display: inline-block/block
    Ответ написан
    Комментировать