Mouse animation

Реализовано на canvas и JS. Частицы генерируются и анимируются по событию mousemove.

👉 @seniorFront

Glowing Gradient Border

В этом видео создается анимированная градиентная граница блока на CSS.

👉 @seniorFront

Самый функциональный и понятный бот, который создан для решения ваших ежедневных задач от написания писем, до создания креативов и даже бизнес-планов. 

🤖 Ответы через топовые модели GPT-4o и GPT-4o-mini
🎨 Генерация изображений
📷 Распознавание фото
🗣️ Распознавание голосовых
🎙️ Озвучивание текстов

А еще...

🚫 Никакой рекламы и подписок на другие каналы
🆓 Бесплатная версия доступна всегда
🌟 Премиум-доступ на 7 дней всем новым пользователям

Начать пользоваться👉: @chatgpt

erid: 2W5zFJefG9v

Circular Navigation

Оригинальное меню, реализованное на HTML и CSS. Логика раскрытия создана в JS.

👉 @seniorFront

Backspaces in string

Предположим, что символ "#" - это как обратный пробел в строке. Это означает, что строка "a#bc#d" на самом деле является "bd" Ваша задача - обработать строку с символами "#".

Примеры

"abc#d##c" ==> "ac" 
"abc##d######" ==> ""
"#######" ==> ""
"" ==> ""

👉 @seniorFront

Как я разрабатываю конвертер в 2024 (Frontend часть)

Меня зовут Руслан и я fullstack разработчик, я работаю над заказами и разрабатываю свои digital продукты. На данный момент я разрабатываю конвертер файлов, например картинок, png в webp, jpg в png и так далее. Итак, я решил поделиться этапами своей разработки, рассказать о своем опыте и показать, как шаг за шагом создаются собственные продукты. Именно в данной статье я буду писать только про frontend часть, так как, к разработке бэкенда еще не приступил.

👉 @seniorFront

​Как взаимодействуют frontend и backend ?

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

Архитектура взаимодействия
Фронтенд: Это часть веб-приложения, с которой взаимодействует пользователь. Она включает HTML, CSS и JavaScript, а также фреймворки и библиотеки, такие как React, Vue.js и Angular. Фронтенд отвечает за отображение данных, обработку событий и обеспечение интерактивности.

Бэкенд: Это серверная часть веб-приложения, которая управляет бизнес-логикой, обработкой данных и взаимодействием с базой данных. Бэкенд может быть написан на разных языках программирования, таких как C#, Python, Ruby, Java, PHP и других. Он включает веб-серверы, базы данных и API.

HTTP-запросы и ответы
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер (бэкенд), который обрабатывает их и отправляет ответы обратно на фронтенд.

Запрос данных:
- Фронтенд отправляет HTTP GET-запрос на сервер, чтобы получить данные.
- Бэкенд получает запрос, извлекает данные из базы данных и отправляет их обратно в виде JSON-ответа.

// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // Обработка данных на фронтенде
  })
  .catch(error => {
    console.error('Error:', error);
  });

Отправка данных:
- Фронтенд отправляет HTTP POST-запрос на сервер с данными для создания нового ресурса.
- Бэкенд получает запрос, обрабатывает данные и сохраняет их в базе данных, затем отправляет ответ о статусе операции.

// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data); // Обработка ответа на фронтенде
  })
  .catch(error => {
    console.error('Error:', error);
  });

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

// Фронтенд (JavaScript с использованием WebSocket API)
const socket = new WebSocket('ws://example.com/socket');

socket.onopen = () => {
  console.log('WebSocket is open now.');
  socket.send(JSON.stringify({ message: 'Hello Server!' }));
};

socket.onmessage = (event) => {
  console.log('Received:', event.data);
};

socket.onclose = () => {
  console.log('WebSocket is closed now.');
};

RESTful API и GraphQL

RESTful API: Это стиль архитектуры API, который использует стандартные HTTP методы (GET, POST, PUT, DELETE) для взаимодействия с ресурсами. Каждый ресурс идентифицируется уникальным URL, а данные передаются в формате JSON или XML.

GraphQL: Это язык запросов для API, который позволяет клиенту запрашивать именно те данные, которые ему нужны. В отличие от REST, где каждый ресурс имеет свой URL, в GraphQL есть единая точка доступа (endpoint), и запросы могут быть более гибкими и оптимизированными.

👉 @seniorFront

Holiday Experiment

Анимация снега реализована в JS. Свёрстано на HTML и CSS.

👉 @seniorFront

​Как перестать отвлекаться по мелочам, избавиться от прокрастинации и стать продуктивнее как минимум в 2 раза?

Если ты не можешь долго сконцентрироваться на одной задаче и часто отвлекаешься на что-то другое - то эта статья специально для тебя!

Избавьтесь от перфекционизма. Он лишь замедляет работу. Не нужно быть идеалистом и стараться угодить всем подряд. Стремитесь оптимально использовать свои возможности и достигать хорошего результата. Этого достаточно, чтобы поддерживать активность и ни на что не отвлекаться.

Не ждите подходящего момента. В его ожидании можно провести вечность, но так и не дождаться. Помните, что самый лучший момент – это сейчас. Вы сами создаете нужное время для серьезных действий, а мелкие дела всегда можно успеть сделать в любое другое время.

Планируйте. Непонимание того, что нужно делать, часто приводит к тому, что человек вообще ничего не делает. Избежать этого очень просто – составляйте списки дел на день, задач – на месяц, целей – на год вперед. Вы удивитесь тому, насколько быстрее вы станете действовать и достигать результатов.

Учитесь отказывать. Окружающие люди и ненужные дела всегда будут вторгаться в вашу жизнь. И если вы будете каждый раз идти у них на поводу, вы рискуете всю жизнь топтаться на одном месте. Относитесь к своему времени и силам как к ценности – тогда и желания отвлекаться и соглашаться на все просто не будет.

Приоритизируйте. Среди массива всех дел важно уметь выделять то, что достойно внимания в первую очередь. Учитесь определять ключевые шаги для достижения своих целей. Удивительно, но все второстепенные вещи будут выполняться подспудно, и вам даже не придется выкраивать для них отдельное время.

Фиксируйте прогресс. Во-первых, вычеркивайте из списка дел все, что сделано, а во‑вторых, отмечайте даже самые незначительные продвижения на своем пути. Это поможет вам постоянно оставаться в тонусе и сохранять мотивацию для дальнейших действий, ведь вы будете наглядно видеть, что есть реальный результат.

👉 @seniorFront

Как превратить свой пет проект из хобби в карьеру

В этой статье я хочу рассказать почему и как ваши pet-проекты могут стать ключом к развитию вашей карьеры и почему нельзя недооценивать важность pet-проектов.

👉 @seniorFront

Custom Slider

Оригинальный слайдер, анимированный библиотекой gsap.

👉 @seniorFront

Animated Text Background

В этом видео создается текст, следующий за курсором. Буквы генерируются в JS, а затем анимируются в CSS.

👉 @seniorFront

Фаундер стартапа с 7-ю подписчиками готовит свой сайт к одному миллиону посещений:

👉 @seniorFront

moon toggle

Оригинальный переключатель темы, реализованный на HTML и CSS.

👉 @seniorFront

Virtual Card

Банковские карты, свёрстанные на HTML и SCSS.

👉 @seniorFront

Stacked Cards

В этом видео создается стопка карточек, анимируемая при наведении на чистом CSS.

👉 @seniorFront

Simple switch with led indicator

Переключатель - это input type="checkbox", стилизованный в CSS.

👉 @seniorFront

count '9's from 1 to n

Я хочу сосчитать от 1 до n. Сколько раз встретится цифра "9"?

9, 19, 91... будут использовать по одной "9",
99, 199, 919... будут использовать по две "9"... и т.д.

Примечание: n всегда будет целым положительным числом.

Пример:

8  -> 0
9  -> 1
10 -> 1
98 -> 18
100 -> 20

👉 @seniorFront