• Как доработать скрипт, чтобы кликал на первый доступный input?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('#form [type="radio"]:enabled').eq(0).click();
    Ответ написан
    Комментировать
  • В чем разница между gulp и gulp-cli?

    Zoxon
    @Zoxon
    Веб-разработчик
    Раньше была одна версия gulp которую нужно было устанавливать глобально и локально.

    Локальная версия используется в gulpfile.js глобальная для запуска в консоле.
    В принципе это работает и сейчас.

    Но начиная с 4 версии gulp (которая еще не вышла но ее все используют) нужно устанавливать gulp-cli.

    Документация рекомендует устанавливать gulp-cli.

    А так же перед этим удалить глобальную версию gulp
    npm rm --global gulp

    Разделение же произошло из-за проблем совместимости глобальной и локальной версии. Так что следуйте документации.
    Ответ написан
    Комментировать
  • Как (и возможно ли) дотянуться до Junior JavaScript Developer в кратчайшие сроки?

    iCoderXXI
    @iCoderXXI
    React.JS/FrontEnd engineer
    Во первых: совершенству нет предела.
    Во вторых: невозможно объять необъятное и впихнуть невпихуемое.
    В третьих: как ты не крутись, а технологии развиваются быстрее, поэтому отставание неминуемо, как следствие приходится всегда чем-то жертвовать ради чего-то более важного.

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

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

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

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

    Меня на программирование пропёрло весьма рано, лет в 14-15. Я ощущал собственное безграничное могущество, послушная железяка выполняла любое моё повеление, любой мой каприз, при условии, что он правильно сформулирован. Если железка не делала что нужно, или делала что не нужно, то это всегда была моя вина, это значило что я прокосячился. Подобное осознание настигло меня весьма скоропалительно, после чего мозг начал усиленно дисциплинироваться, и количество лютых фейлов пошло на убыль.

    Коммерческая разработка - это, примерно, от 70% времени/сил на дебаг и фиксы, потому что мало где процессы поставлены грамотно. По хорошему до сего дня (а мне под 40) я только одну команду видел, где процессы прям вообще очень хорошо поставлены и мне посчастливилось какое-то время с ними поработать. За эти несколько месяцев я подрос на целую голову. Самостоятельно достичь сходных результатов было бы весьма затруднительно.

    Сам я сменил стек совсем недавно, начал в конце 15 года, и процесс продолжается до сих пор. Сменил я по одной простой причине - во всех моих прежних проектах большая часть логики с бэка уехала на фронт, и прекраснейший jQuery перестал справляться чуть более чем полностью. Он, по прежнему, хорош, но задачи, которые приходится решать, требуют совершенно других подходов. Для себя я выбрал React, но в целом на рынке имеются альтернативы. По моим данным очень большим спросом пользуется Angular 2+.

    Когда говорят о фронтенд разработке, постоянно говорят о технологиях, стеке, но почти никто не упоминает, что не стеком единым... Существенная часть разработки - это, для начала, понять задачу и построить у себя в голове модель. Заказчики бывают разные, от очень толковых, до очень безтолковых. Соотношение первых ко вторым примерно 1% и всё остальное... Т.е. в большинстве случаев тебе скажут минимум, своеобразно, плюс ты это поймёшь по своему. Потом, по ходу пьесы, в самые неподходящие моменты, начнут всплывать подробности, которые: забыли упомянуть; ну это же очевидно, ты же профи; мы сами не знали, это только выяснилось; ну это же мелочи, мы думаем тебе это будет не сложно; а ты не спрашивал; и т.п....

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

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

    Если ты попадешь в команду, где люди будут понимающие, квалифицированные, процессы выстроены, а джуну задачи будут сгружать джунские, то, считай, тебе крупно повезло. Шансов на это примерно 1%. Особенно учитывая, что джуны это обычно студенты лет в районе 20...

    Когда я менял стек, то я тоже был какое-то время 35-летним джуном. С этим ничего не поделать, потому что, внезапно, стек это не просто так, и имеется масса нюансов, которые с наскоку не освоишь. Чтобы все пощупать, попробовать на зубок, понять и осознать требуется время и усилия, иногда много времени и много усилий. Да, весь прежний багаж служит опорой и поддержкой, и там, где настоящий джун будет копаться недели, ты за пару часов по аналогии поймаешь идею и двинешь дальше. Но эти пару часов никто не отменял, а идей которые нужно отловить сотни, если не тысячи...

    Сложнее всего разобраться в архитектуре конкретного проекта, потому что, внезапно, стиль кодирования и конвенции чрезвычайно важны, если ты не один работаешь над проектом от и до. Если до тебя, вместе с тобой или после тебя кто-то будет работать над проектом, дорабатывать, поддерживать это дело, исправлять баги, в конце концов (а они бывают всегда и везде), то очень желательно, чтобы любой разработчик мог в кратчайшие сроки, оперативно и легко вникнуть, разобраться и понять, что там к чему, откуда, куда, зачем и почему. Чаще всего у проектов с этим проблемы, поэтому накладные расходы множатся, а эффект сходит на нет, усугубляясь текучкой кадров.

    Даже если тебе попадается практически идеальный проект, внезапно оказывается, что твоя оперативная память это 5-7+-2 объекта, а удерживать в голове одновременно нужно сотни...

    Зачем я все это рассказываю? Затем, что это реальность, которая для джунов не делает исключений.

    Термин "фигак-фигак и в продакшен" встречается повсеместно, т.к. ресурсы (деньги, время, кадры) практически всегда весьма жестко ограничены и ничего ты с этим не поделаешь.

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

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

    Теперь относительно того что делать - если в бэкграунде нет сильных скиллов по алгоритмике и структурам данных (олимпиады по программированию, универский курс информатики), то прям очень сильно рекомендую прокачать. Будучи наставником на нескольких курсах фронтенда я постоянно встречают студентов, которые "вроде бы" знают язык, но затрудняются скомпоновать пару циклов с условиями, вот буквально просто виснут на неопределенное время, причем без результата. Лично я рекомендую кодварс. Своих студентов я прокачиваю именно там. Достаточно прорешать 30-40 задачек, чтобы базовые скиллы ушли на уровень рефлексов и перестали парить мозг. Правда желательно решать это все с наставником.

    Косвенный бонус тут будет в том, что ты привыкнешь решать задачи на JavaScript. Я когда менял стек, поначалу мыслил на PHP, и подобный финт на кодварс позволил мне переформатировать мышление на JS. Вот мой профиль на кодварс как пруф: https://www.codewars.com/users/iCoderXXI

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

    Понять надо настолько глубоко, чтобы легко и просто, с юморком, рассказывать это любой первой встречной бабушке, да так, чтобы та всё поняла... Это вот прям залог успеха в JS, потому что все остальное держится на этих двух китах. В ютубе имеется курс Зоракса (Zorax) и JavaScript Weird Parts, оба про то же самое, первый на русском, второй на инглише. Кантор, безусловно, крут, но эти двое объясняют попроще и понятнее (имхо).

    После этого прокачиваемся в использовании встроенных методов JS, таких как map, reduce, includes, replace и пр. (на том же кодварс)

    После этого нужно прокачаться в ES6+, стрелочные функции, let/const, деструктурирование, рест оператор, классы, промисы, генераторы, async/await, декораторы - без этих продвинутых штук в современных фреймворках ловить нечего.

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

    Потом уже заостряемся на API форм, DOM, AJAX (fetch/axios), вебсокетах, Localstorage и пр.

    И вот только теперь можно переключаться на фреймворки. Проще всего освоить Vue (по слухам), наибольшим спросом пользуются React и Angular, для общего развития так же неплохо бы немного послушать про Ember.JS.

    React только на первый взгляд выглядит простым, на самом деле это только view-библиотека, а в любом нормальном SPA есть много чего еще кроме view, поэтому React всегда идет в компании Redux, Router, и еще целой толпы всего, что тоже придется осваивать, не только с точки зрения API, но и с точки зрения философии (а нахрена оно вообще сдалось?)

    Перед походами на собесы очень желательно иметь портфолио из нескольких готовых проектов, вылизанных стилистически.

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

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

    Еще вроде большие компании вроде Яндекса устраивают летнее обучение, с последующим трудоустройством лучших кандидатов, но это не точно.

    Оптимистичный прогноз - 6-12 месяцев плотного фигачинга и ты в тренде.
    Ответ написан
    7 комментариев
  • За что отвечает этот код?

    densisss
    @densisss
    Веб-разработчик.
    При клике на анкорную ссылку будет происходит плавный скролинг до целевого блока
    Ответ написан
    Комментировать
  • Как правильно реализовать подписку в паттерне Observer?

    yurakostin
    @yurakostin
    Front-end developer
    Фактически есть тот, кто издаёт новости и тот, кто хочет их получать.

    Таким образом есть две сущности: Издатель и Подписчик.

    Издатель извещает о том, что что-то произошло.
    Подписчик реагирует на это происшествие.

    Так у нас получается что-то такое:

    Подписчик
    methods:
    + отреагировать на событие

    Издатель
    props:
    - подписчики

    methods:
    - оповестить подписчиков
    + добавить подписчика
    + удалить подписчика
    + издать новость

    Если уйти от псевдокода, то получится следующее:

    class Publisher {
        constructor() {
            this._subscribers = [];
            this._state = {};
        }
    
         get state() {
            return this._state;
        }
    
        set state(value) {
            this._state = Object.assign({}, this._state, value);
            // Неявный вызов, можно, наверное, сделать лучше
            this._notifySubscribers();
        }
    
        _notifySubscribers() {
            this._subscribers.forEach((subscriber) => subscriber.notify(this._state))
        }
    
        addSubscriber(subscriber) {
            this._subscribers.push(subscriber);
        }
    }
    
    class Subscriber {
        constructor(name) {
            this.name = name;
        }
    
        notify(state) {
            console.log(`${this.name}: i received a new data: `, state);
            console.log('\n\n')
        }
    }
    
    const publisher = new Publisher();
    const subscriber1 = new Subscriber('John');
    const subscriber2 = new Subscriber('Jane');
    const subscriber3 = new Subscriber('Mary');
    
    publisher.addSubscriber(subscriber1);
    publisher.state = {a: 1};
    
    publisher.addSubscriber(subscriber2);
    publisher.state = {b: 2};
    
    publisher.addSubscriber(subscriber3);
    publisher.state = {c: 3};


    Код рабочий.

    Надеюсь, что я вас нигде не обманул и всё объяснил правильно.
    Ответ написан
    Комментировать
  • Что такое такое rest api?

    @eandr_67
    web-программист (*AMP, Go, JavaScript, вёрстка).
    API социальных сетей - это вполне типичные примеры реализации REST API.

    REST (RESTful) - это общие принципы организации взаимодействия приложения/сайта с сервером посредством протокола HTTP. Особенность REST в том, что сервер не запоминает состояние пользователя между запросами - в каждом запросе передаётся информация, идентифицирующая пользователя (например, token, полученный через OAuth-авторизацию) и все параметры, необходимые для выполнения операции.

    Всё взаимодействие с сервером сводится к 4 операциям (4 - это необходимый и достаточный минимум, в конкретной реализации типов операций может быть больше):
    1. получение данных с сервера (обычно в формате JSON, или XML)
    2. добавление новых данных на сервер
    3. модификация существующих данных на сервере
    4. удаление данных на сервере

    Операция получения данных не может приводить к изменению состояния сервера.

    Для каждого типа операции используется свой метод HTTP-запроса:
    1. получение - GET
    2. добавление - POST
    3. модификация - PUT
    4. удаление - DELETE

    Т.е. :

    GET-запрос /rest/users - получение информации о всех пользователях
    GET-запрос /rest/users/125 - получение информации о пользователе с id=125
    POST-запрос /rest/users - добавление нового пользователя
    PUT-запрос /rest/users/125 - изменение информации о пользователе с id=125
    DELETE-запрос /rest/users/125 - удаление пользователя с id=125
    Ответ написан
    20 комментариев
  • Как спарсить stylus в JSON?

    0xD34F
    @0xD34F Куратор тега JavaScript
    fetch(filename)
      .then(r => r.text())
      .then(r => r.split('\n').map(n => {
        const [ key, val ] = n.split(' = ');
        return { [key]: val };
      }))
      .then(arr => {
        // ну вот вам ваши объекты
      });

    UPD. Если вдруг в файле есть ещё что-то, кроме строк указанного вами вида, можно получать их с помощью регулярных выражений, надо будет заменить r.split('\n') на r.match(/\$[a-z0-9-]+ = #[0-9a-f]{6}/g), например.
    Ответ написан
    Комментировать
  • Как выводить строку только в определенном формате?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    • \d – одна цифра
    • (\d) – одна цифра, и мы её запомнили, чтобы потом вывести через $1, $2, ... $8
    • \s – один пробельный символ
    • \s? – один пробельный символ, но если его нет - тоже ок
    • \- – один символ дефиса (тоже надо экранировать)
    • \-? – один символ дефиса, если его нет, то и ладно.


    Допуская одиночные пробелы в любом месте где-то между:
    var re = /(\d)\s?(\d)\s?(\d)\s?(\d)\s?\-?\s?(\d)\s?(\d)\s?(\d)\s?(\d)/;
    
    var tests = [
      '1600 1800', // 16:00 - 18:00
      '16001800', // 16:00 - 18:00
      'abc def 16001800 geh', // abc def 16:00 - 18:00 geh
      'zzzz16001800zzz' // zzzz16:00 - 18:00zzz
    ];
    tests.map(e => e.replace(re, '$1$2:$3$4 - $5$6:$7$8'))


    Подводные камни:
    1. про двоеточия в исходном тексте не говорили
    2. заменит любую последовательность из 8 цифр, в т.ч. из номера телефона +7 495 5554321 сделает +74:95 - 55:54321
    3. минус "-" это не короткое "–" или длинное "—" тире, если в исходном тексте будут тире, не заметит.
    Ответ написан
    Комментировать
  • Как из массива чисел сделать объект, где ключами будут имена месяцев, а значениями их номера (элементы исходного массива)?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const months = Array.from({ length: 12 }, (n, i) => {
      return new Date(0, i).toLocaleString('en', { month: 'short' }).toLowerCase();
    });
    
    const newArr = arr.map(({ data, ...item }) => (
      data.forEach((n, i) => item[months[i]] = n),
      item
    ));
    Ответ написан
    1 комментарий
  • Как правильно использовать es6 классы в моём случае?

    const types = [ '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A' ];
    const suits = [ 'diamonds', 'clubs', 'hearts', 'spades' ];
    
    ////////////////////
    
    class Card {
      constructor (type, suit) {
        this.type = type;
        this.suit = suit;
      } 
    }
    
    ////////////////////
    
    class Deck {
    
      constructor () {
        this.cards = [];
    
        for (const type of types) {
          for (const suit of suits) {
            this.cards.push(
              new Card(type, suit)
            );
          }
        }
      }
    
    }
    
    ////////////////////
    
    const cards = new Deck().cards;
    Ответ написан
    Комментировать
  • Почему выполняется условие?

    @kacheleff
    fullstack developer
    метод parent возвращает объект. Попробуйте проверить свойство length

    if ($('a.light-link').parent('li.active').length)
    Ответ написан
  • Как переключаться в пошаговой форме с проверкой заполнения?

    0xD34F
    @0xD34F Куратор тега JavaScript
    При подключении обработчиков клика к кнопкам навигации, сами кнопки вы ищите внутри формы - а их там нет.

    Замените

    form.on("click", ".next", function(event) {

    на

    $(".next").on("click", function(event) {

    Аналогично и с .back.

    Ну или засуньте кнопки в форму.
    Ответ написан
    Комментировать
  • Как исключить элемент из выборки jQuery?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    $(document).click(function(e) {
        var $target = $(e.target);
    
        if ($target.parents('.compact-menu').length === 0) {
          $menuscontainer.hide();
        }
      });
    Ответ написан
    1 комментарий
  • Что нужно иметь и знать в фреймворке React джуну?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Хороший кандидат на должность 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.

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

    Похожий вопрос.
    Ответ написан
    18 комментариев
  • Как сделать рамку, которая будет появляться при наведении из плюсика?

    Hyubert
    @Hyubert
    JS
    В принципе и на css можно, но для плавности лучше svg. Хотя если заморочиться то с js не хуже получиться (плавно и можно контролировать).

    Поиграйтесь с примером, возможно он и станет ответом на ваш вопрос.

    Ответ написан
    1 комментарий
  • Как поменять цвет изображения с помощью фильтра?

    0xD34F
    @0xD34F Куратор тега CSS
    Так:

    img {
      filter: hue-rotate(180deg) saturate(10);
    }

    ??
    Ответ написан
    1 комментарий
  • Как задать свои классы, для дублирующихся блоков?

    0xD34F
    @0xD34F Куратор тега CSS
    Указывайте nth-child и для родительского блока. Типа так.

    UPD. Ну и ещё посмотрите в сторону использования препроцессоров - у вас тут получается много дублирующегося кода, можно же всё сократить.
    Ответ написан
    1 комментарий
  • Как обеспечить интерактивность SVG с промежутками между элементами?

    @lagudal
    Если я правильно понял, первое, что приходит в голову - сектора в svg каждый, которые должны выделяться, в один составной контур, и под этим контуром белую подложку. И 2 этих элемента - составной и под ним - в одну группу с каким то css классом. А этому классу уже зававать поведение, можно через css, или js
    Ответ написан
    Комментировать
  • Зачем нужны prototype если все ключи и методы можно задать в конструкторе?

    @balamyt92
    ; select * from users; --
    Для "наследования" и динамического изменения в процессе исполнения.
    Ответ написан
    Комментировать
  • Как сделать дубликат содержимого одного списка в другой через jquery?

    Пример

    const texts = document.querySelectorAll('.first-ul ul span');
    
    [...document.querySelectorAll('.second-ul ul li')].forEach((n, i) => {
    		n.querySelector('span').innerHTML = texts[i].innerHTML
    })
    Ответ написан
    4 комментария