🖥 Vue.js и Vite — что нового в 2024 году?

Evan You на VueConf US 2024 рассказал о свежих обновлениях в экосистеме Vue и Vite.

Хотите узнать, что изменилось во фреймворкеах? Посмотрите выступление и изучите актуальные фичи:

https://youtu.be/A9MSFp9Fs8k?si=h3O-zli5G35HXXEQ

@javascriptv

🖥 annyang — мини библиотека JS распознавания речи, которая позволяет вашим пользователям управлять вашим сайтом с помощью голосовых команд.

🖥 GitHub

#javascript #js

@javascriptv

🖥 Анимация: Два похожих, но таких разных эффекта наведения на кнопки.

Примеры применения:
- кнопки с выбором открытия ссылки через сайт или через приложение;
- кнопка с выбором ответа, достиг ли пользователь совершеннолетнего возраста.

#hover #кнопки

@javascriptv

🖥 Создание навигации по боковой панели с помощью HTML, CSS и JavaScript

📌 Код

@javascriptv

🖥 Scramble - альтернатива Grammarly с открытым исходным кодом.

Scramble - это расширение для Chrome с открытым исходным кодом, которое использует искусственный интеллект для улучшения качества написания текста непосредственно в вашем браузере.

Он разработан как более настраиваемая и уважающая конфиденциальность альтернатива Grammarly.

https://github.com/zlwaterfield/scramble

@javascriptv

🖥 HiveSpace Write, Draw and Plan All at Once

HiveSpace - это универсальный рабочий инструмент с открытым исходным кодом на JS и операционная система для всех компонентов, из которых состоит ваша база знаний , заметок, майндмапов и многое другое - wiki, управление знаниями, презентации и цифровые ресурсы.

Это лучшая альтернатива Notion и Miro.

Github

@javascriptv

🖥 Sturdy-Doodle — интересная идея компактного сайта-портфолио с интерактивными игровыми элементами, созданного с помощью HTML, CSS и JavaScript .

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

🖥 GitHub

#js #javascript

@javascriptv

🖥 D3 - полезная библиотека для создания разнообразных графиков и визуализации данных

🔐 Лицензия: LSC

▪️Github

@javascriptv

🖥 Untrusted — интересная головоломка, в которой нужно решать задачи, используя JavaScript

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

🔐 Лицензия: CC-BY-NC-SA

🔗 Ссылка: *клик*
▪️Github

@javascriptv

🖥 Полное руководство по JavaScript — с нуля до про! (2024) 🔥

🌟 Этот огромный бесплатный курс полностью обучит вас языку JavaScript с самых основ и до продвинутых тем!

🕞 Продолжительность: 22:15:56

🔗 Ссылка: *клик*

@javascriptv

🖥 Proton — простая и легковесная JS библиотека для создания анимаций частиц!

🔍 Свойства:

🌟 Простота использования: для создания эффекта анимации частиц требуется всего лишь несколько строк кода.
🌟 Множество эффектов: используйте Proton для создания пламени, фейерверков, пуль, взрывов и многого другого.
🌟 Любая среда выполнения: вы можете использовать библиотеку в таких фреймворках, как react, vue, angular, и pixi.js, Phaser, и т. д.
🌟 Эффективный рендеринг: эффективность рендеринга очень высока, вы можете визуализировать десятки тысяч частиц на странице.
🌟 Моделируемая физика: Proton может моделировать различные физические свойства, включая гравитацию и броуновское движение.
🌟 Несколько рендереров: Proton предоставляет множество рендереров, конечно, вы также можете настроить свой собственный рендерер

🔐 Лицензия: MIT

🔗 Ссылка: *клик*
▪️Github

@javascriptv

🖥 Gridstack.js — это JavaScript-библиотека для создания адаптивных сеток с функцией перетаскивания и изменения размеров элементов. Она идеально подходит для создания интерактивных панелей и виджетов

🌟 Библиотека поддерживает гибкую систему сеток, различные точки останова и динамическое обновление элементов

🌟 Gridstack.js использует HTML5 drag-and-drop API и легко интегрируется с такими фреймворками, как jQuery и Angular. Основные возможности включают настройку сеток и адаптивный дизайн для удобного создания пользовательских интерфейсов.

🔐 Лицензия: MIT

▪️Github

@javascriptv

👩‍💻 Простой совет: Оптимизация с помощью React.Fragment

💡 В React часто нужно группировать элементы без добавления дополнительных HTML-оберток. Для этого используется React.Fragment, который помогает избежать ненужных <div> или других контейнеров в DOM-структуре. Это особенно полезно, если нужно рендерить несколько элементов внутри компонента, но при этом не нарушать структуру HTML.

Пример использования:

import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Заголовок</h1>
      <p>Текст</p>
    </React.Fragment>
  );
}

🌟 Короткая запись: <></>. Это улучшает производительность и упрощает код

@javascriptv