Обложка канала

Senior Frontend - javascript, html, css. Страница 24

20191 @seniorFront
Открыть

Senior Front - канал для front-end программистов, здесь есть много всего про CSS3, Javascript, Html5, Angular, React, видео / статьи / курсы

  • Senior Frontend - javascript, html, css

    Undo/Redo With :active Clock Animation Вся сцена - это svg картинка, к которой применяются CSS трансформации при нажатии на кнопки. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Parallax Scrolling Website В этом видео создается верстка страницы с эффектом Parallax. Этот эффект создается при помощи Scroll Trigger. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

  • Реклама

  • Senior Frontend - javascript, html, css

    SVG animation Несколько svg картинок, анимируемых в CSS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Birds on a Bezier Создано и анимировано на canvas и JS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Яндекс Практикум выпустил курс по вёрстке для тех, кто хочет уйти во fullstack-разработку из бэкенда. За три месяца вы научитесь писать код на HTML и CSS по современным стандартам и сможете создавать графический интерфейс в дополнение к бэкенду. Вы научитесь — превращать дизайн-макеты в веб-страницы, — создавать сайты под разные устройства, — добавлять визуальные эффекты и сложные анимации с помощью CSS. Учиться предстоит на практике: вы сверстаете многостраничный сайт, сайт с тёмной и светлой темами, ещё 5 проектов для портфолио. → Записаться в первый поток курса

  • Senior Frontend - javascript, html, css

  • Senior Frontend - javascript, html, css

    Animated Login Form В этом видео создается форма входа с эффектом 3D на HTML и CSS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    ⭐ refine Open Source Hackathon ⭐ Build a refine project like CRUD app, admin panel, internal tool, forms, storefront, dashboard, library, data provider, auth provider, live provider, etc. Win $1500 in prizes and also special swag kits from the sponsors! For more detail: https://refine.dev/blog/refine-hackathon/

  • Senior Frontend - javascript, html, css

    Toss Toggle Оригинальный переключатель, анимированный в CSS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Bouncing Text Animation Текст создается при помощи библиотеки Splitting. Анимации реализованы в CSS keyframes. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    🟡Хардкорный тест по JS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 🚀За 4 месяца вы научитесь продвинутым возможностям Redux, Redux-Saga, Redux-thunk; созданию SPA-приложений и оптимизации их для production; чистому и лаконичному коду с TypeScript; применению интеграционных и юнит-тестов; работе в GraphQL, Apollo, Relay. 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS

  • Senior Frontend - javascript, html, css

    ​Ошибки при использовании React По мере того, как React набирает популярность, все больше разработчиков сталкиваются с разнообразными проблемами. Изменение состояния прямым присваиванием значения В React состояние не может напрямую быть назначено или изменено, иначе это вызовет проблемы, которые сложно исправить. 
     updateState = () => {
   this.state.name = "Chris1993";
 }
    В консоли выведется предупреждение: ⚠️ Do not mutate state directly. Use setState(). ✅ Решение: // ClassComponent：используй setState() this.setState({ name: "Chris1993" }); // FunctionComponent：используй useState() const [name, setName] = useState(""); setName("Chris1993"); Привязка состояния напрямую к свойству value инпута ⚠️ Проблема: Если напрямую привязать значение state как параметр к value инпута, то окажется, что чтобы мы не вводили в поле, его value не изменяется. 
     export default function App() {
   const [count, setCount] = useState(0);
   return <input type="text" value={count} />;
 }
    Это произошло потому что мы использовали переменную состояния как значение по умолчанию для параметра value, a value является динамическим значением. Но state в функциональных компонентах может быть изменен только через set метод, возвращаемый useState. Так что решение очень простое — используй set для изменения значения. ✅ Решение: Используй onChange ивент и изменяй значение инпута с помощью setCount. export default function App() { const [count, setCount] = useState(0); const change = (val) => setCount(val.value); return <input type="text" value={count} onChange={change} />; } Забывать очищать побочные эффекты в useEffect ⚠️ Проблема: В классовых компонентах мы используем метод componentWillUnmount() для очистки созданных ресурсов, например, идентификаторов таймеров и обработчиков событий. ✅ Решение: В useEffect() для очистки ресурсов можно использовать возврат функции, что схоже с ролью метода componentWillUnmount() useEffect(() => { // Other Code return () => clearInterval(id); }, [name, age]); 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Rainbolt Создано и анимировано с использованием библиотеки P5.js 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    innerHTML и outerHTML Свойство innerHTML содержит HTML код, который находится внутри этого элемента. При установке нового значения этого свойства, внутренний HTML код рендерится браузером заново. outerHTML почти аналогичен innerHTML, разница в том, что он возвращает полный HTML элемента. Для кода: 
     <div class='outer'> 
     <p class='inner'></p> 
 </div>
    innerHTML возвратит: 
     <p class='inner'></p>
    outerHTML возвратит: <div class='outer'><p class='inner'></p></div> 👉 @seniorFront

  • Реклама

  • Senior Frontend - javascript, html, css

    Interactive ropes background Создано на canvas и JS без использования библиотек. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    String ends with? Вам даны две строки. Создайте функцию, которая определит, заканчивается ли первая строка второй. Примеры: solution('abc', 'bc') // returns true solution('abc', 'd') // returns false 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Live data Демонстрация работы графика с автоматическим обновлением данных, созданного с использованием библиотеки amCharts. 👉 @seniorFront