🖥 Самые интересные публикации за последние дни:

• Разработчикам: рецензия на книгу «Создание микрофронтендов»

• Как я запрограммировала собственный рукописный шрифт

• Демо City In A Bottle – система рейкастинга в 256 байтах

• Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

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


Original post link: t.me/frontendnoteschannel/3603
Forwarded and filtered by @smartfeed_bot

90% - SVG Animation

SVG-анимация загрузки. Реализована с помощью JavaScript.

https://codepen.io/Adir-SL/details/zYozoNZ


Original post link: t.me/senior_front/2028
Forwarded and filtered by @smartfeed_bot

Глобальные ключевые слова в CSS

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

initial
У каждого из свойств в CSS есть значение по умолчанию. Оно применяется ещё до того, как вы написали что-либо в вашем файле стилей.
Ключевое слово initial сбрасывает все указанные значения свойства для конкретного блока до этих самых значений по умолчанию.

inherit
CSS-свойства делятся на наследуемые и ненаследуемые.
Значения наследуемых свойств применяются не только к элементу, для которого прописаны, но и для всех вложенных дочерних элементов. Это очень удобно, чтобы не писать много одинаковых свойств для разных селекторов, перечисляя всех потомков.

unset
Это ключевое слово ведёт себя по-разному с наследуемыми и ненаследуемыми свойствами:
- С наследуемыми свойствами ключевое слово unset ведёт себя как inherit.
- С ненаследуемыми свойствами оно ведёт себя как initial.

revert
Это ключевое слово сбрасывает значение свойства до указанного в стилях браузера.

👩‍💻 Radios With Sliding Focus

Анимированный переключатель с плавающей рамкой. Сделан на чистом CSS.

Открыть код


Original post link: t.me/frontendnoteschannel/3604
Forwarded and filtered by @smartfeed_bot

Magnify Glass w/ Zoom

Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.

https://codepen.io/kitjenson/pen/ExLRrgw


Original post link: t.me/senior_front/2029
Forwarded and filtered by @smartfeed_bot

🐙 OpenLayers – высокопроизводительная библиотека для создания интерактивных географических карт. Библиотека написана на JavaScript и имеет открытый исходный код.

Сайтодел | #репозиторий #github


Original post link: t.me/sitodel/1783
Forwarded and filtered by @smartfeed_bot

CSS 3D Bending Effect - Page Flip

Создано на чистом CSS с использованием возможностей препроцессора Haml.

👉 @seniorFront


Original post link: t.me/seniorFront/4124
Forwarded and filtered by @smartfeed_bot

👩‍💻 Попытка создать идеальный компонент формы

Как я создавал свою библиотеку для работы с формой, какие сложности встретил и как их решал. Попытка типизировать вообще все и несколько интересных typescript кейсов, которые могут оказаться полезными.

Читать...


Original post link: t.me/frontendnoteschannel/3606
Forwarded and filtered by @smartfeed_bot

3D glass weather icons

Иконки, сверстанные на HTML и SCSS.

https://codepen.io/onediv/pen/MWQKgmv


Original post link: t.me/senior_front/2030
Forwarded and filtered by @smartfeed_bot

​Как очистить карму своему коду?

Часто ли у так бывает, что вы встречаете плохой код и мысленно ругаете автора?
А потом приходите к выводу, что код не так уж и плох, и автора ругали зря… Но осадок-то остался!

В общем, медитировал я давеча перед монитором, и посетил меня код с картинки:
Вслед за этим кодом меня посещает, конечно, Негативная Эмоция. Недоумение.
Почему надо делить на сто и тут же умножать на сто?
Зачем надо прибавлять сто и делать на сто? Что тут вообще происходит? WTF?

Разгадка
В ходе дебага выясняется, что код этот вполне работает. Поскольку речь идёт о целых числах, то при делении на 100 результат округляется, а при повторном умножении на сто получается меньшее число. Например, из 666 получается (666/100) * 100 = 6*100 = 600. То есть значение округляется до ближайшей сотни.

Что получается? Код как бы есть, он как бы работает, то есть обвинить программиста как бы и не в чем. Но в то же время я потратил силы, чтобы в нём разобраться, а самое главное — я произнёс вслух "What The Fuck" что увеличило мою карму на единичку.

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

👉 @seniorFront

👩‍💻 Гибкая ORM для Node.js – Sequelize

Когда начинаешь делать очередной проект, появляется желание упростить себе жизнь и лишний раз не писать SQL-запросы. В таком случае было бы неплохо познакомиться с технологией ORM.

Читать...


Original post link: t.me/frontendnoteschannel/3609
Forwarded and filtered by @smartfeed_bot

Prompt engineering — путь к эффективной работе с ChatGPT

В этой статье рассказывается о том, как эффективно работать с ChatGPT в разных задачах и архитектуре. Многие пробовали, но не у всех получилось. Статья написана по мотивам доклада для конференции Highload.

Какие темы обсуждаются:
- Поговорим о GPT;
- Разберёмся, зачем нужны промпты;
- Рассмотрим фреймворки для создания промптов;
- Создадим ассистента архитектора.

👉 @seniorFront


Original post link: t.me/seniorFront/4132
Forwarded and filtered by @smartfeed_bot

🖥 Ecommerce App – дизайн приложения для интернет-магазина. Здесь есть два типа карточек: заполненные градиентом и прозрачные с круглым фоном для товара.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1787
Forwarded and filtered by @smartfeed_bot