Frontend Developer
前往频道在 Telegram
Обучающие видео, готовый код, полезные ресурсы и статьи Наш чат — https://t.me/+1lXro3gcUwM2YmY6 Сотрудничество – @argo_chat
显示更多
网络:2 264
订阅者
无数据24 小时
-27 天
-3130 天
帖子存档
2 264
67 странных приемов отладки, о которых ваш браузер не хочет, чтобы вы знали 👆
Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.
📖 Читать: ссылка
➡️ @byFrontDeveloper | #cтатьи
2 264
Знал ли ты, что можно открыть браузер в VSCode?
Без расширений и установок. Всё уже встроено!
Твой код и изменения в одном окне 👆
✔️ #tip by Miguel Ángel Durán
➡️ @byFrontDeveloper | #ресурсы
2 264
⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника
Опыт в программировании не нужен.
На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить
С 10 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать фреймворки — Angular и React
Вот план обучения:
💡 с 10 по 15 декабря свой киносайт на Angular
💡 а с 17 по 21 декабря свою доску объявлений на React
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее
Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду.
Поделится способом трудоустройства с помощью ИИ.
Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией
Подписывайтесь, чтобы участвовать бесплатно
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
👉Участвовать бесплатно
Первые уроки уже доступны
2 264
Создание интерактивной 3D-графики с Three.js
Библиотека Three.js — это популярная JavaScript-библиотека, которая используется для создания 3D-графики в веб-браузере с использованием WebGL.
*️⃣ Она упрощает создание, рендеринг и манипулирование 3D-объектами, сценами, освещением, текстурами и камерами, делая их доступными для разработчиков
🔜 Ссылка
➡️ @byFrontDeveloper | #ресурсы
2 264
Простое создание регулярных выражений на JavaScript 👩💻
Этот репозиторий содержит библиотеку для JavaScript, упрощающую создание и использование регулярных выражений. Она позволяет строить сложные регулярные выражения, используя более читаемый, похожий на английский язык синтаксис.
*️⃣ Библиотека поддерживает типичные операции, такие как тестирование шаблонов, замена строк и многое другое. В репозитории есть примеры, документация и инструменты для тестирования и создания библиотеки.
🔜 Ссылка
➡️ @byFrontDeveloper | #ресурсы
2 264
18 однострочников JavaScript, которые можно взять на вооружение: на заметку фронтенд-разработчику
➡️ @byFrontDeveloper | #ресурсы
2 264
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 | #ресурсы
2 264
Самый полный курс по обновленной Фигма
«Эти уроки я записывала для моего платного курса «Старт в дизайне», а сейчас решила поделиться ими с вами бесплатно. После прохождения этого курса ты освоишь фигму и создашь классную работу. Каждый день выходит 1 новый урок»
📺 Cсылка на курс: YouTube
➡️ @byFrontDeveloper | #курсы
2 264
Новая ИГРА для изучения CSS!
Она научит вас создавать всплывающие подсказки без JavaScript.
Как? Благодаря новой API Anchor.
От создателей Flexbox Froggy.
🔜 http://anchoreum.com
➡️ @byFrontDeveloper | #ресурсы
2 264
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
2 264
Пожалуй самый большой список из 1000 вопросов для собеседования по JavaScript! 🔥
Он создан для разработчиков, которые готовятся к техническим интервью, а также для тех, кто хочет улучшить свои знания JavaScript
Кратко что внутри:
🟡Современные фичи ES6+
🟡Вопросы по DOM и BOM
🟡Связь JavaScript с браузером
🟡Вопросы по фреймворкам и библиотекам (React, Angular, Vue)
🟡Асинхронное программирование
и тд.
*️⃣Репозиторий постоянно обновляется, поэтому это отличный ресурс для изучения и подготовки к интервью.
🔜 https://github.com/sudheerj/javascript-interview-questions?tab=readme-ov-file
➡️ @byFrontDeveloper | #ресурсы
2 264
Мало кто по-настоящему понимает Event Loop в JavaScript 🧑💻
Этот ресурс объясняет его пошагово и наглядно.
Вставь свой код, и он покажет, как всё выполняется:
🔜 https://vault-developer.github.io/event-loop-explorer/
➡️ @byFrontDeveloper | #ресурсы
2 264
⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника
Опыт в программировании не нужен.
На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить
С 3 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать три фреймворка — Vue, Angular и React
Вот план обучения:
💡 с 3 декабря напишете фронтенд для сервиса доставки
💡 с 10 декабря свой киносайт
💡 а с 17 по 21 декабря свою доску объявлений
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее
Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду.
Поделится способом трудоустройства с помощью ИИ.
Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией
Подписывайтесь, чтобы участвовать бесплатно
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
👉Участвовать бесплатно
Первые уроки уже доступны
2 264
Нашел классную штуку для фронтендеров — BigDevSoon
Это платформа с 100 челленджами для прокачки навыков. Здесь есть задачи на любой вкус: от верстки до сложных штук с JavaScript, анимациями и прочими веб-фишками.
Что круто:
⏩Разные уровни сложности — подойдет и новичкам, и профи.
⏩Фокус на практику, а не сухую теорию.
⏩Реальные задачи, которые развивают навыки, применимые в реальной работе.
➡️ @byFrontDeveloper | #ресурсы
2 264
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
2 264
Вы можете создавать микровзаимодействия, управляемые прокруткой, с помощью
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;
}