Последние посты
progway — программирование, IT
6 июн. 2025 г., 10:14
Шпаргалка с чего начать в FrontOps➡Для себя любимого1. Свободно ориентироваться в терминале, уметь выходить из вима и пользоваться ssh 2. Разобраться со сборкой — разобраться как минимум с Vite, понимать как исходный код превращается в бандл 3. Разобраться с Docker — понять зачем вообще он нужен, как оптимизировать Dockerfile➡Для команды любимой1. Автоматизировать всё, что можно автоматизировать — изучить prettier, biome, eslint, stylelint — интегрировать в проект и забыть о спорах на ревью о формате кода. Также можно изучить husky и запускать все необходимые проверки ещё до коммита 2. Разобраться с GitLab Actions, именно это используют в большинстве случаев — прогонять линтеры и тесты, собирать превью билд для пул реквестов 3. Изучить мониторинг и аналитику — Sentry для мониторинга и Umami или Matomo дляprogway — программирование, IT
5 июн. 2025 г., 10:36
Первый шаг в сторону FrontOpsВ продолжение темы FrontOps хочу рассказать, чем я пользуюсь для своих проектовДлительное время любил и уважал Vercel, да и до сих пор считаю, что для базового деплоя проекта «в интернет» ничего лучше Vercel/Netlify для новичка не придумали, но со временем начал сталкиваться со множеством ограничений бесплатной версии. Например, веб-сокеты в бесплатной версии у меня поднять так и не получилось из-за ограничений самого сервисаНо самое главное — нет контроля над происходящим, а он порой бывает невероятно полезенПоэтому я начал использовать Coolify — опенсорсной self-hosted альтернативой. Если утрировать и упрощать, то представьте, что вы владелец Vercel. Вот Coolify даёт вам такое чувство, поскольку это коробочное решение, которое можно поднять на своём сервере по очень простому гайду и с удовольствием пользоватьсяВ Coolify есть множество функций,progway — программирование, IT
22 мая 2025 г., 11:40
Небольшая коллаба с Bell Integratorprogway — программирование, IT
22 мая 2025 г., 11:39
переслано из @bellintegrator_career
Как успешно пройти собеседование frontend-разработчику? 📄Интервью — важный этап построения карьеры. На одном хорошо расписанном резюме далеко не уедешь: важно уметь правильно преподносить себя, быть честным в ответах, собирать обратную связь — и это лишь часть верных шагов!О том, как качественно готовиться к собеседованию будущим специалистам, что говорить во время и что делать после него, рассказал frontend-разработчик со стажем Денис Путнов, который на своем канале делится еще больше полезной информацией о программировании и карьере в ИТ.#BellintegratorTeam #советыBell
progway — программирование, IT
21 мая 2025 г., 12:12изменён
Сам себе режиссёр?Сегодня принято считать, что FrontOps — это попытка соединить посредственного DevOps-инженера и фронтендера в одном лице. Но, как по мне — это наглядная демонстрация T-shape подхода в оценке разработчиковT-shape — это модель компетенций, где обычно выделяют одну доминанту (например, фронтенд) и множество навыков рядом с основным (для фронтендера, например — CI/CD, DevOps, UI/UX и тд)Также к навыкам рядом можно относить и soft skills, например навык управления командой и прочееУ людей куча мнений на этот счёт и мне в основном встречается негативная позиция, но имхо — это вполне адекватное требование не только к фронтендеру, но и любому другому разработчику начиная с грейда мидл и вышеВ первую очередь, развитие вширь и обретение ещё каких-то навыков за рамками основной компетенции — это отличное развитие «вширь» для любого специалиста в любой профессииДля кандprogway — программирование, IT
13 мая 2025 г., 10:47
Ещё один пример XSS уязвимостиПредположим, сайт a.com не защищён от XSS. Допустим, там есть URL-параметр, который встраивается в страницу как есть:<div>Результаты поиска: <?php echo $_GET['query']; ?></div>Что делает злоумышленник:1. Создаёт специальную ссылку, например: https://a.com/search?query=<script>alert('Я украл твою почку!')</script>2. Обманом заставляет вас перейти по этой ссылке (через фишинговое письмо, сообщение в соцсети и т.д.)Что происходит у вас в браузере:1. Вы заходите на a.com через эту ссылку2. Сервер a.com вставляет <script>...</script> прямо в HTML3. Ваш браузер видит этот скрипт и выполняет его, потому что считает, что он пришёл с доверенного сайта a.comprogway — программирование, IT
5 мая 2025 г., 10:32
Content Security PolicyCSP — механизм защиты веб-приложений в браузере, который регулирует из каких источников браузер может загружать ресурсы и выполнять их (скрипты, стили, шрифты, картинки и т.д.)Основная задача CSP — защитить пользователя от инъекционных атак, типа XSS, блокируя любые недоверенные ресурсыCSP можно задавать через HTTP заголовок или через meta тег. И, если честно, с CSP в мета тегах я никогда не сталкивался, поэтому осознанно опущу эту часть, такой способ задания наименее гибкий и полезный и подходит только для статикиОбычно политику можно задать в конфиге Nginx, условного Express или даже в докере через заголовок: Content-Security-Policy. Выглядеть это в упрощённом случае может примерно так:Content-Security-Policy: default-src 'self' https://trusted.ru;Эта запись означает, что ресурсы можно загружать только с домена приложения либо с trusted.ruЕсли наprogway — программирование, IT
30 апр. 2025 г., 09:52
Что такое XSSXSS — это тип уязвимости, при которой злоумышленник внедряет в страницу свой скрипт, и этот скрипт выполняется в браузере жертвы как будто от имени доверенного сайтаПри помощи XSS зачастую можно потерять cookies, localStorage, а также получить подмену содержимого страницы (например, на страницу встроится какая-нибудь фишинговая форма)На основе вышеописанного и украденных данных авторизации уже можно сделать любое действие от лица пользователя, будь то отправка сообщения, банковский перевод или любая другая операцияКак по мне, самый распространенный вариант попасться на XSS атаку сейчас — поставить себе недобросовестное браузерное расширение и дать ему слишком много разрешений на ходуСайты, не защищённые CSP или с 'unsafe-inline' директивой — лакомый кусочек для таких типов атак1. Вы устанавливаете расширение, которое парсит страницу (ваш банк, например) иprogway — программирование, IT
2 апр. 2025 г., 15:08
📃Товарищи, вниманиеУ меня небольшой творческий кризисКажется, что я уже очень многое описал, и у меня самого постепенно заканчиваются идеи для новых постовПоэтому был бы рад обсудить любые идеи на тему контента в канале, пишите их в комменты к посту или анонимно в личкуСпасибо за внимание 🥰progway — программирование, IT
2 апр. 2025 г., 14:45
Как создать массив фиксированной длины?На самом деле, способов множество. Можно создать простой массив пустых элементов: Array(100)Но тогда будет проблема с тем, чтобы его заполнить. Решить её очень просто — можно просто заполнить массив через метод fill: Array(100).fill(0)Или мы можем попробовать вызвать метод map и заполнить массив индексами: Array(100).map((_, index) => index)Пробуйте угадать что получится в ходе выполнения кода выше😂Ответ: ⬇️Получится [empty × 100], а не массив индексов)Тут дело в том, что при вызове Array(100) у нас изначально создаётся "разряженный" массив. Это когда под каждый элемент массива даже память не выделяется.progway — программирование, IT
19 мар. 2025 г., 08:27
Как реагировать на изменения объектаВ JavaScript обычные объекты не умеют уведомлять о своих изменениях, однако эту задачу можно решить с помощью ProxyProxy — это специальный встроенный в язык объект-обёртка, который позволяет изменить поведение других объектов, перехватывая действия над нимиnew Proxy(target, handlers) создаёт прокси для объекта target, где handler содержит ловушки для перехвата операцийЛовушек много — get, set, deleteProperty, has... (подробнее на MDN) — каждая из ловушек переопределяет реакцию объекта на взаимодействие с нимНапример, можно переопределить поведение объекта при обращении к какому-нибудь из его свойств: const user = { name: "Денис", age: 23 };const proxyUser = new Proxy(user, { get(target, key) { return key in target ? target[key] : "Не найдено"; } });proxyUser.name // "Денис"progway — программирование, IT
19 февр. 2025 г., 10:23
Кстати, из смешного печального, 99.97% писем имеют серьёзные/критические проблемы с доступностью по результатам исследования 2024 годаИз 409 357 проанализированных писем без ошибок по доступности были целых 28🤷♂️🤷♂️🤷♂️@prog_way_blog
progway — программирование, IT
19 февр. 2025 г., 10:18изменён
Верстка писем — это боль? или нет..?Если вы думали, что адаптивная верстка для всех браузеров — это сложно, попробуйте сверстать email, который одинаково выглядит в Gmail, Outlook, Yahoo и десятках других почтовых клиентов...Вёрстка письма — это крайне специфичное занятие, при котором нет возможности использовать добрую половину, если не больше, возможностей HTML и CSSПочтовые движки настолько старые, что многие из них до сих пор требуют верстки с использованием таблиц, прямо как в 90-х. Но гораздо интереснее вопрос — почему получилось именно так? Я бы выделил пару причин:➡️ Что и так понятно, причина историческаяВёрстка письма — задача часто тривиальная. Вот многие и не заморачиваются с обновлением движков, так как это не дает какой-то бизнес выгоды. Нет абсолютно никакой разницы между вёрсткой письма для отправки PIN-кода для входа наprogway — программирование, IT
24 янв. 2025 г., 13:27изменён
Что такое Server-Sent EventsSSE — это технология для однонаправленного соединения между сервером и клиентом, которая позволяет серверу отправлять обновления данных в реальном времениЧасто SSE могут стать отличной альтернативой WebSocket. Он отлично подойдёт для кейсов, когда: 1. Нам нужно постоянно получать обновления с сервера 2. Не нужно постоянно отправлять что-то с клиентаТакая односторонняя связь полезна при реализации: — уведомлений — обновления данных в реальном времени (цен, загрузки CPU...) — индикатора прогресса загрузки большого файла — даже в играхИ многих других случаяхФикус в том, что держать SSE гораздо проще и дешевле, чем держать WebSocket. Как по коду, так и по перфомансуДля реализации понадобится только простенький эндпоинт на сервере, а далее процесс выглядит так: 1. Клиент делает GET запрос на подготовленный эндпоинт через EventStreamprogway — программирование, IT
30 дек. 2024 г., 17:17изменён
🎄 С новым годом, почтиМодно нынче подводить итоги года и мне стало интересно подбить итоги для каналаМеня эта статистика приятно удивляет, я даже не задумывался что могут получиться такие большие цифрыЗа этот год я сделал очень много для канала: много что изучил, проводил интерактивы, старался стабильно и по графику выпускать посты, пусть и не всегда успешно. Покупал рекламу, пытался продавать её сам, в чём, кстати, сильно разочаровалсяЗа год в канале вышло 14 по настоящему рекламных постов, в основном, с рекламой каких-то ИМХО адекватных каналов, что ещё куда ни шло, но в основном в предложку летит полный шлак, а продавать места в канале за смешные деньги очень уж впадлуПоэтому в новом году я желал бы себе монетизировать канал этичным для себя способом, а каждому из вас я желаю получать ещё больше удовольствия от работы и жизни в целом,
progway — программирование, IT
5 дек. 2024 г., 20:27
🔖Оно живое — React 19 вышел в стабильной версии, о чём и сообщает команда реактаНу, верим@prog_way_blog — #newsreact.devReact v19 – ReactThe library for web and native user interfacesprogway — программирование, IT
27 нояб. 2024 г., 09:22
Флоу рендеринга компонента в ReactНебольшая шпаргалка, которая содержит в себе очередь вызова эффектов при маунте и апдейте компонента.➡️При маунте порядок следующий:1. Рендер на основе изначальных значений состояний 2. useInsertionEffect 3. Создание DOM 4. Прикрепление ссылок на ноды (ref) 5. useLayoutEffect 6. useEffect➡️При апдейте компонента:1. Рендер на основе новых значений состояний 2. Обновление DOM 3. useInsertionEffect 4. Прикрепление ссылок на ноды (ref) 5. useLayoutEffectprogway — программирование, IT
26 нояб. 2024 г., 16:17изменён
Набор каналов об ITВ телеге есть функция зашарить сразу целую папку с каналами, хочу поделиться с вами одной такой:🔘Каналы о пересечении профессии, жизни, разных увлечений🔘Фронтенд, мобильная разработка, ИИ модельки и другие сферы🔘Новости, экспертный контент и блогиДобавляйте папку к себе, каналов много, каждый точно найдёт что-то для себяДобавить папку можно по ссылке@prog_way_blog — чатprogway — программирование, IT
20 нояб. 2024 г., 12:17
Вот вам ещё визуализация всего, что я пытался описать текстом
progway — программирование, IT
20 нояб. 2024 г., 12:17
пусть и не всегда
