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

verbaux

Верстальщик
Лайки

  • Как сделать ленивую загрузку компонент на React, React Router 4, Webpack 3?

    nDiviD
    @nDiviD
    Делать проекты, которыми можно гордиться
    И так, с Webpack 3 все довольно просто, если знать нюансы:
    1) Нужно понимать, что то что мы хотим загрузить должно быть в отдельном файле - чанке.
    2) Для того что бы создался чанк необходимо все импорты этого компонента грузить "лениво". Это очень важно, в свое время именно это мешало мне разбить существующий проект на чанки.
    3) Ну и самое простое: грузим через промис import: 
    const loadEditor = () => import(/* webpackChunkName: "my-best-editor-chunk" */ 'react-dart-editor');
  loadEditor().then(m => use it);

    4) Конфиг webpack:
    new webpack.optimize.CommonsChunkPlugin({
  children: true,
  async: true,
  minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin('manifest'),


    Так же можно импортировать и функции.

    Я использую такой компонент:
    Chunk.jsx
    import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Chunk extends Component {
  state = { LoadedComponent: null };

  componentWillMount() {
    if (this.props.preload) this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    const { load, component, show } = nextProps;
    if (
      this.props.load !== load ||
      this.props.component !== component ||
      (this.props.show !== show && show)
    ) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({ LoadedComponent: null });
    props.load().then((mod) => {
      this.setState({
        LoadedComponent: props.component ? mod[props.component] : mod.default,
      });
    });
  }

  renderLoading = () => this.props.showLoading ? (<div>Loading</div>) : null;

  render() {
    const { LoadedComponent } = this.state;
    const  { show, ...props } = this.props;
    delete props.load;
    delete props.component;
    if (!show) return null;
    return LoadedComponent ? <LoadedComponent {...props} /> : this.renderLoading();
  }
}

Chunk.defaultProps = {
  showLoading: false,
  preload    : true,
  show       : true,
};

Chunk.propTypes = {
  load       : PropTypes.func.isRequired,
  show       : PropTypes.bool,
  preload    : PropTypes.bool,
  component  : PropTypes.string,
  showLoading: PropTypes.bool,
};

export default Chunk;



    Использовать так:
    <Chunk
  load={loadEditor} // была уже выше
  component="EditorAside" // если нужно что-то, что импортируется не по дефоулту
  show={true/false} // отображать ли компотнент
  preload={true/false} // осуществлять ли предзагрузку чанка
  props1="1"
  props2="2"
/>


    P.S. Об использовании компонентов в роутере написано хорошо в туториале =)
    Ответ написан
    6 комментариев
    6 комментариев

  • Codewars, на сколько поможет подтянуть js?

    IonDen
    @IonDen Куратор тега IT-образование
    JavaScript developer. IonDen.com
    Codewars даст вам хорошую базу и знание языка. Это безусловно очень полезно, но...
    Фронтенд разработка подразумевает под собой еще и знание конкретных прикладных технологий - Основные навыки фронтенд-разработчика

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

  • Какие есть обучающие материалы по React на русском?

    evgeniy8705
    @evgeniy8705
    Повелитель вселенной
    https://maxfarseer.gitbooks.io/react-course-ru/content/
    https://www.gitbook.com/book/maxfarseer/redux-cour...
    https://www.gitbook.com/book/maxfarseer/react-rout...
    Ответ написан
    Комментировать
    Комментировать

  • Почему не применяется ::before?

    bootd
    @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    Всегда у всех :before, :after должно быть свойство content: ''; Либо с пустым значением, либо с нужным вам текстом! В противном случае, элемент не отобразиться!
    Ответ написан
    Комментировать
    Комментировать

  • Как определяется высота div со вложенным Img?

    evgeniy8705
    @evgeniy8705
    Повелитель вселенной
    Высота больше из за того что img инлайновый элемент. Чтобы сравнять высоту блока и img, нужно либо у img указать display: block, либо у div указать font-size: 0
    Ответ написан
    Комментировать
    Комментировать

  • Есть ли в природе обширная книга по front end разработке?

    Libris
    @Libris
    Как тема у врачей про таблетку от всех болезней так и у начинающих фронт-эндов. Обширной одной нет, но есть много хороших книг на разную тему.
    И так список понравившихся мне книг:
    www.ozon.ru/context/detail/id/24493075 - Большая книга CSS3 на данный момент одна из лучших книг по css. Тут Вы найдёте не только применение css и объяснения как и что работает , но и кучу полезных сервисов.
    www.ozon.ru/context/detail/id/18060929 - Данную книгу лучше читать тем кто уже знаком с js и конечно хорошо знает html 4 или/и xhtml - так пишет автор и после прочтения половины книги знания js Вам понадобятся точно. Книга довольно обширная не смотря на её 500стр. - конечно есть вода, но куда без неё. Хотя для одних вода, а для других интересные и нужные факты.
    www.ozon.ru/context/detail/id/19677670 - книга с носорогом) куда без неё... Одна из лучших книг, хоть и вода есть, но она стоит своих денег. Это огромный справочник под все случаи жизни. Так же отдельно от неё продаётся маленький справочник (который находится в конце этой огромной книги). Вот в нём как раз нет воды и всё самое важное. Стоит он около 300р - 400р.
    www.ozon.ru/context/detail/id/3159814/#comments_list - эта книга одна из лучших, хотя даже лучшая... В ней вся суть программирования. Тут не рассматривают один конкретный язык. Тут о каждом по чуть-чуть и взята суть каждого.
    www.ozon.ru/context/detail/id/28298064 - книга стоит своих денег, Я бы даже сказала она очень дешевая. В ней рассматриваются пути обхода css3. То есть как сделать что-то с css3 и без него. Также говорят о фильтрах и куча всяких полезностей.

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

    И так самой главной книгой в начале моего пути у меня была "Основы веб-программирования с использованием HTML... - её Я бы посоветовала новичкам которые не знают что такое css и html толком, но которые хотят научиться писать правильный семантичный и симпатичный код. В ней автор буквально толкает читателя на строгий xhtml, но тем самым приучивает быть внимательным и мне кажется как первая книга она не плоха.
    Возможно в свободное время кому-то будет интересно почитать книгу для улучшения памяти, которая как по мне очень даже приятно написана с изюменкой в виде юмора, в ней описаны метода как лугче всего запонимать любую информацию, но если говорить более точно то метод (метод мест) который повсеместно используется знаменитыми мнемонистами. Я думаю вопроса ни у кого не будет: " Зачем программисту книга с набором мнемотекник"

    Пожалуй стоит отметить и те которые покупать не стоит...
    Было дело мне хотелось почитать книгу про seo. Ну думаю раз мне нравится семантика, то Я найду её плюсы в книге по seo. Моё провальное знакомство началось (и закончилось) с книги "Раскрутка: новейшее руководство твоего продвижения сайтов в Рунете", ссылку на этот ужас приводить не буду. На ozone у неё положительные отзывы видимо только от авторов. А на обложке книги полуголая баба. Когда брала книгу то думала у автора с юмором и изложением всё норм, ну и промелькнуло мнение что по обложке не судят. Оказалось судить стоило))) кроме рекламы seoPult (писатели и есть эта контора) ничего там нет. Все 300 страниц описано одно. Вложите деньги в написание контента (можно заказать у нас) и вложите к нам в раскрутку. ВСЁ...
    Вторую книгу Я бы не то чтобы не советовала, скорее можно просто найти куда лучше, да и устарела она уже. JavaScript и jQuery, написана приятно, объясняют хорошо, но 50% технологий устарели или слабы. Тем более лучше носорог, а по JQ поискть что-то более новое
    Если Вам нужны книги по азам или более продвинутые по js то пишите в комментах
    Ответ написан
    17 комментариев
    17 комментариев

  • Есть ли в природе обширная книга по front end разработке?

    @IoannGrozny
    Front-end разработчик
    От А до Я - нету. Это бы получился многотомник покруче БСЭ или Полного собрания сочинений В.И.Ленина. Современный фронтэнд - огромнейшее поле. HTML, CSS, JS, JS библиотеки, JS фреймворки, CSS фреймворки, HTML-препроцессоры, CSS-препроцессоры, MVC фреймворки, SVG, HTML5 API, разметка шаблонов для разных серверных языков (Java,ASP,..), CMS, JS плагины, task-менеджеры, микроразметка и многое другое. При этом фронтэнд может выводиться на огромной массе устройств - от компьютеров и мобильных телефонов, до холодильников и телевизоров. А теперь помножьте это на огромное количество несовместимостей и специфичных багов, которые исправляются кучей хаков, фоллбеков и полифиллов. В одной книжке это точно не уместить. Постигайте всё на практике, спрашивайте здесь и на stackoverflow, читайте тематические форумы. В книгах только основы, без которых не обойтись.
    Ответ написан
    3 комментария
    3 комментария

  • На каких сайтах можно найти интересные штуки на JQuery/CSS3?

  • Какие существуют интерактивные курсы по web программированию на русском ?

    sashablashenkov
    @sashablashenkov
    htmlacademy.ru
    Ответ написан
    Комментировать
    Комментировать

  • Как понять этот код JavaScript начинающему кодеру?

    nobodynoone
    @nobodynoone
    Тут прикол в том, что ищется первая буква имени, когда эта буква находится, получаем длину имени и прибавляем к нему 1 (почему 1? вспомните про то, что все массивы начинаются не с 1, а с 0, отсюда и это прибавление). Вот с комментариями 

    // Строка, где будем искать имя 
var text = "Hey,my is Bobby!";
// Само имя 
var myName = "Bobby";
// Сюда будет пихать буквы имени, которые извлечем из строки 
var hits = [];

// Начинаем цикл, который будет перебирать каждый символ, потому что length возвращает
// количество символов в строке 
for ( var i=0; i<text.length; i++ ) {
    // Такк как мы перебираем не буквы, а числа, поэтому мы получаем символ из строки text
    // передачей позиции символа. Если буква найдена, то продолжаем. 
    if(text[i]==='B'){
        // Вы не поняли, зачем и почему тут j=i, да потому что мы все еще продолжаем искать 
        // символы в той же самой строке, а так как мы этот символ уже нашли, то нету смысла
        // начинать все с самого начала, потому что это неправильно, так как если предположить, что
        //  у нас до этого был перебор посимвольно строки весом скажем, 100Гб, то вы сами можете
        //  понять, что нам незачем еще раз делать то, что мы уже сделали, поэтому мы просто 
        // присваиваем переменной j текущее значение и позицию i и создаем цикл который позволит
        // нам полностью "забрать" слово. Как? Опять же берем длину строки с именем и прибавляем
        // единицу (почему 1? вспомните про то, что все массивы начинаются не с 1, а с 0, отсюда 
        // и это прибавление). 
        for(var j = i; j < (myName.length + i); j++) {
                        // Отправляем букву в массив
			hits.push(text[j]);
        }
    }
}

if (hits.length === 0) {
	console.log("Your name wasn't found!");
} else {
	console.log(hits);
}


    Проще просто нельзя :)
    Ответ написан
    1 комментарий
    1 комментарий

  • Каков план личностного развития JavaScript программиста с нуля?

    Hando
    @Hando
    Верстак
    Хорошим учебным пособием для тех, кто еще пока не настолько хорошо знает английский язык, чтобы читать на нем техническую литературу, будет вот этот ресурс - learn.javascript.ru Странно, что он до сих пор здесь не был озвучен, возможно только лишь потому, что это первое что дает поисковая выдача :)
    Ответ написан
    Комментировать
    Комментировать

  • Куда вы перешли с Google Reader?

    a9V
    @a9V
    cloud.feedly.com (есть API, который используют многие сторонние клиенты, например Press, Reader+, gReader)
    Ответ написан
    1 комментарий
    1 комментарий

  • Я не понял. Почему Google Reader всё ещё работает у меня?

    gen1s
    @gen1s
    У меня веб-интерфейс не работает (перекидывает на www.google.com/reader/about/), но программа Reeder (rss-клиент для iOs) по-прежнему синхронизируется с аккаунтом Google Reader и получает свежие записи (последняя 9:52 МСК). Отключили пока не до конца.
    Ответ написан
    Комментировать
    Комментировать