Визуальные подсказки для проверки формы

Используя только CSS, вы можете отображать для пользователей визуальные подсказки относительно правильности ввода, введенного в формы. Мы можем использовать псевдоклассы CSS :valid и :invalid к элементам формы, чтобы применять соответствующие стили, когда их содержимое проверяется успешно или нет.

<input
    type="text"
    pattern="([a-zA-Z0-9]\s?)+"
    placeholder="Enter full name"
    required
/>
<span></span>

<span> будет использоваться для отображения результатов проверки.
А приведенный ниже CSS стилизует входные данные относительно результата проверки:

input + span {
    position: relative;
}

input + span::before {
    position: absolute;
    right: -20px;
    bottom: 0;
}

input:not(:placeholder-shown):invalid {
    border: 2px solid red;
}

input:not(:placeholder-shown):invalid + span::before {
    content: "✖️";
    color: red;
}

input:not(:placeholder-shown):valid + span::before {
    content: "✓";
    color: green;
}

👉 @frontendInterview

Фронтенд-разработчик? Поможем начать зарабатывать от 200 000 рублей в месяц 💸

Обучение по React от школы IT Mentor — это первый шаг к успешной карьере в IT. Мы предлагаем глубокое изучение актуальных технологий, кураторство опытных менторов и гарантию трудоустройства — платите только если нашли работу ☄️

Курс подойдет тем, кто:
— только начинает изучать разработку и хочет получить все необходимые знания в одном месте,
— уже имеет практический опыт, но хочет перейти на новый грейд и увеличить доход,
— оканчивал технические ВУЗы или онлайн-курсы, но затрудняется найти работу.

👉🏻 Программа включает в себя изучение HTML, CSS3, React, TypeScript, JavaScript, Redux,
а также работу на реальном проекте и подготовку к собеседованиям.

🙌🏻 Сосредоточьтесь на получении новых навыков, не беспокоясь о финансах и будущей работе — мы поможем прокачать хард- и софт-скиллы для вашего успешного старта на позиции Middle React разработчика уже в следующем году!

Записаться на обучение react и подробнее ознакомиться с программой — https://clck.ru/3E8Jh4

Реклама. ИП Тюльников ИНН 526223159257.

Смена специализации в IT: когда отпуск уже не спасает

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

В IT-индустрии часто переходят на новые позиции: тестировщики становятся автотестировщиками или программистами, бизнес-аналитики — системными аналитиками, разработчики осваивают новые области.

Однако не всем удаётся сменить специальность и не всегда это приводит к положительному результату. Как перейти из одной IT-профессии в другую с минимальными потерями? Опросили экспертов и собрали их мнения.

👉 @frontendInterview

Видео для трудяг с синдромом самозванца

Смотреть каждый день за полчаса до конца работы.

👉 @frontendInterview

Что такое Deno?

Deno - это современная среда выполнения JavaScript/TypeScript, созданная Райаном Далом, первоначальным создателем Node.js, в 2018 году. Она была разработана для решения ряда проблем и ограничений, присутствующих в Node.js. Deno внедряет различные функции и архитектурные решения для улучшения безопасности, опыта разработчиков и производительности.

Подробнее про преимущества и недостатки в статье.

👉 @frontendInterview

JavaScript для профессиональных веб-разработчиков

Самое полное руководство по современному JavaScript.
Как максимально прокачать свои навыки и стать топовым JS-программистом? Четвертое издание «JavaScript для профессиональных веб-разработчиков» идеально подойдет тем, кто уже имеет базовые знания и опыт разработки на JavaScript. Автор сразу переходит к техническим деталям, которые сделают ваш код чистым и переведут вас с уровня рядового кодера на высоту продвинутого разработчика.

👉 @frontendInterview

Which are in?

При задании двух массивов строк a1 и a2 возвращается отсортированный массив r в лексикографическом порядке строк из a1, которые являются подстроками строк из a2.

Пример 1:

a1 = ["arp", "live", "strong"] 

a2 = ["lively", "alive", "harp", "sharp", "armstrong"] 

returns ["arp", "live", "strong"]

Пример 2:

a1 = ["tarp", "mice", "bull"] 

a2 = ["lively", "alive", "harp", "sharp", "armstrong"] 

return []

Примечания: Массивы записываются в "общей" нотации.
В Shell bash a1 и a2 - это строки. Возврат - это строка, в которой слова разделяются запятыми.
Осторожно: в некоторых языках r должен быть без дубликатов.

👉 @frontendInterview

​В чём отличие хранения данных в local storage от куки ?

Хранение данных в Local Storage и использование куки (cookies) — это два различных способа сохранения информации на стороне клиента в веб-разработке. Каждый из них имеет свои особенности, преимущества и недостатки:

Local Storage
- Объем данных: Предоставляет значительно больше пространства для хранения данных по сравнению с куки — до 5-10 МБ в зависимости от браузера.
- Доступность: Данные, сохраненные нем, доступны только на том же домене и не отправляются на сервер при каждом запросе, в отличие от куки.
- Срок хранения: Данные нем сохраняются бессрочно или до тех пор, пока не будут явно удалены кодом или пользователем через настройки браузера.
- Безопасность: Так как данные из него не отправляются на сервер с каждым запросом, риск перехвата этих данных ниже, чем у куки. Однако, поскольку данные доступны через JavaScript, Local Storage уязвим к XSS-атакам (межсайтовому скриптингу).

Куки (Cookies)
- Объем данных: Ограничены размером, обычно максимум 4 КБ на одно куки.
- Доступность: Отправляются на сервер при каждом HTTP-запросе к домену, который их установил, что может быть полезно для аутентификации или отслеживания сессий пользователя.
- Срок хранения: Срок жизни куки может быть установлен при их создании. Если срок не установлен, куки считается сессионным и удаляется при закрытии браузера.
- Безопасность: Куки могут быть настроены как HttpOnly, что делает их недоступными и уменьшает риск XSS-атак. Также куки могут быть помечены как Secure, что означает их отправку только по защищенным соединениям (HTTPS).

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

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

👉 @frontendInterview

👉 @frontendInterview

Кaк сделать поле с выбором по прокрутке?

Элемент <select> представляет собой довольно простую концепцию: выделите его, чтобы увидеть набор из <option>, которые можно выбрать в качестве входного значения. Это отличная модель, и я не предлагаю ее менять. Тем не менее, мне очень нравится ковыряться во всем, и я нашел интересный способ превратить <select> в своего рода циферблат — где параметры выбираются путем прокрутки их в нужное положение, мало чем отличаясь от кодового замка или средств выбора даты iOS. Любой, кто расширял <select> для выбора страны, знает, насколько болезненно длинными могут быть списки, и это может быть одним из способов предотвратить это.

👉 @frontendInterview

Готовь телегу зимой: какие технологии и фреймворки будут актуальны в IT 2025 году

В ИТ-индустрии всё скоротечно: технологии постоянно совершенствуются, меняются, выходят новые релизы, а мы ежегодно продолжаем бороться с легаси, выкатывать изменения и переезжать на новые версии языков и инструментов. Мы расспросили членов ПК конференции Merge 2024 о том, чего айтишникам ждать в 2025 году. Итак, поехали.

👉 @frontendInterview

Поговорим про деньги в IT?

Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы.

Пройти опрос можно здесь

Работодатели, выберите своего бойца

👉 @frontendInterview

​Что такое мемоизация ?

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

Как это работает
При первом вызове функции с определённым набором аргументов результат выполнения функции сохраняется в каком-либо хранилище (чаще всего в виде объекта или карты). При последующих вызовах функции с теми же аргументами, вместо выполнения функции, возвращается сохранённый результат. Это значительно сокращает время выполнения, особенно если исходная функция требует значительных вычислительных ресурсов.

Применение:
Мемоизация часто применяется для оптимизации производительности в различных областях, включая:

- Рекурсивные вычисления, например, вычисление чисел Фибоначчи.
- Дорогостоящие вычисления, которые часто повторяются с одними и теми же аргументами.
- Оптимизация производительности веб-приложений, например, в React, где меморизация помогает избежать ненужных перерисовок компонентов.

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = args.toString();
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

// Пример использования меморизации для функции вычисления факториала
const factorial = memoize(function(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
});

console.log(factorial(5));  // Вычисляется и сохраняется в кэше
console.log(factorial(5));  // Возвращается результат из кэша, вычислений не происходит

👉 @frontendInterview

Наглядный CSS

На 1 июня 2018 года CSS содержал 415 уникальных свойств, относящихся к объекту style в любом элементе браузера Chrome. Сколько свойств доступно в вашем браузере на сегодняшний день? Наверняка уже почти шесть сотен. Наиболее важные из них мы и рассмотрим.
Грег Сидельников упорядочил свойства по основной категории (положение, размерность, макеты, CSS-анимация и т. д.) и визуализировал их работу.
Вместо бесконечных томов документации – две с половиной сотни иллюстраций помогут вам разобраться во всех тонкостях работы CSS. Эта книга станет вашим настольным справочником, позволяя мгновенно перевести пожелания заказчика и собственное видение в компьютерный код!

👉 @frontendInterview