Небольшое вступление: меня заинтересовали CSS-сбросы по вполне практичной причине. Я инженер-консультант по программному обеспечению, поэтому работаю с разными клиентами и время от времени начинаю новые проекты.

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

О чем речь 

1. как реагирует UI, когда пользователь использует фильтры;
2. алгоритм формирования значений фильтров; 
3. шаблоны запросов и структуры индекса ElasticSearch с пояснениями.

В предыдущей статье я описал как построить запрос к Эластику для полнотекстового и фасетного поиска. Здесь расскажу как организовать структуру и взаимодействие компонент, чтобы построить такой запрос.  

Мы используем vue, vuex, vue-route, поэтому дальше повествование будет в этом контексте. В основе взаимодействия лежат хуки компонент, хранилище состояния, роутер. Такую структуру можно воспроизвести на любом фреймворке с таким же составными частями.

Что такое Workbox?

Workbox (далее — WB) — это библиотека (точнее, набор библиотек), основной целью которой является "предоставление лучших практик и избавление от шаблонного кода при работе с сервис-воркерами" (далее — СВ).

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

• Service Worker API — MDN
• Service Workers: an Introduction — Web Fundamentals
• Визуализация работы сервис-воркеров — Хабр
• Рецепты по приготовлению офлайн-приложений — Хабр

WB предоставляет следующие возможности:

• предварительное кэширование
• кэширование во время выполнения
• стратегии (кэширования)
• обработка (перехват сетевых) запросов
• фоновая синхронизация
• помощь в отладке

На что похож WB API?

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

Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь.Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу.

Под катом вы увидите:

• Использования Traefik в качестве обратного прокси для маршрутизации трафика внутрь docker контейнеров.

• Использование Traefik для автоматического получения Let’s Encrypt сертификатов

• Использование Traefik для разграничения доступа к docker registry при помощи basic auth

• Все перечисленное выше будет настраиваться исключительно внутри docker-compose.yml и не потребует передачи отдельных конфигурационных файлов внутрь контейнеров.

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

Помимо этого в интернете мало информации на тему использования traefik для контроля доступа к docker registry. Описанную ниже технику можно использовать для контроля доступа к любому приложению, реализующему Rest API.

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

Поддержка логических свойств CSS со временем становится лучше. Однако мне по-прежнему трудно запомнить их, когда использую их в проекте. Что означают start и end? Несколько сложно охватить все детали без проб и ошибок.

В этой статье я нацелен прокачать вас и пробежаться по использованию логических свойств, чтобы возникло твёрдое понимание, у дизайнеров, говорящих на английском и арабском языках. Я попытался придумать визуальное объяснение логических свойств, которое, надеюсь, будет понятным. Готовы? Погружаемся!

Вы вряд ли найдете в интернете что-то про разработку ботов, кроме документаций к библиотекам, историй "как я создал такого-то бота" и туториалов вроде "как создать бота, который будет говорить hello world". При этом многие неочевидные моменты просто нигде не описаны.

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

Подробный гайд о том, как работать с ботами — под катом.

В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться при сортировке карточек в таск-трекере, переносе между списками или вообще при перетаскивании файлов в окно браузера.

Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.

Настройка локального отладчика Xdebug в IDE PhpStorm для Laravel-приложения в Docker.

О чём, зачем и почему?

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

Здесь я расскажу, как развернуть сервисы для контроля финансов (FireFly3), заметок и чего покрупнее (BookStack) и контроля времени, уходящего на задачи в opensource проектах или на работе (Titra) — всё это на Vultr с защитой с помощью firewall групп и доступа только с нужных ip, например, домашней статики или vpn (ещё развернём для этого Pritunl).

Vultr я выбрал, так как достаточно давно с ним работаю и уже знаю, что он может, а что нет — в моём случае он подошёл идеально.

Надеюсь, что это окажется для кого-то полезным.

Вам больше не помогут no-cache или max-age заголовки, вы просто не знали и не могли узнать о механизме обновления SW. Потому что про него вам не говорили.

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

Перевод материала подготовлен специалистами SiteAnalyzer.

***

Внутренние ссылки – это самый мощный рычаг поискового продвижения после контент-маркетинга, который может на 100% контролироваться владельцем сайта. Вот почему мы создали подробное руководство, в котором объясняются все аспекты перелинковки. После изучения этой статьи вы сможете оптимизировать структуру внутренних ссылок и повысить трафик своего сайта.

Одна из основных проблем разработчиков, когда они создают приложение с ORM — это N+1 запрос в их приложениях. Проблема N+1 запроса — это не эффективный способ обращения к базе данных, когда приложение генерирует запрос на каждый вызов объекта. Эта проблема обычно возникает, когда мы получаем список данных из базы данных без использования ленивой или жадной загрузки (lazy load, eager load). К счастью, Laravel с его ORM Eloquent предоставляет инструменты, для удобной работы, но они имеют некоторые недостатки.
В этой статье рассмотрим проблему N+1, способы ее решения и оптимизации потребления памяти.