☕️ '${Вронтенд}'

#ПыльнаяПолка Давно хочу освоить работу с 3d объектами в JS, пару раз ковырял Three.js, выставлял камеру, свет, но редко заходил дальше. Недавно скинули ссылку на крутейший курс по этому делу. Только тссс : magnet:?xt=urn:btih:b38e56b083db779380ae010c878fcab8aeacc01f&dn=%5BBruno%20Simong%20%5D%20Three.js%20Journey%20-%20The%20ultimate%20Three.js%20course%20%282022%29&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce Это мы смотрим!

#ПыльнаяПолка Пройти бесплатный курс по ИИ от Microsoft и LinkedIn и получить сертификат можно по этой ссылке. По наводке от @ab1aykhann

А вот и подъехала платформа для решения задачек от Яндекса, с возможностью получения призов, сезонами и прочей геймификацией: Code Run

Лицо вронтендеров представили? 🎹

А вот и подъехал серьезный конкурент Electron - Tauri. Вес приложения на Tauri может быть менее 600KB, а сам Tauri написан на Rust.

Ночной бред Хотел вам показать интересный пример, что иногда

JSON.parse(JSON.stringify(obj))

работает быстрее, чем

{...obj}

. Собираем простой тест с большим циклом, загоняем полученные клоны в параметры функции и готово:

test(JSON.parse(JSON.stringify(objToCopy)))

значительно быстрее, чем

test2({...objToCopy})

Почему? кажется, что ответ на поверхности: запускаем Ноду с --allow-natives-syntax и проверяем

const a = {a: 1};
const b = {...a};
%HaveSameMap(a, b); // false

const c = JSON.parse(JSON.stringify(a));
%HaveSameMap(a, c); // true

Дело раскрыто, функция стала мегаморфной, JIT вырубился, можно писать пост. Но! Попробуем добавить вариант с

test3(structuredClone(objToCopy))

test with JSON.parse: 268 ms.
test with structuredClone: 308 ms.
test with spread: 2802 ms.

Проверяем:

const d = structuredClone(a);
%HaveSameMap(a, d); // false

Таааак Что же получается. И spread и structuredClone ведут к мегаморфности. Но при этом structuredClone не приводит к деоптимизациям. Дальше докидываю

Object.assign({}, objToCopy)

и не смотря на мегаморфность

test with Object.assign: 238 ms.

Психую. Запускаю с --trace_deopt и вижу, что спред постоянно вышибает

(kind: deopt-eager, reason: wrong map)

Но почему Object.assign и structuredClone не приводят к деоптимизации? Я не знаю 🤡 и могу только предположить, что срабатывает какая-то дополнительная эвристика, и несмотря на то, что мапы разные, в деоптимизацию JIT здесь не уходит. А спред под такую эвристику не попадает (или, точнее, попадает через раз, так как чем больше попыток вызова, тем чаще случается деоптимизация).

Интересности от Мелихова 🤔

5 Вещей, которые будут важны во Frontend разработке в 2023 году по мнению ChatGPT 1.Progressive Web Apps (PWA). 2. JavaScript Frameworks: React, Vue и Angular. 3. CSS-in-JS. 4. Design Systems (наборы готовых компонентов и правил, которые помогают создавать согласованные и сочетаемые веб-сайты и приложения). 5.Оптимизация производительности (Lazy Loading, Code Splitting и оптимизация работы с API).

Я являюсь большим фанатом и уже долгое время использую ide от jetbrains и единственное что мне не нравилось во всех их средах - UI. UI был морально устаревший, особенно если сравнивать с VSCode который так или иначе порой приходится использовать в силу того, что он легче и когда-нужно исправить что то очень быстро, я использовал его. Но сегодня после обновления я заметил секцию New Ui в настройках WebStorm и знаете что? Свершилось! Наконец-то мы получили не только удобную и функциональную ide, но и выглядит теперь она весьма современно!

Перед тем как писать велосипед.. А перед тем как писать велосипед я всегда захожу на codepen, потому, что там практически всегда по ключевым словам можно найти готовые решения популярных (и не только) проблем. Совсем недавно я решил раздуплить тему tree js и поковырять полноценные 3D модели с известных редакторов. Так вышло что документация у этой библиотеки не очень приятная, а вот обилие примеров на codepen меня приятно порадовало, при том что работа с 3D моделями это далеко не то чем занимается обычный вронтендер. Если вдруг у вас трудности с реализацией бургер-меню или какими-нибудь анимациями, то просто используем поиск по ключевым словам и скорее всего, найдем готовый и рабочий пример. Вот просто пример того, как можно работать 3D графикой прямо в браузере - ТЫК Рекомендую и Вам вести коллекцию полезных ссылку, ведь самое дорогое что у нас есть - время.

Помните легендарную серию книг "You don't know JS"? Вот пару книжечек из 2ого издания, как грицца strongly recommended {Вы пока еще не знаете JS} Область видимости и замыкания. 2-е международное издание [2022] Кайл Симпсон — {Вы пока еще не знаете JS} Познакомьтесь, JavaScript. 2-е международное издание [2022] Кайл Симпсон

Что такое isomorphic (изоморфический) или universal (универсальный) код на JS? К продолжению вчерашнего поста об SSR ;) Java Script - это уникальный язык, на котором мы можем писать как фронт так и бэк, реализуя рабочие проекты за очень короткое время. Многих встроенных объектов нету в классическом браузерном Java script, а чего-то не хватает в node и когда мы пишем условный SSR аппликейшн, необходимо это учитывать.

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

А еще если углубиться, то может оказаться что множество библиотек тоже изоморфичны, потому как тот же underscore одинакого хорош как на сервере, так и на клиенте ;) Это связанно еще с тем, что на пример на сервере нету объекта window или каких-то вещей вроде localStorage, но есть свои решения.

Что такое гидрация store в vuex/pinia и тому подобных? Немного постов про SSR для новичков ;) Иногда нам нужно делать сложные приложения с SSR (sever side rendering) в которых выяснится наличие одной проблемы: Стора которая у нас есть и регулируется на серверном рендеренге != стора на стороне клиента. При префетчинге (предзагрузке на стороне сервера) данных, мы можем понять что этих данных попросту нету в сторе клиента. Решение уже давно продумано и реализовано за нас, оно называется Hydration. Есть разные реализации гидрации сторы, но самое популярное - инъекция данных сторы в секцию шаблона нашего index.html с последующим сбором этих данных на клиенте.

#vue #vuejs #vueвыйразработчик Недавно столкнулся с тем, что появилась необходимость понимать когда браузер загрузил картинку в стандартный img тег, удивительно, но не сталкивался за столько лет работы с подобным. Оказывается в vue это можно сделать очень просто:

<img src="uWu/random.jpg" @load="onImgLoad">

Где onImgLoad будет boolean за которым уже удобно следить.