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

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

12111 @frontend_mind
Открыть

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

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

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

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

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

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

    Для тех кто просил, открываем доступ в секретный канал на 2 ЧАСА👇 https://t.me/+kx7oWHPduEI5Y2Zi

  • Реклама

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

    ​📆 Frontend дайджест 7 - 20 февраля 👉 Вышел патч 98 версии Google Chrome с устранением уязвимости нулевого дня. Известно, что она связана с Web Animations API. Помимо этой уязвимости было устранено ещё 10 менее опасных. 👉 Состоялись релизы версий Node.js. В версии 17.5.0 была добавлена экспериментальная поддержка fetch API. В LTS-версии 16.14.0 была добавлена также экспериментальная поддержка import assertions. 👉 Vite 2.8.0 с новым релизом стал на 35% меньше после установки и на 75% меньше после публикации. Кроме того, в нем появилась возможность настраивать сборку воркеров и был представлен ряд багфиксов. 👉 Релиз Firefox 97. Добавлена поддержка каскадных слоев CSS, свойство scrollbar-gutter и новые единицы измерения. Подробный обзор можно посмотреть тут. 👉 Релиз npm 8.5.0. В этой версии исправлено множество ошибок, добавлены перекрестные ссылки между npx и npm exec. Также введены автоматические корни рабочей области. #frontend_дайджест 👉 @frontend_mind

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

    Neumorphism — Инструмент для создания дизайна в стиле neumorphism Генерирует CSS-код, согласно заданным параметрам, для создания дизайна. Особенности: 👉 Открытый исходный код 👉 Позволяет настроить направление света 👉 Мгновенная генерация CSS-кода 👉 Выбор цвета в нескольких форматах (RGB, HSL, HEX) Сайт: https://neumorphism.io/ Гит: https://github.com/adamgiebl/neumorphism #полезно #инструменты 👉 @frontend_mind

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

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

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

    Решение задачи "Римские цифры" #codewars #легко #js #ответы #32kata 👉 @frontend_mind

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

    Римские цифры Напишите функцию, которая принимает в качестве аргумента римское число и возвращает его значение в виде десятичного целого числа. Римские числа записываются при помощи повторения римских цифр. Если большая цифра стоит перед меньшей, то они складываются (VI – 5+1=6). Если же меньшая стоит перед большей, то из большей вычитается меньшая (IV – 5-1=4). Таким образом, 1990 записывается как «MCMXC» (1000 = M, 900 = CM, 90 = XC). Римские числа: I — 1 V — 5 X — 10 L — 50 C — 100 D — 500 M — 1000 Пример: 
    solution('XXI') - вернёт 21

solution('I') - вернёт 1

solution('IV') - вернёт 4

solution('MMVIII') - вернёт 2008

solution('MDCLXVI') - вернёт 1666
    ===Решать задачу на Codewars=== 📌 Пишите ваше решение в комментариях. Решение будет через несколько часов на этом канале. 👇 #codewars #легко #js #32kata 👉 @frontend_mind

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

    Эффект объёмных картинок, выполненный на чистом CSS, без использования JavaScript #codepen #css #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

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

    ECharts — Интерактивная библиотека визуализации данных Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект. Особенности / преимущества: ✔️Предоставляет более 20 типов диаграмм ✔️Переключение между рендерингом Canvas и SVG ✔️Автоматически генерируемые описания диаграмм ✔️Написана на чистом JavaScript Сайт: https://echarts.apache.org/en/index.html Гит: https://github.com/apache/echarts #библиотеки #полезно #js 👉 @frontend_mind

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

    Переливающаяся 3D-фигура, выполненная с помощью SCSS и библиотеки Three.js #codepen #scss #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

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

    Responsively — инструмент для разработки адаптивных веб-приложений Облегчает разработку адаптивных веб-приложений, предоставляя инспектор и предварительный просмотр всех целевых экранов в одном окне. Особенности: 👉 Открытый исходный код 👉 Доступен для Firefox, Chrome, Edge 👉 Зеркальные взаимодействия 👉 Предоставляет более 30 встроенных профилей устройств 👉 Поддержка горячей перезагрузки Сайт: https://responsively.app/ Гит: github.com/respons…vely-app #полезно #инструменты 👉 @frontend_mind

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

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

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

    ✨Топ программного обеспечения для отслеживания времени, Часть 2: 👉 Webwork-Tracker — Предоставляет статистику и отчеты, которые вы можете экспортировать в различных форматах. Автоматически делает скриншоты через каждые десять минут. Позволяет общаться с командой. 👉 DeskTime — Доступен для Windows, Linux, Mac, Android и IOS. Предоставляет автоматическое отслеживание времени, отслеживание URL-адресов, приложений и заголовков документов. Также предоставляет автоматические скриншоты. 👉 Paymo — Позволяет вам видеть действия, выполняемые пользователями, создавать визуальный график работы, выполняемой членами команды. Также позволяет делиться отчетами о времени с командой. 👉 TimeCamp — Обеспечивает автоматическое отслеживание времени и подробные графические отчеты о работе. Позволяет интегрировать этот инструмент с другими приложениями. Также обеспечивает анализ посещаемости и отсутствия. 👉 Clockify — Позволяет отслеживать неограниченное количество проектов, делиться отчетами с другими людьми, видеть активность команды в реальном времени. Доступно для Edge, Chrome, Firefox, Android, iOS, Windows, Mac, Linux. А какими сервисами пользуетесь вы? Напишите в комментариях👇 #полезно #подборки_инструментов 👉 @frontend_mind

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

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

  • Реклама

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

    lwder.js — Библиотека для создания анимации загрузки Позволяет добавлять анимацию простой загрузки в свой проект. Особенности / преимущества: ✔️Небольшой вес (0,5kB) ✔️Поддерживает современные браузеры (Safari, Chrome, Firefox, Opera ) ✔️Не имеет зависимостей, написана на чистом JavaScript ✔️Простая в использовании Гит: https://github.com/BMSVieira/lwder.js Demo: bmsvieira.github.io/lwder.j…dex.html #библиотеки #полезно #js 👉 @frontend_mind

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

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

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

    Релиз Firefox 97: CSS-свойство scrollbar-gutter, поддержка каскадных слоёв и многое другое 8 февраля 2022 г. была представлена новая версия — Firefox 97 👇Вот её особенности👇 ✔️На платформе Windows 11 добавлена поддержка нового стиля полос прокрутки. ✔️Устранено 42 уязвимости, из которых 34 помечены как опасные. 33 уязвимости вызваны проблемами работы с памятью. ✔️В CSS включена по умолчанию поддержка каскадных слоёв, задаваемых при помощи правила @ layer и импортируемых через CSS-правило @ import, используя функцию layer(). ✔️ CSS-конструкциях с типами length и length-percentage разрешено использование единиц измерения "cap" и "ic". ✔️Добавлено CSS-свойство scrollbar-gutter для управления резервированием пространства экрана под полосу прокрутки. Оф.Сайт: www.mozilla.org/en-US/f…asenotes #инструменты 👉 @frontend_mind