Подборка 4-крутых библиотек для фронтендера

Popper — для создания тултипов и всплывающих окон

Swiper JS —  самый современный бесплатный мобильный сенсорный слайдер

noUiSlider — это легкий слайдер диапазона

Sortable JS — создание сортируемого списка (перетаскивание элементов)

👉 @byFrontDeveloper | #ресурс

jаvascript. Полное руководство, 7-е издание

Авторы: Дэвид Флэнаган
Год: 2021

🔗 Скачать книгу

👉 @byFrontDeveloper | #книги

Подборка интересных web-игр с готовым кодом с CodePen

Tower Blocks — игра по строительству башен. Размещайте блоки с помощью кликов, касаний или пробелов

Бешеный бег доблестного кролика — игра по спасению малыша кролика от злого волка

Platform game engine — простой платформенный игровой движок с мячиком, есть возможность гибкой настройки карты

Шахматы с искусственным интеллектом  — игра в шахматы против друга, против ИИ или ИИ сам против себя же

Крестики-нолики — простая игра в крестики-нолики написанная только на HTML(Pug) и CSS(SCSS)

COLORON GAME — игра с прыгающим мячом и столбы у которых нужно изменять цвет под цвет мяча

👉 @byFrontDeveloper | #код #игры

Автоматическое увеличение высоты textarea

Реализовано на HTML, CSS и JS

🔗 Код: Codepen

👉 @byFrontDeveloper | #код

Webpack ПОЛНЫЙ КУРС от А до Я. Вся конфигурация, Микрофронтенд, Монорепозиторий, Module Federation

В этом ролике мы реализуем полную конфигурацию Webpack. Настроим typescript, react, babel. Научимся работать со стилями и css modules. Рассмотрим большую часть возможностей webpack 5. Реализуем монорепозиторий с микрофронтендом на основе workspaces и Module federation

📺 Cсылка на курс: YouTube

👉 @byFrontDeveloper | #курсы #Webpack

Переключаем режим редактирования для всего документа

Когда мы изменяем HTML, обычно нужно дождаться обновления страницы, чтобы увидеть изменения. Вы можете сэкономить время, используя designMode, который позволяет мгновенно изменять страницу

Чтобы переключить режим разработки, введите следующий код:

document.designMode="on"

👉 @byFrontDeveloper | #лайфхак

Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта.

🔗 Ссылка: https://docs.emmet.io/cheat-sheet/

👉 @byFrontDeveloper | #ресурс

Всплывающее уведомление с индикатором выполнения

Реализовано на HTML, CSS и JS

🔗 Код: Codepen

👉 @byFrontDeveloper | #код

Учим Flexbox, уничтожая зомби - это же надо было так заморочиться :)

Изначально ценник на этот курс/игру был $179, сейчас в свободном доступе

🔗 Ссылка: https://flexboxzombies.com/p/flexbox-zombies

👉 @byFrontDeveloper | #игры

Мини курс по Fullstack-разработке [2023]

В этом плейлисте вы разработаете Fullstack приложение на NestJS, ReactJs, PostgreSQL,TypeScript.

📺 Cсылка на курс: YouTube

👉 @byFrontDeveloper | #курсы #Fullstack

Разработка веб-приложений на WordPress. 2-е издание

Авторы: Б. Мессенленер, Д. Коулман
Год: 2021

🔗 Скачать книгу

👉 @byFrontDeveloper | #книги

Уверен, каждый начинающий HTML-верстальщик, время от времени задаётся вопросом, можно ли вкладывать какой-либо HTML-тег в другой. Например, можно ли вложить img или div в тег абзаца p

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

🔗 Ссылка: https://caninclude.glitch.me/

👉 @byFrontDeveloper | #ресурс

Animate.css — это библиотека готовых к использованию кроссбраузерных анимаций для ваших проектов

🔗 Ссылка: https://animate.style/

👉 @byFrontDeveloper | #ресурс

Animated Movie Card

Реализовано на HTMLи CSS

🔗 Код: Codepen

👉 @byFrontDeveloper | #код

JavaScript Visualizer 9000 — потрясающий инструмент, позволяющий наглядно видеть порядок выполнения JavaScript кода

Можно выбрать из предлагаемых примеров или запустить выполнение своего кода (думаю, часто встречали такие задачи - "в каком порядке выполнится код?")

Очень полезно для понимания JavaScript в целом

🔗 Ссылка: https://www.jsv9000.app/

👉 @byFrontDeveloper | #ресурс

Система контроля версий - GIT

Искали полный курс по GIT? Вы его нашли. Step-by-step на простых примерах вы узнаете все необходимое

📺 Cсылка на курс: YouTube

👉 @byFrontDeveloper | #курсы #GIT

Retro Gadgets — это симулятор для инженера - программиста, где вы собираете совершенно любой гаджет. Программируете вы все это дело на языке Lua, во встроенном редакторе и после чего, загружаете код на виртуальный ЦП

🔗 Ссылка: https://www.retrogadgets.game/

👉 @byFrontDeveloper | #игры

TypeHero — платформа для изучения TypeScript на практике с готовыми задачами и возможностью создания собственных задач

🔗 Ссылка: https://typehero.dev

👉 @byFrontDeveloper | #ресурс

Анимация смены текста

Реализовано на HTML, CSS и JS

🔗 Код: Codepen

👉🏿 @byFrontDeveloper | #код

TIS-100 - это логическая игра, где вы выступаете в роли программиста на Assembler, пытающегося исправить код компьютерной системы с одноименным
названием

🔗 Ссылка: https://gamestracker.org/torrents/0-0-0-7488-20

👉🏿 @byFrontDeveloper | #игры