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

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
🖥 ChatGPT vs Гик. Сможет ли AI заменить опытного верстальщика?

Автор проверяет, сможет ли ChatGPT сверстать как человек. Он даёт ИИ популярные паттерны и смотрит — пойдет ли такой код в прод. Спойлер: местами смешно.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Bouncy image radio group — Галерея с плавной анимацией при переключении

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

🔗 Ссылка

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

position: sticky фиксирует элемент внутри его родителя, когда он достигает определённого положения при прокрутке.

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

➡️ Пример:

<div class="section">
<h2 class="sticky-title">Заголовок</h2>
<p>Контент...</p>
</div>

<style>
.section {
height: 1500px;
padding: 20px;
}

.sticky-title {
position: sticky;
top: 0;
background: white;
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>


🗣 В этом примере заголовок "прилипает" к верхней части экрана при прокрутке, но только в пределах родительского блока .section.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Автоматический HTTPS для ленивых: ACME + Angie один раз и навсегда

Автор объясняет, как в Angie настроить ACME‑челлендж через DNS для получения wildcard‑сертификатов, не превращая процесс в квест для DevOps-гениев. Всё разжёвано до последнего байта.

🔗 Ссылка

CodeBase | Frontend | #article
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Text-Animation-test — Простая сцена с анимированным текстом

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

🔗 Ссылка

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

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

➡️ Пример:

const users = ["Анна", "Борис", "Вера"];

users.forEach((user, index) => {
console.log(`${index + 1}. Привет, ${user}!`);
});

1. Привет, Анна!
2. Привет, Борис!
3. Привет, Вера!


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

forEach() перебирает массив
• Удобен для вывода в консоль, вызова функций, работы с DOM
• Не изменяет оригинальный массив и не возвращает новый

CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM