Производительность фронтенда: большое приложение на реактивном SSR-топливе
Как построить архитектуру фронта, чтобы приложение загружалось быстро и при этом выполняло требования поисковой оптимизации? Как мы можем это измерить?
Значительно повысить производительность можно при помощи серверного рендеринга, но какая будет цена у такой оптимизации? Какой инструмент выбрать — готовую библиотеку или собственное решение? Какие ограничения в дальнейшем могут быть вызваны выбором того или иного подхода?
На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021.
https://habr.com/ru/companies/superjob/articles/660681/
Original post link: t.me/senior_front/1909
Forwarded and filtered by @smartfeed_bot
Как построить архитектуру фронта, чтобы приложение загружалось быстро и при этом выполняло требования поисковой оптимизации? Как мы можем это измерить?
Значительно повысить производительность можно при помощи серверного рендеринга, но какая будет цена у такой оптимизации? Какой инструмент выбрать — готовую библиотеку или собственное решение? Какие ограничения в дальнейшем могут быть вызваны выбором того или иного подхода?
На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021.
https://habr.com/ru/companies/superjob/articles/660681/
Original post link: t.me/senior_front/1909
Forwarded and filtered by @smartfeed_bot
Хабр
Производительность фронтенда: большое приложение на реактивном SSR-топливе
Каждый день сайтом SuperJob пользуется более миллиона людей. Как построить архитектуру фронта, чтобы приложение загружалось быстро и при этом выполняло требования поисковой оптимизации? Как мы можем...
📋Ленивые бесконечные списки на основе Deferrable Views
В этой статье поделюсь реализацией списков на основе Deferrable Views, недавно появившихся в Angular 17.
Читать...
Original post link: t.me/frontendnoteschannel/3405
Forwarded and filtered by @smartfeed_bot
В этой статье поделюсь реализацией списков на основе Deferrable Views, недавно появившихся в Angular 17.
Читать...
Original post link: t.me/frontendnoteschannel/3405
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Covers
Здесь реализовано множество простых анимаций при наведении на блок.
👉 @seniorFront
Original post link: t.me/seniorFront/3899
Forwarded and filtered by @smartfeed_bot
Здесь реализовано множество простых анимаций при наведении на блок.
👉 @seniorFront
Original post link: t.me/seniorFront/3899
Forwarded and filtered by @smartfeed_bot
Осторожно, PHP калечит людей...
Original post link: t.me/tproger_web/4438
Forwarded and filtered by @smartfeed_bot
Original post link: t.me/tproger_web/4438
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Platonic solids
Анимированный настраиваемый многогранник, выполненный с помощью CSS и JavaScript.
https://codepen.io/Dillo/pen/OJOjdQp
Original post link: t.me/senior_front/1911
Forwarded and filtered by @smartfeed_bot
Анимированный настраиваемый многогранник, выполненный с помощью CSS и JavaScript.
https://codepen.io/Dillo/pen/OJOjdQp
Original post link: t.me/senior_front/1911
Forwarded and filtered by @smartfeed_bot
👆Интерфейс под один палец. Концепция ONE TOUCH
В этой статье автор расскажет о концепции ONE TOUCH, которая предполагает выполнение любого действия в приложении одним пальцем, в любом положении экрана.
Читать...
Original post link: t.me/frontendnoteschannel/3407
Forwarded and filtered by @smartfeed_bot
В этой статье автор расскажет о концепции ONE TOUCH, которая предполагает выполнение любого действия в приложении одним пальцем, в любом положении экрана.
Читать...
Original post link: t.me/frontendnoteschannel/3407
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 12 messages
Today you received: 8 messages
Our filtering prevented you from: 4 messages
Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Веб-страница: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 12 messages
Today you received: 8 messages
Our filtering prevented you from: 4 messages
Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Веб-страница: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
Наглядные примеры использования React Hooks
В этой статье вы узнаете различные особенности React Hooks и получите полезные советы по их использованию. Автор объясняет, как работать с хуками жизненного цикла, кастомными хуками и хуками контекста, а также как обрабатывать ошибки в хуках на наглядных примерах с кодом.
https://css-tricks.com/react-hooks-the-deep-cuts/
@tproger_web #react #фронтенд
Original post link: t.me/tproger_web/4439
Forwarded and filtered by @smartfeed_bot
В этой статье вы узнаете различные особенности React Hooks и получите полезные советы по их использованию. Автор объясняет, как работать с хуками жизненного цикла, кастомными хуками и хуками контекста, а также как обрабатывать ошибки в хуках на наглядных примерах с кодом.
https://css-tricks.com/react-hooks-the-deep-cuts/
@tproger_web #react #фронтенд
Original post link: t.me/tproger_web/4439
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Что выбрать опытному разработчику? Фриланс vs агентство
Существует миф, что на фрилансе разработчику можно заработать больше, чем работая на агентство. Может быть, это бы и было так, если бы разработчики умели себя продавать. По статистике, если взять двух специалистов с абсолютно одинаковыми hard- и soft-скиллами, но один из них работает на крупного интегратора, а другой - на фрилансе, стоимость их часа будет отличаться как минимум в два раза. Причем не в пользу “свободного плаванья”. Итак, почему же на интегратора работать выгоднее?
Умение продавать
Это, пожалуй, первое и основное. В крупном агентстве работает целый штат маркетологов, которые могут донести ценность услуг своих сотрудников до нужной аудитории. И эту ценность крупный интегратор добавляет к стоимости часа. Здесь уже не придется бороться со своим “синдромом самозванца”, мучиться на тему “дорого или не дорого беру” и других психологических загонов. Просто читаешь свою анкету на сайте и понимаешь, насколько ты крут.
Ценность, которую необходимо создать, делится на два показателя:
1. Выгода: помощь вашему клиенту в увеличении дохода, прибыли, узнаваемости, репутации.
2. Боль: помощь вашему клиенту в снижении затрат, рисков, проблем.
Сложности общения с клиентом
Знаем по опыту, что разработчики часто интроверты и им сложно много общаться с людьми. Особенно со “сложными” клиентами. С этим часто связано и достижение потолка чистой прибыли на фрилансе. Ведь важно не только качественно предоставлять услуги и выполнять «объемы работы», но и решать проблемы заказчиков, заниматься исследованием, задавать много вопросов и анализировать.
Конкуренция
Рынок фриланса — высококонкурентный. И чтобы быть на нем заметным, нужно прилагать много усилий и тратить на это колоссальное количество времени и сил. Сотрудничая с интегратором, вы попадаете в творческую среду роста и развития, где задач и клиентов хватает на всех.
Пространство для творчества
Кстати, о творчестве. Одной из проблем, с которыми сталкивается рынок фриланса среди разработчиков — механическое выполнении заранее установленных списков задач. Наихудший из возможных подходов — отвечать на каждый вопрос точно так, как задано, отмечать все поля в точности так, как указано, и предоставлять запрошенную информацию буквально, независимо от того, насколько она неуместна. Ваша миссия — продемонстрировать, что вы не похожи ни на кого другого, не с точки зрения стиля и оформления КП, а с точки зрения погружения в суть проблемы.
Как вы планируете выделиться из всех, если все ваши действия специально сделаны, как указано в ТЗ?
Причем это не значит, что вы должны вообще не обращать внимания на этот процесс или грубо игнорировать запросы на получение нужной для клиента информации.
Топовые агентства используют все более изобретательные методы к взаимодействию с клиентами на этапе оценки, они рассматривают проблемы выходя за рамки технического задания, которое предоставил клиент. Они сосредотачивают свою энергию и вектор на творческом решении маркетинговых, продуктовых и других проблем.
👉 @seniorFront
Существует миф, что на фрилансе разработчику можно заработать больше, чем работая на агентство. Может быть, это бы и было так, если бы разработчики умели себя продавать. По статистике, если взять двух специалистов с абсолютно одинаковыми hard- и soft-скиллами, но один из них работает на крупного интегратора, а другой - на фрилансе, стоимость их часа будет отличаться как минимум в два раза. Причем не в пользу “свободного плаванья”. Итак, почему же на интегратора работать выгоднее?
Умение продавать
Это, пожалуй, первое и основное. В крупном агентстве работает целый штат маркетологов, которые могут донести ценность услуг своих сотрудников до нужной аудитории. И эту ценность крупный интегратор добавляет к стоимости часа. Здесь уже не придется бороться со своим “синдромом самозванца”, мучиться на тему “дорого или не дорого беру” и других психологических загонов. Просто читаешь свою анкету на сайте и понимаешь, насколько ты крут.
Ценность, которую необходимо создать, делится на два показателя:
1. Выгода: помощь вашему клиенту в увеличении дохода, прибыли, узнаваемости, репутации.
2. Боль: помощь вашему клиенту в снижении затрат, рисков, проблем.
Сложности общения с клиентом
Знаем по опыту, что разработчики часто интроверты и им сложно много общаться с людьми. Особенно со “сложными” клиентами. С этим часто связано и достижение потолка чистой прибыли на фрилансе. Ведь важно не только качественно предоставлять услуги и выполнять «объемы работы», но и решать проблемы заказчиков, заниматься исследованием, задавать много вопросов и анализировать.
Конкуренция
Рынок фриланса — высококонкурентный. И чтобы быть на нем заметным, нужно прилагать много усилий и тратить на это колоссальное количество времени и сил. Сотрудничая с интегратором, вы попадаете в творческую среду роста и развития, где задач и клиентов хватает на всех.
Пространство для творчества
Кстати, о творчестве. Одной из проблем, с которыми сталкивается рынок фриланса среди разработчиков — механическое выполнении заранее установленных списков задач. Наихудший из возможных подходов — отвечать на каждый вопрос точно так, как задано, отмечать все поля в точности так, как указано, и предоставлять запрошенную информацию буквально, независимо от того, насколько она неуместна. Ваша миссия — продемонстрировать, что вы не похожи ни на кого другого, не с точки зрения стиля и оформления КП, а с точки зрения погружения в суть проблемы.
Как вы планируете выделиться из всех, если все ваши действия специально сделаны, как указано в ТЗ?
Причем это не значит, что вы должны вообще не обращать внимания на этот процесс или грубо игнорировать запросы на получение нужной для клиента информации.
Топовые агентства используют все более изобретательные методы к взаимодействию с клиентами на этапе оценки, они рассматривают проблемы выходя за рамки технического задания, которое предоставил клиент. Они сосредотачивают свою энергию и вектор на творческом решении маркетинговых, продуктовых и других проблем.
👉 @seniorFront
😶🌫Web3 приложение Twitter на React.js + Solidity | часть 2
В этой статье описывается создание frontend на React, подключение кошельков, работы со смарт-контрактом через веб-приложение.
Читать...
Original post link: t.me/frontendnoteschannel/3409
Forwarded and filtered by @smartfeed_bot
В этой статье описывается создание frontend на React, подключение кошельков, работы со смарт-контрактом через веб-приложение.
Читать...
Original post link: t.me/frontendnoteschannel/3409
Forwarded and filtered by @smartfeed_bot
Уникальный сервер для любых задач в Амстердаме за 2$ в месяц
1 Gb RAM / 1 core CPU / 10 Gb NVMe - 2$ в месяц
https://www.vdsina.com/ru/pricing/standard/?partner=peawgsd98f
- Уникальная фиксированная цена в долларах США, которая не будет меняться
- Компания зарегистрирована в Дубае
- Оплата с рублёвой карты, криптой, иностранной картой через Stripe
- Готовые шаблоны с Outline, WireGuard, IPsec
- Подключение к сети интернет — 10 Гбит/сек
- Доступны все популярные сайты, включая ChatGPT, Netflix, Dell, Intel
Почему я должен верить компании? VDSina работает с 2014 года и сейчас обслуживает более 40 000 серверов. Сомневаетесь? Вот чат в телеграме — задавайте вопросы другим пользователям: https://t.me/vdsina
Original post link: t.me/seniorFront/3901
Forwarded and filtered by @smartfeed_bot
1 Gb RAM / 1 core CPU / 10 Gb NVMe - 2$ в месяц
https://www.vdsina.com/ru/pricing/standard/?partner=peawgsd98f
- Уникальная фиксированная цена в долларах США, которая не будет меняться
- Компания зарегистрирована в Дубае
- Оплата с рублёвой карты, криптой, иностранной картой через Stripe
- Готовые шаблоны с Outline, WireGuard, IPsec
- Подключение к сети интернет — 10 Гбит/сек
- Доступны все популярные сайты, включая ChatGPT, Netflix, Dell, Intel
Почему я должен верить компании? VDSina работает с 2014 года и сейчас обслуживает более 40 000 серверов. Сомневаетесь? Вот чат в телеграме — задавайте вопросы другим пользователям: https://t.me/vdsina
Original post link: t.me/seniorFront/3901
Forwarded and filtered by @smartfeed_bot
Интересный codepen-проект: Book Writing Animation
Анимация набора текста сделана при помощи пакета typewriter-effect. Он позволяет создать зрелищные и динамичные эффекты печати текста на веб-страницах.
Исходники: https://codepen.io/wakana-k/pen/bGxaoNv
@tproger_web #codepen
Original post link: t.me/tproger_web/4441
Forwarded and filtered by @smartfeed_bot
Анимация набора текста сделана при помощи пакета typewriter-effect. Он позволяет создать зрелищные и динамичные эффекты печати текста на веб-страницах.
Исходники: https://codepen.io/wakana-k/pen/bGxaoNv
@tproger_web #codepen
Original post link: t.me/tproger_web/4441
Forwarded and filtered by @smartfeed_bot
🎨 Цветовая палитра макета "Geepay Fitness Tracking App"
Сайтодел | #палитра
Original post link: t.me/sitodel/1697
Forwarded and filtered by @smartfeed_bot
HEX | RGB #AAD19C | rgb(170,209,156)
#E0A5AArgb(224,165,170) #8FA2C6 | rgb(143,162,198)
⚠️ Цвет копируется одним кликом!Сайтодел | #палитра
Original post link: t.me/sitodel/1697
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Как минимизировать конфликты между разработчиками и тестировщиками
1. Минимизируй конфликтные ситуации, результаты тестирования необходимо представлять в максимально нейтральном виде, ориентированном на факты, а не на критику автора.
2. Цели и задачи работы должны быть ясны. Не ленитесь лишний раз убедиться, что достигли взаимопонимания, спрашивай себя, верно ли тебя понял визави.
3. Обе стороны должны помнить о единой цели – максимально качественно работающая система.
4. Необходимо координировать механизмы трудового процесса с обеих сторон, учитывая мнение как разработчика, так и тестировщика.
5. Подключай эмпатию, старайся учитывать чувства коллеги.
6. Не создавай дополнительного напряжения, избегай токсичных высказываний и недомолвок.
7. Если придётся работать в одной команде долгое время, поинтересуйся у коллеги его интересами, опыте и других аспектах жизни, находя точки соприкосновения.
👉 @seniorFront
1. Минимизируй конфликтные ситуации, результаты тестирования необходимо представлять в максимально нейтральном виде, ориентированном на факты, а не на критику автора.
2. Цели и задачи работы должны быть ясны. Не ленитесь лишний раз убедиться, что достигли взаимопонимания, спрашивай себя, верно ли тебя понял визави.
3. Обе стороны должны помнить о единой цели – максимально качественно работающая система.
4. Необходимо координировать механизмы трудового процесса с обеих сторон, учитывая мнение как разработчика, так и тестировщика.
5. Подключай эмпатию, старайся учитывать чувства коллеги.
6. Не создавай дополнительного напряжения, избегай токсичных высказываний и недомолвок.
7. Если придётся работать в одной команде долгое время, поинтересуйся у коллеги его интересами, опыте и других аспектах жизни, находя точки соприкосновения.
👉 @seniorFront
This media is not supported in your browser
VIEW IN TELEGRAM
Profile Card UI — Карточка профиля, написанная с помощью SCSS и JavaScript.
https://codepen.io/team/jotform/pen/XWmqoMp
Original post link: t.me/senior_front/1914
Forwarded and filtered by @smartfeed_bot
https://codepen.io/team/jotform/pen/XWmqoMp
Original post link: t.me/senior_front/1914
Forwarded and filtered by @smartfeed_bot
🧐SSR: ключевой элемент сайта, который требует особого внимания
В этой статье поговорим про SSR — что это, зачем использовать, как с этим работать, чтобы все получалось.
Читать...
Original post link: t.me/frontendnoteschannel/3411
Forwarded and filtered by @smartfeed_bot
В этой статье поговорим про SSR — что это, зачем использовать, как с этим работать, чтобы все получалось.
Читать...
Original post link: t.me/frontendnoteschannel/3411
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 14 messages
Today you received: 9 messages
Our filtering prevented you from: 5 messages
Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Веб-страница: 3 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 14 messages
Today you received: 9 messages
Our filtering prevented you from: 5 messages
Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Веб-страница: 3 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
This media is not supported in your browser
VIEW IN TELEGRAM
Monster Mash (Game)
Игра, созданная на canvas и JS.
https://codepen.io/grantjenkins/pen/xxjQmmo
Original post link: t.me/senior_front/1915
Forwarded and filtered by @smartfeed_bot
Игра, созданная на canvas и JS.
https://codepen.io/grantjenkins/pen/xxjQmmo
Original post link: t.me/senior_front/1915
Forwarded and filtered by @smartfeed_bot
Уникальный сервер для любых задач в Амстердаме за 2$ в месяц
1 Gb RAM / 1 core CPU / 10 Gb NVMe - 2$ в месяц
https://www.vdsina.com/ru/pricing/standard
- Уникальная фиксированная цена в долларах США, которая не будет меняться
- Компания зарегистрирована в Дубае
- Оплата с рублёвой карты, криптой, иностранной картой через Stripe
- Готовые шаблоны с Outline, WireGuard, IPsec
- Подключение к сети интернет — 10 Гбит/сек
- Доступны все популярные сайты, включая ChatGPT, Netflix
Почему я должен верить компании? VDSina работает с 2014 года и сейчас обслуживает более 40 000 серверов. Сомневаетесь? Вот чат в телеграме — задавайте вопросы другим пользователям: https://t.me/vdsina
Original post link: t.me/senior_front/1916
Forwarded and filtered by @smartfeed_bot
1 Gb RAM / 1 core CPU / 10 Gb NVMe - 2$ в месяц
https://www.vdsina.com/ru/pricing/standard
- Уникальная фиксированная цена в долларах США, которая не будет меняться
- Компания зарегистрирована в Дубае
- Оплата с рублёвой карты, криптой, иностранной картой через Stripe
- Готовые шаблоны с Outline, WireGuard, IPsec
- Подключение к сети интернет — 10 Гбит/сек
- Доступны все популярные сайты, включая ChatGPT, Netflix
Почему я должен верить компании? VDSina работает с 2014 года и сейчас обслуживает более 40 000 серверов. Сомневаетесь? Вот чат в телеграме — задавайте вопросы другим пользователям: https://t.me/vdsina
Original post link: t.me/senior_front/1916
Forwarded and filtered by @smartfeed_bot
JavaScript. Что будет выведено в консоль?
Ответ
Original post link: t.me/senior_front/1917
Forwarded and filtered by @smartfeed_bot
Ответ
Original post link: t.me/senior_front/1917
Forwarded and filtered by @smartfeed_bot
Forwarded from Веб-страница
Состоялся релиз WinterJS — самой быстрой среды выполнения JavaScript
Разработчики Wasmer представили среду выполнения JavaScript-кода WinterJS 1.0. Проект поддерживает компоненты React Server и работу с Cloudflare API.
WinterJS анонсировали в октябре 2023 года, а уже сейчас проект поддерживает обработку базовых HTTP-запросов и цикл событий JavaScript. Среду выполнения можно полностью скомпилировать в WebAssembly, что делает её первой поддерживающей полную совместимость с Wasmer Edge. Код WinterJS написан на JavaScript и Rust.
Из приятных особенностей WinterJS:
— обработка 150 тыс. запросов в секунду, что делает среду выполнения самой быстрой из доступных.
— совместимость с Cloudflare API;
— поддержка веб-фреймворков Next.js, Hono, Astro, SvelteKit, компонентов React Server, Nuxt, Gatsby и Remix.run.
Код среды выполнения WinterJS открыт и опубликован на GitHub: https://github.com/wasmerio/winterjs
@tproger_web #javascript
Разработчики Wasmer представили среду выполнения JavaScript-кода WinterJS 1.0. Проект поддерживает компоненты React Server и работу с Cloudflare API.
WinterJS анонсировали в октябре 2023 года, а уже сейчас проект поддерживает обработку базовых HTTP-запросов и цикл событий JavaScript. Среду выполнения можно полностью скомпилировать в WebAssembly, что делает её первой поддерживающей полную совместимость с Wasmer Edge. Код WinterJS написан на JavaScript и Rust.
Из приятных особенностей WinterJS:
— обработка 150 тыс. запросов в секунду, что делает среду выполнения самой быстрой из доступных.
— совместимость с Cloudflare API;
— поддержка веб-фреймворков Next.js, Hono, Astro, SvelteKit, компонентов React Server, Nuxt, Gatsby и Remix.run.
Код среды выполнения WinterJS открыт и опубликован на GitHub: https://github.com/wasmerio/winterjs
@tproger_web #javascript
