👩‍💻 Перемещение по неограниченным размерам с помощью CSS Scroll Timelines

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #CSS #Tricks

👩‍💻 Серверная пагинация в Angular

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #JS #JavaScript #Angular #Pagination

👩‍💻 Создание резервной копии проекта Laravel в Dropbox

Как быстро создать резервную копию проекта Laravel и сохранить её в Dropbox используя пакеты Spatie Laravel-backup и Flysystem-dropbox.

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

Файлы проекта часто уже управляются системой контроля версий, например Github или Gitlab. Однако хранить там пользовательские данные не рекомендуется. Dropbox может стать отличным выбором для безопасного хранения такого рода данных.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Laravel #Dropbox #Backup

👩‍💻 Обработка ошибок в JavaScript с блоками try, catch и finally

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

Синтаксические ошибки в основном отслеживаются линерами, но также указываются, когда код с ошибками выполняется движком JavaScript, то есть во время выполнения. Ошибки, возникающие во время выполнения, часто называют исключениями. Исключения выбрасывают объект Error, который — если его не обработать проактивно — мгновенно завершает работу скрипта и не позволяет выполнить остальную часть кода.

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #JS #JavaScript #Error

👩‍💻 Почему jQuery 4 - хорошее напоминание, что пора прекратить использовать jQuery

У jQuery долгая и уважаемая история, однако новый релиз jQuery v4 beta не содержит никаких интересных функций для современных веб-разработчиков. Есть несколько причин, по которым сейчас самое время отказаться от использования jQuery:

✅ Современные браузеры и нативные JavaScript API поддерживают все возможности jQuery, делая его ненужным, а его полезные функции устаревшими.
✅ Использование jQuery неоправданно увеличивает размер пакета веб-приложения и снижает производительность по сравнению с нативными реализациями.
✅ Выпуск jQuery 4 подтверждает его устаревание, поскольку в нем нет заметных новых функций, он сосредоточен на выживании и подчеркивает, что нативный JavaScript и современные фреймворки превзошли его.
✅ Переход jQuery на ES-модули и внедрение современных практик в jQuery 4 не добавляет ничего нового для веб-разработчиков
✅ Использование jQuery с современными фронтенд-фреймворками, такими как React, Vue и Angular, может противоречить их архитектуре и рекомендациям по кодированию
✅ Современные фронтенд-фреймворки выпускают production-код с полифиллами, поэтому разработчикам не нужно использовать jQuery API для создания веб-страниц для старых браузеров

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #JS #JavaScript #jQuery

👩‍💻 Совет по безопасности: Можно ли безопасно десериализовать классы?

[Совет #95] Хотя не следует десериализовывать всё, что получаете от пользователя, иногда нет выбора... так как же сделать это безопасно?

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #PHP #Security

👩‍💻 Прослушивание событий внутри веб-компонента (извне веб-компонента)

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #JS #HTML #WebComponent

🛡 Безопасные Куки и атрибуты HTTPOnly для повышения безопасности

Cookies считаются важной частью веб-разработки, поскольку они хранят информацию на стороне клиента, включая сессии приложений, предпочтения и другую важную информацию. Использование файлов cookie имеет множество преимуществ, но при неправильном обращении они могут стать объектом нескольких угроз с точки зрения безопасности. При разработке веб-приложений безопасность имеет решающее значение, и небезопасный файл cookie может скомпрометировать всё приложение. Например, файл cookie может стать объектом атаки, что приведет к перехвату сеанса, атакам межсайтового скриптинга (XSS) и другим вредоносным действиям. Поэтому для адекватной защиты файлов cookie желательно использовать несколько способов. Атрибуты HTTPOnly и Secure - это идеальные меры, которые можно использовать для защиты файлов cookie. В этой статье рассмотрим оба атрибута, то есть что они собой представляют, как работают и как их настраивать.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Cookie #Security

👩‍💻 Защита тем WordPress от бэкдор-уязвимостей

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

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #WordPress #Security

👩‍💻 Лучший паттерн ADR для контроллеров Symfony

В этой статье рассматриваются различные эксперименты и попытки применения паттерна ADR к контроллерам Symfony. Поехали! 😎

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Symfony

👩‍💻 HTML-интерфейсы для библиотек CSS

Я использую термин «библиотека CSS» для обозначения хранилища, существующего для предоставления стилей для компонентов. Возможно, «CSS-библиотека компонента» будет более точным? Эта статья, по сути, представляет собой сборник не совсем обоснованных мнений, представленных в виде предложений.

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #HTML #CSS #WebComponent

👩‍💻 Руководство по сокращению использования памяти в Python

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

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

Большой объем памяти может привести к нежелательным последствиям. Читайте далее, чтобы узнать, что такое управление памятью, и найти советы по снижению потребления памяти приложением Python.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Python #tips

👩‍💻 Встраивание Blade в контент Markdown

Если вы еще не читали мою статью в блоге "Обновление сайта к 2025 году", рекомендую вернуться и прочитать её, поскольку в ней рассказывается о некоторых интересных вещах, которые я делаю для того, чтобы сайт идеально подходил для моего рабочего процесса.

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

Несколько человек спросили меня, как я это делаю, и я решил показать вам.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Laravel #Blade #Markdown

👩‍💻 Защита запросов WordPress к базе данных от уязвимостей SQL-инъекций

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

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #WordPress #Security

👩‍💻 Почему я использую empty() чаще, isset() в PHP, и вы должны тоже

При разработке на PHP эффективная обработка проверок переменных очень важна для обеспечения надежности и безошибочности кода. Для этого часто используются две языковые конструкции - empty() и isset(). Однако во многих случаях выбор empty() может быть предпочтительнее, isset(), в первую очередь потому, что empty() охватывает почти все сценарии, используемые isset(), наряду с дополнительными проверками. В статье рассматривается, почему в PHP лучше использовать empty(), и демонстрируется на примерах кода.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #PHP #tips

👩‍💻 Именованный скролл и просмотр временных шкал

Я только что написал в блоге о способе передачи информации от элемента, имеющего временную, к его потомкам. Идея заключается в том, чтобы установить CSS свойства с помощью @property, а @keyframe будет анимировать их, таким образом, потомки получат к ним доступ.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #CSS

👩‍💻 Качество кода в Laravel: Pint с Git Hooks и Docker

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

Используйте Pint, мощный инструмент, представленный экосистемой Laravel, для автоматического форматирования PHP-кода в соответствии с лучшими практиками.

В статье мы рассмотрим, как интегрировать Pint в приложение Laravel и сделать ещё один шаг вперёд, запустив Pint внутри контейнера Docker используя Docker Compose.

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Laravel #Pint #Docker

👩‍💻 Изучение новых возможностей JavaScript ES2024: Взгляд в будущее веб-разработки

Знакомство с новыми функциональными возможностями языков программирования сродни празднику — оно наполнено предвкушением и волнением от открытия чего-то нового. Благодаря предлагаемым функциям ECMAScript 2024 (ES2024) разработчики JavaScript находятся на пороге знакомства с новыми инструментами, обещающими сделать кодирование более эффективным, читабельным и надежным. От интуитивно понятного синтаксиса ожиданий верхнего уровня до надежности неизменяемых записей и кортежей - ES2024 содержит множество тщательно отобранных усовершенствований, призванных расширить возможности разработчиков и обогатить экосистему JavaScript.

Давайте познакомимся с некоторыми из них и узнаем, как они могут улучшить JavaScript.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #JS #JavaScript #ES2024

👩‍💻 Хуки свойств на практике

Две важнейшие особенности грядущей версии PHP 8.4 - это хуки свойств и асимметричная видимость (или сокращенно "aviz"). Мы с Ильей Товило работали над ними в течение двух лет, и наконец-то они почти готовы!

Хорошо, и что теперь?

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

Один из основных вариантов использования хуков - не использовать их: Они существуют на случай, если понадобится, так что не нужно делать шаблонные методы getter/setter "на всякий случай". Однако это не единственное их применение. Они также очень хороши в сочетании со свойствами интерфейса и делегированием. Давайте посмотрим.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #PHP

👩‍💻 Стилизация Shadow DOM с Web-компонентами

Я часто говорю, что Shadow DOM - это антипаттерн. Меня за это часто критикуют, потому что в течение многих лет культ JS-фреймворка позиционировал Shadow DOM как убийственную особенность Web-компонентов.

Но одна из самых больших проблем, создаваемых Shadow DOM для веб-компонентов, связана со стилизацией.

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

Давайте покопаемся!

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #CSS #WebComponent

👩‍💻 5 проверенных способов ускорить работу Prettier Format-On-Save в VS Code

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #VSCode #Prettier #tips