Vue

Как же я заблуждался. Найти топ-1000 слов или 100 самых популярных глаголов — легко. Но это будет просто «слово–перевод», как разговорник для туриста, мечтающего спросить в баре: «Где туалет, и почему ваше пиво такое отвратительное?» Для серьёзного приложения нужны: транскрипция, синонимы, примеры употребления, часть речи, схожие слова, ударение, уровень сложности.

Через три дня поисков я нашёл файлик из Cambridge English Dictionary на 140 тысяч слов. Моя радость длилась ровно до момента, когда я открыл его и увидел там устаревшие термины, названия кельтских деревень, леммы (разные формы одного слова), избыточные формы и словоформы вроде «running». Закинул всё в Excel. Программа зависла, как студент на утренней паре. Просматривать 140 тысяч строк вручную — задача для садомазохиста. Я закрыл файл, включил фильм на английском (с субтитрами, конечно) и забыл о проекте. Желание творить вернулось через две недели — вместе с осознанием, что стриминговая платформа за меня код не напишет.

Далее было написано десяток скриптов для чистки базы. Три недели они удаляли лишнее, а я чувствовал себя Шариковым, который «взял всё да и разделил». В итоге осталось 30 тысяч слов. Пришло время добывать данные: транскрипции, синонимы, примеры… Нейросети тогда были потупее, но мои дедушкины скрипты таки выжали из них ответ в формате CSV. Дорого? Ещё бы! Это же не разовая подписка на OnlyFans, а десятки тысяч постоянных запросов.

Добавил частоту употребления слов из Google, плюс JJB (Adjective modifying another adjective) и JJA (General adjective) для более полной картины. Через два месяца нудятины у меня был словарь на 20 тысяч строк с 17 колонками данных. Доверять нейросетям? Как соседу с отвёрткой в своей квартире: «Верь, но проверяй».

Было решено нанять фрилансеров-переводчиков. Они проверяли данные так тщательно, будто это их диплом, а не мой квест по самореализации. В итоге словарь был готов. А приложение? О нём пока пахло, как от моих перспектив стать лучшим программистом на районе.

Давно для себя понял: чтобы запомнить слово, нужны ассоциации. Решено было добавить изображения к каждому слову. Звучит просто, но когда нужно 20 тысяч картинок без нарушения авторских прав, начинаешь ценить тех, кто рисует котиков для учебников.

Разбил задачу на этапы. Сначала парсил изображения по тегам с разрешённых ресурсов. Получил гору файлов, где половина — мемы про «успех», а треть — фото людей, которые явно не давали согласия на участие в моём квесте. Фильтровать пришлось вручную. Нанял 15 фрилансеров, которые судили картинки строже, чем искусствоведы в Лувре. Чтобы они не сошли с ума от объёма, сделал Telegram-бота с кнопками «Подходит» и «Не подходит». Логика простая: если три человека одобряют — картинка добавляется в базу.

Этот этап длился полтора месяца. Общение часто было примерно таким: «Это фото луны для слова "lunatic"?» или «Давайте вы вначале заплатите, потом я проверю». В итоге, как бы я ни ругал ребят, они сделали дело, и мы собрали базу, где как минимум половина изображений отлично подходят для обучения. По стоимости вышло в 140 тысяч рублей — почти как подержанная Лада, но без колёс.

К тому моменту, как я закончил, мой друг-программист (куда более опытный, чем я), которого я уговорил работать со мной, сообщил, что у него личные проблемы и он не может присоединиться к созданию веб-приложения в Telegram. Руки опустились. Писать код для Telegram-бота — одно, а создавать полноценное приложение — как строить дом, забыв, где брать кирпичи. На месяц я переключился на свой канал с квизами по английскому, который использовал полученную базу слов. Получился он, кстати, неплохо — многим людям сейчас помогает изучать язык, даже дизлайков никто не ставит.

Через три месяца подумал: «Мы живём в эпоху нейросетей! Наверняка ChatGPT знает, как сделать приложение». Начал изучать сам и искать исполнителя. Оказалось, что за «под ключ» команды разработчиков просят от 350 тысяч, что для моей голой жопы было дороговато. Пришлось через фриланс найти DevOps-разработчика, который помог настроить арендованный сервер, простаивавший из-за моей безграмотности. Спасибо этому парню: он открыл для меня кучу нового и объединил бэкенд с фронтендом.

Дальше — дизайн. В Figma мы с художником нарисовали интерфейс, который выглядел как мечта интроверта: минимализм, плавные переходы, никаких кричащих кнопок. Переносить это в код на Vue.js оказалось сложнее, чем объяснять бабушке, что «Скайп — это не файлообменник». Почти каждая кнопка требовала тонны строк кода. Теперь смотрю на другие приложения с уважением, как на пирамиды: снаружи красота, внутри — тонны неизведанного труда.

Примерно 4 месяца заняло создание бета-версии. Она включала всё для игрового обучения:

- Уровень пользователя, звание, опыт, энергия, монеты

- Игровые элементы (строительство дома, NFT-персонажи на TON)

- Статистика обучения, словарь, карточки слов, лидерборд

- Чек-ин, ежедневные задания

Три вида тренировок:

— Случайная (1 рандомное задание);

— Простая (2 лёгких задания);

— Полная (5 заданий).

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

Чтобы не отставать от моды, потратил 5 дней на интеграцию нейросетевых подсказок. Теперь ИИ объясняет, что «procrastination» — это не болезнь, а образ жизни. По отзывам, подсказки полезны.

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

Отдельная тема — ошибки в коде. Это как сериал ужасов, где каждая серия заканчивается на самом страшном моменте. Изменяешь переменную — через два дня кнопка «Статистика» становится порталом в параллельную вселенную.

Сейчас код выглядит так:

- Бэкенд: 7000 строк;

- Фронтенд: 26 000 строк.

Для одного человека с двумя руками и 24 часами в сутки — немало. Спасибо постоянным подписчикам канала, которые месяц чинили со мной косяки. Ненайденные баги ещё есть, но дойдёт очередь и до них.

Я сдавался минимум 5 раз: закрывал редактор, ругался, но снова возвращался, движемый одной целью - создать полезное как для себя, так и для любого изучающего польователя приложение, цель заработать при этом у меня всегда была второстепенной.

Запустил miniapp 9 дней назад. В тот вечер даже прослезился (a я мужик серьёзный) — всё-таки смог закончить этот огромных труд и поставить галочку на этом жизненном этапе.

Итог:

Условно бесплатное приложение без рекламы и навязчивых «Оплати». Если не хватает энергии — можно купить её или NFT-ламу (всего 1000 штук, раритет). Но бесплатной версии хватит новичку и профи. Идеально ли оно? Нет. Разным людям — разный подход. Сейчас собираю фидбек, чтобы улучшить эту первую версию, ведь работа не останавливается на этом.

На этом всё. Если пост зайдёт — расскажу подробнее об этапах кодинга или о создании бота для канала квизов.

Попробовать приложение: https://t.me/CrazyLlamaEnglish_bot

Канал квизов: https://t.me/english_quiz_poll

Основной канал анонсов: https://t.me/CrazyLlamaFarmRU

Деструктуризация – это способ извлечь значения из массивов или свойства из объектов и присвоить их отдельным переменным. Алиасинг (переименование) позволяет дать новые имена этим переменным в процессе деструктуризации:

Зачем это нужно:

• Улучшает читаемость кода.

• Помогает избежать конфликтов имен – если у вас уже есть переменная city, можно использовать hometown.

• Пригодится при работе с API, если он возвращает данные с неподходящими для вашего кода именами.

Каррирование

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

Та же функция, но с использованием каррирования:

Зачем это нужно:

• Обеспечивает переиспользуемость функций.

• Повышает читаемость и модульность кода.

• Позволяет создавать новые функции на лету, используя уже существующие, например:

debounce() и throttle()

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

debounce() работает так:

• Функция вызывается только после того, как прошло определенное время с момента последнего вызова.

• Если функция вызывается снова до истечения этого времени, таймер сбрасывается.

В этом примере функция поиска будет вызвана только через 300 миллисекунд после того, как пользователь перестанет вводить текст. Это позволяет избежать лишних запросов к серверу при каждом нажатии клавиши:

throttle() работает так:

• Функция вызывается не чаще, чем раз в заданный интервал времени.

• Если попытка вызвать функцию происходит до истечения интервала, вызов игнорируется.

В этом примере функция handleScroll будет вызываться не чаще, чем раз в 300 миллисекунд, независимо от того, сколько раз пользователь прокрутил страницу за это время:

Мемоизация

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

• Когда функция вызывается с определенными аргументами, мы сначала проверяем, вычисляли ли мы уже результат для этих аргументов.

• Если да, мы возвращаем сохраненный результат.

• Если нет, мы выполняем вычисление, сохраняем результат и возвращаем его.

Пример мемоизации при вычислении ряда Фибоначчи:

• Без мемоизации вычисление fibonacci(40) заняло бы очень много времени, потому что функция вызывала бы себя рекурсивно миллионы раз, повторяя одни и те же вычисления.

• С мемоизацией каждое число Фибоначчи вычисляется только один раз. При повторном запросе того же числа результат берется из кэша, что значительно ускоряет работу.

Когда использовать мемоизацию:

• Для функций с очень сложными вычислениями.

• Когда функция часто вызывается с одними и теми же аргументами.

• Когда функция  возвращает один и тот же результат для одних и тех же входных данных.

Важно помнить, что мемоизация требует дополнительной памяти для хранения результатов, поэтому нужно учитывать этот компромисс между скоростью и объемом используемой памяти.

Proxy

Proxy позволяет нам обернуть объект и контролировать взаимодействие с ним. Мы можем перехватывать и изменять основные операции – чтение свойств, их запись, вызов функций и т. д. Proxy особенно полезен, когда нужно добавить дополнительное поведение к объектам, не изменяя их напрямую: это может быть полезно для отладки, для реализации реактивных систем (как в Vue.js), для создания умных объектов и многого другого:

Для чего еще можно использовать Proxy:

• Валидация – проверка данных перед их установкой в объект.

• Логирование – отслеживание использования и изменений свойств объекта.

• Создание вычисляемых на лету свойств.

• Безопасность – можно контролировать доступ к свойствам объекта.

Генераторы

Генераторы – особый тип функций в JavaScript:

• Могут приостанавливать свое выполнение и возобновлять его позже.

• Сохраняют свое состояние между вызовами.

• Используют ключевое слово yield для возврата значений.

Пример итерации по свойствам объекта:

Преимущества генераторов:

• Ленивые вычисления – вычисляют значения, когда они действительно нужны.

• Создание бесконечных последовательностей, не занимающих бесконечный объем памяти.

• Упрощение асинхронного кода – можно сделать асинхронный код более похожим на синхронный.

• Создание кастомных итераторов для сложных структур данных.

Эффективное использование консоли

Помимо console.log(), консоль предоставляет несколько более наглядных методов вывода информации.

• Ошибки и предупреждения:

• Вывод табличных данных:

• Группировка логов:

• Измерение времени выполнения:

• Условное логирование:

• Трассировка стека:

Структурированное клонирование

Структурированное клонирование – метод создания полной (глубокой) копии объекта, включающей все вложенные объекты и структуры данных. Функция structuredClone позволяет выполнять такое клонирование просто и эффективно – в  отличие от JSON.parse(JSON.stringify()), structuredClone корректно обрабатывает Date, Map, Set и другие специальные типы JavaScript:

Структурированное клонирование стоит использовать, если:

• Нужно создать полную, независимую копию сложного объекта.

• Данные не должны изменяться (иммутабельность).

• Необходимо избежать побочных эффектов при изменении данных.

Самовызывающиеся функции

Самовызывающиеся функции (IIFE) выполняются автоматически сразу после их создания. Они создают временную область видимости, в которой можно безопасно определять переменные и функции, не беспокоясь о том, что они будут конфликтовать с другими частями кода и загрязнять глобальную область видимости. Эта техника особенно полезна в старых средах JavaScript, где блочная область видимости (let и const) недоступна, или в сценариях, где требуется немедленное выполнение для инициализации:

Теговые шаблоны

Теговые шаблоны позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. Здесь, например, функция sanitize заменяет опасные символы на их безопасные HTML-сущности, предотвращая выполнение нежелательного кода:

Как можно использовать теговые шаблоны:

• Автоматически обрабатывать пользовательский ввод, предотвращая XSS-атаки.

• Форматировать числа, даты и т. д.

• Безопасно формировать SQL-запросы, экранируя ввод.

• Создавать теги для автоматического перевода строк с одного языка на другой.

📐 Единицы измерения высоты и ширины экрана в современном CSS

На протяжении многих лет разработчики использовали vh и vw, чтобы задавать размеры элементов в процентах от высоты и ширины экрана. Например, чтобы заполнить весь экран элементом, его размеры можно задать как 100vh на 100vw. Однако эти единицы могут работать ненадежно в некоторых случаях, например, при изменении видимой области экрана на мобильных устройствах из-за скрытия адресной строки браузера при прокрутке. Сейчас CSS предлагает новые единицы измерения, которые учитывают динамические изменения интерфейса браузера.

Large Viewport Units (lvh, lvw)

Эти единицы задаются относительно максимального размера видимой области, когда интерфейс браузера минимизирован (например, скрыты панели). По сути, они ведут себя аналогично классическим vh и vw, но с учетом возможных изменений интерфейса. Этот элемент будет занимать весь экран независимо от состояния интерфейса браузера:

.full-page-element {
height: 100lvh;
width: 100lvw;
z-index: -1
background: #f51;
}

Small Viewport Units (svh, svw)

Эти единицы рассчитываются относительно минимального размера видимой области, когда интерфейс браузера максимально расширен (например, когда панели видимы). Пример – статичный заголовок, занимающий 10% от минимальной видимой области:

.header {
height: 10svh;
background-color: #642;
}

Dynamic Viewport Units (dvh, dvw)

Эти единицы измеряются с учетом динамических изменений видимой области при взаимодействии пользователя с интерфейсом (например, при прокрутке страницы или появлении виртуальной клавиатуры). Есть нюансы: использование этих единиц иногда приводит к неожиданным изменениям размеров контента и ухудшению производительности. Пример – элемент, который адаптируется к изменениям высоты видимой области:

.adjustable-element {
height: calc(100dvh - 10svh);
}

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:

• Современные JavaScript-фреймворки и библиотеки

• HTML5 и CSS3: новые возможности и трюки

• Оптимизация производительности веб-приложений

• Тестирование и отладка кода

• Лучшие практики UX/UI

• Новые веб-стандарты и браузерные технологии

• Тренды в веб-дизайне и интерфейсах

• Прогрессивные веб-приложения (PWA)

✍️ 50 лучших ресурсов с бесплатными HTML/CSS/JS-шаблонами

• HTMLrev – крупнейшая бесплатная библиотека шаблонов, созданных с использованием всех существующих технологий, включая HTML/CSS/JS, Bootstrap, Tailwind, Bulma, Angular, React, Vue, Next.js, Nuxt, Svelte, Astro, Laravel, Django, Gatsby, Hugo, Jekyll и BCMS.

• HTML5 UP – бесплатная коллекция HTML-шаблонов с уникальным дизайном и высоким качеством кода.

• StyleShout предлагает широкий выбор шаблонов для различных целей, включая SaaS, мобильные приложения, блоги, лендинги, портфолио и агентства.

• One Page Lovе включает шаблоны на Bootstrap, Next.js, Tailwind, Carrd и Framer.

• Cruip предлагает шаблоны на Tailwind, React, Vue, Next.js и Laravel.

• Templatemo – огромная коллекция бесплатных Bootstrap-шаблонов.

• ThemeSelection – библиотека бесплатных и платных шаблонов на Vue, Next.js, Nuxt и Laravel. Специализируется на административных панелях и UI-китах.

• Creative Tim – шаблоны на Bootstrap, Tailwind, Angular, React, Vue, Next.js, Nuxt, Svelte, Laravel, Django и Astro.

• Themesberg предлагает широкий выбор шаблонов для административных панелей, лендингов, дизайн-систем и UI-китов.

• TemplateDeck – небольшая библиотека креативных Bootstrap-шаблонов высокого качества.

• Flout UI – коллекция компонентов Tailwind и готовых шаблонов Next.js.

• Michael Andreuzza – бесплатная подборка шаблонов Astro, созданная опытным и креативным разработчиком.

• Just Good UI – собрание бесплатных и платных шаблонов Astro.

• Startup Landing – подборка бесплатных шаблонов Next.js и Gatsby.

• Web3Templates – красивые шаблоны Tailwind, Astro и Next.js, оптимизированные для конверсий.

• Landify – красивые и современные шаблоны Gatsby.

• Nextjs Templates – широкий выбор шаблонов для разных целей, включая SaaS, стартапы, бизнес, программное обеспечение и блоги.

• LayoutFlow – отличные шаблоны для агентств, портфолио и сайтов услуг.

• Template Foundation – шаблоны, ориентированные на портфолио и личные сайты.

• Templated – продуманные шаблоны на HTML/CSS и Bootstrap.

• Freebiesbug – высококачественные шаблоны, оптимизированные для маркетинга.

• Start Bootstrap – широкий выбор профессиональных шаблонов для стартапов, агентств, портфолио, личных сайтов и блогов.

• MonsterOne – современные шаблоны с несколькими страницами.

• TemplatesJungle – шаблоны для бизнеса, агентств, сервисов, портфолио, электронной коммерции и других целей.

• 3rd Wave Media – коллекция высококачественных шаблонов, ориентированных на ИТ-сферу.

• Tooplate – большая коллекция стильных и современных Bootstrap-шаблонов.

• Pixel Rocket – качественные Bootstrap- и Tailwind-шаблоны.

• HTML Codex – широкий выбор шаблонов для бизнеса, курсов, продуктов, агентств, сервисов, портфолио, резюме и других целей.

• W3Layouts отличается широким выбором шаблонов для бизнеса.

• Bootstrapious – шаблоны с хорошим дизайном и продвинутыми компонентами.

• Untree – стильные шаблоны со сложными элементами.

• Tailwind Toolbox – красивые шаблоны с продуманной структурой.

• Pixelcave – современные шаблоны для сайтов и административных интерфейсов.

• Themefisher – коллекция шаблонов для бизнеса, SaaS, блогов и других целей.

• Tailspark – Tailwind-шаблоны для SaaS-сайтов и лендингов.

• Red Pixel Themes – шаблоны с  хорошим дизайном и многими полезными компонентами.

• Ari Budin – уникальные шаблоны для портфолио, агентств, журналов и дизайн-систем.

• Treact – бесплатная библиотека React-шаблонов.

• DesignToCodes – шаблоны для стартапов, агентств, портфолио и административных панелей.

• UI Lib – библиотека Bootstrap-, Tailwind-, Angular-, React- и Vue-шаблонов.

• AdminMart – профессиональные шаблоны со множеством секций и компонентов.

• WrapPixel – специализируется на административных панелях и UI-китах, предлагает широкий выбор шаблонов с разным дизайном и структурой.

• Tabler – бесплатная библиотека Bootstrap-шаблонов, специализируется на административных панелях.

• KeenThemes – современные шаблоны для админ-панелей со множеством компонентов.

• EaseTemplate – подборка современных Bootstrap-шаблонов.

• BootstrapDash – шаблоны с несколькими страницами и продвинутыми компонентами.

• CodedThemes – профессиональные Bootstrap-, Angular-, React- и Vue-шаблоны с красивым дизайном.

• Salvia Kit предлагает коллекцию Angular-, React-, Vue-, Nuxt- и Svelte-шаблонов. Отличается широким выбором шаблонов для административных панелей.

• JustBoil – Tailwind-, React-, Vue-, Next.js-, Nuxt- и Laravel-шаблоны для сайтов и админ-панелей.

• Iqonic Design – библиотека React- и Vue-шаблонов, предлагает несколько бесплатных пакетов для создания современных интерфейсов.

Автор рассылки: Наталья Кайда

P.S. Если кто-то скажет, что React или Angular лучше, можете смело кидать в них помидорами. Vue - он как Чак Норрис в мире фронтенда, только лучше! 😎

Кто уже юзает Vue? Делитесь впечатлениями в комментах!

Angular: Танк от Google

Angular - это как швейцарские часы: сложный механизм, но работает как часы (простите за каламбур).

Плюсы:

• Мощный, как трактор "Беларусь"

• Сложноват для новичков (но если освоите - цены вам не будет)

• Документация подробная, как инструкция к стиральной машине

• Инструментов больше, чем в гараже у Кулибина

• Популярен в корпорациях (как костюмы и галстуки)

В итоге, что выбрать?

• React - если хотите быть как крутые стартаперы из Кремниевой долины

• Vue.js - если хотите быстро создать что-то красивое и не сломать мозг

• Angular - если вы любите сложные механизмы и работаете в большой компании

А вы, друзья, какой фреймворк предпочитаете? Делитесь в комментариях! И да пребудет с вами сила JavaScript!

P.S. Не забудьте поставить плюсик, если статья была полезной. Ваша поддержка вдохновляет меня на новые посты!