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

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

Ссылка на макет - 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/

Simon Høiberg - автор электронной книги "65+ JavaScript Code Snippets", на данный момент раздаёт её бесплатно

https://simonhoiberg.com/ebooks/65-code-snippets-with-explanations

Всем привет!

Давно не было новых статей 🙈

Опубликовал первую часть статьи про создание графиков на основе Chart.js, в которой рассмотрим базовое использование плагина

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

Вторая часть в процессе написания, надеюсь, надолго это не затянется 😬

Ссылка на первую часть статьи - https://frontips.ru/sozdayom-grafiki-na-osnove-plagina-chart-js/

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

Нас 1000 человек! 🔥 1000 человек, которые постоянно развиваются и совершенствуются! И я рад, если мои блог и канал хоть немного помогают вам в этом ☺️

Продолжим развиваться вместе 😉

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

Написал вторую часть статьи по графикам. Во второй части мы добавим динамики в график - будем получать данные с Github API и на их основе отрисовывать и обновлять график, также будем динамически менять тип графика и некоторые другие его настройки

Ссылка на обновленную статью - https://frontips.ru/sozdayom-grafiki-na-osnove-plagina-chart-js/ (вторая часть начинается примерно с середины статьи)

upd: результат можно сразу посмотреть на Codepen по ссылке - https://codepen.io/hqdrone/pen/LYyodvR

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

https://hcdev.ru/ - Справочник HTML и CSS
https://noscriptdev.ru/ - Справочник Javanoscript и Typenoscript
https://reactdev.ru/ - Справочник React
https://angdev.ru/ - Справочник Angular
https://nodejsdev.ru/ - Справочник Node.js

Большое количество информации с примерами кода, иллюстрированием, описанием нюансов и так далее

Всем привет!

В одном из видео на Youtube наткнулся на интересный проект - https://cssbattle.dev/ (как-то он мимо меня раньше проходил:)

Выбираешь задачу с фигурой, сделанной на HTML/CSS, и добиваешься аналогичного результата

Выкладываю свое решение одной из простейших задач - https://cssbattle.dev/play/46, можете сначала попробовать решить сами, а затем посмотреть видео

Довольно увлекательно :)