Vue Book Content Typer

Анимированный перенос текста из поля на элемент, выполненный на Vue.js.

👉 @sWebDev

У React наступает момент Angular.js?

В 2012 году Angular.js изменил ландшафт фронтенд-разработки и быстро стал успешным. Всего два года спустя команда Angular запустила Angular 2, полностью переписанную исходную библиотеку, основанную на другом наборе парадигм. Многие разработчики, в том числе и я, не хотели переписывать свои существующие приложения, чтобы они соответствовали этим новым идеям. И для новых проектов Angular.js больше не подходил, так как другие фреймворки были так же хороши.
Недавно команды React и Next.js продвигали Server Components — новый способ создания веб-приложений, который не подходит для большинства существующих приложений React.
В статье рассмотрим новые функции, которые представили команды React и Next.js.

👉 @sWebDev

Vue Vine

Vue Vine - легковесная библиотека для управления состоянием и асинхронными операциями в приложениях Vue.js. Ее основной концепцией является использование винов (Vines) для описания и выполнения асинхронных операций. Vue Vine предоставляет чистый и декларативный API для управления данными и обновления состояния приложения. Она интегрируется хорошо с компонентами Vue.js и позволяет упростить разработку асинхронных операций, обеспечивая чистоту и модульность кода.

👉 @sWebDev

Who's that Pokémon?

Интерактивная викторина о покемонах, выполненная на Vue.js.

👉 @sWebDev

Как скрыть свои свойства Angular — объяснение # vs private

Заметили символ решетки, появляющийся в примерах кода Angular? Если нет, вы можете увидеть это в ближайшее время. Зачем нужен символ # и когда его использовать?

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

👉 @sWebDev

Tippy.js

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

👉 @sWebDev

React Vertical Carousel

Анимированная карусель изображений, выполненная на React.

👉 @sWebDev

Как динамически отобразить содержимое шаблона в текущем месте использования в Angular?

В Angular есть директива, которая позволяет динамически отображать содержимое шаблона в текущем месте его использования. Что это за директива?

👉 @sWebDev

Создаем приложение аудио-в-текст с помощью Whisper, React и Node

По ссылке руководство по использованию библиотеки Whisper для преобразования речи в текст с помощью React и Node.js. Авторы предоставляют четкие инструкции и примеры кода, позволяющие создать приложение, которое распознает и транскрибирует аудиозаписи. Статья обращает внимание на важные шаги и рекомендации по настройке и использованию Whisper, а также демонстрирует интеграцию с фронтендом на React и бэкендом на Node.js.

👉 @sWebDev

Измеряем производительность компонентов React

<Profiler> - это компонент, который позволяет измерять производительность компонентов и их потомков. Он помогает идентифицировать медленные или затратные операции и оптимизировать приложение.

Компонент принимает параметры:
id: идентификатор;
onRender: функция, вызываемая при каждом рендеринге компонента. Принимает три аргумента: id профайлера, фазу (phase) и фактическую продолжительность (actualDuration) рендеринга.

   <Profiler id="App" onRender={onRender}>
     <App />
   </Profiler>

👉 @sWebDev

Официальный язык, на котором пишут нейросети, теперь в Telegram!

Для всех, кто мечтал написать свою нейросеть за 0.03 наносек открылся канал с гайдами по Python.

Примеры кода, книги, ответы на задачи с собеседований Ядндекса/Озона/Google.

Вникайте: Python practics

Would you like fries with that?

Сборщик бургеров, выполненный на Vue.js.

👉 @sWebDev

Руководство по использованию Bootstrap с React

По ссылке руководство по использованию Bootstrap с React. В материале рассматриваются основные концепции и шаги для настройки Bootstrap в React-приложениях.

👉 @sWebDev

Faker.js

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

👉 @sWebDev

Cities Slider (React)

Анимированный слайдер из столиц государств, выполненный на React.

👉 @sWebDev

Все кто выбрал вариант 1 - молодцы 👍

Остальным рекомендую с этим разобраться в первую очередь!

Это простые и очень мощные инструменты для адаптивных макетов

Например, чтобы расположить элементы как на картинке достаточно добавить 2 свойства для родительского блока:

flex;
align-items: (один из вариантов)

Но это только верхушка айсберга, чтобы понастоящему разобраться - поиграйтесь с этим тренажером

Ребята разложили все по полочкам, а задания можно выполнять прямо в браузере

😼 P.S. выравнивать нужно будет в основном котов

erid:Kra23oS9N

Создаем приложение на Svelte с SSR рендерингом при помощи SvelteKit

Подробное руководство по созданию приложений на Svelte с использованием SvelteKit и серверного рендеринга. В статье объясняются основные концепции и шаги, необходимые для настройки SvelteKit и создания компонентов.

👉 @sWebDev

Hotkeys.js

Библиотека для обработки горячих клавиш в JavaScript. Она позволяет легко определять пользовательские сочетания клавиш и назначать им обработчики событий. Библиотека поддерживает различные комбинации клавиш и позволяет определять последовательности нажатий.

👉 @sWebDev

Character Tutorial - Final

Анимированная 3D модель, реагирующая на действия пользователя. Выполнено на Three.js.

👉 @sWebDev