Японский фронтенд


Channel's geo and language: not specified, not specified
Category: not specified


Учу фронтенд и японский язык

Related channels

Channel's geo and language
not specified, not specified
Category
not specified
Statistics
Posts filter


С радостью хочу сообщить, что все (надеюсь на это) страницы в документации Nuxt'а переведены! 💪 💚
Нам остался блог разработчиков, который мы постепенно переводим)

Делитесь с ребятами данной ссылкой, которые продолжают или только начинают изучать фреймворк!

P.S: напомню, что у нас также есть русская документация самого Vue.js, на базе которого построен Nuxt.


👀👀👀


https://devtools-next.vuejs.org/
Ребята заанонсили бета-версию своих крутых Vue-девтулз!
Можно поставить как плагином Vite, отдельным приложением или как расширением в Chrome. Есть интеграция с Pinia, Vue Router, а также таймлайн событий!
Внимание! Работает только с Vue 3 (спасибо, еще одна причина переходить на "тройку")!


Ребята! Вышел State of JavaScript за 2023 год!
Есть очень много интересных моментов)
Разберу и срезюмирую чутка позже, а пока прошу к чтиву


https://github.com/nuxt/nuxt/releases/tag/v3.12.0
Вышел Nuxt 3.12! Из самого интересного:
- новый флаг для совместимости с 4 версией (можно пробовать "обновлять" уже сейчас)
- новый компонент и композабл NuxtRouteAnnouncer
- решение бага с ненужной перезагрузкой страниц
- экспериментальный multi-app!
и много-много улучшений в типах и перформансе!


Пока команда Nuxt готовится к релизу 4-ой мажорной версии - можно почитать на русском, какие планы у разработчиков есть на 2024 год! 💪


Вы наверняка встречались с огромными вложенными (и страшными, на первый взгляд) структурами при логгировании ref и computed во Vue. Как, например, на первом скриншоте.

Да, мы можем раскрыть, зайти в value или _value и посмотреть наше значение. Но так неудобно тыкать, ведь такая структура также сохраняется в debugger-режиме.

Но есть возможность это исправить! Активируйте чекбокс Custom Formatters в настройках консоли (шестерня справа сверху в Chrome). Теперь будет выводиться РЕАЛЬНО то, что вы логгируете ;)




Сажусь контрибьютить в следующую документацию - документацию по Nuxt!
Нам выдали лицензию, у человека получилось задеплоить приложение! Интересные моменты по Nuxt буду попутно освещать ;)
https://github.com/translation-gang/nuxt


https://react-to-nuxt.com/
Дэниел Ро заанонсил "Nuxt для React-разработчиков"! Очень интересно посмотреть, что из этого выйдет. Планируется делать примерно одно видео в неделю, где будут еще и материалы для изучения 🤓


https://www.solidjs.com/blog/solid-start-the-shape-frameworks-to-come
В релиз вышел мета-фреймворк над Solid.js - SolidStart.
Все, что я могу сказать про Solid - это то, что это действительно "хороший" реакт.
У него есть понятная реактивность, удобство хуков, поддерживаемый почти всеми средами разработки JSX, есть Context, Portal (Teleport на языке Vue) - в общем все удобства!
Хорошо, что есть конкуренция с React, который, честно говоря, уже начинает превращаться в JQuery...


https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4
Примерная дата выхода Nuxt 4 - 14 июня 2024 года.
Опыт перехода на эту мажорную версию не будет таким, мягко говоря, "плохим", как это было при переходе с Nuxt 2 на Nuxt 3.
Поэтому если у вас проект на "двойке", апаться на "тройку" сейчас верное решение.
Кто хочет попробовать в своих пет-проектах - переходите по ссылке!


Пока занимался актуализацией перевода документации Vue.js, заметил вот такую интересную пасхалку!
Хорошо, что такие вещи пропускают - это и смешно, и интересно; еще одна мотивация читать исходники ;)
UPD: ребята в комментариях скидывают и другие сайты, смотрим, сколько еще таких есть!


https://github.com/vuejs/core-vapor/issues/198
Интересная дискуссия развернулась в issue в репозитории vapor-версии ядра Vue.js.
Мое мнение: такое "сокрытие" логики при добавлении атрибута слишком сильно УВЕЛИЧИВАЕТ ментальную нагрузку для изучающих фреймворк. Vue и так славится своей "кривой обучения" благодаря хорошему соотношению декларативности / функциональности, не хочется ее портить...
Правда сейчас насчет простоты использования фреймворка я бы уже начал сомневаться - у нас есть Options API, Composition API с setup() хуком, script setup, в ту же кучу добавляем lang="ts"...

Некоторые фичи недоступны в script setup (Vue.prototype.$something не получится удобно перенести на provide / inject, например); а некоторые наоборот доступны по сравнению с Options API (defineExpose).

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


В изучении японского встретился с новым "препятствием" - te-форма. Грамматическая база, как this или "замыкания" при изучении JS.
Все, что объяснил мне мой сэнсэй, я понял; но всегда интересно узнать, как понимают и объясняют другие.
Наткнулся на видео японца по этой теме, который разбирает досконально учебник, по которому я занимаюсь!
Все - начиная с первого урока - с понятными и четкими объяснениями. Даже есть тонкости языка! Если кто-то хочет для себя познакомиться немного с японским - очень советую!
Вся информация на английском языке, как раз можно подтянуть listening skills ;)


#копаем_js
Еще один пост вдогонку к скорости развития веба. На данный момент у нас есть очень много библиотек для работы с датой и временем:
day.js, moment.js, date-fns - все предоставляют "удобное" API для работы с датой относительно нативного объекта Date.
Но благо время идет, веб развивается, и люди внедряют универсальное API для работы со временем прямо "из коробки". Упоминание про Temporal API у меня было выше, советую посмотреть.
Но пока мы ждем его, советую обратить внимание на глобальный объект Intl (от слова Internationalization), который в себе имеет два очень интересных конструктора:
DateTimeFormat и NumberFormat. Просто оставлю примеры кода, при помощи которых можно понять, насколько эти API мощные.
И советую переходить с вышеупомянутых библиотек, освободите итоговый бандл как минимум ;)
const PRICE = 123456.789;

// Форматируем в евро
console.log(
new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
PRICE,
),
);
// 123.456,79 €

// Японская йена не использует числа после запятой
console.log(
new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(
PRICE,
),
);
// ¥123,457

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
// Результат ниже учитывает UTC-таймзону - у вас результат может быть другим

// Можно указать конкретную локаль для форматирования(locale)
console.log(new Intl.DateTimeFormat('en-US').format(date));
// Ожидаемый результат: "12/20/2020"


#копаем_js
Захотелось немного поговорить о теме ссылочности данных.
Рассмотрим два примера кода:
const arr = [{name: window.name}, {name: window.name}];
const arrCopy = arr.slice();

const arr = [{name: window.name}, {name: window.name}];
const arrCopy = arr.map(x => ({...x}));

В чем разница между этими подходами? И там, и там вроде как делается копия массива.
Но посмотрим вот на что, первый случай:
console.log(arrCopy[0] === arr[0]); // true

А во втором:
console.log(arrCopy[0] === arr[0]); // false

В чем разница? Ответ: в первом случае мы делаем КОПИЮ массива, не создавай новые объекты в памяти (старые все еще есть).
Во втором же мы используем spread-оператор вместе фигурными кавычками - а значит каждый раз создаем новый объект.
Используйте копирование массивов (и объектов тоже) с умом! И не забывайте про ссылочность данных!
Ваш фреймворк, на котором вы работаете, это тоже учитывает при работе, так что будьте осторожны!


#копаем_js
JS сейчас активно развивается, все больше людей его изучают. Хочется рассказывать новичкам интересные и корректные факты о языке.
Но в большинстве случаев люди изучают язык с таким подходом, что "язык криво сделан", пропуская важные моменты!
Сегодня разберем непонятки с таким типом данных, как null.

Для начала вспомним, что нам вернет typeof null. Да, все верно - строка 'object'.
Но typeof undefined вернет 'undefined'. Почему, в чем разница? Запомнить случай с null как исключение будет в корне неверно :) И вот почему:
В JS наследование реализовано с помощью прототипов - объектов, которые хранят в себе методы, свойства, которыми делятся со своими "потомками".
Так, например, методы .map, .filter, .concat - лежат в Array.prototype.

Давайте посмотрим, что является прототипом этого прототипа, т.е. родителем Array.prototype:
Object.getPrototypeOf(Array.prototype); // Object.prototype

Чтобы убедиться в правильности ответа, сравним данное выражение непосредственно с Object.prototype:
Object.getPrototypeOf(Array.prototype) === Object.prototype; // true

И наконец попробуем взять прототип от этого прототипа:
Object.getPrototypeOf(Object.prototype); // null

И на вершине цепочки прототипов лежит null!
Оставлю пару ссылок, чтобы вы могли обмозговать эту информацию 👻
Значение null
Унарный оператор typeof


https://v8.dev/blog/sandbox
Chrome добавит песочнику для V8; почти все уязвимости, которые устраняет команда "хрома", появляются из-за heap (кучи).
Ждем и наблюдаем!


Нашел интересную игру в Steam (впервые говорю про игры, ничего себе) для пополнения и закрепления японской лексики.
Язык фотографий!
Концепт игры простой - вы фотографируете объект, и вам показывают то, как он пишется. Есть озвучка слов (похоже на озвучку реальных японцев), что тоже очень важно при изучении)
Присутствует элемент "карточек" для изучения - вам дают слово, а вам нужно его найти и сфотографировать! Это обратный процесс первому, он тоже важен для закрепления знаний!

20 last posts shown.

69

subscribers
Channel statistics