Небольшая заметка о различиях box-shadow и filter: drop-shadow()

Живой пример на Codepen - https://codepen.io/hqdrone/pen/vYeZWwZ

Ссылка на изображение без сжатия - https://frontips.ru/notes/drop-shadow.png

https://www.patterns.dev/ - мощнейший ресурс по паттернам проектирования веб-приложений для опытных разработчиков.. мы же все стремимся именно к этому ;) сохранил себе в избранное

Приятный макет для вёрстки в портфолио

https://www.figma.com/file/QuJ5ZW3o28x86inskZLnHw/Folo-Web?node-id=0%3A1

Есть один интересный момент в макете, который хотелось бы разобрать отдельно (постараюсь сделать это в ближайшее время)

Вчера в макете обратил внимание на элемент с галочкой (у выделенной карточки)

Конечно, можно пойти по простому пути и вставить этот элемент изображением (если это статичный декоративный элемент)

Но будем считать, что элемент должен быть интерактивным (тогда уже получается задача из разряда https://cssbattle.dev/ :)

Можно попрактиковаться и попробовать сверстать его самостоятельно

Сделал свое решение на Codepen - https://codepen.io/hqdrone/pen/OJxOJRP

Возможно, решение не самое элегантное, и если вы найдете более краткое/чистое решение, можете скинуть ссылку на свой Codepen сюда @frontips_feedback_bot - интересно будет посмотреть

https://30secondsofinterviews.org/ - ответы на популярные вопросы по HTML, CSS, Javascript, React для подготовки к собеседованию

Еще один вариант Landing Page для вёрстки в портфолио

https://www.figma.com/file/Y3JViV61DfCuFsCCINPotm/Digital-Agency?node-id=0%3A3

Как думаете, какой результат будет выведен?

Проверяем прямо в консоли браузера и получаем "3"... что? 😳

Это один из специфических нюансов Javascript

Если после "0" следуют цифры от 0 до 7, то такие числа рассматриваются как числа в восьмеричной системе счисления

Но если после "0" есть цифры 8 или 9, то такое число в восьмеричной системе не может существовать и рассматривается как десятичное

Поэтому "018" будет интерпретировано как "18", а "017" будет преобразовано из восьмеричной системы в десятичную и будет равно "15", следовательно 18 - 15 = 3

Кому интересны подробности - ссылка на MDN

Кстати, вчерашний пример нашёл на ресурсе с тестами по Javascript - https://javascriptquiz.com/

Вопросов там немного, но большинство из них на знание нюансов

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

Делал недавно вёрстку простого макета, решил записать процесс

Вышло около 5 часов, сегодня публикую первую часть

Без монтажа и комментариев, но надеюсь и такой контент будет полезен

Вёрстка реального проекта #1 - https://youtu.be/m57R2vec6tU

Всех с праздниками!

Тепла и уюта :)

Думаю уже заметили, что на канале включил нативные реакции, которые добавили в обновленной версии телеграм

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

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

Вёрстка реального проекта #2 - https://youtu.be/jho4ND5KYHM

Во второй части:
- стилизуем Header
- добавим мобильное меню
- сделаем слайдер на Swiper.js и стилизуем секцию Hero
- пропишем стили для адаптивности Header и Hero

Повторюсь - это просто запись процесса вёрстки, поэтому тут и "размышления" и заимствование кода с предыдущих проектов и прочее... можно сказать "прямой эфир" ;)

Третья часть вёрстки проекта полностью посвящена стилизации секции About

Несмотря на минимальное количество контента в этой секции, визуально она отрисована с долей креатива :)

Поэтому при вёрстке этой секции будем активно использовать CSS calc() при позиционировании элементов

Вариантов сверстать такую секцию несколько.. в процессе вёрстки думал, как будет более оптимально (сейчас наверно сверстал бы немного по-другому - не лучше или хуже, просто по-другому).. но на тот момент выбрал вариант, который на видео

Вёрстка реального проекта #3 - https://youtu.be/BqWNaOuf7gc

Публикую небольшое видео на Youtube, как сделать прикольный эффект при наведении на ссылку - https://youtu.be/WTzGu_H4PE4

Думаю, время от времени, буду делать такой контент по интересным мелочам (почему бы и нет ;)

Код из видео в песочнице - https://codesandbox.io/s/happy-frog-w7h03

В четвёртой части стилизуем секции Numbers и Services - https://youtu.be/xO5HlKOR4GI

Финальная часть по вёрстке проекта - https://youtu.be/ytlgzQH5tZM

Верстаем секции Video, News, Contacts и Footer

Визуально очень приятный макет для вёрстки в портфолио - https://www.figma.com/file/fYD5fS1iHRYVLzGlZJHtDv/CryptoKet---NFT-Marketplace-UI-Kit?node-id=0%3A1

Полноценный проект на несколько страниц со Style Guide, компонентами, в двух цветовых схемах (тёмная и светлая), а также мобильные версии

NFT сейчас очень обсуждаемая тема, и такая работа в портфолио, думаю, будет привлекать внимание

https://doka.guide/ - великолепная русскоязычная документация(справочник) для разработчиков

Некоторое время назад уже упоминал сайт https://web.dev/, когда делал заметку про CSS свойство accent-color, но на этом ресурсе еще много всего полезного

Learn CSS - https://web.dev/learn/css/
Learn Responsive Design - https://web.dev/learn/design/
Learn Forms - https://web.dev/learn/forms/

Layout patterns - https://web.dev/patterns/layout/

а также про анимации, оптимизацию, SEO, доступность, и прочее

Сразу два качественных, лаконичных макета для практики 👍🏼