frontips.ru

Два полезных, дополняющих друг друга, ресурса по функциям плавности (easing)

https://easings.net/ru - здесь более подробное описание

https://easings.co/ - здесь более наглядные примеры

Всем привет!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всем привет!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всем привет!

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

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

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

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

При использовании -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, обсудим

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

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

---

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

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

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

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

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

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

- https://nfq.group/

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

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

Последние несколько вечеров трудился над новой объемной статьёй, в которой мы сделаем так называемую бесконечную прокрутку постов (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/

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

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

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

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

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

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

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