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

Frontend Головного Мозга. Страница 21

12111 @frontend_mind
Открыть

Настоящий клондайк для frontend-разработчиков.

  • Frontend Головного Мозга

    Интерактивная галерея, выполненная с помощью Pug и чистого CSS, без использования JavaScript #codepen #css #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    ✨Топ JavaScript-библиотек для анимации 👉 Anime — Позволяет добавлять анимации свойств CSS, атрибутов SVG и DOMю Позволяет контролировать направление, скорость и порядок движения объектов. 👉 GSAP — Обеспечивает плавную работу анимации в современных веб-браузерах, связывая множество свойств анимации. Библиотека основана на мощном и быстром ядре. 👉 Vivus — Библиотека для работы с SVG. Анимирует элементы в том порядке, в котором они определены в SVG. 👉 Popmotion — Поддерживает ключевые кадры, пружинные и инерционные анимации. Написана на TypeScript. Каждая функция импортируется по отдельности. 👉 Typed.js — Используется для анимации набора текста. Строки, которые нужно анимировать, можно передать в виде массива. Предоставляет множество параметров для настройки анимации. 👉 Lottie — Визуализирует анимацию After Effects в браузере с помощью нескольких строк кода и глобальных параметров. А какими сервисами пользуетесь вы? Напишите в комментариях👇 #полезно #подборки_инструментов 👉 @frontend_mind

  • Frontend Головного Мозга

    Настраиваемая кнопка, выполненная с помощью SCSS и JavaScript #codepen #scss #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Реклама

  • Frontend Головного Мозга

    Chart.js — Библиотека для создания диаграмм Позволяет добавлять настраиваемые диаграммы на веб-сайт. Особенности / преимущества: ✔️Возможность добавить анимацию ✔️Перерисовывает графики при изменении размера окна ✔️8 типов диаграмм ✔️Высокая производительность рендеринга в современных браузерах Сайт: https://www.chartjs.org/ Гит: https://github.com/chartjs/Chart.js #библиотеки #полезно #js 👉 @frontend_mind

  • Frontend Головного Мозга

    Анимированные иконки погоды, выполненные с помощью SVG и SCSS, без использования JavaScript #codepen #scss #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    Виды веб-приложений Есть 2 основных подхода организации работы приложения: многостраничные приложения и Single Page Applications (SPA), каждый из них делится на подвиды. Многостраничные приложения состоят из набора статичных страниц. Их просто разрабатывать, но если страниц становится много (сотни и тысячи), или данные на странице меняются, то придётся генерировать их на лету. 👉 Готовые веб-страницы 👉 Динамическая генерация HTML Одностраничные приложения (SPA) дают возможность разрабатывать клиентские приложения со сложной логикой. Переходы между экранами будут мгновенными, и пользователь сразу увидит результат своих действий. 👉 Client Side Rendering (CSR) 👉 Server side rendering (SSR) 👉 Static site generation (SSG) Progressive Web Applications (PWA) Набор технологий, который позволяет превратить сайт в полноценное приложение. Эта трансформация позволяет веб-приложениям функционировать почти как нативные, например, работать в офлайне. 👉 Читать статью полностью #статья #js 👉 @frontend_mind

  • Frontend Головного Мозга

    В метавселенных можно работать, общаться и даже посещать концерты — все это виртуально 💫 Для чего еще нужны метавселенные и какие возможности они откроют в будущем? Узнайте в финальном выпуске первого сезона подкаста «ZIP. Архив техногенного мира» от команды Газпромбанка. Слушайте и делитесь > https://vk.cc/cek3v1

  • Frontend Головного Мозга

    Сетка с отслеживанием положения курсора, выполненная с помощью Pug, SCSS и JavaScript #codepen #scss #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    SonarLint — Плагин для предотвращения проблем с кодом Выделяет ошибки и уязвимости при написании кода. Также выдает инструкции по исправлению ошибок. Особенности: 👉 Открытый исходный код 👉 Доступен для VS Code, JetBrains, Eclipse и Visual Studio 👉 Поддержка Java, JS, PHP, HTML, C++, TS и т.д 👉 Выделение всех проблемных мест в вашей кодовой базе Сайт: https://www.sonarlint.org/ Гит: https://github.com/SonarSource/sonarlint-core #полезно #инструменты 👉 @frontend_mind

  • Frontend Головного Мозга

    Анимированная сцена, выполненная с помощью чистого CSS и SVG #codepen #css #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    Решение задачи "Слияние строк" #codewars #легко #js #ответы #48kata 👉 @frontend_mind

  • Frontend Головного Мозга

    Слияние строк В этом задании необходимо написать алгоритм для проверки того, может ли заданная строка s быть составлена из двух других строк, part1 и part2. isMerge(s, part1, part2). Пример: 
    isMerge('xcyc', 'xc', 'yc') - вернёт true

isMerge('codewars', 'cdwr', 'oeas') - вернёт true

isMerge('More progress', 'More ess', 'pro') - вернёт false

isMerge('codewars', 'cdwr', 'oeas') - вернёт true

isMerge('codewars', 'code', 'code') - вернёт false
    Cимволы в частях part1 и part2 должны быть в том же порядке, что и в s. ===Решать задачу на Codewars=== 📌 Пишите ваше решение в комментариях. Решение будет через несколько часов на этом канале. 👇 #codewars #легко #js #48kata 👉 @frontend_mind

  • Frontend Головного Мозга

    Super Mario, выполненный с помощью SCSS и JavaScript. Управление осуществляется с помощью клавиатуры #codepen #scss #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Frontend Головного Мозга

    Html5sortable — Библиотека для создания сортируемых списков Позволяет создавать сортируемые списки с поддержкой drag-and-drop. Особенности / преимущества: ✔️Небольшой вес (2,5 kB) ✔️Поддержка Chrome, Firefox, Safari, Opera, Edge, IE11+ ✔️Не зависит от сторонних библиотек ✔️Поддерживает макеты в виде списка и в виде сетки Сайт: https://lukasoppermann.github.io/html5sortable/ Гит: https://github.com/lukasoppermann/html5sortable #библиотеки #полезно #js 👉 @frontend_mind

  • Frontend Головного Мозга

    Анимированное меню, выполненное с помощью SVG и SCSS, без использования JavaScript #codepen #scss #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

  • Реклама

  • Frontend Головного Мозга

    One Day Offer для фронтенд-разработчиков 25 июня Яндекс проводит One Day Offer — онлайн-встречу, на которой вы можете получить оффер от Яндекса всего за один день. Вы JS разработчик с опытом от трех лет и хотите работать над интересными проектами в Яндексе? Регистрируйтесь на сайте, успейте решить задачи контеста до 21 июня, а 25 июня мы встретимся на онлайн-секциях, по результатам которых лучшие участники смогут присоединиться к командам Поиска, Yandex Cloud или Директа.

  • Frontend Головного Мозга

    Brackets — Текстовый редактор для фронтенд-разработчиков Инструмент с открытым исходным кодом ориентированный на работу с HTML, CSS и JavaScript. Особенности: 👉 Кроссплатформенность 👉 Предварительный просмотр в реальном времени 👉 Возможность добавлять расширения 👉 Поддержка препроцессоров Сайт: https://brackets.io/ Гит: https://github.com/brackets-cont/brackets #полезно #инструменты 👉 @frontend_mind

  • Frontend Головного Мозга

    Всем привет! Ребята создали чат-бота Masterhub, который рассылает разработчикам релевантные Frontend вакансии без спама. Настрой бота за 1 минуту и получай до 50 вакансий в неделю, отобранных по твоим предпочтениям. @MasterHuBot