Приложение без клиентского 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
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
Как HTML и CSS влияют на доступность
Многие разработчики считают, что доступность веб-контента обеспечивается исключительно с помощью aria-атрибутов и что без них достичь доступности невозможно. В действительности, aria-атрибуты действительно важны, но столь же значимы для создания доступных интерфейсов и элементы HTML и CSS.
В статье автор анализирует множество неочевидных аспектов, которые оказывают влияние на доступность, и показывает, как их понимание может способствовать её улучшению.
#html #css #accessibility
Многие разработчики считают, что доступность веб-контента обеспечивается исключительно с помощью aria-атрибутов и что без них достичь доступности невозможно. В действительности, aria-атрибуты действительно важны, но столь же значимы для создания доступных интерфейсов и элементы HTML и CSS.
В статье автор анализирует множество неочевидных аспектов, которые оказывают влияние на доступность, и показывает, как их понимание может способствовать её улучшению.
#html #css #accessibility
Подборка актуальных вакансий
— UX-редактор в МТС
Где: удалённо
Опыт: от 2 лет
— Эксперт QA [Governance] в МТС
Где: удалённо
Опыт: от 3 лет
— Middle / Senior Python-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет
— Middle / Senior Backend Developer (Python) в команду Атом.Око в Гринатом
Где: удалённо
Опыт: от 3 лет
— Senior QA Automation Java / Kotlin в Иннотех
Где: удалённо
Опыт: от 3 лет
— Ведущий Java-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет
— Архитектор сетей в защищённом исполнении в Гринатом
Где: удалённо
Опыт: от 3 лет
— ИТ-архитектор в Гринатом
Где: удалённо
Опыт: от 3 лет
— Senior Java Developer на продукт МТС Аналитика (Big Data) в МТС
Где: удалённо
Опыт: от 4 лет
— Senior / Middle BackEnd Java Developer Центр HR TECH в Гринатом:
Где: удалённо
Опыт: от 4 лет
— Senior Fullstack Developer / Фулстек разработчик (.net/react) в Иннотех
Где: удалённо
Опыт: от 5 лет
— Team Lead Python Developer HR TECH (Проект Мобильный личный кабинет) в Гринатом
Где: удалённо
Опыт: от 5 лет
— Chief Product Officer / CPO стрима Сети и Медиа в МТС
Где: удалённо
Опыт: от 6 лет
#вакансии #работа
— UX-редактор в МТС
Где: удалённо
Опыт: от 2 лет
— Эксперт QA [Governance] в МТС
Где: удалённо
Опыт: от 3 лет
— Middle / Senior Python-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет
— Middle / Senior Backend Developer (Python) в команду Атом.Око в Гринатом
Где: удалённо
Опыт: от 3 лет
— Senior QA Automation Java / Kotlin в Иннотех
Где: удалённо
Опыт: от 3 лет
— Ведущий Java-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет
— Архитектор сетей в защищённом исполнении в Гринатом
Где: удалённо
Опыт: от 3 лет
— ИТ-архитектор в Гринатом
Где: удалённо
Опыт: от 3 лет
— Senior Java Developer на продукт МТС Аналитика (Big Data) в МТС
Где: удалённо
Опыт: от 4 лет
— Senior / Middle BackEnd Java Developer Центр HR TECH в Гринатом:
Где: удалённо
Опыт: от 4 лет
— Senior Fullstack Developer / Фулстек разработчик (.net/react) в Иннотех
Где: удалённо
Опыт: от 5 лет
— Team Lead Python Developer HR TECH (Проект Мобильный личный кабинет) в Гринатом
Где: удалённо
Опыт: от 5 лет
— Chief Product Officer / CPO стрима Сети и Медиа в МТС
Где: удалённо
Опыт: от 6 лет
#вакансии #работа
Предлагаем вспомнить свойство CSS
—
—
—
—
—
position
. Оно управляет расположением элементов. Основные значения:—
static
(по умолчанию),—
relative
(смещение от исходной позиции),—
absolute
(позиционирование относительно ближайшего относительно позиционированного предка),—
fixed
(фиксация на экране),—
sticky
(переключение между относительным и фиксированным при прокрутке).Почему веб-разработчики лучше ИИ
Сегодня ИИ — это модный термин. Многие компании, занимающиеся разработкой программного обеспечения, используют его в процессе разработки, но все приходят к одному и тому же выводу. ИИ не способен заменить разработчиков.
Давайте рассмотрим причины: https://dzone.com/articles/the-power-of-ai-why-web-developers-still-reign-sup
#ai #данные #алгоритмы
Сегодня ИИ — это модный термин. Многие компании, занимающиеся разработкой программного обеспечения, используют его в процессе разработки, но все приходят к одному и тому же выводу. ИИ не способен заменить разработчиков.
Давайте рассмотрим причины: https://dzone.com/articles/the-power-of-ai-why-web-developers-still-reign-sup
#ai #данные #алгоритмы
Создание чата в реальном времени
Эта статья научит вас создавать аккаунты, отправлять сообщения и добавлять редакторы текста в чат на React и Node.js.
Вы узнаете, как настроить аутентификацию с Clerk и обеспечить обмен данными через Websocket с помощью Socket.io.
#практика #гайды #websocket
Эта статья научит вас создавать аккаунты, отправлять сообщения и добавлять редакторы текста в чат на React и Node.js.
Вы узнаете, как настроить аутентификацию с Clerk и обеспечить обмен данными через Websocket с помощью Socket.io.
#практика #гайды #websocket
Продвинутый TypeScript
Это постоянно обновляемая коллекция статей, посвящённых продвинутым возможностям TypeScript. Они организованы по примерам использования и подробно описывают необычные особенности языка.
Каждая статья является самодостаточной, но мы рекомендуем читать их последовательно, как книгу. Таким образом, вы увидите знакомые концепции под новым углом.
#typescript #javascript
Это постоянно обновляемая коллекция статей, посвящённых продвинутым возможностям TypeScript. Они организованы по примерам использования и подробно описывают необычные особенности языка.
Каждая статья является самодостаточной, но мы рекомендуем читать их последовательно, как книгу. Таким образом, вы увидите знакомые концепции под новым углом.
#typescript #javascript
Множество микросервисов, завязанных на монолит, пытаются ускорить работу системы:
Принцип работы async/await
Если вам доводилось работать с JavaScript, то вы наверняка знакомы с async/await. Эта функциональность позволяет прописывать асинхронную логику синхронным образом, упрощая её понимание.
Некоторым ветеранам JS известно, что async/await — это просто синтаксический сахар для существующего Promises API. Это означает, что в JS должен быть способ реализации функциональности async/await без использования ключевых слов async и await, хоть и более громоздкий. Именно об этом и пойдёт речь в статье.
#javascript #async #promises
Если вам доводилось работать с JavaScript, то вы наверняка знакомы с async/await. Эта функциональность позволяет прописывать асинхронную логику синхронным образом, упрощая её понимание.
Некоторым ветеранам JS известно, что async/await — это просто синтаксический сахар для существующего Promises API. Это означает, что в JS должен быть способ реализации функциональности async/await без использования ключевых слов async и await, хоть и более громоздкий. Именно об этом и пойдёт речь в статье.
#javascript #async #promises
Разыскиваются UX/UI дизайнеры
Essence Lab — это стартап, который помогает женщинам стать более продуктивными, планировать жизнь, исходя из своих циклов, больше узнать о своем организме.
Сейчас им требуется UX/UI дизайнер на проектную работу с возможностью трудоустройства в будущем. Вот что ему предстоит делать:
— погружаться в проблемы пользователей;
— проектировать пользовательские интерфейсы на основе общения с пользователями, конкурентного анализа и изучения best-practices;
— создавать дизайн-макеты и интерактивные прототипы в Fgma;
— участвовать в планировании и демонстрации проекта.
Если заинтересовались, то пишите сюда: @d_mishukov
#вакансии #работа
Essence Lab — это стартап, который помогает женщинам стать более продуктивными, планировать жизнь, исходя из своих циклов, больше узнать о своем организме.
Сейчас им требуется UX/UI дизайнер на проектную работу с возможностью трудоустройства в будущем. Вот что ему предстоит делать:
— погружаться в проблемы пользователей;
— проектировать пользовательские интерфейсы на основе общения с пользователями, конкурентного анализа и изучения best-practices;
— создавать дизайн-макеты и интерактивные прототипы в Fgma;
— участвовать в планировании и демонстрации проекта.
Если заинтересовались, то пишите сюда: @d_mishukov
#вакансии #работа
10 ошибок в CSS
Следуйте 10 практическим рекомендациям опытного разработчика, чтобы улучшить читаемость, поддержку и совместимость вашего CSS-кода с различными браузерами.
Из этой статьи вы узнаете, как использовать сокращённые записи свойств, создавать адаптивный дизайн, избегать повторения кода и сложных селекторов.
#css #html #вёрстка
Следуйте 10 практическим рекомендациям опытного разработчика, чтобы улучшить читаемость, поддержку и совместимость вашего CSS-кода с различными браузерами.
Из этой статьи вы узнаете, как использовать сокращённые записи свойств, создавать адаптивный дизайн, избегать повторения кода и сложных селекторов.
#css #html #вёрстка
Если хотите быть в тренде и получать лучшее из мира IT, у Tproger есть 4 канала, которые вам в этом помогут:
— всё о нейросетях и ИИ: @neurochannel
— полезные сохранёнки на все случаи жизни: @prog_stuff
— нужные инструменты для ваших проектов: @prog_tools
— новости из мира технологий: @your_tech
Кстати, там сейчас ещё и розыгрыш подписок Telegram Premium проходит, так что заходите, смотрите условия и подписывайтесь.
— всё о нейросетях и ИИ: @neurochannel
— полезные сохранёнки на все случаи жизни: @prog_stuff
— нужные инструменты для ваших проектов: @prog_tools
— новости из мира технологий: @your_tech
Кстати, там сейчас ещё и розыгрыш подписок Telegram Premium проходит, так что заходите, смотрите условия и подписывайтесь.
Когда удаляешь 1000+ строчек своего кода, потому что нашёл фреймворк, которые делает всё то же самое, но лучше:
Новая единица измерения области просмотра
Мобильные браузеры имеют разные пользовательские интерфейсы для верхней и нижней панелей и меняют высоту области просмотра при прокрутке, что приводит к проблемам со свойством
Но теперь у нас есть модуль
#css #height #адаптив
Мобильные браузеры имеют разные пользовательские интерфейсы для верхней и нижней панелей и меняют высоту области просмотра при прокрутке, что приводит к проблемам со свойством
height: 100vh
на телефонах. Но теперь у нас есть модуль
dvh
, динамически адаптирующийся к текущей высоте окна просмотра.#css #height #адаптив
Parallax с помощью CSS
Техника параллакс-скроллинга создаёт эффект трёхмерности, что придаёт веб-странице большую глубину. Однако здесь есть свои нюансы, о которых мы и поговорим.
Из этой статьи вы узнаете, в каких ситуациях оправдано использование параллакс-скроллинга, разберётесь, как реализовать его с помощью CSS, и почему для этого стоит использовать именно CSS, а не JavaScript.
#css #html #вёрстка
Техника параллакс-скроллинга создаёт эффект трёхмерности, что придаёт веб-странице большую глубину. Однако здесь есть свои нюансы, о которых мы и поговорим.
Из этой статьи вы узнаете, в каких ситуациях оправдано использование параллакс-скроллинга, разберётесь, как реализовать его с помощью CSS, и почему для этого стоит использовать именно CSS, а не JavaScript.
#css #html #вёрстка