• Можете помочь с регулярным выражением?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const str = 'qwe//qwe';
    const reg = /(qwe\/).*(\/qwe)/;
    const replacement = 'hello, world!!';
    const newStr = str.replace(reg, `$1${replacement}$2`);
    Ответ написан
    Комментировать
  • Как написать тест для валидации, react/redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Подкину теории: вы хотите протестировать функцию. Ваша функция чистая ( то есть выдает один и тот же результат для одних и тех же входных параметров, иначе _аргументов_ функции). Следовательно тестировать такую функцию просто.
    А) вы импортируете функцию в своем файле с тестами
    Б1) вызываете ее без values.value - ожидаете, что errors.value = 'Please enter value'
    Б2) вызываете ее с values.value === props.initialValues.value и ождаете, что будет errors.value = 'Please enter a new value'

    то есть, вы сами описываете в первом it вашего теста объект values, во втором it описываете values и props. Ваш тест можно описать так: "вы предполагаете, что если дадите 20 рублей продавцу, он выдаст вам батон". Тут так же: вы предполагаете, что если функция validate получит такие-то аргументы (только что вами в этом тесте созданные) - получится такой-то ответ от нее.

    const validate = require('./validate');
    const values = {} // то есть values.value - не существует
    const props = {} // для первого теста на существование значения, нам не важно какие тут значения props
    test('покажет ошибку, если нет значения', () => {
      expect(validate(values, props)).toBe('Please enter value');
    });


    Второй тест вам на домашнее задание.

    p.s. я писал в ответе it, потому что привык, что тесты пишутся внутри it, но сейчас в доке jest вижу, что они используют test ...
    Ответ написан
    3 комментария
  • Как по БЭМ написать элемент в блоке с модификатором?

    edalis
    @edalis
    HTML, CSS, JS, Node.js
    Модификатор для блока .container: .container--pallax
    Модификатор для элемента .container__title: .container__title--pallax

    Возможные варианты:

    <div class="container container--pallax">
        <div class="container__title"></div>
    </div>


    <div class="container container--pallax">
        <div class="container__title container__title--pallax"></div>
    </div>


    <div class="container">
        <div class="container__title container__title--pallax"></div>
    </div>
    Ответ написан
    1 комментарий
  • Как верстать с использованием ReactJS?

    kostya-frank
    @kostya-frank
    Системный администратор
    >> или статическая информация (которую нет смысла пропускать через js)
    Для таких ситуация обычно создается компонент <StaticInformation page="page1" />, в котором, к примеру, с помощью componentDidMount() заполняется div информацией, полученной с помощью post/get запроса.

    >> уроками где рассматривается более обширная архитектура чем в туториалах по SPA
    https://www.youtube.com/watch?v=MhkGQAoc7bc&list=P... - самые адекватные уроки

    >> Для ситуации когда нужно отрендерить два компонента в разных местах страницы
    Изначально создается родительский компонент App extends React.Component (к примеру), в котором в методе render имеем:
    <section>
       <Header />
       <Content />
       <Footer />
    </section>

    Подключаем import Header from ... и далее работает с каждым компонентом отдельно.

    Сам всегда использую react-router, так как он вполне подходит и для многостраничных сайтов (тык). Перебрасываем пользователя на index.html при любом запросе и обрабатываем все уже внутри приложения. Для пользователя разницы никакой.

    Если хотите полностью отдельные страницы, то можно насоздавать html страницы, подключив по куче модулей, как Вы и сказали, но данный вариант обычно не используется.
    Ответ написан
    Комментировать
  • Считается ли такая верстка - версткой по БЭМ?

    Maksclub
    @Maksclub Куратор тега Веб-разработка
    maksfedorov.ru
    Я бы так переделал:
    <header class="header">
      <div class="header_wrapper">
        <nav class="nav nav-header">
          <li class="nav__item">Первая</li>
          <li class="nav__item">Вторя</li>
          <li class="nav__item">Третья</li>
          <li class="nav__item">Четвертая</li>
          <li class="nav__item">Пятая</li>
          <li class="nav__item">Шестая</li>
        </nav>
      </div>
    </header>


    • Тогда блок nav можно переиспользовать (в чем и есть суть БЭМ)
    • Если нужно стилизовать элементы li именно под шапку, то добавляем модификатор:
      class="nav__item nav__item-header"
    Ответ написан
    Комментировать
  • Как вы начинаете вёрстку сайта?

    torrie
    @torrie
    Всё знаю, всё умею
    В первую очередь делаю сброс css-стилей.
    Затем делаю вёрстку общих блоков - просто структура из div'ов с нужными ширинами, высотами согласно макету, залитых разными цветами. Стараюсь все div'ы(когда что-то в строчку) делать inline-block'ами. Получается цветная такая структура будущего сайта. Каркас готов.
    NDrl9VkCyDvemP.jpg

    Начинаю углубляться в каждый блок - располагать в нём нужные элементы. В зависимости от сложности их расположения делаю какие-то блоки position:relative, но чаще всего всё упирается просто в отступы.
    Ответ написан
    3 комментария
  • Как вы начинаете вёрстку сайта?

    dunmaksim
    @dunmaksim
    Технический писатель
    1. Создаю каталог для проекта
    2. Инициализирую Bower
    3. Устанавливаю нужные пакеты, например, Twitter Bootstrap, Angular, jQuery и т.д.
    4. Ставлю Grunt, плагины для него и т.д.
    5. Запускаю EMACS и создаю index.html
    6. С помощью Emmet создаю шаблон, который уже начинаю заполнять.
    7. В каталоге src создаю папки less, js и т.д.
    8. Попутно пишу задачи для Grunt
    9. Если в выбранном фреймворке не хватает какого-либо класса для стилизации элемента, сначала описываю стили прямо в шаблоне, в свойстве style. Затем при необходимости выношу их оттуда в LESS в виде одного или нескольких классов.
    10. ??????????
    11. PROFIT!!!
    Ответ написан
    15 комментариев
  • Пример хорошего ТЗ/гайдлайна для вёрстки?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Основные требования: здесь
    Примеры стайл-гайдов: здесь

    1. Требования к вёрстке: здесь, здесь, здесь, здесь
    2. Как проверять качество вёрстки: здесь.
    3. Как определять стоимость (трудозатраты) вёрстки одной унифицированной страницы: здесь.
    4. Требования к дизайнеру: здесь и здесь.
    5. Пример документации (генератор шаблона, Helix3 для CMS Joomla!): здесь
    6. Готовые "скелеты" шаблонов HTML5 для начала вёрстки: простой (с поясняющими комментариями), www.initializr.com (ещё 3 простых) и максимально полный html5boilerplate.com.
    7. Вопросы на вакансию верстальщика (front-end developer): здесь

    Бонус по-теме: Turning Design Mockups Into Code With Deep Learning
    Ответ написан
    3 комментария
  • Каков сценарий использования git для одного разработчика?

    gobananas
    @gobananas
    finishhim.ru
    Делаете ветку master, ветку dev и отдельные ветки под отдельные фичи.
    Делаете 2 сайта - один сам проект (основной) - на него выкатываете master, второй сайт тестовый - на него выкатываете ветку dev. Остальные ветки разрабатываете, сливаете с dev выкатываете на тест, если там всё нормально то dev сливаете с мастером. За ноут просто когда садитесь если мастер новый есть делаете git pull и стягиваете новую версию
    Ответ написан
    11 комментариев
  • Абстракция в JavaScript?

    @TimurBaiguzhaev
    Backend Golang Developer
    Помните, как родители заставляли вас играть на фортепиано или учить стихи?.. Так вот, Абстрактные классы также как и многие родители вовсе и знать не знают зачем ребенку-потомку это будет нужно, и как он это будет использовать, но уверены, что так НАДО! Т.е. такие классы содержат абстрактные методы, которые являют собой объявление метода без самой реализации, как фантик без конфетки, тем самым обязывая потомка, этот метод реализовать. Как и в жизни, где родители нередко перекладывают на детей свои нереализованные мечты…

    Вот в такой шутливо-серьезной форме, мы затронули тему абстрактных классов и семейных отношений, как способ понять… и то и другое?.. А если серьезно, то разумеется, в программировании не должно быть случайных методов, и любые методы и свойства являются частью продуманной иерархии классов, которая как генеалогическое дерево, может давать возможности расширять функционал от поколения к поколению. А абстрактные классы, и еще более абстрактные – интерфейсы ( interface — вообще не содержит реализаций ), помогают программисту не потерять, не забыть реализовать общие необходимые для всех потомков умения в жизни, без которых особь умрет, а с ней и приложение.


    Источник : habrahabr.ru

    Abstract classes in JavaScript
    Ответ написан
    Комментировать
  • Стек технологий, чтобы верстать быстрее?

    Krasnodar_etc
    @Krasnodar_etc
    fundraiseup
    1) Опыт
    2) Emmet для написания разметки
    3) Второй моник
    4) Sass/Scss препроцессоры
    5) БЭМ, в связке с препроцессорами особенно.
    6) Любой шаблонизатор, главное чтоб импортировать файлы умел. Если пишу фуллстэк - юзаю EJS для Node.js. Если только фронт - JSX (React.js)
    7) Не юзал zeplin/avocode, но figma - офигенная штука.

    *Порядок произвольный, не по важности.
    Ответ написан
    11 комментариев
  • План подготовки для поступления в Яндекс ШАД?

    @Mercury13
    Программист на «си с крестами» и не только
    Алгоритмы. Немного олимпиадного программирования ОЧЕНЬ не помешает. Алгоритмы там предлагают несложные, но очень нетривиальные, надо чувствовать, как решить задачу. Элементы сложности алгоритмов. Две задачи из восьми гарантированно будут.

    Алгебра и дискретная математика. Первый курс, всё скопом, без доказательств. Линейные уравнения, квадратичные формы, матрицы, собственные векторы, жорданова форма, перестановки, графы, теория множеств, комбинаторика, алгебра логики…

    Интегралы (не слишком «злые», но приёмы «подстановка», «по частям» и «тригонометрический интеграл» всё же освоить стоит). Интеграл средней сложности — постоянный гость в ШАДý. Может быть и ещё одна задача из мутьанализа — но это как повезёт и задача будет гарантированно нетривиальная, но решающаяся на «том, что помнишь с института» — дифференцирование, ряды Тейлора, основы топологии, простейшие пределы, правило Лопиталя. Вспомни, как берутся простейшие двойные интегралы, может попасться, например, на теории вероятностей.

    ФКП. Самое начало. Аналитических функций и рядов Лорана точно не будет. А вот то, что в комплексном поле многочлен n-й степени имеет n корней, знать надо.

    Теория вероятностей. Непрерывные и дискретные вероятности. Нечто несложное, почти что на уровне кубиков и карт, но одна-две из восьми будет. Хотя статистика — важная часть ШАДа, на экзамене не требуют. И пекла типа белых шумов и интегралов Ито не будет. Хотя что-то типа дискретной марковской цепи — а вдруг, хотя знакомые мне три экзамена не было.

    Школьные олимпиадные задачи. Возможна одна.

    Итого.
    Две — алгоритмы.
    Одна-две — вероятность.
    Одна — интеграл.
    Две-три — что угодно из школьной математики, дискретной математики, матанализа, алгебры, ФКП…

    P.S. Очень хороший приём, который мне помог. Конечно, вам придётся держать скан какого-нибудь справочника или распечатку Википедии (это не возбраняется, но электроника запрещена — впрочем, калькулятора задачи не требуют). Печатайте на одной стороне, вторую — на черновик!
    Ответ написан
    4 комментария
  • Какие название используете для классов в HTML/CSS?

    GoodProject
    @GoodProject
    Верстальщик
    Лови

    Основные
    .wrapper - /*обвертка сайта*/
    .header - /*верхняя часть сайта*/
    .sidebar - /*сайдбар (левая или правая часть сайта)*/
    .content - /*тело сайта (центральная часть)*/
    .footer  - /*нижнаяя часть сайта*/


    Название блока (обвертка)
    .bl 
    .block 
    .box
    .wrap
    .inner
    .container
    .main


    Секции блока
    .head, .header - /*верхняя часть блока например заголовок*/
    .cnt, .content, .body - /*тело блока например текс с картинкой*/
    .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/


    Колонки
    .column, .col - /*колонка*/

    Списки
    .list
    .item


    Позиционные классы
    .top /* элемент сверху */
    .left /* элемент слева float:left */
    .right /* элемент справа float:right */
    .bottom /* элемент внизу */
    .center /* элемент отцвентрирован  margin:0 auto; */
    .fixed - /*фиксированный элемент postion:fixed */


    Переходы
    .next  - /*следующий*/
    .prev  - /*предыдущий*/
    .last  - /*последний*/
    .first - /*первый*/
    .back  - /*назад*/
    .ahead - /*вперед*/


    Чисельные
    .one
    .thwo
    .three
    .four
    .five


    Размеры
    .xs, .tiny   - /*очень маленький*/
    .s,  .small  - /*маленький*/
    .md, .medium - /*средний */
    .lg, .large, .big - /*большой */
    .xl, .extra-large - /*очень большой*/


    Цвета
    .danger  - /*цвет опасности*/
    .default - /*стандартный цвет*/
    .warning, .error - /*цве ошибки*/
    .success - /*цвет успеха (к примеру верно введн код подтвержления)*/
    .primary - /*основной цвет */


    Кнопки
    .button, .btn - /*кнопка*/
    .loading - /*загрузка*/
    .close - /*закрыть*/
    .open  - /*открыть*/
    .touch - /*клик*/
    .edit  - /*редактировать*/
    .more  - /*больше*/
    .remove  - /*удалить*/
    .logout  - /*выход*/
    .select  - /*выбрать*/
    .divider - /*выпадающийся список меню*/
    .caret, .arrow - /*стрелочка*/
    .up - /* Вверх */
    .down - /* Вниз */
    .delete - /* удалить */
    .reply    - /*ответить*/


    Персона
    .profile - /*профиль*/
    .person - /*человек*/
    .ava, .avatar - /*аватарка, картинка*/
    .name - /*имя*/
    .description - /*описание*/
    .address  - /*адресс*/
    .nickname - /*ник*/
    .birthday - /*дата рождения*/
    .sex - /*пол*/
    .author - /* автор */

    Заголовки
    .title - /*заголовок*/
    .short-title - /*скороченный заголовок*/
    .full-title  - /*полный заголовок*/


    Ссылки
    .link - /*ссылка*/

    Текст
    .text, .txt, .paragraph  - /*текст*/
    .info, .information - /*информация*/


    Картинки
    .image, .img - /*картинка*/
    .icon, .ic   - /*иконка*/
    .bg - /*фоновая картинки или цвет*/


    Формы
    .search, .form-search - /*поиск по сайту*/
    .input - /*текстовый элемент*/
    .form  - /*форма*/
    .form-group - /*группа элементов формы*/
    .help-block - /*текст подсказки*/
    .label - /*название элемента формы*/


    Катагории
    .type - /*тип*/
    .cat, .category - /*катигория*/
    .subcat, .subcategory - /*подкатегория*/
    .section    - /*раздел*/
    .subsection - /*подраздел*/


    Видео
    .video
    .play  - /*пуск*/
    .stop  - /*стоп*/
    .pause - /*пауза*/


    Социальные сети
    .social - /* социальные сети */
    .vk   - /*вконтакте*/
    .fb   - /*фейсбук*/
    .twit - /*твиттер*/
    .inst - /*инстаграм */


    Активные классы
    .none     - /*скрытый элемент*/
    .disabled - /*заблокированный*/
    .active, .current   - /*активный */
    .selected - /*выбраный*/
    .visible  - /*видный элемент*/
    .focus    - /*нажатый*/


    Временные классы
    .time  - /*время*/
    .date  - /*дата*/
    .day   - /*день*/
    .month - /*месяц*/
    .year  - /*год*/


    Очистка
    .clear, .clearfix, .clr - /*очистка*/

    Разделители
    .separator, .divide - /*разделитель вертикальный для слов */
    .br, .line - /*разделитель горизонтальный для блоков*/


    Остоньлые названия
    .logo    - /*лого сайта*/
    .new    - /*новинка*/
    .sale   - /*распродажа*/
    .feedback - /*обратная связь*/
    .support - /*помощь */
    .group  - /*группа*/
    .module - /*модуль*/
    .posters - /*пост*/
    .form   - /*форма*/
    .tabs   - /*вкладки*/
    .slider - /*слайдер*/
    .news   - /*новости*/
    .table  - /*таблица*/
    .full   - /*полный*/
    .breadcrumbs - /*Хлебные крошки*/
    .pagination, .pager - /*Нумерация страниц*/
    .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/
    .dropdown - /*выпадающейся меню */
    .comment  - /*комментарий*/
    .subscription - /* Подписка */
    .special - /* особенный элемент */
    .standard - /* стандартный элемент */
    .screens - /* Скрины */
    .rate - /* рейтинг */
    .online - /* онлайн */
    .panel - /* панель */
    .popup - /* попап */
    .version - /* версия */
    .page - /* страница */
    .banners - /* баннер */
    .map - /* Карта */
    .more - /*еще, подробнее*/
    .tags - /* тег */
    .price - /* цена */


    Взято с этого видео.
    Ответ написан
    2 комментария
  • Какая библиотека лучше обеспечит кросс-браузерность?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    https://polyfill.io/v2/docs/ автоматически предоставляет только те полифиллы, которые нужны данном браузеру. Так же можно указать конкретно, какие API нужны. Плюсы: подключил для IE через conditional comments и забыл. Минусы: в IE лишний http-запрос (хотя на этом тормозастере все равно не заметно).
    Ответ написан
    3 комментария
  • Зачем использовать server-side rendering? Какие преимущества у рендеринга на сервере?

    vahe_2000
    @vahe_2000

    кстати очень хороший вопрос


    Использовать SSR, если...
    Тебе нужно с Bing, Yahoo или Baidu,Google.
    У вас уже есть работающее приложение, требующее максимальной производительности, и оно готово заплатить за дополнительные ресурсы сервера.

    Не используйте SSR, если...

    Ресурсы сервера ограничены, возможно, из-за низкого бюджета или невозможности масштабирования.

    SSR это очень круто но в некоторых случаях это имеет недостатки.

    1. Рендеринг стороне сервера помогает seo, но иногда Google может найти ваше содержание без SSR.
    2. SSR обычно повышает производительность вашего приложения, но не всегда.
    3. Это повысит сложность приложении, что означает меньше времени работы с другими функциями и улучшениями.
    SSR улучшает производительность

    После того как браузер загрузит HTML-и CSS, он может отображать визуализированные компоненты пользователю, не дожидаясь загрузки JavaScript или реакции на визуализацию.

    Если файл JavaScript очень велик, это может быть большим улучшением.

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

    SSR снижает производительность

    SSR является больше работы для вашего сервера, так что ваш ответ HTTP займет немного больше времени, чтобы вернуться. Гораздо дольше, если ваши серверы находятся под большой нагрузкой.

    Размер вашего HTML будет увеличена и займет больше времени для загрузки. Для большинства приложений этого должно быть незначительным, но может стать фактором, если ваш REACT компоненты содержат длинные списки или таблицы.

    Другие факторы производительности

    Когда один пользователь загружает несколько страниц на вашем сайте или возвращает часто, ваш JavaScript-файл должен быть кэширован. SSR обеспечит менее прирост производительности в этой ситуации.

    Мы не можем сказать, производительность лучше с SSR или производительность хуже с SSR. В целом ни заявление будет верно сказать что ssr это хорошо


    используйте zeit/now с zeit/next.js
    наверно слышали или пробовали
    Ответ написан
    Комментировать
  • Как работает Frontend вместе с Backend?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Создаются компоненты, которые в свою очередь через api и запрашивают нужные данные с сервера, полученные данные уже раскладываются как вашей душе угодно.

    Т.е. имея компонент todo:
    <template>
    <ul>
      <li v-for="item in list">
        <h3>{{item.title}}</h3>
        <p>{{item.text}}</p>
      </li>
    </ul>
    </template>
    <script>
    export default {
      data(){
        return {
        	list: ''
        }
      },
      computed(){
      
    // Запросим данные с сервера и сохраним наш json в data
        fetch('/api/users') // По этому адресу мы получим у сервера данные о пользователях
          .then((response) => {
          	this.list = response // запишем эти данные в data
          })
          .catch(error => console.error(error))
          
      }
    }
    </script>
    Ответ написан
    Комментировать
  • Какие предметы желательно освоить программисту без технической "вышки"?

    egor_nullptr
    @egor_nullptr
    Дискретная математика, Теория автоматов, Математическая логика, Теория вероятностей и математическая статистика, Теория алгоритмов, Моделирование, Защита компьютерной информации, Микропроцессорные системы, Сети ЭВМ, Операционные системы, Базы данных.
    Ответ написан
    9 комментариев
  • Я прочитал всю документацию SASS на сайте sass-scss.ru. Как научиться эффективно пользоваться всем этим?

    vicodin
    @vicodin
    Имею некоторый опыт
    Вы поймете только в процессе работы, да и никто не будет 100% всех фич использовать в каждом проекте.

    Попишите 1000 раз один и тот же цвет, а потом дизайнер его изменит и вам придётся менять код в 1000 местах - надоест - начнёте использовать переменные.

    Напишите стили на 5000 строк и замучаетесь скроллить туда-сюда - начнёте использовать импорты.

    Замучались писать селекторы по 5 классов глубиной? Начнёте использовать наследование (а потом ещё и БЭМ).

    Надоест писать @media screen and max-width($width-md) {...} - напишите первый миксин $breakpoint-md {...}.

    И Т Д
    Ответ написан
    Комментировать
  • Как вы документируете свой JS код?

    @AnneSmith
    самая ленивая
    генерирую список всех объектов по их id и соответствующего им функционала, очень удобно для отладки, сразу виден список объектов функционала, которые могли бы стать причиной ошибки

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

    или описываю суть функционала, если по названию метода нельзя однозначно его понять
    Ответ написан
    Комментировать
  • Что лучше учить после front-end-a, Node.js или PHP??

    miraage
    @miraage
    Старый прогер
    Я front-end dev, сейчас осваиваю React, очень нравится.

    Что лучше учить после front-end-a, Node.js или PHP??

    Типа уже всё знаете про frontend? Как правильно писать на React? Как настраивать webpack? Когда юзать webpack а когда rollup? Какие babel плагины/пресеты юзать и как их конфигурить? Как архитектуру приложения задать, чтобы потом спать по ночам? Когда надо выносить логику в middleware/saga, а когда в thunk? Как соблюдать SOLID во frontend разработке? Экосистему тоже всю небось освоили? now/Next/SSR/CRA?

    Я вот в web области 6+ лет кручусь, из которых последние 2 на React. И я до сих пор задаюсь некоторыми из этих вопросов. Конечно, есть хорошие рабочие практики, полученные из личного опыта и/или опыта коллег, но эти вопросы возникают до сих пор.

    Тут решайте сами. Либо нормально во frontend разбирайтесь еще прилично, либо забейте и прыгайте на бэк.
    По зарплате - не думаю, что будет большая разница. Один мой друг получает $3000+ (чисто React и ничего более) и всё время получает офферы на более зарплатные вакансии.
    Ответ написан
    7 комментариев