CodeBase | Frontend

Как запустить собственный пет-проект и зарабатывать на нём как senior-разработчик? 💲 А что, если перевернуть игру, и вместо работы в IT на дядю запустить собственный пет-проект, который будет приносить деньги? Александр Рогачев запустил телеграм-канал Indie Hackers, где рассказывает про пет-проекты, которые приносят неплохой стабильный доход своим создателям. Без венчурных инвестиций, без бизнес-планов и команды. Разве такое возможно? Да! Несколько примеров: — Агрегатор вакансий c доходом в 4000$ / месяц — Плагин для Chrome с доходом 20000₽ / месяц Вдохновляйтесь свежими идеями, которые могут обеспечить стабильный пассивных доход, на канале Indie Hackers. Уверен, что там вы найдёте то самое, что зажжёт огонь в вашем сердце! ❤️‍🔥 ➡️ Ссылка для входа

⚡️ One Page Love — это платформа, где собрано множество одностраничных сайтов и лендингов. 🔵 На этом ресурсе можно найти вдохновение и скачать понравившиеся шаблоны, некоторые из которых доступны бесплатно. CodeBase | Frontend | #templates

Привет! Хочешь научиться хорошо и быстро разрабатывать фронтенд? Тогда канал «Будни разработчика» для тебя! Подпишись, и узнаешь: ➕ как влиться во фронтенд ➕ как организовать работу ➕ как писать хороший код Ждём! ⬇️

🖥 CSS Flexbox. Полный курс В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы. ➡️ Ссылка на курс CodeBase | Frontend | #css

⚡️ Создание сайта с крутой анимацией скролла ⚡️ 🗣 Технологии: HTML, CSS, JS Будет полезно новичкам, да и старичкам тоже. 🔗 Ссылка на урок CodeBase | Frontend | #lesson #js

👩‍💻 Программирование теперь в телеграм! Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление: Обучение JavaScript с нуля Обучение Python с нуля Обучение Java с нуля Обучение HTML/CSS с нуля Обучение C/С++ с нуля Обучение С# с нуля Обучение SQL/GO/PHP с нуля Обучение Kotlin/Swift с нуля ⛓ Архив на 3489ГБ: Курсы, книги, шпаргалки, статьи, видео, ресурсы — всё собрано в одном месте: @roadmap_ready

⚡️ Подготовил для вас небольшую подборку годноты ⚡️ ➡️ Анимация 🔵 Animate.css – библиотека CSS анимаций 🔵 Magic – кроссбраузерные анимации 🔵 Hover.css – набор анимаций CSS ➡️ Фоновая заставка 🔵 Coverr – Короткие видео для фона на сайт 🔵 Subte Patterns – Фоны для сайта ➡️ Шпаргалки 🔵 FlexBox – шпаргалка по Flexbox 🔵 CSS Cheat Sheet – шпаргалка по CSS 🔵 Emmet Cheat Sheet – шпаргалка по Emmet

Если вам нравится такой формат постов, добавь 🔥🔥🔥

CodeBase | Frontend | #cheat_sheets #bg

⚡️ Plasmic - это визуальный конструктор для React, который позволяет создавать приложения на React без необходимости писать код, используя готовые компоненты. 🔵 Кроме того, Plasmic является очень эффективным и подходит для разработки маркетинговых веб-сайтов и сайтов электронной коммерции с большим объемом трафика. 🐱 GitHub 🔵 Сайт CodeBase | Frontend | #react

🗣Интерактивное описание планет Солнечной системы, созданное с использованием SCSS, а не JavaScript. 🔗 Ссылка CodeBase | Frontend | #scss

Знания, профессиональный английский и хороший юмор — набор любого айтишника🔥 А быть в тренде и качать необходимые скиллы помогут наши каналы: ⏩ Библиотека Кодера — книги, ресурсы, шпаргалки и статьи для разработчиков ⏩ CodeLang — английский язык в IT-сфере ⏩ JSON → Айти Memes — мемы для программистов и айтишников

⚡️ Вы знали, что свойство length массивов в JavaScript не только получает длину массива, но также может устанавливать её?⚡️ 🗣 При установке значения меньше текущей длины массива, элементы удаляются с конца массива, чтобы соответствовать новой длине. 🗣 Если значение больше текущей длины, то в конец массива добавляются пустые элементы. 🗣 Это часто применяется для полной очистки массива путем установки значения на 0.

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #js

Flexer - визуальный конфигуратор CSS Flexbox, который отлично подходит для начинающих для изучения и понимания работы flexbox. 🔗 Ссылка CodeBase | Frontend | #resource

🗣 Каждый программист должен знать ключевые концепции JavaScript, такие как типы данных, примитивные типы, стек вызовов, методы map, reduce, filter и многое другое. ➡️ Всего в репозитории 33 пункта, к каждому из которых есть множество статей и видеоматериалов. ➡️ Репозиторий составлен на русском языке. 🔗 Ссылка CodeBase | Frontend | #js

🗣 Каждый программист должен знать ключевые концепции JavaScript, такие как типы данных, примитивные типы, стек вызовов, методы map, reduce, filter и многое другое. ➡️ Всего в репозитории 33 пункта, к каждому из которых есть множество статей и видеоматериалов. ➡️ Репозиторий составлен на русском языке. 🔗 Ссылка

⚡️ Промисы + async/await ⚡️ 🟢 В JavaScript можно отложить выполнение определенных участков кода на неопределенное время, например, с помощью функции setTimeout(), прослушивателя событий или сетевых запросов с использованием fetch API. 🟢 Промисы представляют собой способ делать асинхронный код в JavaScript предсказуемым. Они позволяют разрешать код, созданный при помощи async. Успешное выполнение кода обрабатывается через метод .then(), а ошибки - через метод .catch(). 🟢 Async/await представляет собой улучшенный синтаксис для работы с промисами, который позволяет делать асинхронный код выглядеть как синхронный.

// Асинхронный код; 'done' журналирован после данных о положении, несмотря на то что 'done' предполагается
    // исполнить в коде позже
    navigator.geolocation.getCurrentPosition(position => {
      console.log(position);
    }, error => {
      console.error(error);
    });
    console.log("done");

    // Асинхронный код обработан после промиса; мы получаем желаемый результат — данные о положении
    // журналированы, затем журналировано 'done'
    const promise = new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });

    promise
      .then(position => console.log(position))
      .catch(error => console.error(error))
      .finally(() => console.log('done'));

    // Асинхронный код с async/await выглядит как синхронный, наиболее удобочитаемый способ 
    // работы с промисами
    async function getPosition() {
      // async/await работает только в функциях (пока)
        const result = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
      });
        const position = await result;
        console.log(position);
        console.log('done');
    }

    getPosition();

CodeBase | Frontend | #js

⚡️ Сниппет JS: Шифр Цезаря ⚡️ 🔵 Это простой метод шифрования текста, при котором каждый символ заменяется другим символом, сдвинутым на фиксированное количество позиций вправо или влево по алфавиту. 🔵 Например, при сдвиге на 1 символ А становится Б, Б становится В и так далее.

const caesarCipher = (str, num) => {
  const arr = [...'abcdefghijklmnopqrstuvwxyz']
  let newStr = ''

  for (const char of str) {
    const lower = char.toLowerCase()

    if (!arr.includes(lower)) {
      newStr += char
      continue
    }

    let index = arr.indexOf(lower) + (num % 26)

    if (index > 25) index -= 26
    if (index < 0) index += 26

    newStr +=
      char === char.toUpperCase() ? arr[index].toUpperCase() : arr[index]
  }
  return newStr
}

caesarCipher('Hello World', 100) // Dahhk Sknhz
caesarCipher('Dahhk Sknhz', -100) // Hello World

CodeBase | Frontend | #snippets

Анимированный куб "SVG Starry cube" Технологии: CSS и SVG 🔗 Ссылка CodeBase | Frontend | #animated

⚡️ Псевдокласс :target ⚡️ 🔵 Применяет стиль к целевому элементу в документе. 🔵 Он представляет целевой элемент с помощью id в соответствии с фрагментом URL. ✔️ Синтаксис

:target {
css declarations;
}

CodeBase | Frontend | #css

Вы просили — мы сделали! https://t.me/+Qc2W9HK2HOwxMGUx Канал с отборными мемами для айтишников и программистов👆🏻

⚡️ Задание: Создайте переключаемую боковую панель ⚡️ Периодически мы будем предлагать вам задания для выполнения и прокачки своих навыков. ➡️ Особенности: 🟢Возможность включения и отключения боковой панели 🟢Генерация пунктов меню из объекта JavaScript ➡️ Передовые функции: 🟢 Возможность перехода на различные страницы через взаимодействие с элементами 🟢 Сохранение выбранного состояния при наличии хэша в URL ➡️ В процессе вы узнаете: 🟢 Как проводить проверки 🟢 Манипуляции с классами 🟢 Динамическое отображение элементов 🟢 Использование API истории 🟢 Определение местоположения объекта 🔗 Макет 🔗 Учебник

Если хотите и дальше получать полезную инфу с крутыми проектами, добавь 🔥 🔥 🔥

CodeBase | Frontend | #task