👩‍💻 Практические советы по доступности, которые можно применить сегодня

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

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

🖥 Читать статью

📱 @dev_notes_ru

#frontend #a11y #html #tips

💡 Совет по Laravel: Хелпер `today()`

Иногда нужно получить сегодняшнюю дату. Хотя это можно сделать несколькими способами, Laravel поставляется с понятным хелпером today(), предназначаемым именно для этого. Можно передавать часовые пояса и подключать другие полезные методы 🚀.

📱 @dev_notes_ru

#laravel #helper #tips

👩‍💻 Ставить точку с запятой или нет

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

Люди утверждают, что автоматической вставки точки с запятой (ASI) достаточно. Не нужно печатать больше, чем нужно.

Так ли важна точки с запятой на самом деле?

✅ Вопрос мнения

Вы можете подумать, что использование точки с запятой зависит от мнения разработчика - использовать её или нет, в зависимости от того, что он предпочитает. Однако возникает вопрос. Действительно ли они необходимы при любых обстоятельствах?

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

Рассмотрим несколько примеров, когда точка с запятой абсолютно необходима в JavaScript.

✅ Несколько выражений в одной строке

Не знаю, зачем кому-то понадобилось писать такой код, но взгляните на него:

let x = 5; let y = 10; console.log(x + y);

Если убрать точки с запятой и вставить код в консоль, возникнет синтаксическая ошибка: unexpected token: 'let'. Возможно, нужно просто написать быстрый скрипт, чтобы сделать какую-то хитрость на веб-странице. В этом случае необходимо использовать точки с запятой.

✅ Немедленно вызываемые функциональные выражения (IIFE)

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

let x = 5
(function() {
  console.log('Hello, world!');
})(); // Uncaught TypeError: 5 is not a function

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

Конечно, добавление точки с запятой в конце первого утверждения устраняет проблему.

✅ Согласованность между языками

Если вы разработчик, работающий с несколькими языками программирования, использование точек с запятой поможет сохранить единый стиль кодирования. Во многих других языках, таких как Java, C# и C++, точка с запятой является обязательной.

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

✅ Использовать или не использовать точку с запятой

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

#JavaScript #semicolon

#joke

📱 @dev_notes_ru

👩‍💻 Руководство по деструктуризации в JavaScript

Если вы проводите много времени, пробираясь через современный JavaScript, то, скорее всего, встречали столько многоточий (...), что даже самый задумчивый герой ролевых игр 90-х был бы посрамлён. Я не буду винить вас за то, что вы находите их немного запутанными. Конечно, я не виню вас за то, что находите что-то в JavaScript запутанным, но я всегда считал эти многоточия уникально не интуитивными с первого взгляда. Не помогает и то, что часто сталкиваетесь с этими маленькими чудаками в контексте деструктурирующего присваивания, которое само по себе является странным синтаксисом.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #spread #rest #guide

🤔 А вы знаете о методе withoutDelay() в Laravel Queue?

Queue в Laravel позволяют выполнять код (Jobs) в фоновом режиме, быстро отвечая на запросы пользователей.

Чтобы отправить задания в очередь, используется метод dispatch() соответствующего класса Job.

Иногда в заданиях может быть задана задержка по умолчанию, например, переопределением метода delay().

Если в определенном сценарии необходимо отправить задание немедленно, можно добавить метод withoutDelay() к вызову метода dispatch(), и задание будет отправлено без задержки.

📱 @dev_notes_ru

#laravel #queue #tips

👩‍💻 Новое в Symfony 7.2: Week, WordCount и Yaml ограничения

В Symfony 7.2 появилось три новых ограничения: первое проверяет номера недель, второе проверяет количество слов, а третье проверяет синтаксис YAML.

Это первая статья из цикла рассказывающего о наиболее важных нововведениях в Symfony 7.2, релиз которой состоится в конце ноября 2024 года.

🖥 Читать статью

📱 @dev_notes_ru

#Symfony #features

👩‍💻 Что такое Docker и как он устроен

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

🖥 Читать статью

📱 @dev_notes_ru

#DevOps #Docker

👩‍💻 Совет по коллекциям в Laravel

Если хотите получить последний элемент коллекции, то это $collection->last().

Но что насчет предпоследнего?

Ответ - ->take(-2)->first().

Да, а вы знали, что take() принимает отрицательные числа?

📱 @dev_notes_ru

#laravel #collection #tips

👩‍💻 CSS эффект Slice от Ana Tudor

Slice! - одно из моих любимых и, безусловно, самое популярное демо, которое я сделала в этом году.

Никакого JS, никакого дублирования текста, никаких изображений, кроме CSS-градиентов. SVG-фильтры позаботились как о текстуре, так и об эффекте «slice + offset».🪄

Также contenteditable.😼

👩‍💻 https://codepen.io/thebabydino/pen/GRaKbZo

📱 @dev_notes_ru

#CSS #effects #codepen #tips

👩‍💻 Новое в Symfony 7.2: Silent Verbosity

Symfony 7.2 представляет silent verbosity для подавления всего вывода, включая ошибки.

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

Однако при выполнении некоторых консольных команд они могут генерировать вывод как в потоке stdout, так и в потоке stderr. Это проблематично, если сторонний сервис ожидает только JSON-файлы логов и сталкивается с этими неструктурированными данными.

🖥 Читать статью

📱 @dev_notes_ru

#Symfony #features #verbosity

👩‍💻 Напоминание, что @scope и блоки стилей HTML — это мощное сочетание

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


🖥 Читать статью

📱 @dev_notes_ru

#frontend #css #scope

💡 Совет по Laravel: Перемещение столбца на первую позицию

Знаете ли вы, что можно переместить столбец на первую позицию в таблице, даже если он была добавлен позже? Для этого используйте метод first() 🚀.

📱 @dev_notes_ru

#laravel #migration #tips

👩‍💻+👩‍💻 Вкладки со скруглёнными углами и границами

Пример переключения между вкладками от Ana Tudor

Изначально я сделала это после того, как кто-то спросил, как создать вкладки с закругленными углами и границами.

👩‍💻 https://codepen.io/thebabydino/pen/oNKLLbv

Ванильный CSS + JS + немного SVG-магии.🪄

📱 @dev_notes_ru

#CSS #JS #codepen #tips

👩‍💻 Новое в Symfony CLI: автодополнение команд

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

Хорошая новость заключается в том, что начиная с Symfony CLI v5.10, Symfony CLI предоставляет автодополнение команд для оболочек Bash, ZSH и Fish.

Чтобы включить его, следуйте инструкциям, отображаемым командой symfony completion --help.

Но это ещё не всё! Знаете ли вы, что Symfony Console обеспечивает автодополнение команд bin/console в вашей оболочке? Да! Начиная с версии 5.4 для Bash, 6.1 для Fish и 6.2 для ZSH. Поэтому Symfony CLI может перенаправлять инструкции автодополнения команд в проект Symfony при автодополнение команд symfony console из коробки!

Но и это ещё не всё! Вы, наверное, знаете, что сам Composer использует Symfony Console. Так что да, в symfony composer тоже будет работать!

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

В качестве небольшого приятного бонуса, поскольку Symfony CLI также разработан с использованием автономных библиотек с открытым исходным кодом, эта функция автодополнения команд теперь доступна для любого инструмента, использующего symfony-cli/console, как, например, Blackfire CLI.

📱 @dev_notes_ru

#Symfony #cli

👩‍💻 Новое в Symfony 7.2: Улучшения языка выражений

В Symfony 7.2 улучшен компонент ExpressionLanguage, добавлены новые битовые и логические операторы, упрощена регистрация кастомных провайдеров и реализована поддержка комментариев.

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

🖥 Читать статью

📱 @dev_notes_ru

#Symfony #features #ExpressionLanguage

👩‍💻 Как деструктуризация массивов может замедлить JavaScript код

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

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #tips

💡 Совет по Laravel: Новый метод кэширования `flexible`

Начиная с Laravel v11.23.0, можно использовать новый метод flexible для кэширования. Если приходилось сталкиваться с проблемой перепроверки кэша до истечения срока его действия, воспользуйтесь им 🚀.

📱 @dev_notes_ru

#laravel #cache #tips

👩‍💻 Правильно выбранный viewBox может помочь избежать необходимости устанавливать кучу атрибутов

❌
<svg viewBox='0 0 12 12'>
  <line x1='3' y1='6' x2='9' y2='6' stroke='red' stroke-width='3'/>
</svg>
✅
<svg viewBox='-1 -2 4 4'>
  <line x2='2' stroke='red'/>
</svg>

Оба варианта дают одинаковый результат.

📱 @dev_notes_ru

#SVG #tips

👩‍💻 Новое в Symfony 7.2: Атрибут AsMessage

В Symfony 7.2 представлен новый атрибут #[AsMessage], позволяющий настраивать транспорт(ы) непосредственно в классе сообщения

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

🖥 Читать статью

📱 @dev_notes_ru

#Symfony #features #AsMessage

👩‍💻 Автоматизация резервного копирования баз данных c Laravel

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

🖥 Читать статью

📱 @dev_notes_ru

#Laravel #Backup