Category : javascript

javascript
Динамическое создание компонентов Angular на лету

В этой статье мы поговорим о создании компонентов динамически, шаг за шагом пройдем этот путь. Помимо простого создания компонентов, мы поговорим о более продвинутых вещах, которые можно сделать в рамках этого процесса.Создание динамических компонентовВ первую очередь нам нужен сам компонент, который мы будем динамически создавать.@Component({ selector: "alert", template: ` <h1>Alert {{type}}</h1> `, }) export class AlertComponent { @Input() type: string …

  • вторник, 28 ноября 2023 г. в 00:00:12
javascript
Talkvio — не капибара и не старый пикабу. Модуль серверной индексации для поисковиков для Nginx. Ал…

Долгое предисловие о том где и как используетсяЧитая такие статьи как про Капибару, мне хочется упомянуть один свой старый/новый проект, в изначальном виде я затеял как проект реставрации старого форума сети Минска (uruchie.org) из далеких 2006-2012 годов, который хранился у меня в замороженном виде последние 10 лет. Не так давно я решил его расконсервировать и заняться реставрацией в свободное время, того, фактически, что осталось еще со времен локальных сетей. Я сразу отбросил почти все что …

  • вторник, 28 ноября 2023 г. в 00:00:11
javascript
Многооконное веб приложение — решение для перегруженных интерфейсов

ВведениеВ данной статье будет рассмотрено возможное решение для разгрузки интерфейсов веб приложений – создание приложения с возможностью выноса части функционала в дополнительные окна, или же просто многооконное приложение.Основа стека React + Redux.ПредисловиеВстречалось ли вам браузерное приложение с чересчур нагруженным интерфейсом, в котором боковые панели с настройками или данными перекрывают основное окно?Мне практически нет, но это не значит, что их не существует.Устроившись на новую р…

  • воскресенье, 26 ноября 2023 г. в 00:00:14
javascript
Как сделать рамку редактирования как в Figma-е

Привет, хабр. В этой статье я бы хотел рассказать, как построить рамку редактирования, наподобие той, которая используется в редакторах figma, adobe illustrator и во множестве других графических редакторах. В основном рамка редактирования является составной частью графического редактора. Она может изменять расположение объекта, его масштаб и угол поворота.Результат изменения смайлика через рамку редактированияРедактор Figma. Голубой прямоугольник - это рамка редактированияСтатья разделена на д…

  • пятница, 24 ноября 2023 г. в 00:00:14
javascript
Архитектура серверного рендеринга для SPA

Серверный рендеринг обеспечивает быстрый и надежный доступ к контенту. В этом подходе веб-страницы формируются на сервере, а не в браузере пользователя. Это позволяет значительно ускорить время загрузки, что особенно критично для современных одностраничных приложений, известных как SPA (Single-Page Applications).SPA несмотря на их удобство и функциональность сталкиваются с рядом проблем, включая SEO-оптимизацию и производительность, особенно на медленных соединениях или устройствах.Серверный р…

  • четверг, 23 ноября 2023 г. в 00:00:15
javascript
Typescript: лучшие практики

Всем привет👋 В последние годы среди фронтенд разработчиков Typescript используется практически везде по умолчанию, начиная небольшими пет-проектами и заканчивая огромнейшими веб-приложениями. Однако, до сих пор на некоторых проектах можно встретить кучу any и Function. Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно?Дженерики - всему головаИспользуйте их везде, где только возможно. Это поможет лучше определять используемый тип в коде. К сожалению, их не часто и…

  • четверг, 23 ноября 2023 г. в 00:00:14
javascript
Билдер Vue 3 веб приложений

Vue 3 вебсайт билдер (npm пакет vue-webapp) позволяет создать каркас будущего веб приложения, с возможностью выбора бизнес-шаблона (портфолио, блог, магазин и .т.д.), макета сайта, дизайна и элементов функционала (API модуль, i18n, PWA, splash screen, auth модуль, темы и т.д.), для дальнейшей кастомизации и наполнения контентом.Создание (можно также использовать npm или yarn):$ pnpm create vue-webapp ✔ Project name: … my-vue-project ✔ Make it PWA ( adds service worker and manifest )? … yes ✔ …

  • четверг, 23 ноября 2023 г. в 00:00:13
javascript
Как мы отказались от styled-components в React Native приложениях

Привет! Меня зовут Виталик, я Тимлид команды UI-kit в Профи.Styled-components является стандартом написания стилей для многих команд, которые разрабатывают приложения на React Native. Но мы не всегда задумываемся, зачем мы тащим это в продукт и какую выгоду получим. А что если от styled-components больше вреда, чем пользы? Я поделюсь нашим опытом в Профи и попробуем разобраться вместе.Какие проблемыУ Профи есть 2 мобильных приложения на React Native, которые написаны с использованием styled-co…

  • четверг, 23 ноября 2023 г. в 00:00:13
javascript
Интересные трюки HTML. Экстремальный минимализм

Мы уже много говорили про оптимизацию сайтов до минимального размера, преимущества статичного HTML, а также упаковку сайта (и веб-сервера) в портативный формат одного исполняемого файла, который нативно исполняется под любой ОС. Но стремление к минимизации может пойти дальше, если вы хотите поместить весь сайт в адресную строку браузера. А с помощью сокращателя ссылок даже большой сайт сжимается до восьми байт. В этом случае и хостинг не нужен (то есть роль хостинга выполняет сервис сокращен…

  • вторник, 21 ноября 2023 г. в 00:00:07