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

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

12111 @frontend_mind
Открыть

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

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

    Fullcalendar — Библиотека для добавления календаря Позволяет добавлять интерактивный календарь событий в проект. Особенности / преимущества: ✔️Доступна для React, Vue, Angular Vanilla JavaScript ✔️Небольшой вес (4kB) ✔️Открытый исходный код ✔️Совместима с Firefox, Chrome, Safari, Edge и IE 11 Сайт: https://fullcalendar.io/ Гит: https://github.com/fullcalendar/fullcalendar #библиотеки #полезно #js 👉 @frontend_mind

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

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

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

    Charts.css — CSS-фреймворк для добавления диаграмм Использует служебные классы CSS для оформления HTML-элементов в виде диаграмм. Особенности: 👉 Открытый исходный код 👉 Не имеет зависимостей 👉 Настройка с помощью CSS 👉 Поддерживает множество типов диаграмм Сайт: https://chartscss.org/ Гит: https://github.com/ChartsCSS/charts.css #полезно #инструменты 👉 @frontend_mind

  • Реклама

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

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

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

    ✨Топ WYSIWYG HTML-редакторов, Часть 2: 👉 Editor.js — Предлагает разработчикам доступ к большому количеству API. Позволяет экспортировать информацию из редактора в JSON-формате. Также поддерживает блочную структуру. 👉 Draft.js — Разработан для для фреймворка React. Включает в себя набор всех необходимых инструментов для работы с текстом. Контент отображается в виде блоков. Также предоставляет хорошо задокументированное API. 👉 ContentTools — Предоставляет полную документацию по API с примерами. Позволяет добавить редактор на страницу за несколько простых шагов. Имеет открытый исходный код. 👉 Summernote — Предлагает интеграцию с Django, Rails и Angular. Поддерживает браузеры Safari, Chrome, Firefox, Opera и Edge. Имеет небольшой вес и открытый исходный код. 👉 Dante Editor — Поддерживает современные браузеры, способен отображать множество вариантов форматирования. Подключается через JavaScript и встраивается в веб-страницу с помощью ID. Также поддерживает тёмную и светлую темы. А какими сервисами пользуетесь вы? Напишите в комментариях👇 #полезно #подборки_инструментов 👉 @frontend_mind

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

    Генерируемые блики, выполненные с помощью CSS и библиотеки Three.js #codepen #css #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

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

    Gridstack.js — Библиотека для создания интерактивных сеток Позволяет создавать адаптивные перетаскиваемые сетки с несколькими столбцами. Особенности / преимущества: ✔️Работает с React, Vue, Angular, Knockout.js, Ember и др. ✔️Совместима с мобильными устройствами ✔️Не имеет зависимостей ✔️Небольшой вес (11kB) Сайт: https://gridstackjs.com/ Гит: https://github.com/gridstack/gridstack.js #библиотеки #полезно #js 👉 @frontend_mind

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

    Эффект при наведении на кнопку, реализованный с помощью SVG, CSS и библиотеки GSAP.js #codepen #css #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

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

    ​Позиционирование элементов с помощью JS Элементы на странице можно позиционировать не только с помощью стилей, но и с помощью JavaScript. В этой статье мы рассмотрим ситуации, когда это оправдано и как таким позиционированием пользоваться. Используйте скрипты для позиционирования тогда, когда стилей не хватает. CSS ограничен в обратной связи на действия пользователей на экране. В нём есть @ keyframes, transition, :hover, :active, :focus и т. д., но этого не всегда достаточно. Иногда нужно, чтобы в ответ на действия пользователя на странице происходили сложные преобразования или чтобы пользователи сами могли управлять анимациями на странице. Как менять позиционирование на скриптах: ✔️ Изменять классы Использовать такой способ можно, когда мы заранее знаем, куда и откуда мы хотим переместить элемент, но не знаем момент, когда нам это понадобится. ✔️ Изменять style Он подойдёт в случае, когда мы мгновенно хотим отражать изменения на элементе, даже если не знаем, что и когда поменяется. Например, если мы хотим перемещать элемент мышкой на экране, нам может понадобиться менять его style. ✔️ Изменение transform ✔️ Изменение кастомных свойств CSS 👉 Читать статью полностью #статья #js 👉 @frontend_mind

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

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

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

    Sketch2Code — Инструмент для создания вёрстки HTML из рисунков Преобразует набросок дизайна пользовательского интерфейса в действующий код HTML-разметки. Особенности: 👉 Открытый исходный код 👉 Распознавание рукописного текста 👉 Использует ИИ 👉 Сохраняет все промежуточные этапы процесса Сайт: https://sketch2code.azurewebsites.net/ Гит: https://sketch2code.azurewebsites.net/ #полезно #инструменты 👉 @frontend_mind

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

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

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

    Решение задачи "Цифровой корень" #codewars #легко #js #ответы #38kata 👉 @frontend_mind

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

    Цифровой корень Цифровой корень — Рекурсивная сумма всех цифр числа. Напишите функцию, которая принимает число n, и возвращает цифровой корень числа n. Если это значение имеет более одной цифры, продолжайте уменьшать таким образом, пока не будет получено однозначное число. Пример: 
    digital_root(16) - вернёт 7
// 16  =>  1 + 6 = 7

digital_root(942) - вернёт 6
// 942  =>  9 + 4 + 2 = 15  =>  1 + 5 = 6

digital_root(132189) - вернёт 6
// 132189  =>  1 + 3 + 2 + 1 + 8 + 9 = 24  =>  2 + 4 = 6
    Ввод будет неотрицательным целым числом. ===Решать задачу на Codewars=== 📌 Пишите ваше решение в комментариях. Решение будет через несколько часов на этом канале. 👇 #codewars #легко #js #38kata 👉 @frontend_mind

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

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

  • Реклама

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

    Simple-keyboard — Библиотека для создания виртуальной клавиатуры Позволяет добавлять настраиваемую виртуальную клавиатуру в проект. Особенности / преимущества: ✔️ Поддержка фреймворков (Angular, React, Vue) ✔️ Возможность настроить собственный дизайн ✔️ Поддержка таких модулей, как автозамена, маска ввода и др ✔️ Не имеет зависимостей Сайт: https://virtual-keyboard.js.org/ Гит: https://github.com/hodgef/simple-keyboard #библиотеки #полезно #js 👉 @frontend_mind

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

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

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

    IHateRegex — Сервис для подбора регулярных выражений Позволяет найти полезные и многоразовые регулярные выражения по ключевым словам. Особенности: 👉 Предоставляет площадку для взаимодействия с фрагментами Regex 👉 Визуальное представление регулярных выражений 👉 Выделение и проверка кода Regex 👉 Описание Regex с поддержкой markdown Сайт: https://ihateregex.io/ Гит: https://github.com/geongeorge/i-hate-regex #полезно #инструменты 👉 @frontend_mind