• Как вывести результат "на лету"?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Вместо click'а у кнопки обрабатывайте input у формы:

    - document.querySelector('.calculate').addEventListener('click', function () {
    + document.querySelector('form').addEventListener('input', function () {
    Ответ написан
    6 комментариев
  • Как в массиве выделить каждые n элементов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    для краткости на группы по 3
    new Array(15).fill('').map((_, i) => i / 3 & 1 ? '+' : '-').join(',')
    "-,-,-,+,+,+,-,-,-,+,+,+,-,-,-"


    Или раскидать по под-массивам:
    new Array(15).fill().map((_, i) => i)
      .reduce((acc, c, i) => {
        if (i % 3 === 0) acc.push([]);
        acc[acc.length - 1].push(c);
        return acc;
     }, []);
    // "[[0,1,2],[3,4,5],[6,7,8],[9,10,11],[12,13,14]]"
    Ответ написан
    1 комментарий
  • Оцените пожалуйста верстку?

    legengy_zeldy
    @legengy_zeldy
    Junior Frontend developer
    1) Лого вставлено через PNG, должно быть SVG! Сразу в глаза бросается!
    2) Картинку в поиске лучше через псевдоэлемент вставлять
    3) Инпут надо в form оборачивать (в хэдэре)
    4) Profile и repositories - почему в обернуты? Секция - это весь этот экран в совокупности, это просто divы должны быть
    5) ссылка gaearon, структура - h3 внутри ссылки, это что вообще?)
    6) Картинки фолловеров - псевдоэлементами должны быть вставлены (ИМХО)
    7) "249" после заголовка Repositories - тоже должен быть псевдоэлемент (или спан хотя бы, точно не часть заголовка)
    8) с ссылками в правом блоке тоже самое - почему теги h внутри ссылки? ЗАЧЕМ?))
    9) В карточках нижняя надпись - не заголовок, либо просто внутри div текст, либо span
    10) В pagination опять заголовком вставлено, это не заголовок, он не объявляет важный информационный блок! И опять же разбиение на spanы должно быть, чтобы с backend'а данные подставлять удобно
    Ответ написан
    Комментировать
  • Как осуществить перезапись useState([]) с 1 раза?

    @dm1sh
    В React операция setstate не синхронная, то есть, результат применения setCards будет виден только при перерендере компонента. Если вы хотите получить изменённый массив cards, то вам нужно либо создать временную переменную для этих данных и потом передать её в setCards:
    const computedCards = // выражение, которое вы кладёте в setCatds
    setCards (computedCards);
     console.log(computedCards);

    Либо сделать чуть хитрее - следить за измением cards с помощью useEffect хука:
    React.useEffect(() => {
      console.log(cards);
    }, [cards]);
    Ответ написан
    1 комментарий
  • Можете поверхностно сказать что делает код?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Это обфусцированный код. Из-за этого нельзя поверхностно взглянуть на код и сказать, что он делает. Только после анализа можно будет сказать. Автор кода хочет, чтобы даже анализ давался сложно, чтобы аналитик потратил много времени и в идеале - отказался от идеи вскрывать этот код.

    Поэтому ответ на вопрос: не можем.

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

    P.S. "Буквально минутку внимания" - риторика на уровне школьника, либо хитрого провокатора. И то, и другое - не в вашу пользу.
    Ответ написан
    Комментировать
  • Почему скрипт работает некорректно?

    Anopeng
    @Anopeng
    Веб-программист, учу фронт и бек

    Еще у меня медленный интернет, это же ни как не влияет?

    Да хоть отключи его, будет вообще пофиг. Скрипт выполняется на стороне клиента, он не использует интернет.
    Что касательно вопроса, то скорее всего, класс burger каждый раз либо добавляется, либо удаляется. По этому и работает через раз. Да и проще будет слушать непосредственно тот элемент с классом burger, а не весь документ
    Ответ написан
    2 комментария
  • Как остановить анимацию?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    @keyframes up {
      0% {
        transform: translateY(1000px);
      }
      50% {
        transform: translateY(0);
      }
      80% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(1000px);
      }
    }


    Только % пересчитайте как вам нужно. Я же без понятия сколько анимация и на сколько задержка.
    Ответ написан
    2 комментария
  • Можно ли сделать сетку из абсолюта?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Вам поможет display:contents для лишних оберток. И потом просто order.

    Или просто удалить лишние обертки в коде, что еще разумнее.
    Ответ написан
    1 комментарий
  • Как сделать пагинацию?

    @Ne7Le4Der
    Если вы используете Material UI, то у компонента Pagination есть свойство onChange (https://mui.com/material-ui/react-pagination/). Поставив обработчик на этот метод, вы можете узнать какая сейчас выбрана страница, и вам не нужно обрабатывать клики на страницы или на стрелочки, вам просто отдастся новая страница при изменении. Пример из той же доки (https://codesandbox.io/s/dzqzh1?file=/demo.js)
    Ответ написан
    1 комментарий
  • Как получить подстроку в данном случае?

    0xD34F
    @0xD34F Куратор тега JavaScript
    str.match(/\]\s*(.+?)\s*#/)?.[1] ?? '< unknown >'
    Ответ написан
    Комментировать
  • Как работать со слушателями событий в реакт?

    @n1ksON
    мидл
    Создаете компонент Header и выносите туда инпут и кнопку. Header импортируете в App. В Header с помощью props передаете функцию findUser и setInputValue.
    App.js
    function App() {
      const [userNickName, setUserNickName] = useState('');
      const [userProfile, setUserProfile] = useState('')
      const [repos, setRepos] = useState([])
      const [inputValue, setinputValue] = useState('')
      
      
      async function findUser() {
        setUserNickName(inputValue);
        let RespUserRepos = await (await axios.get('https://api.github.com/users/'+inputValue+'/repos')).data;
        let RespUser = await (await axios.get('https://api.github.com/users/'+inputValue)).data;
        setRepos(RespUserRepos);
        setUserProfile(RespUser)
      }
      
      return (
        <div>
          <Header findUser={findUser} setInputValue={setInputValue} />
          <Main>
            <Profile
              avatar={userProfile.avatar_url}
              name={userProfile.name}
              userNamel={userProfile.userName}
              followers={userProfile.followers}
              following={userProfile.following}
            />
            <ReposInfo title = {'Repositories'} reposNumber = {repos.length}>
            {repos.map((card) => <Card name={card.name} description={card.description} key = {card.name}/>)}
            </ReposInfo>
          </Main>
        </div>
      );      
    }

    Header.js
    const Header = ({ findUser, setInputValue }) => {
      return (
        <header>
          <button onClick={() => findUser()}>click me</button>
          <input  onChange={event => setinputValue(event.target.value)} />
        </header>
      )
    }
    Ответ написан
    1 комментарий
  • Как заставить работать код 2 и более раза?

    ThunderCat
    @ThunderCat Куратор тега JavaScript
    {PHP, MySql, HTML, JS, CSS} developer
    И мне нужно чтобы после выполнения кода стили просто убирались но монета оставалась на том же месте (звучит как то не понятно но я не знаю как обеснить)
    Если стили убрать, логично что монета на том же месте не останется.

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

    Во первых - сейчас второе использование кода работает не так? или не работает? Во вторых - что мешает ему работать как надо?
    Ответ написан
    6 комментариев
  • Как с помощью планировщика задач запустить js файл?

    @eshran
    const scheduler = new ToadScheduler()
    const SSH = require('child_proccess')
    
    const task = new Task('simple task', () => {
    try{ var msg = SSH.execSync('node main.js') } catch (err){ console.error(err.toString()) }
    })
    
    const job = new SimpleIntervalJob({ seconds: 120, }, task)
    
    scheduler.addSimpleIntervalJob(job)


    Если я правильно вас понял, то вот такое решение.
    Ответ написан
    Комментировать
  • Какие курсы по реакту можете посоветовать?

    @Artyom02
    Начинающий программист
    В добавок ко всему сказанному могу посоветовать после прохождения теории, повторить вот этот курс: https://www.youtube.com/watch?v=bziVFvq8cLQ&list=P.... Поможет расставить все знания по полочкам и познакомиться с некоторыми фишками react. Для новичка самое то
    Ответ написан
    Комментировать
  • Какие курсы по реакту можете посоветовать?

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

    html/css: стартануть можно отсюда, потом догоняться здесь и здесь
    JS: https://learn.javascript.ru/. Учебник без ереси.
    Ну и конечно https://developer.mozilla.org/ru/docs/Learn - там много чего есть. Это всё справочники.
    TS: https://www.typescriptlang.org/docs/. Там же есть playground.

    Разобравшись со всеми этими штуками и с тем как их применять, можно взяться за Реакт и без проблем освоить официальную документацию. Потом - стейтманагеры: redux, mobx. Потом - nextjs/gatsby. Вот примерно так.
    Ответ написан
    Комментировать
  • Какие курсы по реакту можете посоветовать?

    @romaro
    TS не является обязательным компонентом React-проекта, но с ним удобнее, т.к. можно типизировать пропсы и другие интерфейсы. Это снижает кол-во ошибок и дает более информативные подсказки в IDE.

    Что касается связки React+Redux, то mobx не менее перспективная библиотека.

    И если вы начинаете изучение React одновременно с JS, то я бы посоветовал на некоторое время отложить React и попробовать создавать компоненты на чистом JS. На мой взгляд, такой подход позволяет глубже понять саму суть подобных фреймворков и не использовать их там, где они не нужны.
    Ответ написан
    1 комментарий
  • Как узнать индекс гласных в слове?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Array.from(word.matchAll(/[aeiouy]/gi), n => n.index)

    или

    [...word.toLowerCase()].reduce((acc, n, i) => ('aeiouy'.includes(n) && acc.push(i), acc), [])

    или

    Object.entries(word).filter(n => 'AaEeIiOoUuYy'.indexOf(n[1]) !== -1).map(n => +n[0])


    Что до говнокода из вопроса...

    let letters = 'АаЕеIiOoUuYy'  //Создал переменную со строкой с гласными

    Почему символы из разных алфавитов? - первые четыре кириллические.

    if (arg1[i] == letters[j]) {  //Если элемент слова равен элементу строки с согласными
      newArr.push(arg1[i].indexOf())  //То пушу в массив индексы гласных этого слова
    }

    Какой ещё на хрен indexOf (кстати, вы не знаете, что он делает, откройте документацию и разберитесь)? Вот же бред. Что является индексом проверяемого символа? Строчкой выше ещё помнили, а когда до push'а дело дошло, уже забыли? Просто .push(i).

    Не ошибка, но упомянуть косячок стоит - после найденного совпадения продолжать крутить внутренний цикл смысла нет. Гуглите, как прервать цикл.
    Ответ написан
    Комментировать
  • Где практиковаться после прочтения книг по JavaScript?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    На своём компьютере.
    Ответ написан
    Комментировать
  • На что установить сервер?

    @rPman
    В конечном счете все решает стоимость решений

    Выделенный сервер (dedicated server upd или bare metal) - это буквально физический сервер, мощности которого принадлежат тебе и твоим программам
    Виртуальный сервер (virtual private server) - это когда физический сервер делят на части и продают по отдельности, что сильно дешевле, и удобнее хостеру (он может перекидывать виртуальные машины между физическими, оптимизируя нагрузку), мало того он может оверселить, продавая и обещая больше мощности чем доступно в среднем, надеясь что пиковую нагрузку сервис клиента будет давать редко а остальное время она будет низкой (так обычно и бывает), такие машины обычно самые дешевые (когда видишь предолжения ниже ~30$ это оно самое)

    Кстати нормальная практика даже для dedicated server жесткие диски заменять на NAS например iscsi, а реальный диск предлагать как опцию. Сетевые накопители обычно медленней но сильно дешевле для хостера, так как их так же можно делить, снапшотить (например за их счет делать дешевый бакап) и оверселить (а главное централизованное обслуживание, так как диски чаще всего выходят из строя).

    Благодаря возможностям приложений виртуальных серверов, у пользователей есть очень гибкие возможности по изменению конфигураций машин (cloud), практически 'на лету', в отличии от выделенных серверов, где установка дополнительной памяти или жесткого диска означает буквально физический доступ к серверу. А некоторые хостеры предоставляют еще и средства по автоматизации развертывания виртуальных машины, т.е. сервис сам автоматически от нагрузки может докупать нужные мощности и ресурсы по требованию, и освобождать их когда они не нужны, оптимизируя траты.

    Но нужно понимать что фишки гибкой конфигурации даются не бесплатно и если у тебя постоянная нагрузка, VPS оказываются дороже dedicated server. Правильный подход кроется в комбинировании.

    И еще одна услуга у хостеров - предоставление не сервера а услуги - доступа к програмному обеспечению по какому то внутреннему алгоритму тарификации (Software As A Service). Например можно приобрести услугу http сервера (или к примеру хостинг nodejs бакэнда, отдельно базы данных, сервиса бакапов и т.п., такие точно есть), без покупки самой машины, с тарификацией по запросам, трафику или по внутренним cpu тикам, при этом пользователю не важно, сколько там в реальности задействовано серверов, хостер будет обеспечивать заказанный трафик с обещанной скоростью, только плати. Такие крупные провайдеры как гугл или амазон могут встраивать в свои прайсы на такие сервисы ловушки, не изучив и не подготовившись как следует к которым можно попасть на значительное повышение стоимости, к тому же часто такой доступ еще и привязывает клиента к конкретному провайдеру, так сильно что когда придет известность и нагрузка, может не получиться легко сменить хостера на более оптимальный.
    Ответ написан
    Комментировать