Code Ready | Frontend

📱 Drag & Drop Kanban доска! Привет! В этом гайде собираем минимальный Kanban с перетаскиванием карточек между колонками. Ключевые моменты:

• HTML: три колонки (To Do, In Progress, Done) с карточками draggable. • CSS: оформление доски и карточек. • JS: нативный drag & drop API.

Подходит для прототипов, pet-проектов и внедрения визуальных таск-менеджеров в свои приложения. 📣 Code Ready | #гайд

Каналы про IT делятся на 2 типа: 1. Выучи Python, JavaScript и C++ за 0,0001 секунды просто читая наш канал… 2. Хочешь читать переписки бывшей? Хакер из канала "Взлом Жопы" рассказывает как скачать Tor… Но среди копипастных статей и мусора есть реально годный проект айтишника, работавшего 9 лет в ИБ — Пакет Безопасности. Внутри узнаете когда наступит эра без паролей, почему и как изолируется рунет, как удалить упоминание о себе из интернетов и как не оказаться жертвой новой схемы интернет-скама. Подпишитесь, злоумышленники не дремлют: @package_security

👍 MDN Web Docs — актуальный ресурс по фронтенду! HTML, CSS, JavaScript, Web APIs, производительность, доступность - всё в одном месте. Структурированная программа обучения - от «что такое фронтенд» до продвинутых приемов, с задачами, тестами и "реплейсом" прямо в браузере. 📌 Оставляю ссылочку: mdvwebdocs.org 📣 Code Ready | #ресурсы

👩‍💻 Можно ли сделать подчёркивания аккуратнее, чтобы они не заезжали на буквы с хвостиками, вроде g и y? Свойство text-decoration-skip-ink управляет внешним видом верхнего и нижнего подчёркиваний. Возможные значения:

• none — линия рисуется под текстом сквозь глифы. • auto — линия может рисоваться так, что не касается глифов (значение по умолчанию). • all — линия будет рисоваться, не касаясь глифов.

Если текст нужно перечеркнуть, то это свойство будет проигнорировано. 📣 Code Ready | #свойство

Могу вас познакомить? – Это Софи. И теперь она будет искать работу за тебя. Не, я серьезно. Она умеет составлять резюме, делать отклики и общаться с рекрутерами. Причем все это она делает лучше, чем ты сам. Она очень умная. Ты сам ей расскажешь про себя и свой опыт, а она продаст его так, как будто самый лучший маркетолог и карьерный консультант объединились и решили тебе помочь. Затем ты подключишь ее к своему аккаунту на HH.ру, и дальше произойдет магия. ⭐️ Она сама подготовит резюме. ⭐️ Она сама будет делать до 100 откликов в день. ⭐️ Она сама будет писать индивидуальные сопроводительные под КАЖДУЮ вакансию. ⭐️ И она сама будет переписываться с рекрутером и отвечать на его вопросы. И нет, она не будет откликаться на всякий шлак типа QA-вакансий, если ты Python-разработчик. Или на Senior, хотя ты молодой джун. Это НЕ просто спам откликами с первым попавшимся резюме. Это твой новый личный ассистент, который знает про поиск первой работы в IT ВСЁ. Хочешь с ней познакомиться? Тогда – велком. 26 августа мы откроем доступ для 150 пользователей. После закроем продажи на несколько недель. В этот день каждый пользователь получит 3 дня бесплатного доступа к Софи, 1 месяц бесплатного доступа к тренажеру собеседований и 2 месяца подписки на Софи за 14990 3500 рублей. 26 августа. 150 мест. Подпишись, чтобы не пропустить ⚡

😎 App Ideas — готовые идеи для ваших проектов и портфолио! Это огромная коллекция приложений, которую можно реализовать, чтобы прокачать навыки программирования и наполнить портфолио. Репозиторий включает проекты разного уровня сложности.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

👩‍💻 Мини-трюк с CSS — виртуальная клавиатура с активным состоянием без JS! В этом приёме используем скрытые радиокнопки и стилизованные лейблы, чтобы сделать интерактивные кнопки клавиатуры. Как работает:

• При выборе кнопка подсвечивается и меняет цвет. • При клике — эффект сжатия, имитирующий нажатие. • Полностью без JS, работает на всех устройствах.

Отличное решение, когда нужно быстро добавить интерактивность без лишнего кода! 📣 Code Ready | #фишка

Роман набирает группу из 8 человек на бесплатное обучение Frontend-разработке. Хочет провести эксперимент и доказать, что зарабатывать от 100.000₽ на разработке сайтов и веб-приложений может каждый. Роман Чернов — практикующий Fullstack-разработчик с опытом более 12 лет. Имеет в портфолио кейсы от крупных брендов. Результат его предыдущего эксперимента: ✅ Марина М. Сменила работу инженера в авиации на должность младшиго Frontend-разработчика в Т-Банке с зарплатой в полтора раза выше. ✅ Евгений Х. Сделал визитку и информационный сайт для друга, заработав 100$. При этом прокачал навыки разработки, дизайна и общения с заказчиком. ✅ Ольга Д. Во время курса получила два оффера и в итоге работает, как Frontend-разработчик за 60 000₽. У этих людей не было IT-образования. Они просто выделили 7 дней на обучение и создали веб-сайт для портфолио на бесплатном интенсиве у Романа. Если вы думаете, что работа с HTML, CSS или Angular это что-то непонятное, то стоит попробовать пройти бесплатный интенсив, где: 1. Ты создашь полноценный веб-сайт на HTML и CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Научишься использовать ChatGPT и Giga во Frontend-разработке; 7. Узнаешь 9 способов найти первый заказ даже без опыта. В итоге — ты создашь рабочий веб-сайт в портфолио, поймёшь стратегию роста в профессии и получишь мотивацию продолжать. ВСЁ ЧЁТКО, ПОНЯТНО И БЕЗ ЛИШНЕЙ ВОДЫ ➡️ Успейте зайти на обучение бесплатно до 21 августа

📂 Напоминалка по сетевым портам! Например, порт 22 используется для SSH-подключений, а 443 — для защищённого HTTPS-трафика. Порты — основа любого взаимодействия между клиентом и сервером. На картинке — 18 основных портов. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

📱 Слайдер с кнопками управления! Привет! В этом гайде создаём простой и компактный слайдер с плавной анимацией переключения слайдов. Ключевые моменты:

• HTML: контейнер с обёрткой для изображений и кнопками навигации. • CSS: ограничение ширины и скрытие лишнего контента. • JS: управление слайдами по кнопкам.

Подходит для презентаций, портфолио, лендингов и любых галерей без автопрокрутки. 📣 Code Ready | #гайд

🔥 3 канала — один билет в IT! 🔥 💡 Хочешь реально понять, что такое программирование? 🚀 Хватит просто читать — пора погружаться! 👉 Java: теория — объясним, чтобы понял даже кот. 👉 Java: практика — проверь свои знания. 👉 Python — твой быстрый старт в программирование без боли. 🎯 Успех любит быстрых. Жми и забирай три ключа к IT-двери!

👩‍💻 Знал ли ты, что можно открыть браузер прямо в VS Code? Даже скачивать ничего не нужно, ведь всё уже встроено в редактор. Как и что можно настроить показано на видео выше от Miguel Ángel Durán 📣 Code Ready | #vscode

👩‍💻 Разберем атрибут step — контроль точности ввода чисел! Он используется в <input> для указания шага изменения значения. Задаёт, на сколько увеличивается или уменьшается значение при вводе или при нажатии стрелок. Можно применить со следующими значениями type:

• date — значение по умолчанию 1 день; • month — значение по умолчанию 1 месяц; • week — значение по умолчанию 1 неделя; • time — значение по умолчанию 60 секунд; • datetime-local — значение по умолчанию 1 секунда; • number — значение по умолчанию 1; • range — значение по умолчанию 1.

Для удобства пользователя с <input step> добавляйте инструкции через <label> или aria-describedby. 📣 Code Ready | #атрибут

👩‍💻 В сеть вывалилась гигантская куча курсов и книг от топовых IT‑школ Держи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё! 1402 ГБ — Python 1815 ГБ — Frontend 1515 ГБ — Backend 1300 ГБ — C / C++ 694 ГБ — Java 546 ГБ — SQL & БД 411 ГБ — DevOps 898 ГБ — ИБ & Хакинг 212 ГБ — JavaScript 996 ГБ — Kotlin / Swift 173 ГБ — PHP 215 ГБ — GoLang 185 ГБ — Rust 517 ГБ — Linux 115 ГБ — QA / Тестирование 419 ГБ — GameDev 319 ГБ — 1C + Лицензии 617 ГБ — Машинное обучение 687 ГБ — Аналитика Данных 998 ГБ — Дизайн Подписывайся и не плати за то, что можно получить бесплатно

👍 Нашёл отличную статью на Хабре: «Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов» В статье вы: • Установите и настроите Jest; • Подключите React Testing Library; • Организуете структуру тестов (SCSS, SVG, компоненты); • Настроите Jest в окружении Next.js для unit‑тестирования компонентов.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

📱 Разберем асинхронность и таймеры! Шпаргалка по ключевым методам работы с задержками, интервалами и промисами: параллельное выполнение, ожидание результатов и управление асинхронными процессами. Подойдёт для анимаций, запросов к API и интерактивного UI. 📣 Code Ready | #шпора

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам 🤗 ✓ Как научиться отвлекаться от работы и отдыхать? ✓ Как совместить кучу рабочих задач и время с семьей? ✓ Как справиться с прокрастинацией? ✓ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни! Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: 👉 https://t.me/+UCMKqyW87xZhNTIy

😎 Fancy Border Radius — интерактивный генератор нестандартных скруглений для CSS. Позволяет визуально настроить форму углов и сразу получить готовый код с поддержкой border-radius в формате slash-синтаксиса. Все изменения — наглядны и копируются в один клик. 📌 Оставляю ссылочку: 9elements.github.io 📣 Code Ready | #ресурсы