Математика, лежащая в основе формирования закругленных углов

Недавно я разрабатывал интерфейс с большим количеством закругленных углов. Я хотел, чтобы углы были одинаковыми, поэтому я создал пользовательское свойство --border-radius и принялся за скругление этих углов.

Но я быстро столкнулся с проблемой. Когда я вложил элемент с закругленными углами внутрь закругленного контейнера, это выглядело как-то не так:

https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/

👉 @frontend_1

CSS-функции min(), max() и clamp()

Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности использования этих восхитительных функций, может понадобиться научиться думать по-новому.

https://ishadeed.com/article/use-cases-css-comparison-functions/

👉 @frontend_1

Действительно ли вы понимаете CSS radial-gradients?

Семь лет назад я узнал все о линейных градиентах CSS и с тех пор хотел узнать больше о том, как работают радиальные градиенты. Мне потребовалось много времени, чтобы найти повод углубиться в логику, но я очень благодарен, что сделал это.

https://patrickbrosset.com/articles/2022-10-24-do-you-really-understand-CSS-radial-gradients/

👉 @frontend_1

Чёрная магия трансформов, или об оптимизации анимаций на CSS

Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Тогда анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨

https://habr.com/ru/articles/701604/

👉 @frontend_1

🔥 ПОЛУЧИ НОВУЮ ПРОФЕССИЮ. ОПЛАТА ОБУЧЕНИЯ ПОСЛЕ ТРУДОУСТРОЙСТВА

ТОП ПРОФЕССИЙ:
✅ Project-менеджер
✅ Интернет-маркетолог
✅ Android-разработчик
✅ Frontend-разработчик
✅ C#-разработчик
✅ Таргетолог

ПРОЦЕСС ОБУЧЕНИЯ И ПОИСКА РАБОТЫ
🔹 Вы осваиваете профессию на курсе
🔹 Мы помогаем вам найти работу
🔹 После трудоустройства вы оплачиваете обучение

✔️ Гарантия трудоустройства
✔️ Поможем определиться с выбором и подберём подходящую программу обучения

Университет СИНЕРГИЯ

Переходите для получения более подробной информации

Реклама. Университет «Синергия» ИНН 7729152149

Красивый и последовательный набор иконок, созданный сообществом.

Проект с открытым исходным кодом и форк Feather Icons.
Мы расширяем набор иконок настолько, насколько это возможно, сохраняя при этом приятный внешний вид - присоединяйтесь к нам!

https://lucide.dev/

https://github.com/lucide-icons/lucide

👉 @frontend_1

Создавайте приложения в Deno с помощью таких фреймворков, как React, Vue, Express и др.

https://deno.com/blog/frameworks-with-npm

👉 @frontend_1

Эффект карандашного наброска с помощью постобработки Three.js

В этом уроке вы узнаете, как создать эффект карандашного наброска с помощью постобработки Three.js. Мы рассмотрим шаги по созданию пользовательского прохода постобработки рендеринга, реализации обнаружения краев в WebGL, повторному рендерингу нормального буфера на цель рендеринга и настройке конечного результата с помощью сгенерированных и импортированных текстур.

Вот как выглядит конечный результат, так что давайте приступим!

https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/

👉 @frontend_1

Фронтендерская история

Прогресс в этой области действительно поражает. От галлюциногенных картинок DeepDream до шедевров от Stable Diffusion прошло каких-то 8 лет. И ведь это не единственный лидер сейчас. Здесь же мы имеем Midjorney, Imagen, Dalle, Kandinsky в конце концов. И знаете, мне это что-то напоминает.

https://habr.com/ru/articles/703780/

👉 @frontend_1

React: работа с 3D-графикой

В данном туториале я покажу вам самый простой и быстрый, хотя и не очень оптимальный с точки зрения размера сборки, способ рендеринга 3D-объектов и моделей в React.

Мы решим 3 интересные задачи:
- рендеринг самописного 3D-объекта;
- рендеринг готовой 3D-модели;
- совместный рендеринг объекта и модели.

https://habr.com/ru/companies/timeweb/articles/704024/

👉 @frontend_1

JavaScript для начинающих 2023. Полный курс за 6 часов. Уроки. Теория + практика

Что такое JavaScript, переменные, типы данных, числа, BigInt, функции, стрелочные функции, массивы, циклы, обход массивов, объекты, свойства и методы объектов, классы, асинхронность, setTimeout, setInterval, callback hell, Promise, async await, работа с DOM. 3 практических проекта. Курс 2023 года.

https://youtu.be/maPRR_jjyOE

👉 @frontend_1

Senior, для вас тут вакансия в Дзен на руководителя команды frontend-разработки

Нужно развивать форматы постов и статей, интерфейсы ленты рекомендаций и сайт Дзена, проектировать архитектуру приложений с помощью React, Redux, TypeScript, RxJS, server-side rendering на Node.js.

Что ещё важно: опыт фронтенд-разработки от пяти лет, желательно для большой внешней аудитории. Офис расположен на Павелецкой, внутри профессиональная команда, крутые вечеринки и все возможности для роста и развития. Откликнуться можно вот здесь.

👉 @frontend_1

Формы: костыли для библиотек или долгострой велосипедов

Почему сложные формы невозможно реализовать без использования плохих кодовых практик или без удаления планированию огромного количества времени.

источник

👉 @frontend_1

Появился новый телеграм бот, который интегрирует популярные нейросети, включая ChatGPT.

Нейросеть упростит процесс программирования:
🔹Ускорит написание компонентов (TS, React, Vue и т.д.), предоставит детальный гайд по любому таску, проведет дебаг;
🔹Избавит от мучительного ресерча, ответит на все вопросы.

Кастомные фичи - форматированные сниппеты, экспорт и импорт контекста и другое.

Доступ без VPN, оплата российскими картами и криптой + 5 бонусных запросов по ссылке.

👉 @InsightBots_bot

Как преобразовать эскизы в HTML

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

https://www.htmhell.dev/adventcalendar/2022/1/

👉 @frontend_1

Геометрия объектной модели документа: исчерпывающее руководство

Знаете ли вы, что кроме интерфейсов, определенных спецификациями объектной модели документа (Document Object Model, DOM) и объектной модели каскадных таблиц стилей (Cascading Style Sheets (CSS) Object Model, CSSOM), существует также набор свойств и методов, определяемых в модуле отображения CSSOM (CSSOM View Module)? Этот интерфейс предназначен для определения и манипулирования геометрией элементов DOM.

Rus https://habr.com/ru/companies/timeweb/articles/705552/

Eng https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/

👉 @frontend_1