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

GSAP ANIMATION PIZZA LANDING PAGE Анимированная сборка пиццы при скролле, выполненная на GSAP.js. 👉 @sWebDev

Полезные практики React в 2023 году. Часть 1 1.Создание новой базовой структуры приложения React. Для соблюдения лучших практик в React необходимо создать структуру проекта, которая будет соответствовать его размеру. Для этого можно использовать команду NPM create-react-app. Следующие шаги могут помочь при определении архитектуры: 1) Макет папок: рекомендуется ориентироваться на компоненты и группировать файлы компонентов (такие как тесты, CSS, JavaScript и ресурсы) в одной папке:

   Components
   |
   --Login
   |
   --tests--
   --Login.test.js
   --Login.jsx
   --Login.scss
   --LoginAPI.js

2) Группировка файлов по типу: можно также рассматривать группировку файлов по типам, чтобы облегчить организацию:

  APIs
  |
   --LoginAPI
   --ProfileAPI
   --UserAPI
   Components
   |
   --Login.jsx
   --Login.test.js
   --Profile.jsx
   --Profile.test.js
   --User.jsx

👉 @sWebDev

Джентельменский набор трушного фронтендера Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер. Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров! Развивайся с нами, ведь так проще!

Jumping Gooey Navigation Анимированная навигационная панель, выполненная на Gsap.js. 👉 @sWebDev

Как создать собственный интерполятор в Angular? В основном используется стандартный интерполятор шаблона {{}} для отображения свойств компонента Angular. Но мы можем изменить интерполятор на свой. Как это можно сделать? 👉 @sWebDev

Solid.js vs Svelte: битва принципов В материале сравнение между двумя современными JavaScript-библиотеками для создания пользовательских интерфейсов - Solid.js и Svelte. Автор выделяет ключевые аспекты каждой библиотеки и помогает разработчикам определить наиболее подходящий инструмент для ваших целей. 👉 @sWebDev

Чтобы вырасти в уверенного мидла, нужно хотя бы 1,5—2 года коммерческих проектов. Но процесс можно ускорить, если освоить новые технологии и отточить софты в условиях, близких к реальной работе. Это не заменит рабочей практики, но поможет собрать базу, набраться уверенности и проверить себя. Прокачать нужные мидлу навыки, чтобы расти в карьере на скорости х2, можно на курсе Яндекс Практикума. Изучать теорию предстоит сразу на на командных проектах. 1. Разработка мессенджера Будете использовать только JavaScript, Typescript, CSS и API браузера, чтобы углубить знания основных инструментов. 2. Создание веб-игры с нуля Продумаете макеты и логику, реализуете клиентскую часть и бэкенд, задеплоите в облако. Лучше разберётесь в смежных сферах — алгоритмах, DevOps и других. Работая в команде, вы научитесь декомпозировать задачи, распределять время и брать на себя ответственность. А помогать вам и ревьюить код будут менторы — синьор-разработчики из крупных компаний. → Начать учиться

ngx-spinner Библиотека загрузки для Angular, которая обеспечивает анимированный спиннер во время загрузки данных или выполнения операций. Библиотека поддерживает настраиваемые анимации, стили и позволяет интегрировать индикатор загрузки в приложения Angular с минимальными усилиями. 👉 @sWebDev

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

The Basement Анимированная загрузка текста, выполненная на Splitting.js. 👉 @sWebDev

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

Создание доступных форм в Vue с помощью Formkit Рассмотрим использование FormKit во Vue для создания доступных форм. Материал дает понимание о том, как обеспечить доступность веб-форм для всех пользователей, включая людей с ограниченными возможностями. 👉 @sWebDev

Самое тупое во Фронтенде – это искать макеты В сети полно актуальных источников. И один из них – канал Макеты для верстки. Если хотите иметь крутое портфолио, обязательно подпишитесь

Loader Прелоадер, выполненный в формате разделения клеток. Реализовано на Splitting.js и Gsap.js. 👉 @sWebDev

Декоратор Attribute в Angular В Angular есть декоратор Attribute, который позволяет передавать статическую строку без дополнительной нагрузки на производительность путем устранения проверки на изменения в ней. Значения декоратора Attribute проверяются однократно. Подход имеет сходство с декоратором @Input:

    @Component({
        ...
    })
    export class BlogComponent {
        constructor(@Attribute("type") private type: string ) {}
    }

👉 @sWebDev

Устроиться фронтендером в Яндекс за выходные 23–24 сентября устраиваем Weekend Offer Frontend. Решите фронтенд-квиз, а после за 2 дня пройдите технические секции и собеседования с командами. Если всё сложится хорошо — сразу же получите офер. В мероприятии участвуют 17 команд: HR Tech, Поиск, Рекламные продукты, Yandex Cloud, 360, Яндекс Браузер, Бизнес-приложения, Умный дом, Yandex Infrastructure, Лавка, Еда, Недвижимость, Аренда, Авто.ру, CM.Expert, Путешествия и Буткемп. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным. Нанимаем в офисы по всей России, помогаем релоцироваться внутри страны. Узнать подробности и зарегистрироваться можно здесь. Реклама. ООО "Яндекс". erid: 2VtzqvZLipH

Falling autumn leaves shader Осенняя атмосфера в анимированном проекте на Three.js. 👉 @sWebDev

Как установить заголовок страницы в Angular из компонента? В Angular есть функционал, позволяющий задавать title из компонента. Как это можно сделать? 👉 @sWebDev