Ответы пользователя по тегу HTML
  • Какие книги по веб-разработке на данный момент актуальны?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Ответ написан
    Комментировать
  • Почему нет связи файла с react кодом и index.html?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Так не должно работать. У вас код не прогоняется через babel, следовательно, можно сказать, что "require не выполняются".

    Если вы хотите "научиться" без create-react-app - то нужно писать text/babel код в этом же htmk файле (что у вас работало), так как браузеры по умолчанию require не умеют, о чем и есть текст ошибки (функция require не определена).
    Ответ написан
  • Как правильно прописать путь src в React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    img className="img-fluid" src={'i/com/'+v.picture} alt=""/>


    p.s. вам же нужно в атрибут src передать просто строку, типа i/com/temp.jpg, а у вас получается: {i/com/temp.jpg}
    Ответ написан
    1 комментарий
  • Новые возможности javascript являются частью спецификации языка?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    что jsx-скрипт распарсивается какой-то библиотекой написаной на стандартном javascript и транслирует в него же...

    Абсолютно верно. JSX превращается в обычные js-объекты.

    На счет любых атрибутов - сказать точно не могу (angular / vue тоже же используют кастомные атрибуты, но я не знаком с тем, как обрабатываются шаблоны подобные), знаю лишь, что data-* валидны в HTML 5, а если вы про "атрибуты в jsx", то там да... любые, но это уже и не HTML.
    Ответ написан
    Комментировать
  • Какой подход (библиотеки, фреймворки) используете при верстке UI?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Всякие красивые чекбоксы, радиобаттоны и прочие интерфейсы верстаю вручную, и естесственно адаптивно.

    Значит при том вы ведете какую-то свою "библиотеку подобных элементов"?
    Так же и другие люди, "ведут" подобные библиотеки, еще больше других людей их используют и пишут о багах, поэтому получается обычно более "протестированный" элемент.

    Пример, для material design - https://getmdl.io/components/index.html
    Там есть github и можно посмотреть код любого компонента... а можно просто взять сразу готовый и использовать, при этом не писать самому.

    Другой пример: есть популярный bootstrap, есть у него сетка, по этой сетке делается много однотипных сайтов, дизайнеры по ней рисуют сразу изначально, в итоге у рядового "конвейрного" мастера по лендингам (ничего плохого не имею против таких специалистов) очень сильно понижается затраченное время на выполнение задачи по адаптивной верстке.
    ===

    По технологиям: вы верстаете, так наверное, используете gulp? Если нет - то пора, получите live reload (не нужно перезагружать страницу), сможете оптимизировать ваши скрипты/стили/картинки... и все это будет сильно высвобождать ваше время.
    Ответ написан
    3 комментария
  • Как вывести данные API в таблицу?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не надо с DOM напрямую работать.
    Создаете в state переменную: data
    Далее в componentDidMount выполняете ajax запрос и его результат записываете через this.setState({data ... })
    В render методе своего компонента, в таблице делаете обход по this.state.data с помощью map / forEach / тд

    Пример:

    ...
    constructor(props) {
        super(props)
        this.state = {
          data: []
        }
    }
    ...
    componentDidMount() {
        // ваш ajax запрос
        // в success коллбэке устанавливаете новый state, из-за этого произойдет ре-рендер
        success: function(data) { this.setState(data) }
    }
    render() {
    const { data } = this.state
    ...
        <table className='table table-bordered table-striped'>
            <thead>
              <tr>
                <th>name</th>
              </tr>
            </thead>
            <tbody>
              {
                data.map(item => {
                  return (
                    <tr key={item._id}>
                      <td>{item.name}</td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
    ...
    }
    Ответ написан
    Комментировать
  • Nodejs/express + ES6 рекомендации?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    По первому пункту, ссылка от Антона в помощь.

    По второму вопросу: вы на node.js будете делать бэкэнд. Который будет являться API сервером, не более. Здесь придется поизучать что такое REST API. Следовательно, если вы будете писать фронтенд на react/redux, то кладете его в другую директорию, там уже свой package.json и т.д., так как ваш фронтенд и бэкэнд - это две разные вещи.
    Ответ написан
    Комментировать
  • Используют ли при работе с Angular, Backbone, VUE и другими структуру из нескольких html-страниц?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не практикуют.
    Ответ написан
    Комментировать
  • Eslint Best practices?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Во многих статьях вижу конфиг от airbnb, список правил тут

    В .eslintrc есть возможность "унаследовать конфиг". Например,

    {
      "extends": "eslint:recommended", // унаследовали от eslint:recommended
      ...
      "rules": { // переопределили/добавили свои правила
        "no-debugger": 0,
        "no-console": 0,
        ...
      }
    }
    Ответ написан
    Комментировать
  • Как сделать отзывчивое изображение?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Сделайте обертку, туда передавайте нужные размеры (https://jsfiddle.net/5fs3dkqj/2/)
    Ответ написан
  • Как реализовать отправку отрендерившегося сообщения (React) чата в другой html-класс?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Использовать flux/redux
    Использовать "события" (хоть custom Event , хоть EventEmitter (после заголовка Глобальная система событий), хоть jquery events)
    Ответ написан
    Комментировать
  • Как перенести часть строки на новую строку в свойстве компонента?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Возможно поможет dangerouslySetInnerHTML

    Пример использования есть в туториале (поиском по странице "rawMarkup")
    Ответ написан
    Комментировать
  • Модульность на фронтенде?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    (кратко про себя)
    Все лежит в папках: компонент + стиль. Собирается webpack'ом. Но у меня react-проекты.

    (длинно, но вроде бы по делу)
    Если относительно долго занимаетесь - у вас скорее всего уже выработались части, которые похожи - их выносите. Так же скорее всего у вас есть одинаковая структура (обычно это js/css/images и html, либо как вы пишите компонентами (отдельными папками) внутри котороых html + стили и может js ). Делайте шаблон для будущих проектов, в первую очередь удобным для себя - ведь вам с ним работать, а в нем реализуйте то что умеете по-максимуму (жмите картинки, оптимизируйте js и т.д)

    Плагины, которые используете для Gulp, просто проверьте в блэклисте, а так же можете посмотреть новые версии. Вообще, хорошо если вы знаете все свои плагины, в таком случае - вам и этот пункт можно не выполнять.

    кажется, что не использовал это все на 100%

    Всем так кажется, поэтому когда не хочется заниматься работой, идем в гугл и смотрим опен-сорс проекты других людей: gulp, wepback, затем если нашли что-то любопытное идем в npm/github читаем доку. Пытаемся применить в работе.

    Что имеем в итоге?
    1) если все работает и вас устраивает (скорость сборки, удобство проверки в разных браузерах ...) - "работу работать";
    2) если есть время и желание - гуглите опен-сорс решения, читайте твиттер интересных людей / новостную подписку;
    3) если хочется услышать мнение коллег, но при этом коллег рядом нет - пишите статью на хабр. Просто статья: я использую такие-то плагины в своем "шаблоне" - вряд ли получит лестные отзывы, но возможно кто-то напишет: вот в этом месте у вас плохо, сделайте иначе. Возможно, вы придумаете, как написать статью интересно - тогда честь и хвала. И критика. А обоснованная критика всегда хорошо.

    P.S. если используете Jade и следуете BEM-методологии, то я бы порекомендовал посмотреть на этот проект
    Ответ написан
    Комментировать
  • Хорошо ли подходит NodeJS для парсинга сайтов?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    отлично подходит, как уже указано было выше - phantomjs очень крут!
    Ответ написан
    Комментировать