Fluid Simulation With Your Text

Реализовано на canvas и чистом JS с использованием технологии WebGL

👉 @seniorFront

Scroll To Text Reveal Effect

В этом видео создается эффект проявления текста при прокрутке на JS.

👉 @seniorFront

Filter on image vs gradient backgrounds

Слева находится анимированная SVG картинка, а справа блок с множеством градиентов, наложенных через CSS.

👉 @seniorFront

Counting Duplicates

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

Пример:

"abcde" -> 0 # no characters repeats more than once
"aabbcde" -> 2 # 'a' and 'b'
"aabBcde" -> 2 # 'a' occurs twice and 'b' twice (`b` and `B`)
"indivisibility" -> 1 # 'i' occurs six times
"Indivisibilities" -> 2 # 'i' occurs seven times and 's' occurs twice
"aA11" -> 2 # 'a' and '1'
"ABBA" -> 2 # 'A' and 'B' each occur twice

Я делаю рефакторинг ежечасно» или как за пять минут улучшить приложение

История этой статьи началась с того, что я вспомнил о довольно известном высказывании Мартина Фаулера, автора книг и статей по архитектуре ПО, которое нередко вызывает недопонимание (во всяком случае так было у меня) — «Я делаю рефакторинг ежечасно». Первая мысль, которая логично возникает после этого высказывания — уважаемый публицист просто лукавит. Вторая — что, наверное, кроме рефакторинга он в своей жизни ничем больше не занимается. Но так ли это?

👉 @seniorFront

😡 Устал от нудных уроков на YouTube, где половина — вода?

Хватит это терпеть) Автор канала Формошлёп убрал воду и оставил только суть:

➧ Мини-гайды по HTML, CSS и JavaScript, которые легко читать и сразу применять.
➧ Шпаргалки, лайфхаки и полезные советы с ноткой юмора.
➧ Всё чётко, лаконично и по делу.

Неважно, новичок ты или фронтендер на опыте — у нас всегда найдётся что-то полезное!

Присоединяйся: @frontbox будем вместе шлёпать формы и красить кнопки)

​Зачем придумали async/await?

Ключевой целью введения async/await в JavaScript было упростить написание и чтение асинхронного кода, сделать его более линейным и похожим на синхронный.

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

Пример с промисами:

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("some data");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

Пример с async/await:

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("some data");
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

main();

Избегание "ада коллбеков"
Когда асинхронные операции вложены друг в друга, код становится трудным для чтения и сопровождения. Это называется "адом коллбеков" (callback hell). async/await позволяет писать асинхронный код последовательно, без вложенности.

Пример с промисами:

getData((data) => {
  processData(data, (processedData) => {
    saveData(processedData, (result) => {
      console.log(result);
    });
  });
});

Пример с async/await:

async function main() {
  try {
    const data = await getData();
    const processedData = await processData(data);
    const result = await saveData(processedData);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

Снижение вероятности ошибок
Когда используется async/await, ошибки могут быть обработаны с использованием привычного try/catch блока, что снижает вероятность пропуска ошибок.

Пример с промисами:

fetchData().then((data) => {
  return processData(data);
}).then((processedData) => {
  return saveData(processedData);
}).catch((error) => {
  console.error(error);
});

Пример с async/await:

async function main() {
  try {
    const data = await fetchData();
    const processedData = await processData(data);
    const result = await saveData(processedData);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

👉 @seniorFront

Secret Project

Концепт приложения с множеством функций на HTML, CSS и JS

👉 @seniorFront

​Как использовать японские подходы в IT. Часть 1: петля за петлей

В этом цикле статей мы поговорим о том, как устроены процессы «у них», почему они не всегда работают «у нас» и как их адаптировать для IT. Здесь не будет много душных цитат и ссылок на книги типа «Дао Toyota». Только кристаллизованный личный опыт: ошибки, наблюдения и выводы одного русского парня.

Разберись в корне проблемы (root cause, 5 why)
Как бы сделали на производстве раньше: связали нить и стали ткать дальше, будто ничего не было. Этот процесс уже стал привычным, порождая проблемы с возвратом. Проблема привела к простой мысли: если нить рвется, то станок надо остановить и сделать так, чтобы она не рвалась.

Если что-то идет не так — остановись (дзидока)
Нить — это совокупность волокон, сплетенных между собой. Мы можем не заметить, если одно из волокон надорвется, но нить станет более хрупкой. Что говорить о том, когда рвется сама нить.

Дзидока (jidoka) — принцип «целой нити», когда, например, процесс создания ткани продолжается до тех пор, пока все подпроцессы функционируют корректно. Если что-то идет не так — работа останавливается. Наша задача — сделать так, чтобы производство не останавливалось (только если мы этого не хотим) в целом, как целая нить.

Но как сделать, чтобы нить не рвалась? Усовершенствовать станок!

Постоянно совершенствуй (kaizen)
Тоёда-сан шел по циклу Деминга:
- Замечал проблему.
- Придумывал решение.
- Записывал, что идет не так.
- Менял это.
Однако он не мог знать этого, так как до разработки цикла оставались еще десятки лет. Годы жизни Сакити Тоёда — 1867–1930 годы.

Обменивайся опытом и учи (nemawashi)
Тоёда-сан пытался запустить производственный процесс, путешествовал по миру, учился, но долгое время ощутимых результатов не было. Однако все изменилось позже благодаря двум «воспитанникам» системы — Тайити Оно и Сигэо Синго, которые были в Toyota почти с самого начала.

Оно-сан, путешествуя по США, был поражен устройством работы супермаркетов: все точно находилось на полках тогда, когда это было нужно, и никакой суеты — в отличие от производства Toyota. Помня об идеях Тоёда-сан (Киитиро), он разработал концепцию Just-in-Time (JIT). Если по-простому — все должно быть на своих местах ровно в тот момент, когда это требуется, и только тогда. Если рабочему нужен ключ — он должен быть под рукой. Нужен компонент для монтажа — он тоже должен быть доступен.

Для реализации принципа были построены процессы внутренней доставки по системе Kanban — с использованием карточек-инструкций. Как в супермаркете: у покупателя есть список покупок, он наполняет корзину и доставляет ее куда нужно. Profit!

Точно вовремя (JIT)
Синго-сан, сотрудничая с Оно-сан, углубился еще дальше и заметил, что помимо нехватки материалов производство теряет время из-за дефектов оборудования и ошибок сотрудников. Можно ли устранить дефекты с минимальными временными затратами? Можно, если ремонтировать оборудование во время работы и знать, когда оно сломалось. Это называется быстрой переналадкой или Single-Minute Exchange of Dies (SMED).

Для этого станки упростили до выполнения одной-двух операций. Это позволило сделать их проще, более ремонтопригодными и заменяемыми. Кроме того, рядом с рабочими станциями стали размещать наборы компонентов для ремонта.

Узнавай о проблеме и не давай делать ошибки (andon и poka-yoke)
После наладки механической части производства Синго-сан и Оно-сан поняли, что нужно обучать персонал. Но как объяснить процесс неподготовленному рабочему? Очень просто — с помощью Kanban-доски. Как и карточки на производстве, Kanban-доска наглядно показывает, из чего состоит процесс и какие операции нужно выполнить. Это упростило контроль и сделало обучение сотрудников более быстрым.

Показывай наглядно (Kanban)
Как видите, история сделала круг и система Kanban стала применяться повсеместно. Сегодня ее «заимствуют» все, делая вид, что в этом есть что-то сложное. Смешной факт: на нескольких собеседованиях интервьюеры утверждали, что я не знаю, как работать с Kanban. Наивные!

👉 @seniorFront

Windsurf vs Cursor IDE: кто лучший AI-редактор кода?

Две популярные IDE (среды разработки) с поддержкой искусственного интеллекта: Windsurf и Cursor. Оба инструмента заявляют, что ускорят процесс написания кода, но какой из них лучше подойдет именно вам? Я тщательно изучил обе, и в статье расскажу к каким выводам пришел.

👉 @seniorFront

Dropbox Color Picker

Вся сцена - это SVG картинка, анимируемая библиотекой gsap.

👉 @seniorFront

Next Prev & Hover Effects in JavaScript

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

👉 @seniorFront

"Боже, просто подай знак, могу ли я сегодня ничего не делать и списать 8 рабочих часов"

Бог:

👉 @seniorFront

Blurred Gear Loader

Реализовано с использованием возможностей препроцессоров Pug и SCSS.

👉 @seniorFront

Image Slider

Слайдер, реализованный без использования JS, при помощи радио-кнопок.

👉 @seniorFront

Simple CSS Animation Effects

В этом видео создается оригинальный анимированный загрузчик на чистом CSS.

👉 @seniorFront

Toggle Dark

Переключатель, реализованный на чистых HTML и CSS.

👉 @seniorFront

Roman Numerals Encoder

Создайте функцию, принимающую в качестве параметра целое положительное число от 1 до 3999 (оба числа включены) и возвращающую строку, содержащую римское цифровое представление этого целого числа.

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

В римских цифрах:
1990 год записывается: 1000=M + 900=CM + 90=XC; в результате получается MCMXC.
2008 год записывается как 2000=ММ, 8=VIII; или MMVIII.
1666 год использует каждый римский символ в порядке убывания: MDCLXVI.

Пример:

   1 --> "I"
1000 --> "M"
1666 --> "MDCLXVI"

Справка:

символ - значение:

I        1
V        5
X       10
L       50
C      100
D      500
M    1,000

👉 @seniorFront

Топ-10 техник атак веб-приложений 2024 года

PortSwigger опубликовали топ-10 техник атак веб-приложений 2024 года, проекта, созданного усилиями сообщества, чтобы определить самые инновационные и важные исследования в области веб-безопасности, опубликованные за последний год.

👉 @seniorFront