Frontend Developer

СУПЕРФИШКА в VS Code 😜 Создавайте файл и его папки одним шагом ➡️ @byFrontDeveloper | #ресурсы

67 странных приемов отладки, о которых ваш браузер не хочет, чтобы вы знали 👆 Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера. 📖 Читать: ссылка ➡️ @byFrontDeveloper | #cтатьи

Знал ли ты, что можно открыть браузер в VSCode? Без расширений и установок. Всё уже встроено! Твой код и изменения в одном окне 👆 ✔️ #tip by Miguel Ángel Durán ➡️ @byFrontDeveloper | #ресурсы

⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 10 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать фреймворки — Angular и React Вот план обучения: 💡 с 10 по 15 декабря свой киносайт на Angular 💡 а с 17 по 21 декабря свою доску объявлений на React Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способом трудоустройства с помощью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать бесплатно Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первые уроки уже доступны

Создание интерактивной 3D-графики с Three.js Библиотека Three.js — это популярная JavaScript-библиотека, которая используется для создания 3D-графики в веб-браузере с использованием WebGL. *️⃣ Она упрощает создание, рендеринг и манипулирование 3D-объектами, сценами, освещением, текстурами и камерами, делая их доступными для разработчиков 🔜 Ссылка ➡️ @byFrontDeveloper | #ресурсы

Простое создание регулярных выражений на JavaScript 👩‍💻 Этот репозиторий содержит библиотеку для JavaScript, упрощающую создание и использование регулярных выражений. Она позволяет строить сложные регулярные выражения, используя более читаемый, похожий на английский язык синтаксис. *️⃣ Библиотека поддерживает типичные операции, такие как тестирование шаблонов, замена строк и многое другое. В репозитории есть примеры, документация и инструменты для тестирования и создания библиотеки. 🔜 Ссылка ➡️ @byFrontDeveloper | #ресурсы

Готовишься к собеседованию в IT? Разбираем для тебя самые актуальные вопросы для подготовки Выбирай направление: 👩‍💻 Frontend 👩‍💻 Python 👩‍💻 Go 👩‍💻 Java 👩‍💻 C/C++ 👩‍💻 C# 👩‍💻 PHP 👩‍💻 QA 🖥 SQL 👩‍💻 Git

Рукописные заметки SQL 🔜 Скачать: тык ➡️ @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 | #ресурсы

Самый полный курс по обновленной Фигма «Эти уроки я записывала для моего платного курса «Старт в дизайне», а сейчас решила поделиться ими с вами бесплатно. После прохождения этого курса ты освоишь фигму и создашь классную работу. Каждый день выходит 1 новый урок» 📺 Cсылка на курс: YouTube ➡️ @byFrontDeveloper | #курсы

Новая ИГРА для изучения CSS! Она научит вас создавать всплывающие подсказки без JavaScript. Как? Благодаря новой API Anchor. От создателей Flexbox Froggy. 🔜 http://anchoreum.com ➡️ @byFrontDeveloper | #ресурсы

CodHub теперь в Telegram❗️ Добро пожаловать в наш проект CodHub l Программирование — Мы собираем для вас лучшие материалы любых направлений в одном канале: 📱 Frontend 👩‍💻 C++ 📱 Python 🤔 Hacking 📱 Java 👩‍💻 Golang 📱 C# 👩‍💻 Linux 👩‍💻 Lua 👩‍💻 php 👩‍💻 Kotlin 👩‍💻 Git 👩‍💻 Assembler 👩‍💻 Swift 🖥 SQL 👩‍💻 Mob. Develop 👣 Backend 🐞 Qa Automation 🖥 Arduino 🖥 Desing Успей подписаться❗️ — @CodHub_tg

Пожалуй самый большой список из 1000 вопросов для собеседования по JavaScript! 🔥 Он создан для разработчиков, которые готовятся к техническим интервью, а также для тех, кто хочет улучшить свои знания JavaScript Кратко что внутри: 🟡Современные фичи ES6+ 🟡Вопросы по DOM и BOM 🟡Связь JavaScript с браузером 🟡Вопросы по фреймворкам и библиотекам (React, Angular, Vue) 🟡Асинхронное программирование и тд. *️⃣Репозиторий постоянно обновляется, поэтому это отличный ресурс для изучения и подготовки к интервью. 🔜 https://github.com/sudheerj/javascript-interview-questions?tab=readme-ov-file ➡️ @byFrontDeveloper | #ресурсы

Мало кто по-настоящему понимает Event Loop в JavaScript 🧑‍💻 Этот ресурс объясняет его пошагово и наглядно. Вставь свой код, и он покажет, как всё выполняется: 🔜 https://vault-developer.github.io/event-loop-explorer/ ➡️ @byFrontDeveloper | #ресурсы

⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 3 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать три фреймворка — Vue, Angular и React Вот план обучения: 💡 с 3 декабря напишете фронтенд для сервиса доставки 💡 с 10 декабря свой киносайт 💡 а с 17 по 21 декабря свою доску объявлений Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способом трудоустройства с помощью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать бесплатно Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первые уроки уже доступны

Нашел классную штуку для фронтендеров — BigDevSoon Это платформа с 100 челленджами для прокачки навыков. Здесь есть задачи на любой вкус: от верстки до сложных штук с JavaScript, анимациями и прочими веб-фишками. Что круто: ⏩Разные уровни сложности — подойдет и новичкам, и профи. ⏩Фокус на практику, а не сухую теорию. ⏩Реальные задачи, которые развивают навыки, применимые в реальной работе. ➡️ @byFrontDeveloper | #ресурсы

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Вы можете создавать микровзаимодействия, управляемые прокруткой, с помощью 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 | #ресурсы