FRONT-DEV-INFO
ПостыРесурсы
(function(){<br />
let canvas = document.createElement('canvas'),<br />  
ctx = canvas.getContext('2d'),<br />             
w = canvas.width = innerWidth,<br />
h = canvas.height = innerHeight,<br />
particles = [],<br />
properties = {<br />
bgColor : 'rgba(17, 17, 19, 1)',<br />
particleColor : 'rgba(255, 40, 40, 1)',<br />
particleRadius : 3,<br />
particleCount : 60,<br />
particleMaxVelocity : 0.5,<br />
lineLength : 150,<br />
particleLife : 6,<br />
};<br />
<br />
document.querySelector('body').appendChild(canvas);<br />
<br />
window.onresize = function() {<br />
w = canvas.width = innerWidth;<br />
h = canvas.height = innerHeight;<br />
}<br />
<br />
class Particle {<br />
constructor() {<br />
this.x = Math.random()*w;<br />

Ресурсы для frontend разработки

API

YouTube iframe player API - https://developers.google.com/youtube/player_parameters?hl=ru

Content Security Policy

Документация Content Security Policy - https://content-security-policy.com/

Сгенерировать sha256 для Inline скриптов - https://strict-csp-codelab.glitch.me/csp_sha256_util.html

Изображения

Сгенерировать favicon - https://realfavicongenerator.net/

Скачать svg бесплатно - https://www.svgrepo.com/

Сжать картинку до меньших размеров (WebP, PNG и JPEG) - https://tinypng.com/

Второй ресурс для сжатия изображений - https://www.websiteplanet.com/webtools/imagecompressor/

Изменить формат (В том числе форматировать в webp) - https://squoosh.app/

Информационные

Различные roadmaps для разработки - https://roadmap.sh/

Roadmap для Javascript - https://roadmap.sh/javascript

Лучшие практики во frontend - https://roadmap.sh/best-practices/frontend-performance

Полезно для подготовки к собеседованию - https://www.techiedelight.com/ru/data-structures-and-algorithms-problems/

Полезные статьи по css - https://css-tricks.com/guides/

Справочник по svg - https://msiter.ru/tutorials/svg/svg_inhtml

DApps

Сгенерировать ссылку в Metamask App - https://metamask.github.io/metamask-deeplinks/#

Библиотеки

React

Библиотека компонентов для React Chakra - https://chakra-ui.com/getting-started

Библиотека компонентов для React Material UI - https://mui.com/

Стили

Библиотека css анимаций - https://animate.style/

Библиотека css эффектов и анимаций - https://cssfx.netlify.app/

CSS line hover styles for links - https://tympanus.net/Development/LineHoverStyles/

Создание анимаций - https://www.framer.com/motion/

Разные

Библиотека для работы с датами day.js - https://day.js.org/en/

Библиотека JS функций Lodash - https://lodash.com/

Библиотека которая помогает распознавать жесты выполняемые касанием, мышью и событиями указателя. - https://hammerjs.github.io/getting-started/

Frameworks

Foundation - https://get.foundation/

Vue - https://vuejs.org/

React - https://react.dev/

Tailwindcss CSS-фреймворк - https://tailwindcss.com/

Инструменты

React

Инструмент для работы с формами в React - https://react-hook-form.com/

Next.js инструмент для React - https://nextjs.org/

Распарсить строку в html в React - html-react-parser

Таймер - react-timer-hook

Другие

UI компоненты для React и Vue - https://headlessui.com/

Vite - https://vitejs.dev/

JSON Server - https://github.com/typicode/json-server

Slick карусель - https://kenwheeler.github.io/slick/

Задачи по программированию

- https://codeforces.com/

Разное

Сайт для изучения и тестирования регулярных выражений - https://regexr.com/

Визуализация JSON (XML, CSV, YAML, TOML) - https://jsoncrack.com/

{JSON} Placeholder - https://jsonplaceholder.typicode.com/

Подборка цветов adobe - https://color.adobe.com/ru/create/color-wheel

Подборка ключевых слов от Yandex - https://wordstat.yandex.ru

Документация commonmark - https://spec.commonmark.org/0.30/

Криптоиконки - https://cryptologos.cc/

БЭМ - https://ru.bem.info/methodology/declarations/

Посмотреть keycode - https://www.toptal.com/developers/keycode

- Event loop

Документация git - https://git-scm.com/