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

https://htmlreference.io - гид по HTML элементам

https://cssreference.io/ - визуальный гид по CSS свойствам

Всем привет!

Сегодня хотел бы поделиться хорошим плагином для создания parallax-эффекта

RELLAX.js - плагин написан на чистом JavaScript, минифицированная версия весит всего около 7кб, довольно прост в использовании

Если будет возможность, постараюсь написать статью с примером использования данного плагина

Ссылка на страницу плагина - https://dixonandmoe.com/rellax/

Решил не откладывать надолго статью с примером использования плагина Rellax

В дополнение к параллакс эффекту, в примере будем использовать CSS-переменные

Надеюсь, будет полезно ;)

Ссылка на статью - https://frontips.ru/parallaks-effekt-na-osnove-plagina-rellax/

Удивляет, сколько полезных бесплатных ресурсов можно найти по вёрстке/фронтенду

Один из таких ресурсов - https://www.30secondsofcode.org/ (англоязычность ресурса не должна смущать, так как HTML/CSS/JS код от этого менее понятным не становится ;)

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

Такие ресурсы экономят время при разработке, так как можно просто адаптировать уже готовое решение под вашу конкретную задачу

Немного попрактикуемся ;)

Задача: добиться поведения как в примере на видео
- стилизовать и анимировать круг на заднем плане
- стилизовать карточки как в примере (обратите внимание на полупрозрачный низ карточки)
- при наведении курсор заменяем на полупрозрачный круг (ищем подсказки здесь - https://www.30secondsofcode.org/css/s/mouse-cursor-gradient-tracking)

Начальный шаблон - https://frontips.ru/assets/images/practice7/practice7.zip

Результат через несколько дней

Всем привет!

Опубликовал статью с результатом последнего практического задания

Буду рад, если найдете для себя что-то полезное :)

Ссылка на статью - https://frontips.ru/gradientnaya-prozrachnost-kartochek-transformaciya-kursora-pri-navedenii/

Привет, друзья!

Сделал простой дизайн-макет, можете смело забирать и верстать для практики/портфолио

Ссылка на макет - https://www.figma.com/community/file/981156126929894622/Lorenzo-Anderson---Professional-Photografer

Но чтобы это не было очередным проходным макетом, проведем эксперимент - желающим предлагаю ревью/обзор вашей вёрстки этого макета на платной основе или можно сразу получить уже готовую вёрстку за символическую плату (например, чтобы сравнить или подсмотреть решение), подробнее здесь - https://telegra.ph/Obzorrevyu-vashej-vyorstki-maketa-ili-gotovaya-vyorstka-dlya-sravneniya-06-01

https://wesbos.com/javanoscript - гид по JavaScript для начинающих - это невероятно титанический труд, да еще и в бесплатном доступе. Гид написан на простом английском - дополнительная мотивация и возможность подтянуть свой английский ;)

Также у автора есть отличнейшие бесплатные курсы:

- https://flexbox.io/ - курс из 20 видео по Flexbox c практическими примерами его использования
- https://cssgrid.io/ - около 4 часов видео по CSS Grid
- https://javanoscript30.com/ - практические видео по JavaScript

Уверен, каждый начинающий HTML-верстальщик, время от времени задаётся вопросом, можно ли вкладывать какой-либо HTML-тег в другой. Например, можно ли вложить img или div в тег абзаца p

Чтобы не искать эту информацию в спецификации, есть полезный инструмент-шпаргалка по вложенности тегов - https://caninclude.glitch.me/

Выбираете дочерний и родительский теги и сразу получаете результат

Если вы сейчас на стадии изучения браузерных событий (DOM Events)...

- https://learn.javanoscript.ru/bubbling-and-capturing
- https://wesbos.com/javanoscript/05-events/targets-bubbling-propagation-and-capture
- https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Events

...то вам может быть полезен интересный инструмент визуализации - https://domevents.dev

Данный инструмент помогает наглядно увидеть порядок выполнения событий, а также понять разницу функций preventDefault(), stopPropagation(), stopImmediatePropagation()

Приветствую!

Получился довольно длительный перерыв в активности канала - к сожалению, некоторые обстоятельства сейчас не позволяют полноценно им заниматься

Последние несколько вечеров трудился над новой объемной статьёй, в которой мы сделаем так называемую бесконечную прокрутку постов (Infinite Scroll), используя Intersection Observer API, Vue.js, Axios

Записи будем получать из ресурса {JSON} Placeholder, используя библиотеку Axios

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

А для отслеживания элементов в видимой области браузера будем использовать Intersection Observer API

А также будут CSS-анимации, CSS-переменные, плавное появление элементов - думаю будет интересно, а главное полезно ;)

Ссылка на статью - https://frontips.ru/variant-beskonechnoj-prokrutki-postov/

В продолжение темы скролла - крутой и несложный в использовании плагин для создания эффектов при скролле

Locomotive Scroll - https://github.com/locomotivemtl/locomotive-scroll

Умеет делать плавный скролл, параллакс эффект, отслеживать элементы в видимой области браузера, фиксировать элементы при прокрутке и так далее...

Пара примеров применения:

- https://locomotivemtl.github.io/locomotive-scroll/

- https://nfq.group/

https://devtoolstips.org/ - советы по использованию инструментов разработчика (devtools) в браузерах

Ресурс молодой, но уже можно найти что-то интересное для себя

---

По поводу полезных ресурсов... добавил на сайте новый раздел - https://frontips.ru/useful, в котором буду собирать ссылки на различные полезные или просто интересные ресурсы (пока добавил несколько ресурсов для теста, постепенно буду дополнять)

Решил попробовать делать небольшие графические заметки на тему вёрстки, надеюсь будет полезно :)

При использовании -webkit- префикса градиентный текст корректно работает в Chrome, Firefox, Opera, Edge, Safari, а также в мобильных браузерах

https://caniuse.com/background-clip-text
https://caniuse.com/mdn-css_properties_-webkit-text-fill-color

Также этот способ позволяет заливать текст изображением - напомню, что на эту тему уже писал статью, где можно чуть подробнее узнать о данной возможности - https://frontips.ru/zalivka-teksta-gradientom-ili-izobrazheniem/

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

---

Друзья, если есть желающие обучаться HTML-вёрстке индивидуально (консультации, ревью и тд) на платной основе, напишите мне сюда - @frontips_feedback_bot, обсудим

Всем привет!

При вёрстке очередного проекта встретил частый кейс - постепенное/плавное увеличение числа от некоторого значения до целевого

В новой статье разберём как сделать такой эффект на основе плагина countUp - сделаем несколько карточек с числами, которые будут иметь разные значения, разную продолжительность, разные префиксы и суффиксы для каждого значения, а также будем запускать увеличение числа только тогда, когда элемент появляется в видимой области браузера, используя уже знакомый из предыдущей статьи Intersection Observer API

Перейти к статье - https://frontips.ru/postepennoe-izmenenie-chisla-do-celevogo-znacheniya/

Сделал еще одну графическую заметку - в этот раз на тему псевдоклассов :nth-child() и :nth-last-child()

Не думаю, что для вас эта информация будет открытием, но, возможно, будет полезно в качестве шпаргалки

Также сделал пример в Codepen, где можно посмотреть всё это на практике - https://codepen.io/hqdrone/pen/KKmWadB

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

К прошлому посту про градиентный текст (https://news.1rj.ru/str/frontips/123) также добавил ссылку на полное изображение

https://www.jsv9000.app/ - потрясающий инструмент, позволяющий наглядно видеть порядок выполнения JavaScript кода

Можно выбрать из предлагаемых примеров или запустить выполнение своего кода (думаю, часто встречали такие задачи - "в каком порядке выполнится код?")

Очень полезно для понимания JavaScript в целом

Друзья, очень напряженный период, посты и новые статьи будут по возможности

Пока что поделюсь еще парочкой полезных ресурсов:

https://htmlrecipes.dev/ - опубликованный несколько дней назад проект с примерами семантических секций, блоков, карточек и т.д.

https://smolcss.dev/ - современные CSS-решения для различных кейсов

Думаю, многие слышали о CSS-функции clamp() - https://developer.mozilla.org/ru/docs/Web/CSS/clamp()

С помощью этой функции можно добиться плавного изменения размера шрифта при изменении ширины браузера

Чтобы вручную не подбирать значения, можно воспользоваться хорошим генератором - https://fluid-typography.netlify.app/

У clamp() хорошая поддержка браузерами (https://caniuse.com/?search=clamp()), поэтому можем использовать эти возможности в текущих проектах

Без лишних слов - очень крутой гид для верстальщиков - http://webmasters.teamdev.com/