🖥 7 репозиториев GitHub, которые должен знать каждый front-end разработчик

GitHub — это золотая жила ресурсов, и каждый разработчик это знает. Итак, в этой статье мы поделимся некоторыми из лучших репозиториев GitHub, о которых должен знать каждый фронтенд-разработчик. Давайте начнем.

Чистый код JavaScript
Концепции чистого кода, адаптированные для JavaScript, сделают вас лучшим разработчиком программного обеспечения. Каждый фрагмент кода начинается с первого наброска, подобно тому, как мокрой глине придается окончательная форма. Наконец, мы устраняем недостатки, когда обсуждаем их с нашими коллегами. Не корите себя за первые наброски, которые нуждаются в улучшении. Вместо этого разбейте код.

Ссылка на GitHub: https://github.com/ryanmcdermott/clean-code-javascript

Алгоритмы JavaScript и структура данных
Алгоритмы и структуры данных, реализованные в JavaScript, с пояснениями и ссылками на дополнительную литературу.

Этот репозиторий содержит примеры многих популярных алгоритмов и структур данных на основе JavaScript.

Каждый алгоритм и структура данных имеют свой собственный отдельный README с соответствующими пояснениями и ссылками для дальнейшего чтения (в том числе на видео YouTube).

Ссылка на GitHub: https://github.com/trekhleb/javascript-algorithms

Вы не знаете JavaScript
Это серия книг по JavaScript. Это серия книг, глубоко погружающих в основные механизмы языка JavaScript.

Ссылка на GitHub: https://github.com/getify/You-Dont-Know-JS

Лучшая практика NodeJS
Это хранилище представляет собой краткое изложение и кураторство самого рейтингового контента на Node.js лучшие практики, а также контент, написанный здесь сотрудниками. Это поможет многим разработчикам получить высококачественные знания о серверной разработке с помощью NodeJS.

Ссылка на GitHub: https://github.com/goldbergyoni/nodebestpractices

Контрольный список Frontend
Идеальный контрольный список интерфейсов для современных веб-сайтов и дотошных разработчиков. Он основан на многолетнем опыте интерфейсных разработчиков, с дополнениями, взятыми из некоторых других контрольных списков с открытым исходным кодом.

Ссылка на GitHub: https://github.com/thedaviddias/Front-End-Checklist

Бесплатно для разработчиков
Список предложений SaaS, PaaS и IaaS, которые имеют бесплатные уровни, представляющие интерес для DevOps и infra dev.

Объем этого конкретного списка ограничен вещами, которые разработчики инфраструктуры (системные администраторы, практики DevOps и т.д.), вероятно, сочтут полезными.

DSA в JavaScript
Этот репозиторий содержит структуры данных и алгоритмы, объясненные и реализованные в JavaScript + eBook.

Ссылка на GitHub: https://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript

@javascriptv

✅ Perlin Noise

Анимация голограммы. Реализована с помощью JavaScript и CSS.

#анимация #css

https://codepen.io/vcomics/pen/djqNrm

@javascriptv

🔥 Полезные библиотеки Javascript

Auto-Photoshop-StableDiffusion-Plugin - удобный подключаемый модуль, который позволяет легко создавать изображения c stable diffusion внутри Photoshop, используя Automatic1111-sd-webui в качестве бэкенда.

git clone https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git

🖥 Github

@javascriptv

✅ Photoshot — веб-приложение для создания аватаров с искусственным интеллектом с открытым исходным кодом.

⚙️ GitHub

yarn install

#typescript #soft #github

@javascriptv

🖥 Отслеживайте местоположения через VPN, используя одну строку JavaScript

Браузеры являются основной точкой соединения между пользователями и их сервисами. Поэтому неудивительно, что для их обеспечения предпринимаются значительные усилия.

Некоторое время назад браузеры выступали за то, чтобы предоставлять разработчикам больше возможностей для создания новых и улучшенных интерфейсов в Интернете. Это мнение изменилось с тех пор, как технологические гиганты стали собирать информацию о пользователях и отслеживать каждое действие, даже через разные веб-сайты.

Это осознание положило начало гонке вооружений между разработчиками API-интерфейсов браузера и разработчиками скриптов отслеживания. С тех пор, чем больше функций и опций у вашего браузера, тем больше у вас возможностей отслеживать каждого пользователя с более высокой степенью детализации.

✔️ Читать дальше

@javascriptv

⭐️ Attempt CSS3 Clickable Slider

Кликабельный слайдер. Реализован с помощью JavaScript и CSS.

#анимация #css #js

https://codepen.io/johnmotyljr/pen/kWwBOw

@javascriptv

✅ Mitosys Canvas

Фоновая анимация в виде деления клеток, реализованная с помощью JavaScript.

#js

https://codepen.io/supah/pen/BqREob

@javascriptv

❄️ Новогодний лоадер со снежком

Этот лоадер добавит новогоднего настроения вашему сайту. 3D-эффект здесь смотрится особенно хорошо, добавляя глубины и реалистичности. Посмотреть, как он реализован можно тут:

https://codepen.io/jkantner/pen/wvXbboe

#codepen #css #loader

@javascriptv

🖥 Before/After Image Slider

Слайдер "До/После", выполненный с помощью SVG, CSS и JavaScript.

#css #js

https://codepen.io/Coding-in-Public/pen/NWyjZwO

@javascriptv

🛡 15 источников со шпаргалками для разработчиков

Поскольку технологии веб-программирования быстро развиваются, нам приходится изучать много нового. Некоторые языки и фреймворки настолько сложны, что вы можете не запомнить их синтаксис. Шпаргалки – это заметки, которые помогут вам в этом.

✔️ Шпаргалки

@javascriptv

🖥 Touch device jelly menu concept

Анимация желейного меню при прокрутке. Реализована с помощью JavaScript и CSS.

#анимация #css #js

https://codepen.io/sol0mka/pen/AEbgXK

@javascriptv

🖥 Planck.js

Planck.js – небольшой физический 2D движок на JavaScript, что отлично подойдет для написания HTML5-игр. Интересный для ознакомления проект.

🖥 Github
✔️ Документация

@javascriptv

🖥 Subcolor – инструмент для генерации оттенков между двумя разными цветами

Представлен в двух видах: js-библиотеки и веб-сервиса

@javascriptv

🔥 Responsive Parallax Drag-slider With Transparent Letters

Отзывчивый слайдер Parallax с прозрачными буквами. Реализован с помощью JavaScript и CSS.

#анимация #parallax #css #js

https://codepen.io/mrspok407/pen/bwLwvL

@javascriptv

🖥 Оптимизация разработки на React.js: Советы и рекомендации экспертов

Это руководство познакомит вас с основными проблемами каждого разработчика React. Вам просто необходимо знать о них для того, чтобы быть в курсе, как справиться с этими проблемами. Советы из статьи, помогут вам в разработке ваших компонентов и организации вашего проекта. После этого введения, вам будут представлены рекомендации для ReactJS разраюотки, которые включают теоретические и практические советы и примеры кода.

➡️ Читать дальше

@react_tg

🖥 Infinite Scroll Animation – бесконечная прокрутка элементов, которая сделает сайт динамичнее и поможет уместить много заголовков в ограниченное пространство.

https://codepen.io/ykadosh/pen/KKezJzz

@javascriptv

🖥 Самые популярные проекты JavaScript в 2023 году.

Недавно “Best of JS” официально объявили список лучших проектов JavaScript 2023 года. В нём представлен обзор трендовых проектов в экосистеме JavaScript за последние 12 месяцев!

Список включает в себя следующие разделы: Most Popular Projects, Frontend Frameworks, React Ecosystem, Vue Ecosystem, Backend/Full Stack, Build Tools, CSS in JS, Testing Tools, Mobile, Desktop, Static Sites, State management, GraphQL.

➡️ Читать дальше

@javascriptv

⭐ 3D Futuristic Room | Pure CSS — 3D комната, созданная с помощью Pug, SCSS и JavaScript. Красивый и интресный для изучения проект.

https://codepen.io/ricardoolivaalonso/pen/LYzwGyW

@javascriptv