• В чем отличие объявления этих двух функций?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Как давно в JS можно не писать function в первом примере?

    Ключевое слово function можно опускать в определенных ситуациях:
    let bar = {
        test: 'A',
        foo() {
            console.log(this.test);
        }
    }
    
    bar.foo(); // A
    
    class Bar {
        constructor() {
            this.test = 'B';
        }
        foo() {
            console.log(this.test);
        }
    }
    
    (new Bar()).foo(); // B

    Разумеется для старых браузеров нужен Babel. В остальных случаях запись вида test(){} вызовет ошибку Uncaught SyntaxError: Unexpected token.
    Ответ написан
    Комментировать
  • Почему Pagespeed выдает, что стили в head есть, когда их там нет?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Approximately 10% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

    Только часть контента может быть отрендерена без ожидания загрузки ресурсов, которые вы убрали в конец страницы. Решается это тем, что вы в начало страницы вставляете элемент style с критичными стилями для первого экрана. В качестве бонуса это уменьшает время загрузки страницы по ощущениям пользователя. Это автоматизируется разными способами. Гуглите critical css + название вашей системы сборки.
    Ответ написан
    1 комментарий
  • Как удалить публичный пакет npm?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    С помощью unpublish можно убрать из публичного доступа пакет, который был опубликован в последние 24 часа. Если это так и пакет не удаляется - лучше написать в техподдержку (в последние пару дней у многих ресурсов были серверные проблемы - github и codepen уже падали, может и у npm что-то не так). Если же вы опубликовали свой пакет раньше, то удалить его уже нельзя. Можно только сделать устаревшим с помощью npm deprecate. Если ваш пакет не является зависимостью у других пакетов, то теоретически можно попросить техподдержку удалить его вручную, но не факт, что они станут это делать.
    Ответ написан
    1 комментарий
  • Почему у меня выводится не правильно?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    У вас там куча не закрытых тегов, должно быть <div class='grid-itm'>....</div>.

    P.S: В следующий раз не вставляйте код в виде картинки, лучше делайте демку на codepen или jsfiddle.
    Ответ написан
    Комментировать
  • Как получить текущее положение планет?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Первая ссылка из гугла привела на страницу cosinekitty.com/solar_system.html, где находится таблица, в которой в реальном времени обновляются координаты планет солнечной системы и некоторых спутников. Есть разные опции. Работает это все на основе astronomy.js.
    Ответ написан
    1 комментарий
  • Есть функция или миксин для оформления сайта в нескольких цветовых гаммах?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если говорить о таком поведении в реальном времени, то красиво будет сделать все на кастомных свойствах, также известных, как CSS-переменные. Выглядит примерно так:
    body.-red {
        --my-color: #f00;
    }
    
    .test {
        color: var(--my-color);
    }

    Добавляете класс "-red" к body и цвет текста в .text поменяется на красный. Главное преимущество этого подхода - нет полного дублирования селекторов. Главная проблема - работает это только в вечнозеленых браузерах и последнем Edge. Можете посмотреть живой пример. Если нужна поддержка более старых браузеров, то идею для миксина для SASS вы можете подсмотреть в этой статье.
    Ответ написан
    Комментировать
  • Где есть курсы по основам рисунка?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На канале Олега Торопыгина вы найдете полноценные курсы художественного училища в открытом доступе. По качеству и понятности объяснения будут получше, чем в большинстве школ, особенно для детей. Стоит начать с введения в рисунок.
    Ответ написан
    Комментировать
  • Как изменять пропорции элементов на разных разрешениях экрана?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    То есть надо как то это всё масштабировать... Как вы решаете такие задачи?

    Можно все размеры задавать в rem/em, тогда при изменении размера шрифта для html все будет подстраиваться (вообще rem - это очень удобная штука, особенно когда все размеры выражаются красивыми числами - .5, .75, 1, 1.5, 2, 3, 4..., а не количеством пикселей). При этом можно по-умному привязать font-size для html к единицам vw и результат будет очень приятным.
    Ответ написан
    1 комментарий
  • HTML, CSS: Какими комментариями Вы отмечаете начало и конец блока?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вопрос к верстальщикам, которые передают верстку бэкэндерам

    Если в верстке получается большой каскад в концах разных секций (а это не такая уж и редкость, самая жуть обычно после шаблонизаторов выходит) и потом это надо нарезать на куски для чего-нибудь на серверной стороне, то можно добавлять для крупных логических блоков завершающий комментарий. В целом его можно дублировать открывающим комментарием, иногда его гораздо проще выцепить глазом, по сравнению с классом, особенно если у вас много классов и аттрибутов:
    ... over9000 lines of code ....
                                </div>
                            </div>
                        </div>
                        <!-- /slide -->
                    </div>
                    <!-- /custom-slider -->
                </div>
                <!-- /column -->
            </div>
            <!-- /row -->
        </div>
        <!-- /content-container -->
    </div>
    <!-- /page-container -->

    Как вариант можно не начинать комментарий с новой строки, особенно если вы любите автоматическое форматирование. Такие комментарии позволяют быстрее ориентироваться в происходящем и меньше терять закрытые/не закрытые теги при нарезке на десяток файлов-шаблонов.

    P.S.: И да, никто не заставляет писать их руками - Emmet может сам их генерировать.
    P.P.S: А тем, кто считает бэкендеров "не тупыми, сами разберутся" стоит пожелать быть добрее к людям в новом году, некоторым из них приятно, когда сразу видно, какие блоки где заканчиваются. Также, как и нам приятно, когда в макете все красиво подписано.
    Ответ написан
    4 комментария
  • Хочу набить руку на создании адаптивных меню. Можете подсказать сайты со сложными меню (чтобы посмотреть и попытаться сделать что-то похожее)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Посмотрите подборку от freefrontend.com. 117 менюшек, начиная от самых простых и заканчивая довольно интересными в плане "сделать это самому и взять приемы на вооружение".
    Ответ написан
    Комментировать
  • Как установить "это", если не имеешь доступа по npm установке?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Проведите процедуру локально и скопируйте не только папку www, но и node_modules. У проекта есть пара зависимостей (их можно посмотреть в файле package.json), которые будут установлены в нее при выполнении npm install. И, разумеется, сама нода должна быть установлена на сервере.
    Ответ написан
    2 комментария
  • Что такое и зачем нужен новый тип данный Symbol в ES15?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Что такое

    Новый тип данных symbol - это попытка ввести уникальные идентификаторы. Все крутится вокруг функции Symbol. Это не конструктор в полном смысле слова, с new ее использовать не получится. Это скорее маленькая фабрика. Она просто возвращает новый символ каждый раз. Это важно. Каждый раз новый. В качестве аргумента можно передать строку, но она используется только для отладки.
    Symbol() === Symbol() // false

    Что такое глобальный символ? Какой еще реестр?

    Есть Symbol.for(), это еще один метод, который не просто возвращает символ, но и сохраняет информацию о том, для какого параметра он создавался. Внешне логика работы напоминает хеширование - для разных параметров символы получаются разные, а для одинаковых - одинаковые.
    Symbol.for('my-string') === Symbol.for('my-string') // true
    Symbol.for('my-string') === Symbol.for('another-string') // false


    Зачем это надо?

    Применение этого типа данных - предмет для споров. Большая часть кейсов из интернета - это попытки поиспользовать новую фишку только ради того, чтобы ее поиспользовать. Самые популярные и практически применимые варианты:
    • В качестве ключа для доступа к свойству объекта. Грубо говоря вместо obj[key] использовать obj[some-magic-unique-key]. Позволяет избежать коллизии этих самых ключей если вы расширяете существующий объект из сторонней библиотеки. На практике встречается не очень часто, особенно в небольших проектах, но по всей видимости это - причина появления символов в языке.
    • Некоторая иллюзия приватных свойств. Символы по-своему работают с циклами и многими методами, связанными со свойствами объекта, становясь невидимыми для них. В результате можно разделить "все свойства с обычными ключами" и "все свойства с ключами-символами". А еще можно запутать код до безобразия.
    • Также, пользуясь предыдущей мыслью, можно сделать что-то вроде метаданных для любого объекта, которые опять же не сломают существующий код, но могут быть использованы для хранения какой-то информации и мередачи ее между отдельными модулями. Штука довольно интересная.
    Ответ написан
    Комментировать
  • Взлом Wi-Fi с точки зрения закона?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Как это с точки зрения закона выглядит?

    В той или иной степени это выглядит следующим образом:
    ст. 272 УК РФ. Неправомерный доступ к компьютерной информации
    ст. 273 УК РФ. Создание, использование и распространение вредоносных компьютерных программ
    ст. 138 УК РФ. Нарушение тайны переписки, телефонных переговоров, почтовых, телеграфных или иных сообщений.
    ст. 159.6 УК РФ. Мошенничество в сфере компьютерной информации.

    Мне на соседа в суд подать за то, что он в мою квартиру вредные волны запускает?

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Определенно стоит почитать статьи и книги Криса Касперского. Мнения о них у людей разные, информация постепенно устаревает, но они могут дать какие-то основы, понимание того, что в этой области вообще происходит.
    Ответ написан
    Комментировать
  • В каких задачах лучше использовать TypeScript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Обязательно ли его знать фронтендеру?

    Нет. Не обязательно. После того, как пришел ES6+ и стала популярной нормальная сборка с линтерами и тестами, количество изюминок в TypeScript заметно поубавилось, и в наше время его использование стало вопросом религии (нужна более строгая типизация или нет) и личных предпочтений. Учите чистый JS, а если вам в какой-то момент покажется, что TypeScript вам нужен или попадете в команду, где его используют - за пару дней разберетесь.
    Ответ написан
    Комментировать
  • Визуальный редактор CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Главный вопрос - зачееем? Изначальная идея была в том, чтобы прокачивать свой скилл в CSS за счет верстки подобных картинок, анимирования их, разных необычных эффектов и.т.д. Для практического применения лучше использовать SVG, а для него любой векторный графический редактор подойдет.
    Ответ написан
    1 комментарий
  • Где найти статистику NPM?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    типа общего количества пакетов или скачиваний

    Информации с официального сайта недостаточно? Там прямо на главной странице есть общее количество пакетов и количество загрузок за разные периоды времени.

    Вот тут есть дополнительная информация о соответствующем api.
    Ответ написан
    Комментировать
  • Как правильно указать значение в itemprop duration?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Duration: The duration of the item (movie, audio recording, event, etc.) in ISO 8601 date format.

    Идем на википедию, смотреть, что такое ISO 8601...
    Там в целом говорится о том, что есть два формата для записи времени - простой и расширеный (с двоеточиями) и строятся они по следующему принципу:
    - hh
    - hh:mm (hhmm)
    - hh:mm:ss (hhmmss)
    - hh:mm:ss.sss (hhmmss.sss)
    Иными словами, начинается запись всегда с часов, а по мере надобности добавляются минуты, секунды и миллисекунды. Из чего нетрудно сделать вывод, что в вашем случае оба варианта записи указывают на одно и то же время.
    Ответ написан
    1 комментарий
  • Как вам моя схема (схемантика) основных нюансов Flexbox?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Как вам моя схема...

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

    Где я могу выкладывать...

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Да, есть готовые решения, на которые стоит обратить внимание, например FlowType.js. Также есть CSS-only вариант на тот случай, если вам нужно привязать font-size к размеру окна браузера.
    Ответ написан
    1 комментарий