👩‍💻 20 TypeScript Tricks Every Developer Should Know 🚀

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

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

📱 @webdev_trends

#webdev #TypeScript #TS #tips

👩‍💻 Понимание пропсов в React: Подробное руководство

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

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

📱 @webdev_trends

#webdev #React #Props

👩‍💻 Как перенести устаревший PHP код в объектно-ориентированную структуру с помощью PDO

Перенос устаревшего PHP-кода на современный объектно-ориентированный подход не только повышает читаемость и удобство сопровождения кода, но и улучшает безопасность и масштабируемость. Сочетая принципы объектно-ориентированного программирования (ООП) с PHP Data Objects (PDO) для взаимодействия с базами данных, разработчики могут создавать более эффективные, безопасные и многократно используемые приложения. Переход от процедурного кода к ООП с PDO может показаться сложным, но при правильном подходе и использовании лучших практик этот процесс становится управляемым и целесообразным.

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

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

📱 @webdev_trends

#webdev #PHP #MySQL

👩‍💻 Scroll-Driven... Sections

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

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

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

📱 @webdev_trends

#webdev #CSS #ScrollDriven

👩‍💻 Поиск и навигация по Git коммитам

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

Очевидное решение - использовать Git blame для просмотра коммита (и связанного с ним pull request), в который был добавлен код.

В pull request часто есть описание (или ссылка на проблему с описанием), проясняющее изменение, или обсуждения, добавленные во время проверки кода — это очень ценно! Если это не удается, сам коммит часто содержит связанные изменения, обеспечивающие контекст кода.

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

📱 @webdev_trends

#webdev #Git #Commit

👩‍💻 Умнее, чем 'Ctrl+F': Прямые ссылки на контент веб-страниц

Исторически сложилось так, что можно было ссылаться на определенную часть страницы только в том случае, если эта часть имела ID. Всё, что было нужно сделать, — это поставить ссылку на URL и добавить фрагмент документа (ID). Если хотелось сослаться на определенную часть страницы, нужно было поставить якорь на эту часть, чтобы сослаться на нее. Так было до тех пор, пока не появились Фрагменты текста!

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

📱 @webdev_trends

#webdev #HTML #Link

👩‍💻 Использование Nodemon для автоматического перезапуска приложений Node.js

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

Приложения, написанные на таких языках, как PHP, не нуждаются в перезапуске при обновлении кода. Когда браузер обновляет страницу, он отправляет запрос на веб-сервер, такой, как Apache или NGINX. Сервер анализирует URL, определяет PHP-файл и передает его содержимое интерпретатору среды выполнения PHP. PHP-код выполняется, и сервер получает результат, и передает его обратно браузеру.

В Node.js ваше приложение — это веб-сервер. Запустив node myapp.js, вы загружаете приложение, инициализируете и запускаете сервер, который может отвечать на входящие запросы. Изменение файла не приведет к изменению приложения, потому что в памяти остается предыдущая версия. Чтобы проверить обновление, необходимо остановить работу приложения с помощью Ctrl | Cmd + C, повторно запустить node myapp.js и обновить браузер.

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

📱 @webdev_trends

#webdev #NodeJS #Nodemon

👩‍💻 Создание компонентов на основе контента с использованием CSS :has(), grid и количественных запросов

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

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

📱 @webdev_trends

#webdev #CSS #has #Queries

👩‍💻 Как использовать условные типы в TypeScript?

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

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

📱 @webdev_trends

#webdev #TypeScript #Types

👩‍💻 Антипаттерны контейнеров: Распространенные ошибки Docker и как их избежать.

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

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

📱 @webdev_trends

#webdev #Docker #Tips

👩‍💻 20 трюков JavaScript, которые должен знать каждый разработчик 🚀

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

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

📱 @webdev_trends

#webdev #JavaScript #JS #tips

👩‍💻 Пять дорогостоящих ошибок при развёртывании контейнеров Docker (и как их избежать)

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

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

📱 @webdev_trends

#webdev #Docker #Tips

👩‍💻 Ад обратных вызовов (Callback Hell), написание более чистого асинхронного JavaScript

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

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

📱 @webdev_trends

#webdev #JS #JavaScript

👩‍💻 Хэллоуин, маски (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