Фиксированный заголовок у таблиц с помощью React хуков
#react #hooks #frontend #webdev #jsarticle #javascript #html
#react #hooks #frontend #webdev #jsarticle #javascript #html
webup.org
Sticky Table Header with React Hooks
Long tables with an endless scroll. Tables are great presentational medium for data, but it's not straightforward to stick their headers on top. Confronting that limitation with React hooks.
Сравнение производительности циклов в JavaScript
В статье описаны результаты анализа бенчмарков разных видов циклов, таких как
В разных браузерах производительность видов циклов разная, т.к. у каждого браузера свои оптимизации. В Chrome самым быстрым оказался
Хуже всего по производительности оказался
#jsarticle #javascript #frontend #webdev #perf
В статье описаны результаты анализа бенчмарков разных видов циклов, таких как
forEach, while, for ... in и т.д.В разных браузерах производительность видов циклов разная, т.к. у каждого браузера свои оптимизации. В Chrome самым быстрым оказался
for, в Firefox forEach, for и map.Хуже всего по производительности оказался
for...in в обоих браузерах, и while в Firefox.#jsarticle #javascript #frontend #webdev #perf
Medium
Measuring Performance of Different JavaScript Loop Types
Optimize your JavaScript code by using the right loop types.
Ускорение CSS-in-JS в 175 раз
В статье описан процесс оптимизации стилей на Emotion путём его замены на Linaria, использованием
#jsarticle #cssinjs #css #javascript #frontend #webdev #react
В статье описан процесс оптимизации стилей на Emotion путём его замены на Linaria, использованием
data атрибутов и CSS переменных#jsarticle #cssinjs #css #javascript #frontend #webdev #react
Medium
How to increase CSS-in-JS performance by 175x
I like the convenience of CSS-in-JS especially being able to co-locate styling but I’m not convinced on a few of things:
Microsite — статический генератор сайтов, основанный на Preact и Snowpack, поддерживающий автоматическую частичную регидрацию
Примечателен тем, что в отличие от веб фреймворков, таких как Next.js, Microsite отсылает в браузер только тот код, который используется страницей, при этом не отправляя код библиотек. В результате получаются очень быстрые страницы с минимальным количеством JavaScript.
Из других фич можно выделить:
- Генерация в ESM модули, как для серверной части, так и для клиентской
- Поддерживается JS, JSX и TSX
- Использует Preact в отличие от Next, что позволяет уменьшить размер бандла
- Поддержка CSS модулей из коробки
-
- Управление глобальным состоянием через
- Поддержка TypeScript из коробки
#jslib #javascript #frontend #webdev #preact #ssg #typescript
Примечателен тем, что в отличие от веб фреймворков, таких как Next.js, Microsite отсылает в браузер только тот код, который используется страницей, при этом не отправляя код библиотек. В результате получаются очень быстрые страницы с минимальным количеством JavaScript.
Из других фич можно выделить:
- Генерация в ESM модули, как для серверной части, так и для клиентской
- Поддерживается JS, JSX и TSX
- Использует Preact в отличие от Next, что позволяет уменьшить размер бандла
- Поддержка CSS модулей из коробки
-
getStaticProps для получения данных при сборке- Управление глобальным состоянием через
createGlobalState- Поддержка TypeScript из коробки
#jslib #javascript #frontend #webdev #preact #ssg #typescript
GitHub
GitHub - natemoo-re/microsite: Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator…
Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack. - GitHub - natemoo-re/microsite: Do more with less JavaScript. Micro...
Вышел tinyhttp 1.1
- В
- Исправлены баги с неправильными значениями у
- Исправлена некорректная кодировка для
- Исправлено некорректное наследование настроек шаблонизатора для
#jslib #backend #webdev #javascript #typescript #tinyhttp #nodejs
- В
@tinyhttp/markdown добавлена опция для кэширования, рекурсия теперь включена по дефолту (что избавляет от зависимости readdirp) и вместо превращения в строку и вызова res.send теперь используются Node.js Streams, чтобы рендерить markdown через потоки- Исправлены баги с неправильными значениями у
req.url, req.path и req.originalUrl- Исправлена некорректная кодировка для
res.redirect- Исправлено некорректное наследование настроек шаблонизатора для
res.render#jslib #backend #webdev #javascript #typescript #tinyhttp #nodejs
GitHub
Release v1.1.0. Markdown server upgrade & minor fixes · tinyhttp/tinyhttp
Core
Fixes bugs with req.url, req.path and req.originaUrl (#203)
Fixes res.redirect incorrect URI encoding (#205)
Fixes res.set (and extensions using it) not adding charset
Fixes res.render not in...
Fixes bugs with req.url, req.path and req.originaUrl (#203)
Fixes res.redirect incorrect URI encoding (#205)
Fixes res.set (and extensions using it) not adding charset
Fixes res.render not in...
Команда React анонсировала серверные компоненты
В React в будущем планируется добавить новый тип компонентов - Server Components. В отличие от обычных (Client Components), рендярятся только на сервере и не отправляют никакого JavaScript в браузер
Для ознакомления
- Видео-анонс
- демо с кодом
- RFC
Сейчас концепт находится в процессе изучения и разработки, поэтому он нескоро будет добавлен в React
#jsarticle #javascript #react #frontend #webdev
В React в будущем планируется добавить новый тип компонентов - Server Components. В отличие от обычных (Client Components), рендярятся только на сервере и не отправляют никакого JavaScript в браузер
Для ознакомления
- Видео-анонс
- демо с кодом
- RFC
Сейчас концепт находится в процессе изучения и разработки, поэтому он нескоро будет добавлен в React
#jsarticle #javascript #react #frontend #webdev
legacy.reactjs.org
Introducing Zero-Bundle-Size React Server Components – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. To introduce React…
Мы отрендерили миллион страниц, чтобы узнать что делает их медленнее
Статья с анализом производительности миллиона страниц и поддержки различных технологий пользователями, включая сравнение частоты использования и скорости разных версий HTTP, TTI метрик, производительности популярных библиотек
#jsarticle #javascript #frontend #webdev #perf
Статья с анализом производительности миллиона страниц и поддержки различных технологий пользователями, включая сравнение частоты использования и скорости разных версий HTTP, TTI метрик, производительности популярных библиотек
#jsarticle #javascript #frontend #webdev #perf
Medium
We rendered a million web pages to find out what makes the web slow
We rendered the top 1 million pages on the web, tracking every conceivable performance metric, logging every error, noting every requested…
Сравнение производительности JavaScript фреймворков на 2020 год
Сравниваются 20 библиотек, включая Vue, React, Svelte, Hyperapp и др.
Самым быстрым (сумма всех метрик) оказался SolidJS, за ним идут Hyperapp и Inferno
Из самых медленных: Angular, Knockout, Ractive и Ember
#jsarticle #javascript #frontend #webdev #perf
Сравниваются 20 библиотек, включая Vue, React, Svelte, Hyperapp и др.
Самым быстрым (сумма всех метрик) оказался SolidJS, за ним идут Hyperapp и Inferno
Из самых медленных: Angular, Knockout, Ractive и Ember
#jsarticle #javascript #frontend #webdev #perf
Medium
JavaScript Frameworks, Performance Comparison 2020
The ultimate performance battle between JavaScript frameworks