Дима Паутов

custom bind js

https://jsfiddle.net/7enrvym1/

<!-- Для примера -->
<div id="data"></div>

fetch('https://www.cbr.ru/currency_base/daily/')
  .then(response => response.text())
  .then(data => {
    const parser = new DOMParser();
    const pageDOM = parser.parseFromString(data, "text/html");
    const tableData = pageDOM.querySelector('.data');
    
    // Для примера	
    const dataElement = document.getElementById('data');
    dataElement.innerHTML = tableData;

    console.log(tableData)
  });

P.S. вы можете прям щас зайти к ним на сайт, открыть панель разработчика, вкладку консоль и вставить туда js код. Получите в консоли таблицу с валютами.

Для бека суть такая же, только вам придётся использовать свой парсер для DOM. А в остальном суть такая же

querySelectorALL > querySelectorAll

https://jsfiddle.net/rnq1sfg3/

Зависит от компании и её рода деятельности.

Есть веб студии, клипающие сайты.
Есть компании, которые разрабатывают и поддерживают свои продукты\сервисы.

Работа в таких компаниях очень и очень разная.

Веб студии клипают сайты, поэтому там приходится решать в 70-80% случаев типичные и рутинные задачи. Создание проекта, вёрстка, авторизация, регистрация, каталог товаров и т.п.

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

Самые распространенные задачи front-end программиста:

• Отправка форм, фильтры, обратная связь и подобные, авторизация, регистрация и т.п.
  
  
• Работа с api - CRUD, чаще всего это REST API.
  
  
• Обработка и последующее отображение запрашиваемых данных из api
  
  
• Рефакторинг, оптимизации. Чаще всего делаются, если есть лишнее время и реальная нужда, а не рефакторинг ради рефакторинга
  
  
• Покрытие тестами. Как бы это не рекламировалось всеми и вся, делают далеко не все, я в их числе. Во многом считаю бесполезной тратой времени. Но тут моё мнение, оно не обязательно к обсуждению
  
  
• Изучение новых подходов, библиотек, инструментов и их возможное дальнейшее применение. Всё зависит от задач и проектов в целом, а так же самих компаний. Бывают компании, которые не любят программиста сидящего на одном месте. Потому как во многом, разработчики создают и улучшают продукт. Разрабатывая и внедряя различные инструменты, подходы, упрощающие жизнь при разработке или работе с проектами.
  
  
• Оценка входящих задач или новых проектов
  
  
• Болтовня с менеджерами, иногда занимающая от 20-30% рабочего времени, либо просто обсуждение задач и их решений с коллегами.
  

P.S. Не стоит думать, что новомодные фреймворки, SPA сайты применяют все кому не лень. Потому как перейти на такой формат - это титанический труд и обучение как людей, так и менеджеров. А проблем в этом подходе предостаточно. Ещё огромное кол-во компаний которые делают всё по старинке и не хотят переходить на новые тенденции в разработке. Во многом будут правы. Так же, бывает так, что под фронтенд разработчиком, компания понимает человека, который верстает, знает jquery и нужен им, что бы разгребать всякие легаси проекты без документации и без какой либо информации об устройстве проекта. Не забывайте внимательно изучать компанию, в которую хотите устроиться. Узнавайте у них о их стеке технологий, принципах разработки и конкретно ваших обязанностей. Т.к. бывает, что фронтенд разработчик ещё и должен уметь верстать. Тут я согласен, это в его компетенциях и обязанностях, но есть люди, кто с этим не согласен, это их право.

swiper

У него есть как и сетка в несколько строк, так и ползунок.

Демо c scrollbar
Демо с сеткой

Просто объедините их при помощи опции breakpoints
Для десктопа одни настройки, для мобильной другие настройки

Зачем вы мешаете jquery и чистый js?

var span = $('[data-i=i][data-j=j]').children().first();

span.data('one', '')
span.data('two', '')
span.text('');

const a3 = document.querySelector('.a3');
const nado = document.querySelector('.nado');

a3.before(nado)

$( ".product-cat" ).hover(function(){ 
    $( this ).toggleClass( "cat-hover" )
    var link = $( this ).find('.product-text-link'); 
    link.css('color','#f85e22'); 
  });

используйте просто get параметры

<a href="/my-page?prop1=10&prop2=20">кнопка</a>

На нужно странице разместите код:

const getProps = window.location.search;

// Получите строку с гет параметрами, распарсите их, гугл в помощь, далее работаете с ними и что-то делаете

// ./services/api.js
import axios from 'axios';

// Проверим в самом начале, есть ли токен в хранилище
const JWTToken = localStorage.getItem('jwt');

// Создать инстанс axios
const api = axios.create({
  baseURL: `${BASE_URL}/api`;
});

function apiSetHeader (name, value) {
  if (value) {
    api.defaults.headers[name] = value;
  }
};

// Если токен есть, то добавим заголовок к запросам
if (JWTToken) {
  apiSetHeader('Authorization', `Bearer ${JWTToken}`);
}

api.interceptors.request.use(config => {
  // Если пользователь делает запрос и у него нет заголовка с токеном, то...
  if (!config.defaults.headers['Authorization']) {
    // Тут пишем редирект если не авторизован
  }

  return config;
}, error => {
  return Promise.reject(error);
});

export default api;

export apiSetHeader

// ./services/sign-in.js

import api, { apiSetHeader } from './api'

export const authorize = async (username, password) => {
  try {
    const { data } = await api.post('/clients/token/', {
      username,
      password
    });
  
    localStorage.setItem('jwt', data.access);
    apiSetHeader('Authorization', `Bearer ${data.access}`);
  } catch (error) {
    console.log(error);
  }
};

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

Если я ничего не попутал, то так. Писал на коленке

let template = '';

data.forEach(item => {
  template += `<div class="name">${item .name}</div>`;

  let brands = '';

  item.brands.forEach(brand => {
    brands += `${brand .name}, `;
  });

  template += `<div class="brands">${brands}</div>`;
});

$('.category_brands').html(template);

// Дать нужным полям 1 класс
const fields = Array.from(document.querySelectorAll('.data-field'));

fields.forEach(field => {	
	field.value = escape(field.value);
});