Приветствую товарищи фронты!

Я запустил небольшой канал где публикуются полезные статьи по вебу на английском языке. Если вы любитель позалипать в статьи в оригинале то можете ознакомиться вот тут:

👉 @frontend_international

​​Через Git и бэк — в фулстек: что мы узнали из опроса фронтендеров

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

Мы также попросили прокомментировать выводы Максима Орехова, руководителя центра компетенций по разработке веб-приложений ПСБ: картина была бы неполной без взгляда со стороны бизнеса.

Читать...

#longread #career

​​Базовое понимание принципа Eventloop

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

Читать...

#longread #js

​​Как использовать Docker в приложениях Node.js и React

В этой статье поговорим о том, как разработать и запустить бэкэнд на Node.js-Express и фронтенд на React в контейнере Docker.

Читать...

#longread #react #node_js

История веба, от идеи электронной почты до первой игры

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

👉 1971 год. Рэй Томлисон, программист из "Bolt Beranek and Newman", разрабатывает систему электронной почты и предлагает использовать значок @.
👉 1973 год. Через трансатлантический телефонный кабель к сети были подключены первые иностранные организации из Великобритании и Норвегии.
👉 1974 год. Открыта первая коммерческая версия ARPANET – сеть Telenet.
👉 1975 год. Джоном Витталом, программистом из университета южной Калифорнии, разработана первая современная почтовая программа, имеющая функциональность "Ответить" и "Переслать".
👉 1976 год. Роберт Меткалф, сотрудник исследовательской лаборатории компании Xerox, создает Ethernet – первую локальную компьютерную сеть.
👉 1977 год. Число хостов достигло ста. Деннис Хейс и Дейл Хезерингтон разработали первый компьютерный модем.
1978 год. Разработана первая доска объявлений (BBS). 1978 год также является годом, который принес первое нежелательное коммерческое сообщение по электронной почте, которое было разослано 600-ам пользователям калифорнийского Arpanet Гарри Зарком.
1979 год. Разработана первая многопользовательская игра MUD (сокращенно от "многопользовательский лабиринт").

#web_history

​​Задачи на собеседованиях. Event loop. JS

Каждый JS-разработчик, или тот, кто хочет им стать, сталкивался или на собеседованиях, или на разборах собесов про задачки на событийный цикл. Сначала интервьюер спрашивает кратко про event loop, затем показывает кусок кода, где обычно есть несколько console.log(), и нас просят сказать очередность появления логов. Вот об этом и пойдет речь.

Читать...

#longread #js

​​Приватные конструкторы JavaScript

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

Читать...

#longread #js #es2022

​​Как создать игру 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