Всем привет!

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

Опубликовал первую часть статьи про создание графиков на основе 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, обсудим

https://devhints.io/ - огромная коллекция шпаргалок для разработчиков

Однозначно в копилку потрясающих полезных ресурсов 🔥

Друзья, спешите!

На Udemy бесплатно раздают крутые курсы! (на некоторые курсы скидка закончится менее чем через сутки, поторопитесь ;)

HTML & CSS - Certification Course for Beginners - https://t.co/MBYMZDivpC?amp=1

CSS And Javanoscript Crash Course - https://t.co/fd3OwVmpNK?amp=1

Complete Responsive Web Development: 4 courses in 1 - https://t.co/9tTDpWkIXK?amp=1

Front End Web Development Ultimate Course 2021 - https://t.co/9IYROgXo90?amp=1

Всем привет!

Скидки на курсы из предыдущего поста уже закончились. Eсли вдруг узнаю еще о таких 100% скидках на платные курсы, обязательно сделаю пост :)

На самом деле, Udemy предлагает много бесплатных базовых курсов. При необходимости, по ссылкам ниже, можно подобрать что-то для себя

https://udemyfreecourses.org/
https://www.udemy.com/courses/free/

—-

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

Небольшая подборка ресурсов, которые могут быть полезны для pet-проектов

https://blobs.app/ - приятный генератор noscript blobs
https://befonts.com/ - шрифты на любой вкус
https://worldvectorlogo.com/ - логотипы разных брендов в noscript
https://kaboompics.com/ - бесплатные фото + цветовые схемы к фото

🔥Бесплатная раздача еще нескольких платных курсов на Udemy

React JS- Complete Guide for Frontend Web Development [2021] - https://t.co/pLP4ZveXcj?amp=1

HTML & CSS - Certification Course for Beginners - https://t.co/MtrYBNCRAU?amp=1

CSS & JavaScript - Certification Course for Beginners - https://t.co/QY80Y3SJyj?amp=1

upd: на данный момент бесплатная раздача этих курсов уже закончилась, если будет ещё - сообщу :)

Вчера сайтом дня по версии CSSDesignAwards стал сайт https://lemkus.com и получил высокие оценки - https://www.cssdesignawards.com/sites/lemkus/39816/

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

Хороший пример того, что к идеалу можно стремиться долго, но порой достаточно сделать просто "хорошо" и получить высокие оценки и признание

java5cript.com - еще больше информации по Javanoscript 🔥

Всем привет!

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

Опубликовал новую небольшую практическую статью - Выбор диапазона значений на основе плагина noUiSlider - https://frontips.ru/vybor-diapazona-znachenij-na-osnove-plagina-nouislider/

Как всегда, буду рад, если контент окажется вам полезен 😌

https://atroposjs.com/ - свежий плагин (от разработчиков Swiper) для создания 3D параллакс эффекта при наведении

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

Учим Flexbox, уничтожая зомби - это же надо было так заморочиться :)

https://flexboxzombies.com/p/flexbox-zombies - изначально ценник на этот курс/игру был $179, сейчас в свободном доступе