JavaScript *

Здравствуйте, уважаемые читатели Хабра!

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

Привет! Меня зовут Олег Чикелёв, я разработчик сервисов на VK Mini Apps. Эта история началась буднично, как и многие другие: однажды я пришёл к другу с идеей приложения, и мы загорелись быстро сделать его на этой платформе. Расскажу вам о своём опыте разработки и о том, как выглядит жизненный цикл продукта с точки зрения разработчика. Вы узнаете, как мини-приложения тестируются в баг-трекере и как они появляются в каталоге. А в качестве примера буду использовать нашу разработку — VK API/VK Bridge Sandbox.

В этой статье рассказывается о том, как внедрить аутентификацию в ваш SvelteKit проект. Это будет JWT аутентификация с использованием refresh токенов для дополнительной безопасности. Мы будем использовать Supabase в качестве базы данных (PostgreSQL), но основы должны быть теми же.

^{Источник картинки}

Работающий код может иметь изъяны — например, быть недостаточно простым, лаконичным и понятным. Это может быть признаком более глубоких проблем в коде, а избавиться от них можно с помощью рефакторинга. В этой статье разберем наиболее популярные недостатки кода. Материал адаптирован на русский язык вместе с Глебом Михеевым, директором по технологиям Skillbox и спикером профессии «Frontend-разработчик PRO» и преподавателем курса Frontend-разработки в Skillbox Борзуновым Игорем.

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

Привет, друзья!

В данном туториале мы разработаем десктопное приложение с помощью Tauri. Tauri — это фреймворк для создания десктопных приложений, похожий на Electron, но позволяющий использовать Rust вместо Node.js, например, для взаимодействия с файловой системой.

В качестве фреймворка для разработки пользовательского интерфейса я буду использовать React и TypeScript, а для работы с зависимостями для JavaScript — Yarn.

Источником вдохновения для меня послужила эта замечательная статья.

Обратите внимание: я буду разрабатывать приложение под Windows x64, в других операционных системах (и архитектурах) детали реализации будут немного отличаться.

Приложение будет представлять собой своего рода однострочный терминал для записи заметок в файл tasks.txt, находящийся в домашней директории (для Windows — это C:\Users\[User]). Приложение будет запускаться с помощью сочетания клавиш Ctrl + Shift + Q и завершаться при нажатии Esc.

Вот как это будет выглядеть:

Репозиторий с кодом проекта.

Если вам это интересно, прошу под кат.

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

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

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

Писать на С++ игры долго и дорого, но при этом по перфомансу получается хорошо. Но далеко не всё в играх, требовательно к производительности, особенно 2D. Например всякие окошечки не производят тяжелых расчетов внутри. А на больших проектах они могут занимать до 80% всего объема кода. И на С++ есть проблемы на продакшене - если где-то крешится или бажит, приходится перезаливать приложение.

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

Совсем недавно прикрутил JS к своему движку. Кому интересны подробности - добро пожаловать под кат.

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 20–26 июня.

? EcmaScript 2022. 22 июня 2022 года 123 Генеральная ассамблея Ecma утвердила спецификацию языка ECMAScript 2022 — теперь он официально является стандартом. Внутри все новинки.

? Как создавать иконки сайтов в 2022 году — всё о favicon. Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы.

? Как будет выглядеть веб только с Chromium?. Chromium – это движок, Chrome – браузер. На Chromium построено большинство браузеров.

Привет, друзья!

Представляю вашему вниманию адаптированный и дополненный перевод этой замечательной статьи.

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

Мы рады сообщить, что Vue 2.7 находится в стадии бета-тестирования.

Несмотря на то, что Vue 3 теперь является версией по умолчанию, мы понимаем, что многие пользователи все еще вынуждены оставаться на Vue 2 из-за несовместимости зависимостей, требований поддержки браузера или просто недостаточности времени для обновления. В Vue 2.7 мы перенесли некоторые из наиболее важных функций из Vue 3, чтобы пользователи Vue 2 также могли извлечь из них пользу.

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

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

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

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

Привет, Хабр! Меня зовут Алексей Охрименко, я TechLead вертикали Ai/Voices онлайн-кинотеатра KION в МТС Digital, автор русскоязычной документации по Angular и популярного плагина для рефакторинга Angular-компонентов.   

Мой коллега Алексей Мельников уже рассказывал про фичу пропуска титров в KION, про ее бизнес- и tech-составляющие. Я же остановлюсь на том, какие у нас проблемы возникли в процессе реализации фичи и как мы их решили с помощью Computed Properties в Angular*. Добро пожаловать под кат!

Привет, друзья!

Представляю вашем вниманию адаптированный и дополненный перевод этой замечательной статьи.

AbortController и AbortSignal предоставляют возможность применения некоторых интересных паттернов, рассмотрению которых и посвящена данная статья.

Однако давайте начнем с типичного примера использования AbortController.

SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги <img>, <object> и даже <iframe>. Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG, необходимо вставлять SVG-изображения непосредственно в html-разметку. Хотя на самом деле есть еще один способ. И он удобный.

Для начала, давайте вспомним, а как вообще ловят ошибки в js, будь то браузер или сервер. В js есть конструкция try...catch. Это общепринятая конструкция и в большинстве языков она есть. Однако, тут есть проблема, и как окажется дальше - не единственная...

Ничто не бодрит с утра лучше, чем большая техническая конференция по JavaScript. Восьмого июня в 11:40 стартовала онлайн-часть HolyJS. Получилось огненно (во всех смыслах), весело и познавательно. И тяжелое утро с HolyJS вышло совсем не тяжелым.

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

Сейчас мы готовимся к офлайн-дню 23 июня (и ещё не поздно решить поучаствовать в нём). А пока что поделимся ссылками на видеозаписи Community Day, расскажем о некоторых ярких докладах онлайн-части и озвучим дальнейшие планы.

Рынок разработчиков прагматичен и суров. Он лишён сентиментальности и далёк от благотворительности. Иначе как объяснить, что он требует от фронтенд-разработчика знать и С, и последние фреймворки? Хорошо это или плохо? Всегда ли так было? Так ли сильно отличается современный фронтендер от себя же в прошлом? Давайте разбираться.

Машины Руба Голдберга «работают». А еще они неэффективные, хрупкие, их сложно изготовить и поддерживать. Поэтому написать код, который «просто работает» — очень низкая планка.

Многие не осознают, что написание кода во многом напоминает написание эссе или книги. Насколько же я был уверен, что умение писать эссе мне «в жизни не пригодится» - но позже я узнал, что писать эссе – значит гораздо больше, чем укладываться в число слов и соответствовать критериям оценки.