Заметки разработчика
471 subscribers
672 photos
4 videos
1.17K links
Заметки о Frontend, Backend и немного DevOps. В основном о #PHP, #Laravel, #JavaScript, #HTML, #CSS, тестировании и настройке серверов.

https://www.dev-notes.ru

@snakenf
Download Telegram
Веб-серверы представлены в различных формах, каждая из которых имеет свои уникальные особенности, достоинства и недостатки. От мощного 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/
В этой статье мы подробно рассмотрим сам процесс рефакторинга, стратегию инкрементного рефакторинга, визуальное регрессионное тестирование и сопровождение отрефакторенной кодовой базы.

После анализа 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/
Иногда встречаются ошибки шлюзов, обычно "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/