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

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

20191 @seniorFront

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

  • Senior Frontend - javascript, html, css

    Landing page with swiper Вёрстка на HTML и SCSS. Карусель создана при помощи библиотеки swiper. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    5 разочарований программиста Постоянная учеба Скорость прогресса так высока, что вам придется учиться, чтобы просто успевать за остальными. Каждый месяц появляются новые фреймворки, постоянно создаются и внедряются новые языки программирования и если вы не будете обновлять свои знания, в будущем просто не найдете хорошую работу. Легкость трудоустройства Есть множество факторов, которые не относятся напрямую к вашим знаниям, но влияют на трудоустройство. Некомпетентные HR-менеджеры — еще одна потенциальная проблема. Их внутренние предрассудки и общая политика компании могут создать для вас непреодолимую стену, даже если на место нет конкуренции. Интересная работа Многие идут в программирование, потому что видят красочные приложения, анимированные веб-сайты, игры. Но за каждой популярной программой стоит работа десятков специалистов, тысячи строк кода, не имеющих визуального воплощения. Именно поэтому новички могут разочароваться в профессии. Безвредное производство Программист не разгружает вагоны, но его спина страдает из-за сидячего образа жизни, а суставы — из-за малой подвижности. Программист не выискивает опечатки в многотомных договорах, но портит зрение при работе с кодом. Отладка Огромное количество времени программисты проводят, пытаясь разобраться как код работает, а не пишут его. Они смотрят на код, полный ошибок, хватаются за голову и пытаются придумать костыль,который,возможно, поможет. Что делает разочарование в коде особенно невыносимым, так это то, что вы не знаете, как долго оно продлится. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Вы фронтендер и ещё не слышали об Astro?    Это фреймворк, который стремительно набирает популярность и конкурирует с популярным NextJS. Он ориентирован на производительность сайта, а ещё с ним можно использовать любую библиотеку: React, Vue, Angular и другие.   Дмитрий Безуглый (8+ лет опыта в Яндекс, VK и Frogly) решил разобраться, чем же так хорош Astro, поэтому ничего не планируйте на 8 июня — будем строить приложение в прямом эфире!    Поговорим об основных концепциях фреймворка, его архитектурных паттернах и подходах, которые позволяют достичь такой оптимизации.    Встречаемся 8 июня в 19:00 (GMT+3) Не забудьте зарегистрироваться!
  • Реклама

  • Senior Frontend - javascript, html, css

    Animated Button Кнопка анимируется в CSS. При завершении анимации создаются частицы на canvas. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Что такое generics в TypeScript и каковы их преимущества? Дженерики (generic) помогают писать универсальный, переиспользуемый код, а также в некоторых случаях позволяют отказаться от any. Главная задача дженериков — помочь разработчику писать код, который одинаково будет работать со значениями разных типов. Суть дженериков Если мы напишем функцию и жёстко зададим тип, то она сможет работать только со значениями этого типа. Значения других типов передать не получится. Есть два способа это поправить. Первый способ. Написать несколько одинаковых функций, которые работают с разными типами. Например, такая функция проверяет, есть ли в массиве конкретный элемент.
     function includeStr(array: string[], query:string): boolean {
      // на входе массив и строка для поиска
      for (const value of array) {
        // перебираем массив
        if (value === query) {
          // если в массиве есть элемент — возвращаем true
          return true;
        }
      }
      // если ничего не нашлось, возвращаем false
        return false;
     }
    
    Функция будет отлично работать на массивах из строк. Но для поиска в массиве из чисел придётся дублировать функцию, менять типы, но сам код функции останется неизменным. Например:
     function includeNumber(array: number[], query:number): boolean {
      // всё то же самое, только на входе числа
      for (const value of array) {
        if (value === query) {
          return true;
        }
      }
      return false;
     }
    
    Вот тут на помощь и приходят дженерики. Они помогают написать код, который одинаково работает с данными разных типов. ❌ Пишем много функций для разных типов ✅ Объявляем в функции параметр типа, а потом передаём через него нужный тип Вместо конкретного типа, мы как будто объявляем «переменную», а затем передаём в неё нужный тип. Таким образом, получается код, который может работать с разными типами: function include<T>(array: T[], query:T): boolean { for (const value of array) { if (value === query) { return true; } } return false; } 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Wobble Toggle Это svg картинка, анимируемая библиотекой gsap. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Простая математика Вам дана строка, содержащая цифры и математические операторы (plus и minus). Вам нужно произвести математические операции и вернуть результат. Примеры: "1plus2plus3plus4" --> "10" "1plus2plus3minus4" --> "2" 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    🍕 Pizza Loader 🍕 Индикатор загрузки в виде пиццы, созданный из svg. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Modern CSS Button Hover Effects В этом видео создается несколько оригинальных эффектов при наведении на кнопку. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Menu css Создано с использованием препроцессоров Sass и Slim 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    SVG Drip Loader Оригинальный загрузчик, сделанный из svg картинки. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

  • Senior Frontend - javascript, html, css

    Change Cursor on Hover В этом видео автор изменяет курсор пользователя. Для этого он создает div, к которому задает позицию, зависящую от реального положения курсора пользователя. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Начните путь в фулстек-разработку. Освойте навыки фронтенд- и бэкенд-разработчика на одном курсе — с Яндекс Практикумом. После курса выпускники смогут разрабатывать веб-приложения целиком: фронтенд и бэкенд. За 18 месяцев вы научитесь создавать интерфейс, и настраивать то, что «под капотом» — механику действий, хранение данных и так далее. А это в два раза больше карьерных возможностей, чем у фронтендеров и бэкендеров. Обучение подходит для новичков, которые ещё не пробовали писать код, — мы поможем понять принципы программирования в первых модулях. Вот что будет на курсе ◾️ Программа 2023 года и самые актуальные технологии. ◾️ HTML, CSS, JavaScript, TypeScript, React, Node.js, Docker и алгоритмы. ◾️ Лайвкодинг, реальные проекты для НКО и бизнеса в добавок к учебным. ◾️ Карьерная поддержка: резюме, портфолио, собеседования. → Попробуйте курс бесплатно
  • Senior Frontend - javascript, html, css

    CSS Dots wave Создано и анимировано с использованием возможностей препроцессора SCSS. 👉 @seniorFront
  • Реклама

  • Senior Frontend - javascript, html, css

    Flowerpot Slider 🌼🌼 Необычный слайдер, сделанный из svg картинки, анимированной библиотекой gsap. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Как реализуется ООП в JavaScript? JavaScript поддерживает объектно-ориентированное программирование, и многие из его функций и методов основаны на этом принципе. ООП в JavaScript основан на прототипах, а не на классах. Каждый объект имеет прототип, который является ссылкой на другой объект. Когда вы обращаетесь к свойству или методу объекта, JS ищет его в самом объекте, а затем в его прототипе, и так далее, пока не найдет нужный элемент или не достигнет конца цепочки прототипов. Наследование осуществляетсяn также через прототипы. Когда вы создаете новый объект, вы можете указать его прототип, который будет использоваться для наследования свойств и методов. Вы также можете создавать новые объекты на основе существующих объектов с помощью метода Object.create(). JavaScript также поддерживает конструкторы, которые позволяют создавать объекты с помощью функций-конструкторов. Конструкторы могут использоваться для создания объектов с определенными свойствами и методами. 👉 @seniorFront
  • Senior Frontend - javascript, html, css

    Infinite loading Вёрстка создана с использованием препроцессоров Pug и SCSS. Анимация реализована в JS. 👉 @seniorFront