tproger_web | Unsorted

Telegram-канал tproger_web - Веб-страница

26007

Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai

Subscribe to a channel

Веб-страница

Подборка инструмент для всех, кто хоть иногда думает

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


А потом сделал и полноценный видеоразбор. Его мы загрузили сюда, чтобы вам не мучаться с VPN. Смотрите и мотайте на ус, так сказать.

Читать полностью…

Веб-страница

Компилятор 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


А потом сделал и полноценный видеоразбор. Его мы загрузили сюда, чтобы вам не мучаться с VPN. Смотрите и мотайте на ус, так сказать.

Читать полностью…

Веб-страница

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

Читать полностью…

Веб-страница

Небольшой лайфхак, как избежать ненужных 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

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

const list = ["яблоко", "банан", "апельсин"];

document.getElementById("list").innerHTML = list.map(item => `<li>${item}</li>`).join("");


После выполнения в элементе с id "list" появится список:

<ul>

<li>яблоко</li>

<li>банан</li>

<li>апельсин</li>

</ul>


Почему же тогда в некоторых случаях лучше НЕ использовать innerHTML?

1. Уязвимость для XSS-атак. При работе с innerHTML вы буквально вставляете HTML-код внутрь страницы. Если этот код генерируется на основе сторонних данных (например, от пользователя или с сервера), есть риск внедрения вредоносного кода.

2. Удаление старого содержимого. innerHTML полностью перезаписывает всё, что было внутри элемента. Если в элементе были установлены события (например, через addEventListener), они будут сброшены.

3. Низкая производительность на больших объёмах данных. Если нужно добавлять или изменять много элементов, innerHTML может стать неэффективным. Каждый раз он полностью пересоздаёт внутреннюю структуру элемента, даже если изменения минимальны.

Чем же тогда заменить её?

1. Используйте textContent, если нужен только текст. Если нужно только поменять текст внутри элемента, а HTML не нужен, то textContent — ваш друг. Он безопасен, потому что не интерпретирует HTML.

2. Используйте insertAdjacentHTML, чтобы добавить HTML без перезаписи контента. insertAdjacentHTML позволяет вставлять HTML в конкретное место относительно элемента, не перезаписывая всё содержимое.

3. Создавайте элементы через DOM-методы для сложной логики. Вместо innerHTML можно использовать методы вроде document.createElement и appendChild.

Если всё же решитесь использовать innerHTML, убедитесь, что данные, которые вы вставляете, безопасны и тщательно проверены.

#простымисловами #html #javascript

Читать полностью…
Subscribe to a channel