• Курс по Vue.js с тяжелым проектом?

    @vladdimir
    Верстальщик
    Приветствую!
    Курс не подскажу, но поделюсь опытом.

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

    Дальше. Каждое большое приложение состоит из маленьких приложений. Работая над какой-то частью своего большого приложения, вы пишите или редактируете какой-то модуль, отдельное приложение. Оно может быть (и будет) связано с другими так или иначе. Вам нужно понять с чем оно связано: от кого зависит, кто зависит от него. Далее, понять тип и характер этих связей. Если его убрать, то что сломается и на сколько сильно? Когда вы это поймете, то уже будет гораздо проще понять, что делает этот модуль и как он это делает. Вот просто берете имя компонента и поиском по файлам ищете, потом читаете. Никакой магии.
    Даже если у вас компоненты-спагетти, они ведь состоят из логических блоков. Каждый блок тоже приложение, верно? У него есть связи с другими, он что-то делает, как-то это делает.

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

    @vladdimir
    Верстальщик
    Правильно - очень неопределенное понятие. Если смотреть буквально, то если ваш код работает, он написан правильно. Был бы написан не правильно - не работал бы.

    Если вас интересуют варианты рефакторинга, то можно сделать код более универсальным.
    У вас сейчас все привязано железно привязано к конкретным элементам, захотите, например, сделать тогглер для другого меню и придется опять писать этот код. А это излишне, ведь логика будет повторятся: при клике на кнопку, показать или скрыть какой-то элемент.
    Можете попробовать разделить логику и элементы. Начать можно с того, чтобы передавать в menuToggle элемент аргументом. Либо, сделать меню отдельным независимым компонентом.
    В общем можете переписать код в функциональном стиле или в ООП.

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

    Про цикл уже выше писали, соглашусь: вместо императивного for, мне больше нравится декларативные встроенные методы.
    Ответ написан
    Комментировать
  • Как разрабатываются сложные анимации для web сайтов (с точки зрения дизайна)?

    @vladdimir
    Верстальщик
    Чтобы сделать анимацию, что нужно увидеть, как она работает и получить элементы, из которых она состоит. Так что в идеале: гифка или видео + объекты анимации в виде изображений.
    Иногда, вместо полного видео, хватает и статических изображений трех состояний: исходное, промежуточное и конечное. + описание на пальцах переходов и эффектов. Тут как с дизайнером договоритесь. Если он там нечто эпическое планирует, то лучше увидеть это в динамике.

    На первом сайте. кстати, анимация не канвас, а css.
    Ответ написан
    3 комментария
  • Почему ананимная функция работает, а обычная нет?

    @vladdimir
    Верстальщик
    Потому что вы ее вызываете и у вас в onClick лежит результат ее вызова, а не сама функция.
    $("#mp_button_" + un_id).click(add_mp_data_run());
    Вот так кладите
    $("#mp_button_" + un_id).click(add_mp_data_run);
    Ответ написан
    Комментировать
  • Сколько брать за поддержку сайта на Wordpress?

    @vladdimir
    Верстальщик
    На мой взгляд, самый оптимальный вариант рассчитывать исходя из стоимости вашего часа и в конце периода называть сумму.
    Вопрос тут в том, сколько в час брать за такую задачу. А это уже ваше решение.
    Можно брать одинаково за любой вид работы, будь то верстка лендинга, поддержка ВордПресс или разработка замороченого приложения. С точки зрения программиста это логично - если я могу заработать на более оплачиваемых услугах, то браться за менее сложную работу имеет смысл когда она хорошо оплачивается.
    А вот с точки зрения клиента - не всегда логично) Поэтому, такой подход хорош, когда у вас достаточно работы. Достаточно работы, это когда от части заказов приходится отказываться или переносить сроки.

    Можно гибко менять цену под разные услуги, в зависимости от рынка и собственных компетенций.

    Например, идете на апворк и еще парочку бирж, смотрите сколько берут за задачи по ВП, смотрите сколько хотят платить за те же задачи. На глаз определяете среднее, прибавляете за свою офигенность как профессионала и человека => профит.

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

    @vladdimir
    Верстальщик
    Каждый запрос в сем. ядре по сути своей отражает намерение и цели пользователя. Если вам эта информация не нужна или вы не представляете как ею пользоваться, то и ядро вам не нужно.
    Учитывая, что специфика вашего сайта не известна, то и ответить на ваш вопрос невозможно.

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

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

    @vladdimir
    Верстальщик
    a11yproject.com/posts/navigate-using-just-your-keyboard
    Вот тут близко к вашей теме.
    А как-то двигать курсор напрямую и кода в рамках браузера, нельзя.
    Можно попробовать скрыть настоящий курсор, создать блок-курсор, повесить на страницу слушатели событий и по этим событиям двигать этот блок как настоящий курсор.
    index.html
    <div class="custom-cursor"> </div>


    style.css
    body {
    cursor: none;
    }
    .custom-cursor {
    // стили кастомного курсора
    }


    scripts.js
    class CustomCursor { ... } 
    // реализация поведения кастомного курсора. Должен уметь, наводиться на 
    //другие элементы (hover), кликать и перемещаться по странице.
    Ответ написан
  • Event в function()?

    @vladdimir
    Верстальщик
    Подписываясь на событие, вы вешаете коллбэк. Когда событие срабатывает, в коллбэк передается объект Event с информацией о этом событии. И ev нужен для того, чтобы получить доступ к этому объекту. Его можно назвать и просто e или evt или handmaidsNotes - как хочется, но лучше все таки называть, как принятно, чтобы другим, и вам через пару месяцев, было очевидно, что происходит)

    document.addEventListener('click', doSomething)
    // вывести в консоль все аргументы, переданные в функцию
    function doSomething () { console.log(arguments) }
    
    document.addEventListener('click', doSomethingElse)
    // называем event по другому, чтобы всех запутать
    function doSomethingElse (handmaidsNotes ) { console.log(handmaidsNotes ) }


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

    Если вашей функции-обработчику не нужно работать с информацией и методами объекта event, то можно аргумент не задавать. Если вам нужно что-то узнать (event.target, mouseCoords) или сделать (event.preventDefault() ) с event, то вы его подписываете в коллбэке, чтобы было очевидно к чему вы обращаетесь.
    Ответ написан
    Комментировать
  • Как применить onmouseup к элементу?

    @vladdimir
    Верстальщик
    mouseup, как и mousemove применяйте не к элементу, а к body или родительскому контейнеру вашего слайда.

    mousemove
    Каждое движение мыши над элементом генерирует это событие.

    mouseup
    Кнопка мыши нажата/отпущена над элементом.
    learn.javascript.ru/mouse-events-basics
    Ответ написан
    Комментировать
  • Как работают эти строчки?

    @vladdimir
    Верстальщик
    Консолька все хорошо объясняет:
    5e176bef801f9080234294.jpeg
    В num кладут значение по ключу объекта. Ключом выступает значение из массива на текущей итерации. Каждое новое значение будет undefined (приводится к false в булевых операциях), потому как ключ еще не создан.
    Далее создается ключ в объекте, если ранее не был создан (значение в массиве не повторялось). И ложится туда 1, если ключ только что создан. Если ключ в объекте есть, то к его значению добавляется 1.
    Все.
    Зачем и почему реализовано именно так? Ну хз - вопрос к тому, кто это писал.
    Ответ написан
  • Wow-эффект и веб-дизайнер?

    @vladdimir
    Верстальщик
    Я вижу несколько вариантов, как можно сделать:

    1. Сделать промежуточные варианты состояний. Например, пользователь жмакает на ссылку, кнопка красится в фиолетовый цвет, затем цвет полукругом расходится на всю страницу, затем сходится к кнопке, открывая обновленный контент, и наконец исчезает, а кнопка становится активной.
    Вы можете нарисовать состояния кнопок и к этому добавить 3 состоятия, как расходится цвет.
    Для точности можно прям словами описать.

    2. Посмотреть демки всяких вов решений и скинуть ссылки на них верстальщику, написать где и что подключать.

    3. Работать совместно с верстальщиком над эффектами. - Вы как дизайнер создаете идею и описываете, он помогает осуществить или отказаться, если воплощение слишком затратно. Тут хорошо, когда есть знакомый, с которым уже работали. Можно клиенту предложить полную разработку сайта, с версткой и хостингом. Но это уже меня понесло)

    В любом случае, вам с клиентом нужно это обговаривать, объяснять, договариваться.
    Ответ написан
    1 комментарий
  • Как на js получить предыдущий url, с которого пришел юзер?

    @vladdimir
    Верстальщик
    document.referrer
    Если стоит атрибут, то по идее отдаст пустую строку, так что нет.
    Больше способов не знаю.
    Ответ написан
    Комментировать
  • Для разработки сайта сначала нужен макет?

    @vladdimir
    Верстальщик
    Если речь о фронтенде, то желателен. Сложно предоставить всю информацию описанием. В идеале - макет (или прототип, если дизайн не готов) вместе с техническим заданием. Одно дополняет другое.
    Ответ написан
    Комментировать
  • Как сделать маску для ввода валюты?

    @vladdimir
    Верстальщик
    Для одного только этого можно обойтись и без библиотеки, например так:
    // Функция заменяет число на число с пробелами
    const musk = val => {
        return val
            .toString()
            .split('')
            .map((num, i, arr) => {
              return (arr.length - 1 - i) % 3 === 0 && i !== arr.length - 1
                ? num + ' '
                : num
            })
            .join('')
    }
    //  меняет значение формы на отформатированное значение
    const inpHandler = function() {
      return this.value = musk(this.value)
    }
    
    // вешаем обработчик
    input.addEventListener('input', inpHandler)
    
    //Консольные тесты
    const testValue = {value: 10000, inpHandler: inpHandler}
    console.log(testValue.inpHandler())
    console.log(musk(1000))
    console.log(musk(10000))
    console.log(musk(100000))
    Ответ написан
    Комментировать
  • Почему выводиться 10 раз 10?

    @vladdimir
    Верстальщик
    Таймеры работают асинхронно. Цикл выполняется до того, как срабатывает первый таймер и переменная уже изменена.

    А вот если вызывать таймер через стрелочную функцию:
    ... setTimeout(() => { ...
    то в консоль выведется последовательно 1-10. Почему? Потому как стрелочные функции не имеют собственного контекста выполнения, каждый раз, вызываясь, они ориентируются на контекст блока выше, в данном случае самой функции setTimeout, которая уже выполняется в рамках текущих итераций цикла. То есть, в каждой итерации в момент обращения.
    Стало немного яснее или еще больше запутал?
    Или может я сам неправильно понимаю?))
    Ответ написан
  • Полезно ли долго (и вообще) «велосипедить» в программировании?

    @vladdimir
    Верстальщик
    Библиотеки и фреймворки не только экономят время. Выше уже писали о том, что они дают возможность мыслить на более высоком уровне абстракции. Хочу присоединится к этому мнению и добавить, что фреймворки и библиотеки разрабатывают обычно не на коленке, а на основе паттерном и хороших практик.
    И чтобы использовать эти инструменты хорошо, все равно придется так или иначе с этими практиками и паттернами познакомиться. Чтобы понять, как правильно и эффективно пользоваться инструментом ранее незнакомым, нужно в какой-то мере выйти за рамки собственного привычного мышления, а значит вырасти качественно.
    При велосипедировании, человек остается в рамках привычного мышления, он конечно учится новому, но это уже рост количественный. Больше знаний, но в рамках привычного опыта.

    Нельзя сказать, что одно хорошо, а другое плохо. Можно сказать, что для прокачки навыков полезно делать и то и другое.
    Ответ написан
    Комментировать
  • В каком порядке это учить?

    @vladdimir
    Верстальщик
    Вот если конкретно по вашему списку, довольно просто распутаться, привожу алгоритм.

    1. Вникнуть в определения технологий в общих чертах. Ответить себе на вопросы: что это? для чего это?
    Например, json - это формат представления данных.
    А npm и yarn - менеджеры пакетов. Бабель, вебпак и галп без одного них не установишь, нужно будет хотя бы установить, узнать основы синтаксиса и распространенные команды.
    Учить все-все команды и глубоко залезать в тему можно, но зачем вам это сейчас? Нужно ли вам вот прям сейчас знать, как публиковать собственные пакеты?
    Не думаю. А что нужно?
    Наверное, устанавливать и удалять пакеты. Возможно проверять обновления и обновлять, смотреть список установленных. Итого, 5-10 команд/флагов для первого знакомства хватит с головой.

    И так далее. Судя по форме вопроса, вам сейчас из этого вообще ничего не нужно, потому как создается впечатление что о назначении этих инструментов вы не размышляли. У вас в списке: формат данных, два менеджера пакетов, 2 грубо говоря сборщика, 1 js технология и транскомпилятор.

    Сможете понять, что это за штуки -> станет ясно, для чего они вам могут понадобиться и в каком порядке их изучать.
    Самое очевидное: вы просто не сможете установить вебпак или галп без менеджера пакетов, а значит и изучать их не сможете. А еще там node.js нужен для работы - вот вам еще список расширил)

    Дальше: присоединюсь к мнениям выше - ставьте себе задачу (проект) и решайте ее (делайте проект). Внедрите интересующие инструменты и делайте.
    Без практики научиться не получится. Медитировать над инструментами в отрыве от реальности можно до пенсии и ни к чему не прийти, потому как сам инструмент используется для чего-то, и без этого самого чего-то он абсолютно бесполезен и изучать его бессмысленно.
    Ответ написан
  • Стоит ли переходить с ноута Windows на MacBook?

    @vladdimir
    Верстальщик
    Про проблемы с клавиатурой первый раз слышу. У меня была на ноутах с клавиатурой была только одна проблема: кот решил сладко поспать на открытом ноуте, а когда я пытался его снять, он решил настоять на своем и вцепился когтями в кнопки. В итоге я отодрал кота вместе с несколькими кнопками. Но это не на яблочном) Просто вспомнил к слову.

    Переходить или не переходить, прям как быть или не быть) Возьмите, попробуйте. Первое время, возможно, будет раздражать непривычный интерфейс. А когда привыкнете, о винде будете вспоминать только в кошмарах. Во всяком случае, среди моих знакомых, которые переходили с Винды на Яблоко, ни один не пожалел и не вернулся назад.
    Ответ написан
  • Как сделать линии в перспективе (формула)?

    @vladdimir
    Верстальщик
    На css автоматически не получится.
    Можно вставить картинкой через свойство background-image, нарисовать svg например.
    Можно через канвас нарисовать.
    Ответ написан
    Комментировать