⭐️ Organic Onboarder – слайдер на CSS и JavaScript. Основная особенность - плавный переход от слайда к слайду и плавные градиенты.

https://codepen.io/team/keyframers/pen/RmLjzQ

@javascriptv

🖥 Создание хука Git pre-commit для автопроверки и исправления кода JavaScript и TypeScript

ажно выдерживать единый стиль написания кода в проекте, особенно если он выполнен на JavaScript и TypeScript. Это связано с тем, что JavaScript  —  очень гибкий язык, а TypeScript, хотя и менее гибок в синтаксисе, все же достаточно гибок в форматировании.

Представьте, что в одной части кода используется 2 пробела для отступа, а в другой  —  4. Вы можете подумать, что подобный линтинг носит лишь косметический характер. Тем не менее линтеры могут также проверять синтаксис и помогать улучшать качество кода в соответствии с общепринятыми отраслевыми стандартами.

Проверять качество кода и стили его написания вручную довольно обременительно. К счастью, с помощью Git-хуков это можно сделать автоматически, а автор кода не сможет создавать коммиты, если линтинг не был пройден.

Для проектов JavaScript и TypeScript разработано несколько хорошо зарекомендовавших себя пакетов, которые можно использовать для линтинга и управления Git-хуками. В этой статье речь пойдет о том, как создать хук Git pre-commit для проверки кода JavaScript и TypeScript с помощью ESLint, Prettier, lint-staged и Husky.

➡️ Читать

@javascriptv

🖥 Создание асинхронного исполнителя задач с параллелизмом в JavaScript

Давайте представим, что нам нужно создать асинхронный обработчик задач в javascript со следующим ограничением:

1. У исполнителя задач должен быть набор задач (task), которые будут ему переданы.
2. Каждая из этих задач будет некоторой асинхронной операцией,
3. Исполнитель задач также должен убедиться, что в один момент времени может выполняться только заданное количество задач, а другие задачи продолжают ждать, пока не придет их очередь.

➡️ Читать

@javascriptv

🖥 litegraph.js

litegraph.js – Библиотека в Javascript для создания браузерных графов, похожих на Unreal Blueprints

Библиотека подразумевает легкое встраивание в уже существующие веб-приложения

🖥 GitHub

@javascriptv

💨 Как написать тест-раннер в 80 строк кода на JavaScript/TypeScript

В экосистеме JavaScript насчитывается много средств выполнения тестов: Jest, Karma, Ava, Mocha. И это лишь малая их часть. Встроенный тест-раннер имеется в Deno. Экосистема со встроенным тестом и fmt  — более зрелая и лучшая, на мой взгляд.

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

➡️ Читать дальше

@javascriptv

📎 Огромный список полезных ресурсов для Javascript, React разработчиков.

Сохраняйте себе,чтобы не потерять.

➡️ Список

@javascriptv

⭐️ Функции JavaScript: Простое руководство

Функция JavaScript - это блок кода, который выполняет определенную задачу. Они используются для разбиения и организации кода на управляемые фрагменты. Функции можно использовать для создания пользовательских объектов, фильтров и многого другого.

Функции JavaScript определяются с помощью ключевого слова function, за которым следует имя функции и пара круглых скобок, содержащих ноль или более параметров (или аргументов), разделенных запятыми. Список параметров функции будет находиться между этими круглыми скобками (). Параметры являются необязательными, и мы могли бы называть их переменными внутри функций. Тело функции заключено в фигурные скобки {}, которые могут содержать внутри себя один или несколько операторов.

➡️ Читать дальше

@javascriptv

✔️Google Maps Example: Nightly

Пример Google Maps: Nightly. Реализован с помощью JavaScript и CSS.

#анимация #css #js

https://codepen.io/ionic/pen/npXVrE

@javascriptv

⭐️ По прогнозам Research Guru, к 2028 году рынок мобильной разработки достигнет $25 млрд. С 2022 по 2028 год годовой темп роста составит 39,9%. Представляем подборку каналов по мобильной разработке для быстрого старта в професии.

📱 APP DEV - быстрый вход в мобильную разработку. Практика, советы от профи, полезные инструменты.

🖥 Android разработка - бесплатный авторский канал, который научит созданию приложений.

🖥 React - создание технологичных приложений на React.

🖥 Java/Kotlin - здесь собраны отборные гайды и материалы по java разработке.

🖥 Почему использование только console.log в 2023 году — большая проблема

Вы все еще используете console.log для всех ваших потребностей в отладке JavaScript в 2023 году?

Пришло время усовершенствовать свои навыки и открыть для себя всю мощь объекта консоли JavaScript.

Начиная с console.table и заканчивая console.time, эти передовые методы и хитрости помогут вам улучшить качество и удобочитаемость выходных данных отладки и упростить поиск и устранение неполадок в вашем коде.

Так почему бы не вступить в ряды отладчиков JavaScript ninja в 2023 году и не освоить эти основные приемы? Ваш код будет вам благодарен.

Одна из самых больших проблем с использованием только console.log заключается в том, что он может загромождать ваш код и затруднять его чтение. Кроме того, это не очень информативно само по себе. Он просто выводит значение всего, что вы ему передаете, без какого-либо контекста или дополнительной информации.

Имея это в виду, вот десять методов и приемов с консольными объектами JavaScript, о которых вам следует знать (и попробуйте их; быстрее использовать просто console.log, но это может значительно улучшить вашу отладку, сделайте это для вашего будущего самостоятельно).

➡️ Читать дальше

@javascriptv

🖥 Are you feeling down?

Анимация появления карточек. Реализована с помощью JavaScript и CSS.

#анимация #css #js

https://codepen.io/naijadeveloper/pen/MdrawV

@javascriptv

🖥 Letter Animation

Анимация букв при нажатии. Реализована с помощью JavaScript и CSS.

#анимация #css #js

https://codepen.io/FlorinPop17/pen/WEBNyx

@javascriptv

⭐️ Форма ввода стиля Google Keep в VanillaJS

Если вы когда-либо пользовались Google keep, вы должны быть знакомы с их динамической формой ввода для создания заметки. На первый взгляд форма выглядит простой, но найти решение может быть немного сложно.

✔️ Пример
❤️ Codpen

@javascriptv

✔️ Как использовать ESLint, чтобы повысить качество кода JavaScript и TypeScript

JavaScript по умолчанию имеет очень гибкий синтаксис. Он позволяет менять тип переменной, использовать одинарные и двойные кавычки для строк и любое количество пробелов для отступов, опускать точки с запятой в конце и т.д.

Однако каждая команда должна придерживаться единого стандарта программирования. Так код будет легче просматривать и поддерживать. В этом помогает ESLint.

ESLint  —  инструмент статической проверки кода, используемый для мониторинга качества и стилистической выдержанности кода JavaScript. TSLint, применявшийся ранее для проверки кода на TypeScript, уже устарел. Сегодня ESLint используется и для кода TypeScript.

Начинать работу с ESLint может быть непросто, особенно если проверять с его помощью код TypeScript. Предлагаем практическое руководство, которое поможет установить и настроить ESLint для проектов на JavaScript и TypeScript.

➡️ Читать дальше

@javascriptv