kaggle — сайт, на котором собраны бесплатные курсы по программированию для начинающих. Среди направлений: Python, машинное обучение, SQL.

⛓ Ссылка: тык

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

Основы web-дизайна. Методика проектирования

Автор: Нагаева И. А.
Год издания: 2021

⬇️ Скачать книгу

➡️ @byFrontDeveloper | #книги

Курс TypeScript

В данном видеокурсе мы с вами рассмотрим возможности языка строгой типизации - TypeScript. Разберём его основные фишки и ключевые отличия от JavaScript. Изучим такие понятия, как перечисления (Enum), интерфейсы, пространства имён. И в дополнение, рассмотрим набор нативных утилит, которые предоставляет сам язык.

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

➡️ @byFrontDeveloper | #курсы

7 способов скрыть элемент с помощью CSS: на заметку фронтенд-разработчику

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

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

⛓ Ссылка: тык

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

Простая шпаргалка по поисковой оптимизации для веб-разработчика

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

Типы данных JavaScript под капотом: гайд для фронтенд-разработчика

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

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

Шпаргалка по 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 | #ресурсы