Шпаргалка по React 19 от Kent C Dodds, создателя Epic React

Это отчасти шпаргалка, отчасти краткое напоминание о некоторых новых возможностях React 19 с простыми примерами кода.

➡️ @byFrontDeveloper | #ресурсы

У меня для вас реально превосходная вещь!

Библиотека на JavaScript для генерации PDF-документов 👩‍💻

Это популярный инструмент, который позволяет разработчикам создавать PDF прямо в браузере без необходимости использования серверных решений или стороннего программного обеспечения.

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Лучше уже не будет!

JavaScript-библиотека для создания анимаций. Она предоставляет мощные и гибкие инструменты для анимации HTML, SVG, CSS и объектов JavaScript.

Пример использования:

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  duration: 800
});

Этот код создаёт анимацию, в которой элемент div перемещается на 250px вправо и поворачивается на один полный оборот.

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Полное руководство по Web Push API

📖 Читать: ссылка

➡️ @byFrontDeveloper | #cтатьи

Современный учебник JavaScript 👩‍💻

Перед вами один из самых популярных и подробных русскоязычных ресурсов для изучения JS, как для новичков, так и для тех, кто хочет углубить свои знания.

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Вы можете создавать микровзаимодействия, управляемые прокруткой, с помощью animation-timeline и кастомных свойств.

.search {
    animation: shrink;
    animation-timeline: scroll();
    animation-range: 0 calc(var(--header-height) * 0.5);
}
@keyframes shrink {
    to { width: calc(100% - var(--button-size)); }
}

Переменная --header-height используется для определения высоты контейнера заголовка. Вы можете использовать это для animation-range, применяемого в различных анимациях прокрутки 

В качестве другого примера, вы можете анимировать появление тени (box-shadow) на заголовке, как только поиск зафиксирован 

header {
      animation: shadow;
      animation-timeline: scroll();
      animation-range:
          var(--header-height)
          calc(var(--header-height) * 1.5);
}
@keyframes shadow {
    to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}

Все это работает на основе scroll() в animation-timeline, который подключается к прокрутке страницы. И затем используя --header-height в различных animation-range 

Вы можете нажать на выглядывающего медведя, чтобы прокрутить страницу вверх:

<a href="#">Back to top</a>

CSS :focus-within используется для активации плавной прокрутки только для этого взаимодействия.

html:focus-within {
    scroll-behavior: smooth;
}

➡️ @byFrontDeveloper | #ресурсы

Нашел классную штуку для фронтендеров — BigDevSoon

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

Что круто:
⏩Разные уровни сложности — подойдет и новичкам, и профи.
⏩Фокус на практику, а не сухую теорию.
⏩Реальные задачи, которые развивают навыки, применимые в реальной работе.

➡️ @byFrontDeveloper | #ресурсы

Мало кто по-настоящему понимает Event Loop в JavaScript 🧑‍💻

Этот ресурс объясняет его пошагово и наглядно.

Вставь свой код, и он покажет, как всё выполняется:

🔜 https://vault-developer.github.io/event-loop-explorer/

➡️ @byFrontDeveloper | #ресурсы

Пожалуй самый большой список из 1000 вопросов для собеседования по JavaScript! 🔥

Он создан для разработчиков, которые готовятся к техническим интервью, а также для тех, кто хочет улучшить свои знания JavaScript

Кратко что внутри:

🟡Современные фичи ES6+
🟡Вопросы по DOM и BOM
🟡Связь JavaScript с браузером
🟡Вопросы по фреймворкам и библиотекам (React, Angular, Vue)
🟡Асинхронное программирование
и тд.

*️⃣Репозиторий постоянно обновляется, поэтому это отличный ресурс для изучения и подготовки к интервью.

🔜 https://github.com/sudheerj/javascript-interview-questions?tab=readme-ov-file

➡️ @byFrontDeveloper | #ресурсы

Новая ИГРА для изучения CSS!

Она научит вас создавать всплывающие подсказки без JavaScript.

Как? Благодаря новой API Anchor.

От создателей Flexbox Froggy.

🔜 http://anchoreum.com

➡️ @byFrontDeveloper | #ресурсы

Самый полный курс по обновленной Фигма

«Эти уроки я записывала для моего платного курса «Старт в дизайне», а сейчас решила поделиться ими с вами бесплатно. После прохождения этого курса ты освоишь фигму и создашь классную работу. Каждый день выходит 1 новый урок»

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

➡️ @byFrontDeveloper | #курсы

7 лучших гитхаб-репозиториев для JS! 👩‍💻

1. https://github.com/getify/You-Dont-Know-JS

2. https://github.com/trekhleb/javascript-algorithms

3. https://github.com/30-seconds/30-seconds-of-code

4. https://github.com/thedaviddias/Front-End-Checklist

5. https://github.com/yangshun/front-end-interview-handbook

6. https://github.com/microsoft/Web-Dev-For-Beginners

7. https://github.com/sudheerj/reactjs-interview-questions

➡️ @byFrontDeveloper | #ресурсы

Рукописные заметки SQL

🔜 Скачать: тык

➡️ @byFrontDeveloper | #ресурсы

18 однострочников JavaScript, которые можно взять на вооружение: на заметку фронтенд-разработчику

➡️ @byFrontDeveloper | #ресурсы

Простое создание регулярных выражений на JavaScript 👩‍💻

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

*️⃣ Библиотека поддерживает типичные операции, такие как тестирование шаблонов, замена строк и многое другое. В репозитории есть примеры, документация и инструменты для тестирования и создания библиотеки.

🔜 Ссылка

➡️ @byFrontDeveloper | #ресурсы

Создание интерактивной 3D-графики с Three.js

Библиотека Three.js — это популярная JavaScript-библиотека, которая используется для создания 3D-графики в веб-браузере с использованием WebGL.

*️⃣ Она упрощает создание, рендеринг и манипулирование 3D-объектами, сценами, освещением, текстурами и камерами, делая их доступными для разработчиков

🔜 Ссылка

➡️ @byFrontDeveloper | #ресурсы

Знал ли ты, что можно открыть браузер в VSCode?

Без расширений и установок. Всё уже встроено!

Твой код и изменения в одном окне 👆

✔️ #tip by Miguel Ángel Durán

➡️ @byFrontDeveloper | #ресурсы

Дорожная карта для фронтенд-разработчиков

Сохраняй 🏃‍♂️

➡️ @byFrontDeveloper | #ресурсы

67 странных приемов отладки, о которых ваш браузер не хочет, чтобы вы знали 👆

Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.

📖 Читать: ссылка

➡️ @byFrontDeveloper | #cтатьи

СУПЕРФИШКА в VS Code 😜

Создавайте файл и его папки одним шагом

➡️ @byFrontDeveloper | #ресурсы

Анимация для веба 🔝

Animista — это онлайн-инструмент для создания и предварительного просмотра CSS-анимаций. Он предоставляет широкий выбор анимационных эффектов, которые можно легко применить к элементам веб-страницы.

☑️ На сайте можно настроить различные параметры анимаций, такие как скорость, направление и задержка, а затем сгенерировать готовый CSS-код для использования в своих проектах.

📑 @byFrontDeveloper | #cтатьи