• Как узнать номер элемента div внутри div?

    @andand44
    Можно сделать без js, только с помощью стилей, используя псевдоэлементы
    https://jsfiddle.net/oygt1c8s/1/
    Ответ написан
    1 комментарий
  • Как переписать for на map для асинхронного кода?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Именно с map никак не сделать, что бы следующий вызов функции ждал предыдущего, как это происходит в цикле с await, а вот с reduce уже можно:
    const list = [
      'main',
      'main-footer',
      'main-header',
      'main-content',
    ];
    
    list.reduce((p, item) => p.then(() => funcOne(item)), Promise.resolve());
    Ответ написан
    Комментировать
  • Какие книги читать для изучения CSS3/HTML5/JS с нуля?

    Xalon
    @Xalon
    Хочу заметить, что возможности более ранних версий HTML4 и CSS2, были включены в версии HTML5 и CSS3. Хотя и есть некоторые изменения, авторы книг обычно об этом упоминают.
    На первых четырех этапах изучения, необходимо проделывать тоже, что и автор (установка текстового редактора, написание тегов, стилей и тд) и париться о чем-то более сложном не стоит.
    Мой алгоритм изучения, имеет следующий порядок:
    1) Прочесть книгу Мэтью Макдональда "Веб-разработка. Исчерпывающее руководство" 4 издание. По данной книге можно получить общее представление о HTML, CSS, JavaScript и других интересных моментах как, публикация/продвижение/монетизаци сайта, привлечение посетителей и ведение блога.

    2) Посмотреть бесплатные курсы HTML4 и CSS2 Евгения Попова (курсам почти 10 лет, но они все еще актуальны, ибо все что в них рассматривается, используется на практике):
    - курс по HTML
    - курс по CSS

    3) Теперь можно перейти к более детальному рассмотрению HTML5 и CSS3. И начать изучение я рекомендую именно с CSS3, так как большая часть возможностей HTML5 с уклоном на JavaScript. На этом этапе рекомендую книгу Дэвида Макфарланда "Новая большая книга CSS". В сети можно встретить книгу с названием "Большая книга CSS" от того же автора, но это предыдущее издание, нужна именно та, которая идет с припиской "Новая". Кроме основных возможностей CSS, книга познакомит с адаптивной версткой и препроцессором Sass/SCSS.
    В данной книге рассматривается три способа верстки:
    - с использованием float + margin
    - более современный - Flexbox CSS
    - модульная верстка, на примере сетки Skeleton (хотя способы верстки с использованием сетки Bootstrap и СSS Grid в книге не рассматриваются, принцип работы у них одинаков)

    4) Теперь можно переходить к HTML5. К прочтению рекомендую следующие книги:
    - Мэтью Мак-Дональд "HTML5. Недостающее руководство"
    - Шмитт, Симпсон "HTML5. Рецепты программирования"
    Данные книги познакомят не только с изменениями в синтаксисе и семантике HTML5, но с новыми возможностями:
    - формы 2.0
    - добавление HTML5 аудио/видео
    - работа с canvas
    - геолокация
    - добавление в разметку микроданных
    - использование ARIA
    - локальное хранилище (sessionStorage)
    - автономные приложения (appcache)
    - Веб-сокеты (WebSoket)
    - и тд

    5) Теперь у нас есть общее представление о тегах, стилях, текстовых редакторах, о том как это работает и взаимосвязано между собой, что можно, а что нельзя делать. Пора приступать к практике. Нужно сверстать хотя бы 2-3 страницы из готовых макетов. Теперь по порядку, что нужно сделать:
    а) Установить текстовый редактор и настроить его под себя (Notepad++, Sublime Text, Atom, Brackets и тд). На первых этапах подойдет Notepad++, в дальнейшем стоит перейти на что-то более функциональное. Так же рекомендую установить плагин Emmet для Notepad++ и ознакомиться как он работает.
    б) Установить основные браузеры, для тестирования верстки (с IE по начало можно не заморачиваться)
    в) Установить графический редактор, для открытия готовых макетов (Photoshop, Figma, Avocode, Sketch). На первых порах использовать Photoshop.
    г) На первых порах сделать простенькую заготовку для верстки (структуру папок, где будут размещаться стили картинки, скрипты и один файл index.html). В дальнейшем стоит обратить внимание на HTML5 Boilerplate, ну а дальше на Gulp и Webpack
    д) Скачать готовые бесплатные psd-макеты
    г) Сверстать макеты тремя разными способами:
    - float+ margin
    - flexbox
    - bootstrap или CSS Grid
    е) Ну а теперь находим свежий видеоурок на Youtube, где автор верстает тем или иным способом, смотрим и повторяем. В качестве справочников использовать сайты:
    - htmlbook.ru
    - webref.ru
    - caniuse.com

    6) В дальнейшем по мере приобретения опыта, всегда будет хотеться упростить задачу или сделать процесс верстки комфортным, в этом случае нужно смотреть в сторону:
    - gulp, webpack
    - IDE для разработки, н-р, WebStorm
    - препроцессоры HTML (HAML, Pug), препроцессоры CSS (Sass, Less, Stylus)
    - git
    - именование классов CSS
    - среды для тестирования
    - тд

    7) Переходим к JavaScript. Книг конечно много, но я выделю следующие.
    Книги на начальном этапе:
    - Дэвид Макфарланд "JavaScript и jQuery. Исчерпывающее руководство"
    - Фримен Эрик, Робсон Элизабет "Изучаем программирование на JavaScript"
    Книги для углубленного изучения:
    - Онлайн учебник, в том году обновилась информация
    - Дэвид Флэнаган "JavaScript. Подробное руководство"
    - Хавербеке Марейн "Выразительный JavaScript. Современное веб-программирование"

    8) Переходим на практику, как и в случае с HTML и CSS. Как вариант можно добавить динамичности в сверстанные страницы. Написать простенькую игру, н-р, змейка. Или же найти сайт с задачками, необязательно по JavaScript. Как вариант можно воспользоваться сайтом CodeWars

    9) Так же как и в случае с HTML и CSS, по мере приобретения опыта, всегда будет хотеться упростить задачу или сделать процесс верстки/разработки комфортным, в этом случае нужно смотреть в сторону:
    - библиотек (jquery, backbone.js и тд)
    - фреймворков (React, Vue, Angular)
    - Coffeescript, TypeScript
    - средства тестирования (н-р: Mocha JS)
    - средства документирования (н-р: JSDoc)
    - средства проверки кода (н-р: JSLint)
    - и тд
    Ответ написан
    Комментировать
  • Периодически не срабатывает setTimeout - в чём может быть проблема?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    setTimeout то скорей всего работает, а вот то, что происходит внутри функции, скорей всего не всегда работает как ожидается. Простой console.log внутри setTimeout покажет, что она работает.

    Никаких приоритетов у него нет
    Ответ написан
    1 комментарий
  • Периодически не срабатывает setTimeout - в чём может быть проблема?

    twobomb
    @twobomb
    Нет такой функции setTimeOut, есть setTimeout
    P.S. Если только вы не создали свою функцию с таким именем
    Ответ написан
  • Как заменить через hover img на другой img не используя скрипт и бэкраунд?

    AngryYumy
    @AngryYumy
    Заплати фрилансеру чеканой монетой
    Тут несколько вариантов.
    1. Если это img баловался фильтрами
    2. Как ещё делали делаем группировку красной и обычной иконки и меняет позицию внутри картинки.
    3. Не страдаем хернёй делаем svg анимирует fill
    4. Используем шрифтовые иконки и меняем color.
    Ответ написан
    5 комментариев
  • Как обернуть данные из колбэков в массив?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Решение 0xD34F имеет сложность O(n2) из-за использования метода every
    Если это тестовое задание, могут и придраться, так как обычный счетчик позволяет решить со сложностью O(n)
    function getUsersInfo(ids, callback) {
      const {length} = ids;
      const results = Array(length);
      let doneCount = 0;
      ids.forEach((id, i) => {
        getUserInfo(id, user => {
          results[i] = user;
          doneCount++;
          if(doneCount === length) {
            callback(result);
          }
        });
      });
    }

    Ну и замечу, что Promise.all в v8 под капотом использует именно такой подход (разве что подсчет ведут от length к 0):
    https://github.com/v8/v8/blob/master/src/builtins/...
    Ответ написан
    1 комментарий
  • Как выполнять цикл синхронно, если в нем асинхронная функция?

    IDONTSUDO
    @IDONTSUDO
    ЧСВ программистов идет в комплекте с первой IDE.
    for await (let line of lines){
    console.log(lines[line])
    }
    // ES2018

    в ES2018 есть возможность делать асинхронные итерации.
    https://medium.com/@linus2228/javascript-%D1%87%D1...
    Ответ написан
    Комментировать
  • Как создать массив со случайными числами без повторений?

    const array = Array.from({ length: 20 }, (v, i) =>
      Math.floor(Math.random() * (10 - 1) + 1 ));
    const set = new Set(array);
    const result = [...set].slice(0, 5);
    console.log(result);


    или так
    const array = Array.from({ length: 10 }, (v, i) => i)
      .sort((a, b) => 0.5 - Math.random())
      .slice(0, 5);
    console.log(array);
    Ответ написан
    Комментировать
  • Как защитить переменную js?

    delphinpro
    @delphinpro
    frontend developer
    Если вам нужно защитить данные в javascript коде от постороннего вмешательства, то вам не нужно эти данные размещать в javascript коде.
    Ответ написан
    Комментировать
  • Какой курс по javascript лучше?

    Нужен именно курс? По мне так начать можно вполне с бесплатных
    https://learn.javascript.ru/
    книг https://www.ozon.ru/context/detail/id/141703512/
    https://github.com/getify/You-Dont-Know-JS
    а потом браться за курсы.
    Фленеган покрывает не все современные методы, но очень подробный и позволяет "въехать" в базовые вещи, остальное учится при помощи MDN https://developer.mozilla.org/uk/
    Ответ написан
    3 комментария
  • Где найти много задач по Javascript?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Тут много задач на разные сложности https://leetcode.com/ Это если чисто алгоритмические задачи. А так, на https://learn.javascript.ru есть задачки к каждой главе, тоже полезно порешать.
    Еще мне нравится вот этот раздел https://leetcode.com/explore/interview/card/top-in... тут список вопросов по разным темам, которые задают на собеседовании. Но нельзя просто в лоб это решать, нужно иметь алгоритмическую базу.
    Ответ написан
    Комментировать
  • Где найти много задач по Javascript?

    @MasterMike
    www.freecodecamp.org
    Ответ написан
    Комментировать
  • Где найти много задач по Javascript?

    @McBernar
    Codewars, конечно. И тесты и решения и лучшие практики.
    Ответ написан
    Комментировать
  • Стоит ли переходить с var на let и const?

    b0nn1e
    @b0nn1e
    Alcohol & Ruby on Rails
    ИМХО быстрее было бы бы зайти и почитать https://learn.javascript.ru/let-const чем создавать вопрос.
    Ответ написан
    Комментировать
  • Какие шаблоны проектирования js применяются на практике чаще всего?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    какие паттерны применяются чаще всего на практике и где

    Сразу отмечу, что все это чисто мое имхо, которое может не совпадать с мнением окружающих. В контексте фронтенда обычно все довольно просто. По моим наблюдениям в среднем сайте могут иметь смысл:
    1. Модули (делим код на независимые части)
    2. Фабрики (для компонентов интерфейса)
    3. Синглтоны (для хранилищ, точек сбора полифиллов / утилит и.т.д.)
    4. Адаптеры (для зависимостей и полифилов, которые могут измениться / выпилиться)
    5. Наблюдатели (для сбора происходящих событий в одном месте)
    6. Хранители (для сохранения действий пользователя и "Ctrl-Z")
    7. Стратегии (если действуем в зависимости от прилетевших данных)

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

    Важно понимать, что паттерны проектирования - это просто хорошие идеи по поводу того, как организовать большой объем кода в той или иной ситуации. Это не "изучи тайное знание, запомни, и делай так всегда", не "используй паттерны, потому что великие их используют", это скорее "если не уверен как организовать код, возьми готовую идею, она вроде работает". Если вы будете просто решать задачи, то через N лет практики вы сами их все "изобретете", только не будете знать, что у них есть названия. Эффективно будет организовать себе заметку о том, какие из этих идей для чего примерно применяют, а потом, в процессе работы, в нее подглядывать, если встал вопрос "как организовать этот код".
    Ответ написан
    7 комментариев
  • Какую выбрать книгу для изучения JavaScript?

    trofProg
    @trofProg
    Fullstack developer (Typescript / Python)
    Очень советую секреты JavaScript ninja Джон Резиг. Второе издание. Совсем не устаревшее, а наоборот рассматриваются как фундаментальные основы так и современные практики. Охватывает все аспекты языка
    Ответ написан
    3 комментария
  • Какую выбрать книгу для изучения JavaScript?

    @yestodev
    Дам совет от себя, как новичка от мира JS.
    Могу посоветовать не книги, а скорее решение математических задач. :)
    Прям берем любой вопрос, от простого до сложного и решаем, желательно разными методами:
    Сортировки, факториалы, площади, матрицы, что угодно, в порядке усложнения.

    Т.е. нужно сперва заставить себя мыслить на языке (тут очень неплохо подходит такое объяснение: ты хорошо знаешь иностранный язык, когда ты мыслишь на этом языке непроизвольно) и как можно больше писать, обращать внимание на суть написанного, а не искать "а где же тут { закрывается".
    Брать хорошие и интересные решения других людей и разбирать их, научиться читать код и вникать в то, что он означает.

    И самое главное ни в коем случае не читать книг по типу "построй свой отзывчивый сайт", "как создать интернет-магазин" и прочий мусор от мира компьютерной литературы. Уметь программировать !== знанию отдельных инструментов одного конкретного языка.

    Ставим себе задачу: я хочу сделать так, чтобы весь текст на страничке после "." разбивался на абзацы. Пытаемся решить самостоятельно, гуглим, вникаем в решение других (если не получилось самому), пытаемся изменить задачу и решить самостоятельно. Решили задачу - едем дальше, ставим новую.
    Этот процесс даст очень много понимания в начале пути, а потом можно уже и Флэнаганов читать, подправлять знания в правильное русло.

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

    А, ну и побольше математики, правда. Решение математических задач обусловлено строгой логикой, это очень помогает! Вспоминаем (например) как искать площадь треугольника сперва на бумаге, потом пишем это в IDE.
    Это более долгий путь, но как по мне, так он более основательный.
    Ответ написан
    3 комментария
  • Какой слайдер-карусель вы используете с Vue.js?

    kulakoff
    @kulakoff Куратор тега Vue.js
    Vue.js developing
    Вот эта штука может очень много: https://github.com/surmon-china/vue-awesome-swiper
    Ответ написан
    4 комментария