• Почему не происходит сложение массива?

    devellopah
    @devellopah
    Evgenij_nechujveter:

    твой код можно представить немного по-другому для понимания сути

    var a = [2,1];
    var b = [9,5];
    var mergeArray = function() {
    	var a, b, array; // изначально undefined
    	// поскольку в вызове функции ты не передал значения, чтобы присвоить их переменным a и b, они так и остаются undefined
    	// здесь ты пытаешься вызвать метод .concat() у undefined, должна вылетать ошибка по этому поводу
    	// ты ожидаешь что a и b будут взяты из глобального пространства, но этого не произойдёт, поскольку здесь внутри функции (то есть в локальном пространстве) ты объявил переменные c точно такими же идентификаторами, поэтому они "перетерут" глобальных "тёзок".
    	array = a.concat(b); // undefined.concat(undefined);
    };
    
    mergeArray();


    нечистая функция (императивный подход)
    либо не объявляешь локальные a и b (убираешь a, b из объявления функции) и работаешь напрямую с глобальными a и b

    чистая функция (функциональный подход)
    либо оставляешь как есть и просто вызываешь функцию с двумя аргументами (чтобы присвоить локальным a и b соответствующие массивы в качестве значений и ошибок не будет, поскольку у массивов есть метод .concat() "на вооружении")
    Ответ написан
    Комментировать
  • Выбор между flux и redux?

    devellopah
    @devellopah
    о каких проблемах идёт речь? ты просто перечислил "недостатки", не объяснив в чём дело, с какой реальной проблемой столкнулся?

    это всё равно, что я скажу, что претензии надуманные, не объясняя почему я так думаю.
    Ответ написан
    Комментировать
  • Нужен ли JavaScript?

    devellopah
    @devellopah
    хотя бы на уровне работы с дом(объектной моделью документа) и подключения плагинов(библиотек)
    Ответ написан
    Комментировать
  • Почему не получается отсортировать элементы методом полного перебора?

    devellopah
    @devellopah
    у тебя не хватает записи в коллекции {from: "c", to: "d"},

    наверное, всё-таки так
    arr.sort(function(prev, next) {
      return next.from <= prev.from
    });
    Ответ написан
    Комментировать
  • Как переделать строку "abcd..." в массив не по 1 элементу, а так ["ab","bc","cd",...]?

    devellopah
    @devellopah
    как вариант ( functional approach )

    const data = "abcdff"
    
    const list = data.split('').reduce((x, y) => 
    	Array.isArray(x) ? x.concat(x[x.length - 1][1] + y): [x + y]
    )
    
    console.log('list', list); // ["ab", "bc", "cd", "df", "ff"]
    Ответ написан
    Комментировать
  • Как вывести изображение в React + Redux (webpack)?

    devellopah
    @devellopah
    ты берёшь картинки из папки assets и потом после сборки туда же их и отправляешь. как-то это странно. возможно лучше создать папку/src/images, а в конфиге

    {
          test: /\.(jpg|jpeg|gif|png)$/,
           include: path.resolve(__dirname, "src/images"),
           loader:'url-loader?limit=1024&name=images/[name].[ext]'
       }


    и в стилях

    body {
        background: url(../../assets/back.jpg);
        background-size: cover;
        font-family: 'Open Sans', sans-serif;
    }
    Ответ написан
    Комментировать
  • Как сделать циклическую замену css класса по клику с помощью js+jquery?

    devellopah
    @devellopah
    я просто оставлю это здесь...
    Ответ написан
    Комментировать
  • Зачем верстальщику нужно изучать JavaScript?

    devellopah
    @devellopah
    1. обычно подразумевается, что вы владеете фреймворком ( angular, ember ) либо библиотекой типа react или vue ( плюс знакомы с их экосистемой ). Фреймворк предлагает все необходимые инструменты "out of the box" для построения веб-приложения ( в этом плане новичку может быть легче ).

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

    2. Всё что угодно. Учитывая, что джаваскрипт ранится на сервере ( изоморфный джаваскрипт ) благодаря ноде. Вы можете стать фуллстек девелопером, зная всего один язык программирования.

    3. Для верстальщика джаваскрипт нужен в основном на уровне манипуляции с дом, подключения тех или иных ванильных или не совсем библиотек.

    4. думаю, минимум около полугода, чтобы стать джуниором.

    p.s. знание английского на уровне intermediate не помешает.
    Ответ написан
    Комментировать
  • Почему не работает цикл в JS с применением коллекции элементов?

    devellopah
    @devellopah
    какая-то ересь написана, чувак, но помогу

    function handleClickFor(index, text) {
    		a[index].addEventListener('click', function() {
    			dec2(text, text);
    			summCounter1();
    			callsPerDay();
    			callsOverall();
    		});
    	}
    
    Array(3).fill().forEach(function(_, i) {
    	handleClickFor(i, 'count' + (i + 1) )
    })


    p.s. тебе за это платят или ты просто для себя делаешь приложение(без обид)?
    Ответ написан
    1 комментарий
  • Асинхронный цикл JavaScript & Генераторы?

    devellopah
    @devellopah
    javascript - это single-thread language. ты не вызовешь параллельно this.task(task) для всех элементов массива. ассинхронность не значит, что код выполняется параллельно, он просто выполняется в non-blocking стиле. даже promise.all() не выполняется параллельно. чтобы выполнить код параллельно - нужно выполнить его в отдельном потоке(webworkers).
    Ответ написан
    8 комментариев
  • О какой скорости идёт речь, если react этот тот же самый js?

    devellopah
    @devellopah
    реакт и другие решения - это слои абстракции поверх языка. это не одно и то же.
    Ответ написан
    4 комментария
  • Почему div не уходит вниз под другой div?

    devellopah
    @devellopah
    тебе нужно это
    @media only screen and (max-width: 659px) {
    	.sct_kontakt {
    		flex-direction: column-reverse;
    	}
    }


    также нужно убрать флоаты у дочерних элементов, раз уж ты флексбокс используешь.

    твой пример здесь

    p.s. будь так добр, выкладывай в песочницу сам
    Ответ написан
    1 комментарий
  • Почему не работает bind?

    devellopah
    @devellopah
    Сохранять props компонента в его локальном state - антипаттерн.
    Ничего, если this.props.data определён как default props(не будет меняться), но в большинстве случаев будет(идёт из родительского state либо из глобального хранилища, то есть store).
    Когда this.props.data обновится, локальный state останется прежним. Придётся дергать componentWillRecieveProps.
    Данные, передаваемые как props почти всегда уже где-то храняться ( у родителя или в store ).
    Грубо говоря, за ними уже следят. Незачем их пересохранять в дркгом компоненте.

    Нельзя писать так handle = {this.test}. Пробелов быть не должно.

    Учитывая всё вышенаписанное, компонент можно переписать так

    export default class Board extends React.Component {
      test = () => {
        console.log(this)
      }
      
      render(){
        const temp = this.props.data.map((item, index) => 
          <Task data={item} key={index}  handle={this.test} />
        )
    
        return <div className="board">{temp}</div>
      }
    }
    Ответ написан
    Комментировать
  • Как реализовать функцию?

    devellopah
    @devellopah
    я бы сделал немного по-другому. По идее, ты должен указать инфу о кол-ве, оставшегося товара для каждой позиции(quantity). Если предположить, что ты так и сделаешь, то можно переписать так

    const items = [
    	{name:'Отвертка',price:'150', quantity: 100},
    	{name:'Ключ',price:'100', quantity: 200},
    	{name:'Зубило',price:'180', quantity: 500},
    	{name:'Напильник',price:'200', quantity: 1000},
    	{name:'Молоток',price:'500', quantity: 250}
    ];
    
    function getDiscount(x) {
    	if(x < 10) return 5;
    	if(x > 10 && x < 50) return 7;
    	if(x > 50 && x < 100) return 10;
    	if(x > 100) return 15;
    }
    
    function getCustomerBenefit(item) {
    	const benefit = item.quantity * 0.01 * item.price * getDiscount(item.quantity);
    	
    	console.log('money you can save due to discount', benefit);
    	
    	return benefit;
    }
    
    function calculateTotalPayment(item) {
    	const beforeDiscount = item.quantity * item.price;
    	const totalPayment = beforeDiscount - getCustomerBenefit(item);
    	
    	console.log('beforeDiscount', beforeDiscount);
    	console.log('total payment(discount included)', totalPayment);
    	
    	return totalPayment;
    }
    
    calculateTotalPayment(items[4]);


    p.s. https://repl.it/HCNy
    Ответ написан
    3 комментария
  • Какие единицы лучше использовать при адаптивной верстке?

    devellopah
    @devellopah
    если ты делишь страницу на компоненты, то размер шрифта компонента задаётся в rem, а всё остальное внутри - в em.
    посмотри пример
    я использовал rem чтобы задать размер шрифта компонента. Размеры дочерних элементов компонента должны зависеть от размера шрифта самого компонента, а не корневого элемента, поэтому внутри компонента всё вem.
    Для чего вообще это делать? Просто измени значениеfont-size у класса .card__card_big
    Ответ написан
    Комментировать
  • Почему последующий код выполняется в тоже время как и вызванная функция?

    devellopah
    @devellopah
    сама функция loadingScreen() неявно возвращает промис, надо дождаться его выполнения

    async function game() {
      await loadingScreen()
      console.log('screen is loaded!')
    }
    Ответ написан
    3 комментария
  • Как выполнить action до рендеринга с сервера?

    devellopah
    @devellopah
    // Register server-side rendering middleware
    app.get('*', (req, res) => {
      if (__DEV__) {
        webpackIsomorphicTools.refresh();
      }
    
       const store = configureStore();
    
      // If __DISABLE_SSR__ = true, disable server side rendering
      if (__DISABLE_SSR__) {
        res.send(renderHtmlPage(store));
        return;
      }
    
      const memoryHistory = createMemoryHistory(req.url);
      const history = syncHistoryWithStore(memoryHistory, store, {
        selectLocationState: state => state.get('routing').toJS(),
      });
    
      // eslint-disable-next-line max-len
      match({history: memoryHistory, routes, location: req.url }, (error, redirectLocation, renderProps) => {
        if (error) {
          res.status(500).send(error.message);
        } else if (redirectLocation) {
          res.redirect(302, redirectLocation.pathname + redirectLocation.search);
        } else if (!renderProps) {
          res.sendStatus(404);
        } else {
          // Dispatch the initial action of each container first
          const promises = renderProps.components
            .filter(component => component.fetchData)
            .map(component => component.fetchData(store.dispatch, renderProps.params));
         
          // Then render the routes
          Promise.all(promises)
            .then(() => {
              // Using the enhanced history of react-redux-router to instead of the 'memoryHistory'
              const props = Object.assign({}, renderProps, { history });
              const content = renderToString(
                <Provider store={store}>
                   <RouterContext {...props} />
                </Provider>
              );
    
              res.status(200).send(renderHtmlPage(store, content));
            });
        }
      });
    });


    твой компонент который загружается при переходе на роут должен иметь статический метод fetchData, он может выглядеть примерно так

    class UsersPage extends React.Component {
    	
    	static async fetchData(url) {
    		try {
    			const res = await axios.get(url);
    			const users = res.data 
    		} catch(err) {
    			console.error(err.message);
    		}
    	}
    	
    	componentDidMount() {
    		this.fetchData(url);
    	}
    	
    	render() {
    		return (
    		 // whatever
    		);
    	}
    }
    Ответ написан
    Комментировать
  • Что значат эти mongodb ошибки? Как это исправить?

    devellopah
    @devellopah Автор вопроса
    ну-чё делать-то? кто-нибудь поможет...
    Ответ написан
  • Зачем нужна jwt стратегия?

    devellopah
    @devellopah
    Справка(упрощённо).
    Аутентификация - вход в систему.
    Авторизация - получение доступа к инфе из базы данных.

    Если ты создаёшь сессию для пользователей своего приложения, то когда юзер залогинился на сервере инициируется сессия и сервер в куках отправляет на клиент session id.
    В последующих запросах к базе данных сервер читает этот session id из кук, обращается к некой внутренней базе ( обычно имеет форму ключ-значение, где ключ - это session id, значение - mail пользователя, к примеру ) затем обращается к базе данных, достаёт данных для пользователя ( мы определили его на предыдущем шаге ) и возвращается в response.
    Такая система называется stateful ( поскольку мы вынуждены хранить инфу об аутентифицированных пользователях на сервере ). Это не вяжется с концепцией RESTful API, подразумевающей, что сервер должен быть stateless ( не хранить инфу аутентифицированных пользователях ).
    Добиться этого помогает json web token, поскольку он хранит всю необходимую для авторизации пользователя инфу. Это позволяет тебе написать RESTful API(stateless)

    Что почитать: session-based authentication, token-based authentication
    Ответ написан
    Комментировать