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

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

20191 @seniorFront

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

  • Senior Frontend - javascript, html, css

    Higher Order Component Компонент высшего порядка - это функция, принимающая компонент и возвращающая новый компонент. Это продвинутая техника, позволяющая повторно использовать логику компонента. HOC не являются частью React API. HOC является паттерном, производным от композиционной природы React. Компонент преобразует пропы в UI, а HOC трансформирует один компонент в другой. Примерами популярных HOC являются методы connect() в Redux и createContainer() в Relay.
     // HOC.js
     import React, { Component } from 'react'
    
     export default function Hoc(HocComponent){
         return class extends Component{
             render(){
                 return (
                     <div>
                       <HocComponent></HocComponent>
                     </div>
                 )
             }
         }
     }
    
     // App.js
     import React, { Component } from 'react'
     import Hoc from './HOC'
    
     class App extends Component {
       render() {
         return (
           <div>
             Пример компонента высшего порядка!
           </div>
         )
       } 
     }
     App = Hoc(App)
     export default App
    
    
    Обратите внимание: Мы не модифицируем компоненты, а создаем новые. HOC используются для композиции компонентов для обеспечения возможности повторного использования кода. HOC являются "чистыми" функциями. Они не имеют побочных эффектов (side effects) и всегда возвращают одинаковые результаты для одних и тех же аргументов. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    CSS controlled Lamp with Range Input Создано без использования JS. Значение из input автор берет из data-атрибута и устанавливает определенные стили, исходя из полученного значения. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Target Date У вас есть определенная сумма денег a0 > 0. Вы вкладываете их под годовой процент p. И вы хотите в итоге получить сумму денег = a >= a0. Напишите функцию, datenbdays, которая принимает параметры a0, a, p и возвращает дату, к которой накопится целевая сумма. Примеры: date_nb_days(100, 101, 0.98) --> "2017-01-01" (366 days) date_nb_days(100, 150, 2.00) --> "2035-12-26" (7299 days) 👉 @seniorFront
  • Реклама

  • Senior Frontend - javascript, html, css

    News App Концептуальное приложение, в котором все переходы осуществляются при помощи свайпов. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

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

    Police vs Taxi В этом видео создается анимированная сцена на чистом CSS. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Escalade Loader Необычный загрузчик, созданный и анимированный на HTML и SCSS. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Squares Квадраты генерируются в JS и анимируются библиотекой gsap. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

  • Senior Frontend - javascript, html, css

  • Senior Frontend - javascript, html, css

    Tab Navigation Menu В этом видео создаются табы, анимируемые при переключении на HTML, CSS и JS. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Как работать с формами в React❓ 🚀Узнайте на открытом уроке 20 февраля в 20:00 мск онлайн-курса «React.js Developer» в OTUS. На занятии вместе с практикующим экспертом мы рассмотрим хорошие практики обработки форм со сложным состоянием. Вебинар «Работа с формами» рассчитан на JavaScript-разработчиков с навыками HTML/CSS, Backend-разработчиков, желающих стать Fullstack и начинающих React-разработчиков. 👉 Пройдите вступительный тест и зарегистрируйтесь на урок https://otus.pw/WHFs/ Реклама. Информация о рекламодателе на сайте otus.ru
  • Senior Frontend - javascript, html, css

    GLSL Glitch Анимация создана в JS с использованием библиотеки THREE.js. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Airplane Mode Animation Самолет анимируется в CSS. Дым за самолетом генерируется и анимируется в JS. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Психология программистов - Программисты думают сложными абстракциями. Просто потому что постоянно работают с ними, а переключаться между способами мышления - затратно. - Все программисты способны к глубокому, длительному трансовому сосредоточению (состоянию потока). Эта способность - и профессиональное показание, и профессиональная деформация. - Всё сущее программисты категоризируют по удобным критериям. То, чему не удаётся дать компактное рабочее определение и разложить по категориям - не существует, потому что с ним невозможно работать.. - Хотите работать с программистом? Выработайте общий разговорный словарь и не лезьте трогать в его психике то, что и так работает. - Программисты - предельно честные реалисты. Написанный код либо работает, либо нет, и никакими словесными реверансами это не изменить. - Если надо, программист вполне способен понять, категоризировать и принять человеческие особенности - просто как ещё одну монструозную операционную систему, работающую на специфическом железе. - Программист чувствует эмоции по-настоящему, но общепринятые способы их выражения для него - не более чем условность, очередной уровень абстракции. 👉 @seniorFront
  • Реклама

  • Senior Frontend - javascript, html, css

    interactive puppy Логика передвижения за курсором и все анимации прописаны в JS, без использования сторонних библиотек. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Хранение значения переменной по ссылке Одним из фундаментальных отличий объектов от примитивных типов данных является то, что они хранятся и копируются «по ссылке». Примитивные типы: строки, числа, логические значения – присваиваются и копируются «по значению». Например: let message = "Hello!"; let phrase = message; В результате мы имеем две независимые переменные, каждая из которых хранит строку "Hello!". Объекты ведут себя иначе. Сам объект хранится где-то в памяти. А в переменной лежит «ссылка» на эту область памяти. Когда переменная объекта копируется – копируется ссылка, сам же объект не дублируется. Если мы представляем объект как ящик, то переменная – это ключ к нему. Копирование переменной дублирует ключ, но не сам ящик. Например: let user = { name: "John" }; let admin = user; // копируется ссылка Теперь у нас есть две переменные, каждая из которых содержит ссылку на один и тот же объект и мы можем использовать любую из переменных для доступа и изменения содержимого.
  • Senior Frontend - javascript, html, css

    Бесплатный интенсив по frontend-разработке Теория — хорошо, а практика — лучше. Станьте frontend-разработчиком на 3 дня. За это время вы создадите сайт с интерактивными элементами и адаптируете его к разным устройствам. А еще: — научитесь выгружать проект на GitHub, чтобы начать формировать портфолио; — узнаете требования работодателей; — пообщаетесь с экспертом и получите подарки; — поймете, подходит ли вам это направление. Интенсив пройдет 15, 16 и 17 февраля в 19:00 (мск). Регистрируйтесь, чтобы не пропустить: https://go.skillfactory.ru/MNBrPg