JavaScript *

Попробуем собрать свой идеальный boilerplate для full-stack разработки в 2024 году. В этой статье мы будем постепенно собирать свой шаблон для быстрого запуска стартапов.

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

Моя профессия далека от IT технологий. Я работаю на производстве кажется всю жизнь довольно давно. Тематика - производство и ремонт металлообрабатывающих станков. Производим станки как новые, так и ремонтируем. Стараемся все делать локализировано (импортозамещение ж)- все железки точим, шлифуем, собираем и т.д

Всем привет! Меня зовут Кирилл и я работаю фронтенд-разработчиком. Я расскажу о том, как мы перевели несколько тысяч файлов, написанных на JavaScript, с легаси кода, который использовал goog.module, на новые ES6-модули с помощью построения и преобразования абстрактного синтаксического дерева.

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

Привет всем! Я Кирилл Мыльников, frontend разработчик компании Usetech. Сегодня хочу поделиться информацией о новых методах, которые скоро появятся в коллекции Set в JavaScript.

Set был добавлен в стандарте ES2015, но всегда казался немного ограниченным. Работать с ним можно было только через добавление, удаление и проверку наличия элементов. Однако, при работе с несколькими коллекциями или сравнении их, приходилось писать дополнительные функции. Но теперь нам готовят новые методы, которые значительно упростят работу с Set и позволят избежать необходимости придумывать свои функции.

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

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

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

ng-container в Ангулар - это структурная директива в Angular, которая позволяет создавать группы элементов без добавления дополнительного узла в DOM. Это полезно, когда нужно применить директиву или использовать условные конструкции или циклы *ngFor для группы элементов, но при этом не добавлять лишних тегов в разметку.

ng-container не является компонентом и не создает своего собственного экземпляра, поэтому к нему не получится доступ через ViewChild или ContentChild. Он просто действует как контейнер для элементов, которые вы хотите группировать. Поэтому вместо того чтобы использовать <div> который будет рендериться в дереве компонента при сборке и занимать лишнее место лучше использовать ng-container - собственно это и есть его суть!

Привет! Меня зовут Света, я фронтенд-разработчик отдела спецпроектов в KTS.

Наш отдел разрабатывает и запускает около 100 проектов в год. При такой загрузке мы постоянно ищем новые способы ускорить и автоматизировать работу.

У нас много библиотек: с общими утилитами и хуками, стилями, классами базовых сторов, с утилитами для ВК- и ОК-приложений. Во всех этих библиотеках нужно постоянно дополнять и заменять какие-то элементы, а после этого тестировать библиотеки на работоспособность.

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

Задача на реализацию Throttling часто дается на интервью по front end разработке.

Давайте реализуем функцию throttle, которая принимает функцию callback и время ожидания. Вызов throttle() должен возвращать новую функцию, которая будет вызывать внутри себя callback функцию.

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

Исходные данные: мы с командой делаем банковское приложение. Веб-приложение. Не все поверят, но сегодня реально реализовать на вебе такой пользовательский опыт, от которого люди не будут скрипеть зубами и умолять вернуть им натив. Расскажу, какие Web API мы используем, раскрою тонкости и покажу примеры кода.

Избавьтесь от хаоса модальных окон с useModalControl (React)

Модальные окна - важная часть UI современных веб-приложений. Управление ими в React может вызвать трудности, в частности, когда нужно избежать одновременного появления нескольких окон. Для этого и существует хук useModalControl, который облегчает эту задачу.

Недавно мне посчастливилось развернуть Next.js на сервере с помощью PM2. Этот способ я не нашел в документации фреймворка, хотя считаю его довольно удобным, при этом гайдов по теме оказалось очень мало. Рассказываю, как всё сделать, и привожу рабочие примеры.

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

Прежде чем писать код, хотелось бы отметить, что моё решение не претендует на "чистое" и единственно-верное, поэтому если есть более гармоничное и красивое решение - используйте его (буду только рад если поделитесь им).

Если кому интересно, задача была реализована на Options API, фреймворка Vue, но сам код написан на чистом JS. Это может быть полезно и тем, кто пишет на React и т.д.

Дисклеймер: код испольуемый в данной статье предназначен исключительно для демонстрационных целей.

Исходный код можно найти здесь

Предусловие:

Angular, один из самых популярных фреймворков для разработки одностраничных приложений (SPA), постоянно развивается, добавляя новые возможности и улучшая существующие. Одной из таких новых возможностей стали Standalone компоненты, представленные в Angular 14.

Всем привет! Сегодня мы рассмотрим один из вариантов интеграции svg иконок в наш фронтенд проект используя веб-компоненты. Основная идея компонента заключается в том, чтобы лениво подгружать в SVG спрайт иконки и переиспользовать уже загруженные иконки при необходимости. Сами иконки будем вставлять в разметке в виде <svg-icon name="arrow-angle-down"> нам понадобится всего сотня строк кода! Кому интересна реализация, прошу под кат!

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

В этой части я хочу рассказать как проектировал backend & frontend приложения.

Напомню что мы разрабатываем приложения для мерчанта, которое интегрируется в административную панель через iframe. Наше приложение должно иметь доступ к товарам, для того чтобы мерчант мог настроить маркетинговые кампании. Также приложение должно автоматически совершать публикации в Instagram.

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

Прорабатывается ТЗ и задача отдаётся разработчикам. Затем новая версия тестируется и уходит конечным пользователям. На этом жизненный цикл идеи завершён. Теперь остаётся дождаться массива свежей аналитики и отпраздновать…

Однако эта идея изначально была обречена. Она была поддержана лишь схожими с её автором людьми. Однако эти люди не самая подходящая ЦА, а возможно и вовсе её редкие исключения. И есть только один гарантированный способ проверить гипотезу - проверить её именно на аудитории бизнеса. Но, не на всей. Этот способ называется А/Б тестированием.

И именно ему будет посвящена данная статья. От идеи до конкретной реализации тестирования на next.js (которую можно повторить и на других технологиях).

WordPress Interactivity - это относительно новый API, который позволяет создавать декларативный фронтенд в WordPress нативно. Декларативный? Да, да, он использует тот же принцип, что React и Vue. Только тут под капотом Preact и собственные директивы. И конечно куда же без SSR, который здесь идет из коробки. Звучит интересно? Давайте разбираться вместе.

Меня зовут Алексей, сегодня мы с вами поговорим, как можно ускорить вычисления машинного обучения веб приложения с помощью WASM, WebGL или WebGPU.

Когда фронтенд‑разработчик слышит о машинном обучении в браузере, первое, что приходит ему на ум, это вопрос: «Как это может быть применено? Мы же работаем в браузере на JS, который, как известно, медленный (по сравнению с компилируемыми языками)».