Pull to refresh
8
0
Сергей Маргелов @smargelov

Верстальщик

Send message

One-shot промптинг. Как я начал вайбкодить в 10? раз быстрее

Level of difficultyEasy
Reading time6 min
Views48K

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

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

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

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

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

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

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

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

Читать далее

Я устал от приложений для изучения английских слов и сделал свою таблицу

Level of difficultyEasy
Reading time4 min
Views51K

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

Читать далее

Vue 3 под капотом и тонкости Composition API: Reactivity, Provide/Inject, Suspense

Level of difficultyMedium
Reading time9 min
Views8.8K

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

Читать далее

OffscreenCanvas в JavaScript: разгоняем графику до максимума

Level of difficultyEasy
Reading time4 min
Views5.5K

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

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

Читать далее

Как растить мышцы двумя тренировками в неделю? Подход для людей с полной занятостью и готовый план на 2 дня

Reading time9 min
Views196K

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

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

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

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

Читать далее

Улучшение производительности рендеринга с помощью CSS content-visibility

Level of difficultyEasy
Reading time5 min
Views7.9K

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

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

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

Читать далее

Git. Руководство по оформлению веток и коммитов

Level of difficultyEasy
Reading time8 min
Views30K

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

Познать истину

Переход с WebStorm на Cursor (VS Code)

Level of difficultyMedium
Reading time7 min
Views26K

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

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

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

Читать далее

Что нужно знать о современном CSS (весна 2024 года)

Level of difficultyMedium
Reading time15 min
Views33K

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

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

Читать далее

Неизвестно полезный CSS. Часть 3

Level of difficultyMedium
Reading time7 min
Views14K


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


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

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

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

Читать дальше →

Как информативно оформить профиль на GitHub?

Level of difficultyEasy
Reading time6 min
Views24K

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

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

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

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

Читать далее

Готовим Telegram Mini App без туннеля и с Hot Module Reload на React, TypeScript

Level of difficultyMedium
Reading time4 min
Views25K

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

Читать далее

Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика

Reading time4 min
Views30K

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

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

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

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

Читать далее

ESLint. Анатомия правил линтинга: разбираем структуру, создаём собственное правило для React-приложения

Level of difficultyMedium
Reading time13 min
Views25K

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

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

Читать далее

16 простых и эффективных правил дизайна UI

Level of difficultyEasy
Reading time11 min
Views38K

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

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

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

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

Самый быстрый способ обучения — это практика, так что приступим!
Читать дальше →

Как я сделал SPA в два раза быстрее

Level of difficultyMedium
Reading time10 min
Views24K

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

Читать далее

Регулярные выражения для JS (TS) juniors

Level of difficultyMedium
Reading time5 min
Views8.2K

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

Читать далее

Овладейте всем потенциалом анимирования с Vue

Level of difficultyMedium
Reading time7 min
Views11K

Vue позволяет разработчикам писать более гибкий и переиспользуемый код за счёт наличия дополнительных возможностей для организации компонентов. И одной из областей применения этих возможностей являются анимации. В текущей статье мы разберём использование Composition API для создания анимаций в Vue с помощью CSS и JS библиотеки GSAP (GreenSock Animation Platform).

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

Запускаем PostgreSQL в Docker: от простого к сложному

Level of difficultyEasy
Reading time12 min
Views639K

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

Читать далее

Information

Rating
Does not participate
Location
Брянск, Брянская обл., Россия
Date of birth
Registered
Activity