Destell

JavaScript библиотека Threejs работает через WebGL API.
Импорт моделей : (WebGL) Max to Three.js workflow tips and tricks
stackoverflow.com/questions/7931039/import-model-f...
Можно определить самому через THREE.JSONLoader

const Form = ({ children, ...rest }) => <form {...rest}>{children}</form>;
const Div = ({ children, ...rest }) => <div {...rest}>{children}</div>;

const Card = ({ editable }) => {
  const Container = editable ? Form : Div;
  return <Container>{"Тут ваш контент"}</Container>;
};

ReactDOM.render(<Card />, document.getElementById("root"));
ReactDOM.render(<Card editable />, document.getElementById("root"));

SVG + padding/margin в процентах

Думаю правильнее использовать GeoJSON

Косяков и странностей тут навалом.

Значение max вы перед началом поиска устанавливаете равным максимальному индексу - отлично. А как же min - почему не устанавливаете его равным 0? Забыли? Или думаете что 0 там сам собой появится? Не появится.

Кстати, а зачем min и max класть в data? - вне binarySearchInit они не используются. Пусть будут локальными переменными этого метода.

Значения в массиве являются строками, так что у вас 11 будет меньше, чем 2 (или для вас не существует ничего больше девятки?). Надо сделать числами, замените .push(item) на .push(+item) (или .push(Number(item)), или .push(parseInt(item))). Соответственно, надо сделать числом и search - для этого достаточно добавить соответствующий модификатор v-model.

Сортировка введённых данных - по умолчанию элементы массива сортируются как строки. Заменить .sort() на .sort((a, b) => a - b).

Зачем такие сложности с отдельной кнопкой для получения данных? Сделайте array вычисляемым свойством:

computed: {
  array() {
    return this.info
      .split(';')
      .map(n => parseInt(n))
      .filter(n => !Number.isNaN(n))
      .sort((a, b) => a - b);
  },
},

Да и сам результат поиска тоже может быть вычисляемым свойством.

Так в этом все и дело. vue не притворяется, что он что-то особенное. Он позволяет описывать манипуляцию с данными, беря на себя весь гемор по вводу данных из DOM и выводу результата обратно. Ну и куча плюшек для того же управления классами, анимации (де факто - то же управление классами) чтобы делать из данных "красиво".

При чём тут какая-то связка с php? Как php вообще относится к вёрстке? Если вы там адаптивности боитесь, то, лично моё мнение, вам ещё нужно подтянуть знания и вы себя в оценке переоценили))

Что насчёт самого макета, то я бы сказал, слишком лёгкий. Чё тут делать то? Карту вставить? Подвигать стрелочки при наведении через css? Сделать кнопку с раскрытием меню?

P.S. Я никак не хочу обидеть или оскорбить вас, но я не понимаю, сути вашего вопроса. У вас навыки 70% х 30%, а вы вместо того, что бы начать верстать, пришли сюда с глупым вопросом, а не слишком ли сложно!

Дело в том, что в dev окружении у тебя сначала отрисовывается страница, потом, через js, подгружаются стили. Удали transition, потом на js добавь еще класс, где будет указан transition.

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

вы добавляете index в data-fancybox, а должно быть везде одинаково, тогда они будут в группе

я делал с owl, но принцип тот же.

html отдельного слайда

<div class="item" data-index="2">
                <a href="/data/himg/booking1395_1.jpg" data-fancybox="images-tour"><img
                        class="owl-lazy" width="932" height="619" src=""
                        data-src="/data/himg/booking1395_1.jpg"
                        alt=""></a>
            </div>

с этого нужно data-index (начинаем с 1), что бы искать нужный слайд и data-fancybox что бы работало открытие при переходе по ссылке.

скрипт

var owl = $('.slider'); //слайдер еще без клонов
$links = owl.find('a'); // ссылки. Тут не должно быть клонированных ссылок

/*
    'click.fb-start' нашел полазив в плагине.
    При переходе по ссылке с hash, скрипт находит дата атрибут с названием как в хеш, и тригает на нем это событие
    
    '.item a' для того, что бы клик нормально работал и на клонах. 
*/
owl.on('click.fb-start', '.item a', function (e) {
    e.preventDefault();
    var index = $(this).parent('.item').data('index'); 
    $.fancybox.open($links, {
        arrows: true,
        toolbar: true,
        loop: true,
        buttons: [
            "slideShow",
            "fullScreen",
            "thumbs",
            "close"
        ],
        hash: 'images-tour' // хеш такой как в дата атрибуте
    }, index); // по этому индексу в $links будет найдена ссылка
});

когда делал с owl, ссылки я получал после инициализации карусели через api.
в слик можно получить так

var $links = $(".Modern-Slider").slick('getSlick').$slides.find('a');

Из вопроса не очень понятна задача.
Но, скорее всего, вам просто нужно добавить в ключ адрес страницы: {"/articles/42-your-item": "foo"}
При чтении, соответственно, добавлять этот адрес к ключу.

Как представитель людей, выковыривающих каждый лишний килобайт из билда, могу посоветовать
postcss-normalize и postcss-autoreset
В комбинации с postcss-uncss результат шикарен, особенно если используете всякие css-фреймворки. Первые два помогают забыть о глобальных селекторах вида *{box-sizing: border-box} и сбросе стилей под конкретные браузеры, последний вырезает из билда все неиспользуемые стили.

agragregra.github.io/Brazzers-Carousel

Хороший кандидат на должность Junior React Developer, по моему мнению, должен соответствовать следующему перечню требований:
1. Хорошее знание JavaScript. В React разработке используется ES6 и большинство экспериментальных фич еще не вошедших в стандарт.
2. Хорошее знание HTML и CSS. Кроссбраузерная верстка. Так же, хорошо иметь представление о том, что такое css-in-js.
3. Web APIs. Умение работать с объектной моделью документа(DOM) и все эти XMLHttpRequest, localstorage, cookie, history и прочее.
4. Хорошее знание API React. Вы должны хорошо знать React, знать его возможности, понимать основные концепции и уметь ответить на большинство типовых вопросов. Для этого достаточно хорошо изучить документацию, разобрать пару типовых проектов на github и попрактиковаться. Много полезной информации, приёмов и идей можно подчерпнуть из тематических статей и докладов. Так же, на просторах интернета можно найти подборки типовых вопросов, часто задаваемых на собеседованиях. В англоязычном сегменте их больше.
5. Redux. Уверенное знание API. API библиотеки до боли пост. Знать, что такое промежуточное ПО и зачем оно. Понимать базовые концепции архитектуры Flux. Все это есть в документации и многочисленных курсах.
6. Умение работать с менеджером пакетов npm на базовом уровне.
7. Node.js. Хотя бы уметь написать простейший express/koa сервер, который будет отдавать ваше приложение и статику.
8. Webpack. Базовые знания.
9. Умение работать с git. Хотя бы знать и уметь примерять команды: init, clone, add, commit, push, pull, merge, checkout.
10. Иммутабельность. Четкое понимание зачем это надо. Знание приемов иммутабельного изменения структур данных. Это есть в официальном туториале React.
11. Статическая типизация TypeScrpt/Flow. Для начала хватит самых основ и способности понимать чужой код.
12. Функциональное программирование. Хватит знаний полученных в процессе изучения JavaScript, а так же не помешает знать, что такое каррирование, чистые функции и рекурсия.
13. Базовые концепции ООП. Хватит знаний полученных в рамках изучения JavaScript.
14. Асинхронный код. Понимать как его правильно организовывать. Promise, async/await.
15. Сетевые протоколы передачи данных. Вполне хватит базовых знаний о http/https, о том, что такое заголовки и какие они бывают. Хорошо знать о том, что такое websocket.
16. За плечами должен быть хотя бы один учебный проект на React. Хватит типового тестового задания.
Примеры таких заданий: 1, 2, 3(сайт может быть не доступен на территории РФ, советую отрыть через VPN и посмотреть), 4, 5. Если подобного проекта у вас нет, то будьте готовы, что потенциальный работодатель предложит вам выполнить тестовое задание и только по его результату вас, может быть, пригласят на техническое интервью. Если напишите хорошо, вас скорей всего пригласят.
17. Желателен опыт создания типовых UI элементов. Например, чтобы не вызывало трудностей написать простой кастомный чекбокс. Куча примеров реализаций типовых элементов есть на codepen.

Это не красный минимум знаний и во многих компаниях требования могут быть значительно ниже. Но соответствие вышеперечисленым пунктам будет хорошим аргументом для работодателя остановить свой выбор именно на вашей кандидатуре.

Похожий вопрос.

for (const n of words) {
  string = string.replace(RegExp(`\\b${n}\\b`, 'gi'), '<a href="#">$&</a>');
}

или

const newString = words.reduce((acc, n) => {
  return acc.replace(RegExp(`\\b${n}\\b`, 'gi'), '<a href="#">$&</a>');
}, string);

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

1. Работа с табами
   
2. Работа со значениями
   

border-image