Pure CSS Playing Card

Реализовано без использования картинок и JS, задействованы только HTML и SCSS.

👉 @seniorFront

Проверка объединенных строк

На собеседовании вам предстоит написать алгоритм, проверяющий, может ли строка(s), быть сформирована из двух других строк, part1 и part2.

Ограничение состоит в том, что символы в part1 и part2 должны располагаться в том же порядке, что и в s.

Пример:

'xcyc', 'xc', 'yc' —> // true
'xcyc', 'yc', 'xc' —> // true
'codewars', 'code', 'wars' —> // true
'codewars', 'cdwr', 'oeas' —> // true
'codewars', 'code', 'code' —> // false

👉 @seniorFront

​Чистая архитектура фронтенд приложений.

За свою карьеру я встречал достаточно много проектов, крупных и малых, которые страдали от огромной и запутанной кодовой базы с высоким уровнем зацепления и малой связностью, непонятной структурой, в которую весьма сложно погрузиться (на онбродинг нового сотрудника может уходить до трех месяцев) и большим количеством непонятных и громоздких компонентов, которые являются god object'ами. Стоит ли говорить, что у таких проектов имеются большие проблемы с поддержкой и развитием.

Зачастую, в ответ на вопрос "почему так?" можно услышать разнообразные оправдательные ответы, которые, в основном, ссылаются на сжатые сроки, частые продуктовые изменения и первичность продукта перед качеством кодовой базы. И большая доля правды в этом есть, но, что, если я скажу, что можно усидеть сразу на нескольких стульях и от этого выиграют все, от менеджеров до разработки? И это гораздо проще, чем кажется. Естественно, универсального решения нет, но можно существенно облегчить жизнь в будущем себе или своим потомкам.

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

👉 @seniorFront

​В чём разница в работе eventloop на сервере и в браузере?

Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении.

Event Loop в браузере
В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса.

DOM и рендеринг
Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop.

Очередь макрозадач
Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления.

Очередь микрозадач
Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop.

UI события
Браузер должен обрабатывать события, связанные с пользовательским интерфейсом, такие как рендеринг и взаимодействие с пользователем.

Event Loop в Node.js
Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы.

Фазы Event Loop
Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks.

- Timers - Эта фаза обрабатывает колбэки от setTimeout и setInterval.
- I/O callbacks - Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate.
- Poll Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе.
- Check - Обрабатывает колбэки от setImmediate.
- Close callbacks - Обрабатывает колбэки от закрытия всех I/O операций.
- Microtasks (process.nextTick и Promises) - Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе

Различия

Окружение
В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач.

Фазы Event Loop
В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач.

Микрозадачи
И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться.

Рендеринг
В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса.

👉 @seniorFront

Happy Christmas!

Карточка-поздравление с Рождеством, свёрстанная на HTML и CSS.

👉 @seniorFront

​Почему ваш мозг нуждается в «даунтайме»: история одного разработчика

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

Он брался за всё: ночные релизы, срочные багфиксы, работу по выходным, работу вместо сна... В какой‑то момент его мозг просто отказался работать. Он не мог вспомнить элементарные вещи, чувствовал себя абсолютно опустошённым и заметил первые признаки лёгкой депрессии: постоянное чувство усталости, потерю мотивации и интереса к задачам.

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

Через неделю юноша вернулся с электронным отчетом, где были таблицы и графики.
Вот тут началась настоящая трансформация. Мы разобрали его график, как код — построчно. Он заметил, что на бессмысленные задачи уходит уйма времени: бездумный скроллинг соцсетей, обсуждение мемов в рабочих чатах, бесконечный «еще один баг, и точно спать».

Мы начали с небольших, но значимых шагов: сначала убрали из его дня 2 часовой скроллинг соцсетей, затем заменили обсуждение мемов в рабочих чатах полноценным сном. Постепенно его распорядок стал меняться, как будто мы оптимизировали код — строка за строкой, убирая лишнее и добавляя важное.

Главное правило, которое мы внедрили: сон — это не роскошь, а необходимость. Минимум 7 часов сна, и не важно, как горят дедлайны. «Лучше выспаться и решить проблему за час, чем работать всю ночь и полдня разбираться в собственных ошибках», — эта фраза стала для него девизом.

Сон — это не потерянное время, а вложение в вашу эффективность и качество жизни. Дайте своему «процессору» возможность работать на полную мощность, регулярно выключая его на ночной «даунтайм». Ведь в мире, где всё автоматизируется, даже айтишники остаются людьми, которым нужен отдых.

👉 @seniorFront

JavaScript: Удобство или Угроза? Размышления о Приватности и Вебе

Интернет проник во все сферы жизни, вклад этой технологии в прогресс невозможно переоценить. Интернет-браузеры (Chrome, Firefox, Safari, Opera и т.д.) занимают топ среди инструментов "использования интернета", а сайты, которые посещают через эти браузеры — самый распространенный способ для обмена информацией.

Несмотря на прогрессивность, в кругу людей, которые заботятся о своей приватности и что-то смыслят в технологиях, JS пользуется дурной славой. Как правило, его отключают через специальные браузерные расширения и негодуют на онлайн-ресурсы, которые вынуждают включать JavaScript для их использования.

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

👉 @seniorFront

Snowflakes

Создано на canvas и JS. Анимировано библиотекой gsap.

👉 @seniorFront

Snowfall Animation Effects

В этом видео создается анимация снега на CSS и JS.

👉 @seniorFront

Жизненно?

👉 @seniorFront

wavePercent

Это svg картинка, анимированная в SCSS. Число и параметры анимации задаются в JS.

👉 @seniorFront

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