Заметки разработчика
472 subscribers
669 photos
4 videos
1.16K links
Заметки о Frontend, Backend и немного DevOps. В основном о #PHP, #Laravel, #JavaScript, #HTML, #CSS, тестировании и настройке серверов.

https://www.dev-notes.ru

@snakenf
Download Telegram
Введение в Popover API

#html #css #js #javascript #frontend

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

Сначала <dialog>, а теперь Поповеры/Всплывающие окна! Popover API, позволяющий создавать всплывающие окна, теперь доступен в большинстве современных браузеров.

В статье рассмотрены основы Popover API и то, как использовать его для создания всплывающих окон самым простым способом.

📄 Читать статью

@dev_notes_ru
👍2
Popover API

#html #js #JavaScript #css #Frontend

Popover API предоставляет разработчикам стандартный, последовательный и гибкий механизм для отображения контента всплывающего поверх другого содержимого страницы. Управление всплывающим контентом может осуществляться как декларативно с помощью атрибутов HTML, так и с помощью JavaScript.

Всплывающие окна, созданные с помощью Popover API, всегда являются немодальными. Если необходимо создать модальное всплывающее окно, следует использовать элемент <dialog>. Эти два элемента во многом пересекаются — например, может понадобиться создать всплывающее окно, которое будет постоянно отображаться, но при этом управляться с помощью декларативного HTML. Можно превратить элемент <dialog> во всплывающее окно (<dialog popover> вполне допустимо), если вы намерены совместить управление всплывающим окном с семантикой диалога.

📄 Читать статью

@dev_notes_ru
👍2
#react #js #JavaScript #frontend

React 19: Изменение в современной веб-разработке

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

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

📄 Читать статью

@dev_notes_ru
👍1
#JavaScript #js #react

Что нового в React 19: Новые возможности

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

📄 Читать статью

@dev_notes_ru
👍3
#js #JavaScript #tips #frontend #webdev

Хотите генерировать случайные цвета с помощью JavaScript?

Сейчас я покажу как это сделать 🎨.

@dev_notes_ru
👍1
#react #hook #JavaScript #js

👩‍💻 useEffect в React

Хук useEffect позволяет выполнять побочные эффекты в компонентах. Побочные эффекты — это операции, влияющие на что-то вне области действия выполняемой функции, например, получение данных, обновление DOM или настройка подписок.

До появления хуков побочные эффекты в компонентах React обрабатывались в методах жизненного цикла класса, таких как componentDidMount, componentDidUpdate и componentWillUnmount. С помощью хуков useEffect предоставляет унифицированный API для обработки этих сценариев в компонентах функций.

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

📱 @dev_notes_ru
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍1🔥1
👩‍💻 Проблемы экспорта по умолчанию в модулях JavaScript

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

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

📱 @dev_notes_ru

#JavaScript #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1
👩‍💻 Разница между export default xxx и export {xxx as default}

Разница между export default xxx и export { xxx as default } в JavaScript может показаться малозаметной, но может повлиять на поведение кода.

Модули — автономные фрагменты кода, позволяющие импортировать и использовать их в других модулях. Они помогают разработчикам сохранять код организованным, удобным для сопровождения и понятным.

Для работы с модулями необходимо понимать синтаксис импорта и экспорта.

import: Используется для импорта именованных экспортов или экспортов по умолчанию из других модулей.
export: Используется для экспорта значений, функций или классов из модуля, делая их доступными для импорта другими модулями.

Существует два вида экспорта:

Именованные экспорты: В модуле может быть несколько именованных экспортов. Они импортируются явно, используя свои имена.
Экспорт по умолчанию: В каждом модуле может быть только один экспорт по умолчанию. Они импортируются без указания имени.

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

📱 @dev_notes_ru

#JavaScript #js
Please open Telegram to view this post
VIEW IN TELEGRAM
1
👩‍💻 Сокращения JavaScript экономящие время

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

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

📱 @dev_notes_ru

#javascript #js #tips
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1