Code Ready | Frontend

🖥 React - теперь в телеграм! - 45,14% разработчиков сайтов использовали React в 2024 году — это самая популярная библиотека для создания пользовательских интерфейсов; - 221 850 звёзд у React на GitHub; - 27,12% разработчиков хотят изучить React; - 17.9 млн раз пользователи установили React В канале React JS мы разбираем код современных Frontend вместе на примерах и делимся с вами.Никакой воды, только практика. А здесь мы собрали крутую папку Frontend разработчика. Подписывайтесь, потом сами себе спасибо скажете: @react_tg

✅ Универсальный помощник. Error Lens — это мощный плагин для VSCode, который помогает улучшить вашу производительность при разработке, выявляя ошибки и предупреждения прямо в коде. Он мгновенно выделяет ошибки, предупреждения и другие типы сообщений об ошибках прямо в редакторе, делая их более заметными и обеспечивая быстрый доступ к информации о них. @code_ready | #плагин

✅ Создание разных типов курсора В CSS есть множество разных типов курсоров, и все они созданы с помощью одного свойства cursor. Оно определяет тип отображаемого курсора при наведении мыши на объект. В этом посте, я показывал все типы курсоров которые существуют в css. А снизу пример кода, как использовать эти свойства.

<button class="progress">progress</button>
<button class="wait">wait</button>
<button class="not-allowed">not-allowed</button>

.progress       { cursor: progress;}
.wait           { cursor: wait;}
.not-allowed    { cursor: not-allowed;}

button {
    width: 100px;
    height: 35px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
}

@code_ready | #обучение #css

— Кто мы? — Фронтенд-разработчики! — Чего мы хотим? — Делать крутые сайты! — Где этому научиться? — На канале «Будни разработчика», конечно! — А что там? — Скрытые фишки фронтенда, истории лучших девелоперов и топовые статьи!

@code_ready | #консоль

✅ Создание анимации spinner Этот код представляет собой анимированный спиннер, который может использоваться для индикации загрузки или выполнения определенного процесса.

<div class="spinner"></div>

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: spinner 1s linear infinite;
    margin: 0 auto;
  }
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

@code_ready | #обучение #css

Боишься командную строку? Зря! В канале BashDays ты найдешь лучшие Linux и Bash практики. Действующий девопс-инженер, самобытно и с долей юмора, затрагивает темы: - Рекавери файлов через grep - Почему коты гадят в макбуки - Как отключить логирование - Неочевидные трюки на Bash - Сниффер SSH на strace И это только цветочки. А если заскучал, поиграй с друзьями в piu-piu и надери им бэкенд. Рекомендую! В BashDays даже джуны становятся сеньорами. Подписывайся — @bashdays

@code_ready | #мем

👋 Всем привет, я автор этого канала, и хочу обратиться к вам. Есть ли тут крутые фронтенд разработчики, у которых достаточно свободного времени? Требуются люди для долгосрочного оплачиваемого сотрудничества. Для вас это как простая подработка, никаких сайтов делать не придется. Нужны хорошие знания html, css, особенно хорошо владеть ванильным JS (без фреймворков), умение создавать веб-приложения и много свободного времени. Спасибо 🔥 Отпишите мне в личные сообщения @energy_it.

(пост публикую на минут 30)

✅ Запрос разрешения и отправка уведомлений Этот код позволяет запрашивать разрешение пользователя на отправку уведомлений и создавать уведомление с заданным текстом и изображением при получении разрешения.

<button class="button">Показать сообщение</button>

const notifyBtn = document.querySelector(".button");
const reqestPermission = function () {
  if (!("Notification" in window)) {
    throw new Error ("Браузер не поддерживает уведомления");
  }
  Notification.requestPermission().then((permission) => {
const notification = new Notification("Code Ready",{
      body: "Привет! Подпишись на @code_ready",
      icon: "img/img.jpg",});});};
notifyBtn.addEventListener("click", reqestPermission);

@code_ready | #обучение #js

✅ Создание крутых скриншотов кода CodeSnap — плагин VSCode, предназначенный для создания красивых скриншотов кода. Основные возможности: Выбор участка кода, Настройка внешнего вида и Экспорт в различные форматы. Чтобы понять его интерфейс и научиться правильно использовать, я оставляю ссылку на видео для настройки этого плагина. @code_ready | #практика

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ▪️ Как научиться отвлекаться от работы и отдыхать? ▪️ Как совместить кучу рабочих задач и время с семьей? ▪️ Как справиться с прокрастинацией? ▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного, даже бесплатный мини-курс.

Всем новоприбывших и старикам этого канала привет) На этой неделе, Я закрывал продажи рекламы, ну чтобы вы отдохнули от нее 😁. Но хочу сказать, что уже продажи открыты, и скорее всего, каждый день будет выходить 1 реклама. На качество постов это не повлияет, наоборот, даже полезно будет смотреть и подписываться на новые, интересные каналы про веб разработку. 1 реклама на 2-3 поста - вроде-бы нормально) Та и монетизировать канал надо, получать деньги с него. Как говорили подписчики под 1 постом,

Бесплатно ничего не делай, цени свой труд.

Поэтому, думаю это неплохо, делитесь своим мнением в комментариях и ставьте реакции 👍🔥 если согласны.

🖥 Javascript - первый канал для FrontEnd разработчиков. По контенту: 1. Готовые примеры c кодом: карусели, паралаксы. 2. Frontend курсы 2024 года бесплатно. 3. 2000 реальных задач с собесов с разбором от Senior разработчика. Ещё мы собрали маст-хэв папку Frontend разработчика. Подписывайтесь, такие знания в 2024-м году на вес золота: @javascriptv

✅ Шпаргалка по методам строк Эта шпаргалка предоставляет список основных методов для работы со строками в JavaScript. Каждый метод сопровождается кратким описанием его функциональности и примером использования. @code_ready | #js #шпаргалка

Всем привет, я автор этого канала, и хочу обратиться к вам. Есть ли тут хорошие фронтенд разработчики, у которых достаточно свободного времени? Отпишите в личку @energy_it. Нужен 1 человек для долгосрочного, оплачиваемого сотрудничества. Html, css, js и свободное время, всё что нужно. Спасибо 🔥

✅ Горячие клавиши для ускорения верстки • Alt + ↓ / ↑ — переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш. • Ctrl + Shift + ← / → — выделит слова после или перед курсором. • Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах. @code_ready | #клавиши

✅ Переключаем видимость пароля Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.

<input type="password" id="passwordInput">
  <input type="checkbox" id="showPasswordCheckbox"> Показать пароль

const passwordInput = document.getElementById('passwordInput');
const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
showPasswordCheckbox.addEventListener('change', function() {
    if (showPasswordCheckbox.checked) {
        passwordInput.type = 'text';
    } else {
        passwordInput.type = 'password';
}});

@code_ready | #обучение #js