Warning: Undefined array key 0 in /var/www/tgoop/function.php on line 65

Warning: Trying to access array offset on null in /var/www/tgoop/function.php on line 65
5207 - Telegram Web
Telegram Web
📣 Как работать с критикой и сохранять мотивацию

Критика — неотъемлемая часть работы разработчика. Если научиться правильно воспринимать конструктивные замечания, это поможет не только улучшить навыки, но и укрепить профессиональный рост. Как же работать с критикой и не потерять мотивацию?

Как воспринимать критику:

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

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

Запроси конкретику
Если критика не ясна, не стесняйся попросить более подробные замечания. Чем более конкретным будет отзыв, тем проще будет исправить ошибку или улучшить подход.

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


Как сохранить мотивацию после критики:

Фокус на успехах
После получения критики важно помнить о своих достижениях и успехах. Записывай положительные моменты и возвращайся к ним в моменты сомнений.

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

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


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

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍2🐳2
Революция в код-ревью и автоматизации программирования 💃

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

— Новые возможности GPT для разработки

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

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

Как Сodex улучшает рабочие процессы

Теперь GPT интегрируется не только в облако и GitHub, но и в локальные среды, такие как IDE и Codex CLI. Разработчики могут работать как в облаке, так и локально, не теряя контекста и мгновенно переключаясь между различными платформами. Важным обновлением стала возможность работы с изображениями и визуальными элементами — теперь можно анализировать скриншоты и вайрфреймы для упрощения дизайна интерфейсов.

К тому же, Codex стал ещё более безопасным

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


Обновления в Codex поднимут качество код-ревью и взаимодействия с командой на новый уровень. GPT-5-Codex значительно упрощает процессы разработки и делает работу с кодом более интуитивно понятной и менее подверженной ошибкам. Что вы думаете о таких возможностях? Будете ли вы использовать GPT-5-Codex в своих проектах?

Data Science
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥3😁3
🔄 React 19: useOptimistic — мгновенные обновления UI без лишнего кода

Пользователь нажал кнопку «Отправить», но запрос пока не обработан. Что видит? Лоадер и пустой экран. Ужасный UX. В React 19 появилось решение для таких ситуаций — useOptimistic, которое помогает обновлять интерфейс мгновенно, не дожидаясь ответа с сервера.

Как было раньше

const [todos, setTodos] = useState(initialTodos);

function addTodo(newTodo) {
const optimistic = [...todos, newTodo];
setTodos(optimistic);

saveTodo(newTodo).catch(() => {
setTodos(todos); // откат, если ошибка
});
}


Как стало с useOptimistic

const [optimisticTodos, addOptimisticTodo] = useOptimistic(
todos,
(state, newTodo) => [...state, newTodo]
);

function addTodo(newTodo) {
addOptimisticTodo(newTodo);
saveTodo(newTodo);
}


ℹ️ Пояснение

Раньше каждый раз приходилось вручную обновлять состояние и заботиться о его откате при ошибке. Логика дублировалась, а код становился громоздким. С useOptimistic обновления происходят мгновенно. Добавление нового элемента в список происходит сразу, а если сервер вернёт ошибку — React сам синхронизирует состояние, без необходимости писать дополнительные костыли для откатов.
useOptimistic значительно упрощает работу с «живыми» интерфейсами.

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
10👎5🔥4👍2🐳1
📝 HTML <dialog> — нативные модальные окна без использования JS

Модальные окна — один из самых популярных элементов интерфейса, с которым часто приходится работать на фронтенде. Раньше, чтобы реализовать модалку, нам приходилось подключать внешние библиотеки или писать кастомные решения. Но в HTML5 появилась нативная поддержка модальных окон через <dialog>, что значительно упрощает задачу.

Как было раньше:

<div class="modal hidden">
<p>Привет!</p>
<button onclick="closeModal()">Закрыть</button>
</div>

<style>
.hidden { display: none; }
</style>

<script>
// Какой то JS код
</script>


Как стало с <dialog>:

<dialog id="myDialog">
<p>Привет!</p>
<button onclick="myDialog.close()">Закрыть</button>
</dialog>

<button onclick="myDialog.showModal()">Открыть</button>


Для реализации модальных окон часто использовался обычный <div> с добавлением классов для отображения и скрытия, а также JavaScript для управления этим процессом. Чтобы скрыть или показать модалку, нужно было вручную изменять стили или использовать JS-функции.

ℹ️ Как <dialog> упрощает работу и где полезно:

— .showModal(): открывает модалку
— .close(): закрывает модалку
— Улучшение доступности: <dialog> уже дружит с screen readers
— Браузер сам обрабатывает фон и клавишу Esc для закрытия окна
— Модальные окна (уведомления, формы, подтверждения)
— Быстрые прототипы без лишнего JS


📌 Если вам не нужно сложное оформление и анимации, то <dialog> идеально подходит для реализации модальных окон с минимальными усилиями. Код при этом минималистичен. Конечно, для более сложных задач и дизайнов без дополнительных стилей и JavaScript не обойтись, но для простых задач пойдет.

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
11👍5🐳1
Supply Chain атака на npm: Shai-Hulud — угроза, которая заражает проекты

Недавняя атака на экосистему npm под названием Shai-Hulud привлекла внимание разработчиков по всему миру. Это масштабная supply chain атака, которая затронула более 500 пакетов, включая популярные библиотеки, такие как ngx-toastr, tinycolor, react-jsonschema-form-extras и пакеты от CrowdStrike.

Заражённые пакеты содержат вредоносный скрипт bundle.js. Этот скрипт запускает TruffleHog для поиска секретных данных, таких как GitHub токены, NPM ключи или AWS креды, и отправляет их на внешний сервер. Дополнительно создаётся вредоносный workflow в папке .github/workflows, который будет автоматически запускаться при каждом CI-процессе. В итоге, атака действует как червь, распространяясь через каждый новый пакет, заражая downstream-проекты.


ℹ️ Что делать разработчикам

Проверить проекты на наличие заражённых версий пакетов
Ротировать npm-токены, GitHub PAT и облачные креды, чтобы минимизировать последствия
Аудитировать CI/CD конфигурации для выявления подозрительных изменений
Обновлять пакеты только из доверенных источников, избегать использования сомнительных версий


📌 Supply chain атаки становятся всё более изощрёнными и опасными. Ранее мы переживали только за typosquatting, а теперь столкнулись с реальными «npm-червями», которые могут заразить проекты на всех уровнях. Если вы работаете с публичными пакетами, регулярный аудит зависимостей и CI/CD — теперь часть обязательной практики.

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
😁52🔥2🐳1
Forwarded from xCode Journal
🐳 Специально для вас увесистая шпаргалка по Docker на русском

Всё самое нужное: команды для работы с сетью, образами, томами, контейнерами и другими полезностями синего кита.

Полная версия тут

✖️ xCode Journal
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍6🔥5
🔫 CSS Scroll Snap — контролируемая прокрутка для улучшенного UX

Если вы тоже не любите, когда прокрутка на сайте какая-то «дёрганая», особенно если у вас длинные страницы или слайдеры, то вам стоит познакомиться с CSS Scroll Snap. Это классная фича, которая позволит сделать прокрутку более плавной и предсказуемой.

ℹ️ Как это работает?

.container {
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-snap-type: x mandatory;
overflow-x: auto;
}

.item {
scroll-snap-align: start;
width: 100%;
}


Объяснение кода

— scroll-snap-type — задаём, как будет вести себя прокрутка. В данном случае по горизонтали, и «привязка» к элементам обязательная. То есть ты прокручиваешь — и следующий элемент буквально «прилипает» к экрану.
— scroll-snap-align на каждом элементе говорит браузеру, где должен быть тот или иной элемент. В примере это старт (то есть начало элемента), но можно выбрать другие варианты для разных случаев.
— overflow-x: auto — чтобы всё это заработало по горизонтали, даём контейнеру возможность прокручиваться.
— По сути, ты прокручиваешь, а браузер заботится о том, чтобы каждый элемент красиво встал на место. Мелочь, а приятно.


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

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
9👍6🔥2🐳1
💡 Управление памятью с помощью WeakRef и FinalizationRegistry

В ES2021 появились два мощных инструмента для управления памятью — WeakRef и FinalizationRegistry. Эти возможности не часто требуются в обычных проектах, но могут быть очень полезными, когда нужно работать с кэшами или большими объёмами данных.

ℹ️ Что такое WeakRef и как его использовать:

let obj = { name: "Alex" };
const ref = new WeakRef(obj);

console.log(ref.deref()?.name); // "Alex"

obj = null;
// объект может быть собран GC, ref станет пустым


WeakRef позволяет держать «слабую ссылку» на объект, что даёт возможность избежать того, чтобы объект не был уничтожен сборщиком мусора. Такие ссылки не препятствуют удалению объекта, когда на него не остаётся других сильных ссылок.

ℹ️ Что такое FinalizationRegistry и зачем он нужен:

const registry = new FinalizationRegistry((value) => {
console.log(`Объект ${value} удалён`);
});

let user = { id: 1 };
registry.register(user, "user-1");

user = null;
// когда GC удалит объект — сработает коллбек


FinalizationRegistry позволяет «подписаться» на момент удаления объекта сборщиком мусора. Это полезно, например, для очистки ресурсов или выполнения других операций, когда объект больше не существует в памяти.

📌 Эти инструменты особенно полезны при кэшировании больших объектов (например, изображений), управлении ресурсами, которые должны освобождаться автоматически, и отслеживании утечек памяти. Я редко использую WeakRef в продакшн-проектах, но для работы с тяжёлыми кэшами — это просто спасение. Можно уменьшить вероятность утечек памяти, не загружая систему лишними ссылками.

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
9🐳1
🔫 Soft skills, которые реально влияют на карьеру разработчика

В мире IT часто можно услышать: «Главное — кодить». И действительно, навыки программирования — основа, но чем выше твоя роль, тем сильнее ощущается, что одного кода мало для успешной карьеры.

ℹ️ Умения, которые важны не менее технических навыков

• Коммуникация
Всё начинается с умения объяснять. Ты можешь быть лучшим разработчиком, но если не умеешь ясно донести свою идею до коллег или заказчика, твои решения могут остаться на заднем плане. Это умение работает как на личных встречах, так и на код-ревью.

• Презентация идей
Ты можешь предложить отличное решение для сложной проблемы, но если не умеешь грамотно его «продать» команде или менеджерам, оно останется без внимания. Это важно для того, чтобы твои предложения были услышаны и приняты.

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


📌 В начале карьерного пути, я думал, что главное — это только качество кода. Но в дальнейшем я понял что подача и провижение идеи или обычные человеческие коммуникации важнее. Ты можешь быть трижды крутым технарем но по моим личным наблюдением большего успеха в карьере добъется тот кто пишет более посредственный код но умеет "продать" этот код как фичу или просто умеет поддерживать со всеми хорошие отношения.

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
4🐳3
Так делать не надо

В сети вспомнили про игру User Inyerface, где собраны примеры худший UI/UX решений. На время ты должен заполнить форму, но это не так-то просто — ведь сайт абсолютно не юзер френдли.

✖️ xCode Journal
Please open Telegram to view this post
VIEW IN TELEGRAM
4😁4
👨‍🎨 CSS Custom Properties для управления темами

С темами в проектах часто возникает проблема: нужно быстро менять стили, не ломая код и не создавая лишних классов. Здесь на помощь приходят CSS Custom Properties — они позволяют динамически менять стили, и к тому же очень легко интегрируются в уже существующие решения.

ℹ️ Как это работает?

:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}

body {
background-color: var(--primary-color);
color: white;
}

button {
background-color: var(--secondary-color);
border: none;
color: white;
padding: 10px 20px;
}

.dark-theme {
--primary-color: #2c3e50;
--secondary-color: #8e44ad;
}


<button onclick="document.body.classList.toggle('dark-theme')">Toggle Theme</button>


Объяснение кода

— Переменные CSS: в начале мы задаём основные цвета как кастомные свойства на уровне :root, что позволяет нам использовать их по всему сайту.

— Использование переменных: мы применяем эти переменные в разных местах CSS: для фона, текста и кнопок.

— Тема по клику: с помощью простой кнопки мы переключаем классы и меняем кастомные переменные. Когда класс dark-theme применяется к body, цвета меняются на тёмные, и всё обновляется без необходимости менять кучу стилей вручную.


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

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3👍211
Forwarded from xCode Journal
😭 ИИ подумал 2 секунды и решил все уничтожить

Используйте этот пост как напоминание делать бекапы

💥 xCode Journal
Please open Telegram to view this post
VIEW IN TELEGRAM
😁271
Вчера посмотрел доклад Алексея Гусакова (CTO бизнес-группы Поиска и рекламных технологий Яндекса), где он рассказал, как меняется продуктовая разработка в эпоху LLM. Кратко по выступлению: раньше разработка была медленной и рискованной. Продакт придумывал фичу, разработчики долго её делали, а в итоге пользователи часто оставались недовольны.

С приходом LLM началась «эпоха промтов». Теперь продакты сами «кодируют» логику системы через огромные текстовые инструкции. Например, один из компонентов Алисы управляется 7-страничным PDF-промтом. Прототипирование стало в разы быстрее, но появились и минусы: модели научились обманывать систему и генерировать абсурдные артефакты.

Будущее, к которому движется Яндекс (и не только), — это «умная эпоха». Вместо детальных инструкций «как делать», LLM будут получать ограничения «как НЕ делать». В этих рамках нейросеть получит свободу, будет сама выбирать тактику и самообучаться на реакциях пользователей.

Главный вывод: разработка движется от жестких скриптов и промтов к созданию самообучающихся систем с заданными границами.

Если интересно послушать оригинал, ссылка на запись выступления тут. Доклад был частью big tech night — события для айтишников, которое проходило одновременно в Яндексе, Сбере, Х5, Т-Банке и Lamoda.
👍43
🗑 TypeScript 5.2 — автоматическое управление ресурсами с using

В TypeScript теперь есть возможность использовать using для автоматического освобождения ресурсов, как только они выходят за пределы блока. Если объект реализует интерфейс Disposable с методом [Symbol.dispose](), то при выходе из блока объект автоматически «закрывается» и освобождается.

ℹ️ Как это работает?

class FileHandler {
constructor(private file: string) {}

[Symbol.dispose]() {
console.log(`Закрываю файл: ${this.file}`);
}
}

function run() {
using file = new FileHandler("data.txt");
console.log("Работаем с файлом...");
}

run();
// Работаем с файлом...
// Закрываю файл: data.txt


Объяснение кода

— В классе FileHandler реализован метод [Symbol.dispose]() для закрытия файла. Это ключевая часть, которая позволяет нам использовать ресурс, а затем автоматически его освобождать, как только мы выходим из блока.

— Внутри функции run мы используем ключевое слово using, которое автоматически вызывает метод [Symbol.dispose]() на объекте, когда он выходит из области видимости.

— Нет риска забыть вызвать .close(). Как это часто бывает, забытые вызовы могут привести к утечкам памяти и другим проблемам. С using этот момент полностью автоматизирован.

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

— Это решение напоминает using в C# и with в Python.


📌 Для меня это прямо шаг к более безопасному и удобному коду. Особенно полезно, когда речь идет о работе с потоками или соединениями, где управление ресурсами всегда было важной, но утомительной задачей.

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥97👍5
🔃 Атрибут popover в HTML

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

ℹ️ Как это работает?

<button popovertarget="menu">Открыть меню</button>

<div id="menu" popover>
<p>Пункт 1</p>
<p>Пункт 2</p>
</div>


showPopover() — показывает всплывающее окно
hidePopover() — скрывает всплывающее окно
togglePopover() — переключает состояние окна (если оно открыто — закрывает, если закрыто — открывает)

Что это дает для нас?

— Теперь не нужно писать кучу логики для простых тултипов или меню. HTML справляется с этим на ура.

— Уже можно использовать в последних версиях Chrome и Edge.

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


📌 Реально хорошая фича, которая делает код проще. Использовал popover для создания простого меню на лендинге, и это просто сработало. Меньше JS, больше чистого HTML — это определенно стоит использовать!

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
14🔥7👍6
🔎 TypeScript 5.7 — обновление, которое стоит заметить

Вышел TypeScript 5.7, и, если ты ожидаешь каких-то революционных изменений, то их не будет. Но если тебе важна стабильность и удобство, то это обновление точно стоит как минимум изучить. Здесь много мелких улучшений, которые делают разработку ещё более комфортной.

ℹ️ Вот что можно выделить:

• Улучшенный контроль типов для await
Теперь TypeScript стал умнее в работе с await. Он лучше понимает, какой тип возвращает Promise, и точнее проверяет результат. Это значит меньше ошибок, связанных с типами, и больше уверенности в коде.

• Расширенные возможности using
Конструкция using, которая используется для управления ресурсами, получила доработки. Теперь она поддерживает больше сценариев, и это стало «из коробки» доступным для большего числа случаев. Отличное улучшение для работы с ресурсами, которое экономит время и уменьшает количество ошибок.

• Поддержка новых возможностей ECMAScript 2025
TypeScript продолжает догонять актуальные стандарты JavaScript. В 5.7 ты уже можешь использовать новые возможности ECMAScript 2025. Это значит, что твой код становится ещё более современным и соответствует последним тенденциям в мире JavaScript.

• Мелкие улучшения производительности компилятора

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


📌TypeScript 5.7 — стабильное обновление, которое на самом деле не вносит никаких фундаментальных изменений но как минимум стоит уделить немного внимания для изучения нововведений.

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
10👍5🐳1
👥 Тимлид или просто хороший разработчик?

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

ℹ️ Что реально меняется?

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

• Ответственность
Как тимлид ты отвечаешь не только за свой код, но и за результат работы всей команды. Если кто-то не успевает или ошибается, ответственность лежит на тебе.

• Коммуникации
Вместо того чтобы погружаться в код, ты проводишь время на митингах, one-on-one встречах, планировании и отчётах. Все это часть твоей рутины.


ℹ️ Плюсы и минусы

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

— Развитие коммуникации, управление людьми, решение конфликтов и мотивация команды - это именно те навыки, которые ты развиваешь как тимлид.

— Перспективы на будущее - head of, CTO и так далее. Это хороший старт, если хочешь развиваться в менеджменте.

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

— Некоторым это дается легко, а другие не находят себя в роли наставника, организатора и переговорщика.


📌Если честно, я считаю, что идти в тимлиды стоит только в том случае, если тебе действительно интересна работа с людьми и процессами. Это не «награда за сеньора», а другой путь, требующий совсем других навыков. Если ты хочешь оставаться в коде — лучше расти в архитекторы.

🚪 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥84👍3🐳3
2025/10/25 17:08:07
Back to Top
HTML Embed Code: