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, можете сначала попробовать решить сами, а затем посмотреть видео

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

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

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

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

Сегодня совсем небольшая заметка о проблеме, с которой недавно столкнулся - при написании Stylus стилей в NuxtJS проекте, происходит ошибка при сборке (тема очень специфическая, но вдруг кому-то сэкономит немного времени)

Ссылка на заметку - https://frontips.ru/ne-rabotaet-stylus-v-nuxt-js-kak-ispravit/

С помощью CSS свойства accent-color можно изменить акцентный цвет элементов формы

accent-color поддерживается пока только в последних версиях Chrome, Firefox, Edge (https://caniuse.com/?search=accent-color)

В проектах использовать пока рано, но радует, что работа в этом направлении ведётся (хоть и ооочень медленно), ведь до сих пор стилизация элементов формы довольно проблематична и достигается обходными путями

Немного полезных ссылок на эту тему:

https://css-tricks.com/almanac/properties/a/accent-color/
https://web.dev/accent-color/
https://accent-color.glitch.me/

Если вдруг кому-то нужно, ссылка на изображение без сжатия - https://frontips.ru/notes/accent-color.jpg

По мотивам шутки из reddit "when UI designer go crazy..." (https://www.reddit.com/r/ProgrammerHumor/comments/pln9fd/frustrated_ui_designers/)

Сделал свою реализацию этого упоротого UI элемента 😅 - https://codepen.io/hqdrone/pen/BaZdMZz

https://userinyerface.com - но этот UI, по-моему, уже не превзойти никому (я даже до второго шага заполнения формы не дошёл 😤😂)

Давно не было макетов для вёрстки, увидел один приятный макет, решил поделиться ссылкой

https://www.figma.com/community/file/986179266414896817

Если есть желание получить ревью вашей вёрстки, напишите @frontips_feedback_bot, обсудим