Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js


Гео и язык канала: Россия, Русский
Категория: Технологии


Полезные материалы по всему, что может быть интересно frontend-разработчику.
Учиться у нас: https://clc.la/proglib_academy
Обратная связь: @proglibrary_feedback_bot

По вопросам рекламы @proglib_adv
Прайс: @proglib_advertising
http://ad.proglib.io/


Гео и язык канала
Россия, Русский
Категория
Технологии
Статистика
Фильтр публикаций


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

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

📌Не самый свежий гайд, но он достоин того, чтобы остаться в ваших закладках.

👉 Читать


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

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

Back to top


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

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


➡️ Поиграть можно здесь

#css #tip by Jhey


Предновогодний митап Frontend Night by Sber!⚡

Уже в понедельник, 11 декабря, Frontend-команда Сбера приглашает всех фронтендеров на свой заключительный митап в этом году. В программе:

✔️ Антон Непша — Senior Frontend-разработчик департамента IT-блока «Транзакционный банкинг B2C» — расскажет о том, как продать бизнесу рефакторинг и использовать простые решения для масштабных результатов.

✔️ Роман Ганин — Senior Frontend-разработчик команды «Салют В2В» — поделится секретами о важности тегов и их влиянии на работу сайтов.

✔️ Алексей Охрименко — TechLead Yandex Cloud — рассмотрит статистический анализ кода и покажет, как применить этот подход на практике.

А еще: много нетворкинга, игры и подарки.
Подключайтесь онлайн или приходите офлайн по адресу: г. Москва, ул. Маросейка, 7/8, FotoFaktura.
Важно: для участия в любом формате необходима регистрация.


🔘SVG viewBox: гайд для фронтенд-разработчика

Творческий туториал с интерактивными примерами, который объясняет, как использовать атрибут viewBox в SVG.

📌 Что внутри:

☑️ SVG как уникальный формат изображения и преимущества производительности
☑️ Встраивание SVG
☑️ Использование и анимация viewBox, манипуляции с viewBox
☑️ Учет масштабирования обводки


Лайвкодинг на собеседованиях — это ок?
Опрос
  •   Конечно
  •   Нет, зачем тогда тестовое?
  •   Не принципиально
  •   Посмотреть результаты
796 голосов


Как использовать html-элемент : гайд для фронтенд-разработчика

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

💬 Если в вашем проекте какой-то функционал уже реализован на JavaScript, при наличии/появлении нативных HTML-элементов вы проведете рефакторинг?


Репост из: Библиотека программиста | программирование, кодинг, разработка
📯Внимание всем отважным героям и искателям приключений!

«Библиотеки Программиста» с гордостью представляет новую захватывающую игру — «Битва с Драконом». Выберите своих персонажей и сразитесь с древним Крылатым Ужасом Бурлопиворогом в эпическом поединке!

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

💎Победителей ждет почет, уважение и награда! Итак, кто осмелится бросить вызов Бурлопиворогу? Начните свою «Битву с Драконом»!


🧑‍💻 Статьи для IT: как объяснять и распространять значимые идеи

Напоминаем, что у нас есть бесплатный курс для всех, кто хочет научиться интересно писать — о программировании и в целом.

Что: семь модулей, посвященных написанию, редактированию, иллюстрированию и распространению публикаций.

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

👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.


🎙Свежий выпуск подкаста «Веб-стандарты»: Юля Миоцен, Вадим Макеев, Никита Дубко про Servo, селекты, State of JS, адвенты, подкаст OTMT, Math в CSS, @​scope, адаптивное видео, дизайн и разработку.

00:02:40 Движок Servo
00:09:07 Линейки в селектах
00:15:16 Дэшборд с браузерами
00:19:42 State of JS 2023
00:23:38 Адвенты для всех
00:36:55 Подкаст OTMT
00:42:17 Math-функции в CSS
00:49:55 Особенности @​scope
00:57:42 Адаптивное видео
01:08:41 Дизайнеры и разработчики

YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка | Сайт подкаста

#подкасты


Репост из: Библиотека тестировщика | QA, тестирование, quality assurance, manual testing, autotesting, ручное тестирование, автотесты
📰❌ 10 признаков фейковой вакансии

Как понять, что с вакансией что-то не так? Разбираемся в этой статье!

Читать статью

#почитать


🎨Что, если бы мы сказали вам, что для создания графики вроде градиентов или эффекта дождя, может потребоваться всего несколько строк кода? Добро пожаловать в мир шейдеров!

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


💡Вы можете сделать стили вашего компонента портативными с помощью контейнерных запросов:

🔥 Измените макет карточки в зависимости от размера
🤏 Уберите текст с кнопки, когда она маленькая

.card {container-type: inline-size;}
@container (min-width: 50ch) {.info { grid-column: 2; }}


➡️ Поиграть можно здесь

#css #tip by Jhey


⚛️ 45 вопросов для подготовки к собеседованию по React

Чтобы успешно пройти собеседование на позицию React-разработчика, важно хорошо понимать основные концепции, принципы и смежные технологии этой библиотеки.

В статье невозможно охватить все вопросы, которые могут задать на собеседовании, однако мы рассмотрим ответы на наиболее распространенные из них.

🔗 Читать статью
🔗 Зеркало


🤔 Помните рассказывали вам про митап от СберМаркета? Так вот, Александр Водолазских, руководитель направления разработки интерфейсов, написал на основе своего доклада статью о том, как нельзя вести пет-проекты.

🤝 И если перефразировать сказанное в статье из ироничного в дружеское, то получатся отличные советы:

1️⃣ Кодить «после работы» — хорошо, но если только реально хочется
2️⃣ Ограничьте себя по направлению и стеку
3️⃣ Делайте «продукты», а не проекты
4️⃣ Следуйте роадмапу и делайте брейкпоинты
5️⃣ Общайтесь с теми, кто знает больше
6️⃣ Балансируйте между «узнать» и «сделать»


👨‍🎨 Искусство промтинга: введение в Midjourney

📝 Сейчас мало просто уметь писать правильные промты, но важно также знать некоторые хитрости каждого ИИ-помощника. Markus Wallén из 14islands подготовил подробное руководство по Midjourney, в котором рассказал, как начать работу и как создать идеальный промт, чтобы максимально использовать возможности нейросети.

🧰 В статье он разобрал структуру промтов и их атрибуты, а также показал примеры сгенерированных картинок. Прочитав статью, вы научитесь контролировать стилизацию или реализм изображения, а также соотношение сторон, разнообразие генерируемых композиций и многое другое.


🤔 После выхода достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе.

💡Основное внимание переключилось на экосистему — Vite, Nuxt, VitePress, Pinia и другие. В то же время, отчетливо заметно масштабирование работы не вглубь, а вширь. Интересы команды уже давно явно выходят за пределы фреймворка.

📈 Об этом и идет речь в статье. Автор разбирается с трендами развития Vite, Anthony Fu и VitePress, анализирует тренды/рынок вакансий и рекомендует перевод книги «Vue.js 3 — Шаблоны проектирования и лучшие практики».


🤩 На что способны современные веб-технологии?

😎 Перед вами интерактивный мини-сборник впечатляющих возможностей современных веб-технологий от команды Chrome для разработчиков: от WebAssembly и простого взаимодействия с локальными файлами пользователей до рендеринга «тяжелой» графики в браузере и упрощенной навигации.

Кстати, для создания анимации на сайте используется ThreeJS, но на канале Frontend FYI вы можете увидеть реализацию того же функционала на чистом CSS 😉




🤔 Как веб-компоненты могут устранить привязку к фреймворку?

Автор отмечает, что веб-компоненты могут «резко ослабить связь» фреймворков — и, пытаясь доказать это, создает приложение, в котором каждый компонент написан с использованием разных фреймворков.

👉 Читать


Репост из: Библиотека программиста | программирование, кодинг, разработка
🏆 Самые популярные языки программирования 2023

Популярность ЯП зависит от нескольких факторов. Мы разобрались с ними, составили сводный рейтинг и обсудили особенности, преимущества, недостатки и причины популярности каждого языка. Заходите и читайте👇

🔗 Читать статью
🔗 Зеркало

Показано 20 последних публикаций.