Веб-страница - Телеграм Каналынын Посттору

Мир сегодня с "Юрий Подоляка"

Карап чыгуу

Труха⚡️Україна

Карап чыгуу

Николаевский Ванёк

Карап чыгуу

Труха⚡️Україна

Карап чыгуу

Николаевский Ванёк

Карап чыгуу

Лёха в Short’ах Long’ует

Карап чыгуу

ВС

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

ВС

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

Кайра бөлүшүлгөн:

Точка входа в программирование

25.02.202520:02

Ликбез про компьютерным сетям 💬

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

Таймкоды:

0:00 - Вступление
0:38 - Зачем знать сети?
1:48 - OSI/ISO - TCP/IP
8:19 - MAC-адрес
9:35 - IP-адрес
10:48 - Порты
11:50 - Маски и подсети
13:34 - Белые и серые подсети
14:41 - NAT network address translation
15:54 - Чем отличается TCP и UDP?
18:03 - Как работает DNS?
19:09 - Траблшутинг
20:34 - О чем не поговорили, но тоже очень важно

#сети #видео

14.02.202507:37

Как правильно работать с DOM в JavaScript в 2025 году?

Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.

1. Получение элементов

Вместо старых getElementById и getElementsByClassName сегодня лучше использовать querySelector и querySelectorAll. Они более универсальные и понятные.

const title = document.querySelector("#title"); // Получает 1 элемент (по id)

querySelector и querySelectorAll позволяют находить элементы так же, как в CSS (.класс, #id, input[type="text"] и т. д.). А также querySelectorAll возвращает не «живую» коллекцию, а обычный статичный список (NodeList), что логичнее при итерации.

2. Изменение текста и HTML

Всё зависит от того, что именно нужно поменять.

textContent — если надо изменить только текст (без HTML).

title.textContent = "Привет, мир!";

Не используйте innerHTML, если вставляете данные от пользователя — это дыра в безопасности (XSS-атаки). Если всё же используется innerHTML, убедитесь, что данные проверены.

title.innerHTML = "

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

title.insertAdjacentHTML("beforeend", "

3. Изменение классов

Правильный способ через classList, потому что `className`заменяет все классы сразу, из-за чего можно случайно удалить важные стили.

title.classList.add("highlight"); // Добавит класс

4. Изменение стилей

Не стоит вручную писать style.cssText, потому что он затирает всё, что было до этого. Используйте style для отдельных свойств.

title.style.color = "red";

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

title.classList.add("error"); // В CSS заранее определите .error { color: red; }

5. Создание и добавление новых элементов

Лучший способ — использовать createElement, а не innerHTML.

const newDiv = document.createElement("div"); // Создаём элемент

Если нужно добавлять элементы в разные места:

appendChild() — добавляет в конец родителя.

prepend() — добавляет в начало.

before() и after() — добавляют перед или после элемента.

title.after(newDiv); // Вставит newDiv сразу после title

6. Удаление элементов

Самый актуальный способ — remove().

newDiv.remove(); // Удалит элемент из DOM

Раньше приходилось делать так (и это было неудобно):

newDiv.parentNode.removeChild(newDiv); // Старый подход

7. Обработчики событий (современный подход)

Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте addEventListener.

const button = document.querySelector("#myButton");

Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.

#простымисловами #фронтенд

09.02.202520:47

Хватит обижать джаваскриптеров!

Вы же наверняка видели, а возможно и участвовали, в этих ~~срачах~~ дискуссиях по поводу того, какой язык лучше. И самыми частыми аргументами против JS являются слабая типизация, «непредсказуемое» поведение при сложении разных типов и прочее подобное.

Но ведь на самом деле всё это есть и в некоторых других языках в том или ином виде. Более того, все эти «недостатки» могут быть и преимуществами в некоторых ситуациях.

Подробнее обо всём этом можно размышляют в коротком, но интересном ролике.

#видео #javascript

24.01.202520:03

22.01.202512:08

Создаём свой индикатор прокрутки на чистом JS + SVG-анимация окружности

Индикатор прогресса чтения статьи сегодня является популярным решением на многих сайтах. В этом видео автор показал, как реализовать такой элемент, а ещё как сделать аналогичный индикатор, но в форме кольца:

https://youtu.be/ScadOMC4Bko

#видео #фронтенд

20.01.202507:30

Пишем свой движок для Flexbox-вёрстки

Предлагаем вам написать свой движок для компоновки элементов с нуля на TypeScript. В результате у вас получится аналог Yoga или Stretch, который вы сможете использовать в своих проектах.

Если заинтересовались, то давайте без лишних слов приступим к делу. Подробности по ссылке:

https://tchayen.com/how-to-write-a-flexbox-layout-engine

#фронтенд #typescript #css

14.02.202517:43

А ваши родители случайно не фронтенд-разработчики? Тогда откуда у них такой стильный Child Node?

К 14 февраля мы с командой сделали бота, который будет отправлять вашим вторым половинкам или просто хорошим людям айтишные и не только комплименты.

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

14.02.202506:31

Динамические layout с Vue jsx: руководство по созданию гибких и удобных в обслуживании пользовательских интерфейсов

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

Динамические layout решают это проблему и упрощают создание адаптивных интерфейсов. Как их создавать и какими особенностями они обладают, рассказали в этой статье.

#vue #фронтенд

05.02.202504:11

Жидкие кнопки для вашего сайта

Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.

Посмотреть код и забрать их к себе в проект можно тут:

https://codepen.io/Zaku/pen/eRmRxz

#codepen #ui #фронтенд

23.01.202519:17

HTTP-запросы: GET, POST и другие

HTTP-запросы — основа взаимодействия между клиентской и серверной частями веб-приложений. В этой статье мы рассказали, как работать с HTTP-запросами в веб-разработке на Node.js, Python и PHP, а также привели примеры на JavaScript с использованием fetch и axios.

#http #api

Кайра бөлүшүлгөн:

Точка входа в программирование

21.01.202520:34

Пример инди-стартапа для чтения книг в оригинале. Что думаете?

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

Посмотреть на то, что у него получилось и узнать, с какими сложностями он столкнулся можно в его статье.

#петпроект #веб

19.01.202520:01

Будущее микросервисов: уйдем ли мы к монолитам 2.0

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

Автор же этой статьи предлагает не сравнивать их друг с другом, начиная очередной спор, а рассмотреть концепцию монолитов 2.0, узнать, что за ней стоит и почему компании возвращаются к упрощению.

#микросервисы

14.02.202516:14

Выражаем свои чувства на языке LoveScript

Ребята из команды поиска и рекламных технологий Яндекса запустили спецпроект «День программиста Валентина», в котором валентинку можно сделать своими руками.

Вы можете написать код на LoveScript — специальном языке программирования для выражения тёплых и романтических чувств, и получить открытку, которую можно сохранить и поделиться с близкими.

Есть и более простой мод — выбирайте сообщение, фон и цвет вручную и получайте свой уникальный результат.

С днём программиста Валентина!

Это #партнёрский пост

13.02.202519:11

Frontend Stuff

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

#инструменты #фронтенд #github

25.01.202514:07

Что такое innerHTML и почему иногда его лучше не использовать

innerHTML — это встроенное свойство в JavaScript, которое позволяет работать с содержимым HTML-элементов. Проще говоря, с его помощью можно получить или изменить всё, что находится внутри HTML-тега. Это включает текст, другие теги, атрибуты и так далее.

Пример:

// Берём элемент

Теперь в появится Привет, я новый текст!. Всё, что ранее было внутри тега (если что-то было), заменяется.

Чем удобен innerHTML

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

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

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

Почему же тогда в некоторых случаях лучше НЕ использовать 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

Медиа контентке кире албай жатабыз

23.01.202507:26

Стильная анимация кнопки поиска для вашего сайта

Сделана с помощью классического стека HTML + CSS (SCSS) + JS, поэтому может быть использована вами в любом проекте без установки дополнительных библиотек.

Посмотреть код можно на странице проекта.

#codepen #фронтенд

21.01.202512:38

Эти ребята явно шарят в IT, не так ли?

18.01.202519:38

Крутая анимация перехода с перспективой при скролле

Отличный пример создания красивого перехода. Эффект достигается за счёт увеличения изображений и грамотной работы со слоями. Сделан с помощью библиотеки GSAP.

Посмотреть код можно тут: https://codepen.io/GreenSock/pen/YzbPYMx

#codepen

14.02.202511:00

Челлендж по запуску 12 простых IT-проектов за 12 месяцев

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

И в реальном времени показывать: как разрабатывают, продвигают и сколько получилось заработать на запусках таких микро-проектов. Держите подборку их кейсов:

— пост про то, почему американцы платят $40 за простой конвертер картинок, который сделали за 4 недели, несмотря на обилие бесплатных аналогов.

— пост про то, как за 2 недели запустили темную тему с тарифами от $5 до $99. Четыре таких продукта приносят на пассиве как ЗП среднего разработчика.

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

— пост про то, как заработали 1,7 млн рублей на боте для создания фотокниг и какие фейлы допустили.

Первая находка в их комьюнити IT-билдеров — метод, который позволяет сделать запуск за 1 месяц.

Вторая находка — метод продвижения, который они используют. В среднем на продвижение одного IT-продукта уходит $150, причем есть продукты с 200К+ юзеров.

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

Реклама. Рекламодатель: ИП Зуев Игорь Владимирович ИНН 360408359441, erid: 2W5zFJ6HzCG

10.02.202519:05

Напоминание, что @scope и блоки стилей HTML — это мощное сочетание

Кто понял, тот понял. А кто всё ещё не может разобраться о чём идёт речь и что это за @scope вообще такой, то скорее переходите по ссылке и читайте подробности этого подхода стилизации HTML-элементов.

#фронтенд #html #css

Кайра бөлүшүлгөн:

Точка входа в программирование

24.01.202523:04

В какую сторону развивается Vue и есть ли ему современные альтернативы

Vue.js входит в топ наиболее популярных инструментов веб-разработки. В числе основных плюсов — доступность, простая архитектура, высокая производительность и гибкие настройки.

Но ему уже более 10 лет. А для IT-продукта это большой срок, за который появились другие проекты. В этой статье мы решили разобраться, есть ли альтернативы у фреймворка, каковы его особенности и преимущества, и как использовать Vue.js с максимальной эффективностью.

#vue

22.01.202520:57

Перестаньте молиться на принципы S.O.L.I.D.

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

В связи с этим возникает парадокс: принципы SOLID крайне важны, но каждый понимает их по-своему. Получается, что это уже не какая-то одна концепция, а множество разных под одним названием. Автор сегодняшней статьи предлагает пересмотреть отношение к этим принципам, взглянуть на них свяжим взглядом и, возможно, даже отказать от них. Подробнее: https://habr.com/ru/articles/874584/

#solid

20.01.202519:47

Как работает псевдокласс :has() в CSS

Псевдокласс :has — это мощный инструмент в CSS, который позволяет выбирать элементы, основываясь на их содержимом или дочерних элементах. Другими словами, он даёт возможность стилизовать элементы на основе контекста внутри них, чего раньше невозможно было сделать только средствами CSS.

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

element:has(selector) выбирает элемент, который содержит определённого потомка или соответствует указанному селектору.

/* Выбрать карточки, содержащие кнопку */

Здесь будут выделены только те .card, внутри которых есть .

Зачем он нужен?

1. Работа с родительскими элементами. Например, стилизовать , если внутри него есть конкретный элемент.

2. Условное форматирование. Например, вы можете выбрать контейнеры, в которых есть определённое состояние, например, отмеченный чекбокс.

/* Стилизовать родительский div, если внутри есть отмеченный чекбокс */

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

Кайра бөлүшүлгөн:

Типичный программист

18.01.202512:09

Как парсить сайты в обход защиты от парсинга?

На некоторых сайтах работает защита от парсинга и работы ботов с ним. Но есть способы, которые позволяют обойти её и всё-таки добраться до содержимного веб-страниц.

На Хабре есть неплохой гайд. Делимся с вами: https://habr.com/ru/post/710982/

#linux #html #javascript #сsharp

Көрсөтүлдү 1 - 24 ичинде 120

Көбүрөөк функцияларды ачуу үчүн кириңиз.

Цитаталар