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

Excalidraw — Простой сервис для создания диаграмм Позволяет создавать диаграммы, похожие на нарисованные от руки. Особенности: 👉 Экспорт в PNG и SVG 👉 Горячие клавиши 👉 Возможность совместной работы 👉 Светлая/тёмная тема Сайт: https://excalidraw.com/ Гит: https://github.com/excalidraw/excalidraw #полезно #инструменты 👉 @frontend_mind

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

👉 Foundation — Предоставляет множество гибких компонентов. С помощью встроенных инструментов позволяет создать адаптивные шаблоны для электронной почты, переходы и анимацию. 👉 Bulma — Имеет простой синтаксис. Не включает функции JavaScript, однако без труда интегрируется с популярными фреймворками. 👉 Tailwind — Упрощает реализацию общих стилей, предлагая служебные классы. Также позволяет создавать собственные настраиваемые компоненты. 👉 UIKit — Содержит десятки компонентов, предлагает веб-настройщик для настройки дизайна в режиме реального времени и для копирования в переменных SASS или LESS. 👉 Pure — Предлагает многоразовые модули CSS, которые можно добавить в любой веб-проект. Занимает всего 3,7 КБ (в сжатом виде). 👉 Tachyons — Предоставляет служебные классы и функциональные шаблоны для повышения производительности. Используется только с препроцессором PostCSS. А какими сервисами пользуетесь вы? Напишите в комментариях👇 #полезно #подборки_инструментов 👉 @frontend_mind

Одна из многих причин нежелания идти учиться на курсы по разработке — отсутствие гарантий, что деньги за курс не будут выброшены на ветер. В Kata Academy эти гарантии предоставляют. В договоре с Kata четко прописано, что вам не нужно платить за обучение до тех пор, пока вы не устроитесь на работу в IT. То есть во время обучения вы ничего не платите. Также в договоре указывается, что Kata гарантирует минимальную зарплату от 80 тысяч рублей в месяц. Если вы вдруг не смогли устроиться на работу, то за обучение платить не нужно. Связано это с тем, что цель Kata — ваше трудоустройство разработчиком, а если вам не удалось, значит на курсе вас не смогли подготовить должным образом. Записывайтесь на курс и получайте тестовое задание: https://clck.ru/hLwyL Если не уверены в своих силах — не переживайте, Kata дадут неплохой FAQ, который поможет с выполнением тестового!

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

Mo.js — Библиотека для создания анимации Позволяет создавать плавную анимацию под все типы устройств. Особенности / преимущества: ✔️Декларативный API ✔️Модульность ✔️Открытый исходный код ✔️Лёгкая настройка Сайт: https://mojs.github.io/ GitHub: https://github.com/mojs #библиотеки #полезно #js 👉 @frontend_mind

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

Безопасность веб-приложений и распространённые атаки Не используйте упомянутые здесь атаки непосредственно для атак. Используйте знания о них только для того, чтобы уметь от них защищаться. Slowloris Разновидность дос-атаки, при которой на сервер отправляется запрос, а данные пересылаются очень медленно. Так как данные всё ещё пересылаются, сервер не может просто оборвать соединение. Но и заняться другими запросами он тоже не может, потому что занят этим. Data-bombs Бомбами чаще всего бывают архивы или изображения. Они называются бомбами, потому что при разархивировании (в случае с архивами) или декомпрессии (в случае с изображениями) резко увеличиваются в размерах. Далее мы рассмотрим следующие атаки: ✔️Click Jacking ✔️Cross Site Scripting, XSS ✔️SQL-Injection ✔️Stored XSS ✔️Key Logger ✔️Cross-Site Request Forgery, CSRF ✔️Man in the Middle 👉 Читать статью полностью #статья #js 👉 @frontend_mind

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

Tally Forms — Инструмент для создания форм Позволяет создавать формы с помощью готовых блоков. Особенности: 👉 Возможность внедрить пользовательские стили и скрипты 👉 Интеграция с Google Sheets, Coda, Slack и т.д 👉 Возможность совместной работы 👉 Добавление логики для форм Сайт: https://tally.so/ #полезно #инструменты 👉 @frontend_mind

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

Решение задачи "Первый и неповторимый" #codewars #легко #js #ответы #46kata 👉 @frontend_mind

Первый и неповторимый Напишите функцию, которая принимает строку и возвращает первый символ, который нигде в строке не повторяется. Пример:

firstNonRepeatingLetter('a') - вернёт 'a'

firstNonRepeatingLetter('stress') - вернёт 't'

firstNonRepeatingLetter('moonmen') - вернёт 'e'

Прописные и строчные буквы считаются одним и тем же символом, но функция должна возвращать букву в исходном регистре. Например, firstNonRepeatingLetter('sTreSS') - вернёт 'T'. Если строка содержит все повторяющиеся символы, она должна возвращать пустую строку. ===Решать задачу на Codewars=== 📌 Пишите ваше решение в комментариях. Решение будет через несколько часов на этом канале. 👇 #codewars #легко #js #46kata 👉 @frontend_mind

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

Konva.js — Библиотека для работы с HTML5 Canvas Расширяет возможности взаимодействия с 2D-графикой, обеспечивая интерактивность Canvas. Особенности / преимущества: ✔️Поддержка настольных и мобильных устройств ✔️Встроенная поддержка drag-and-drop ✔️Интеграция с фреймворками React и Vue ✔️Экспорт данных в URL-адреса Сайт: https://konvajs.org/ Гит: https://github.com/konvajs/konva #библиотеки #полезно #js 👉 @frontend_mind

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

Notion — Сервис для ведения проектов и совместной работы Позволяет создавать заметки и текстовые документы, списки дел, базы данных, таблицы, канбан-доски и многое другое. Особенности: 👉 Приложения для IOS и Android 👉 Возможность настроить систему под свои нужды 👉 Интеграция с Jira, Slack, GitHub, Asana и т.д 👉 Предоставляет готовые шаблоны Сайт: https://www.notion.so/ #полезно #инструменты 👉 @frontend_mind

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