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

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

12111 @frontend_mind
Открыть

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

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

    Генерация заднего фона на основе используемых цветов, выполненная с помощью Pug, Stylus и JavaScript #codepen #scss #js #готовые_решения 👉 @frontend_mind 👇Код и демо доступны по кнопке👇

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

    Noun Project — Сервис для подбора иконок Предоставляет более 3 миллионов иконок и фото для использования в проекте Особенности: 👉 Возможность получить доступ к иконкам через API 👉 Поддержка drag-and-drop для Photoshop, Illustrator, Sketch, Google Docs, PowerPoint и т.д 👉 Иконки разделены по коллекциям 👉 Возможность кастомизации иконок прямо на сайте Сайт: https://thenounproject.com/ #полезно #инструменты 👉 @frontend_mind

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

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

  • Реклама

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

    ✨Топ инструментов для обрезки и изменения размера изображений 👉 PicResize — Позволяет изменять размер изображений. Также позволяет добавлять специальные эффекты, кадрировать и поворачивать изображения. 👉 ImageResize — Позволяет изменять размер изображения c помощью процентов или размера в пикселях. Изображения загружаются через защищенное соединение и автоматически удаляются в течение 6 часов. 👉 Web Resizer — Инструмент для выполнения нескольких типов правок, таких как обрезка, резкость, сжатие, изменение размера и т.д. Также позволяет оптимизировать изображение. 👉 LunaPic Resizer — Кроме изменения размера изображения, предоставляет множество других инструментов редактирования. Также позволяет добавить простую анимацию. 👉 Quick Thumbnail — Позволяет быстро изменить размер, добавить фильтр и водяной знак к изображению. Также предоставляет предустановленные размеры изображений. А какими сервисами пользуетесь вы? Напишите в комментариях👇 #полезно #подборки_инструментов 👉 @frontend_mind

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

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

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

    Awesome Notifications — Библиотека для создания уведомлений Позволяет добавлять различные уведомления на веб-сайт. Особенности / преимущества: ✔️Не имеет зависимостей ✔️Поддержка асинхронных событий ✔️Небольшой вес (3kB) ✔️Полностью настраиваемая Сайт: https://f3oall.github.io/awesome-notifications/ Гит: https://github.com/f3oall/awesome-notifications #библиотеки #полезно #js 👉 @frontend_mind

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

    Senior Frontend Developer — канал, где опытный Frontend-разработчик учит писать код и делится лайфхаками. Подписывайтесь! @senior_front

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

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

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

    ​Работа с формами Как обрабатывать формы, валидировать их и отправлять без перезагрузки страницы с помощью JS. Помимо стандартных средств работы с формами можно использовать JavaScript, чтобы проверять формы на валидность, получать доступ к значениям и отправлять информацию на сервер. В этой статье мы соберём форму заявки на участие в миссии по колонизации Марса. А также немножко приправим стандартные HTML-атрибуты динамикой на JS Наша форма заявки будет состоять из шести полей. В форме мы собираем следующие данные: Имя, почту, возраст, специализация, работал ли человек в NASA, фото. Первым делом настроим отправку формы без перезагрузки страницы. Перезагрузка страницы — поведение по умолчанию для отправки формы. Чтобы его предотвратить, нам нужно «перехватить» управление в момент отправки и сказать форме, что делать вместо этого. Чтобы «соединить» форму с нашей будущей собственной отправкой данных, мы напишем функцию, которая будет «слушать» событие отправки и реагировать на него. Следующий шаг — собрать всё, что необходимо отправить. Мы будем использовать возможности языка, чтобы достать все поля и элементы управления из формы. мы воспользуемся свойством elements, которое содержит в себе все элементы управления и поля этой формы. Мы воспользуемся FormData, чтобы сохранить данные из формы. Создадим экземпляр с помощью new FormData(), откажемся от массива со значениями и будем добавлять имена полей и их значения в FormData с помощью вызова функции append. Также напишем функцию, которая будет вызывать alert с сообщением, которое пришлёт сервер в случае ошибки. 👉 Читать статью полностью #статья #js 👉 @frontend_mind

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

    👋 Мы — команда айтишников. В текущих условиях компания не может работать как работала, и мы решили переехать всей командой. 💬 Создали канал для таких же, как мы, — тех, кто хочет уехать. Собираем всё самое полезное про релокацию. Рассказываем, с чем столкнулись сами, ищем лайфхаки и способы похачить систему (например, нашли несколько способов, как жить за границей на рубли). 👨‍💻 А вообще, мы HR-IT-чувачки (то есть без лишней скромности профи в сфере трудоустройства) и сейчас готовим новый проект: будем помогать айтишникам организовать переезд и устроиться на работу в валюте. И ещё сверху грант будем давать💰 👉 Что для этого нужно? Пока что — присоединиться к каналу RelocationDev и следить за новостями😉 Скоро обо всём расскажем — в мельчайших подробностях.

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

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

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

    Codacy — Инструмент статического анализа Позволяет выявить такие проблемы, как дублирование кода, сложность, безопасность и многое другое. Особенности: 👉 Поддерживает более 40 языков программирования 👉 Визуализирует состояние качества кода, технического долг и показывает наиболее проблемные области 👉 Уведомления в Slack 👉 Интеграция с GitHub, GitLab, BitBucket Сайт: https://www.codacy.com/ GitHub: https://github.com/codacy #полезно #инструменты 👉 @frontend_mind

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

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

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

    Решение задачи "Счётчик улыбок" #codewars #легко #js #ответы #36kata 👉 @frontend_mind

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

    Счётчик улыбок Учитывая массив в качестве аргумента, напишите функцию, которая должна вернуть общее количество улыбающихся лиц. Правила улыбающегося лица: Каждый смайлик должен содержать допустимую пару глаз. Глаза могут быть отмечены как : или ; У смайлика может быть нос, но не обязательно. Допустимые символы для носа - или ~ Каждое улыбающееся лицо должно иметь улыбающийся рот, который должен быть отмечен знаком ) или D. Не допускается использование дополнительных символов, кроме упомянутых. Примеры допустимых смайлов: :) :D ;-D :~) Недопустимых: ;( :> :} :] Пример: 
    countSmileys([':)', ';(', ';}', ':-D']) - вернёт 2

countSmileys([';D', ':-(', ':-)', ';~)']) - вернёт 3

countSmileys([';]', ':[', ';*', ':$', ';-D']) - вернёт 1
    В случае если массив пустой, верните 0. Порядок элементов лица (глаза, нос, рот) всегда будет одинаковым. ===Решать задачу на Codewars=== 📌 Пишите ваше решение в комментариях. Решение будет через несколько часов на этом канале. 👇 #codewars #легко #js #36kata 👉 @frontend_mind

  • Реклама

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

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

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

    Maptalks.js — Библиотека для создания карт Позволяет создавать интегрированные 2D/3D-карты. Особенности / преимущества: ✔️Поддерживает Chrome, Firefox, Edge, Opera, Safari, IE 9-11 и мобильные браузеры ✔️Возможность стилизовать карту под свой дизайн ✔️Легко расширяется с помощью плагинов ✔️Встроенный инструмент рисования/редактор/инструмент измерения Сайт: https://maptalks.org/ Гит: https://github.com/maptalks/maptalks.js #библиотеки #полезно #js 👉 @frontend_mind

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

    Пройдите полную программу обучения по специальности «Фронтенд-разработчик» на Хекслете и получите гарантированную оплачиваемую стажировку в «Ростелеком»: https://bit.ly/3tbXziF 📍Глубокий практический курс на 10 месяцев: JavaScript, HTML и CSS, фреймворки React+Redux Toolkit, инфраструктура — командная строка, NPM, Git, Webpack. 📍Асинхронный формат — комфортный темп, мягкие дедлайны. 📍Более 350 заданий в онлайн-тренажере с мгновенной автопроверкой. 📍Помощь практикующих наставников. 📍4 рабочих проекта в портфолио на GitHub и практика в Open Source. Выпускникам — гарантированная оплачиваемая стажировка в проектах ИТ-кластера «Ростелеком» от 1 до 3 месяцев с окладом 40 000 рублей в месяц. Лучшие получат оффер!