Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
Подборка инструмент для всех, кто хоть иногда думает
Untools — это коллекция фреймворков и инструментов, которая поможет вам решать проблемы, принимать решения и прокачать системность.
Здесь нет ИИ, это просто концепции и методологии, которые вы можете изучить и применять в работе или повседневной жизни. Всё понятно расписано, содержит иллюстрации и примеры.
Короче, кто думает, тот оценит лайком и заберёт в Избранное. Остальные просто пройдут мимо. 😏
#инструменты
Топовые инструменты для фронтенд-разработки в 2025 году
Мы собрали топ самых эффективных инструментов для фронтенда в 2025 году. Актуальная информация о фреймворках, библиотеках, средствах сборки, проверки и отладки будет полезна как начинающим, так и опытным прогерам.
Изучаем по ссылке, а в комментариях делимся своим топом!
#фронтенд
Алгоритмы на JavaScript
Подборка видеоразборов работы алгоритмов на JavaScript. Полезна всем, кто хочет лучше в них шарить. Здесь разбирается 7 наиболее популярных:
1. Бинарный поиск
2. Рекурсия
3. Хеш-таблицы
4. Обход дерева
5. Связные списки на примере LRU Cache
6. Графы и их обход
7. Рекурсия с мемоизацией для вычисления diff'a текста
Специально для вас скачали их, но если хотите лайкнуть автора, то вот ссылка на плейлист на YouTube.
#видео #алгоритмы #javascript
insomnia | Если докрутить Postman
Помимо привычных HTTP-запросов с пространством для команды здесь еще и Git-версионирование и редактор вашего собственного API. Можно использовать даже в командной строке.
Протоколы: REST, GraphQL, WebSockets, SSE, gRPC.
Спасибо подписчику @FaridunMa за рекомендацию.
Цена: бесплатно
Репозиторий проекта с 35К+ звезд на GitHub
Скачать приложение с официального сайта
@prog_tools
Большая шпаргалка по бэкенду на русском языке
В этой шпаргалке вы найдёте самую разную информацию, нужную бэкенд-разработчикам: как устроен интернет, Работа с БД, API, советы по тестированию и многое другое. Причём весь материал сопровождается картинками и таблицами для наглядности.
Забрать шпаргалку можно здесь: https://github.com/cheatsnake/backend-cheats
#шпаргалка
10 реальных вопросов с собеседования JavaScript-разработчика с ответами
Техническое собеседование — одно из самых стрессовых событий в карьере айтишника. Причём боятся его не только джуны, но и опытные разработчики. Ведь из-за волнения можно забыть ответы на элементарные вопросы.
Здесь мы собрали реальные вопросы и задачи, которые дают JavaScript-разработчикам на собеседованиях. Попробуйте разобраться в них, чтобы чувствовать себя уверенно при разговоре с рекрутером или вашим будущим руководителем.
#javascript
Найден самый быстрый сайт в интернете
Сайт магазина по продаже различных строительных инструментов работает просто мгновенно. Убедитесь сами тут.
Парень, который его обнаружил и проанализировал сперва просто оставил комментарий в Twitter:
After a quick look:
· Agressive pre-loading pages on hover
· fixed image dimensions - there is no layout shift when they load
· Dependency Injection - only loading the JS needed on the pages where its needed
· Uses pushstate to change pages so it feels faster than a full reload
· agressive CDN and browser caching
· Server rendered HTML (ASP.net)
Funny enough they load almost a meg of JS (YUI and jQuery) but you dont notice because it feels so snappy
Компилятор WebAssembly, который помещается в один твит
192 байта. Это не просто рандомное число, а размер компилятор WebAssembly, который умещается в одном твите. Авторы статьи, чей перевод я принёс вам сегодня, добились такого результата, глубоко изучив WASM.
Вам же не обязательно так глубоко погружаться в технологию. Благодаря этой статье, вы сможете узнать некоторые фишки, которые сильно облегчат вес вашего кода.
#wasm
Почему плохие сайты продают лучше
Как вам сайт на картинке? Удивитесь, но такой сайт может приносить конверсий больше, чем «вылизанный» и оформленный максимально современно.
Как такое возможно, мы рассказали в нашей новой статье.
Чек-лист по Node.js для новичков: обработка ошибок
Ошибки в коде неизбежны, но в Node.js их неправильная обработка может привести к серьёзным последствиям: утечки данных, падение приложения или даже зависание сервера. Поэтому умение правильно работать с ошибками — это не просто полезный, а необходимый навык для каждого разработчика.
В этой статье подробно разбираем основные виды ошибок, способы их обработки и самые частые ошибки новичков. Всё на примерах и без лишней теории.
#шпаргалка #nodejs #советы #ru
🍾 Разыскиваются авторы статей про IT
Редакция tproger ищет авторов, которые разбираются в разных технологиях — от фронтенда до devops.
Важно писать понятно и с пользой для читателей. Мы поможем с редактированием, оплатим работу и продвинем ваши статьи на большую it-аудиторию.
Если у вас есть опыт и желание писать для разработчиков и программистов, заполняйте анкету и присоединяйтесь к tproger: https://forms.gle/nGwi92sepAqGuE1U9
#tproger
Создаем React с нуля
В этом гайде содержится инструкция по созданию аналога React с нуля. Вряд ли вы станете использовать его в реальных проектах, но зато узнаете, как устроены основные функции и возможности библиотеки. Помимо гайда внутри вы найдёте ссылку на GitHub с готовым кодом.
Подробности: https://www.rob.directory/blog/react-from-scratch
#react #туториал
Использование async
и defer
для управления скриптами
В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script>
— async
и defer
— могут существенно повлиять на производительность сайта. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.
Подробности.
#javascript #html
Как работает буфер-обмена и как в нём хранятся данные
Мы все пользуемся буфером-обмена каждый день на всех устройствах, но даже не задумываемся, как он работает. Сегодня мы это исправим.
На примере работы буфера-обмена в вебе и его API мы узнаем, как он устроен, как хранит данные разных форматов, а также как он взаимодействует с буферами операционных систем. Переходите по ссылке и читайте: https://alexharri.com/blog/clipboard
Уверены, что знаете CSS Flexbox достаточно хорошо?
Мы подготовили тест, в котором можете проверить, насколько хорошо вы понимаете концепции и свойства Flexbox, которые делают его таким мощным инструментом: https://tproger.ru/articles/css-flexbox-test
Проходите и делитесь своим результатом в комментариях!
#css
Главная фронтенд-конференция на подходе
15 февраля Яндекс традиционно объединит frontend-сообщество в Москве на конференции «Я 💛 Фронтенд». Вас ждут:
— доклады топовых спикеров;
— соревнование по вёрстке вместе с Семёном Левенсоном из Яндекс Маркета;
— знакомство с интеллектуальным помощником разработчика Yandex Code Assistant;
— мастермайнды с экспертами Яндекса, которые готовы погрузиться в технические и архитектурные проблемы участников;
— много нетворка и просто хорошая атмосфера.
Вплоть до конференции можно принять участие в онлайн-активностях на сайте — там же регистрируемся на офлайн-ивент до 12 февраля.
Жидкие кнопки для вашего сайта
Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.
Посмотреть код и забрать их к себе в проект можно тут:
https://codepen.io/Zaku/pen/eRmRxz
#codepen #ui #фронтенд
Как из каши импортов на фронтенде сделать читаемый список
Полезный совет принёс я вам сегодня. Если у вас большой проект с кучей импортов, компонентов и прочего, то вы можете столкнуться со сложностью при прочтении кода в попытке разобраться откуда что берётся.
В этой статье автор поделился, как настроить свою IDE так, чтобы она сама вам выстраивала все импорты в правильном порядке с одинаковой сортировкой во всех файлах.
#ide #линтер
Рекрутеры — паразиты, или как получить отказ на свою же должность в IT
Сегодня в найме творятся интересные вещи. Рекрутеры могут отказать по совершенно надуманной причине, доверить выбор кандидата ИИ или вовсе включить автоотказ, не разбираясь в навыках специалиста.
Автор статьи решил провести небольшой эксперимент и предложил сотрудникам крупных компаний откликнуться на их же вакансии под вымышленным именем. Результат оказался весьма интересным. О нем в статье: https://habr.com/ru/articles/855102/
А вы давно пробовали устраиваться на работу? Как вам ваш опыт?
CSS-фреймворк в стиле CS 1.6
Любители контры на месте? Специально для вас я нашёл и принёс UI-библиотеку, сделанную в духе знаменитого шутера. Инструкция по установке и все возможные стили ждут вас здесь:
https://cs16.samke.me/
Не знаю, где вы ей найдёте применение, но очень хотелось бы на это посмотреть. Поэтому, если где-то её используете, поделитесь потом в комментариях к посту.
#библиотека #css #ui
Найден самый быстрый сайт в интернете
Сайт магазина по продаже различных строительных инструментов работает просто мгновенно. Убедитесь сами тут.
Парень, который его обнаружил и проанализировал сперва просто оставил комментарий в Twitter:
After a quick look:
· Agressive pre-loading pages on hover
· fixed image dimensions - there is no layout shift when they load
· Dependency Injection - only loading the JS needed on the pages where its needed
· Uses pushstate to change pages so it feels faster than a full reload
· agressive CDN and browser caching
· Server rendered HTML (ASP.net)
Funny enough they load almost a meg of JS (YUI and jQuery) but you dont notice because it feels so snappy
Сегодня закончилась не только рабочая неделя, но и первый месяц в году. Давайте поздравим друг друга с этим важным достижением!
Читать полностью…Небольшой лайфхак, как избежать ненужных useEffects, когда пишешь на реакте.
#react
Шпаргалка по всем шпаргалкам — настоящая находка для любого разработчика
Сервис насчитывает около 6 000 разнообразных шпаргалок в картинках: по программированию и разработке, обучению, играм и домашнему быту.
Т.е. кроме классических шпаргалок по типу регулярок и SQL, тут можно найти шпаргалки по кофейным напиткам, командам в Minecraft и даже французской грамматике.
Сайт, который точно должен быть в ваших закладках
#шпаргалка
Полезные ИИ для веб-разработчиков
Вчера в открытом доступе появилась китайская нейросеть DeepSeek, новость о которой обвалила фондовый рынок США Чуть ранее вышло обновление китайской Qwen2.5-Plus, которая якобы ещё мощнее, чем DeepSeek и ChatGPT. Они обе бесплатны и неплохо справляются с написанием кода, это админ проверил лично.
Сейчас же я хочу поделиться с вами исследованием, которое провёл веб-разработчик. В нём он изучил бесплатные инструменты для помощи в веб-разработкеи провёл разбор каждого.
Изучаем и выбираем инструменты для себе по ссылке: https://habr.com/ru/companies/timeweb/articles/873430/
P.S.: так как исследование проводилось до выхода китайских «убийц OpenAI», они в исследование не попали.
#ml #ии
Делаем красивые переносы текстов и иконок в одну строку
Часто бывает, что нам нужно расположить текст или значки в несколько строк, но перенос происходит не в том месте, где бы нам хотелось, оставляя часть строки «висеть» в воздухе.
На самом деле это можно исправить всего одной строкой в CSS. Достаточно добавить text-wrap: balance
и перенос будет более равномерным.
Да, не все знают, что это свойство, несмотря на название, работает не только с текстом, но и вообще с любым содержимым, которое можно выравнять таким образом.
Главное, перед использованием проверьте, что свойство поддерживается там, где вы его будете применять.
#совет #css
Полезные материалы по веб-разработке
Энтузиаст собрал в одном месте огромную подборку материалов по HTML, CSS, JavaScript, React, а также сервисы и программы, которые пригодятся веб-разработчику. Сохраняйте в закладки, чтобы не потерять.
#подборка
Что такое innerHTML
и почему иногда его лучше не использоватьinnerHTML
— это встроенное свойство в JavaScript, которое позволяет работать с содержимым HTML-элементов. Проще говоря, с его помощью можно получить или изменить всё, что находится внутри HTML-тега. Это включает текст, другие теги, атрибуты и так далее.
Пример:
// Берём элемент <div> со страницы
const div = document.getElementById("example");
// Устанавливаем его содержимое
div.innerHTML = "<p>Привет, я новый текст!</p>";
<div id="example">
появится <p>Привет, я новый текст!</p>
. Всё, что ранее было внутри тега <div>
(если что-то было), заменяется.innerHTML
const list = ["яблоко", "банан", "апельсин"];
document.getElementById("list").innerHTML = list.map(item => `<li>${item}</li>`).join("");
"list"
появится список:<ul>
<li>яблоко</li>
<li>банан</li>
<li>апельсин</li>
</ul>
innerHTML
?innerHTML
вы буквально вставляете HTML-код внутрь страницы. Если этот код генерируется на основе сторонних данных (например, от пользователя или с сервера), есть риск внедрения вредоносного кода.innerHTML
полностью перезаписывает всё, что было внутри элемента. Если в элементе были установлены события (например, через addEventListener
), они будут сброшены.innerHTML
может стать неэффективным. Каждый раз он полностью пересоздаёт внутреннюю структуру элемента, даже если изменения минимальны.textContent
, если нужен только текст. Если нужно только поменять текст внутри элемента, а HTML не нужен, то textContent
— ваш друг. Он безопасен, потому что не интерпретирует HTML.insertAdjacentHTML
, чтобы добавить HTML без перезаписи контента. insertAdjacentHTML
позволяет вставлять HTML в конкретное место относительно элемента, не перезаписывая всё содержимое.innerHTML
можно использовать методы вроде document.createElement
и appendChild
.innerHTML
, убедитесь, что данные, которые вы вставляете, безопасны и тщательно проверены.