В Интернете пагинация — это способ разбиения больших фрагментов содержимого на более мелкие части. В этой статье мы рассмотрим простой способ разделения содержимого на ряд "страниц" с помощью 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/

Свежий релиз Laravel Sail включает поддержку Bun, быстрой универсальной среды выполнения JavaScript. Узнайте, как начать использовать Bun в своих проектах Laravel уже сегодня.

https://www.dev-notes.ru/articles/laravel/laravel-sail-bun/

Как использовать несколько баз данных в проекте Laravel и управлять разделёнными записями в базе данных.

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

https://www.dev-notes.ru/articles/laravel/use-several-databases/

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

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

https://www.dev-notes.ru/articles/css/elevate-your-coding-efficiency-with-css-naming-conventions/

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

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

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

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

https://www.dev-notes.ru/articles/devops/nginx-performance-optimization-tips/

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

Одним из таких методов является метод Where, и он имеет множество способов упрощения сложных запросов.

Простейший способ использования where — просто статически вызвать его в модели как Model::where('name', 'Ahmed')->first().

https://www.dev-notes.ru/articles/eloquent/query-builder-where/