Антон Мудренок

Я как-то работал при аналогичных условиях. Возможно даже хуже. 1 делом, наплевал на на защиту их системы и работы других прогеров. Я та был осторожен, и все что относилось ко мне оберегал бекапами, гитом, системой деплоя и тд. А в это же время мои сотоварищи писали код прямиком из notepad через мать его Samba. Samba же открыта и без пароля и доступна по вафле. У вафли пароль 12345678.

Просто плюньте на работу остальных. Делайте свои проекты как вам удобно. У вас есть доступ к полигону, где вы как раз таки имеете возможность саморазвития. Настройте гит флоу, систему деплоя, всякие юни-тесты. Попросите маркерную доску или лист A3 и замутите Agile для себя и девушки. Почувствуйте себя лидером ©

Был такой же баг, если честно, до причины так и не докопался, но в issue на гитхабе есть хотфикс:

devServer: {
    host: 'localhost',
    port: 3000,
    contentBase: './dist',
    hot: true,
    open: true,
    openPage: '', // <== Добавить вот это
  },

sim3x уже сказал об этом, но я повторю - медитация. Способность фокусироваться - это как мышца. Её тоже можно качать. Медитация как раз качает мышцу, отвечающую за концентрацию. 10 минут утром и 10 минут вечером. Как и с любой здоровой привычкой, ощутимый результат настаёт настолько постепенно, что для вас он будет почти незаметным. Но в один прекрасный день (недели через две ежедневных тренировок) вы отметите что концентрироваться и контролировать своим мысли/эмоции стало легче.

Мы стараемся не запускать эту проблему посредством code review, пытаясь распределить нагрузку по ревью между наиболее опытными участниками. Если в коде есть проблемы - тикет возвращается на доработку с замечаниями. Даже если банально не мержится с главной веткой. Попробуйте наладить этот процесс.

Также мы всё собираемся настроить Continuous Integration. Jenkins может прогонять по коду проверку на соблюдение стандартов и покрытие тестами, а затем показывать результаты в красивом виде. Если чей-то коммит показывает более чем N ошибок в расчёте на единицу объёма кода - можно возвращать на исправление.

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

Ещё пара идей.

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

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

Ну и важно, чтобы у самих разработчиков была установка на хороший код, профессиональная гордость. У фрилансеров её, бывает, нет, а есть отношение "тяп-ляп, лишь бы работало и лишь бы часы оплатили, а там хоть потоп". Учитывая, что их заказчики занимаются code review нечасто, развитие такого отношения закономерно. Но всё-таки хочется писать красивые программы. Такое желание обязано быть.

Я, конечно, сам не волшебник, я только учусь, и работа с командой - такая штука, которой надо постоянно учиться. Видимо, вы тоже учитесь; успехов в этом.

Фреймворки, библиотеки и плагины для верстки сайта.

1. Bootstrap - самый популярный HTML, CSS, и JS фреймворк в мире для разработки отзывчивых, mobile-first проектов в вебе.

2. slick - Адаптивный слайдер для сайта

3. Owl Carousel 2 - красивый, отзывчивый карусельный слайдер

4. Fotorama - плагин для создания галереи на сайте

5. MagnificPopup - плагин для создания модальных окон

6. FancyBox - построениe всплывающих окон

7. Mmenu - мобильное меню


8. bxSlider - отзывчивый jQuery-слайдер для контента


9. Fullscreen Slit Slider - слайдер с интересной анимацией

10. parallax.js - эффект Parallax

Первая 10-ка

Вот тут есть немножечко полезного
https://github.com/enaqx/awesome-react
https://github.com/brillout/awesome-react-components
https://github.com/chentsulin/awesome-react-renderer
https://react.rocks/

Для работы с датами: moment
Для роутинга: react-router
Для крутых таблиц, а так же представления большого количества данных: react-virtualized
Для работы с material ui: material-ui
Модалные окна: react-modal
Удобный дейтпикер: react-bootstrap-datarangepicker
Для google analytics: react-ga
---
Для разработки:
pre-commit - запускать проверки перед коммитом,
eslint - поддерживать единый стиль кода на проекте,
webpack + babel (само собой),
cross-env - забыть про проблемы NODE_PATH под разные операционки,

Может кто наталкивался на хорошие статьи на тему, что бы ссылку дизайнеру кинуть или тыкнуть заказчика мордой в теорию.

В последнее время сам себя тыкаю в замечательную статью - UX/UI Best Practices: 125 Easy Tweaks to Optimize .... Там обо всем простыми словами и с примерами.

Не совсем по теме..

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

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

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

popel-studio.com/blog/article/preloader-saita-svoi...
hello-site.ru/preloader
и т.д. по запросу в гугле - прелоадер

Вы используете react-router? Если да, то тут все просто:
1) роуты создаются с помощью функции, таким образом вы можете прокинуть в роутинг store

...
import configRoutes from '../../routes'
...
render() {
  return (
    <Provider store={store}>
      <Router history={routerHistory}>
        {configRoutes(store)}
      </Router>
    </Provider>
  )
}

2) Далее в роутинге, устанавливаете на "защищенные" компоненты onEnter hook:

...
<Route path='/secret-area' component={SecretAreaContainer} onEnter={_ensureAuthenticated}>
...

3) сама функция, смотрит есть ли в store необходимые данные:

export default function configRoutes(store) {
  function _ensureAuthenticated(nextState, replace, callback) {
    const { dispatch } = store
    const { session } = store.getState()
    const { currentUser } = session // данные по юзеру
    let nextUrl

    if (!currentUser && localStorage.getItem('token')) {
        dispatch(getCurrentAccount())
      }
    } else if (!localStorage.getItem('token')) {
      nextUrl = location.pathname + location.search.replace('?', '&')
      replace('/signin')
    }

    callback()
  }

  // здесь ваши роуты

Ок, по роутам готово.

Теперь, по переадресации:
- на success в логине, делаете редирект куда угодно:

export function signIn(email, password) {
  return (dispatch, getState) => {

    dispatch({
      type: USER_SIGN_IN_REQUEST,
    })

    const params = {
      email,
      password,
    }

    httpPost(`${API_ROOT_V1}/api/authenticate`, params)
      .then((data) => {
        saveParamsToLS(data) // здесь токен можно сохранить, например
        dispatch(push('/account')) // ваш РЕДИРЕКТ, используется push из react-router-redux (что необязательно)
      })
      .catch((error) => {
        console.warn(`Sign in error: ${JSON.stringify(error)}`) //eslint-disable-line no-console
        dispatch({
          type: USER_SIGN_IN_FAILURE,
          error: error,
        })
      })
  }
}

и остается кейс с прямым заходом: вы должны разрулить это опять же в onEnter хуке в роутере. Так как у вас есть store, и вам доступны все данные из него, включая store.dispatch метод, добить пример не составит труда.

UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

не включая основы js

Извините, но стандартная задача, про "напишите функуцию add, которая при вызове add(1)(2) вернет 3" - многих положила на лопатки =) Поэтому будьте готовы..

React
0) Какую проблему решает react ?
1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...
3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?
4) Что будет если вызвать this.setState в render методе компонента?
5) зачем нужен componenWIllUnmount, приведите пример..
6) Контролируемые, не контролируемые компоненты
7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
8) Зачем нужны propTypes? Что происходит с ними в production сборке?
9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)
...

Redux
0) Какую проблему решает redux?
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)
4) Как компоненты приложения получают "пропсы" из "стора"?*
5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
6.5) А так же, "как в js вообще это работает?". Например:

let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

Что будет в obj1, почему? В каких случаях объекты могут быть равны?
7) Что возвращает функция connect (из react-redux)?
...

Общее:
0) package.json
1) Webpack, gulp, etc...
2) node.js
3) promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер..
2) Почему не работает следующий код, сделайте чтобы работало
...
На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна - не беда, многие и на половину ответить не могут.

p.s. возможно дополню...
p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.

Нет, нужно так:

.header-page__main-nav
.header-page__items
.header-page__link

Не принципиально, у меня Фленаган и еще пару. Всеравно понятно станет раза с 3его только.