#посмотреть
Принципиальные различия и сходства двух подходов.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2❤1
React 19: конец эры повторных рендерингов
#почитать
Новейшее дополнение к React — компилятор, заменяющий транспилятор, применяется в React 19. В React 18 и ниже использовался транспилятор, который при изменении состояния перерисовывал весь компонент. В отличие от него, компилятор возвращает мемоизированный код, устраняя ненужный повторный рендеринг и улучшая производительность приложений React.
⏱ Читать статью
#почитать
Новейшее дополнение к React — компилятор, заменяющий транспилятор, применяется в React 19. В React 18 и ниже использовался транспилятор, который при изменении состояния перерисовывал весь компонент. В отличие от него, компилятор возвращает мемоизированный код, устраняя ненужный повторный рендеринг и улучшая производительность приложений React.
Please open Telegram to view this post
VIEW IN TELEGRAM
😱10👍2🔥1
#посмотреть
На примере билда персонажа (aka проекта) в RPG простым языком разберем, какие инструменты (aka артефакты) мы можем использовать для построения архитектуры проекта. Рассматриваем готовые архитектурные подходы (aka готовые билды). Каждый инструмент изучаем со стороны баффов и дебаффов для проекта. Также рассматриваем комплекты артефактов (aka инструментов), которые в сочетании друг с другом образуют новые баффы или нейтрализуют определенные дебаффы друг друга. В конце Александр показывает небольшой «гайд», как нам прокачивать нашего персонажа (развивать проект) в зависимости от места спавна (требований и ограничений от бизнеса).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🤔2🔥1
Новые значения и функции в CSS
#почитать
▪️Изменения в функции attr()
▪️Операции с внутренними значениями с помощью calc-size()
▪️Новая функция first-valid()
▪️Новое семейство функций *-mix()
▪️Новое семейство функций *-progress()
▪️Функции рандомизации в CSS
▪️Новые функции sibling-*
▪️Новая функция toggle()
▪️Новая функциональная нотация для аргументов
▪️Расширение до типа позиции
⏱ Читать статью
#почитать
▪️Изменения в функции attr()
▪️Операции с внутренними значениями с помощью calc-size()
▪️Новая функция first-valid()
▪️Новое семейство функций *-mix()
▪️Новое семейство функций *-progress()
▪️Функции рандомизации в CSS
▪️Новые функции sibling-*
▪️Новая функция toggle()
▪️Новая функциональная нотация для аргументов
▪️Расширение до типа позиции
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍2❤1
Истории и боли frontend-разработчика
#почитать
Пятничное.
⏱ Читать статью
#почитать
Пятничное.
В начале карьерного пути я был юнцом с битриксом под ногтями и с JQuery в сердце. Тогда для меня было нормальным передавать настройки фронтенда через data-атрибуты и посылать ajax запросы не за модным JSON, а за готовым HTML-кодом. Тем временем в соседнем отделе матёрые фронтендеры писали на хайповом React, который умел много чего удивительного, в том числе и переход по страницам без перезагрузки. Я захотел так же и пошел советоваться с опытными фронтендерами: «А я могу просто перехватывать клик по ссылке, сделать ajax запрос на новую страницу за всем, что лежит между header и footer и вставлять на место текущего контента, подменяя историю?» Ребята посмеялись, на меня стали косо посматривать… Теперь же хайпует htmx, который по сути делает то же самое. Он будто создан для битрикса.
Мораль басни? Она в том, что простые решения самые лучшие — не надо тянуть какую-то технологию, просто потому что «ну, это ж все сейчас так делают». Например, те же микросервисы или микрофронты приносят кучу боли, и писать монолит не зазорно.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥1
Как удаление isNumber из зависимостей сэкономило 440 Гб трафика
#почитать
Концепция isNumber проста: функция, в аргументе которого должна быть определяемая переменная, должна вывести нам true или false; true если да, false если нет.
⏱ Читать статью
#почитать
Концепция isNumber проста: функция, в аргументе которого должна быть определяемая переменная, должна вывести нам true или false; true если да, false если нет.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2❤1
Рендеринг компонентов React
#почитать
Как React понимает, что пора обновить DOM-дерево? Как ререндеринг влияет на производительность и как ее улучшить? Что происходит под капотом React, когда мы решаем отобразить компонент на странице? Какую роль в этом всем играют хуки? Чтобы ответить на эти вопросы необходимо разобраться с такими понятиями, как рендеринг, жизненный цикл компонента, реконциляция, побочные эффекты и с некоторыми другими.
⏱ Читать статью
#почитать
Как React понимает, что пора обновить DOM-дерево? Как ререндеринг влияет на производительность и как ее улучшить? Что происходит под капотом React, когда мы решаем отобразить компонент на странице? Какую роль в этом всем играют хуки? Чтобы ответить на эти вопросы необходимо разобраться с такими понятиями, как рендеринг, жизненный цикл компонента, реконциляция, побочные эффекты и с некоторыми другими.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🥴2🔥1
Двойной ползунок с помощью плагина NoUiSlider
#почитать
Создание двойного ползунка (double range slider) с помощью NoUiSlider — это отличное решение, когда нужно дать пользователям возможность выбирать диапазон значений, например, для фильтрации цен или других числовых параметров.
⏱ Читать статью
#почитать
Создание двойного ползунка (double range slider) с помощью NoUiSlider — это отличное решение, когда нужно дать пользователям возможность выбирать диапазон значений, например, для фильтрации цен или других числовых параметров.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2🔥1
Типы или интерфейсы в TypeScript?
#почитать
Когда использовать типы, а когда интерфейсы?
Можно взять за основу правило: использовать типы по умолчанию, а интерфейсы, когда это необходимо.
⏱ Читать статью
#почитать
Когда использовать типы, а когда интерфейсы?
Можно взять за основу правило: использовать типы по умолчанию, а интерфейсы, когда это необходимо.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👎2
#посмотреть
Расскажу, как можно задавать цвета в CSS разными способами и зачем это может быть нужно. Покажу, как навести порядок в цветах вашего проекта и привести огромное количество оттенков к заданной палитре. Объясню, как в этом могут помочь новые форматы указания цветов и функции работы с ними из последней спецификации CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍2
Руководство по использованию Vite в React
#почитать
Когда начинаете новый проект React, выбор правильных инструментов может сильно повлиять на рабочий процесс. Хотя такие инструменты, как Webpack, широко используются уже много лет, новые варианты, такие как Vite, предлагают более быстрые и эффективные альтернативы.
⏱ Читать статью
#почитать
Когда начинаете новый проект React, выбор правильных инструментов может сильно повлиять на рабочий процесс. Хотя такие инструменты, как Webpack, широко используются уже много лет, новые варианты, такие как Vite, предлагают более быстрые и эффективные альтернативы.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7👎2❤1🔥1
Концепция временного View state в JavaScript
#почитать
В данной статье речь пойдёт о достаточно необычной теме, информацию о которой я почему-то не нашёл, хотя она достаточно полезна в современных JavaScript фреймворках и библиотеках для создания пользовательских интерфейсов, ведь, в некоторых случаях, применение концепции может помочь ускорить работу с DOM в несколько раз.
⏱ Читать статью
#почитать
В данной статье речь пойдёт о достаточно необычной теме, информацию о которой я почему-то не нашёл, хотя она достаточно полезна в современных JavaScript фреймворках и библиотеках для создания пользовательских интерфейсов, ведь, в некоторых случаях, применение концепции может помочь ускорить работу с DOM в несколько раз.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍1
Создаем динамические веб-сайты с
помощью PHP, MySQL, JavaScript,
CSS и HTML5
Автор: Никсон Робин
Год издания: 2023
#html #javascript #css #ru
Скачать книгу
помощью PHP, MySQL, JavaScript,
CSS и HTML5
Автор: Никсон Робин
Год издания: 2023
#html #javascript #css #ru
Скачать книгу
😁7👍3❤1
CSS Position — управление размещением элементов
#почитать
Наиболее часто используемые position значения:
▪️static(по умолчанию): элемент позиционируется в соответствии с обычным потоком документа. Свойства top, right, bottom и left не имеют никакого эффекта.
▪️relative: элемент позиционируется относительно своего обычного положения в потоке документа. Вы можете перемещать его, используя верх, право, низ или лево, но он все равно будет занимать место в своем исходном положении.
▪️absolute: элемент позиционируется относительно ближайшего позиционированного предка (не обязательно родителя) и удаляется из обычного потока документа.
▪️fixed: элемент позиционируется относительно окна браузера, то есть он остается на месте даже при прокрутке страницы.
▪️sticky: элемент переключается между относительным и фиксированным позиционированием в зависимости от положения прокрутки пользователем.
⏱ Читать статью
#почитать
Наиболее часто используемые position значения:
▪️static(по умолчанию): элемент позиционируется в соответствии с обычным потоком документа. Свойства top, right, bottom и left не имеют никакого эффекта.
▪️relative: элемент позиционируется относительно своего обычного положения в потоке документа. Вы можете перемещать его, используя верх, право, низ или лево, но он все равно будет занимать место в своем исходном положении.
▪️absolute: элемент позиционируется относительно ближайшего позиционированного предка (не обязательно родителя) и удаляется из обычного потока документа.
▪️fixed: элемент позиционируется относительно окна браузера, то есть он остается на месте даже при прокрутке страницы.
▪️sticky: элемент переключается между относительным и фиксированным позиционированием в зависимости от положения прокрутки пользователем.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2❤1
Chrome 130 - что нового
#почитать
• добавлена новая форма компактных уведомлений о совершённых операциях, показываемых под адресной строкой в виде небольшой полоски, перекрывающей контент;
• при включённом режиме экономии потребления энергии (Energy saver) реализована экспериментальная поддержка автоматической заморозки вкладок, потребляющих много ресурсов CPU, но при этом не выводящих звук и скрытых в течение более 5 минут. Исключение делается только для вкладок, связанных с управлением внешними устройствами или проведением видео и аудио конференций (подобные вкладки определяются на основании доступа к API для работы с USB, Bluetooth, камерой, устройствами ввода и микрофоном, а также организации канала связи с использованием RTCDataChannel или MediaStreamTrack);
• в версии для платформы Android реализован встроенный просмотрщик документов в формате PDF, не требующий вызова внешних приложений, а также появилась поддержка сторонних служб автозаполнения и хранения паролей;
• предоставлена возможность открытия в режиме «картинка в картинке» (picture-in-picture) не только видео, но и любых элементов для показа произвольного контента поверх другого содержимого;
• добавлена возможность обращения к внешним словарям со сжатием ответов при помощи алгоритмов Brotli и Zstandard;
• появилась поддержка активации областей прокрутки при навигации с использованием клавиатуры, что позволяет пользователям без мыши вначале переключиться в нужную область клавишей Tab, а затем прокрутить её содержимое стрелками управления курсором;
• добавлена поддержка разбора неспециальных схем URL (не включённых в список типовых схем) с разделением хоста и пути (парсер URL-адресов в Chrome теперь корректно обрабатывает нестандартные URL);
• Поведение элемента приведено к соответствию Safari и Firefox: в режиме видимости "none" элемент теперь не скрывается, а переключается на отдельный стиль;
• расширены возможности инструментов для веб-разработчиков. В панель анализа сетевой активности добавлено выпадающее меню с дополнительными фильтрами. Добавлена опция для чистки конфиденциальных данных перед сохранением HTTP-сеанса в формате HAR (HTTP Archive).
⏱ Подробнее
▫️ Посмотреть (en)
#почитать
• добавлена новая форма компактных уведомлений о совершённых операциях, показываемых под адресной строкой в виде небольшой полоски, перекрывающей контент;
• при включённом режиме экономии потребления энергии (Energy saver) реализована экспериментальная поддержка автоматической заморозки вкладок, потребляющих много ресурсов CPU, но при этом не выводящих звук и скрытых в течение более 5 минут. Исключение делается только для вкладок, связанных с управлением внешними устройствами или проведением видео и аудио конференций (подобные вкладки определяются на основании доступа к API для работы с USB, Bluetooth, камерой, устройствами ввода и микрофоном, а также организации канала связи с использованием RTCDataChannel или MediaStreamTrack);
• в версии для платформы Android реализован встроенный просмотрщик документов в формате PDF, не требующий вызова внешних приложений, а также появилась поддержка сторонних служб автозаполнения и хранения паролей;
• предоставлена возможность открытия в режиме «картинка в картинке» (picture-in-picture) не только видео, но и любых элементов для показа произвольного контента поверх другого содержимого;
• добавлена возможность обращения к внешним словарям со сжатием ответов при помощи алгоритмов Brotli и Zstandard;
• появилась поддержка активации областей прокрутки при навигации с использованием клавиатуры, что позволяет пользователям без мыши вначале переключиться в нужную область клавишей Tab, а затем прокрутить её содержимое стрелками управления курсором;
• добавлена поддержка разбора неспециальных схем URL (не включённых в список типовых схем) с разделением хоста и пути (парсер URL-адресов в Chrome теперь корректно обрабатывает нестандартные URL);
• Поведение элемента приведено к соответствию Safari и Firefox: в режиме видимости "none" элемент теперь не скрывается, а переключается на отдельный стиль;
• расширены возможности инструментов для веб-разработчиков. В панель анализа сетевой активности добавлено выпадающее меню с дополнительными фильтрами. Добавлена опция для чистки конфиденциальных данных перед сохранением HTTP-сеанса в формате HAR (HTTP Archive).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥3❤1
AggregateError в JavaScript
#почитать
AggregateError помогает обрабатывать сразу несколько ошибок в JavaScript. Это упрощает управление кодом и делает его надежным.
⏱ Читать статью
#почитать
AggregateError помогает обрабатывать сразу несколько ошибок в JavaScript. Это упрощает управление кодом и делает его надежным.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2❤1
7 принципов JavaScript, которые стоит запомнить
#почитать
▪️Замыкания сделают код чище
▪️Деструктуризация сделает код проще
▪️Debouncing и Throttling оптимизируют производительность
▪️Каррирование повышает гибкость функций
▪️Proxy перехватывает действия объектов
▪️Как работает цикл событий и асинхронный JavaScript
▪️Мемоизация улучшает производительность
⏱ Читать статью
#почитать
▪️Замыкания сделают код чище
▪️Деструктуризация сделает код проще
▪️Debouncing и Throttling оптимизируют производительность
▪️Каррирование повышает гибкость функций
▪️Proxy перехватывает действия объектов
▪️Как работает цикл событий и асинхронный JavaScript
▪️Мемоизация улучшает производительность
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍3❤1