• Так ли важна скорость загрузки по PageSpeed Insights?

    @pu6elozed
    Bitrix, fullstack
    Используйте современные форматы изображений JPEG 2000, JPEG XR и WebP

    Для этого существует тэг picture с source, в котором и можно использовать webp. Если не будет поддерживаться, то и не будет использоваться этот source

    Устраните ресурсы, блокирующие отображение

    Советую почитать по critical-css, т.е. css который необходим для отображения первого экрана. Весь остальной css можно подключать как раз внизу сайта.

    Настройте подходящий размер изображений

    но на мобильном нет таких размеров. в лучшем случае 375px и @2x, что соответствует 750px, нужно подгружать те форматы и размеры изображения, которые будут подходить текущему разрешению экрана, через тот же вышеупомянутый тег source внутри picture

    Задайте правила эффективного использования кеша для статических объектов

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

    Как это можно исправить, или это не так важно...? Как вы поступаете в таких ситуациях? Вы придерживаетесь рекомендациям google?

    Как было написано - это всего лишь рекомендация. Руководствоваться этими рекомендациями или нет, решать лично вам. Однако гугл уже давно использует данные PageSpeedInsights, и учитывает их при ранжировании
    Ответ написан
    3 комментария
  • Что написать для тренировки на js с нуля?

    shmatuan
    @shmatuan
    8 year of Web, 5 years of Vue
    Из того, что часто может пригодится в вебе

    • Паралакс
    • слайдер
    • генерацию таблиц из js
    • сортировку таблиц
    • общение с сервером
    • Плеер (аудио/видео)
    • Работа со временем (momentjs)
    • Подгрузка постов при скроле
    • Движение блоков при скроле
    • Пагинация
    • Модалка
    • Взаимодействие с изображениями (фильтр, обрезка, ...)
    • Кастомные селекты, датапикеры
    • Табы


    + можешь поискать топ сайтов и попробовать повторить интересные штуки из них
    + jQuery
    + фрейморки, например Vue
    + node js
    Ответ написан
    Комментировать
  • Как правильно верстать такие переходы?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Самый правильный вариант — с помощью clip-path, потому что с его помощью безо всякого вращения можно обрезать по формуле блок сверху и снизу. При этом, можно использовать значения по типу calc(100% - 50px), чтобы при изменении ширины экрана, область «скоса» всегда равнялась, как в значении выше, 50 пикселям, что упрощает совмещение нескольких таких блоков с помощью отрицательных margin'ов ( margin: -50px 0; ).

    Если делать трансформации обёртки, как писали выше, то придётся на каждом отдельном разрешении следить за тем, чтобы, во-первых, между такими блоками не было зазоров, а также за тем, чтобы внутренний отступ до контента был в порядке.

    Одна проблема — поддержка clip-path со стороны браузеров. Вот пример реализации такого подхода: proappliancerepair.com. У меня не стояло задачи поддерживать старые браузеры, поэтому использовал clip-path смело.
    Ответ написан
    3 комментария
  • Какую книгу по SEO посоветуете?

    reaferon
    @reaferon
    Книги по SEO устаревают еще до того, как попадут в типографию.
    Ответ написан
    1 комментарий
  • Как делать такие условные заголовки?

    Taraflex
    @Taraflex
    Ищу работу. Контакты в профиле.
    Белый или черный
    https://github.com/Taraflex/Brackets-Color-Highlig...
    https://github.com/Taraflex/Brackets-Color-Highlig...
    Цвет из картинки лучше вычислить заранее на сервере, ибо на клиенте не выйдет отобразить цветную карточку до загрузки картинки
    https://github.com/ksubileau/color-thief-php
    https://github.com/thephpleague/color-extractor
    https://github.com/brianmcdo/ImagePalette
    https://www.phpclasses.org/package/3370-PHP-Extrac...
    ну и еще можно нагуглить

    UPD
    Градиентный блур на js
    https://jsfiddle.net/8ujmn5zs/62/
    Ответ написан
    Комментировать
  • Какая из посадок верстки на Wordpress более актуальная и правильная?

    entity1313
    @entity1313
    Веб-разработчик, проект-менеджер
    Правильный путь - следовать API wordpress и особенностям CMS.

    Выкинуть всё из стандартной темы и забить туда свой код - это значит либо обречь тему на гибель после того, как кто-то нажмёт на кнопочку "обновить", либо сделать тему необновляемой. Ну и, соответственно, это не WP-way.

    Прежде чем делать что-то с темой, нужно разобраться, делаете вы тему с нуля, или обновляете существующую.

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

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

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

    Изменяемые блоки делаются или через визуальный редактор (Visual Composer или другие), или через механизм опций, или через плагины вроде ACF. Причём ACF использовать не обязательно, у WP есть интерфейс для произвольных полей.

    В плане того, что использоваться - ACF, фреймворки, или ещё что, логика примерно такая:
    1. Общие элементы темы вроде лого, копирайта, контактных данных - это опции (свой код для страницы настроек), фреймворки опций (Redux, ACF-про ) или кастомайзер WP. Последнее кажется наиболее правильным и соответствующим развитию WP - там почти рукой подать до визуального редактирования уже.
    2. Контент страниц - стандартный интерфейс для произвольных полей, ACF или другие решения. С ACF причём нужно быть аккуратным, он может упереться в ограничения сервера по количеству полей или давать неверные данные (писал бакенд для мобильного приложения через WP REST API и хлебнул лиха от сохранённых через ACF данных, привязанных к таксономиям)

    В плане кода - всё, что должно решаться через API, решается через API. wp_enqueue_script/style для скриптов и стилей, wp_head(), wp_footer() в соответствующих местах. Вариантов превратить разработку темы в извращение тут очень много, доводилось видеть много всякого от неопытных разрабочтиков. И какого-то универсального решения всего этого избежать, возможно, просто нет. Кроме как учиться, смотреть гайды и лучшие практики, следить за обновлениями WP и рекомендациями для разработчиков.
    Ответ написан
    5 комментариев
  • Под какой браузер вы верстаете в первую очередь?

    @McBernar
    Честно говоря, сейчас Лиса и Хром совершенно одинаково отрабатывают флексы. А все остальное уж подавно.

    Есть некоторые особенности у каждого браузера (можно сказать — баги), но они встречаются редко, очень незначительные и легко гуглятся.

    Да и IE новый не выделяется ничем особо. Только вот с ES6 местами беда, но это решаемо.

    P.S. И да — если есть возможность отказаться от проекта с поддержкой старых браузеров — сделайте это. Вы не получите ничего, кроме головной боли. Опыта полезного вам это не даст, только время потратите на динозавров.
    Ответ написан
  • Кнопка "Показать еще" через Ajax или display: none?

    Isolution666
    @Isolution666
    Full-Stack Developer
    Можно так:
    <script>
    $( 'button' ).click(function() {
      if ( $( "#box" ).is( ":hidden" ) ) {
        $( "#box" ).show( "slow" );
      } else {
        $( "#box" ).slideUp();
      }
    });
    </script>


    <button>показать ещё</button>
    <div id="box">тут картинки</div>


    Если картинки тяжёлые, по мегабайту каждая или более, лучше через:
    else ...
    $( "#box" ).load( "ajax/image.html  #target" );
    ...

    <div id="box">
          <div id="target"></div>
    </div>
    Ответ написан
    Комментировать
  • Как сделать такое меню?

    DanilAndreevich
    @DanilAndreevich
    Зачем придумывать велосипед ? Воспользуйтесь flexMenu
    Ответ написан
    2 комментария
  • Как устроена авторизация по паролю в web-приложениях?

    AlexanderYudakov
    @AlexanderYudakov
    C#, 1С, Android, TypeScript
    Аутентификация по паролям — позапрошлый век.

    В той-же статье, на которую вы дали ссылку, прошу обратить внимание на раздел "Аутентификация по токенам".

    ВКонтакте, Facebook, Яндекс, Google, Mail.ru и др. — выберите себе провайдера учетных записей по душе и не нужно париться вам с хранением и передачей паролей, а пользователям — с придумыванием этих паролей, их забыванием, восстановлением, вводом с клавиатуры и прочим геморроем.

    Наберите в поисковике: oauth <мой любимый провайдер>, и получите подробную инструкцию, как это реализовать.
    Ответ написан
    5 комментариев
  • Как подключить необходимые JS-модули на отдельных страницах (CMS Wordpress)?

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

    @kn0ckn0ck
    Продюсер
    Есть две крайности, которых лучше избегать:
    1. красивая и исчерпывающая документация требует колоссальных ресурсов на поддержку
    2. сложно воспринимаемый код, без малейших подсказок с чего все начинается и чем заканчивается

    Стандартные решения:
    1. самодокументируемый код, составленный так, что читающий может понять что для чего и в какой последовательности работает.
    2. описание интерфейсов (назначение метода, тип/суть параметров и т.п.) в форме комментов в коде.
    3. автоматическая документация (генерится из комментариев) - эффективно, только если сам код закрыт.
    4. модульные тесты, фиксирующие требования к коду и демонстрирующие его использование.
    5. описание высокоуровневого дизайна (High Level Design, HLD), описывающий какие элементы существуют, их взаимосвязь друг с другом и основные сценарии взаимодействия.

    Работающая документация - это компромисс из этих практик, релевантный конкретной ситуации.

    Кстати, проектная работа, это не только документация к коду, это еще и свод правил, которые позволят архитектуре не расползтись кто в лес кто по дрова, а также сохранят стилистику написания кода для единообразия и легкой поддерживаемости кода.
    Ответ написан
    12 комментариев
  • Как могут взломать базу данных MySQL?

    @Z1odeypnd
    Здравствуйте.
    Технологий взлома уйма.
    В зависимости от того, какие привелегии получил "хакер" при вломе вашей БД - зависит очень много.
    Если он получил доступ только на чтение, то захешированные в MD5 пароли ему мало чем помогут, т.к. MD5 не имеет алгоритма обратной расшифровки и хэширование спасёт тем, что взломщик получивший доступ на чтение паролей - самих паролей не получит (есть конечно словарь MD5 хешей, то это другая история).
    Вообще для защиты любой БД есть несколько золотых правил:
    0. Переименовать дефолтного админа и защитить его сложным паролем.
    1. Для каждой БД должен создаваться свой владелец и несколько пользователей с разными наборами привелегий.
    2. Ни у одного из пользователей, созданных в п.1 не должно быть прав на изменение таблиц в соседней БД.
    Если есть необходимость обновлять соседние БД - делайте это триггером в соседней БД.
    3. Каждый внешний веб-сервис должен ходить в БД только с тем набором прав, которых ему достаточно для работы. Т.е. не нужно везде прописывать root и надеяться на лучшее.
    В этом случае, если взломщик получит привелегии этого пользователя, то сможет сделать только то, что разрешено этому пользователю. Тогда не выйдет "удалить все и сразу".
    Например, для наполнения католога товаров в интернет-магазине может быть отдельный пользователь, с правами на SELECT, INSERT, UPDATE, DELETE в таблице SHOP_PRODUCTS, например. И ничего более.
    А пользователи, приходящие в магазин за покупками могут делать SELECT, INSERT, UPDATE, DELETE только в таблицу CUSTOMER_CART. В коде веб-сервиса, естественно должна быть проверка, что покупатель редактирует СВОЮ корзину.
    Для показа каталога товаров - отдельный пользователь, имеющий право только на SELECT из таблицы SHOP_PRODUCTS.
    А продажу товара может делать отдельный пользователь, с правом только на UPDATE колонки AMOUNT в таблице SHOP_PRODUCTS. Пример:
    GRANT SELECT ON shopdb.SHOP_PRODUCTS TO 'trader_bot'@'shophost';
    GRANT UPDATE (AMOUNT) ON shopdb.SHOP_PRODUCTS TO 'trader_bot'@'shophost';

    И т.п. По принципу "Разделяй и властвуй."
    4. Писать запросы с использованием placeholder'ов (подстановку данных), что убережёт от SQL-инъекций.
    Пример:
    $DB->select('SELECT * FROM tbl WHERE a=? AND b=?', $a, $b);

    5. Если и БД и приложение, используещее БД установлены на одном сервере - отключить удалённый доступ к БД и работать через сокеты.
    6. Последний, но самый важный - БЕКАПЫ. При удалении всего и вся - нужно откуда-то восстановиться. Делайте бекапы и храните на отдельном сервере (не выставленном наружу).
    Ответ написан
    3 комментария
  • Как использовать палитру Google material для дизайна сайтов?

    @GreatRash
    Официальный подборщик.
    Автоматический подбор цветов.
    Ответ написан
    Комментировать
  • Предпринимательский подход к разработке и программированию - как развивать, что именно прокачивать?

    gobananas
    @gobananas
    finishhim.ru
    Программист - узконаправленный специалист который выполняет только 1 задачу. Ну пару смежных (сисадминистрирование, вёрстка).

    Предприниматель - человек который выполняет много задач в разных сферах. Найм персонала, мотивация, определение стратегии, тактики развития, налоги. Предприниматель экономит своё время и старается оставить у себя ключевые процессы и отдать не ключевые на аутсорс. Например при таком подходе я бы отдал вёрстку, а вот маркетинг стоит пристально контролировать самому.

    слепая печать

    На кой этот навык предпринимателю? Вы что машинисткой работать собрались?

    навыки решения типовых задач

    Предпринимателю нужен навык решения НЕ типовых задач ))

    доведенные до автоматизма

    Это тоже скилл исполнителя

    по настройке сервера, веб-дизайну, типографике итд.

    У вас бизнес в сфере дизайна? Если нет то дизайн и типографика не ключевые процесс - выбрасываем

    если коммерческий проект успешно работает на Yii 1, то его без веских причин никто не будет переписывать на Yii 2

    Проблема с поддержкой, сейчас найти человека который согласится работать на Yii1 уже сложнее, хотя у меня есть знакомые, которые не перешли на 2, далее кадровый дефицит заставит вас или перейти или работать с теми кто согласится
    Ответ написан
    5 комментариев
  • Как очистить Wordpress от злоумышленников?

    mausspb
    @mausspb
    web разработчик, системный администратор
    • Определите точку взлома. Постарайтесь локализовать причину взлома, определив примерное время взлома и читайте логи.
    • Установите новую версию рядом из сохраненных бекапов, просканируйте на наличие malaware например с помощью онлайн сервисов https://wpscans.com/ или offline типа дистриба kali linux
    • Смените все пароли в БД , в частности для доступа к самой БД
    • Посмотрите список юзеров в WP
    • Настройте корректные права на доступ к файлам и директориям
    • Проверьте движок и плагины на возможность обновления
    • Включите на веб сервере расширенное логирование
    • Сделайте бекап текущей версии
    • Замените взломанную версию на новую

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

    P.S.: Как выше написали - так же стоит закрыть админку, я бы еще добавил блокировку при вводе нескольких не верных паролей с помощью fail2ban.
    Ответ написан
    Комментировать
  • Как оптимизировать видео, вставляемое в качестве фона?

    Taraflex
    @Taraflex
    Ищу работу. Контакты в профиле.
    Уменьшите битрейт и разрешение видео.
    Переместите метаданные в начало mp4 контейнера
    Установите preload="metadata"
    htmlbook.ru/html/video/preload

    Чтобы пиксели в глаза не бросались наложите на видео сеточку из маленьких черных точек
    https://jsfiddle.net/soumyabg/wefLyrhp/
    css background dotted overlay
    Ответ написан
    5 комментариев