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

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

20191 @seniorFront
Открыть

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

  • Senior Frontend - javascript, html, css

    Rolling Theme Switch Переключатель в виде svg картинки, стилизованной в CSS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    CSS Particle Effects Частицы создаются в JS и анимируются в SCSS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    ​Почему всем нужна обратная связь Зачем нужен фидбэк: Обучение. Наиболее успешными становятся специалисты, умеющие быстро учиться и адаптироваться к переменам. Помогает им это делать обратная связь. Развитие. Для IT-специалиста обратная связь — неизбежный, обязательный инструмент для роста внутри команды. Благодаря обратной связи успешный разработчик растёт и личностно, и профессионально. Взаимодействие по процессам. Сотрудничество на разных проектах, в том числе в рамках аутстафа и аутсорса, прокачивает способность быстро перестраиваться и коммуницировать с разными командами. Как запрашивать обратную связь: У работодателя после отказа. Работодатели опасаются, что кандидат излишне эмоционально реагирует, поэтому даёт стандартный ответ «Спасибо, мы остановились на другом кандидате» вместо полезной обратной связи. Как действуем: Лучше писать персональные сообщения рекрутерам. Объясните, что вам действительно важен фидбэк, чтобы поработать над пробелами и податься на вакансию снова. У тимлида. Если что-то не получается в работе, то первый, к кому стоит обратиться за фидбэком, это тимлид. Но желательно приходить не только с проблемой, но и с собственными вариантами решения. Как действуем: Подходим к тимлиду с таким вариантом вопроса, чтобы он мог выбрать ответ за несколько секунд. Прелесть этого подхода в том, что часто ответ находится ещё на этапе формулирования вопроса. У ментора. Если в команде нет подходящего человека, можно обратиться к внешнему наставнику. Но нужно учесть, что ментор будет вне контекста. Чтобы он смог помочь, нужно быть максимально открытым. У приятеля. Когда опыт запроса фидбэка ещё невелик, рекомендуют развивать его с помощью людей, которым вы доверяете. Это может быть близкий коллега. 👉 @seniorFront

  • Реклама

  • Senior Frontend - javascript, html, css

    CSS Emoting Eyes Вёрстка реализована при помощи препроцессоров Pug и SCSS. Параметры состояний задаются в JS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    ​Что такое прогрессивный рендеринг (progressive rendering)? Чтобы понять что такое progressive rendering, нужно понимать отличие client-side rendering от server-side rendering. При client-side rendering (CSR) контент отрисовывается на стороне клиента (в браузере). Такой подход используется в React, когда браузеру отсылается практически пустой HTML-документ, а потом запускается скрипт, который генерирует HTML в указанном скрипту теге. Как правило это <div id="root">. Пользователь будет видеть пустую страницу, пока JS-файл полностью не загрузится. При server-side rendering (SSR) HTML-разметка генерируется на сервере, отсылается браузеру и после этого отрисовывается на клиенте. Пользователь увидит контент сразу же, но не сможет взаимодействовать со страницей, пока не загрузится JS-файл. При использовании прогрессивного рендеринга, кусочки HTML генерируется на сервере и отсылаются браузеру в порядке их приоритетности. То есть, элементы с самым высоким приоритетом (например <header>, фон, главная интерактивная часть страницы) генерируются на сервере, отсылаются браузеру и отрисовываются в первую очередь. Это позволяет пользователю увидеть самый важный контент как можно скорее, не дожидаясь полной загрузки всего контента. То есть, progressive rendering что-то среднее между client-side rendering и server-side rendering. Техники реализации прогрессивного рендеринга: Ленивая загрузка (Lazy Loading). Загрузка контента по мере необходимости. Например, если страница достаточно большая, не нужно загружать изображения вне вьюпорта. Загрузка изображения стартует за некоторое время до того как она появится во вьюпорте. Эту же технику можно использовать для загрузки контента изначально скрытых элементов. Например, можно загрузить контент закрытого меню когда пользователь наводит курсор на кнопку открытия. Приоритизация контента. Например, не загружать изначально все CSS-стили. Добавлять в <head> загрузку только тех стилей, которые нужны для текущей видимой области HTML-документа. Остальные стили можно добавить в <body>. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    👨‍💻 Как выстроить CI/CD-пайплайн? Мы написали статью, где подробно рассказали об этом! Французский архитектор Ле Корбюзье позавидовал бы архитектуре приложений созданных с помощью serverless-продуктов Yandex Cloud и GitLab CI. Вы узнаете, как реализовать в приложении несколько условий, чем полезна push-модель и увидите наглядный пример serverless-приложения. Статья будет особенно полезна backend- и frontend-разработчикам, архитекторам, DevOps или владельцам стартапов. Бонус самым внимательным: пошаговая инструкция по построению CI/CD-пайплайна в определённом месте статьи 👀

  • Senior Frontend - javascript, html, css

    Navigation PageDesign Вёрстка создана на Pug и CSS. Логика переключения табов реализована в JS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Sort and Star Вам дан массив строк. Отсортируйте их в алфавитном порядке и верните первую строку. Между каждой буквой в возвращенной строке должны быть "***" Пример: twoSort(["bitcoin", "take", "over", "the", "world", "maybe", "who", "knows", "perhaps"]) результат 'b***i***t***c***o***i***n' 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Selective Color Effect Создано при помощи CSS filters. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Magnetic Hover Effects on mouseMove В этом видео создается эффект примагничивания элемента к курсору пользователя в JS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

  • Senior Frontend - javascript, html, css

    CSS Testimonials Slider При выборе определенной радио кнопки задействуются свои CSS стили. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    💊 SVG Pill 💊 Это svg картинка, анимированная при помощи тега animateTransform . 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Sidebar Interaction Компонент, созданный на React и стилизованный в SCSS. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

  • Реклама

  • Senior Frontend - javascript, html, css

    Show Hide Password with Floating Input Placeholder В этом видео создается анимированное поле ввода пароля с возможностью скрыть символы. 👉 @seniorFront

  • Senior Frontend - javascript, html, css

    Анонсируем дни любви к фронтенду 💛 С 10 по 17 июня в пятый раз пройдет наша большая конференция «Я 💛 Фронтенд» 2023, где мы обсудим новости веба и дизайна, поделимся опытом и посмотрим на хороший код. Всю неделю вас ожидают онлайн-доклады, трансляции и воркшопы, а закончится всё большой офлайн-встречей сразу в нескольких локациях: в Москве и Ереване. Принять участие в ней можно будет и в онлайн-формате. Кроме докладов, по традиции мы проводим CTF (Capture the Flag) — игровой фронтендерский турнир из нескольких заданий, который начнётся уже 10 июня. Смотрите, как это было в прошлом году. Полную программу «Я 💛 Фронтенд» можно посмотреть на лендинге. Регистрируйтесь до 7 июня, чтобы попасть в офлайн и быть в курсе всех активностей. А ещё приходите в наш чат — там будет много полезного.

  • Senior Frontend - javascript, html, css

    CSS Night Train Ride Animation Создано с использованием препроцессоров Pug и SCSS. 👉 @seniorFront