Привет, Хабр!

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

Вообще, я менеджер.

Но когда-то писал код и всегда любил это занятие. Серьезно прогал мобильные приложения, и даже заработал за один из ответов на SO больше 100 звездочек.

Но с тех пор прошла куча времени.

И последнее время меня вновь увлекла эта тема. А как она может увлечь современного человека, измученного миллиардом фреймворков и отставшего от прогресса лет на 15?
Конечно-же курсором и вайб-кодингом.

И я начал кодить.

Собрал несколько ботов, потом замахнулся на CMS. Сейчас даже делаю свою тулзу для запуска LLM-пайплайнов с импортом их из n8n.

Но в процессе всего этого неизменно сталкивался с двумя проблемами

1) Cursor (и брат его Windsurf) паршивейшим образом обходится с нетипизированными и слабо-типизированными языками. Изобретает названия переменных, меняет их по ходу, и вообще, забивает на это огромный и толстый... За пределами этого кодит он неплохо. Но данная штука лично у меня порождает 90% багов.
2)...

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

Vue 3 уже давно в строю, но его "прокси-движок" и особенности Composition API по-прежнему раскрывают себя всё глубже. В статье мы разберём, как Track/Trigger помогают отслеживать изменения, зачем нужны customRef и как грамотно использовать <Suspense> для асинхронных компонентов. Всё это - на примерах и с советами по оптимизации в крупных проектах.
Приступаем к деталям!

Привет, Хабр! Сегодня разберёмся с тем, что такое OffscreenCanvas, зачем он нужен и как правильно его использовать.

OffscreenCanvas — это API, которое позволяет рендерить графику в отдельном потоке Worker, не блокируя основной поток, где обрабатывается интерфейс.

Силовые тренировки уже давно не инструмент для соревновательного бодибилдинга и пауэрлифтинга. Сегодня силовые — неотъемлемый инструмент здоровой и качественной жизни, в котором вы должны быть заинтересованы.

Только вот некоторые культурные и даже профессиональные мифы повышают порог вхождения в тренажерный зал. Взращивают ментальный барьер, к которому нужно морально готовиться, настраиваться и из-за этого постоянно откладывать начало тренировок. Один из таких барьеров — время. Многие думают, что тренировки обязательно должны быть продолжительными, чтобы быть эффективными. Второй барьер — утомление. Не редко можно услышать что-то из разряда “не устал = не потренировался”, “не болит = не растет”.

Сейчас я постараюсь показать и доказать, что это не так и можно действовать намного эффективнее, опираясь на науку об упражнениях, а не мифы. С помощью рационального подхода делать хороший результат ценой приемлемых усилий. Это не будет материал из разряда “фигура Апполона за 10 минут в день”, но кое-что более изящное, чем классический убийственный метод и подходящее вам — людям с полной занятостью, которым хочется ввести силовые в жизнь, чтобы поддерживать организм и получать от этого бонусы внешнего вида.

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

Недавно я обнаружил интересную ошибку в работе emoji-picker-element:

Я работаю на экземпляре fedi с 19 тыс. пользовательских эмодзи [...], и когда я открываю панель выбора эмодзи [...], страница замирает как минимум на целую секунду, а после этого на некоторое время замирает общая производительность.

Если вы не знакомы с Mastodon или Fediverse, то на разных серверах могут быть свои собственные эмодзи, как в Slack, Discord и т.д. Наличие 19k (на самом деле ближе к 20k в данном случае) крайне необычно, но не является чем-то неслыханным.

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

Думаю, многие в курсе, что JetBrains остановили продажи своих продуктов на территории России, но стоит отдать должное оставили бессрочные лицензии на ту версию продукта, что использовалась на тот момент. Не круто конечно, но долгое время меня этот момент не волновал. Да, не самое свежее ПО, но и платить не нужно. Однако недавно на одном из проектов мне было нужно перейти на Vite и Vitest. И в этот момент я осознал, как для меня важно запускать тесты из IDE. Оказалось, что моя версия WebStorm не поддерживает Vitest.

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

Как вы, наверное, поняли, сегодня будет рассказ о том, как я сменил религию IDE, совершив переход с WebStorm на Cursor (VS Code).

Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.

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

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

• возможность задать несколько фонов с помощью свойства background;
• свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
• как заставить псевдоэлемент nth-child выбрать элементы без привязки к позиции;
• где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Тетрадь, дневник — ваше лицо. А круто оформленный профиль на гитхабе — статус вашей занятости. Чем больше участий в проектах, тем безработнее... Пока молодые специалисты оформляют свои страницы с "Lib-Meta-Neo ML-Scientist 10 years of expirience" на LinkedIN настоящий амбассадор HR и трудового найма бегут на GitHub. Именно там выискиваются самые закостенелые гики программирования, вносящие тридцать пять тысяч коммитов в безбюджетные опенсорс проекты; именно там рождаются гении, разрабатывающие AAA-проекты геймдева на ассемблере. 

Все это шутки. 

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

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

В этой статье разберем как собрать комфортную девелопмент среду для разработки Telegram Mini App. Под комфортом я понимаю ситуацию когда тебе не нужно выгружать свое приложение в облако, чтобы увидеть результат работы в телеге, или запускать туннель типа ngrock, который после каждого перезапуска меняет ссылку. И я не уверен, что HMR можно получить через туннель. Поэтому я сделал свое решение, и хочу оставить его тут себе и потомкам.

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

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

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

Ну что, поехали!

Всем привет! Меня зовут Анастасия Щедрина, я технический лидер по фронтенду проекта размещения объявлений в компании Домклик. Сегодня я расскажу вам немного о том, как устроены правила в ESLint, и покажу на примере, как можно разработать собственные.

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

Существует огромное множество статей про оптимизацию загрузки веб-сайтов, но часто они обходятся лишь общими советами или абстрактными простыми примерами. В этой статье я хочу поделиться своим опытом комплексной оптимизации реального проекта с конкретными примерами, в данном случае SPA, написанном на Vue 3 с использованием Vuetify для части UI компонентов и Firebase для авторизации.

Данная статья написана с уклоном на практическое применение регулярных выражений в проектах. Изначально написана для начинающих разработчиков в моей компании. Статья включает в себя примеры использования на JavaScript (TypeScript).

Примечание пер.: статья содержит крупные GIF-анимации.

О простых и продвинутых способах запуска PostgreSQL в Docker: добавляем healthcheck, ставим на мониторинг, настраиваем параметры.