Карточки цен на чистом CSS

Простые, но стильные карточки товаров, выполненные с применением анимации на чистом CSS. Для работы с CSS в этом проекте использовался препроцессор SCSS. Вы можете сделать аналогичные карточки для вашего сайта:

https://codepen.io/jcoulterdesign/pen/NxMoja

#codepen #css

Лайфхак как определить программистов в любом доме 🌚

Как освоить фронтенд-разработку в 2022 году: дорожная карта

Мы подготовили для вас дорожную карту, которая поможет разобраться какие именно технологии изучать и на что обращать особое внимание, чтобы стать фронтенд-разработчиком в 2022 году.

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

https://tproger.ru/articles/frontend-roadmap-2021/

#фронтенд #роадмап

Делаем анимацию страницы, синхронизированную со скроллом, как у Apple

Зайдите на сайт Apple или Samsung и посмотрите, как круто анимированы страницы с их продуктами. Хотите научиться также? На самом деле это не так уж и сложно.

В этой статье вы научитесь создавать аналогичные анимации и затем оживлять с их помощью ваши веб-страницы:

https://css-tricks.com/scroll-triggered-animation-vanilla-javascript/

#css #фронтенд

Визуальное руководство по рендерингу React. Часть 3

В первой части была визуализация повторного рендеринга, а во второй — визуализация того, как работают пропсы. На этот раз мы с вами можем увидеть, как работает useMemo в React.

Подробнее:

https://alexsidorenko.com/blog/react-render-usememo/

#react

Урок как создать Telegram бота с нуля и подключить в нём оплату.
На языке Python :3

https://youtu.be/yZj4ieTMvr0

​Изучение React Suspense с помощью React Freeze

Слышали о новом компоненте React Suspense? Он позволяет корректно обрабатывать загрузку и визуализацию данных. Есть также React Freeze, который позволяет заморозить рендеринг компонентов и контролировать, что на самом деле обновляется в ваших приложениях React.

В этой статье подробно рассмотрен React Freeze и его возможности, а также показано, как его можно использовать в реальных проектах:

https://blog.logrocket.com/exploring-react-suspense-react-freeze/

#react

​useSuncExternalStore — недооценённый хук React

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

В этой статье автор поделился несколькими моментами, где этот хук может пригодиться и значительно облегчить вашу жизнь:

https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api

#react

Не баг, а фича 🌚

Третья редакция пугает

Всё так 🌚

Как переключаться между классами HTML-элемента

В JavaScript уже есть функция toggle(), которая отлично работает, когда речь идёт об одном или двух классах. Но как быть, если необходимо переключаться между тремя или более классами? На самом деле способов масса. Несколько из них представлены в этой статье — выбирайте какой нравится больше и берите на вооружение:

https://css-tricks.com/cycle-through-classes-html-element/

#html #фронтенд

​​Как ведёт себя веб-сайт на сгибающихся смартфонах:

💻 Telegram. Пишем ботов на Node JS и Telegraf (2020)

Чему вы научитесь:
⇒Создание Telegram ботов на NodeJs
⇒Telegraf-фреймворк
⇒Использование базовых команд Telegraf
⇒Работа с сессиями, сценами в Telegram ботах
⇒Работа с другими API (Yandex, Pixabay, Monobank)
⇒Построение архитектуры ботов
⇒Деплой бота на Heroku

Требования:
⇒Telegram аккаунт
⇒Базовый JavaScript + ES6
⇒Базовый GIT
⇒Базовые навыки работы с терминалом

СКАЧАТЬ | #курс

​Как цвета могут помочь находить нежелательные архитектурные паттерны?

Если добавить функциям атрибут color и указывать им цвет, например, красный, жёлтый, зелёный или любой другой, то можно описывать и находить «плохие» архитектурные паттерны.

Причём эта концепция применима абсолютно к любому языку, будь то JavaScript , PHP или Go. Как применить такой подход, можно прочитать в этой статье: https://vk.cc/chdhxQ

Кстати, ребята выложили свой инструмент в open source — найдёте ссылку на эту полезность внутри статьи.

Это #партнёрский пост

​Топ-5 встроенных баз данных для приложений JavaScript

Для хранения различной информации принято использовать базы данных. Но что делать, если данных мало, но их всё равно надо хранить? BigQuery и MySQL могут быть излишне в такой ситуации.

На самом деле, есть много вариантов, например встроенные БД. Подробнее о них в этой статье:

https://blog.bitsrc.io/top-5-embedded-databases-for-javascript-applications-1c68496aebac

#javascript #бд

⚠

Kimga telegramdan shunaqa xabar kelsa linkni ochmang virus yuklab olasiz!

Yaqinlarga xabar qiling.

@akbarjondev

Красивый параллакс, работающий от скролла

В этом codepen-проекте автор реализовал анимацию смены времени суток с помощью скролла. Для создания анимации использовалась библиотека GSAP. Посмотреть, как это работает можно здесь:

https://codepen.io/isladjan/pen/abdyPBw

#codepen

​Как повысить скорость разработки с помощью общедоступных функций JavaScript

Это практическое руководство поможет вам писать лаконичный код и повторно использовать вспомогательные функции JS в проектах. Вы сможете переносить их без копирования из проекта в проект, упрощая себе работу в будущем. При этом NPM вам не потребуется.

Подробнее:

https://habr.com/ru/company/rshb/blog/687868/

#javascript

​Как сделать навигацию на сайте документации

Эта статья пригодится в первую очередь техническим писателям и разработчикам сайтов документации, но также понравится любителям опенсорса и красивых вещей. В ней вы узнаете: как можно улучшить навигационное меню на сайте документации, сократить время сборки и размер сайта больше чем в два раза на примере сайта, собранного при помощи Antora.

Подробнее:

https://tproger.ru/articles/krov-pot-i-slezy-kak-ja-peredelal-navigaciju-na-sajte-dokumentacii-i-v-chjom-profit-peredelki/

#ui