div {
position: absolute;
inset: 0;
}
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍4
При этом можно указать:
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍3⚡1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #js #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Система автоматической генерации случайных CAPTCHA с проверкой корректности введенного кода.
Технологии: HTML, CSS, JS
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
React-animations — это библиотека, основанная на анимациях из animate.css. Она легко осваивается и предлагает большое количество анимаций.
React-animations совместима с любыми inline-style библиотеками, которые поддерживают определение ключевых кадров анимации через объекты, такими как Radium, Aphrodite или styled-components.
Теперь давайте разберём, как это работает на примере анимации подпрыгивания.
const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;
<Bounce><h1>Hello Animation Bounce</h1></Bounce>
import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';
const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;
export default class ReactAnimations extends Component {
render() {
return (
<Bounce><h1>Hello Animation Bounce</h1></Bounce>
);
}
}
Анимация успешно работает, она проста и легко настраивается.
Для использования анимации при прокрутке можно воспользоваться отличным решением — библиотекой react-animate-on-scroll.
CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3❤1
Bluefish — это многофункциональный редактор кода.
Обладает рядом полезных функций:
CodeBase | Frontend | #ide
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1👎1🤔1
Начинающие фронтендеры всегда ищут дизайны для отработки своих навыков работы. Мы нашли несколько удивительных бесплатных дизайнов пользовательского интерфейса от талантливых и потрясающих дизайнеров из сообщества Figma.
1. Красивые разделы целевой страницы для стартап-приложения
2. Минималистичный дизайн портфолио
3. Дизайн приложения для доставки еды
4. Лендинг VPN-сервиса
5. Сайт архитекторов
Если было полезно, сохраняй и оставляй реакции🔥
CodeBase | Frontend | #templates
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Выбор элементов на основе их содержимого с использованием псевдокласса :has() открывает возможности изменения стилей элементов в зависимости от наличия определенных дочерних элементов или других условий в их содержимом.
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2
Тематика: IT, музыка
Страницы: многостраничный
CodeBase | Frontend | #figma
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6⚡1
console.log('Первое сообщение');
setTimeout(() => {
console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');
setTimeout
, сообщения будут выведены в порядке:Первое сообщение
Второе сообщение
Сообщение из setTimeout
setTimeout
помещается в очередь и будет выполнен после завершения текущего кода в стеке вызовов. Event Loop позволяет выполнять асинхронные операции, сохраняя отзывчивость и эффективность веб-приложений.Если понравился пост, обязательно добавь
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12❤2👍1
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 5]
for (let i = 0; i < array.length; i++){
console.log(i);
}
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // [0, 1, 2, 3]
Если понравился пост, добавь
И, мы обязательно разберем данный вопрос подробнее!
CodeBase | Frontend |#js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, SCSS, TS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍3
CodeBase | Frontend | #ide
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, SCSS, TS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
CodeBase | Frontend | #Stylus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, CSS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥6❤2
Псевдокласс
:empty
используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста.🗣 В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента.
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥1
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, SCSS, TypeScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками:
new String()
:const primitive = 'приветики'
const str = new String('приветики')
trim()
Для множественных замен и поиска удобнее всего пользоваться регулярными выражениями, но это отдельный микроязык, который нужно учить.
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1