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

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

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

Would you like fries with that? Сборщик бургеров, выполненный на Vue.js. 👉 @sWebDev

Официальный язык, на котором пишут нейросети, теперь в Telegram! Для всех, кто мечтал написать свою нейросеть за 0.03 наносек открылся канал с гайдами по Python. Примеры кода, книги, ответы на задачи с собеседований Ядндекса/Озона/Google. Вникайте: Python practics

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

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

👉 @sWebDev

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

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

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

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

Как скрыть свои свойства Angular — объяснение # vs private Заметили символ решетки, появляющийся в примерах кода Angular? Если нет, вы можете увидеть это в ближайшее время. Зачем нужен символ # и когда его использовать? Недавно # символ был добавлен в JavaScript для обозначения свойств частного класса. Создание переменной класса приватной означает, что доступ к переменной возможен только внутри ее класса. Это позволяет нам инкапсулировать данные, к которым мы хотим получить доступ только внутри сервиса. Все подробности в материале по ссылке. 👉 @sWebDev

Who's that Pokémon? Интерактивная викторина о покемонах, выполненная на Vue.js. 👉 @sWebDev

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен. С 11 по 17 июля проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения. За эти 7 дней обучения ты: 1. Создашь полноценный веб-сайт на HTML и CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Узнаешь сколько можно зарабатывать и как работать; 7. Получишь в подарок чек-лист «45 мест для поиска работы». 🔥 А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов. 👉 Проскочить на интенсив бесплатно

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

​«Асинхронная архитектура», о проектировании сложных распределенных систем 28 июля стартует 5 набор на курс «Асинхронная Архитектура». Приходите учиться, если уже напарывались на сервисную архитектуру, которая в итоге становилась распределённым монолитом, или просто хотите погрузится в мир больших распределённых систем. Темы курса: — обработка распределённых ошибок, — тестирование распределённых систем, — форматы данных и способы коммуникации, — отказоустойчивость, — эволюция — как добавлять новые события в сложные системы. Курс направлен на мидлов, сеньоров, тимлидов и CTO. Отважным джунам тоже можно прийти — прокачаете мышление проектировщика, которое позволит писать более понятный и изолированный код. Курс прикладной: будут домашки с разбором, которые готовят к реальной работе и реальным сложностям. За время курса вы сделаете проект с асинхронной архитектурой и положите себе в портфолио. Если успеете в дедлайн — получите сертификат на русском и английском языке, который можно привязать к линкедину. Материалы курса проверены на почти 1500 учеников. На курсе учились команды из Arrival, Toptal, Яндекс, Озон, Авито, Сбер и другие. Посмотреть программу, отзывы и бесплатный урок → По промокоду FrontLib10 скидка 10% до 11 июля. Платить можно самому сразу или частями. А лучше за счет компании из любой точки мира.

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

​«Асинхронная архитектура», о проектировании сложных распределенных систем 28 июля стартует 5 набор на курс «Асинхронная Архитектура». Приходите учиться, если уже напарывались на сервисную архитектуру, которая в итоге становилась распределённым монолитом, или просто хотите погрузится в мир больших распределённых систем. Темы курса: — обработка распределённых ошибок, — тестирование распределённых систем, — форматы данных и способы коммуникации, — отказоустойчивость, — эволюция — как добавлять новые события в сложные системы. Курс направлен на мидлов, сеньоров, тимлидов и CTO. Отважным джунам тоже можно прийти — прокачаете мышление проектировщика, которое позволит писать более понятный и изолированный код. Курс прикладной: будут домашки с разбором, которые готовят к реальной работе и реальным сложностям. За время курса вы сделаете проект с асинхронной архитектурой и положите себе в портфолио. Если успеете в дедлайн — получите сертификат на русском и английском языке, который можно привязать к линкедину. Материалы курса проверены на почти 1500 учеников. На курсе учились команды из Arrival, Toptal, Яндекс, Озон, Авито, Сбер и другие. Посмотреть программу, отзывы и бесплатный урок → По промокоду FrontLib10 скидка 10% до 11 июля. Платить можно самому сразу или частями. А лучше за счет компании из любой точки мира.

Vue Book Content Typer Анимированный перенос текста из поля на элемент, выполненный на Vue.js. 👉 @sWebDev

Frontend meetup (Online) 1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ" В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения 2. Бьем монолит. Основные практики — Гузенко Александр IT ONE Рассмотрим основные подходы к разбиению монолитных фронтедов. 3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций. 4. Beyond Frontend — Алексей Тюльдюков, VK Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером 🗓 12 июля, начало в 19:00 мск, Среда 🚀 Телеграмм канал с анонсами митапов ✅ Регистрация на мероприятие

Директива для двусторонней привязки данных Angular [ngModel] в Angular - директива для двусторонней привязки данных. Пример: <input [(ngModel)]="name">. Синхронизирует значение элемента формы с свойством компонента. Также позволяет добавлять дополнительные функциональности, такие как валидацию данных или управление состоянием элемента формы. Однако, чтобы использовать [ngModel], необходимо импортировать модуль FormsModule из @angular/forms и добавить его в список импортов модуля вашего приложения.

    import { FormsModule } from '@angular/forms';

    @NgModule({
      imports: [FormsModule],
      // ...
    })
    export class AppModule { }

👉 @sWebDev