Frontend разработчик
11.4K subscribers
1.78K photos
502 videos
50 files
2.74K links
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.

По всем вопросам @evgenycarter

РКН clck.ru/3KoFrk
Download Telegram
Записываем музыку при помощи CSS Grid

Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!

В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.

https://cruncher.ch/blog/printing-music-with-css-grid/

Мы в MAX

👉 @frontend_1
👍4💩1
😨 Асинхронность в JavaScript — главный источник боли у разработчиков. Callback hell, ошибки в промисах, непредсказуемое поведение кода… знакомо?

❗️ На открытом уроке курса мы разложим по полочкам всю эволюцию подходов к асинхронности: от первых колбэков до современного Async/Await.

Вы научитесь работать с Event Loop, свободно комбинировать Promises и async-функции, обрабатывать ошибки правильно и писать код, который не ломается в продакшене. А ещё узнаете, как параллелить операции без ловушек и антипаттернов.

👉 Подключайтесь 20 октября в 20:00 МСК. Урок проходит в преддверие старта курса «JavaScript Developer. Professional». Все участники получат скидку на обучение. Регистрация открыта: https://vk.cc/cQozPv

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

Мы в MAX

👉 @frontend_1
👍10❤‍🔥2💩1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по использованию инструментов Chrome Dev Tools 💡

Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?

Мы в MAX

👉 @frontend_1
👍9💩1
This media is not supported in your browser
VIEW IN TELEGRAM
👨‍💻 Пишете на JS, но чувствуете, что инструментов уже не хватает?

На практическом курсе от OTUS вы разберёте продвинутый React (Hooks, Redux Toolkit, Zustand, Query), SSR на Next.js, познакомитесь с Vue 3 и Nuxt 3, укрепите типизацию в TypeScript и выйдете на fullstack-уровень с Node/Nest.js.

❗️Программа составлена практикующими разработчиками, а занятия проходят в формате живых лекций и практики на реальных задачах. Вы научитесь проектировать REST API, подключать PostgreSQL, собирать и деплоить проекты с Docker и CI/CD. После обучения вы сможете уверенно работать в командах, разрабатывать сложные web-приложения и прокачаете навыки, которые востребованы в крупных компаниях.

🏃‍♂️‍➡️🏃‍♂️‍➡️🏃‍♂️‍➡️ Остались последние места. Пройдите короткое вступительное тестирование, получите скидку 5% по промокоду JSPRO_10 и закрепите за собой участие: https://vk.cc/cQxLjp

Подробности уточняйте у менеджеров
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
💩3
Совет по Javascript 💡

Вы можете не знать об этом сокращенном синтаксисе для объявления метода в object literal

Мы в MAX

👉 @frontend_1
👍5💩2
Узнайте о позиционировании CSS с помощью следующей шпаргалки 🚀

Мы в MAX

👉 @frontend_1
👍5👎1
Визуализация методов массивов JavaScript 🚀

Мы в MAX

👉 @frontend_1
👍10🤡3👎1
Совет по HTML 💡

Легко создайте красивый индикатор выполнения, используя элемент <progress>

Мы в MAX

👉 @frontend_1
👍4
Т-Технологии зовут на Стековку

1 ноября в Екатеринбурге, Новосибирске и Нижнем Новгороде стартует квест для ИТ-специалистов — с городским интерактивом, задачами на знание кода и смекалку.

Что нужно делать?
Решать онлайн- и офлайн-задания и получать за это баллы для своего города.

Какой приз?
В городе, который наберет больше всего баллов, устроят вечеринку. А самые активные участники смогут повлиять на выбор тематики и программы.

Как участвовать?
Просто зарегистрируйтесь до 31 октября
2
Autofill vs autofit

Мы в MAX

👉 @frontend_1
👍5👎2
Совет по Javascript 💡

Для лучшей отладки используйте именованные выражения стрелочных функций для критических/часто используемых callback'ов

Мы в MAX

👉 @frontend_1
👍3
📕Angular UI-Kit с нуля: Как построить библиотеку переиспользуемых компонентов - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)

На открытом уроке 29 октября в 20:00 мск мы разберёмся в применении Angular Reactive Forms и сигналов:

📗 На вебинаре:
1. Template syntax: директивы, биндинги, pipes.
2. Event handling и реактивность.

📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок.

👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cQL6VZ

Все участники открытого урока получат скидку на курс "Angular Developer"

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Загрузка файла с помощью server action в Next.js

Мы в MAX

👉 @frontend_1
👍6
Last Call: ИИ, бэкенд и фронтенд в одном хакатоне

Wink AI Challenge — соревнование для разработчиков, которые знакомы с нейросетями и мультимодальными данными. Разбираешься в NLP и интеграции моделей? Приходи и покажи, на что способен твой ИИ. Призовой фонд — 1 125 000 рублей.

Последние дни регистрации — открыта до 4 ноября включительно: https://cnrlink.com/winkaichallengefront

ML-инженеры, backend- и frontend-разработчики, DevOps, MLOps и мультимедиа-инженеры — ваш выход. Алгоритм такой:
1️⃣ Получи реальный текстовый набор данных.
2️⃣ Проанализируй структуру и извлеки ключевые сущности.
3️⃣ Собери ИИ-сервис, который помогает принимать решения в киноиндустрии.

Задачи хакатона:
🔸 Построй модель зависимости между сценами и структурируй сценарий.
🔸 Преврати текст в эскизы с помощью text-to-image для создания превизуализации сценария.
🔸 Создай решение, которое классифицирует контент и находит сцены, влияющие на возрастной рейтинг.

Финал пройдёт в Москве — двум участникам из команды Wink оплатит билеты и проживание. Успей зарегистрироваться на первый в России хакатон по применению ИИ в кинопроизводстве: https://cnrlink.com/winkaichallengefront
Советы по HTML 💡

Знаете ли вы, зачем мы пишем <meta charset=«utf-8»> в HTML-документе?

Мы в MAX

👉 @frontend_1
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Возможно, вы не знаете о блоке lh в CSS 🤩

Мы в MAX

👉 @frontend_1
👍51
🚀 Хотите освоить React.js и научиться создавать реальные приложения, от первых шагов до внутреннего устройства фреймворка? Приглашаем на два бесплатных вебинара в рамках курса «React.js Developer»!

🗓 12 ноября, 20:00 — «Интернет-магазин на React — первые шаги с роутингом и API»

- Настройка React Router и динамических страниц
- Подключение открытого API (FakeStore) и загрузка товаров
- Создание страниц: список товаров и детали каждого товара
- Мини-SPA за один вечер — без сложной логики

🎯 Для начинающих и тех, кто хочет собрать первый реальный проект на React

🗓 18 ноября, 20:00 — «Уровень PRO: движок React. Fiber, Reconciliation и искусство осознанной оптимизации»

- Под капотом React: Virtual DOM и Fiber Architecture
- Принцип обновления интерфейса и Reconciliation
- Практические советы по производительности и мемоизации

🎯 Для frontend- и React-разработчиков, которые хотят понимать, как работает их код внутри

⚡️ Не упустите шанс прокачать навыки React от первых шагов до продвинутой оптимизации! Регистрация на вебинары бесплатная: https://vk.cc/cQOEnX

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
This media is not supported in your browser
VIEW IN TELEGRAM
View Transitions — это подарок 🎁

Один набор CSS keyframes и одна локальная пользовательская переменная для ::view-transition-old/new(body) 🚀

Мы в MAX

👉 @frontend_1
👍52