Последняя версия стандарта языка 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/

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

https://www.dev-notes.ru/articles/javascript/lazy-loading/

Сериализация — это процесс, в котором принимается часть данных и создаётся хранимое или переносимое представление этих данных.

Сериализованное представление данных может быть достигнуто с помощью различных форматов. Очень распространён JSON, поскольку большинство языков в той или иной форме кодируют и декодируют JSON. Можно также использовать XML, YAML или даже просто строку байтов.

Вы, вероятно, знакомы с функцией PHP serialize(). Эта функция принимает одно значение и возвращает его сериализованную версию в виде строки.

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

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

https://www.dev-notes.ru/articles/php/understanding-serialisation/

Ознакомьтесь с конкретными ситуациями, в которых регулярные выражения оказываются оптимальным решение проблемы.

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

Регулярные выражения/Regular expressions, обычно называемые RegEx, представляют собой надёжные шаблоны, используемые для поиска, сопоставления и манипулирования текстовыми данными. RegEx играет важную роль при выполнении операций проверки и извлечения текста. Он предлагает мощные функциональные возможности для эффективного поиска и замены определённых шаблонов в текстовой строке.

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

https://www.dev-notes.ru/articles/javascript/five-practical-use-cases-for-regular-expressions/

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

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

https://www.dev-notes.ru/articles/frontend/simple-pagination-html-css-javascript/

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

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

https://www.dev-notes.ru/articles/javascript/optimizing-javascript-files/

Современные веб-пользователи ожидают от одностраничных приложений (SPA) плавных и динамичных эффектов. Однако для создания SPA часто используются сложные фреймворки, такие, как React и Angular, которые могут быть сложны для изучения и работы с ними. Появилась htmx — библиотека, позволяющая по-новому взглянуть на создание динамических веб-приложений, используя такие возможности, как Ajax и CSS-переходы, непосредственно в HTML.

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

https://www.dev-notes.ru/articles/javascript/htmx-introduction/

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

Пользовательские свойства CSS, обозначаемые именами, начинающимися с двух дефисов (--), являются контейнерами для хранения значений, которые могут быть использованы повторно во всей таблице стилей. Эти пользовательские свойства могут хранить различные типы данных, включая цвета, измерения и даже строки. Основное назначение пользовательских свойств CSS — облегчить управление и обновление повторяющихся значений во всем документе CSS. Хорошим способом использования переменных CSS является использование цветов в дизайне. Вместо того чтобы копировать и вставлять одни и те же цвета снова и снова, можно поместить их в переменные.

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

https://www.dev-notes.ru/articles/css/the-power-of-custom-properties-in-css/

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

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

https://www.dev-notes.ru/articles/css/avoid-css-ch-layout-shifts/

Паттерн Pending Object играет ключевую роль в Laravel, поскольку используется практически во всех его аспектах. Он обеспечивает исключительный опыт разработчика (DX).

https://www.dev-notes.ru/articles/laravel/pending-object-pattern/

В Laravel v10.20 появился совершенно новый метод createOrFirst(), созданный Tony Messias, который может вызвать некоторое недоумение, поскольку в Laravel уже был метод firstOrCreate(). В чем же заключаются различия? Зачем нам нужны два метода? Давайте посмотрим...

https://www.dev-notes.ru/articles/laravel/firstorcreate-vs-createorfirst/

CSS развивается быстрее, чем когда-либо. С учётом всех новых возможностей, которые появились — и ещё появятся — после появления Flexbox и Grid несколько лет назад, меняется и способ написания CSS. В этой статье Geoff Graham рассказывает о том, какие функции оказали наибольшее влияние на его нынешние подходы к CSS, а также о тех, которые не оказали (по крайней мере, пока).

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

Но изменили ли все эти "колокольчики" и "свистки" на самом деле то, как вы пишете CSS? Новые возможности, безусловно, повлияли на то, как я пишу CSS сегодня, но, возможно, не так радикально, как я ожидал.

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

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

Позвольте мне посчитать, как это сделать.

https://www.dev-notes.ru/articles/css/writing-css-2023/

С появлением ES6 итераторы и генераторы были официально добавлены в JavaScript.

Итераторы позволяют выполнять итерацию над любым объектом, соответствующим спецификации. В первом разделе мы рассмотрим, как использовать итераторы и сделать любой объект итерируемым.

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

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

https://www.dev-notes.ru/articles/javascript/iterators-and-generators-a-complete-guide/

Овладейте искусством создания RESTful API с Laravel благодаря этим лучшим практикам.

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

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

https://www.dev-notes.ru/articles/laravel/restful-api-best-practices/

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

В этой статье мы рассмотрим несколько методов получения ID последней вставки в Laravel с помощью моделей Eloquent, DB-фасада или прямого доступа к экземпляру PDO. Давайте рассмотрим различные подходы

https://www.dev-notes.ru/articles/eloquent/5-ways-to-retrieve-the-last-inserted-id/

Если вы попытаетесь использовать Livewire 3 со стартовым набором Laravel Breeze, то можете заметить, что ваши компоненты не реагируют на реакцию, а некоторые функции Livewire просто не работают. Причиной может быть Alpine.js, который загружается дважды. Сейчас я покажу вам, как это исправить.

https://www.dev-notes.ru/articles/laravel/livewire-3-laravel-breeze-error-alpine-js-conflict/

Если вы хотите избежать хранения конфиденциальных данных БД (например, номеров паспортов) в виде обычного текста, Laravel может зашифровать их в Моделях Eloquent, просто присвоив им значение encrypted. Давайте посмотрим, как это работает.

https://www.dev-notes.ru/articles/eloquent/encrypt-models-data-with-casts/

Bun — это быстрый набор инструментов JavaScript "все в одном". Его можно использовать как среду выполнения (он гораздо быстрее, чем Node.js), как программу для запуска тестов и даже как менеджер пакетов. Именно это интересует нас как PHP-разработчиков.

https://www.dev-notes.ru/articles/php/bun-php/

Новый View Transitions API предлагает более простой способ анимации между двумя состояниями DOM — даже между загрузками страницы. Это прогрессивное усовершенствование, работающее уже сегодня.

CSS-переходы и анимация произвели революцию в веб-эффектах за последнее десятилетие, но не все так просто. Рассмотрим список элементов — например, десять изображений с заголовками, — который мы хотим перевести в новый список элементов с помощью эффекта cross-fade. Текущий подход:

1. Сохранить старые элементы DOM
2. Создать новые DOM-элементы, добавить их на страницу, обеспечив соответствующее расположение
3. Затухание старого набора при появлении нового набора, затем
(опционально) Заменить старые элементы DOM на новые

До сих пор не было возможности просто обновить DOM — до сих пор! View Transitions API использует следующий процесс:

1. API делает снимок текущего состояния страницы.
2. При необходимости мы обновляем DOM, добавляя или удаляя элементы.
3. API делает снимок нового состояния страницы.
4. API выполняет анимацию между двумя состояниями, используя стандартное затухание или любые CSS-анимации, которые мы определим.

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

API является экспериментальным, но последние браузеры на базе Chromium поддерживают внутристраничные эффекты, основанные на DOM одного документа.

View Transition API для навигации также доступен в Chrome 115+ и предлагает анимацию между загрузками отдельных страниц — как, например, на типичных сайтах WordPress. Это ещё проще в использовании и не требует использования JavaScript.

Mozilla и Apple не раскрыли своих намерений по внедрению API в Firefox и Safari. Любой браузер без View Transitions API будет продолжать работать, поэтому добавлять эффекты можно уже сегодня.

https://www.dev-notes.ru/articles/javascript/view-transitions-api-introduction/