​​Микрофронты для всех. Как мы построили платформу UIF, и что под капотом

Сегодня я расскажу про User Interface Framework (UIF) — нашу внутреннюю платформу интеграции веб-приложений, которая позволяет проводить разработку микрофронтов и микросервисов разными командами, делает удобным переиспользование кода и увеличивает гибкость подхода, чтобы разные команды могли варьировать технологии под свои нужды.

Читать...

CSS псевдокласс :invalid

Приветствую коллеги!

Я думаю что довольно часто кто-то из нас встречался с задачей где невалидный инпут нужно как-то стилизовать и вывести допустим ошибку. Я обычно для добавления стилей использовал добавление класса, например .error. Оказывается в CSS, есть псевдокласс :invalid, причем довольно давно и я реально не знал о нем.

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

HTML
<form>
<label>Введите URL:</label>
<input type="url" />
<br />
<br />
<label>Введите эл. почту:</label>
<input type="email" required/>
</form>

CSS
input:invalid {
background-color: #ffdddd;
}

form:invalid {
border: 5px solid #ffdddd;
}

Итог: если мы введем что-то не похожее на email или url то будем иметь стилизованную form и input.

❗ P.S. Так же у нас есть псевдокласс :valid, в целом думаю не нужно объяснять как он работает, все то же самое но наоборот. Удачи в экспериментах.

#shortread #html #css

​​React: полное руководство по повторному рендерингу

Перевод статьи React re-renders guide: everything, all at once, посвященной повторному рендерингу (re-render, далее — ререндеринг) в React.

👉 Читать перевод...
👉 Читать оригинал...

#longread #js #react

​​Team Lead Simulator — маленькая игра про большую ответственность

Наверняка многие из вас в детстве баловались игрушками вроде «ПРОГРАММИСТ 1.3» — эдакими текстовыми квестами, в которых игрок должен был прокачаться из начинающего программиста и стать хакером (термина «сеньор» тогда, наверное, еще не было), собрать самый крутой комп, заработать больше всех денег. При этом весь геймплей заключался в нажатии нужных кнопок действий и менеджменте немногочисленных ресурсов. Я, с теплом вспоминая такие игры, а также текстовые квесты в Космических Рейнджерах 2, решил создать игру Teamlead Simulator, в которой...

Читать...

#longread

История веба до концепции всемирной паутины

Всем привет! Еще одно десятилетие из истории появления и развития веба вам в копилочку. Если интересно почитать предыдущие части то вот вам ссылочки:
➡️ часть 1...
➡️ часть 2...

А теперь поехали дальше!

👉 1980 год. Европейская организация по ядерным исследованиям CERN запустила ENQUIRE – первую гипертекстовую программу.
👉 1982 год. Рождение современного Интернета – ARPA создала единый сетевой язык TCP/IP.
👉 1983 год. 1 января 1983 года сеть ARPANET перешла с протокола NCP на TCP/IP, что позволило разделить эту сеть на MILNET, собственно сеть для военных нужд, и ARPANET, использовавшуюся в исследовательских целях.
👉 1984 год. Число хостов превысило тысячу. Разработана система доменных имен (DNS). DNS позволила создать масштабируемый распределенный механизм для отображения иерархических имен компьютеров в Интернет - адресах. В этом же году в университете Висконсии был создан сервер доменных имен. Также в 1984 году у сети ARPANET появился серьезный соперник: Национальный научный фонд США (NSF) основал обширную межуниверситетскую сеть NSFNet (National Science Foundation Network), которая была составлена из более мелких сетей (включая известные тогда сети Usenet и Bitnet) и имела гораздо большую пропускную способность, чем ARPANET. К этой сети за год подключились около 10 тыс. компьютеров.
👉 1985 год. Стюарт Брэнд и Ларри Бриллиант разработали WELL (Whole Earth Lectronic Link), одно из старейших виртуальных сообществ.
👉 1988 год. Разработан протокол Internet Relay Chat (IRC), благодаря чему в Интернете стало возможно общение в реальном времени (чат). Запущен один из первых крупных Интернет червей "Червь Морриса", написанный Робертом Моррисом Таппан и вызвавший серьезные перебои в больших частях Интернета.
👉 1989 год. Число хостов превысило 10 тысяч. В CERN родилась концепция Всемирной паутины, предложенная британским ученым Тимом Бернерсом- Ли. Он же в течение двух лет разработал протокол HTTP, язык HTML и идентификаторы URI

​​Делаем конфиг сервер безсерверным при помощи AWS API Gateway и DynamoDB

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

Читать...

#longread

​​Почему ваш веб-сайт должен быть меньше 14 КБ

Чем меньше веб-сайт, тем быстрее он грузится, и это неудивительно.

Удивительно то, что страница на 14 КБ может грузиться гораздо быстрее, чем страница на 15 КБ, даже на 612 мс быстрее, хотя разница между страницами на 15 КБ и 16 КБ минимальна.

Так происходит из-за алгоритма медленного старта TCP. В этой статье я расскажу, что это такое, как оно работает и почему это важно. Но сначала мы вкратце расскажем об основах.

Читать...

​​Найти вероятность выпадения k (сумма выпавших значений) при бросании n кубиков [часть 2]

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

Читать...

#longread #algorithms

Когда оставили стажера без присмотра

​​Велосипедим Promise на TypeScript

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

Читать статью...
Исходный код...

#longread

​​Web Dev [world] - англоязычный канал со статьями и новостями о веб разработке.

Вам сюда: 👉 @frontend_international

В общем добро пожаловать!

​​Как написать кроссбраузерное расширение в 2022 году

В один прекрасный день ко мне пришли менеджеры и сказали, что нужно написать браузерное расширение для внутреннего джобборда. Оно должно взаимодействовать с сайтами avito и hh, чтобы добавлять кандидатов в HR-систему, не скачивая и не вбивая вручную контакты из резюме на сайте.

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

Читать...

#longread

​​Кто-нибудь, объясните мне прелесть tailwind

Интересное мнение на тему tailwind css. Рекомендую так же посмотреть комментарии в статье.

Читать...

#longread #tailwind

​​TypeScript: разбираем исходный код Radash

Radash — это современная альтернатива Lodash, библиотека, предоставляющая набор часто используемых утилит (вспомогательных функций), реализованных на TypeScript. В данной статье мы вместе с вами разберем исходный код нескольких наиболее интересных утилит.

Репозиторий с кодом библиотеки находится здесь.

Читать статью...

#longread #ts

​​10 задач с JavaScript Promise для подготовки к собеседованиям

Promise — это отличительная особенность JavaScript как асинхронного языка программирования. Нравится вам это или нет, понять его в любом случае придется.
В этой статье автор приводит 10 примеров кода с Promise, начиная от базового уровня заканчивая продвинутым. Готовы? Начнем!

Приступить к задачкам...

#longread #tasks

​​Обязан ли разработчик развиваться?

Из каждого утюга раздаются возгласы, что разработчик должен развиваться день и ночь, ведь у нас такая профессия! Каждый должен обладать солидным профилем на гитхабе, для чего, придя домой после дня работы, обязан контрибутить в опенсорс-проекты. Впрочем, отдохнуть тоже можно — например, запустив в перерыве свой пет-проект и поучаствовав в хакатоне. Ночью можно совсем расслабиться и понабивать себе профиль в литкоде, а во время походов в туалет — прочитать пару статей.

Но действительно ли всё это надо? Разработчик в самом деле обязан проводить всё своё свободное время за написанием кода? А обязан ли разработчик постоянно развиваться?

Читать...

#career

​​Продвинутые хуки в React: всё о UseEffect

В этой статье рассмотрим советы и приёмы, которые помогут более профессионально написать код на React.

Читать...

#react

​​Долги, рекомендации и социальные сети: как нас проверяют при приёме на работу

С проверками службы безопасности при трудоустройстве сталкивались 72% жителей России, а в ИТ-сфере — 74% кандидатов на вакансии. Это распространённая практика, но не все соискатели понимают, что конкретно ищут работодатели и зачем. Об этом мы расскажем в нашей статье.

https://habr.com/en/company/netologyru/blog/687256/

#career

Новая фича при использовании форм в JS или submit() vs. requestSubmit()

Алоха товарищи фронты! Недавно в недрах интернетов я случайно нарыл инфу о таком событии в JS как requestSubmit(). Отличий не так что бы совсем много но они довольно интересны.

Допустим у нас есть такая форма:

<form action="/changename">
<label for="name">Name</label>
<input type="text" id="name" required>
</form>

<button>Change name</button>

const btn = document.querySelector('button');
const form = document.querySelector('form');

btn.addEventListener('click', function () {
form.submit();
})

Мы видим что у поля name есть аттрибут required.

Как сработал бы обычный .submit() в том случае если значение name отсутствует. Он подстветит нам ошибку но при этом отправит форму так как его не совсем волнует валидна форма или нет.

Как сработает .requestSubmit(). Он подсветит нам ошибку и форму не отправит до тех пор пока форма не будет валидна.

В общем вот, удачных экспериментов!

#shortread #js