Sergiu Mitu

Рекомендую более актуальный материал!

<button class="addToCart" data-id="001">в массив 1</button>
<button class="addToCart" data-id="002">в массив 2</button>
<button class="addToCart" data-id="003">в массив 3</button>
<button class="addToCart" data-id="004">в массив 4</button>

var cart = {};

function addToCart(articul) {
  cart[articul] = 1;
  console.log(cart);
}

var addBtn = document.getElementsByClassName('addToCart');
[].forEach.call(addBtn, function(element) {
  element.addEventListener('click', function() {
    addToCart(this.getAttribute('data-id'));
  });
});

Уверен, самое короткое выражение !0, а таблица, либо троллинг, либо хак.

Делаете setTimeout после убирания мыши на 0.5 сек, который добавит класс. И если навести мышкой, то этот таймер убивается clearTimeout

'original-540x250.jpg'.split(/-\d*x\d*\./).join('.')

UPD: Как правильно заметил KorniloFF, replace лучше и быстрее

'original-540x250.jpg'.replace(/-\d*x\d*\./, '.')

Возьмите любой css-спиннер повесьте его с бэкдропом в главном компоненте над всем остальным, и показывайте его только когда state.loading === true

В своих экшн-криейторах или сагах, или где вы там делаете фетчинг - в начале запроса устанавливайте loading в true, а в конце в false(при ошибке тоже).

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

Дак сликом и сделайте, просто через 2 слайдера.

При генерации навигационного слайдера генерите на клик по слайду slickGoTo на правый слайдер.

Доброго времени суток.
Отвечая на вопрос.
По количеству заказов, на данный момент, по апворку у заказчиков популярны PHP/Wordpress/Laravel, WP вне конкуренции.
В сторону JS есть много заказов по React/Angular/Node.JS, меньше по Vue.
Если же говорить про то, что необходимо, то начиная с самых низов от WP сейчас никуда не деться, просто навыками HTML/CSS на апворке да и вообще уже никого не удивить.
На JS/React/Node.js заказы выше уровнем, без опыта и хорошего портфолио их брать сложнее чем на том же WP.
Ну и общее.
Про идеальный английский - неправда. Знать его конечно необходимо, но уровня intermediate вполне.
По поводу маленьких ставок и быть первым - тоже, не совсем:
• Во-первых это не всем известная помойка. Да, заказчики бывают разные, но основаная масса желает платить специалисту, не равняйте менталитет заказчика из США с нашим, у него не укладывается, что специалист ставит 5-8$ за час. В среднем, все начинают в диапазоне 12-15$, хотите можете и с 5$ начинать, но лучше сразу привыкать ценить свой труд. И вас ценить будут в ответ. Пример из опыта заказ на установку WP, и темы без кастомизации и прочего ушел за 35$/час, на вопрос почему, заказчик сказал, потому что я вижу что вы сделаете за час, а человек будет за 7$ ставить мне его неделю, может заказчик и не прав, но такой ход мысли у многих. Повторюсь есть и иные случаи, но потом часто можно в Job feed увидеть - "даю апворку последний шанс, чтобы сделать мою работу, предыдущий фрилансер не справился".

• Во вторых, там необходимо ответить в течении определенного времени, обычно окно составляет около 10 минут. Ваш cover letter выстраивается у заказчика релевантно вашим скилам, портфолио, последним выполненым работам, но никак не зависит от того вы ответите первая или десятая.

Ни в коем случае, не при каких обстоятельствах не работайте за отзыв и за очень маленькую ставку, мошенников и сволочей большое количество. Случаев работы за 5$ два месяца - масса. Начиналось все с небольшой правки, и обещаний оставить хороший отзыв, а потом в процессе узнаешь что такое JSS, что такое скрытые отзывы. И так люди работали.
Старайтесь избегать заказчиков из Пакистана, Индии. Русскоязычных старайтесь тоже избегать, вообщем ищите заказы в странах от Германии и западнее.

В любом случае, как раз где-то через 6-8 месяцев обучения, вы уже сами будете отвечать на этот вопрос другим. Удачи вам, Марина!

Вы неправильно настроили панель разработчика. У мобильных телефонов количество физических пикселей больше, чем количество «css-пикселей» в браузере. Разница выражается параметром Device Pixel Ratio (DPR) — это коэффициент умножения, сколько физических пикселей в одном «css-пикселе».

take.ms/v1Ms8

В режиме Responsive у Хрома по-умолчанию DPR=1.0 (у макбука по-умолчанию 2.0, т.к. retina-экран). Вы выставили ширину вьюпорта 540px, но у вашего телефона, скорее всего, DPR = 1.5 и разрешение в браузере соответствует 360px (540 / 1.5 = 360).

Вам надо включить отображение DPR и доработать верстку на малых экранах от 540 до 320px.

Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

0) Запускаю Spotify :-)

1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

3) Запускаю VS Code, открываю нужную папку.

4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в 2х размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
Надеюсь чем-то поможет мой ответ.

1. Окружность большого диаметра - большой div, большой border-radius, тонкий border.
2. Пункты меню расположены абсолютным позиционированием один поверх другого, затем с помощью transform: rotate подвинуты в нужные положения (как в этом примере, только углы меньше).
3. Затемнение сверху и снизу - это линейный градиент поверх всего этого, в центре он прозрачный, по краям - видимо синий.
4. Центральный (активный) элемент меню при попадании в центр изменяется - из точки увеличивается с помощью transform: scale иконка, а вокруг нее делается что-то такое.
5. Соответственно остается прикрутить js-логику: считать углы в зависимости от количества элементов, все это поворачивать (при переходе к новому пункту меню), добавить поддержку клавиатуры (и видимо мышки, чтобы меню проворачивать колесиком) и адаптивность (на маленьких экранах можно всю эту красоту спрятать и оставить пункты меню в столбик).