27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Позиционирование с помощью якорей в CSS
Anchor Positioning API — новый API для привязки элементов на странице друг к другу с учётом прокрутки и границ вьюпорта
С ним можно будет отказаться от отдельных библиотек для тултипов во многих случаях
👉 Статья с подробностями: тык
👉 Игра для изучения: http://anchoreum.com
➡️ @FrontendPortal | #CSS
✅️ GitHub теперь в Telegram!
Подписывайтесь: @GitHub
Устали работать по кривым ТЗ?
Коллеги из moab поделились готовой рыбой технического задания на разработку лендов.
⚡️Это таблица, которой можно пользоваться, как конструктором.
⚡️В документе предусмотрены все ключевые блоки и объясняется, зачем они нужны, из чего состоят, как должны отображаться на фронте.
Захотели — поменяли местами, выкинули лишнее, перекроили под себя.
Есть 2 типа заказчиков: «сделайте на свое усмотрение» и «никто лучше меня не знает мой продукт». Для первых — передаем файл копирайтеру, пусть вставит тексты в отмеченные поля. Для вторых — отправляем файл заказчику, пусть заполняет в свое удовольствие.
А дизайнер/frontend-разработчик в результате получит готовое структурированное ТЗ.
К доку прилагается статья-лонгрид с объяснениями базы и примерами. Почитать и утащить к себе можно на VC: https://vc.ru/marketing/1679135-kak-sostavit-gramotnoe-tz-na-prodayushii-lending-za-60-minut-i-nichego-ne-upustit/?erid=LjN8JyQHr
Откопал ещё одну классную штуку — Swapy
Это инструмент для создания drag-and-drop интерфейсов всего за пару строк кода
Работает с любым фреймворком: React, Vue, Angular, Svelte или даже без них.
Гибко настраивается, позволяет выделять слоты и элементы для перетаскивания, добавлять анимации, и отслеживать изменения.
Лёгкий в установке и супер понятный в использовании.
npm install swapy
box-sizing: content-box vs border-box
При помощи свойства box-sizing можно изменить то, как браузер будет рассчитывать размеры элемента
🔸content-box — значение по умолчанию. Финальная ширина = ширина + правый внутренний отступ + левый внутренний отступ + правая рамка + левая рамка
🔸border-box — значение width и height являются финальными размерами элемента. Финальная ширина = ширина
➡️ @FrontendPortal | #CSS
Начинать путь в мобильной разработке непросто даже тем, кто уже работает в IT.
В своём канале Илья, android-разработчик с 10-летним стажем, даёт ценные советы о том, как быстрее получить минимальный набор знаний, чтобы устроиться на работу.
Android-разработка на kotlin привлекает множеством вакансий и возможностью освоить за месяц язык, который пригодится даже в бэкенде. А процессы разработки сайтов и приложений во многом похожи.
Подписывайтесь на канал Ильи и получите пошаговый план развития с нуля до Junior.
Также в канале вас ждут лучшие практики, лайфхаки, советы по созданию портфолио и поиску работы.
🈳 Действия формы автоматически сбрасывают форму в React
Но что, если вы этого не хотите?
✔️ #tip by Alex Sidorenko
➡️ @FrontendPortal
Элегантный способ обрезать длинный текст 💃
Хитрость здесь заключается в том, чтобы поместить псевдоэлемент поверх текста и придать ему линейный градиент слева направо, переходящий от прозрачного к сплошному цвету, чтобы создать этот эффект затухания
➡️ @FrontendPortal | #CSS
⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника
Опыт в программировании не нужен.
На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить
С 10 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать фреймворки — Angular и React
Вот план обучения:
💡 с 10 по 15 декабря свой киносайт на Angular
💡 а с 17 по 21 декабря свою доску объявлений на React
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее
Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду.
Поделится способом трудоустройства с помощью ИИ.
Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией
Подписывайтесь, чтобы участвовать бесплатно
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
👉Участвовать бесплатно
Первые уроки уже доступны
🈳 Улучшения, представленные в React 19:
🔹ref как проп
ref теперь можно передавать как пропс в функциональные компоненты.
🔹Различия для ошибок гидратации
React добавил улучшенную диагностику для ошибок гидратации.
🔹<Context> как провайдер
<Context> теперь может использоваться непосредственно как провайдер вместо <Context.Provider>
🔹Функции очистки для refs
Теперь можно задавать функции очистки для refs, что позволяет избегать утечек памяти.
🔹Начальное значение для useDeferredValue
Возможность задавать начальное значение для useDeferredValue.
🔹Метаданные документа, таблицы стилей, асинхронные скрипты, предварительная загрузка ресурсов
Улучшенная поддержка работы с мета-данными, таблицами стилей, асинхронными скриптами и ресурсами для предварительной загрузки.
👉 Полный список изменений можно найти в официальном блоге React
➡️ @FrontendPortal | #react
⭐️ Сборка мусора в JS
Примечание: Как только объект становится недоступным, реализация (JavaScript-движок в браузере или Node.js) не обязательно должна сразу его очищать. В большинстве реализаций используется планировщик, который периодически анализирует граф объектов, чтобы определить и освободить области памяти, которые стали недоступными.
Надеюсь, это было полезно! 👍
➡️ @FrontendPortal | #js
Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT.
Опыт в программировании не нужен.
Завтра запускаем бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения.
За 7 дней обучения ты:
1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Узнаешь сколько можно зарабатывать и как работать;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов.
👉 Проскочить на интенсив бесплатно
🔥 С нас обучение, практика и помощь с выходом на фриланс.
Не знаете, какую единицу измерения использовать в CSS? 😐
px, rem, em, fr, %, vh... Их слишком много!
Эта диаграмма — РЕШЕНИЕ!
Примите обоснованное решение, какая единица вам подойдет:
🔜 https://whatunit.com
➡️ @FrontendPortal | #resourse
В DevTools есть множество недооценённых инструментов для анализа и мониторинга, один из которых — инструмент анализа покрытия.
На этапе оптимизации вашей веб-страницы вы можете использовать этот инструмент, чтобы обнаружить и удалить неиспользуемый код.
👉 Это особенно актуально, если вы используете какую-либо библиотеку для JS или CSS.
Например, если вы используете lodash и обнаруживаете, что применяете лишь несколько методов из библиотеки, стоит импортировать отдельные модули вместо всей библиотеки.
То же самое касается библиотек стилей 😁
➡️ @FrontendPortal | #devtools
Новая фишка в VS Code! 😐
Только что наткнулся на супер-удобную штуку — теперь Git Blame работает прямо из коробки в VS Code! Без всяких расширений и танцев с бубном.
Для тех, кто не в курсе: git blame — это команда в Git, которая показывает, кто и когда последний раз редактировал каждую строку в файле.
Обновите свой редактор и активируйте новую настройку ☹️
➡️ @FrontendPortal | #vscode
Различные компоненты URL 🔥
Хотя мы воспринимаем URL как единое целое, они разбиваются на несколько частей, каждая из которых выполняет свою роль и имеет свою видимость.
➡️ @FrontendPortal | #разное
Принёс вам очередную крутую тулзу — Unlighthouse
Это инструмент, который сканирует весь ваш сайт за пару минут, используя Google Lighthouse. Он помогает находить проблемы с производительностью, доступностью и SEO на всех страницах, а не только на главной.
Автоматически находит URL-адреса, визуализирует состояние сайта, имеет современные UI и полезные интеграции
Запустите это:
npx unlighthouse --site <ваш-сайт>
Простое и понятное объяснение, что такое API, чтобы даже ребёнок разобрался
Метафоры, схемы и даже мем с разоблачением "стартапов" — всё подано максимально понятно и с долей юмора
Надеюсь, теперь API стал чуть понятнее, а не ещё загадочнее 😐.
➡️ @FrontendPortal | #разное
Как снизить затраты на разработку UI? / Как масштабировать изменения в UI без лишних затрат? / Как экономить на разработке UI без потери качества?
Узнайте 18 декабря на бесплатном вебинаре СберТеха «UI-выгорание, или что не так с бренд-дизайном приложений».
Эксперты СберТеха поделятся опытом собственных проектов и расскажут, как создали решение, которое в разы ускоряет разработку и масштабирование изменений UI.
Platform V One UI — библиотека UI-компонентов с трехуровневой дизайн-токен системой, а также low-code инструментами стилизации и генерации UI-форм и сценариев.
Также на вебинаре узнаете, какие инструменты Platform V One UI доступны в open source, и увидите демо продукта.
Регистрируйтесь и приходите!
Нашел классную штуку для анимации чисел — Number Flow
Это компонент, который оживляет цифры в интерфейсе. Поддерживает React, Vue, и Svelte, работает без зависимостей и супер кастомизируется.
Можно менять стили, форматировать числа под локали, добавлять анимации и всякие приколюхи вроде префиксов/суффиксов
Прекрасно подойдет для графиков, цен, таймеров и прочих числовых данных.
👉 Зацените сами: http://number-flow.barvian.me
➡️ @FrontendPortal | #resourse
Простое введение в Redis 😐
➡️ @FrontendPortal | #разное
В России можно посещать бесплатные IT-мероприятия хоть каждый день: как оффлайн, так и онлайн.
Чтобы не пропустить полезные — сохраните канал @FreeItEvent.
Анонсы вебинаров, хакатонов, конференций, мастер-классов и других событий в IT. Ивенты от гигантов индустрии и лучших специалистов по frontend разработке, аналитике и программированию.
Всё публикуют здесь.
Нашёл отличную тулзу для приложений на React
Проверьте производительность без установки и расширений!
React Scan — это инструмент для поиска слабых мест, не требующий внесения изменений в код проекта
Выполните эту команду в терминале:
npx react-scan@latest <URL>
Тосты — это ненавязчивая форма уведомлений, которые отображаются (обычно в углу) всего на несколько секунд
Вот как вы можете создать свой собственный тост с использованием HTML, CSS и JavaScript без сторонних библиотек!
⏩ Использование:
Просто вызовите методы showToast и hideToast. Рекомендуется вызывать hideToast через setTimeout через несколько секунд, чтобы тост автоматически закрывался.
➡️ @FrontendPortal | #tutorial
📁🕵 В Windows есть папка, которая собирает на вас компромат!
Культ безопасности опять предупредил своих подписчиков, как разгрузить компьютер от слежки и лагов системы.
А ещё он рассказывает о признаках майнеров, как удалить трояны и порно-баннеры за 5 минут
Почему греется проц без запущенных приложений и загружен HDD или SSD.
💻 Подпишитесь на Культ Безопасности — залог цифровой гигиены и компьютерной грамотности
Более 50 различных полей ввода с Tailwind для React!
Готовы для копирования и вставки в ваш проект
→ http://originui.com/inputs
➡️ @FrontendPortal | #resourse
Функция clamp()
Функция clamp() позволяет ограничивать диапазон изменения некоего значения, задавая его нижний и верхний пределы
.box {
width: clamp(100px, 50%, 200px);
}
Совет на 2025 год - учите Data Science и Machine learning
Все нейросети, базы данных компаний, выявление болезней и многое другое - не обходятся без DS и ML.
А чтобы освоиться за несколько месяцев, а не лет, читайте канал Data Science. В нём на пальцах рассказывается, что и как учить, чтобы стать специалистом.
Начните 2025 год с освоения новой профессии - devsp
МЕГА-коллекция кастомных хуков для React.
Сэкономит вам много времени при разработке!
✓ 50 готовых хуков
✓ С примерами кода
✓ Совместимы с TypeScript
🔜 http://usehooks.com
➡️ @FrontendPortal | #resourse