Code Ready | Frontend

Закрытый клуб для айтишников FAANG School, чьи выпускники работают в Яндексе, СБЕРЕ и других гигантах, запустили бесплатное сообщество для всех, кто изучает Java. Общайся в ламповом чате с такими же людьми «в теме», получай фидбек у опытных разрабов и черпай практические рекомендации от экспертов школы. В чате уже больше 10 000 человек, а новенькие, которые подключатся сейчас, получат доступ к большой библиотеке Java Junior с полезными материалами: – Пошаговая RoadMap по Java – Мануал по Docker. Основные команды и концепции – Микросервисы. Вопросы с собеседований – Шпаргалка по Kafka – Инструкция по работе с Git – Подробный гайд, как найти работу в IT без опыта – Подборка платформ с вакансиями для java-разработчиков Вступай сейчас. Открыли доступ всего на 24 часа!

CSS Battle — это интерактивная платформа, где разработчики соревнуются в решении задач на минимизацию CSS-кода, создавая визуальные элементы с наименьшим количеством символов. 📌 Ссылочка: cssbattle.dev 📣 Code Ready | #ресурсы

👩‍💻 Эффект дождевых капель Привет! Сегодня создадим эффект дождевых капель с использованием Canvas API. Капли будут падать с верхней части экрана и при этом постепенно исчезать, создавая эффект дождя.

Для этого мы определим класс капли, который будет включать её позицию, размер и скорость падения. Будем обновлять положение в каждом кадре, а также рисовать их на холсте с темно-голубым цветом. Добавим динамичности, чтобы капли падали случайным образом, создавая натуральный эффект дождя.

📣 Code Ready | #гайд #js

Эмуляция медленного интернета с помощью devtools Задумывались, как ваш сайт выглядит при слабом интернет-соединении? С помощью DevTools можно легко протестировать, как работает лендинг или приложение при условиях "медленного интернета". Как это подключить:

• Откройте DevTools (F12) и перейдите на вкладку Network. • В верхней части выберите пресет, например, Slow 3G или Offline, чтобы проверить работу сайта без интернета. • Обновите страницу и наблюдайте, как элементы загружаются, и какие ресурсы тормозят.

📣 Code Ready | #devtools

👩‍💻 Полезные горячие клавиши VSCode • Ctrl + F2 — Выделяет все вхождения текущего слова. • Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш. • Shift + Tab — Удаляет отступы. 📣 Code Ready | #клавиши

⚡️Всероссийский Хакатон ФИЦ 2024 🚀Попробуйте себя в одном из предложенных кейсов: 1. Система контроля и управления доступом: - Разработка системы контроля и управления доступом в реальном времени. Система будет включать API для управления сотрудниками, точками доступа и интеграцию с системой видеонаблюдения. 2. Parallax-scroll лендинг для сайта Insidium: - Разработка одностраничного приложения (SPA) с административной панелью, позволяющей редактировать контент лендинг-страницы. 3. Цифровой сервис для ведения реестра зеленых насаждений города Москвы: - Разработать сервис по работе с панорамами города Москва c возможностью разметки и подключению существующих open-source моделей для решения задач. 4. Цифровой помощник юриста: - Разработка веб-сервиса для автоматической генерации различных типовых юридических документов на основе данных, введенных пользователем, с возможностью последующей правки сгенерированного документа. И другие 19 кейсов смотрите на сайте: https://фиц2024.рф/hackathon Хакатон пройдет в 2 этапа: Отборочный этап в Онлайн, Финал в Офлайн. 🏆Призовой фонд: 6 000 000 руб. 🔥Дедлайн регистрации: 26 ноября, 23:59 📅Даты отборочного этапа: 29 ноября - 2 декабря 🦾Даты финала: 3 - 4 декабря Зарегистрируйтесь для участия в хакатоне: https://фиц2024.рф/hackathon

👩‍💻 Используем таймеры в JavaScript Таймеры — это функции высшего порядка, при помощи которых можно откладывать или повторять выполнение других функций. Рассмотрим 5 примеров использования: 1. setTimeout — для однократного выполнения кода с задержкой. Принимает функцию и задержку в миллисекундах.

setTimeout(() => {
  console.log('This message is displayed after 2 seconds');
}, 2000);

2. setInterval — для многократного выполнения кода с фиксированным интервалом. Принимает функцию и интервал в миллисекундах.

setInterval(() => {
  console.log('This message is displayed every 3 seconds');
}, 3000);

3. clearTimeout — отменяет выполнение функции, запланированной через setTimeout. Требует идентификатор таймера, возвращаемый setTimeout.

const timeoutId = setTimeout(() => {
  console.log('This message will not be displayed');
}, 5000);
clearTimeout(timeoutId);

4. clearInterval — останавливает выполнение функции, запланированной через setInterval. Требует идентификатор таймера, возвращаемый setInterval.

const intervalId = setInterval(() => {
  console.log('This message will stop displaying after 9 seconds');
}, 1000);
setTimeout(() => {
  clearInterval(intervalId);
}, 9000);

5. requestAnimationFrame — синхронизирует выполнение функции с обновлением экрана. Используется для создания плавных анимаций.

function animate() {
  console.log('Animation frame');
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

📣 Code Ready | #техсобес

На одном ивенте я подсмотрел классное правило, которым теперь пользуюсь. Когда вы торгуетесь за зарплату, цифра оффера должна пройти «хи-хи» тест!

Суть в чем: Вы не должны рассмеяться, называя «безумно высокую», как вам кажется, зарплату. Но и с той стороны эта цифра не должна вызывать смех! А дальше неочевидные выводы.

Если тест на «хи-хи» пройден и: • Вам предложили чуть меньше — вы победили. • Дали, сколько вы попросили — проиграли. • Если предложили БОЛЬШЕ вашей цифры — вы ЧУДОВИЩНО проиграли торг. Но в этом процессе есть и другие ловушки: • Как научиться уверенно говорить о деньгах, если вам стыдно? • Как вести беседу с HR, если вам страшно просить «слишком много»? • Как повысить зарплату, если кажется, что вы этого не заслуживаете? ✅ Канал «Выше вилки» расскажет все о том, как айтишнику вести переговоры о деньгах, чтобы не продешевить с зарплатой! У канала двое авторов: data scientist Паша и senior разработчик Илья. Ребята делятся личным опытом и работающими инструментами, освещая переговоры о зарплате со всех возможных сторон! Подписывайтесь на канал «Выше вилки», переходите в закреплённое сообщение и читайте топовые посты с техниками переговоров о зарплате! ➡️Тык сюда #реклама, ИП Шишков Илья Иванович, ИНН: 575206903941

Tabnine — инструмент на основе ИИ, который предоставляет автодополнение кода для различных языков программирования, помогая разработчикам ускорять процесс написания кода и повышать его качество. 📌 Ссылочка: abnine.com 📣 Code Ready | #ресурсы

👩‍💻 Морфинг формы кнопки Всем привет! Сегодня научимся создавать кнопку с плавным эффектом изменения формы при наведении. Наша кнопка начнет в виде круга, а при наведении превратится в стильный прямоугольник с закругленными углами.

Для создания эффекта морфинга мы настроим анимацию с помощью свойства transition и будем изменять размеры кнопки, радиус скругления и цвет фона. Добавим немного теней, чтобы кнопка выглядела объёмной и привлекала внимание.

📣 Code Ready | #гайд #css

Как начать использовать все возможности искусственного интеллекта в работе и жизни? Рассказываем, как пользоваться нейросетями правильно и начать на этом зарабатывать на нашем бесплатном практикуме «Нейросети для жизни и карьеры» После нашего эфира вы узнаете: — Какие задачи может решить нейросеть, чтобы облегчить рабочие задачи; — Сможете узнать, какие нейросети подойдут для текстов, создания сайтов или изображений; — Увидите много примеров применения ИИ и узнаете, как нейросети помогают фрилансерам увеличить заработок в 2 раза. Бонусом – безлимитный доступ к последней версии ChatGPT в нашем боте. Кликайте на ссылку и забирайте подробную информацию вместе. erid: LjN8K84n2 ООО Зерокодер, ИНН 9715401631

👩‍💻 Управление содержимым с overflow Свойство overflow в CSS определяет, как браузер обрабатывает содержимое, выходящее за пределы элемента. Оно принимает следующие значения:

• visible — содержимое выходит за границы элемента (значение по умолчанию). • hidden — обрезает лишнее содержимое, скрывая его. • scroll — добавляет прокрутку, даже если она не нужна. • auto — добавляет прокрутку только тогда, когда содержимое превышает размеры элемента.

📣 Code Ready | #свойство #css

👩‍💻 Атрибут contenteditable Позволяет сделать элемент на веб-странице редактируемым пользователем, позволяя вводить и изменять текст. Он имеет два значения:

• contenteditable="true" — включает редактирование текста. • contenteditable="false" (по умолчанию) — отключает редактирование текста.

📣 Code Ready | #атрибут

🔒 7539 ГБ платного контента для программистов выложили в Telegram Выбирай направление и обучайся: 👩‍💻 Java — 644 ГБ 🖥 Python — 724 ГБ 🖥 Frontend — 981 ГБ 🖥 Backend — 817 ГБ 👩‍💻 Все языки — 4373 ГБ Пост удалится через 48 часов 🕔

📖 React быстрый старт Практическое руководство, которое позволяет быстро освоить основы библиотеки React и начать создавать интерактивные веб-приложения.

Автор: Стоян Стефанов Год: 2023

⬇️ Скачать книгу 📣 Code Ready | #книга

⚡️Слита База из 1000+ топовых IT-курсов 👩‍💻 Все языки: https://t.me/main_it_baza 👩‍💻 Frontend: https://t.me/frontend_baza 👣 Backend: https://t.me/backend_baza 📊 Архив: https://t.me/knowledge_baza Всё лучшее про IT бесплатно — уже на Базе 🚀

📱 Быстрый переход из HTML к css-коду по классу CSS Peek — это плагин для VS Code, который позволяет легко находить и просматривать CSS-стили, связанные с HTML-классами и элементами. Он предоставляет возможность мгновенно перейти к определению стилей в CSS-файлах, улучшая скорость разработки и упрощая управление стилями. 📣 Code Ready | #шпора

👩‍💻 Шпаргалка Flexbox позиционирования Flexbox — позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое. Реально полезная тема, поэтому даю вам очень крутую шпаргалку для ее изучения, пользуемся) 📣 Code Ready | #шпора