CodeBase | Frontend
2.14K subscribers
380 photos
149 videos
5 files
566 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
👩‍💻 Как работает свойство position: sticky в CSS?

Свойство position: sticky позволяет элементу переключаться между относительным и фиксированным позиционированием в зависимости от его прокрутки. Оно фиксирует элемент в определённой точке, пока его родительский контейнер находится в пределах видимости.

➡️ Пример:

<div class="container">
<h2 class="sticky-header">Я остаюсь на месте!</h2>
<p>Содержимое...</p>
<p>Содержимое...</p>
<p>Содержимое...</p>
</div>

<style>
.container {
height: 200px;
overflow: auto;
border: 1px solid black;
}

.sticky-header {
position: sticky;
top: 0; /* Фиксирует элемент у верхнего края контейнера */
background-color: lightblue;
padding: 10px;
}
</style>


🗣️ В этом примере заголовок с классом .sticky-header остаётся на месте, пока пользователь прокручивает содержимое контейнера. Как только прокрутка выходит за пределы контейнера, элемент снова становится относительным.

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


CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
MaxSwap — твоя финансовая свобода в мире криптовалют

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

💳Твой виртуальный криптокошелек, который всегда под рукой.

Почему криптодержатели выбирают MaxSwap:

Мгновенная активация карты без лишних вопросов. Просто подключи и пользуйся.

Низкие комиссии. Больше валюты останется у тебя.

Анонимные платежи. Безопасные покупки везде, где бы ты ни оказался.

Управление криптой через Telegram или мобильном приложении. Все в одном месте — удобно и просто.

Открой для себя новые криптовозможности. Открой MaxSwap.
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️3D wave animation — Анимированная галерея с эффектом волны

Технологии: CSS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
⚙️ Что такое свойство z-index в CSS и зачем оно используется?

z-index управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.

Работает только с элементами, у которых задано position (relative, absolute, fixed или sticky).

➡️ Пример:

<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>

<style>
.box {
position: absolute;
width: 200px;
height: 100px;
color: white;
padding: 10px;
}

.box1 {
background: #888;
top: 50px;
left: 50px;
z-index: 1;
}

.box2 {
background: #e74c3c;
top: 80px;
left: 80px;
z-index: 2;
}
</style>


🗣 В этом примере .box2 перекрывает .box1, потому что у неё z-index: 2.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52🔥1
Рассел_С_,_Норвиг_П_Искусственный_интеллект;_современный_подход.pdf
103.6 MB
Искусственный интеллект: современный подход, 4-е издание. Тома 1-3

Год: 2016
Автор: Рассел С., Норвиг П.
Язык: Русский

Самое полное и актуальное введение в теорию и практику искусственного интеллекта!
В четвертом, обновленном, пересмотренном и дополненном издании этой книги область искусственного интеллекта (ИИ) исследуется и анализируется во всей ее обширности и глубине. Здесь представлены все современные достижения и изложены идеи, которые были сформулированы в исследованиях, проводившихся в течение последних пятидесяти лет, а также собраны на протяжении двух тысячелетий в областях знаний, ставших стимулом к развитию ИИ как науки. Предыдущие издания этой книги стали классическими образцами литературы по ИИ и приняты в качестве учебного пособия более чем в 1400 университетах 128 стран мира, где были высоко оценены как убедительный итог обобщения результатов, достигнутых в этой области науки.


#Eng #Ru #Book #AI #ИИ

Программирование
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
🖥 100K юзеров за 3 дня — что сломалось после релиза

Разбор запуска мини-приложения в Telegram: RPS ×10, оптимизация Node.js, борьба с MongoDB и CPU, Grafana, Sentry, Cloudflare. Что сломалось и как починили.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
21👍1
Forwarded from Библиотека Geek_book_Hub 💾 (botposter111)
Он еще пользуется пейджером, а ты еще не подписался на топовые каналы ⚡️⚡️
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Infinitely drawing icons — Интересная анимация загрузки-

Технологии: CSS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
👩‍💻 Что такое метод reduce() в JavaScript и как он используется?

reduce() — это метод массивов, который сворачивает все элементы в одно итоговое значение, проходя по массиву слева направо.

Часто применяется для суммирования, подсчёта, объединения или построения новых структур данных.

➡️ Пример:

const numbers = [1, 2, 3, 4, 5];

// Суммируем элементы
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15


🗣️ В этом примере:

acc — аккумулятор (накапливает результат)
num — текущий элемент массива
0 — начальное значение аккумулятора
• Возвращает одно значение, не изменяя исходный массив

reduce() универсален: им можно считать суммы, группировать объекты, строить словари и даже реализовать методы map / filter "вручную"


CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥1
🖥 Практическое руководство по иконкам в веб-проектах — Часть 1

Разбираюсь, как правильно использовать иконки в вебе: где встраивать SVG, когда подключать шрифты, зачем нужны viewBox и почему alt не спасёт. Примеры, нюансы, всё своё.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2