​​Как создать игру Tetris с помощью Three.js

Всем привет! Клевая статейка с кучей примеров кода о том как на three.js написали аналог тетриса.

Читать...

Замораживание объектов в JS

Всем привет товарищи фронты! Сегодня небольшой пост на тему вполне рядового но не самого часто используемого метода для объектов в JS - .freeze()

.freeze() предотвращает добавление свойств к объекту, удаление старых свойств из объекта и изменение существующих, что довольно полезно в современной парадигме ООП.

Пример кода:
const obj = {foo: 'bar'};

➡️ Перед замораживанием: можно добавить, изменить или удалить свойства
obj.lumpy = 'woof';
delete obj.foo;

➡️ Замораживаем
Object.freeze(obj);

➡️ Так можно проверить
Object.isFrozen(obj); // === true

➡️ Теперь никакие изменения не произойдут
obj.foo = 'quux';

Удачи в экспериментах!

#shortread #js

​​Что люди не понимают о React Native Modals

Алоха коллеги! Я сделал перевод статьи What Everyone Is Getting Wrong About React Native Modals и опубликовал на Хабре. Мне показалась эта статейка довольно полезной.

👉 Читать...
👉 Читать оригинал...

#longread #js

Примерно так иногда выглядит решение небольшой баги которую я оценил в 15 минут

​​Пример задачи на алгоритмы и ее разбор

Всем привет! Вышел крутой видос на ютуб канале IT синяк в котором разбирается:

👉 Задача на знание алгоритмов которую задали на интервью автору и варианты ее решения
👉 Почему по мнению автора между скоростью и потреблением памяти возможно стоит выбрать скорость.

В общем рекомендую к просмотру!

Смотреть...

#video #algorithms

​​Вредные советы для React-разработчиков

Недавно британские ученые открыли, что на свете бывают непослушные разработчики, которые все делают наоборот. Им дают полезный совет: «Не подключай целую библиотеку ради одной функции», — они берут и подключают. Им говорят: «Будь внимателен на код-ревью», — они тут же начинают апрувить все подряд. Ученые придумали, что таким разработчикам нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.

Читать...

​​Алгоритмы для веб-разработчиков простыми словами

В этой статье мы поговорим о том, зачем вообще их нужно знать веб-разработчикам, и затронем тему оценки сложности алгоритмов и Big O нотации.

Читать...

​​Заметка о Mapped Types и других полезных возможностях современного TypeScript

Перевод 2 статей:
Use TypeScript Mapped Types Like a Pro о связанных или сопоставленных типах (mapped types) TypeScript;
10 TypeScript features you might not be using yet or didn't understand о полезных возможностях современного TS.

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

#longread #ts

​​Микрофронты для всех. Как мы построили платформу 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