This media is not supported in your browser
VIEW IN TELEGRAM
Астрологи объявили неделю фронтенд-разработчика 🔮
🎃В канун Дня Всех Святых Старшие Арканы развернули инфраструктуру на ваших серверах — выясните, что они предсказывают!
Раскидать жизнь по ассетам или разобраться с техдолгом?
Сделайте скриншот экрана — узнайте, какая карта определит вашу судьбу в профессии и какой амулет поможет избежать бед 🧿
Скрин, скрин!
🎃В канун Дня Всех Святых Старшие Арканы развернули инфраструктуру на ваших серверах — выясните, что они предсказывают!
Раскидать жизнь по ассетам или разобраться с техдолгом?
Сделайте скриншот экрана — узнайте, какая карта определит вашу судьбу в профессии и какой амулет поможет избежать бед 🧿
Скрин, скрин!
😁12👎1
ИИ для конвертации Figma в код
Познакомьтесь с уникальным ИИ сервисом, который преобразует ваш дизайн из Figma в рабочий код на HTML + CSS и React.
Забудьте о ручной вёрстке элементов: этот инструмент справляется с любым дизайном и выдаёт качественный код всего за пару кликов.
#react #figma
Познакомьтесь с уникальным ИИ сервисом, который преобразует ваш дизайн из Figma в рабочий код на HTML + CSS и React.
Забудьте о ручной вёрстке элементов: этот инструмент справляется с любым дизайном и выдаёт качественный код всего за пару кликов.
#react #figma
🤣23👍3🔥1
Аутентификация в React с Firebase
Аутентификация — ключевая часть многих веб-приложений, обеспечивающая безопасный доступ пользователей к их учётным записям и данным.
В этой статье рассматривается, как с помощью Firebase и React создать базовую систему аутентификации.
#react #firebase
Аутентификация — ключевая часть многих веб-приложений, обеспечивающая безопасный доступ пользователей к их учётным записям и данным.
В этой статье рассматривается, как с помощью Firebase и React создать базовую систему аутентификации.
#react #firebase
🤔4👍1
Читатели Типичного прислали ну очень много работ для конкурса «Лучший пет-проект 2023»
Вчера мы закрыли прием работ и отобрала из них только 25 лучших. Голосование начнется 6 ноября, поэтому у вас есть время чтобы не торопясь ознакомится с нашим шорт-листом:
https://tproger.ru/articles/luchwij-pet-proekt-2023-golosovanie-nachnyotsya-6-noyabrya
#diy #конкурс
Вчера мы закрыли прием работ и отобрала из них только 25 лучших. Голосование начнется 6 ноября, поэтому у вас есть время чтобы не торопясь ознакомится с нашим шорт-листом:
https://tproger.ru/articles/luchwij-pet-proekt-2023-golosovanie-nachnyotsya-6-noyabrya
#diy #конкурс
👍7
SSR и SEO в SPA
Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега
Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.
#spa #seo #vue
Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега
<head> менялось в зависимости от URL. Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.
#spa #seo #vue
❤5👎1
Интерактивный гайд по CRDT
Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.
В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.
#typescript #crdt
Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.
В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.
#typescript #crdt
🔥7👍3😁2🤔2
Веб-компоненты в 2023
Большинство фронтенд-разработчиков не понимают, что такое веб-компоненты и зачем они нужны. Стандарту уже несколько лет, но разработчики продолжают его игнорировать.
Автор, который занимается веб-разработкой уже 20 лет и сейчас возглавляет команду по созданию открытой платформы на основе веб-компонентов, решил поделится опытом и раскрыть мифы об этой технологии.
#html #dom
Большинство фронтенд-разработчиков не понимают, что такое веб-компоненты и зачем они нужны. Стандарту уже несколько лет, но разработчики продолжают его игнорировать.
Автор, который занимается веб-разработкой уже 20 лет и сейчас возглавляет команду по созданию открытой платформы на основе веб-компонентов, решил поделится опытом и раскрыть мифы об этой технологии.
#html #dom
👍16👎1
Как типизировать Vuex Store
Лидерство среди глобальных хранилищ состояний занимает Pinia, и она даже стала стандартом по умолчанию для всей экосистемы Vue. Но Vuex все ещё жив и активно используется.
В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.
В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.
#vue #pinia #typescript
Лидерство среди глобальных хранилищ состояний занимает Pinia, и она даже стала стандартом по умолчанию для всей экосистемы Vue. Но Vuex все ещё жив и активно используется.
В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.
В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.
#vue #pinia #typescript
👍6👎2
Создание портфолио
В статье автор рассказывает о том, как он с нуля создал свой персональный сайт на React и Tailwind CSS. Он делится кодом основных компонентов: навигационной панели, главной страницы, разделов образования и проектов.
Прочитав статью, вы узнаете, как добавить анимацию текста, иконки социальных сетей и настроить маршрутизацию. Но самое главное — вы сможете вдохновиться и создать свой собственный уникальный сайт-визитку.
#react #tailwind #портфолио
В статье автор рассказывает о том, как он с нуля создал свой персональный сайт на React и Tailwind CSS. Он делится кодом основных компонентов: навигационной панели, главной страницы, разделов образования и проектов.
Прочитав статью, вы узнаете, как добавить анимацию текста, иконки социальных сетей и настроить маршрутизацию. Но самое главное — вы сможете вдохновиться и создать свой собственный уникальный сайт-визитку.
#react #tailwind #портфолио
🤣16🔥3👍1
Соединение без сервера
Если вы мечтаете создать сервис видеосвязи, совместного редактирования документов или онлайн-игру — вам необходимо разобраться с WebRTC.
Эта технология позволяет веб-браузерам и мобильным приложениям устанавливать соединения типа peer-to-peer напрямую, минуя центральный сервер.
Автор статьи рассказывает о технологии и даёт рекомендации о том, как с помощью сигнального сервера организовать обмен данными.
#webrtc #javascript #браузеры
Если вы мечтаете создать сервис видеосвязи, совместного редактирования документов или онлайн-игру — вам необходимо разобраться с WebRTC.
Эта технология позволяет веб-браузерам и мобильным приложениям устанавливать соединения типа peer-to-peer напрямую, минуя центральный сервер.
Автор статьи рассказывает о технологии и даёт рекомендации о том, как с помощью сигнального сервера организовать обмен данными.
#webrtc #javascript #браузеры
❤8🤔2👍1
Приложение без клиентского Javascript
Next.js 13 привлёк первую волну внимания к React Server Components (RSC) в конце прошлого года. Перенос рендеринга на серверную сторону с самого начала вызывал много споров. Теоретически, с помощью RSC можно создать приложение, без использования JavaScript на стороне клиента.
Как хорошо это работает? Автор решил изучить этот вопрос на примере приложения для ведения блогов. Пусть это очень простое приложение, но оно послужит хорошим стартом для понимания новых возможностей фреймворка.
#react #next #server
Next.js 13 привлёк первую волну внимания к React Server Components (RSC) в конце прошлого года. Перенос рендеринга на серверную сторону с самого начала вызывал много споров. Теоретически, с помощью RSC можно создать приложение, без использования JavaScript на стороне клиента.
Как хорошо это работает? Автор решил изучить этот вопрос на примере приложения для ведения блогов. Пусть это очень простое приложение, но оно послужит хорошим стартом для понимания новых возможностей фреймворка.
#react #next #server
🔥10🤣3👎2🤔2🤯2❤1
Forwarded from Мобильная разработка
6 ноября начался второй этап конкурс на лучший пет-проект среди читателей Tproger
Для него из всех заявок было отобрано 10 участников. Авторы проектов, занявшие места с 1-е по 5-е, получат в подарок худи с лого Типичного и стикеры от редакции, а с 6-е по 10-е футболку с таким же лого и стикеры.
Выбирайте своего фаворита и следите за обновлениями: https://tproger.ru/articles/luchwij-pet-proekt-2023-golosovanie
Для него из всех заявок было отобрано 10 участников. Авторы проектов, занявшие места с 1-е по 5-е, получат в подарок худи с лого Типичного и стикеры от редакции, а с 6-е по 10-е футболку с таким же лого и стикеры.
Выбирайте своего фаворита и следите за обновлениями: https://tproger.ru/articles/luchwij-pet-proekt-2023-golosovanie
👍3🔥1🤯1
Как HTML и CSS влияют на доступность
Многие разработчики считают, что доступность веб-контента обеспечивается исключительно с помощью aria-атрибутов и что без них достичь доступности невозможно. В действительности, aria-атрибуты действительно важны, но столь же значимы для создания доступных интерфейсов и элементы HTML и CSS.
В статье автор анализирует множество неочевидных аспектов, которые оказывают влияние на доступность, и показывает, как их понимание может способствовать её улучшению.
#html #css #accessibility
Многие разработчики считают, что доступность веб-контента обеспечивается исключительно с помощью aria-атрибутов и что без них достичь доступности невозможно. В действительности, aria-атрибуты действительно важны, но столь же значимы для создания доступных интерфейсов и элементы HTML и CSS.
В статье автор анализирует множество неочевидных аспектов, которые оказывают влияние на доступность, и показывает, как их понимание может способствовать её улучшению.
#html #css #accessibility
❤8👍3🔥1