اکنون در دسترس! پژوهش تلگرام ۲۰۲۵ — مهمترین بینشهای سال 
CodeBase | Frontend
رفتن به کانال در Telegram
Все самое интересное и полезное у нас 😎 Контакт: @Filgood777 (реклама, сотрудничество)
نمایش بیشتر2 011
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-27 روز
-1130 روز
آرشیو پست ها
2 011
⚡️ React.js Cheatsheet – сборник готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.
CodeBase | Frontend
2 011
💻 3 канала для каждого айтишника
✅Заметки Шарписта - дневник начинающего кодера на Csharp
✅ Программистика - авторский канал о программировании на python. В канале найдёшь множество статей, книг и полезных ресурсов, облегчающих работу над кодом.
✅ FreeZnanija - учись беcплатно, множество курсов по ИТ, Информационной Безопасности и программированию.
🫵 Сохрани. С нами ты станешь профи в кодинге
2 011
🐶 The Odin Project
The Odin Project - это бесплатный онлайн-курс, который поможет вам освоить все основные навыки веб-разработки, начиная с HTML и CSS, и заканчивая созданием полноценных веб-приложений.
➡️ Ссылка на проект
CodeBase | Frontend
2 011
⚡️ Ключевое слово
this ⚡️
В JavaScript ссылается на контекст выполнения текущей функции или объекта. Его значение определяется тем, как была вызвана функция, а не тем, где она была объявлена.
➡️ Основные правила определения значения this:
1️⃣ Глобальный контекст (контекст выполнения скрипта): вне какой-либо функции this ссылается на глобальный объект (в браузерах это window, в Node.js — `global`).
console.log(this); // window (в браузере)
2️⃣ Внутри функции: если функция вызывается в глобальном контексте, this также будет ссылаться на глобальный объект.
function foo() {
console.log(this); // window (в браузере)
}
foo();
3️⃣ Методы объекта: если функция вызвана как метод объекта, this ссылается на этот объект.
const obj = {
method: function() {
console.log(this); // obj
}
};
obj.method();
4️⃣ Конструкторы: при вызове функции как конструктора с помощью new, this ссылается на новый экземпляр объекта.
function Person(name) {
this.name = name;
}
const person = new Person('John');
console.log(person.name); // John
5️⃣ call, apply и bind: методы call, apply и bind позволяют явно задать значение this.
function greet() {
console.log(this.name);
}
const person = { name: 'John' };
greet.call(person); // John
6️⃣ Стрелочные функции: у стрелочных функций нет собственного this. Они захватывают значение this из окружающего контекста на момент своего определения.
const obj = {
method: function() {
const arrow = () => console.log(this);
arrow(); // obj
}
};
obj.method();
👀 Значение this может быть сложным для понимания, но понимание контекста вызова функции помогает предсказать, на что будет ссылаться this.
Понравился пост? Добавь 🔥🔥🔥CodeBase | Frontend | #js
2 011
⚡️ ESLintESLint ⚡️
➡️ ESLint обеспечивает проверку кода на наличие синтаксических ошибок и предлагает варианты исправлений.
➡️ Хотя в VS Code есть встроенная система IntelliSense для отображения подсказок, ESLint становится более удобным выбором, особенно если требуются различные настройки для JSX, обычного JavaScript или среды Node.js.
➡️ Линтер также может интегрироваться в систему проверки кода, позволяя убедиться в правильности кода перед отправкой файлов в репозиторий.
🔗 Документация
CodeBase | Frontend | #plugin
2 011
⚡️ Как отобразить сообщение, если JavaScript отключен? ⚡️
🟢 Большинство веб-страниц используют JavaScript, но при его отключении сайт может стать недоступным.
🟢 Некоторые пользователи отключают JavaScript ради безопасности, поэтому важно, чтобы ваша страница работала без него. Проверки должны выполняться на стороне клиента и сервера.
🟢 Если контент не работает без JavaScript, нужно показывать сообщение об ошибке.
1️⃣ Использование HTML тега <noscript>
🔵 Тег
<noscript> отображает альтернативный контент в браузерах без поддержки скриптов или с отключенным JavaScript.
➡️ Пример:
<noscript>
Видео не может проигрываться, так как JavaScript отключен.
</noscript>
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h1>Пример тега noscript</h1>
<noscript>
<h2>JavaScript отключен в вашем веб-браузере. Некоторые функции не будут работать.</h2>
<style type="text/css">
#main-content { display: none; }
</style>
</noscript>
<div id="main-content">
<h2>JavaScript включен!</h2>
</div>
</body>
</html>
<meta> с атрибутом http-equiv="refresh" и атрибутом content, указывающим интервал времени до перенаправления.
➡️ Установив интервал в 0, можно мгновенно перенаправить пользователя:
<noscript>
<meta http-equiv="refresh" content="0;URL=ShowErrorPage.html">
</noscript>2 011
+2
Атишники на месте?
Вам тут канал с мемасами подвезли.
"Умеющим смеяться разгневанный тим-лид не страшен"
Подписаться
2 011
⚡️ Dismantle.js — это библиотека для анализа и модификации исполняемого JavaScript-кода.
🟢 Она предоставляет инструменты для работы с абстрактными синтаксическими деревьями (AST), позволяя разработчикам исследовать и изменять структуру и поведение кода.
➡️ Основные возможности включают:
1️⃣ Разбор кода: Преобразование JavaScript-кода в синтаксическое дерево.
2️⃣ Анализ кода: Изучение элементов кода, таких как переменные, функции и выражения.
3️⃣ Манипуляция кодом: Изменение синтаксического дерева для рефакторинга или оптимизации.
4️⃣ Генерация кода: Преобразование измененного синтаксического дерева обратно в код.
👀 Эта библиотека полезна для создания инструментов разработки, таких как линтеры, форматеры и транспайлеры.
🔗 Установка
Понравился пост? Добавь 🔥🔥🔥CodeBase | Frontend | #js
2 011
⚡️ Cleave.js - это JavaScript библиотека, которая применяется преимущественно для форматирования вводимого текста, обеспечивая плавную работу.
🔵 Она легка в использовании и проста в освоении.
🔗 Документация
Понравился пост? Добавь 🔥🔥🔥CodeBase | Frontend | #js
2 011
⚡️ AFISHA ⚡️
🔵 Сложность: Легкая
🔵 Страницы: Одностраничный
🔵 Язык: русский
🔗 Ссылка на макет
2 011
LLM vs Copilot для написания фронтенда: приглашаем на Usetech FronTalk
Мы быстро и кратко!
18 июля в 19:00 мск приходи пообщаться с Сашей Гончаровым – руководителем отдела Frontend разработки ГК Юзтех, со-автором подкаста “Суровый веб”, и Сашей Малиновским – руководителем практики Angular ГК Юзтех.
В рамках первого выпуска Usetech FronTalk ребята обсудят:
- почему Github и Microsoft нагревают на $100, а потом не работают;
- как локальные LLM нагревают ваши лептопы и десктопы;
- насколько выросла продуктивность и стоило ли оно того?
FronTalk пройдет в прямом эфире на Youtube.
Авторов 5 классных вопросов ждет подарок – знаменитая брендированная уточка ГК Юхтех и стикерпак.
Регистрируйся, ждем тебя!
Реклама. ООО "ЮЗТЕХ ПРОФЕШНЛ". ИНН 7717745183. erid: LjN8KSHBf
2 011
⚡️ Memos - это открытый сервис для создания заметок, который обеспечивает конфиденциальность.
🔵 Реализован с использованием технологий React и Go, позволяя удобно записывать свои мысли.
😀 Для быстрого запуска с помощью Docker:
docker run -d \
--init \
--name memos \
--publish 5230:5230 \
--volume ~/.memos/:/var/opt/memos \
neosmemo/memos:stable2 011
Розыгрыш среди подписчиков канала!
Мы знаем, что помогает разработчикам оставаться в тонусе и создавать качественный код — кофе! И чтобы ваш кофе никогда не остывал, мы решили разыграть кружку, которая будет поддерживать его температуру. А ещё это беспроводная зарядка для ваших смартфонов!
Чтобы принять участие в розыгрыше вам нужно:
1. Подписаться на канал
2. Нажать кнопку «Участвовать»
21.07 в 13:00 бот выберет одного победителя.
Обращаем внимание, что доставка приза победителю абсолютно бесплатна, но возможна только по РФ.
2 011
👩💻 Расширение VS Code: Bookmarks
Bookmarks поможет вам ориентироваться в коде, легко и быстро перемещаясь между важными позициями. Также поддерживается набор команд выделения, позволяющий выделять строки с закладками и области между строками с закладками.
➡️ Ссылка на плагин
CodeBase | Frontend | #плагин
2 011
⚡️
useLayoutEffect — это хук в React, который позволяет выполнять побочные эффекты синхронно после того, как все изменения DOM были внесены, но до того, как браузер обновит экран.
🔵 Это делает его полезным для операций, которые должны произойти до того, как пользователь увидит изменения.
▶️ Сравнение с useEffect
Основное различие между useEffect и useLayoutEffect заключается во времени их выполнения:
🔘 useEffect выполняется асинхронно после рендеринга и после того, как браузер обновил экран.
🔘 useLayoutEffect выполняется синхронно сразу после всех изменений в DOM, но до того, как браузер нарисует экран.
▶️ Когда использовать useLayoutEffect
Использование useLayoutEffect целесообразно в случаях, когда нужно:
🔘 Измерить размеры или позицию DOM-элементов до того, как браузер отрисует изменения.
🔘 Выполнить какие-либо операции, которые могут повлиять на верстку или стиль, и эти изменения должны быть учтены до отображения на экране.
▶️ Пример использования useLayoutEffect
Рассмотрим пример, где мы хотим измерить ширину элемента div сразу после его рендеринга и отобразить эту ширину в элементе:
import React, { useLayoutEffect, useRef, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
if (divRef.current) {
setWidth(divRef.current.offsetWidth);
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '50%' }}>
Resize the window to change my width
</div>
<p>Div width: {width}px</p>
</div>
);
}
export default MeasureDiv;
⚠️ В этом примере:
🔘 Мы используем useRef для получения ссылки на элемент div.
🔘 С помощью useLayoutEffect мы измеряем ширину элемента после его рендеринга, но до того, как браузер обновит экран.
🔘 Ширина сохраняется в состоянии с помощью useState и отображается в абзаце.
Этот подход гарантирует, что ширина элемента будет измерена до того, как пользователь увидит изменения на экране, что может быть критично для некоторых приложений, например, для анимаций или точных расчётов верстки.
▶️ Важные моменты
🔘 Поскольку useLayoutEffect блокирует обновление экрана до завершения эффекта, использование его для длительных операций может привести к задержкам и ухудшению производительности.
🔘 Поэтому рекомендуется использовать useLayoutEffect только тогда, когда это действительно необходимо, а для всех остальных побочных эффектов использовать useEffect.
Понравился пост? Добавь 🔥🔥🔥CodeBase | Frontend | #react_hook
2 011
Ребят, в начале или середине своего пути вам часто нужно искать качественные ресурсы и инструменты для обучения.
⚠️ Это экономит ваше время и помогает сосредоточиться на самом главном — освоении новых знаний и навыков.
Раньше приходилось рыскать по интернету в поисках нужного, но теперь есть специальный канал: @roadmap_ready
Всё собрано в одном месте:
— Html, Css, JavaScript, Php, Java, SQL, C++, C#, Python, Git, Linux, Frontend, Django, Data Scince, GameDev
— Видео с YouTube
— Книги
— Статьи
— Шпаргалки по различным языкам программирования
— Ресурсы (игры/сайты) для обучения
— Курсы
➡️ Подписался, ознакомился и изучил что-то новое из мира технологий.
2 011
⚡️ Pixi.js — это мощная библиотека для рендеринга 2D-графики в браузере.
🔵 Она позволяет разработчикам создавать сложные и производительные анимации и интерактивные приложения с использованием HTML5 и WebGL.
🔵 Pixi.js поддерживает как WebGL, так и Canvas, что позволяет ей работать на разных устройствах и браузерах, обеспечивая высокую производительность.
➡️ Основные особенности Pixi.js:
1️⃣ Высокая производительность: Использование WebGL для рендеринга обеспечивает быстрое и плавное отображение графики.
2️⃣ Кросс-браузерная поддержка: Поддерживает различные браузеры и устройства, автоматически переключаясь на Canvas, если WebGL недоступен.
3️⃣ Легкость использования: Предоставляет удобный и понятный API для работы с графикой и анимацией.
4️⃣ Поддержка различных форматов: Работает с изображениями, спрайтами, текстом, видео и другими форматами мультимедиа.
5️⃣ Расширяемость: Имеет множество плагинов и дополнений, которые расширяют функционал библиотеки.
➡️ Пример простого использования Pixi.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixi.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.8/pixi.min.js"></script>
</head>
<body>
<script>
// Создаем приложение Pixi
let app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);
// Загружаем изображение и создаем спрайт
PIXI.Loader.shared.add('example.png').load((loader, resources) => {
let sprite = new PIXI.Sprite(resources['example.png'].texture);
// Центрируем спрайт
sprite.x = app.view.width / 2;
sprite.y = app.view.height / 2;
sprite.anchor.set(0.5);
// Добавляем спрайт в сцену
app.stage.addChild(sprite);
});
</script>
</body>
</html>
👀 В этом примере создается простое приложение Pixi.js, которое загружает изображение example.png и отображает его в центре экрана.
Понравился пост? Добавь 🔥🔥🔥CodeBase | Frontend | #js_lib
2 011
⚡️ Tamagui - это программное обеспечение с текстовым графическим пользовательским интерфейсом (TUI) для управления устройствами через командную строку, облегчая взаимодействие пользователя с техническими устройствами.
➡️ Для установки используйте:
npm install tamagui @tamagui/config@tamagui/core — является библиотекой стилей, расширяющей API стилей React Native с множеством функций из CSS без внешних зависимостей, кроме React.
🟢 @tamagui/static — компилятор, который оптимизирует производительность.
🟢 @tamagui — обширный универсальный набор компонентов.
🖥 GitHub
💩 Доки
Понравился пост? Добавь 🔥🔥🔥CodeBase | Frontend | #react
2 011
⚡️ Howler.js — это JavaScript-библиотека для работы с аудио в веб-приложениях. Она обеспечивает удобный API для воспроизведения звуков, что позволяет разработчикам легко добавлять аудиоэффекты и музыкальные фоны на свои веб-страницы.
🟣 Howler.js поддерживает все современные форматы аудио и предоставляет дополнительные возможности для управления звуками.
➡️ Основные возможности:
1️⃣ Кроссбраузерная поддержка: Работает в большинстве современных браузеров, обеспечивая совместимость с различными аудиоформатами (MP3, OGG, WAV, AAC и другими).
2️⃣ Управление звуками: Воспроизведение, пауза, остановка, изменение громкости, регулировка скорости воспроизведения.
3️⃣ Поддержка спрайтов: Возможность создания аудиоспрайтов, что позволяет хранить несколько звуков в одном файле и воспроизводить их по частям.
4️⃣ Буферизация: Автоматическая загрузка и кэширование аудиофайлов для плавного воспроизведения.
5️⃣ События: Поддержка событий, таких как начало воспроизведения, завершение, пауза и другие.
6️⃣ Простая интеграция: Легкий API, который позволяет быстро интегрировать аудио в веб-приложения.
➡️ Пример использования:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
</head>
<body>
<button onclick="playSound()">Play Sound</button>
<button onclick="pauseSound()">Pause Sound</button>
<button onclick="stopSound()">Stop Sound</button>
<script>
// Создание объекта Howl для управления звуком
var sound = new Howl({
src: ['path/to/sound.mp3', 'path/to/sound.ogg'],
volume: 0.5,
onplay: function() {
console.log('Sound is playing');
},
onend: function() {
console.log('Sound has ended');
}
});
// Функции управления звуком
function playSound() {
sound.play();
}
function pauseSound() {
sound.pause();
}
function stopSound() {
sound.stop();
}
</script>
</body>
</html>
🟣Этот пример демонстрирует, как создать аудиообъект с помощью howler.js и управлять воспроизведением звука через кнопки. Howler.js является мощным инструментом для добавления аудио в веб-приложения, предлагая множество функций для гибкого и удобного управления звуками.2 011
⚡️ fullPage.js — это JavaScript-библиотека, которая используется для создания полноэкранных прокручивающихся веб-страниц.
Она позволяет создавать веб-страницы, где каждый экран представляет собой отдельный полноэкранный слайд, и пользователи могут переходить между этими слайдами путем прокрутки, нажатия стрелок или щелчков мыши.
➡️ Основные возможности fullPage.js включают:
1️⃣ Полноэкранная прокрутка: Контент отображается по одному слайду на экран.
2️⃣ Навигация: Встроенная навигация по точкам или стрелкам, которая позволяет быстро переходить к нужному слайду.
3️⃣ Мульти-секционные страницы: Возможность создания множества секций и слайдов внутри них.
4️⃣ Анимации переходов: Поддержка различных эффектов переходов между слайдами.
5️⃣ Адаптивность: Поддержка мобильных устройств и возможность адаптировать внешний вид под разные размеры экранов.
6️⃣ Совместимость: Работа с большинством современных браузеров.
➡️ Пример использования fullPage.js может выглядеть так:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<style>
.section {
text-align: center;
font-size: 3em;
color: #fff;
}
#section1 { background-color: #1BBC9B; }
#section2 { background-color: #4BBFC3; }
#section3 { background-color: #7BAABE; }
#section4 { background-color: #f90; }
</style>
</head>
<body>
<div id="fullpage">
<div class="section" id="section1">Section 1</div>
<div class="section" id="section2">Section 2</div>
<div class="section" id="section3">Section 3</div>
<div class="section" id="section4">Section 4</div>
</div>
<script>
new fullpage('#fullpage', {
// Опции конфигурации
autoScrolling: true,
navigation: true,
navigationPosition: 'right',
});
</script>
</body>
</html>
🟡 Этот пример создаст веб-страницу с четырьмя полноэкранными секциями, которые можно прокручивать.
🟡 Библиотека fullPage.js широко используется для создания эффектных и интерактивных одностраничных веб-сайтов.
Понравился пост? Добавь 🔥🔥🔥CodeBase | Frontend | #js_lib
