mask: url("../shape.png");
mask-repeat: no-repeat;
mask-size: cover;
mask-position: center;
mask: url("../img/shape.png") center/cover no-repeat;
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10👎1
Итак, самая простая страница:
<html>
<head>
<title>Page title</title>
</head>
<body>
<p>Текст</p>
<button>Click Me</button>
</body>
</html>
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10👎1
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