Frontend разработчик

Forest Encounter

Свёрстано и анимировано на чистых HTML и CSS.

https://codepen.io/dropside/pen/AXewvP

👉 @frontend_1

👍4

1.01K views08:01

🚀 Хватит оставаться на уровне базового Vue! Пора перейти на профессиональный фронтенд.

Онлайн-курс «Vue.js разработчик» — для тех, кто хочет:
• Создавать современные SPA и многостраничные приложения
• Работать с Vuex, Vue-router, Nuxt 3 и SSR
• Писать чистый код на ES6/ES8/TypeScript и тестировать его с Jest/Cypress
• Осваивать GraphQL, Firebase и Electron
• Применять продвинутые паттерны проектирования и оптимизировать приложения под production

💡 И это ещё не всё! 25 сентября в 20:00 в рамках курса «Vue.js разработчик» пройдёт бесплатный открытый вебинар «Nuxt 3 + SSR: собираем многостраничное приложение на Vue»:

• Настроим маршрутизацию и создадим страницы: каталог, карточка товара, «О компании»
• Подключим серверный рендеринг для ускорения загрузки и SEO
• Подтянем данные из открытого API и отрендерим на сервере
• Сверстаем и задеплоим базовую структуру проекта

Зарегистрироваться на вебинар: https://vk.cc/cPKDRB

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

❤1👍1

1.06K views09:04

Vue. Watch и WatchEffect на практике

Каждый, кто использует Vue для разработки или только его изучает, так или иначе встречается с необходимостью выполнить какое‑либо побочное действие при изменении значений, и сразу в голове возникает мысль о двух методах‑наблюдателях — Watch и WatchEffect.

Как работают эти 2 метода можно узнать из великолепной документации Vue, а в этой статье мы посмотрим на примеры самых часто используемых компонентов вместе с наблюдателями — по 2 компонента на каждый метод — а заодно вы сможете больше понять принцип их работы.

По ходу статьи также будут приведены некоторые полезные библиотеки Vue, которые часто используются в разработке.

https://habr.com/ru/articles/915394/

👉 @frontend_1

👍4

1.04K views07:48

0:20

Как указать, что серверный компонент должен рендериться динамически во время выполнения, если он не использует динамические API в Next.js.

👉 @frontend_1

👍4

918 views06:57

Расскажут инженеры
MWS Cloud Platform ⬜️ в 8-й серии
реалити-проекта для инженеров — Building the Cloud.

📅 Когда: 9 октября в 13:00
📍 Где: Онлайн

Вы узнаете:

⏺️чем реализация ванильного Kubernetes отличается от управляемого сервиса, предоставляемого в облаке;
⏺️какую архитектуру выбрали для managed-решения в облаке MWS Cloud Platform;
⏺️как реализовали жизненный цикл кластеров, мульти-тенанси и интеграции с другими облачными сервисами — Artifact Registry, IAM, Compute, VPC.

🎁 Розыгрыш фирменного мерча — за лучший вопрос в чате.

Будет особенно полезно DevOps- и Cloud Native-инженерам, а также всем, кто интересуется облачными технологиями.

➡️

Зарегистрироваться

Please open Telegram to view this post

VIEW IN TELEGRAM

957 views09:04

0:04

Table tenniCSS

Создано на HTML и SCSS, без использования JS.

https://codepen.io/amit_sheen/pen/PobQjMX

👉 @frontend_1

👍13

950 views17:49

0:09

CSS Swirl

Версияна чистом CSS.

400 квадратов, с использованием sibling-index и count, кучи тригонометрических функций и немного типизированной арифметики. (Пока работает только в Chrome 140+).

https://codepen.io/amit_sheen/full/PwZoLBG

👉 @frontend_1

👍3

894 views05:33

❓ Как сделать чат в React?

😎 Ответ — на бесплатном вебинаре 29 сентября!

WebSocket — это не сложно. Покажем на практике, как связать React-приложение с сервером для обмена сообщениями в реальном времени.

Соберем работающий прототип мессенджера с авторизацией и интерфейсом. Идеальный проект для портфолио.

Присоединяйтесь к бесплатному вебинару курса «JavaScript Developer. Professional».

👉 Пишите код вместе с экспертом:

https://vk.cc/cPQvpa

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

939 views08:01

React предпочитают по умолчанию — и это убивает инновации во фронтенде

React по умолчанию сопряжён со скрытыми издержками. Вот аргументы в пользу более осознанного выбора подходящего фреймворка для конкретной задачи.

React больше не побеждает за счёт своих технических достоинств. Сегодня его выбирают по умолчанию. И именно это «по умолчанию» теперь тормозит инновации во всей фронтенд-экосистеме.

Когда командам нужен новый фронтенд, разговор редко начинается с вопроса: «Каковы ограничения и какой инструмент лучше всего под них подходит?» Чаще всё звучит так: «Давайте возьмём React — его все знают». Такой рефлекс запускает самоподдерживающийся цикл, в котором архитектуру определяют сетевые эффекты, а не техническая уместность.

https://www.lorenstew.art/blog/react-won-by-default/

👉 @frontend_1

👍3❤1

762 views13:16

Скрытые возможности Radix UI

Radix UI — это не просто компоненты, а гибкий набор примитивов с точным контролем поведения. Вот несколько фишек, которые можно использовать:

Контролируемое состояние

Большинство компонентов (Dialog, Popover, DropdownMenu) можно открыть/закрыть вручную через open и onOpenChange. Это удобно для синхронизации с глобальным состоянием или URL.


<Dialog open={isOpen} onOpenChange={setIsOpen}>
  {/* ... */}
</Dialog>

Отключать порталы при необходимости

По умолчанию контент рендерится в body через Portal. Но если нужен рендеринг в текущем DOM (для стилизации, тестирования или ограничения области), вы можете отказаться от портала.


<Dialog.Content>
  {/* ... */}
</Dialog.Content>

Проигрывать анимации исчезновения

Radix по умолчанию удаляет элементы из DOM при скрытии. Чтобы включить CSS-анимации ухода (opacity, scale, transform), используйте forceMount.


<Dialog.Content forceMount className="fade-out-animation">
  {/* ... */}
</Dialog.Content>

Свободно комбинировать компоненты

Вы можете вкладывать один компонент в другой — например, Popover в DropdownMenu или Dialog в Tabs. Radix правильно обрабатывает фокус, события и поведение, даже в сложных вложенных интерфейсах.

👉 @frontend_1

👍4

572 views07:10

Приходи на Frontend Speed Dating – 1,5 часа на полезные знакомства

7 октября пройдет Frontend Speed Dating — вечер коротких онлайн-знакомств для разработчиков. Ты приглашен ;-)

Как это будет: участники будут рандомно делиться по парам и общаться в Zoom. Будет 6 раундов по 10 минут.

Зачем:
• Обсудишь темы, которые вызывают споры: тестирование и наблюдаемость фронта, техдолг, карьера и инструменты.
• Заберешь идеи и практики, которые работают у других, и поделишься своим опытом.
• Найдешь полезные контакты и познакомишься с Frontend-коммьюнити – на прошлой встрече общались до 11 вечера, а потом обменивались контактами!

Вечер организует Mindbox, но будет «без оружия»: никакого хантинга и рассказа про вакансии, пока ты сам не спросишь.

📅 Когда: 7 октября
⏰ Во сколько: 19:00–20:30 по мск
📍 Где: Zoom (ссылку пришлём после регистрации)

Зарегистрироваться

569 views09:02

0:03

Folding Ticket Detail

Анимация разворачивания билета с подробной информацией.

https://codepen.io/pizza3/pen/bGVPZvo

Мы в MAX

👉 @frontend_1

👍4

493 views11:27