• Почему в Google Chrome перестал работать Punto Switcher?

    Nidora
    @Nidora
    Бонус 200 руб всем новым клиентам! VDS - 149 руб
    Удалите файл «preferences.xml» и после этого перезагрузите программу.

    C:Пользователи - Имя_пользователя - AppData - Roaming - Yandex - Punto Switcher - User Data
    Ответ написан
    7 комментариев
  • Как понять, что ты middle front-end developer?

    KickeRocK
    @KickeRocK
    FrontFinish
    "Мы будем называть тебя сеньор-помидор, только зар.плату не проси повысить"
    Если можете руководителю(тому кто напрямую влияет на вашу зар.плату) доказать что вы достойны оплаты мидла - вы мидл.
    Ответ написан
  • Как изменить название ветки в git?

    miraage
    @miraage
    Старый прогер
    git branch -m old_branch new_branch         # Rename branch locally    
    git push origin :old_branch                 # Delete the old branch    
    git push -u origin new_branch   # Push the new branch, set local branch to track the new remote
    Ответ написан
    Комментировать
  • Варианты менеджмента обработки состояний запросов в Redux?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    В плане так их надо передать в редюсер для ошибок, а в компоненте следить за изменением этого редюсера...

    Не надо. Ошибку и состояние загрузки можно обрабатывать в том же редьюсере, что и токен.
    const initialState = {
      isFetching: false,
      token: null,
      error: null,
    };
    
    function auth(initialState, action) {
      switch(action.type) {
        case LOGIN_REQUEST:
          return {
            ...state,
            isFetching: true,
            error: null,
          };
    
        case LOGIN_SUCCEEDED:
          return {
            ...state,
            isFetching: false,
            token: action.payload,
          };
    
        case LOGIN_FAILED:
          return {
            ...state,
            isFetching: false,
            error: action.payload,
          };
    
        default:
          return state;
      }
    }


    Будет ли правильным делать запросы из компонента?

    Не будет.

    Ведь так при ошибке мы может её сразу добавить в стейт errors компонента и всё.

    Не ясно зачем вам вообще добавлять ошибку в state.

    const mapStateToProps = state => ({
      error: loginErrorSelector(state),
    });


    render() {
      const { error } = this.props;
    
      if (error) return <TryAgain error={error} action={login} />;
      
      return ( /* ... */ );
    }
    Ответ написан
    Комментировать
  • Как победить ошибку?

    copist
    @copist
    Empower people to give
    Посмотри лог ошибок на сервере - скорее всего была ошибка (исключение), которое в результате было отображено в формате HTML, а не JS или JSON

    Посмотри панель "Network" в Google Chrome - там возможно будет запись с кодом 4xx или 5xx - это ошибка
    5737225ce9db431faf67c054f2d2fffa.png

    И посмотри на текст ответа - там может быть HTML вместо JS
    ed296226618d458ba43dadaa33f29481.png
    Ответ написан
    Комментировать
  • Где смотреть современные интересные сайты?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как убрать рамку вокруг button в Сhrome?

    @format_iai
    button:focus {
    outline: none !important
    }
    если не сработает, то
    *{
    outline: none !important
    }
    Ответ написан
    Комментировать
  • Что должен знать/уметь senior backend developer?

    maximpushkarev75
    @maximpushkarev75
    Very bad monkey coder
    Как я вижу это со своей позиции джуниора:

    Навскидку:

    1) Подробная экспертиза технологий, относящихся к предметной области проекта и его целевых платформ. Ведь senior не только должен круто разрабатывать на тех или иных технологиях - он, собственно, и определяет, какие технологии будут использоваться на проекте с учетом многих факторов.
    2) Полное снятие технологических рисков. Это, в общем, вытекает из первого. Senior всегда может предвидеть возможные проблемы еще до начала разработки проекта и подробно донести это в доходчивой форме заказчику/руководству.
    3) Умение эффективно ставить задачи разработчикам своей команды. По сути, умение руководить.
    4) Умение эффективно делиться богатым опытом с членами своего коллектива. То есть быть мудрым и чутким наставником для младших коллег.

    Думается, настоящие senior-разработчики идут от 10-12 лет опыта работы.
    Ответ написан
    3 комментария
  • Какие задачи нужно уметь выполнять на JS начинающему?

    copist
    @copist
    Empower people to give
    Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?


    Кроме синтаксических конструкций, математических и логических выражений, нужно знать:
    • Область видимости переменных
    • Замыкания
    • Объектно-ориентированное программирование, в частности наследование через прототипы
    • Шаблон проектирования "модуль"
    • Операции над DOM
    • Понимание принципов событийно-ориентированного программирования
    Важно - нужно знать, откуда копипастить.
    Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало.

    Важно - инструменты программиста JavaScript
    У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
    Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.

    Хотелось бы узнать что это за задачи(упомянутые вами 80%)


    Реальные задачи джунов:
    1. Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает.
      Важно - читать и понимать чужой код намного важнее, чем писать свой. И на работе тебе это приддётся делать чаще, чем ты думаешь. Чтобы подключить к своему проекту чужую JS либу, нужно понимать что она делает, как она конфигурируется, как управлять её поведением. Скажу точно, что написать свой скрипт, который строит графики, намного сложнее, чем понять, как настраивается highcharts.

    2. Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно
      1. Усложнение: удалять можно только буквы в словах, а знаки пунктуации и цифры удалять нельзя
      2. Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)
      3. Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность
      Важно - этим обычно все и занимаются - ищут баги. Только в реальной жизни они и без этого скрипта появляются. И не по одному, а прям пачками.

    3. На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из своего скрипта для построения графиков.
      1. Усложнение: на одном графике должны быть два курса, по разным шкалам. Наприме, курс доллара к евро и курс юаня к рублю
      2. Усложнение: первоначально график вывести в детализации по месяцам, но чтобы можно было "приблизить" (drilldown) детализацию до дней
      3. Усложнение: первоначально график вывести текущем месяце, но чтобы можно было загрузить данные для предыдущего месяца без перезагрузки страницы (AJAX)

    4. При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки.
      1. Усложнение: в всплывающем окне сделать навигацию по картинкам, вперёд/назад и к нужной картинке
      2. Усложнение: в всплывающем окне вместо картинки показать видео-ролик с Youtube
      3. Усложнение: в всплывающем окне показать текст HTML

    5. По клику на кнопку "Click me" показать всплывающую форму.
      1. Усложнение: реализовать проверку данных на корректность перед отправкой формы (непустое значение, минимальное количество символов, максимальное количество символов, минимальное числовое значение, максимальное числовое значение)
      2. Усложнение: если в значении текстового поля встретилась гиперссылка, то считать её за 22 символа при любой длине этой ссылки (как в твитере)
      3. Усложнение: реализовать отправку формы на сервер через AJAX, без перезагрузки страницы
      4. Усложнение: саму форму в виде HTML загрузить с сервера через AJAX, в момент клика по кнопке "Click me", правила проверок данных должны как-нибудь "извлечься" из самой загруженной формы, например из аттрибутов полей ввода

    6. К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты.
      1. Усложнение: сделать форму календаря мультиязычной. Хотя бы через настройки на том же JavaScript
      2. Усложнение: сделать так, чтобы с помощью календаря можно было выбрать диапазон дат, чтобы она была привязана к двум полям формы "дата начала" и "дата окончания", и чтобы значение в поле "дата начала" обязательно была меньше чем в поле "дата окончания"
      3. Усложнение: сделать так, чтобы с помощью в календаре можно было видно визуально этот диапазон
      4. Усложнение: диапазон может быть открытым, но не пустым, то есть пользователь должен задать хотя бы дату начала или дату окончания.

    7. Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме.
      1. Усложнение: сделать селектор "тип устройства", чтобы менять размер фрейма (например, "iPhone 5c 1136x640") и "чекбокс" для смены ориентации страницы "горизонтальная" или "вертикальная" (соответственно 1136x640 или 640x1136)
      2. Усложнение: в селекторе тем предусмотреть поиск тем по подстроке, и аналогично поиск устройств по части названия (авто-дополнение, auto-complete)
      3. Усложнение: тема страницы должна меняться без перезагрузки фрейма



    Задачи повышенной сложности, исходя из личного интереса
    1. Реализовать форму для многошагового мастера: форма должна состоять из нескольких страниц (шагов), пользователь может переключать страницы через какие-нибудь элементы управления "вперёд/назад" или "перейти на страницу".
      1. Усложнение: реализовать функциональную связь значений, когда некоторые данные зависят друг от друга (ввёл число в поле "количество" и в поле "сумма" значение пересчиталось)
      2. Усложение: доступность некоторых полей ввода должна зависеть от данных (например, если указал "есть личный самолёт", то значит можно ввести "марка самолёта")
      3. Усложение: видимость некоторых страниц должна зависеть от данных из предыдущих страниц (например, если указал "есть личный самолёт", значит появилась страница "ТТХ самолёта"; иначе страница должна скрыться)

    2. Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
    3. Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat"
      1. Усложнение: два игрока на разных компьютерах, ходы передаются по websocket
      2. Усложнение: ограничение на ожидания окончания хода 15 секунд, по окончании ожидания автоматически делается случайный ход

    4. Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включен, строка зачёркивается.
      1. Усложнение: пользователь может переименовывать, удалять, добавлять строки
      2. Усложнение: список хранить в localStorage браузера, чтобы при перезагрузке страницы он восстанавливался
      3. Усложнение: пользователь может иметь несколько независимых списков todo

    5. Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул.
      1. Усложнение: добавить переключатель режимов "точка"/"линия", в режиме "линия" рисуются линии между двумя последовательно кликнутыми точками
      2. Усложнение: можно менять толщину, цвет линий, размер точек
      3. Усложнение: последовательность кликов можно воспроизвести ещё раз с самого начала, равномерно или с реальной задержкой между кликами, с обычной скоростью или ускоренно
      4. Усложнение: можно выгрузить получившийся рисунок в формате PNG или SVG, причём SVG c анимацией воспроизведения



    Можно использовать любую существующую библиотеку.
    Например,
    для построения графиков www.highcharts.com
    для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
    для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox и https://jqueryui.com/dialog/
    для валидации форм rickharrison.github.io/validate.js
    для календаря https://jqueryui.com/datepicker/
    для автодополнения https://jqueryui.com/autocomplete/
    для передачи данных между несколькими пользователями socket.io или обычный AJAX
    Ответ написан
    16 комментариев
  • Как по-русски назвать dashboard?

    madmaxcorp
    @madmaxcorp
    «Консоль», «Обзорная панель» или «Обзор», «Управление», «Администрирование», «Что нового?» (вроде как на яндексе было), «Информационная панель», но вообще надо отталкиваться из контекста программы.
    Ответ написан
    Комментировать
  • Upwork как правильно получить первого клиента?

    search
    @search
    мама говорит что я особенный
    Как исполнитель, заработавший больше 100К$ (PHP, JS) на апворке и как заказчик, потративший больше 300K$ (тоже PHP и JS), скажу, что cover letter - это 90% успеха.

    Cover letter в стиле "быстро, дёшево, качественно" - сразу отправляются в топку. Когда фрилансил, то 10 из 10 заказчиков мне отвечали и почти всегда нанимали. Просто потому что в cover letter я сразу рассказывал как буду решать их задачу и задавал дополнительные вопросы по проекту. Когда нанимал сам, то хороший cover letter, где рассказывали что будут делать и задавали правильные вопросы, я получал, примерно один раз из 20 в случае с бэкендом (PHP) и ни разу за всю практику в случае с фронтендом (JS). Вообще грамотных фронтендеров на апворке я нашел ровно 0 (предлагая 35$ в час за ПОСТОЯННУЮ неограниченную работу), поэтому пришлось отказаться от услуг фриланса.

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

    Такие дела
    Ответ написан
    4 комментария
  • Пример архитектуры большого сайта-SPA?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не совсем по теме..

    Супер "полноценных" нет, но где-то тут же на тостере уже всплывала подобная тема. Из давнего (уже) помню soundcloud клиент - статья, github.

    Выложить в open-source рабочее бизнес-приложение - практически невозможно.
    Выложить какую-то его часть, которая сделана хорошо - уже реальнее, по такому типу можно смотреть на хорошие библиотеки (типа react-virtualized). Но опять же, там "архитектуры" по вашему вопросу нет.
    Выложить в общий доступ хороший "учебный" проект - самое реальное. Поэтому может найдется где хорошее платное учебное приложение? А может и бесплатное...

    p.s. все же упирается в деньги/время. Если даже бизнес скажет - "выкладывай куда хочешь", то выложите ли вы свою поделку? Вряд ли, так как написано оно было в стиле "пожалуйста, выкати фичу побыстрее, если потом будет время - порефакторишь". Поэтому просто предлагаю писать по мере своих возможностей, а учиться продолжать там же где и раньше, так как полноценное крепкое приложение в опен-сорсе, это почти миф.
    Ответ написан
    Комментировать
  • Пример архитектуры большого сайта-SPA?

    copist
    @copist
    Empower people to give
    OpeSource решения на базе нужных технологий
    https://github.com/relax/relax - CMS платформа
    mern.io - хорошая архитектура для крупных React/Redux приложений
    https://github.com/andrewngu/sound-redux - клиент Soundcloud написан на React / Redux
    https://github.com/WebbyLab/itsquiz-wall - изоморфное приложение на React - система тестирования
    https://github.com/Automattic/wp-calypso - админка для WordPress на React/Redux
    https://www.neos.io/ - CMS платформа, постепенно переписывается с PHP на React, отдельные части проекта https://github.com/neos/
    Ответ написан
    Комментировать
  • Что такое Redux простыми словами?

    @KnightForce
    Чтобы понять как работает Redux тебе нужно норм вкуривать React.
    Хотя бы для того, чтобы не пугаться props.

    Есть у тебя React. Это все просто JS объекты.
    <Component /> - так позволяет писать движок jsx, который и React его использует.
    Так как структура компонентная, ты должен думать как обновить компоненты в в другой части страницы.

    Принцип такой: компонент обычно обновляется при получении новых свойств - props или когда меняется его объект состояния - state.

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

    Что делает Redux:
    Он не призывает отказываться от state.

    Но есть общий контейнер данных. И когда данные меняются - меняются и компоненты, которые отображают именно эти данные.

    Когда нужно что-то поменять - вызываешь dispatch - специальная функция reducer реагирует на это - и меняет данные как тебе нужно. Когда данные заменятся - компонент Propvider - вызывает рендер у своего дочернего компонента (тот что оборачивает Provider).
    Например:
    <Provider>
       <MyComponent />//Вот сюда Provider пробросит (запишет) новые props.
    </Provider>


    Записывает он это самое глобальное хранилище и все компоненты, для которых поменялись данные - перерисуются.

    mapStateToProps - указывает какую часть этого глобального хранилища будет предоставлять provider.
    Если у тебя оно такое:
    {
       chunkStore: {},
       some: {}
    }

    То если mapStateToProps вернет{store: store.chunkStore}то Provider в props своего потомка пробросит такое: store: store.chunkStore. И ты будешь обращаться внутри к store, но там будет только часть chunkStore (не весь объект, а его поле).

    mapDispatchToProps - т.к. subscribe нет, то это возвращает функции, которые могут внутри себя вызывать dispatch().

    action - описывает то что и на что ты хочешь поменять. Какое поле и какие данные туда поместить.
    Ответ написан
    Комментировать
  • Что такое Redux простыми словами?

    Лучшее объяснение Redux что я видел.
    getinstance.info/articles/react/learning-react-redux
    ba494148d28e422b4c7bd269de5bed09.png
    Ответ написан
    Комментировать
  • Что такое Redux простыми словами?

    edtoken
    @edtoken
    Full-stack Javascript/Python Developer
    В данном случае разное мышление (проектирование).

    В вашем случае:
    Логика идет от компонентов.
    Допустим на странице пользователя есть label online/offline
    Откуда брать значение, если нужно заблокировать окно чата в тот момент когда пользователь offline?
    Что если таких действий не одно, а допустим штук 10?
    Что если таких действий не одно, а допустим штук 10 и еще на разных страницах?
    Куда вынести функцию, которая проверит статус пользователя?
    Как её назвать чтобы не было конфликта имен?

    Redux для меня в первую очередь подход.
    1. Проектируется состояние (база данных фронта)
    {user:{online:false}}
    2. действие checkUserStatus (ajax/socket)

    3. сколько угодно компонентов (которые не знают друг о друге ничего и имеют любое поведение, в зависимости от статуса пользователя)
    компоненты могут ничего не уметь кроме как рендерить этот статус (label), или, могут быть более сложными и иметь логику + обработчики (кнопки, пр)
    Ответ написан
    4 комментария
  • Что такое такое rest api?

    @eandr_67
    web-программист (*AMP, Go, JavaScript, вёрстка).
    API социальных сетей - это вполне типичные примеры реализации REST API.

    REST (RESTful) - это общие принципы организации взаимодействия приложения/сайта с сервером посредством протокола HTTP. Особенность REST в том, что сервер не запоминает состояние пользователя между запросами - в каждом запросе передаётся информация, идентифицирующая пользователя (например, token, полученный через OAuth-авторизацию) и все параметры, необходимые для выполнения операции.

    Всё взаимодействие с сервером сводится к 4 операциям (4 - это необходимый и достаточный минимум, в конкретной реализации типов операций может быть больше):
    1. получение данных с сервера (обычно в формате JSON, или XML)
    2. добавление новых данных на сервер
    3. модификация существующих данных на сервере
    4. удаление данных на сервере

    Операция получения данных не может приводить к изменению состояния сервера.

    Для каждого типа операции используется свой метод HTTP-запроса:
    1. получение - GET
    2. добавление - POST
    3. модификация - PUT
    4. удаление - DELETE

    Т.е. :

    GET-запрос /rest/users - получение информации о всех пользователях
    GET-запрос /rest/users/125 - получение информации о пользователе с id=125
    POST-запрос /rest/users - добавление нового пользователя
    PUT-запрос /rest/users/125 - изменение информации о пользователе с id=125
    DELETE-запрос /rest/users/125 - удаление пользователя с id=125
    Ответ написан
    20 комментариев
  • Какая разница между патернами?

    kurtov
    @kurtov
    Во втором случае вызовы
    var App1 = new App();
    var App2 = new App();
    создадут два разных объекта.
    Первый случай гарантирует что на странице будет только один App.
    Также есть разница в производительности, т.к. прямой вызов метода быстрее, чем поиск и вызов в прототипе - разница очень мала, но в критических местах может быть ощутимой
    $(function(){
    
      // Для первого способа можно изменять объект, зная что эти изменения видны всем
      App.prop1 = true;
    
      // Для прототипов изменения App1 не отражаются родительском App
      var App1 = new App();
      App1.prop1 = true;
    
    });
    $(function(){
    
      // Для первого случая есть изменения
      console.log(App.prop1); // true
    
      // Для второго случая создается новый потомок, который ничего не знает о других потомках
      var App1 = new App();
      console.log(App.prop1); // undefined
    
    });
    Ответ написан
    Комментировать