Frontend Головного Мозга. Страница 26
12111
@frontend_mind
Настоящий клондайк для frontend-разработчиков.
-
Frontend Головного Мозга
Интерактивная галерея, выполненная с помощью CSS и JavaScript #codepen #css #js #готовые_решения 👉 Ссылка на код 👉 @frontend_mind -
Frontend Головного Мозга
Анимация при наведении на карточки, выполненная на чистом CSS, без использования JavaScript #codepen #css #готовые_решения 👉 Ссылка на код 👉 @frontend_mind -
Frontend Головного Мозга
Релиз Firefox 100: Полосы прокрутки в Linux и Windows 11, проверка правописания на нескольких языках и многое другое 3 мая 2022 г. была представлена новая версия — Firefox 100 👇Вот её особенности👇 ✔️Улучшено отображение субтитров в режиме «Картинка в картинке». ✔️Значительно ускорена обработка вложенных элементов, оформленных с использованием механизма CSS-сеток (display: grid). ✔️Полосы прокрутки в Linux и Windows 11 теперь по умолчанию не занимают места и динамически всплывают поверх прокручиваемой области при прокрутке (overlay scrollbars). ✔️Поддержка проверки правописания на нескольких языках. Дополнительные языки можно выбрать через контекстное меню текстового поля. Оф.Сайт: www.mozilla.org/en-US/f…asenotes #инструменты 👉 @frontend_mind 
-
Реклама
-
Frontend Головного Мозга
Конвертор цветов из HEX в RGB, выполненный с помощью SCSS и библиотеки Vue.js #codepen #scss #js #готовые_решения 👉 Ссылка на код 👉 @frontend_mind -
Frontend Головного Мозга
Public APIs — Коллекция общедоступных API Предоставляет разработчикам разделенные по категориям API в виде простых блоков. Особенности: 👉 Примеры кода для каждого API 👉 Работает с JavaScript, Go, Dart, CLI, Curl 👉 Предварительно сгенерированные клиентские библиотеки 👉 Поиск по API Сайт: https://m3o.com/ Гит: https://github.com/m3o/m3o #полезно #инструменты 👉 @frontend_mind -
Frontend Головного Мозга
Решение задачи "Лайки" #codewars #легко #js #ответы #43kata 👉 @frontend_mind 
-
Frontend Головного Мозга
Лайки Вы, наверное, знаете систему «лайков» из Facebook и других социальных сетей. Люди могут «лайкать» записи и рядом будет отображаться текст. В этой задаче необходимо создать текст, который должен отображаться рядом. Реализуйте функцию, которая принимает массив, содержащий имена людей, которым понравилась запись. Функция должна возвращать отображаемый текст, как показано в примерах. Пример: likes([]) - вернёт 'no one likes this' likes(['Peter']) - вернёт 'Peter likes this' likes(['Jacob', 'Alex']) - вернёт 'Jacob and Alex like this' likes(['Max', 'John', 'Mark']) - вернёт 'Max, John and Mark like this' likes(['Alex', 'Jacob', 'Mark', 'Max']) - вернёт 'Alex, Jacob and 2 others like this'
Для 4 и более имен число в строке "and 2 others" просто увеличивается. ===Решать задачу на Codewars=== 📌 Пишите ваше решение в комментариях. Решение будет через несколько часов на этом канале. 👇 #codewars #легко #js #43kata 👉 @frontend_mind -
Frontend Головного Мозга
Mario следящий за положением курсора, выполненный с помощью SCSS, без использования JavaScript #codepen #scss #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇 -
Frontend Головного Мозга
EasyDropDown — Библиотека для работы с элементом select Позволяет полностью настроить и стилизовать элемент select. Особенности / преимущества: ✔️Совместима с Chrome, Firefox, Edge, Opera, Safari, IE9+ ✔️Небольшой вес (9kB) ✔️Поддержка CSS-модулей ✔️Возможность работы с клавиатурой Гит: https://github.com/patrickkunka/easydropdown #библиотеки #полезно #js 👉 @frontend_mind -
Frontend Головного Мозга
Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript #codepen #css #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇 -
Frontend Головного Мозга
UIGradients — Библиотека градиентов Позволяет использовать и добавлять цветные линейные градиенты. Особенности: 👉 Экспорт CSS-кода или в виде изображения JPG 👉 Добавление градиента через .json 👉 Возможность отфильтровать градиенты по цветам 👉 Ввод цвета в HEX-формате Сайт: https://uigradients.com/ Гит: https://github.com/Ghosh/uiGradients #полезно #инструменты 👉 @frontend_mind -
Frontend Головного Мозга
Переключение фотографий, выполненное с помощью SCSS и библиотеки GSAP.js #codepen #scss #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇 -
Frontend Головного Мозга
✨Топ инструментов для совместного программирования 👉 Cloud9 IDE — Поддерживает более 40 языков. Включает все SDK, библиотеки и модули, необходимые для создания бессерверных приложений. Также имеет собственный терминал. 👉 Visual Studio Live Share — Организует общий доступ и совместную работу над проектами. Кодом можно делиться в режиме «только чтение» или «запись», а также обмениваться терминалами и серверами. 👉 CodeSandbox — Позволяет редактировать, создавать, переименовывать и обновлять файлы и код. Можно увидеть, какой файл просматривают и над чем сейчас работают. Есть чат и уведомления. 👉 Codeshare — Поддерживает более 80 языков, есть видеочат, темы на выбор, также позволяет скачать код. Каждые 24 часа файлы обнуляются. 👉 Collabedit — Позволяет совместно работать над кодом в режиме реального времени. Поддержка множества языков. Предоставляет подсветку синтаксиса и историю изменений. А какими сервисами пользуетесь вы? Напишите в комментариях👇 #полезно #подборки_инструментов 👉 @frontend_mind -
Frontend Головного Мозга
Эффект при наведении на карточку, выполненный на чистом CSS, без использования JavaScript #codepen #css #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇 -
Frontend Головного Мозга
Micromodal.js — Библиотека для создания модальных окон Позволяет добавлять настраиваемые модальные окна на веб-сайт. Особенности / преимущества: ✔️Написана на чистом JavaScript ✔️Закрывает модальное окно при клике по оверлею или при нажатии esc ✔️Небольшой вес (1.9kB) ✔️Стилизация с помощью CSS Сайт: https://micromodal.vercel.app/ Гит: https://github.com/ghosh/micromodal #библиотеки #полезно #js 👉 @frontend_mind -
Реклама
-
Frontend Головного Мозга
Регулировка температуры, выполненная с помощью SVG, CSS и библиотеки GSAP.js #codepen #css #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇 -
Frontend Головного Мозга
Загрузка файла с прогресс-баром Создадим несложный вариант передачи файлов на сервер с индикацией процесса загрузки. Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому далее будет рассмотрена организация отправки файла на стороне клиента. В этой статье мы рассмотрим следующие этапы: 👉 HTML-разметка 👉 Стилизация элементов 👉 Напишем JS-код для передачи файла на сервер На практике: Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Если файлы большие, то хорошей практикой будет показывать пользователю прогресс и результат загрузки файла. Для этого можно использовать прогресс-бар. 👉 Читать статью полностью #статья #js 👉 @frontend_mind -
Frontend Головного Мозга
Анимированная сцена, выполненная с помощью SCSS, без использования JavaScript #codepen #scss #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇