Frontender Libs - обзор библиотек JS / CSS
Kanalga Telegram’da o‘tish
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
Ko'proq ko'rsatish7 359
Obunachilar
-424 soatlar
-247 kun
-9330 kun
Postlar arxiv
Bun
Bun — это современная среда выполнения JS типа Node.js или Deno со встроенной поддержкой JSX и TypeScript. Она разрабатывалась с акцентом на трех вещах:
быстрый запуск;
высокая производительность;
самодостаточность.
По ссылке знакомимся с Bun. Обратите внимание, что пока это экспериментальная штуковина, поэтому использовать ее для разработки производственных приложений не рекомендуется.
👉 @sWebDev
Что такое состояние React
В данной статье раскроем формальную сторону вопроса «что такое состояние» для лучшего понимания фундаментальных основ надёжности любого клиентского приложения. Хочется уже поставить точки в некоторых вопросах терминологии, чтобы чётче отвечать на вопросы «что, когда и зачем брать» при выборе библиотек и технологий для клиентского веб-приложения.
👉 @sWebDev
⭐ refine Open Source Hackathon ⭐
Build a refine project like CRUD app, admin panel, internal tool, forms, storefront, dashboard, library, data provider, auth provider, live provider, etc.
Win $1500 in prizes and also special swag kits from the sponsors!
For more detail: https://dub.sh/refine-hackathon
Fastify
Фреймворк для работы с Node.js. Основной задачей является производительность. Разработчики утверждают, что он способен обрабатывать до 60 000 запросов в секунду. Основные преимущества: удобная обработка синхронных и асинхронных ошибок, валидация входных параметров, расширяемость. Подробный обзор по ссылке.
👉 @sWebDev
Яндекс Практикум выпустил курс по вёрстке для тех, кто хочет уйти во fullstack-разработку из бэкенда.
За три месяца вы научитесь писать код на HTML и CSS по современным стандартам и сможете создавать графический интерфейс в дополнение к бэкенду.
Вы научитесь
— превращать дизайн-макеты в веб-страницы,
— создавать сайты под разные устройства,
— добавлять визуальные эффекты и сложные анимации с помощью CSS.
Учиться предстоит на практике: вы сверстаете многостраничный сайт, сайт с тёмной и светлой темами, ещё 5 проектов для портфолио.
→ Записаться в первый поток курса
The Impossible Lightbulb w/ GSAP
Забавная анимация, выполненная при помощи GSAP.js.
👉 @sWebDev
Контекст React
Обычно в React-приложении данные передаются от родителя к дочернему компоненту при помощи пропсов. Подобный способ может быть громоздким для некоторых типов пропсов (например, выбранный язык, UI-тема). Поэтому, рассмотрим Контекст. Он предоставляет возможность делиться большими данными между компонентами без необходимости передавать пропсы через каждый уровень дерева.
const MyContext = React.createContext(defaultValue);
Создаёт объект Context. При рендере компонента, который подписан на этот объект, React получит текущее значение контекста из ближайшего подходящего Provider в дереве компонентов.
Аргумент defaultValue используется, если для компонента нет подходящего Provider выше в дереве. Если передать undefined в значении Provider, то компоненты, использующие этот контекст, не будут использовать defaultValue.
👉 @sWebDevЕсть 2 способа выучить JavaScript:
1. Платить за дорогие курсы и втыкать в обучающие ролики на ютубе. Напичкать себя теорией, но так и не научиться кодить.
2. Читать канал JavaScript Teacher.
Здесь вы в коротких постах впитаете все алгоритмы, освоите разные библиотеки и фишки языка. А это уже заявочка на хорошую работу.
Много реальных примеров и готового кода, переходи и прокачивай скиллы! @JavaScript_Teacher
Strapi
Strapi - фреймворк, позиционирующийся для работы с Node.js. Однако, его можно использовать практически с любой библиотекой. Его можно использовать, как для работы с фронтенд составляющей, так и для взаимодействия с GraphQL и REST.
👉 @sWebDev
🟡Хардкорный тест по JS
— Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой!
🚀За 4 месяца вы научитесь продвинутым возможностям Redux, Redux-Saga, Redux-thunk; созданию SPA-приложений и оптимизации их для production; чистому и лаконичному коду с TypeScript; применению интеграционных и юнит-тестов; работе в GraphQL, Apollo, Relay.
👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS
13.8 billion years ago
Проект анимированного земного шара, выполненный на Three.js.
👉 @sWebDev
Как создать реф в React?
Какую функцию нужно использовать для создания рефа в React?
👉 @sWebDev
GuardAngular, резрешающий или запрещающий доступ к дочернему маршруту?
Route Guard для доступа к дочернему маршруту Angular
Вам необходим Route Guard, который будет разрешать или запрещать доступ к дочернему маршруту. Какой это guard?
👉 @sWebDev
Дополни таблицу умножения
Необычная игра, выполненная на React. Смысл заключается в заполнении пустых клеток таблицы умножения. Мы можем настроить размер таблицы и сложность игры.
👉 @sWebDev
React Query
React Query — это библиотека для управления асинхронными данными в приложениях React. Это помогает с такими задачами, как выборка, кэширование и обновление данных. Узнать все подробности можно по ссылке.
👉 @sWebDev
5 продвинутых шаблонов React на пальцах
Как и любой React-разработчик, вы наверняка задавались одним из следующих вопросов:
Как создать переиспользуемый компонент, подходящий для разных случаев?
Как создать компонент с простым API, упрощающим его использование?
Как создать расширяемый компонент в плане UI и функциональности?
Популярность этих вопросов привела к разработке сообществом React продвинутых шаблонов. В статье мы рассмотрим пять таких шаблонов.
👉 @sWebDev
Сколько нужно времени, чтобы освоить востребованную профессию фронтенд-разработчика?
Всего 10 месяцев! Вы можете совмещать обучение с любым своим занятием. Главное условие - желание. В Xeкслете вы можете пройти онлайн-курс по профессии «Фронтенд-разработчик».
Во время программы вы:
✔️ Изучите JavaScript в связке с HTML и CSS.
✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
✔️ Решите более 310 задач в браузере.
✔️ Создадите 4 проекта для портфолио на GitHubВыполните 150 тестовых заданий от наших партнёров.
✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах.
Обучение построено так, что его невозможно «отсидеть» или «прослушать». Мы не сторонники подхода «повтори за учителем»: вы будете не просто писать код, а научитесь самостоятельно находить лучшие решения.
📌 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !
Пончик-тогл
Пончик-переключатель, выполненный с применением библиотеки Greensock.
👉 @sWebDev
