JavaScript *

🖥 Обновление бесплатной книги по Javascript: 𝗘𝗹𝗼𝗾𝘂𝗲𝗻𝘁 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

Недавно вышло 4-е издание этой одной из лучших книг на английском языке по JavaScript, и она абсолютно бесплатна.

Существует большое количество ресурсов для изучения JavaScript. Однако многие из них являются не очень качественными. Но эта книга стоит вашего внимания.

Написанная Марийн Хавербеке, книга поможет вам перейти от базовых к более продвинутым концепциям JavaScript, включая практику на создание нескольких мини-проектов.

📚 Книга

А здесь я собрал лучшие бесплатные курсы и книги Frontend разработчика.

🍏 Apple выпустили тонну крутых шаблонов для Figma.

 Apple выпустили множество новых красивых  дизайн-шаблонов для Figma.

 Можно посмотреть, потыкать гайды😊

Даже про клипсы не забыли!

Забиарйте себе)

https://www.figma.com/@apple

Еще больше крутых шаблонов и frontend проектов в моем канале, залетайте в гости.

Vue.js подборка материалов для подготовки к собеседованию.

Недавно в моем канале, посвященном frontend, мы собирали материалы для подготовки к собесам. В этом посте я собрал лучшие материалы, которые помогут вам подготовиться с собеседованию Vue.js разработчика.

• 50+ основных вопросов и ответов на собеседовании по Vue.js: от простого до продвинутого

• Список из 300 вопросов и ответов для интервью по VueJS ru

• List of 300 VueJS Interview Questions And Answers en

• Топ-100s Вопросов с собеседований Vue.js 

• Собеседование на Vue js разработчика. 50 вопросов для подготовки к собеседованию по Vue.

• Открытое собеседование Vue.js | Junior Frontend-разработчик

 • Vue.js вопросы с собесов.

• Публичное собеседование фронтендера на Vue с компанией Timeweb Cloud

Вам так же могут быть интересны подборки:

- 100 вопросов по React для подготовки к собеседованию

- Большая подборка вопросов с  собеседований: Frontend, Javascript, React, Vue и многое другое.

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

Вышел React 19 beta.

Команда react.js во всю готовится к предстоящей конференции и видимо, несмотря на большие сомнения, именно на ней они представят React 19. На сайте уже была опубликована страница релиза.

В релизе всё то, о чём рассказывала команда next.js - action для формы, новые хуки, серверные компоненты и серверные действия, метаданные страницы и предзагрузка ресурсов из коробки. Из нового (или упущенного мной) - для передачи ref больше не нужно использовать forwardRef, обновлённое API контекстов и продвинутая поддержка таблиц стилей.

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

Также вчера вышел React 18.3.0, а уже сегодня вышла минорка - React 18.3.1. Это промежуточные релизы, в которых добавили предупреждения о том, что будет помечено как устаревшее или удалено. Так можно подготовить проекты к предстоящему обновлению.

Препарируем React и находим родовые травмы

Выбор двух миллионов разрабов, но..

• Не умеет в реактивность.

• Ререндеры по любому чиху.

• Смешивает инициализацию и обновление, логику и шаблон.

• Путается между пересозданиями и перемещением.

• Все компоненты либо неуправляемые, либо неполноценные, либо ожиревшие.

• Кривая эмуляция объектов через функции с хуками.

• Не типизируемый VDOM на выходе.

• Разобщённая экосистема со слабой поддержкой TS.

• Горы бойлерплейта по мере приближения к проду.

В продолжение темы: Реактивный React, Читерские бенчмарки.

Копилка благодарностей: https://boosty.to/hyoo

Лучшие телеграм каналы для программистов

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

⚡Легкий способ получать свежие обновлении и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь:

Машинное обучение: t.me/ai_machinelearning_big_data 

Хакинг: t.me/linuxkalii

Базы данных: t.me/sqlhub

Data Science: t.me/data_analysis_ml

C#: t.me/csharp_ci

Go: t.me/Golang_google

ИИ/технологии t.me/vistehno

Java: t.me/javatg

Javascript: t.me/javascriptv

React: t.me/react_tg

Python: t.me/pythonl

C++/ t.me/cpluspluc

Devops: t.me/devOPSitsec

Linux: t.me/+A8jY79rcyKJlYWY6

Мобильная разработка: t.me/mobdevelop

Docker: t.me/+0WdB4uvOwCY0Mjdi

Rust: t.me/rust_code

PHP: t.me/phpshka

Android: t.me/android_its

Big Data: t.me/bigdatai

Тестирование: https://t.me/+F9jPLmMFqq1kNTMy

Аналитика данных: https://t.me/+mAXY9ppJwitkMDBi

Kubernets: t.me/+vE7jzitan5QzZjVi

Frontend https://t.me/+U3U3HoZzEglkNDdi

😆ИТ-Мемы: t.me/memes_prog

🇬🇧Английский: t.me/english_forprogrammers

📕Ит-книги бесплатно: https://t.me/addlist/BkskQciUW_FhNjEy

ИИ: t.me/vistehno

Книги по искусственному интеллекту https://t.me/+2rl907ptiWliYmYy

💼 Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi

Папка Go : t.me/addlist/MUtJEeJSxeY2YTFi

Папка Python : t.me/addlist/eEPya-HF6mkxMGIy

Папка ML: https://t.me/addlist/2Ls-snqEeytkMDgy

Java :  https://t.me/addlist/ZM3J6oFNAnRlNWU6

С#

frontend

Немного здоровой самоиронии про js и фронт-энд. По энергетике напоминает знаменитый Krazam microservices.

Большая подборка вопросов по React и смежных технологиях для подготовки к собеседованию

Здесь аж 120+ вопросов и ответов, что покрывает наверное 99% того, о чём могут спросить

Пользуйтесь)

Вот некоторые из вопросов: 

 • Тестирование в React

 • Разница Zustand и Redux?

 • Что такое Redux-Saga?

 • Командный интерфейс Gatsby CLI

 • Что такое Tailwind CSS?

 • Преимущества и недостатки Next.js над React

 • Основные принципы Redux

 • Каков смысл функции getStaticProps в Next.js?

📎Вопросы-ответы

📎А здесь еще разбор вопросов по React для подготовки к собеседованию

🧑🏻‍💻Большая подборка вопросов с  собеседований: Frontend, Javascript, React, Vue и многое другое.

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

▪Front-end. Вопросы на собеседовании - Репозиторий видеокаста, содержит коллекцию вопросов, которые можно получить на техническом собеседовании на вакансию Junior/Middle Front-end разработчик.

▪ Список тестовых заданий на позицию JS-разработчика

▪Вопросы (с ответами) кандидату на должность frontend разработчика

▪Front End Interview Handbook - В отличие от типичных собеседований, в frontend собеседованиях меньше внимания уделяется алгоритмам и больше вопросов о сложных знаниях и экспертизе в предметной области - HTML, CSS, JavaScript. Этот репозиторий содержит все, что вам нужно знать для прохождения собеседований  frontend собеседованиями.

▪ Полное собеседование React разработчика 2024

▪Front-end Developer Interview Questions cписок полезных вопросов с собесов

▪8 продвинутых вопросов для собеседования по JavaScript

▪Interview-questions наиболее часто задаваемые вопросы Frontend-разработчику

▪Для подготовки к собеседованию: 10 задач по промисам JavaScript

Шаблон декомпозиции Model-View-ViewModel

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

// View
<li class="User_card" model="User_card_model">
	<img src={ image } />
	<p>{ message }</p>
</li>

// ViewModel
class User_card_model {
	user = User.current
	get image() {
		return this.user.avatar
	}
	get message() {
		return this.user.nickname
	}
}

// Model
class User {
	avatar: string
	nickname: string
	static current = new User
}

✅ Отображение может использовать произвольные вьюмодели.
✅ Легко добавлять новые отображения, не меняя ни модели, ни вьюмодели.
✅ Изменение интерфейса модели или отображения требует изменения только лишь вьюмодели.
✅ Одну и ту же вьюмодель можно шарить между несколькими отображениями.
❌ Для отображения разных моделей необходимо дублировать код отображения и вьюмодели.
❌ Трёх слоёв слишком мало на больших масштабах.

Шаблон декомпозиции View-Model

Код работы с моделями пишется прямо в отображении.

// View
function Task_list() {
	return <ul>{
		Task.list.map( task =>
			<li><Task_row {task} /></li>
		)
	}</ul>
}

// Model
class Task {
	static list = [] as Task[]
}

✅ Отображение может использовать произвольные модели.
✅ Легко добавлять новые отображения, не меняя модели.
❌ Для отображения разных моделей необходимо дублировать код отображения.
❌ Изменение интерфейса модели требует обновления всех использующих её отображений.
❌ Двух слоёв слишком мало на больших масштабах.

Шаблон декомпозиции Model-View

Модель знает как себя по разному представлять.

class User { // Model
	
	_id: bigint
	_nickname: string
	
	toString() { // View
		return 'user=' + this._id
	}
	
	toJSON() { // View
		return {
			id: String( this._id ),
			name: this._nickname,
		}
	}
	
}

✅ Удобно из модели получать любые отображения.
❌ Добавление нового отображения требует изменения модели.
❌ Отображение полностью определяется одной основной моделью.
❌ Загрузка модели вытягивает по зависимостям и все её отображения.
❌ Двух слоёв слишком мало на больших масштабах.

Команда Honeypot выпустила документальный фильм об истории Node.js. В часовом видео подробно рассказали о том, как создавали популярную среду выполнения кода на JavaScript. Фильм продолжает серию, в которой уже есть следующие документальные картины: 

• Ruby on Rails;

• React;

• Prometheus;

• Vue.js;

• GraphQL;

• Ember.js;

Elixir.

🖥 Несколько супер-полезных однострочников на JS

Разберем несоклько прмиеров с кодом с нашего канала JS.

⏩Проверить, является ли путь относительным

const isRelative = (path) => !/^([a-z]+:)?[\\/]/i.test(path);

isRelative('/foo/bar/baz'); // false
isRelative('C:\\foo\\bar\\baz'); // false
isRelative('foo/bar/baz.txt'); // true
isRelative('foo.md'); // true

⏩Проверить, является ли строка шестнадцатеричным цветом

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839

⏩Подсчитать количество разных дней между двумя датами

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839

⏩Скопировать в буфер обмена

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

Целая папка с каналами с прмиерами с кодом для fonternd разработчиков.

Одна из самых серьезных проблем в разработке программных средств — их тучность, или раздутость. Программы просто становятся слишком большими. Это может быть связано с неразумным выбором функций, но чаще всего становится следствием плохой архитектуры. Популярное средство повторного использования кода — наследование, но его работа оставляет желать лучшего, поэтому вместо него зачастую применяются копирование и вставка кода. Не следует сбрасывать со счетов и чрезмерную зависимость от библиотек, платформ и пакетов, тесно связанных со многими другими библиотеками, платформами и пакетами. Раздутость может быть побочным эффектом приемов гибкой разработки. Чтобы справиться с ней, увеличивают численность команды разработчиков, но это порождает еще большую раздутость.
…
Лучший способ справиться с раздуванием программ — не допускать его. Приоритетом при разработке и реализации программы нужно сделать ее «худобу». Следует избегать внедрения в практику раздутых пакетов и инструментов, способствующих раздуванию. Обходитесь без классов. Нанимайте небольшие квалифицированные команды разработчиков. И активно практикуйте удаление кода. Создайте резерв из нескольких циклов разработки с целью удаления ненужного кода и избавления от проблемных пакетов. Радуйтесь, когда количество строк кода в проекте уменьшается. Придерживайтесь принципа наименьшей раздутости.

Дуглас Крокфорд, программист, автор формата JSON и книги "How JavaScript Works"

⚛️ React 19 — useOptimistic

useOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы надеемся, что запрос не свалится с ошибкой и после его выполнения состояние будет выглядеть именно так.

❓Как используется

• В useOptimistic передаётся реальное состояние и функцию-reducer

• Компонент использует “оптимистичное” состояние для рендера

• Перед выполнением запроса обновляется “оптимистичное” состояние

• Когда запрос завершился, нужно обновить реальное состояние

• Как только реальное состояние обновилось, оптимистичное состояние обновится автоматически, так как оно передано в useOptimistic первым параметром.

• Если запрос упал с ошибкой, нужно откатить изменения в оптимистичном состоянии.

ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного setState, путём экспериментов, вот что удалось найти:

• useOptimistic работает с формами. Работать с обычной кнопкой в SPA мне не удалось, обновление происходило только после завершения запроса

• useOptimistic работает только внутри асинхронного обработчика, что логично. Если убрать async/await, обновление произойдёт только после завершения запроса

• Параметр в useState используется только для инициализации, и игнорируется в последующих рендерах. useOptimistic будет сихронизироваться со значением со значением переданным первым параметром.

В любом случае, пока useOptimistic выглядит каким-то низкоуровневым API. Надеюсь скоро появится больше Best Practices.

https://t.me/cherkashindev/184

⚛️ React 19 — use(Promise)

use — новый хук, который позволяет считывать данные из промиса и при этом интегрирован с Suspense и ErrorBoundary.

Основные моменты:

• На этот хук не распространяются правила хуков — его можно использовать внутри циклов и условных операторов.

• Если мы используем хук use(Promise), то где-то в родительском компоненте мы должны положить сам промис (не данные как мы делали раньше) в стейт (useState). Это позволяет избавиться от useEffect’а, который был нужен, чтобы запросить данные при первом рендере.

• Хук интегрирован с Suspense, поэтому пока промис не разрезолвится — будет показан fallback объявленный в ближайшем Suspense.

• Если промис зареджектился, то будет показан fallback объявленный в ближайшем ErrorBoundary.

Материалы

• Песочница тут

• Официальная документация тут

https://t.me/cherkashindev/182

Состоялся релиз системы для создания отказоустойчивых рабочих процессов Restate 0.8. Код проекта опубликован на GitHub под лицензией Put Restate under Business Source License от Restate Software.

Согласно пояснению разработчиков проекта, Restate отлично подходит для создания:

• рабочих процессов типа Lambda как код (Lambda Workflows as Code);

• транзакционных обработчиков RPC;

• обработки событий с помощью Kafka.

В версии Restate 0.8 разработчики уделили большое внимание доработке API, учтя отзывы пользователей, чтобы уменьшить трудности при создании сервисов Restate. Также там добавлены комбинаторы промисов (Promise combinators), которые позволяют детерминированно комбинировать промисы. Например, если вы хотите дождаться вызова службы A или вызова службы B, то Restate позаботится о записи того, какой из промисов был выполнен первым, и в конечном итоге воспроизведёт этот выбор, когда это необходимо. В новой версии проекта доступны все комбинаторы стандартной библиотеки JavaScript.

Весна, TypeScript, A?.Frontend Community #6 🌼

21 марта состоится уже 6-я встреча сообщества A?.Frontend, на которой мы подробно поговорим о TypeScript, сравним его с JS, определим плюсы и минусы использования. Кратко о программе.

🌿 TypeScript: Введение в мир надежного программирования

Александр Чернов, Frontend-разработчик в Альфа-Банке, расскажет, как при помощи TypeScript сделать код надёжнее. 

🌿 Переход на TypeScript: плавные перемены и непредвиденные сложности

Рустам Султанбеков, Middle Frontend-разработчик в Авито, поделится опытом перевода существующего приложения на TypeScript и поможет понять, стоит ли это делать. 

🌿 Генерируй – типизируй

Александр Серов, Senior Frontend-разработчик в UULA, объяснит, как пользоваться продвинутыми возможностями TypeScript. 

🌿 Generics – Что? Где? Когда?

Тёма Сенюков, старший разработчик интерфейсов в Яндексе, расскажет, как пользоваться Generics, чтобы избежать дублирования кода и ошибок. 

Митап пройдёт 21 марта (четверг) в 18:30 онлайн. Регистрируйтесь на митап по ссылке. Также ссылку на трансляцию мы опубликуем в нашей группе в Телеграмм, присоединяйтесь.

Состоялся релиз TypeScript 5.4. В новой версии языка программирования, построенного на основе JavaScript и позволяющего объявлять и описывать типы, в Microsoft поработали над производительностью языка, добавили новые возможности автодополнения кода для редакторов и упростили способы переподключения библиотек. Типы также используются в инструментах редактора TypeScript, таких как автодополнение, навигация по коду и рефакторинг, которые доступны в Visual Studio и VS Code. Проект доступен через NuGet или npm (npm install -D typescript).

В TypeScript 5.4 появился новый тип утилиты NoInfer, добавлена поддержка вызовов require() в пакете --moduleResolution и --module save, быстрое исправление при добавлении отсутствующих параметров, поддержка автоматического импорта для подпутей, исправлены ранее обнаруженные ошибки.

С выходом TypeScript 5.4 Microsoft продолжает работу над TypeScript 5.5. Согласно дорожной карте, бета-версия этого проекта должна выйти 16 апреля, релиз-кандидат — 4 июня, а финальный релиз — 18 июня.

Также стало возможно запускать тестовые ночные сборки TypeScript 5.4 Nightlies через npm, которые выпускаются каждый день в полночь (npm install -D typescript@next) для VS Code, Visual Studio, Sublime Text и IntelliJ.