Frontender Libs - обзор библиотек JS / CSS

Несколько способов организовать удобную структуру проекта на Vue.js При разработке крупного проекта важно уметь находить нужные куски кода, для этого необходимо правильно организовывать архитектуру веб-приложения. В статье рассмотрим несколько полезных советов и способов, которые помогут правильно структурировать приложение на Vue.js. 👉 @sWebDev

Открой для себя лучший способ найти работу на удаленке или в офисе: подпишись на JavaScript Jobs Здесь вы найдете: - Вакансии от ведущих IT-компаний (таких как Яндекс, Сбер, Intel) - Вакансии стартапов, которые не представлены на других сайтах; - Предложения от зарубежных компаний с возможностью релокации; - Стажировки и обучающие материалы для карьерного роста Цени свое время - подпишись на @JavaScript_Jobs

Urlcat Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки. Для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, чтобы просто создать URL. 👉 @sWebDev

React UI Вариант пользовательского интерфейса, выполненного на React. 👉 @sWebDev

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

Использование SuperTokens вместе с Vue.js SuperTokens — OpenSource-инструмент, облегчающий добавление аутентификации в ваше приложение. В материале рассмотрим работу данного инструмента и особенности его взаимодействия с Vue.js. 👉 @sWebDev

Пока начинающие специалисты пытаются выполнить все требования рынка труда. И одной рукой создают сайт, другой админят сервер, а третьей заботятся о безопасности и SEO-продвижении. Профи и самые прошаренные пользуются панелью управления Ispmanager. Потому что, как бы..зачем? Зачем что-то делать самому, если можно кнопочки тык-тык и SSL сам продлится, веб-сервер и веб-окружение установится на сервер, сайт развернётся за пару кликов, а всякие штуки по безопасности и SEO-оптимизации сделают всю работу за тебя. В общем — вещь, рекомендую. Я лично управляю с помощью Ispmanager, но выбор широк, как среди бесплатных, так и платных. В общем, делайте легче, делайте играючи. 😁

Возвращаем изменяемый ref-объект React Хук useRef возвращает изменяемый ref-объект, свойство .current которого инициализируется переданным аргументом (initialValue). Возвращённый объект будет сохраняться в течение всего времени жизни компонента. Обычный случай использования — это доступ к потомку в императивном стиле:

 TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` указывает на смонтированный элемент `input`
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус на поле ввода</button>
    </>
  );
}

👉 @sWebDev

React Pokedex Покедекс - электронный девайс, являющийся каталогом информации о различных видах покемонов. Покедекс появляется в играх, аниме и манге покемон. Проект выполнен на React. 👉 @sWebDev

Как добавить событие на элемент Vue? Какой директивой воспользоваться, чтобы добавить событие на элемент Vue, передав аргументом название нужного события? 👉 @sWebDev

React Hamburger Builder with Matter.js Physics Проект, в котором нужно собирать гамбургеры. Выполнено с применением React и Matter.js. 👉 @sWebDev

Cash Cash - это легковесная и быстрая библиотека для работы с DOM. Cash поддерживает селекторы, похожие на jQuery, а также имеет удобный API для работы с элементами, включая возможность создания, изменения и удаления элементов, обработку событий и многое другое. 👉 @sWebDev

3 ключевых рецепта для навигации по вашим маршрутам Angular Обзор правильной настройки маршрутизации в Angular для обеспечения лучшего варианта пользовательской навигации. Три конкретных примера обработки маршрутов и полезные советы. 👉 @sWebDev

A colourful world of Turbulence Анимированная сцена, выполненная на Angular. 👉 @sWebDev

🔥 MoscowJS #52 уже 18 мая в 19:00 в гостях! Синтетические данные — это, конечно, хорошо, но можно ли лучше и проще? Примерно таким вопросом задался Илья Алонов из Авито и откопал JS Self-Profiling. Можно ли с помощью этого браузерного API сделать систему мониторинга производительности? Нужно ли оно в целом и насколько лучше синтетики? Если интересуетесь перформансом веб-приложений — приходите слушать доклад Ильи и других спикеров митапа. Подписывайтесь на ютуб-канал AvitoTech и тыкайте по колокольчику под видео, чтобы не пропустить трансляцию. Добавляйте встречу в календарь. Реклама. ООО «Авито Тех». LdtCKaAXN

Typed.js Typed.js предоставляет возможность создавать эффектные анимированные тексты на веб-страницах, которые появляются печатными буквами. Библиотека поддерживает различные опции настройки, такие как скорость печати, паузы между строками и возможность удаления текста. Также можно задавать разные эффекты и стили для текста в процессе анимации. Typed.js легко интегрируется в любой проект и может использоваться для создания интерактивных заголовков, описаний и других текстовых элементов. 👉 @sWebDev

Реализация слайдера изображений и текста на React.js с вариантами оптимизации По ссылке обзор и решение популярного тестового задания на должность фронтенд-разработчика — Слайдера изображений. 👉 @sWebDev

Matter JS Pool Бильярд, выполненный на Matter.js. 👉 @sWebDev

Повышаем производительность браузера React На веб-странице может быть функциональность, требующая трудоемких вычислений. Например, загрузка изображений, несколько вызовов API и т.д. Если методы вызываются слишком часто, то это повлияет на производительность. Дебаунсинг  —  практика, гарантирующая, что трудоемкие задачи не будут вызываться так часто, достигается благодаря хуку use-debounce.

    import React, { useState } from 'react';
    import { useDebounce } from 'use-debounce';
    export default function Input() {
      const [text, setText] = useState('Hello');
      const [value] = useDebounce(text, 1000);
      return (
        <div>
          <input
            defaultValue={'Hello'}
            onChange={(e) => {
              setText(e.target.value);
            }}
          />
          <p>Actual value: {text}</p>
          <p>Debounce value: {value}</p>
        </div>
      );
    }

👉 @sWebDev