Веб-страница
07 February 2025 13:04
Как работает буфер-обмена и как в нём хранятся данные
Мы все пользуемся буфером-обмена каждый день на всех устройствах, но даже не задумываемся, как он работает. Сегодня мы это исправим.
На примере работы буфера-обмена в вебе и его API мы узнаем, как он устроен, как хранит данные разных форматов, а также как он взаимодействует с буферами операционных систем. Переходите по ссылке и читайте: https://alexharri.com/blog/clipboard
Читать полностью…
Веб-страница
06 February 2025 20:33
Уверены, что знаете CSS Flexbox достаточно хорошо?
Мы подготовили тест, в котором можете проверить, насколько хорошо вы понимаете концепции и свойства Flexbox, которые делают его таким мощным инструментом: https://tproger.ru/articles/css-flexbox-test
Проходите и делитесь своим результатом в комментариях!
#css
Читать полностью…
Веб-страница
06 February 2025 12:02
Главная фронтенд-конференция на подходе
15 февраля Яндекс традиционно объединит frontend-сообщество в Москве на конференции «Я 💛 Фронтенд». Вас ждут:
— доклады топовых спикеров;
— соревнование по вёрстке вместе с Семёном Левенсоном из Яндекс Маркета;
— знакомство с интеллектуальным помощником разработчика Yandex Code Assistant;
— мастермайнды с экспертами Яндекса, которые готовы погрузиться в технические и архитектурные проблемы участников;
— много нетворка и просто хорошая атмосфера.
Вплоть до конференции можно принять участие в онлайн-активностях на сайте — там же регистрируемся на офлайн-ивент до 12 февраля.
Читать полностью…
Веб-страница
05 February 2025 05:11
Жидкие кнопки для вашего сайта
Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.
Посмотреть код и забрать их к себе в проект можно тут:
https://codepen.io/Zaku/pen/eRmRxz
#codepen #ui #фронтенд
Читать полностью…
Веб-страница
03 February 2025 23:04
Как из каши импортов на фронтенде сделать читаемый список
Полезный совет принёс я вам сегодня. Если у вас большой проект с кучей импортов, компонентов и прочего, то вы можете столкнуться со сложностью при прочтении кода в попытке разобраться откуда что берётся.
В этой статье автор поделился, как настроить свою IDE так, чтобы она сама вам выстраивала все импорты в правильном порядке с одинаковой сортировкой во всех файлах.
#ide #линтер
Читать полностью…
Веб-страница
03 February 2025 10:32
Рекрутеры — паразиты, или как получить отказ на свою же должность в IT
Сегодня в найме творятся интересные вещи. Рекрутеры могут отказать по совершенно надуманной причине, доверить выбор кандидата ИИ или вовсе включить автоотказ, не разбираясь в навыках специалиста.
Автор статьи решил провести небольшой эксперимент и предложил сотрудникам крупных компаний откликнуться на их же вакансии под вымышленным именем. Результат оказался весьма интересным. О нем в статье: https://habr.com/ru/articles/855102/
А вы давно пробовали устраиваться на работу? Как вам ваш опыт?
Читать полностью…
Веб-страница
02 February 2025 07:07
CSS-фреймворк в стиле CS 1.6
Любители контры на месте? Специально для вас я нашёл и принёс UI-библиотеку, сделанную в духе знаменитого шутера. Инструкция по установке и все возможные стили ждут вас здесь:
https://cs16.samke.me/
Не знаю, где вы ей найдёте применение, но очень хотелось бы на это посмотреть. Поэтому, если где-то её используете, поделитесь потом в комментариях к посту.
#библиотека #css #ui
Читать полностью…
Веб-страница
01 February 2025 00:12
Найден самый быстрый сайт в интернете
Сайт магазина по продаже различных строительных инструментов работает просто мгновенно. Убедитесь сами тут.
Парень, который его обнаружил и проанализировал сперва просто оставил комментарий в 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. Смотрите и мотайте на ус, так сказать.
Читать полностью…
Веб-страница
31 January 2025 18:09
Сегодня закончилась не только рабочая неделя, но и первый месяц в году. Давайте поздравим друг друга с этим важным достижением!
Читать полностью…
Веб-страница
30 January 2025 20:04
Небольшой лайфхак, как избежать ненужных useEffects, когда пишешь на реакте.
#react
Читать полностью…
Веб-страница
29 January 2025 21:56
Шпаргалка по всем шпаргалкам — настоящая находка для любого разработчика
Сервис насчитывает около 6 000 разнообразных шпаргалок в картинках: по программированию и разработке, обучению, играм и домашнему быту.
Т.е. кроме классических шпаргалок по типу регулярок и SQL, тут можно найти шпаргалки по кофейным напиткам, командам в Minecraft и даже французской грамматике.
Сайт, который точно должен быть в ваших закладках
#шпаргалка
Читать полностью…
Веб-страница
28 January 2025 19:04
Полезные ИИ для веб-разработчиков
Вчера в открытом доступе появилась китайская нейросеть DeepSeek, новость о которой обвалила фондовый рынок США Чуть ранее вышло обновление китайской Qwen2.5-Plus, которая якобы ещё мощнее, чем DeepSeek и ChatGPT. Они обе бесплатны и неплохо справляются с написанием кода, это админ проверил лично.
Сейчас же я хочу поделиться с вами исследованием, которое провёл веб-разработчик. В нём он изучил бесплатные инструменты для помощи в веб-разработкеи провёл разбор каждого.
Изучаем и выбираем инструменты для себе по ссылке: https://habr.com/ru/companies/timeweb/articles/873430/
P.S.: так как исследование проводилось до выхода китайских «убийц OpenAI», они в исследование не попали.
#ml #ии
Читать полностью…
Веб-страница
27 January 2025 20:04
Делаем красивые переносы текстов и иконок в одну строку
Часто бывает, что нам нужно расположить текст или значки в несколько строк, но перенос происходит не в том месте, где бы нам хотелось, оставляя часть строки «висеть» в воздухе.
На самом деле это можно исправить всего одной строкой в CSS. Достаточно добавить text-wrap: balance и перенос будет более равномерным.
Да, не все знают, что это свойство, несмотря на название, работает не только с текстом, но и вообще с любым содержимым, которое можно выравнять таким образом.
Главное, перед использованием проверьте, что свойство поддерживается там, где вы его будете применять.
#совет #css
Читать полностью…
Веб-страница
26 January 2025 16:37
Полезные материалы по веб-разработке
Энтузиаст собрал в одном месте огромную подборку материалов по HTML, CSS, JavaScript, React, а также сервисы и программы, которые пригодятся веб-разработчику. Сохраняйте в закладки, чтобы не потерять.
#подборка
Читать полностью…
Веб-страница
25 January 2025 15:07
Что такое 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
Читать полностью…
26007