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/

Sushi — это недостающий драйвер "массивов" Eloquent, поскольку иногда хочется использовать Eloquent без работы с базой данных.

Недавно я опубликовал статью о создании примера приложения с использованием Volt и Folio. В этой статье я использовал пакет Sushi Caleb Porzio для создания примера данных. Мне стало интересно, для чего ещё люди используют Sushi. И я написал в Твиттере, спросив, для чего они его используют. В этой статье мы рассмотрим основные концепции Sushi и несколько примеров его использования.

https://www.dev-notes.ru/articles/eloquent/laravel-sushi/

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

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

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

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

https://www.dev-notes.ru/articles/css/refactoring-css-optimizing-size-performance/

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

https://www.dev-notes.ru/articles/javascript/lazy-loading/

Сериализация — это процесс, в котором принимается часть данных и создаётся хранимое или переносимое представление этих данных.

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

Вы, вероятно, знакомы с функцией PHP serialize(). Эта функция принимает одно значение и возвращает его сериализованную версию в виде строки.

Уникальность сериализации в PHP заключается в том, что она фактически использует специальный формат сериализации для представления различных типов данных, включая массивы и объекты.

Каждый тип данных, который PHP может сериализовать, имеет своё собственное представление и обозначение при сериализации. Давайте разберём их и посмотрим, что они собой представляют.

https://www.dev-notes.ru/articles/php/understanding-serialisation/

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

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

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

С помощью RegEx можно обрабатывать лог-файлы, извлекать определённые данные из текстовых документов, перенаправлять URL-адреса, проверять вводимый пользователем текст в веб-формах и т.д.

https://www.dev-notes.ru/articles/javascript/five-practical-use-cases-for-regular-expressions/

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

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

https://www.dev-notes.ru/articles/frontend/simple-pagination-html-css-javascript/

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

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

https://www.dev-notes.ru/articles/javascript/optimizing-javascript-files/

Современные веб-пользователи ожидают от одностраничных приложений (SPA) плавных и динамичных эффектов. Однако для создания SPA часто используются сложные фреймворки, такие, как React и Angular, которые могут быть сложны для изучения и работы с ними. Появилась htmx — библиотека, позволяющая по-новому взглянуть на создание динамических веб-приложений, используя такие возможности, как Ajax и CSS-переходы, непосредственно в HTML.

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

https://www.dev-notes.ru/articles/javascript/htmx-introduction/

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

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

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

https://www.dev-notes.ru/articles/css/the-power-of-custom-properties-in-css/

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

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

https://www.dev-notes.ru/articles/css/avoid-css-ch-layout-shifts/

Паттерн Pending Object играет ключевую роль в Laravel, поскольку используется практически во всех его аспектах. Он обеспечивает исключительный опыт разработчика (DX).

https://www.dev-notes.ru/articles/laravel/pending-object-pattern/

В Laravel v10.20 появился совершенно новый метод createOrFirst(), созданный Tony Messias, который может вызвать некоторое недоумение, поскольку в Laravel уже был метод firstOrCreate(). В чем же заключаются различия? Зачем нам нужны два метода? Давайте посмотрим...

https://www.dev-notes.ru/articles/laravel/firstorcreate-vs-createorfirst/