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

Как правило, подобная функциональность реального времени реализуется в веб-приложениях с помощью WebSockets.

В этой статье мы рассмотрим, что такое WebSockets, где они могут понадобиться, а также альтернативные подходы к использованию WebSockets. Затем мы расскажем, как реализовать WebSockets в приложениях Laravel с помощью Pusher. Рассмотрим, как настроить бэкенд на отправку широковещательных сообщений через WebSockets, а также как настроить фронтенд на прослушивание этих сообщений. Наконец, рассмотрим использование приватных каналов, каналов присутствия, классов каналов и клиентских событий.

https://www.dev-notes.ru/articles/laravel/a-guide-to-using-websockets-in-laravel/

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

В этой статье я рассмотрю, как работать с модулями в Node.js, уделяя особое внимание их экспорту и использованию.

https://www.dev-notes.ru/articles/javascript/understanding-module-exports-exports-node-js/

TLS 1.3 имеет ряд улучшений по сравнению со своим предшественником TLS 1.2, включая повышенную безопасность и более быстрое время соединения. Однако его включение требует тщательной настройки веб-сервера. Если вы используете Apache или Nginx, то в этом руководстве мы пошагово рассмотрим процесс включения TLS 1.3 в Apache и Nginx на двух популярных дистрибутивах Linux (Ubuntu и CentOS).

Прежде чем перейдём к рассмотрению данного руководства, необходимо отметить, что оно предполагает, что вы обладаете базовым пониманием интерфейса командной строки Linux и знакомы с администрированием веб-серверов. Кроме того, на вашем сервере Ubuntu или CentOS уже должны быть установлены Apache или Nginx.

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

Теперь давайте приступим к включению TLS 1.3 на вашем сервере Apache или Nginx.

https://www.dev-notes.ru/articles/devops/how-to-enable-tls-1-3-in-apache-and-nginx-on-ubuntu-and-centos/

Веб-серверы представлены в различных формах, каждая из которых имеет свои уникальные особенности, достоинства и недостатки. От мощного Apache с открытым исходным кодом до высокопроизводительного и эффективного Nginx, от удобного интерфейса IIS от Microsoft до лёгкого и быстрого LiteSpeed — выбор разнообразен и зачастую просто ошеломляет.

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

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

https://www.dev-notes.ru/articles/devops/best-web-server-2023/

Миксины SCSS обеспечивают эффективный способ повторного использования CSS-кода. Миксины уменьшают дублирование и улучшают структуру кода за счёт инкапсуляции стилей в блоки многократного использования. Благодаря возможности принимать аргументы, миксины становятся невероятно адаптивными и универсальными. В этой статье мы расскажем о том, как SCSS-миксины улучшают разработку фронтенда, способствуя модульности и согласованности кода, и упрощая написание CSS.

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

https://www.dev-notes.ru/articles/css/reuse-code-master-scss-mixins/

Сравнение объектов в JavaScript не так просто, как сравнение примитивных типов данных. В статье рассматриваются пять способов глубокого сравнения объектов в JS.

В JavaScript существует 7 примитивных типов данных. Мы можем сравнивать значения любого из этих типов с помощью оператора равенства. Однако сравнение не примитивных типов, таких как объекты, сопряжено с определёнными трудностями, поскольку обычные операторы равенства не сравнивают значения объектов, как можно было бы ожидать.

https://www.dev-notes.ru/articles/javascript/five-different-ways-to-deep-compare-objects/

#Laravel Совет: после изменения записи Eloquent вы можете получить исходные атрибуты, вызвав getOriginal()

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

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

https://www.dev-notes.ru/articles/javascript/ten-js-naming-conventions-every-developer-should-know/

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

С тех пор ECMAScript претерпел значительные изменения вплоть до версии ES12, официально известной как ECMAScript 2021. ES12 появился в июне 2021 года с новыми возможностями, улучшениями и некоторыми изменениями синтаксиса.

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

https://www.dev-notes.ru/articles/javascript/top-6-javascript-es12-features-you-should-use/

Рефакторинг CSS — задача не из лёгких: его нужно провести так, чтобы не создать проблем. Сначала необходимо проанализировать существующую кодовую базу, провести аудит состояния CSS-кодовой базы, выявить слабые места, согласовать подход и убедить руководство в необходимости вложения времени и ресурсов в этот процесс.

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

Такой технический долг, если он не выплачивается вовремя, может накапливаться и приводить к серьёзным проблемам в дальнейшем. Чаще всего это приводит к неожиданным побочным эффектам при добавлении новых компонентов пользовательского интерфейса и затрудняет сопровождение кодовой базы. Наверняка вам уже приходилось работать над проектом с плохой кодовой базой CSS и думать, как бы вы написали код по-другому, если бы была возможность провести рефакторинг или переписать все с нуля.

Рефакторинг больших частей CSS-кода — задача не из лёгких. Иногда может показаться, что это просто "удаление некачественного кода, написание более качественного CSS и развёртывание блестящего улучшенного кода". Однако необходимо учитывать множество других факторов, таких как сложность рефакторинга живой кодовой базы, ожидаемая продолжительность и загруженность команды, постановка целей рефакторинга, отслеживание эффективности и прогресса рефакторинга и т.д. Кроме того, необходимо убедить руководство или заинтересованные стороны проекта в необходимости инвестировать время и ресурсы в процесс рефакторинга.

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

https://www.dev-notes.ru/articles/css/refactoring-css-introduction/

Иногда требуется добавить данные в Request или изменить их перед валидацией. В Laravel для этого есть несколько трюков — метод merge().

https://www.dev-notes.ru/articles/laravel/add-modify-request-data-before-validation/

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

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

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

Предположим, что руководство одобрило рефакторинг проекта CSS. Команда разработчиков проанализировала и выявила слабые места в кодовой базе CSS и определила целевые задачи рефакторинга (размер файла, специфика, определения цветов и т.д.). В этой статье мы подробно рассмотрим сам процесс рефакторинга, стратегию инкрементного рефакторинга, визуальное регрессионное тестирование и сопровождение отрефакторенной кодовой базы.

https://www.dev-notes.ru/articles/css/refactoring-css-strategy-regression-testing-maintenance/

z-index — свойство, используемое для управления порядком расположения слоёв в документе. Элементы с большим значением z-index располагаются над элементами с меньшим значением. Подобно тому, как оси x и y на странице определяют расположение элементов по горизонтали и вертикали, z-index определяет, как они располагаются друг над другом по оси z.

https://www.dev-notes.ru/articles/css/mastering-z-index/

SameSite — это механизм защиты браузера, определяющий, когда файлы cookie сайта включаются в запросы, поступающие с других сайтов. Ограничения на использование файлов cookie SameSite обеспечивают частичную защиту от различных межсайтовых атак, включая CSRF, межсайтовые утечки и некоторые CORS-эксплойты.

Начиная с 2021 года Chrome по умолчанию применяет ограничения Lax SameSite, если сайт, на котором размещён файл cookie, не задал явно свой собственный уровень ограничений. Это предложенный стандарт, и мы ожидаем, что в будущем такое поведение будет реализовано и в других основных браузерах. Таким образом, для тщательного тестирования на наличие векторов межсайтовых атак необходимо иметь чёткое представление о том, как работают эти ограничения и как их можно обойти.

В этой статье мы рассмотрим принцип работы механизма SameSite и поясним некоторые термины, связанные с ним. Затем мы рассмотрим наиболее распространённые способы обхода этих ограничений, позволяющие осуществлять CSRF и другие межсайтовые атаки на сайты, которые на первый взгляд кажутся безопасными.

https://www.dev-notes.ru/articles/security/csrf-bypassing-samesite-restrictions/

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

https://www.dev-notes.ru/articles/css/understanding-css-logical-properties/

Каждый веб-разработчик должен знать о хешировании и шифровании, поскольку они являются важнейшими концепциями безопасности. При правильном использовании они позволяют повысить безопасность веб-приложений и обеспечить конфиденциальность персональной информации пользователей (Personally Identifiable Information — PII).

В этой статье мы рассмотрим хеширование и шифрование, а также их различия. Кроме того, мы узнаем, как использовать их в проектах Laravel для повышения безопасности приложений. Рассмотрим, как хэшировать данные и сравнивать их с обычным текстом. Расскажем о различных способах шифрования и дешифрования данных в Laravel.

https://www.dev-notes.ru/articles/laravel/a-guide-to-encryption-and-hashing-in-laravel/

Безопасность — обширная тема, и данная статья не охватывает её полностью. Да и возможно ли это вообще?

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

https://www.dev-notes.ru/articles/laravel/security-best-practices-2023/

Laravel — мощный и гибкий PHP-фреймворк, завоевавший огромную популярность в мире веб-разработки.

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

11-я версия Laravel выйдет в следующем году, и уже сейчас о ней кое-что известно.

https://www.dev-notes.ru/articles/laravel/laravel-11-release-date-and-new-features/

Погрузитесь в этот увлекательный учебник по рефакторингу фрагмента кода с использованием функции max в PHP.

https://www.dev-notes.ru/articles/php/max-function/

Иногда встречаются ошибки шлюзов, обычно "502 Bad Gateway" или "504 Gateway Timeout".

Это ошибки, которые возвращает Nginx, когда он посылает запрос к PHP, но PHP возвращает какую-то ошибку, говорящую, что он не может обработать запрос. Как правило, это НЕ ошибки, возникающие в вашем приложении, а (обычно) ошибки, возникающие ещё до того, как приложение обработает запрос.

https://www.dev-notes.ru/articles/devops/debugging-gateway-errors/

Последняя версия стандарта языка JavaScript — ECMAScript 2023, являющаяся 14-й редакцией. В этом обновлении появились новые методы прототипа Array.

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

https://www.dev-notes.ru/articles/javascript/guide-four-new-array-prototype-methods/