👩‍💻 Хэллоуин, маски (CSS) и логические гейты

Я узнал о CSS-масках, воспроизведя мем про Хэллоуин с помощью HTML и CSS... освежив при этом свои знания о логике и логических гейтах.

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

📱 @webdev_trends

#webdev #CSS #Mask #Logic

👩‍💻 Техники оптимизации производительности JavaScript для React и Next.js

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

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

📱 @webdev_trends

#webdev #JS #JavaScript

👩‍💻 Лучшие практики работы с всплывающими подсказками

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

Давайте начнем.

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

📱 @webdev_trends

#webdev #HTML #Tooltip

👩‍💻 Как удалить локальную ветку Git

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

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

📱 @webdev_trends

#webdev #Git #Branch

👩‍💻 Об освоении Vim

Год назад (да и сейчас) я был так поражен и ошеломлен, наблюдая за тем, как ThePrimeagen управляет редактором Vim. Я тоже хотел так делать. Но слишком боялся попробовать, считал, что я не настолько умен, и что это слишком много работы — изучать то, что напрямую не добавляет никакой ценности к моим знаниям в области программирования. Но в то же время меня не устраивал мой текущий опыт работы с VS Code, который постоянно сбоил на моей машине с тех пор, как я перешел на Linux с Windows 11. Несколько месяцев назад я сказал, что хватит бояться. По крайней мере, попробую посмотреть, что это за штука, которая позволяет курсору Prime'а перемещаться с молниеносной скоростью.

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

📱 @webdev_trends

#webdev #Vim

👩‍💻 Этот сумасшедший синтаксис позволяет получить тип элемента массива

Узнайте, как извлечь тип элемента массива в TypeScript с помощью мощного трюка Array[number].

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

📱 @webdev_trends

#webdev #TypeScript #Types

👩‍💻 Переходите на сторону light-dark()

Вас можно простить, если вы думаете, что кодировать одновременно темный и светлый режимы — это очень сложно. Нужно помнить о медиа-запросах @media, основанных на prefers-color-scheme, а также о дополнительных сложностях, возникающих при предоставлении посетителям возможности выбирать светлый или темный режим отдельно от настроек ОС. И давайте не будем забывать о самой цветовой палитре! Переход от «светлого» режима к «темному» может потребовать новых вариаций, чтобы добиться нужного уровня контрастности для обеспечения доступности.

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

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

📱 @webdev_trends

#webdev #CSS #Scheme

👩‍💻 Простое руководство по контейнеризации для начинающих: Docker.

Со временем разработчики ищут более простые способы управления и развертывания приложений. И одним из таких инструментов, получивших за последние несколько лет широкое распространение, является Docker. Но если вы новичок в разработке, вы спросите: «Что такое Docker?». И почему все о нем говорят? Не волнуйтесь! Вы пришли в нужное место! В этой статье мы расскажем, что такое docker, почему он так удобен, а затем рассмотрим пошаговое руководство по контейнеризации простого веб-приложения.

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

📱 @webdev_trends

#webdev #Docker #Beginners

👩‍💻 Понимание механизма работы setTimeout в однопоточной среде JavaScript

JavaScript часто называют «однопоточным», то есть в нем есть только один основной поток для выполнения кода. Но если это так, то как функции вроде setTimeout позволяют выполнять код асинхронно, не блокируя работу другого кода? Ответ кроется в уникальной среде выполнения JavaScript, включающей в себя немного магии из цикла событий и Web API.

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

📱 @webdev_trends

#webdev #JS #JavaScript #setTimeout

🛡👩‍💻 Защита приложений PHP: Остановка SQL-инъекций с помощью Prepared Statement

Понимание SQL-инъекций в PHP и защита приложения с помощью prepared statements для надежной защиты базы данных.

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

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

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

📱 @webdev_trends

#webdev #PHP #SQLInjection #Security

👩‍💻 Упрощение CSS-анимации с помощью свойств display и size

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

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

📱 @webdev_trends

#webdev #CSS #Animation

👩‍💻 Команды Docker для новичков и профессионалов

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

📱 @webdev_trends

#webdev #Docker #Cheatsheet

👩‍💻 Понимание замыканий в JavaScript: Что это такое, как они работают и чем важны

Если вы работали с JavaScript, то наверняка сталкивались с термином «замыкание».

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

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

📱 @webdev_trends

#webdev #JS #JavaScript #Closure

🛡 Как используется CSS в фишинговых атаках: Техники и профилактика

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

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

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

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

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

📱 @webdev_trends

#webdev #CSS #Security #Phishing

👩‍💻👩‍💻 Гипер-отзывчивые веб-компоненты

Внутренний дизайн, контейнерные запросы и cqi типографика.

Недавно мне поручили создать новый компонент: встраиваемый call to action для подписки на email-оповещения.

Этот компонент должен был быть невероятно мобильным, отлично смотреться на любом стороннем сайте, в любом положении, при любом ракурсе, с любым количеством контента. Это должен был быть «гиперреактивный» компонент.

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

📱 @webdev_trends

#webdev #WebComponent

👩‍💻 DevOps автоматизация с помощью Shell скриптов

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

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

📱 @webdev_trends

#webdev #DevOps #Shell #Bash

👩‍💻 AbortController - Как отменить текущие API запросы?

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

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

📱 @webdev_trends

#webdev #JS #JavaScript #AbortController

👩‍💻 Ключевое слово stretch: лучшая альтернатива width: 100% в CSS?

Некоторые элементы HTML, например div или p, по умолчанию растягиваются на всю доступную ширину. Если задать им горизонтальный margin, это не приведет к появлению горизонтальной полосы прокрутки. Это невероятно удобное поведение по умолчанию. Конечно, многие другие элементы по умолчанию не занимают всю ширину. Давайте рассмотрим несколько случаев, когда width: 100% может пригодиться, а затем рассмотрим более новую альтернативу.

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

📱 @webdev_trends

#webdev #CSS #stretch

👩‍💻 Станет ли PHP ещё популярнее в 2025 году?

В 2025 году PHP не только процветает, но и стал незаменимой основой современной веб-разработки. От высокопроизводительных приложений до облачных нативных архитектур и даже бессерверной области - PHP уже давно превзошел традиционную веб-разработку, идеально соответствуя требованиям современного развития. С выходом PHP 8.x в PHP были добавлены такие функции, как JIT-компилятор, Fibers и ряд современных возможностей языка, что повысило его конкурентоспособность и увеличило масштабируемость, эффективность и потенциал для работы со сложными приложениями.

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

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

📱 @webdev_trends

#webdev #PHP

👩‍💻 Web-Slinger.css: Как Wow.js, но с CSS-анимацией прокрутки

Можно ли воссоздать библиотеку JavaScript для анимации прокрутки с помощью современного CSS подхода, используя CSS Scroll-Driven Animations? Да. Да, можно.

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

📱 @webdev_trends

#webdev #CSS #Animation

👩‍💻 Отражение изображений в CSS: Исчерпывающее руководство

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

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

📱 @webdev_trends

#webdev #CSS #Reflection