Задать вопрос
sfi0zy

Ivan Bogachev

Creative frontend developer
Ответы пользователя по тегу JavaScript

  • Какие есть ресурсы для обогащения знаний по JavaScript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Интересные задачки, всякие тесты, неожиданные нюансы языка и тд. Короче, всякого рода места на просторах интернета, где можно встретить живое общение, обсуждение и споры, реальные кейсы.

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

  • Чего бы сложного сделать на javascript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Проблема в том, что я никогда не писал большие проекты на несколько сотен тысяч строк, и всё ещё не использовал тесты или написание целой документации под проект. Всё что делал, небольшие библиотеки под тысячу строк.

    Не всегда что-то интересное должно быть большим - например рисовалка аватарок. Маленький скрипт, страшный, но прикольный, людям нравится. Кстати начало ему положил вопрос от xmoonlight , здесь на тостере. В свободное время я еще делаю убийцу бутстрапа (шутка), просто сборник каких-то компонентов и полезных утилит, чтобы по-быстрому клепать простые сайтики да лендинги, правда не знаю, когда его доведу до ума. В такого рода проекте можно и документацию прикрутить и относительно большие объемы кода красиво организовать.
    Ответ написан
    4 комментария
    4 комментария

  • Какой порядок обучения веб-верстке вы посоветуете?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

    HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
    CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
    JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
    Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
    Git, NPM: без комментариев

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

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

    Ну и умение задавать вопросы тоже лишним не будет.
    Ответ написан
    Комментировать
    Комментировать

  • Почему возникает ошибка "Unexpected end of input"?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Взял ваш файл, в котором ошибка, загнал в beautifier, он показал следующее:
    b745471b26cd4e55b5c5463f3702c06c.png
    Иными словами, первый однострочный комментарий сразу вырубает часть кода при превращении его в одну строку. Пользуйтесь нормальной минификацией, при которой удаляются комментарии.
    Ответ написан
    1 комментарий
    1 комментарий

  • Объявление "var" больше не нужно? let наше все?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Да, теперь рекомендуется использовать let везде, где нельзя поиспользовать const. Это удобно. Но не стоит забывать про Babel, а то старым браузерам плевать на наши новые стандарты.
    Ответ написан
    Комментировать
    Комментировать

  • Как освоить функциональное программирование на javascript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    полноценно изучить все принципы и понять как думать в этом ключе?

    (имхо) Лучше взять какой-нибудь простой лисп (Common Lisp например) и пописать недельку на нем что-нибудь для себя. Без разницы какие книжки брать, насколько они будут старые, не обязательно все запоминать или пытаться написать что-то нереально большое. Главное - попробовать и проникнуться общими подходами к делу, которые вы там увидите. А потом взять свой JS и посмотреть на него свежим взглядом.
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно поставить canvas-анимацию на фон сайта?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Имеете в виду particles.js? (чувствую, что да, вы уже задавали сегодня этот вопрос).

    Подскажите, может какие нюансы есть...

    Полезно прочитать инструкцию по использованию.

    P.S.: Описание "не хочет работать" не дает представления о вашей проблеме. Соответственно не ожидайте, что кто-то угадает, что именно у вас не так.
    Ответ написан
    2 комментария
    2 комментария

  • Несколько вопросов о шрифтах и pagespeed insight?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    1. caniuse.com/#search=ttf, caniuse.com/#search=otf.
    2. Я бы склонялся к woff. Ну или woff в сочетании с eot, если нужны старые IE.
    3. Google PageSpeed Insight вообще много на что ругается. Такой уж у него характер. В первую очередь под сжатием обычно понимают удаление всех ненужных символов из шрифта (у вас на сайте редко когда будет больше 1-2 языков, так что и полный набор обычно не нужен).
    4. Стоит ли вообще учитывать эти критерии , на которые ругается PageSpeed Insight? - Нет. Этот тест показывает вам узкие места, на которые стоит обратить внимание, но в первую очередь вы должны смотреть своими глазами. Я видел сайты, которые загружались меньше секунды и при этом имели 30-40 баллов по оценке этого теста, а то и меньше, а видел и такие, что они грузились 8-10 секунд при оценке в 95-100.
    Ответ написан
    1 комментарий
    1 комментарий

  • Из-за чего может лагать легкая анимация css3 на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Используйте transform: translateX + will-change вместо того, чтобы анимировать свойство left при абсолютном позиционировании.
    Ответ написан
    Комментировать
    Комментировать

  • Почему не работает .first в lodash?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    https://lodash.com/docs/4.17.4#head
    Gets the first element of array.
    Aliases: _.first


    В документации написано, что он возвращает первый элемент массива. Ваш вопрос непонятен.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать смену изображения через каждые 5 сек?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    /* There is no JS scripts! */

    На чистом CSS - никак. Просто потому, что CSS не позволяет "чекнуть" input. Вообще на CSS много чего нельзя сделать, я уже как-то раз приводил список аргументов в пользу слайдеров на скриптах.
    Ответ написан
    3 комментария
    3 комментария

  • Почему надо использовать веб - хранилище вместо обычных переменных для передачи данных?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    В основе Веб хранилища лежат два механизма:
    - хранилище сессии (sessionStorage) обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы)
    - локальное хранилище (localStorage) делает тоже самое, но сохраняет данные даже в случае, если переоткрыть браузер.

    https://developer.mozilla.org/ru/docs/Web/API/Web_...
    Очевидно обычные переменные "погибнут" при перезагрузке страницы, не говоря уже о браузере.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделана эта анимация? Библиотека?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Попробуйте VanillaJS. Этот фреймворк просто создан для того, чтобы добавлять и удалять CSS классы. А вообще - такое можно с помощью CSS анимации сделать (без скриптов).
    Ответ написан
    1 комментарий
    1 комментарий

  • Добавить CSS-анимация?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    желательно на css

    Это возможно только если предположить, что лопасти прямые (т.е. целиком находятся в одной плоскости) и поиметь картинку "вид сверху на лопасти". Тогда можно с помощью CSS трансформаций развернуть ее в нужном направлении и крутить сколько влезет с помощью анимации с animation-iteration-count: infinite.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать меню с задержкой при hover (js)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Судя по стилям, вы вообще что-то не то и не туда добавляете. Если хотите решить вопрос с помощью js, для начала уберите все, что сязано с :hover из css. На событие hover будет добавляться отдельный класс "hovered":
    .b-content-block__menu ul li.hovered > .b-content-block__menu__submenu { ... }
.b-content-block__menu ul li.hovered > .b-bottom-submenu { ... }


    Теперь на упомянутое событие этот класс добавляем:
    function(){
    setTimeout(function() {
        $(this).addClass('hovered');
    }, 
    500);
},


    Не работает, что логично. Выходов два, первый:
    function(){
    var _this = this;
    setTimeout(function() {
        $(_this).addClass('hovered');
    }, 
    500);
},


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

    А теперь о боли...

    Если вы используете БЭМ, не делайте вот так, пожалуйста:
    .b-content-block__menu ul li .b-content-block__menu__submenu


    А что вот это такое?
    .b-content-block__menu ul li:hover > b > a

    Или используйте БЭМ по фен-шую или не используйте вообще, смесь всего в одной куче - это ужасно.

    И, к слову о поведении меню, - оно должно быть доступным для клавиатуры (должна быть возможность протабать все ссылки в нем. Подумайте на досуге как это сделать.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать фиксированное меню?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer 
    .menu {
    position: sticky;
    top: 0;
}

    Почитать про это можно вот тут. И приучайтесь использовать новые возможности CSS вместо того, чтобы прикручивать целую jQuery и плагин сверху, как тут некоторые советуют.
    Ответ написан
    10 комментариев
    10 комментариев

  • Как сделать подобную анимацию?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Имеете в виду шестиугольник в шестиугольнике?
    Ответ написан
    Комментировать
    Комментировать

  • Очень хочу услышать мнение о своём сайте. Где?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Сайт работает - это хорошо.
    Есть разметка микроданных - тоже хорошо.
    Сайт не тормозит - это замечательно (тут я совершенно серьезно).
    Дизайн... ну... ужасен. Устарел лет на пятнадцать. Стоит о нем задуматься (см.ниже).
    UX? Некоторые вещи сделаны прям по фен-шую, но большинство - нет. Ах да, не переделывайте внешний вид скролла - бесит.
    В коде - полнейшая жесть. Почитайте про БЭМ или RSCSS. А потом про системы сборки (на тостере уже много раз спрашивали).

    Основные проблемы:
    • Маленькие буквы, которые на главной еще и "мылятся" + отвратительный шрифт. Стоит сходить на fonts.google.com и выбрать другой. Я обычно по дефолту беру семейство Ubuntu - просто, но глаз не режет.
    • Маленькие отступы, все сливается в кашу. Не постесняюсь предложить к ознакомлению свою статью - пример там получился так себе, но сама идея работает. Проверено.
    • Нет возможности работать с клавиатуры (доступные сайты - это круто, кто бы что не говорил)
    • С адаптивностью есть проблемы (она есть - это хорошо, но многие элементы "плющит" и "колбасит" при изменении размера окна)
    • Тени стоит уменьшить (до 0px 1px 3px)
    • А про UX тут на днях уже спрашивали - почитайте.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как ресайзить изображения без потери пропорций?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Почитайте про свойство object-fit - оно как раз должно решить ваш вопрос. Правда если нужны старые браузеры и ie - придется подставлять полифилл.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать прилипание заголовка на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если я правильно понял вопрос, то вам понадобится position: sticky для этих самых заголовков.
    Ответ написан
    Комментировать
    Комментировать