Разработчик воссоздал LisaOS в виде веб-приложения
Разработчик Эндрю Ярос (Andrew Yaros) выпустил веб-версию операционной системы Lisa Office System.
У Яроса есть физическая версия Lisa 2/10, и он хотел повторить её операционную систему, чтобы пользователи могли погрузиться в ретротехнологии прямо в браузере. Веб-версия LisaOS написана с нуля на JavaScript. Автор проект подчёркивает, что это не эмулятор и не CSS-скин — система написана с нуля и с использованием современных веб-технологий.
Также Ярос рассказал, что весь интерфейс рендерится в одном элементе <canvas>. Автор проекта хотел добиться одинакового отображения элементов на разных разрешениях экрана, но из-за особенностей работы DOM и CSS этого очень сложно добиться. Решением стал перенос большей части кода в JavaScript.
В воссозданной LisaOS есть файловая система на базе IndexedDB, бенчмарки, игры, собственный 1-битный графический движок, текстовый редактор и холсты для рисования. Автор проекта перенёс не только оригинальные элементы, но и шрифты. Для этого пришлось реализовать собственную систему набора текста с поддержкой генерации новых глифов и возможностью комбинировать стили.
В воссозданной ОС есть много визуальных настроек внешнего вида системы. Можно менять цвета, шрифты и паттерны на фоне рабочего стола.
Веб-версия LisaOS работает в десктопных браузерах. В мобильных могут быть проблемы с позиционированием холста, экранной клавиатурой и перемещением объектов на рабочем столе. Протестировать проект можно на официальном сайте.
👉 @frontend_1
Разработчик Эндрю Ярос (Andrew Yaros) выпустил веб-версию операционной системы Lisa Office System.
У Яроса есть физическая версия Lisa 2/10, и он хотел повторить её операционную систему, чтобы пользователи могли погрузиться в ретротехнологии прямо в браузере. Веб-версия LisaOS написана с нуля на JavaScript. Автор проект подчёркивает, что это не эмулятор и не CSS-скин — система написана с нуля и с использованием современных веб-технологий.
Также Ярос рассказал, что весь интерфейс рендерится в одном элементе <canvas>. Автор проекта хотел добиться одинакового отображения элементов на разных разрешениях экрана, но из-за особенностей работы DOM и CSS этого очень сложно добиться. Решением стал перенос большей части кода в JavaScript.
В воссозданной LisaOS есть файловая система на базе IndexedDB, бенчмарки, игры, собственный 1-битный графический движок, текстовый редактор и холсты для рисования. Автор проекта перенёс не только оригинальные элементы, но и шрифты. Для этого пришлось реализовать собственную систему набора текста с поддержкой генерации новых глифов и возможностью комбинировать стили.
В воссозданной ОС есть много визуальных настроек внешнего вида системы. Можно менять цвета, шрифты и паттерны на фоне рабочего стола.
Веб-версия LisaOS работает в десктопных браузерах. В мобильных могут быть проблемы с позиционированием холста, экранной клавиатурой и перемещением объектов на рабочем столе. Протестировать проект можно на официальном сайте.
👉 @frontend_1
👍8
💬 Создаем чат на Vue с WebSocket: интерактив в реальном времени 🚀
🔥21 июля в 20:00 мск. приглашаем на открытый вебинар в OTUS, на котором разберем:
- Почему WebSocket — это не просто альтернатива HTTP, а ключевая технология для приложений в реальном времени.
- Как Vue делает интерфейсы реактивными и позволяет обновлять их без перезагрузки.
- Подключение WebSocket к Vue-приложению для отправки и получения сообщений.
- Создание интерфейса чата с автофокусом, прокруткой вниз и другими полезными функциями.
- Погружение в ключевые концепции Vue: ref, watch, v-for, v-model.
Что узнаете:
- Как настроить WebSocket-соединение во Vue.
- Как мгновенно обновлять интерфейс при получении новых данных.
- Как собрать реальный чат за 1 час.
👉 Регистрируйтесь по ссылке: https://vk.cc/cNJ7m3
Бесплатное занятие приурочено к старту курса “Vue.js разработчик”, на котором можно глубже погрузиться в особенности фреймворка, научиться работать с его инструментами и создавать реальные проекты.
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
🔥21 июля в 20:00 мск. приглашаем на открытый вебинар в OTUS, на котором разберем:
- Почему WebSocket — это не просто альтернатива HTTP, а ключевая технология для приложений в реальном времени.
- Как Vue делает интерфейсы реактивными и позволяет обновлять их без перезагрузки.
- Подключение WebSocket к Vue-приложению для отправки и получения сообщений.
- Создание интерфейса чата с автофокусом, прокруткой вниз и другими полезными функциями.
- Погружение в ключевые концепции Vue: ref, watch, v-for, v-model.
Что узнаете:
- Как настроить WebSocket-соединение во Vue.
- Как мгновенно обновлять интерфейс при получении новых данных.
- Как собрать реальный чат за 1 час.
👉 Регистрируйтесь по ссылке: https://vk.cc/cNJ7m3
Бесплатное занятие приурочено к старту курса “Vue.js разработчик”, на котором можно глубже погрузиться в особенности фреймворка, научиться работать с его инструментами и создавать реальные проекты.
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
❤1
Vue DevTools
Браузерное расширение для отладки приложений Vue.js.
https://github.com/vuejs/devtools
👉 @frontend_1
Браузерное расширение для отладки приложений Vue.js.
https://github.com/vuejs/devtools
👉 @frontend_1
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Response-print-pdf — UI Kit для создания PDF-файлов с использованием React и TypeScript.
Создавайте и генерируйте PDF-документы с помощью React 📄. Этот UI-набор компонентов предназначен для создания PDF и печатных документов, таких как счета, брошюры и другие документы. Используйте простые и многократно используемые компоненты и шаблоны для создания профессиональных документов. Реализуйте свои идеи с помощью любимого фреймворка фронтенда React для создания PDF-документов следующего поколения.
Забудьте о docx, latex или устаревших библиотеках. С помощью react-print-pdf вы получите:
☑️ Простоту в использовании
☑️ Готовые компоненты и шаблоны
☑️ 100% контроль макета
☑️ Интеграция динамических данных в PDF-файл
https://github.com/OnedocLabs/react-print-pdf
👉 @frontend_1
Создавайте и генерируйте PDF-документы с помощью React 📄. Этот UI-набор компонентов предназначен для создания PDF и печатных документов, таких как счета, брошюры и другие документы. Используйте простые и многократно используемые компоненты и шаблоны для создания профессиональных документов. Реализуйте свои идеи с помощью любимого фреймворка фронтенда React для создания PDF-документов следующего поколения.
Забудьте о docx, latex или устаревших библиотеках. С помощью react-print-pdf вы получите:
☑️ Простоту в использовании
☑️ Готовые компоненты и шаблоны
☑️ 100% контроль макета
☑️ Интеграция динамических данных в PDF-файл
https://github.com/OnedocLabs/react-print-pdf
👉 @frontend_1
👍3
🚀 Реактивное программирование в Angular
Современный Angular предоставляет два подхода к реактивному программированию: RxJS и Signals. На открытом уроке мы разберём оба подхода, покажем, в чём их различия, как они дополняют друг друга, и как выбрать правильный инструмент под задачу.
👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Что такое реактивное программирование в контексте Angular
- Observable и Signals: в чём разница, когда что использовать
- Операторы RxJS
- Создание и управление сигналами (signal, computed, effect)
- Как внедрить сигналы в компоненты, шаблоны и сервисы
- Связь между RxJS и Signals через rxjs-interop
Бесплатный вебинар проходит в рамках курса “Angular Developer“
Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNKJm1
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Современный Angular предоставляет два подхода к реактивному программированию: RxJS и Signals. На открытом уроке мы разберём оба подхода, покажем, в чём их различия, как они дополняют друг друга, и как выбрать правильный инструмент под задачу.
👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Что такое реактивное программирование в контексте Angular
- Observable и Signals: в чём разница, когда что использовать
- Операторы RxJS
- Создание и управление сигналами (signal, computed, effect)
- Как внедрить сигналы в компоненты, шаблоны и сервисы
- Связь между RxJS и Signals через rxjs-interop
Бесплатный вебинар проходит в рамках курса “Angular Developer“
Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNKJm1
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Прощай, Zone.js: ускоряем Angular с Signal API и Zoneless-подходом
Привет! Я Незар, фронтенд-разработчик Т-Банка в одном из продуктов Т-Бизнеса. Наша команда использует Angular, и мы следим за всеми изменениями, которые с ним происходят.
В статье разберу, как Angular эволюционировал от Zone.js к Zoneless-приложениям с современным реактивным подходом Signal API и почему это стало ключевым шагом для повышения производительности и упрощения реактивного программирования.
На примерах и замерах производительности посмотрим, как переход к Zoneless-подходу с Signal API позволяет сократить избыточные перерисовки, ускорить отклик приложения и сделать код значительно чище и предсказуемее. Сделаем Angular-приложения быстрее и проще!
https://habr.com/ru/companies/tbank/articles/928206/
👉 @frontend_1
Привет! Я Незар, фронтенд-разработчик Т-Банка в одном из продуктов Т-Бизнеса. Наша команда использует Angular, и мы следим за всеми изменениями, которые с ним происходят.
В статье разберу, как Angular эволюционировал от Zone.js к Zoneless-приложениям с современным реактивным подходом Signal API и почему это стало ключевым шагом для повышения производительности и упрощения реактивного программирования.
На примерах и замерах производительности посмотрим, как переход к Zoneless-подходу с Signal API позволяет сократить избыточные перерисовки, ускорить отклик приложения и сделать код значительно чище и предсказуемее. Сделаем Angular-приложения быстрее и проще!
https://habr.com/ru/companies/tbank/articles/928206/
👉 @frontend_1
👍2
⚡️Хотите научиться писать надежные тесты для React-приложений и улучшить свои навыки в тестировании?
Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.
Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.
👉Регистрация открыта: https://vk.cc/cNMUv5
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.
Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.
👉Регистрация открыта: https://vk.cc/cNMUv5
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
🔥 Трюк с
Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:
📌 Что тут происходит:
*
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.
🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).
💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.
👉 @frontend_1
style
в React, который упростит работу с динамическими стилямиВместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:
<div
style={{
padding: '16px',
...(isError && { border: '1px solid red' }),
...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }),
}}
>
Hello!
</div>
📌 Что тут происходит:
*
...(условие && { стиль })
добавит стиль, если условие true
;* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.
🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).
💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.
👉 @frontend_1
👍3
Мини-хак:
Современные браузеры уже поддерживают
Пример: показать рамку у карточки, если внутри есть картинка:
Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено:
Зачем это нужно?
— Меньше JS → проще поддержка
— Новый уровень гибкости для UI
Документация: MDN про :has()
Пробуйте! Это реально меняет подход к верстке.
👉 @frontend_1
:has()
в CSS — меньше JS для интерактивности 🎯Современные браузеры уже поддерживают
:has()
— “родительский селектор”, который раньше приходилось эмулировать на JS.Пример: показать рамку у карточки, если внутри есть картинка:
.card:has(img) {
border: 2px solid #4ade80;
}
Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено:
.input-wrapper:has(input:focus) label {
color: #3b82f6;
}
Зачем это нужно?
— Меньше JS → проще поддержка
— Новый уровень гибкости для UI
Документация: MDN про :has()
Пробуйте! Это реально меняет подход к верстке.
👉 @frontend_1
👍3
Хотите углубить знания в JavaScript и работать с самыми популярными фреймворками? Прокачайте свои навыки до профессионального уровня с курсом «JavaScript Developer. Professional» от OTUS.
Мы предлагаем практический курс, где вы:
- Изучите передовые технологии, такие как ReactJS, Angular, Vue, Node.js и другие.
- Научитесь работать с такими инструментами, как Webpack, TDD, и PostgreSQL.
- Примените знания на практике: создадите сложные веб-приложения, протестируете их, организуете хранение данных и многое другое.
Вы сможете:
• Создавать приложения для реальных проектов.
• Применять паттерны проектирования.
• Работать с асинхронностью, тестированием, оптимизацией.
Пройдите вступительное тестирование и получите скидку на обучение: https://vk.cc/cNWXTl
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Мы предлагаем практический курс, где вы:
- Изучите передовые технологии, такие как ReactJS, Angular, Vue, Node.js и другие.
- Научитесь работать с такими инструментами, как Webpack, TDD, и PostgreSQL.
- Примените знания на практике: создадите сложные веб-приложения, протестируете их, организуете хранение данных и многое другое.
Вы сможете:
• Создавать приложения для реальных проектов.
• Применять паттерны проектирования.
• Работать с асинхронностью, тестированием, оптимизацией.
Пройдите вступительное тестирование и получите скидку на обучение: https://vk.cc/cNWXTl
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
🚀 Быстрое улучшение Lighthouse:
Хотите ускорить рендер длинных страниц без костылей? Используйте CSS-свойство:
Что делает:
- Браузер не рендерит невидимые элементы (за пределами вьюпорта);
- Сохраняет размер блока для скролла;
- Экономит ресурсы → First Paint быстрее, Lighthouse выше.
Где применять:
- Списки (товары, посты);
- Длинные страницы;
- Виджеты ниже фолда.
⚠️ Осторожно: не ставьте на элементы с динамическим контентом, где важно мгновенное измерение размеров.
Можно добавить
2 строки — и сайт ощущается быстрее ✨
👉 @frontend_1
content-visibility
Хотите ускорить рендер длинных страниц без костылей? Используйте CSS-свойство:
.card {
content-visibility: auto;
}
Что делает:
- Браузер не рендерит невидимые элементы (за пределами вьюпорта);
- Сохраняет размер блока для скролла;
- Экономит ресурсы → First Paint быстрее, Lighthouse выше.
Где применять:
- Списки (товары, посты);
- Длинные страницы;
- Виджеты ниже фолда.
⚠️ Осторожно: не ставьте на элементы с динамическим контентом, где важно мгновенное измерение размеров.
Можно добавить
contain-intrinsic-size
→ убрать "скачок" при появлении.
.card {
content-visibility: auto;
contain-intrinsic-size: 300px;
}
2 строки — и сайт ощущается быстрее ✨
👉 @frontend_1
👍6
🚀 Подборка Telegram каналов для программистов
Системное администрирование, DevOps 📌
https://t.iss.one/bash_srv Bash Советы
https://t.iss.one/win_sysadmin Системный Администратор Windows
https://t.iss.one/sysadmin_girl Девочка Сисадмин
https://t.iss.one/srv_admin_linux Админские угодья
https://t.iss.one/linux_srv Типичный Сисадмин
https://t.iss.one/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://t.iss.one/linux_odmin Linux: Системный администратор
https://t.iss.one/devops_star DevOps Star (Звезда Девопса)
https://t.iss.one/i_linux Системный администратор
https://t.iss.one/linuxchmod Linux
https://t.iss.one/sys_adminos Системный Администратор
https://t.iss.one/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://t.iss.one/sysadminof Книги для админов, полезные материалы
https://t.iss.one/i_odmin Все для системного администратора
https://t.iss.one/i_odmin_book Библиотека Системного Администратора
https://t.iss.one/i_odmin_chat Чат системных администраторов
https://t.iss.one/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://t.iss.one/sysadminoff Новости Линукс Linux
1C разработка 📌
https://t.iss.one/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://t.iss.one/DevLab1C 1С:Предприятие 8
https://t.iss.one/razrab_1C 1C Разработчик
https://t.iss.one/buh1C_prog 1C Программист | Бухгалтерия и Учёт
https://t.iss.one/rabota1C_rus Вакансии для программистов 1С
Программирование C++📌
https://t.iss.one/cpp_lib Библиотека C/C++ разработчика
https://t.iss.one/cpp_knigi Книги для программистов C/C++
https://t.iss.one/cpp_geek Учим C/C++ на примерах
Программирование Python 📌
https://t.iss.one/pythonofff Python академия.
https://t.iss.one/BookPython Библиотека Python разработчика
https://t.iss.one/python_real Python подборки на русском и английском
https://t.iss.one/python_360 Книги по Python
Java разработка 📌
https://t.iss.one/BookJava Библиотека Java разработчика
https://t.iss.one/java_360 Книги по Java Rus
https://t.iss.one/java_geek Учим Java на примерах
GitHub Сообщество 📌
https://t.iss.one/Githublib Интересное из GitHub
Базы данных (Data Base) 📌
https://t.iss.one/database_info Все про базы данных
Мобильная разработка: iOS, Android 📌
https://t.iss.one/developer_mobila Мобильная разработка
https://t.iss.one/kotlin_lib Подборки полезного материала по Kotlin
Фронтенд разработка 📌
https://t.iss.one/frontend_1 Подборки для frontend разработчиков
https://t.iss.one/frontend_sovet Frontend советы, примеры и практика!
https://t.iss.one/React_lib Подборки по React js и все что с ним связано
Разработка игр 📌
https://t.iss.one/game_devv Все о разработке игр
Библиотеки 📌
https://t.iss.one/book_for_dev Книги для программистов Rus
https://t.iss.one/programmist_of Книги по программированию
https://t.iss.one/proglb Библиотека программиста
https://t.iss.one/bfbook Книги для программистов
БигДата, машинное обучение 📌
https://t.iss.one/bigdata_1 Big Data, Machine Learning
Программирование 📌
https://t.iss.one/bookflow Лекции, видеоуроки, доклады с IT конференций
https://t.iss.one/rust_lib Полезный контент по программированию на Rust
https://t.iss.one/golang_lib Библиотека Go (Golang) разработчика
https://t.iss.one/itmozg Программисты, дизайнеры, новости из мира IT
https://t.iss.one/php_lib Библиотека PHP программиста 👨🏼💻👩💻
https://t.iss.one/nodejs_lib Подборки по Node js и все что с ним связано
https://t.iss.one/ruby_lib Библиотека Ruby программиста
https://t.iss.one/lifeproger Жизнь программиста. Авторский канал.
QA, тестирование 📌
https://t.iss.one/testlab_qa Библиотека тестировщика
Шутки программистов 📌
https://t.iss.one/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://t.iss.one/thehaking Канал о кибербезопасности
https://t.iss.one/xakep_2 Хакер Free
Книги, статьи для дизайнеров 📌
https://t.iss.one/ux_web Статьи, книги для дизайнеров
Математика 📌
https://t.iss.one/Pomatematike Канал по математике
https://t.iss.one/phis_mat Обучающие видео, книги по Физике и Математике
https://t.iss.one/matgeoru Математика | Геометрия | Логика
Excel лайфхак📌
https://t.iss.one/Excel_lifehack
https://t.iss.one/mir_teh Мир технологий (Technology World)
Вакансии 📌
https://t.iss.one/sysadmin_rabota Системный Администратор
https://t.iss.one/progjob Вакансии в IT
Системное администрирование, DevOps 📌
https://t.iss.one/bash_srv Bash Советы
https://t.iss.one/win_sysadmin Системный Администратор Windows
https://t.iss.one/sysadmin_girl Девочка Сисадмин
https://t.iss.one/srv_admin_linux Админские угодья
https://t.iss.one/linux_srv Типичный Сисадмин
https://t.iss.one/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://t.iss.one/linux_odmin Linux: Системный администратор
https://t.iss.one/devops_star DevOps Star (Звезда Девопса)
https://t.iss.one/i_linux Системный администратор
https://t.iss.one/linuxchmod Linux
https://t.iss.one/sys_adminos Системный Администратор
https://t.iss.one/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://t.iss.one/sysadminof Книги для админов, полезные материалы
https://t.iss.one/i_odmin Все для системного администратора
https://t.iss.one/i_odmin_book Библиотека Системного Администратора
https://t.iss.one/i_odmin_chat Чат системных администраторов
https://t.iss.one/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://t.iss.one/sysadminoff Новости Линукс Linux
1C разработка 📌
https://t.iss.one/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://t.iss.one/DevLab1C 1С:Предприятие 8
https://t.iss.one/razrab_1C 1C Разработчик
https://t.iss.one/buh1C_prog 1C Программист | Бухгалтерия и Учёт
https://t.iss.one/rabota1C_rus Вакансии для программистов 1С
Программирование C++📌
https://t.iss.one/cpp_lib Библиотека C/C++ разработчика
https://t.iss.one/cpp_knigi Книги для программистов C/C++
https://t.iss.one/cpp_geek Учим C/C++ на примерах
Программирование Python 📌
https://t.iss.one/pythonofff Python академия.
https://t.iss.one/BookPython Библиотека Python разработчика
https://t.iss.one/python_real Python подборки на русском и английском
https://t.iss.one/python_360 Книги по Python
Java разработка 📌
https://t.iss.one/BookJava Библиотека Java разработчика
https://t.iss.one/java_360 Книги по Java Rus
https://t.iss.one/java_geek Учим Java на примерах
GitHub Сообщество 📌
https://t.iss.one/Githublib Интересное из GitHub
Базы данных (Data Base) 📌
https://t.iss.one/database_info Все про базы данных
Мобильная разработка: iOS, Android 📌
https://t.iss.one/developer_mobila Мобильная разработка
https://t.iss.one/kotlin_lib Подборки полезного материала по Kotlin
Фронтенд разработка 📌
https://t.iss.one/frontend_1 Подборки для frontend разработчиков
https://t.iss.one/frontend_sovet Frontend советы, примеры и практика!
https://t.iss.one/React_lib Подборки по React js и все что с ним связано
Разработка игр 📌
https://t.iss.one/game_devv Все о разработке игр
Библиотеки 📌
https://t.iss.one/book_for_dev Книги для программистов Rus
https://t.iss.one/programmist_of Книги по программированию
https://t.iss.one/proglb Библиотека программиста
https://t.iss.one/bfbook Книги для программистов
БигДата, машинное обучение 📌
https://t.iss.one/bigdata_1 Big Data, Machine Learning
Программирование 📌
https://t.iss.one/bookflow Лекции, видеоуроки, доклады с IT конференций
https://t.iss.one/rust_lib Полезный контент по программированию на Rust
https://t.iss.one/golang_lib Библиотека Go (Golang) разработчика
https://t.iss.one/itmozg Программисты, дизайнеры, новости из мира IT
https://t.iss.one/php_lib Библиотека PHP программиста 👨🏼💻👩💻
https://t.iss.one/nodejs_lib Подборки по Node js и все что с ним связано
https://t.iss.one/ruby_lib Библиотека Ruby программиста
https://t.iss.one/lifeproger Жизнь программиста. Авторский канал.
QA, тестирование 📌
https://t.iss.one/testlab_qa Библиотека тестировщика
Шутки программистов 📌
https://t.iss.one/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://t.iss.one/thehaking Канал о кибербезопасности
https://t.iss.one/xakep_2 Хакер Free
Книги, статьи для дизайнеров 📌
https://t.iss.one/ux_web Статьи, книги для дизайнеров
Математика 📌
https://t.iss.one/Pomatematike Канал по математике
https://t.iss.one/phis_mat Обучающие видео, книги по Физике и Математике
https://t.iss.one/matgeoru Математика | Геометрия | Логика
Excel лайфхак📌
https://t.iss.one/Excel_lifehack
https://t.iss.one/mir_teh Мир технологий (Technology World)
Вакансии 📌
https://t.iss.one/sysadmin_rabota Системный Администратор
https://t.iss.one/progjob Вакансии в IT
Telegram
Bash Советы
🚀 Секреты и советы по Bash
🔹 Полезные трюки, хитрые однострочники и лайфхаки для работы в терминале.
🔹 Автоматизация, скрипты и оптимизация работы в Linux.
🔹 Стать мастером Bash легко – просто подпишись!
💻 Прокачивай терминал вместе с нами! 👇
🔹 Полезные трюки, хитрые однострочники и лайфхаки для работы в терминале.
🔹 Автоматизация, скрипты и оптимизация работы в Linux.
🔹 Стать мастером Bash легко – просто подпишись!
💻 Прокачивай терминал вместе с нами! 👇
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡
Используйте табличные цифры для отображения таймеров ✅
https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers
👉 @frontend_1
Используйте табличные цифры для отображения таймеров ✅
https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers
👉 @frontend_1
👍8❤2🔥2
🪄 Трюк: «Скелетон» без JS
При загрузке данных часто ставят
📌 Как использовать:
1. Создаёте
2. Размеры задаёте под будущий элемент (картинка, текст).
3. Меняете на реальные данные после загрузки.
Плюсы:
- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».
👉 @frontend_1
При загрузке данных часто ставят
Spinner
. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!
.skeleton {
background: linear-gradient(
90deg,
#e0e0e0 25%,
#f0f0f0 50%,
#e0e0e0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}
@keyframes shimmer {
100% {
background-position: -200% 0;
}
}
📌 Как использовать:
1. Создаёте
div
с классом .skeleton
вместо контента.2. Размеры задаёте под будущий элемент (картинка, текст).
3. Меняете на реальные данные после загрузки.
Плюсы:
- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».
👉 @frontend_1
👍9❤1
🤩Хотите, чтобы ваши React-приложения не просто работали, а вызывали вау-эффект?
Присоединяйтесь к открытому уроку «Анимируем React: от нуля до вау-эффекта» 12 августа в 20:00 МСК. Мы покажем, как создать живые, отзывчивые интерфейсы с помощью библиотеки анимаций Framer Motion и API Intersection Observer. Разберём, как добавить современный UX без перегрузки сторонними библиотеками, чтобы каждый элемент интерфейса был динамичным и запоминающимся.
Освойте практические подходы и техники, которые используют профессионалы для создания визуально выразительных интерфейсов. Получите знания, которые значительно улучшат ваш опыт в React.
⚡️Присоединяйтесь к открытому вебинару и получите скидку на курс «React.js Developer»: https://vk.cc/cOmfRV
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Присоединяйтесь к открытому уроку «Анимируем React: от нуля до вау-эффекта» 12 августа в 20:00 МСК. Мы покажем, как создать живые, отзывчивые интерфейсы с помощью библиотеки анимаций Framer Motion и API Intersection Observer. Разберём, как добавить современный UX без перегрузки сторонними библиотеками, чтобы каждый элемент интерфейса был динамичным и запоминающимся.
Освойте практические подходы и техники, которые используют профессионалы для создания визуально выразительных интерфейсов. Получите знания, которые значительно улучшат ваш опыт в React.
⚡️Присоединяйтесь к открытому вебинару и получите скидку на курс «React.js Developer»: https://vk.cc/cOmfRV
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru