CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15
Пример:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
Пример:
sessionStorage.setItem('username', 'John');
console.log(sessionStorage.getItem('username')); // вывод "John"
Пример:
localStorage.setItem('username', 'John');
console.log(localStorage.getItem('username')); // вывод "John"
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤2🤨1
При работе с cookies в JavaScript можно настроить различные атрибуты, которые определяют их поведение.
Эти атрибуты добавляются в строку cookie в виде пар ключ-значение.
Имя и значение определяют данные, которые будут храниться в cookie. Формат выглядит как name=value.
Например, document.cookie = "username=johndoe".
Атрибут expires определяет срок действия cookie. По умолчанию cookie хранятся до закрытия браузера. Чтобы установить конкретную дату истечения срока действия, используйте expires=date.
Например, document.cookie = "username=johndoe; expires=Thu, 31 Dec 2022 23:59:59 GMT".
Атрибут domain указывает на домен, к которому принадлежит cookie. По умолчанию cookie связаны с текущим доменом. Для явного указания домена используйте атрибут domain.
Например, document.cookie = "username=johndoe; domain=example.com".
Атрибут path определяет путь в домене, по которому доступен cookie. По умолчанию cookie доступен для всего домена. Чтобы ограничить cookie определенным путем, укажите атрибут path.
Например, document.cookie = "username=johndoe; path=/admin".
Атрибут secure гарантирует, что cookie передается только через безопасное HTTPS-соединение. Для защиты cookie включите атрибут secure.
Например, document.cookie = "username=johndoe; secure".
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍3
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #js #framework
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10
Поможет прокачать вам свои навыки!
CodeBase | Frontend | #макет
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
CodeBase | Frontend | #webpack
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥4❤🔥3
CodeBase | Frontend | #обучение #sass
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
CodeBase | Frontend | #макет
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15
Благодаря отсутствию классовых компонентов, эти проекты станут отличным введением в функциональное программирование с React и наверняка помогут вам улучшить свои навыки.
Если понравился пост, добавь🔥 🔥 🔥
CodeBase | Frontend | #react #project
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤4
—
npm i lucide
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #icons
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤🔥1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #scss_js
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥5👍3
jsx
import React, { Component } from 'react';
class TimerComponent extends React.Component {
constructor() {
super();
this.state = {
seconds: 0,
};
this.timer = null; // Инициализация таймера
}
// При монтировании компонента, запускаем таймер
componentDidMount() {
this.timer = setInterval(() => {
this.setState({ seconds: this.state.seconds + 1 });
}, 1000); // Обновление каждую секунду (1000 миллисекунд)
}
// При размонтировании компонента, очищаем таймер, чтобы избежать утечки памяти
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<>
<h1>Timer Component</h1>
<p>Прошедшее время: {this.state.seconds} секунд</p>
</>
);
}
}
export default TimerComponent;
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #react_js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3🥴1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #plugins
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3❤1
const [state, setState] = useState(initialState);
Во время инициализации,
state
равно переданному значению initialState
.setState(newState);
При последующих обновлениях, значение
state
, полученное с помощью useState
, отображает текущее состояние после всех обновлений.Функциональные обновления
setState
, которая принимает предыдущее значение и возвращает новое. В примере с компонентом счетчика используются обе формы setState
.function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
</>
);
}
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤🔥3👍1
Она позволяет создавать веб-страницы, где каждый экран представляет собой отдельный полноэкранный слайд, и пользователи могут переходить между этими слайдами путем прокрутки, нажатия стрелок или щелчков мыши.
<!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>
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #js_lib
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥8👍3🔥3❤1🖕1
<!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>
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2🔥1
npm install tamagui @tamagui/config
@tamagui/core
— является библиотекой стилей, расширяющей API стилей React Native с множеством функций из CSS без внешних зависимостей, кроме React.@tamagui/static
— компилятор, который оптимизирует производительность.@tamagui
— обширный универсальный набор компонентов.Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
<!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>
example.png
и отображает его в центре экрана.Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #js_lib
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍2❤🔥1❤1
useLayoutEffect
— это хук в React, который позволяет выполнять побочные эффекты синхронно после того, как все изменения DOM были внесены, но до того, как браузер обновит экран. useEffect
Основное различие между
useEffect
и useLayoutEffect
заключается во времени их выполнения:useEffect
выполняется асинхронно после рендеринга и после того, как браузер обновил экран.useLayoutEffect
выполняется синхронно сразу после всех изменений в DOM, но до того, как браузер нарисует экран. useLayoutEffect
Использование
useLayoutEffect
целесообразно в случаях, когда нужно: 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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤1