CodeBase | Frontend
2.13K subscribers
362 photos
128 videos
2 files
521 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
Please open Telegram to view this post
VIEW IN TELEGRAM
React: современные шаблоны для разработки приложений

Автор: Бэнкс Алекс, Порселло Ева

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

#book#react

Книга

CodeBase | Frontend | #react
Здесь препод из ИТМО и Вышки делится актуальными материалами по программированию, языкам и технологиям.

Основы программирования — ключевые статьи, инсайды индустрии и авторские комментарии помогут тебе понять, как устроен мир IT — всё просто и по делу.

Подписывайся, чтобы быть в теме и разбираться в программировании на уровне: @progcore 👩‍💻
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Что такое Set в JavaScript и как он работает?

Set — это встроенный объект JavaScript, который хранит уникальные значения любого типа. Он полезен для удаления дубликатов из массивов или проверки принадлежности элементов.

➡️ Пример:

const set = new Set([1, 2, 2, 3, 4]);

set.add(5); // Добавление элемента
console.log(set.has(3)); // true (проверка наличия)
set.delete(2); // Удаление элемента
console.log([...set]); // [1, 3, 4, 5] (преобразование в массив)


🗣️ В этом примере Set хранит только уникальные значения и позволяет легко управлять коллекцией. Это полезно для оптимизации работы с массивами и устранения дублирования данных.

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
😱 Вот и всё! Теперь вам не нужно сливать деньги на дорогие курсы по фронтенд-разработке — всё необходимое для обучения доступно совершенно бесплатно!

Всё, что нужно для изучения фронтенда: полное руководство по HTML, CSS, а также практические гайды — @made_in_html_css.

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

Не упустите шанс подписаться на этот уникальный канал — Made in HTML/CSS
Весомые аргументы есть у обеих сторон 😊
©

CodeBase | Frontend | #мем
Привет! Увлекаешься IT?

Приглашаем Вас в наш Telegram-канал Берлога программиста — место, где айтишники отдыхают, как настоящие медведи в своей берлоге.

Залезть в берлогу

Реклама. Магомедов Р.М. ИНН 057105866786.
👩‍💻 Что такое :has() в CSS и как он работает?

:has() — это новый CSS-псевдокласс, который позволяет выбирать элемент, если он содержит определённые дочерние элементы. Его часто называют "псевдоклассом родителя".

➡️ Пример:

<div class="card">
<p>Текст</p>
<button>Нажми меня</button>
</div>
<div class="card">
<p>Только текст</p>
</div>

<style>
.card:has(button) {
border: 2px solid blue; /* Стили для карточек с кнопкой */
}
</style>


🗣️ В этом примере :has(button) выбирает .card, если внутри неё есть кнопка. Это позволяет применять стили на основе содержимого элемента, улучшая контроль над структурой.

CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👨‍💻 Изучай фронтенд по мини-гайдам!

Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript

➡️ Подписывайся на WebTaverna 😮

А также залетай в наш новый канал
🆕 "Фронтенд Заметки", где ты найдешь бесплатные видео-уроки и статьи по HTML, CSS, JS, а также по React.js и Vue.js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Что такое WeakMap в JavaScript и как он работает?

WeakMap — это коллекция для хранения пар ключ-значение, где ключами могут быть только объекты. В отличие от Map, WeakMap позволяет сборщику мусора удалять записи, если на объект-ключ нет других ссылок.

➡️ Пример:

let obj = { name: 'Alice' };
const weakMap = new WeakMap();

weakMap.set(obj, 'Дополнительные данные');
console.log(weakMap.get(obj)); // 'Дополнительные данные'

obj = null; // Ключ становится недоступен, запись удаляется из WeakMap


🗣️ В этом примере WeakMap хранит дополнительные данные для объекта obj. После обнуления ссылки obj запись автоматически удаляется, освобождая память.

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Что такое lazy loading и зачем оно используется на Frontend?

Lazy loading — это техника загрузки ресурсов (например, изображений или скриптов) только тогда, когда они становятся необходимыми. Это ускоряет первоначальную загрузку страницы и экономит трафик.

➡️ Пример:

<img src="placeholder.jpg" data-src="image.jpg" class="lazy" alt="Изображение">

<script>
const lazyImages = document.querySelectorAll('img.lazy');
lazyImages.forEach(img => {
img.src = img.dataset.src;
});
</script>


🗣️ В этом примере изображение загружается только при необходимости, заменяя placeholder.jpg на image.jpg. Lazy loading улучшает производительность и пользовательский опыт на сайтах с большим количеством медиа-контента.

CodeBase | Frontend | #основы
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Что такое свойство filter в CSS и как оно используется?

filter — это CSS-свойство, которое позволяет применять визуальные эффекты, такие как размытие, изменение яркости или насыщенности, к элементам. Это полезно для стилизации изображений, фона и других элементов без использования графических редакторов.

➡️ Пример:

<img src="example.jpg" class="filtered" alt="Изображение с фильтром">

<style>
.filtered {
filter: grayscale(50%) blur(5px); /* Частично чёрно-белое изображение с размытие */
}
</style>


🗣️ В этом примере свойство filter делает изображение частично черно-белым и добавляет размытие. Это упрощает создание визуально сложных эффектов средствами CSS.

CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🌀 Кто просил английский для IT?

🔷 Подписывайтесь на авторский канал -> English - ITnglish
Читайте закрепы.
👩‍💻 Что такое метод filter() в JavaScript и как он используется?

filter() — это метод массивов в JavaScript, который создаёт новый массив, содержащий только те элементы, которые удовлетворяют условию, заданному в функции обратного вызова.

➡️ Пример:

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

// Оставляем только чётные числа
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]


🗣️ В этом примере метод filter() возвращает новый массив, содержащий только чётные числа. Это полезно для фильтрации данных на основе определённых условий.

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Что такое Content Security Policy (CSP) и зачем он нужен?

Content Security Policy (CSP) — это механизм безопасности, который помогает предотвратить выполнение вредоносного кода, такого как XSS-атаки, ограничивая источники, из которых можно загружать контент (скрипты, стили, изображения).

➡️ Пример:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://trusted-scripts.com; object-src 'none';">


🗣️ В этом примере CSP позволяет загружать скрипты только с текущего домена (self) и https://trusted-scripts.com. Все другие источники запрещены. Это снижает вероятность внедрения стороннего кода и повышает безопасность вашего приложения.

CodeBase | Frontend | #основы
Please open Telegram to view this post
VIEW IN TELEGRAM
Как айтишнику выйти из выгорания и вернуть силы что-то делать?

Пол беды, если просто тошнит от работы. Хуже, если пропал интерес вообще ко всему - к хобби, путешествиям, личной жизни.

Выгорание - профессиональная болезнь программистов. И чтобы не потерять доход и бесценные годы, надо научиться с ним справляться.

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

Это must-have для IT-специалистов, у которых периодически опускаются руки и отключается мозг от постоянных переработок и тревожки.

✔️ Научиться расставлять приоритеты и найти время на жизнь
✔️ Избавиться от прокрастинации
✔️ Вернуть себе мотивацию и интерес к работе
✔️ Расставить границы и перестать перерабатывать

Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания и ущерба для личной жизни!