Pull to refresh

Локализация в Silverlight

Silverlight *
Локализация когда-то приходит в ваш интернациональный дом. Что бы вы ни построили — большой небоскреб или хижину дяди Тома — надо уметь разговаривать на языке жителей этого дома.

Если ваш Silverlight дом нуждается в локализации, милости просим, я постараюсь дать краски и кисточку, а плакаты рисуйте сами.
Под катом подход к локализации
Total votes 59: ↑37 and ↓22 +15
Views 1.7K
Comments 23

60 — это магическое число

Web design *Usability *
Превьюшки бывают четырёх типов:
  1. фиксированные по длине и % по высоте от оригинала
  2. фиксированные по высоте и % по длине от того же оригинала
  3. фиксированные по длине и высоте (с обрезанием части после масштабирования, которая не вписана, например 300х150)
  4. процентный масштаб (25% от оригинала, к примеру)

И каждый, кто создает галерею задается вопросом: «сколько вешат граммов?» «сколько превью разместить по дефолту в галерее?»
Читать дальше →
Total votes 21: ↑13 and ↓8 +5
Views 7.7K
Comments 17

Полноценный lazyload на node.js

JavaScript *Node.JS *

С выходом Node.js 6.0 мы из коробки получили готовый набор компонентов для организации честного ленивого загрузчика. В данном случае я имею в виду lazyload, который пытается найти и загрузить нужный модуль только в момент запроса его по имени и находится в глобальной области видимости для текущего модуля, при этом не вмешиваясь в работу сторонних модулей. Написано по мотивам статей Node.JS Избавься от require() навсегда и Загрузчик модулей для node js с поддержкой локальных модулей и загрузки модулей по требованию.


Данная статья носит больше исследовательский характер, а ее целью является показать особенности работы Node.js, показать реальную пользу от нововведений ES 2015 и по новому взглянуть на уже имеющиеся возможности JS. Замечу, что этот подход опробован в продакшене, но все же имеет несколько ловушек и требует вдумчивого применения, в конце статьи я опишу это подробнее. Данный DI может легко использоваться в прикладных программах.

Читать дальше →
Total votes 20: ↑16 and ↓4 +12
Views 17K
Comments 22

AngularJS + Webpack = lazyLoad

Website development *JavaScript *Client optimization *Angular *
Tutorial
AngularJS + Webpack = lazyLoad

Вступление


При написании Single Page Application разработчики в большинстве случаев сталкиваются с одной очень распространенной проблемой, а именно — создание lazyLoad модулей и их последующая загрузка на сторону клиента. Т.е. по какому-то действию или по переходу по URL (в большинстве случаев) мы должны загрузить определенный набор зависимостей — JavaScript, CSS, HTML и т.д. В реалиях современной Front-End разработки это будет большущий JavaScript файл. В этой статье я хочу поделиться своим опытом и показать как реализовать lazyLoad модули для AngularJS и тем самым уменьшить общий объем кода при первой загрузке приложения.
Total votes 16: ↑16 and ↓0 +16
Views 11K
Comments 8

React. Lazy loading

JavaScript *ReactJS *
Sandbox

Доброго времени суток.


Занимаюсь разработкой проекта на React и Redux. Хочу в этой статье описать архитектуру своего проекта.

Итак, начнем. Файловая структура:



Для подключения редьюсеров создаем класс singleton reducerRegister:

./reducerRegister.js
class ReducerRegistry {
  constructor () {
    if (!ReducerRegistry.instance) {
      this._emitChange = null
      this._reducers = {}
      ReducerRegistry.instance = this
    }
    return ReducerRegistry.instance
  }

  getReducers () {
    return {...this._reducers}
  }

  register (name, reducer) {
    this._reducers = {...this._reducers, [name]: reducer}
    if (this._emitChange) {
      this._emitChange(this.getReducers())
    }
  }

  setChangeListener (listner) {
    this._emitChange = listner
  }
}

const reducerRegistry = new ReducerRegistry()

export default reducerRegistry

С помощью этого класса редьюсеры могут сами себя регистрировать в store.
Читать дальше →
Total votes 9: ↑9 and ↓0 +9
Views 35K
Comments 15

Ленивая загрузка для карт

Website development *Search engine optimization *
Sandbox
Если на странице есть интерактивная карта Яндекса или Google, то она может отнять несколько секунд в скорости загрузки, и здорово испортить отчет Google PageSpeed.

В этой статье опишу пример оптимизации подключения Яндекс карты, где она будет подгружаться ленивым способом при наведении курсора мыши.
Читать дальше →
Total votes 9: ↑6 and ↓3 +3
Views 5.7K
Comments 4

Архитектура плагинов в приложениях Angular

Angular *TypeScript *
Sandbox

Концепция плагинов всегда была популярной и продуктивной в области разработки программного обеспечения. Масштабируемость и возможность коллективной разработки необходимы для приложений уровня предприятия, когда каждая команда разработчиков может представлять своё направление бизнеса и разрабатывать свой собственный плагин для веб-портала. Angular, являясь одним из наиболее подходящих фреймворков для построения больших браузерных информационных систем, предлагает прекрасные возможности разделения приложения на части прямо «из коробки» при помощи технологии ленивой загрузки. Результатом этого должно быть приемлемое время загрузки даже больших приложений при использовании должного подхода к их дизайну. При этом стандартная реализация ленивой загрузки подразумевает жёсткое задание маршрутов в центральной части приложения, что может приводить к трудностям с разработкой несколькими командами и невозможности добавления новых модулей без изменений в коде. В этой статье я собираюсь объяснить и продемонстрировать как можно создать приложение Angular, поддерживающее плагины, описанные исключительно в конфигурационном файле, когда центральная часть приложения и подключаемые модули полностью независимы друг от друга и даже могут быть расположены в разных местах.

Читать далее
Total votes 8: ↑8 and ↓0 +8
Views 2.7K
Comments 0

Приемы оптимизации веб-графики в 2021 году

Домклик corporate blog Website development *Interfaces *

Привет, Хабр!

Сегодня я хотел бы рассказать о ряде практик, позволяющих оптимизировать загрузку и отрисовку изображений на сайте. Давайте рассмотрим, что мы может сделать на сегодняшний день помимо стандартных методик (компрессии и кеширования на клиенте).

Читать далее
Total votes 53: ↑52 and ↓1 +51
Views 9.8K
Comments 23

Ленивая подгрузка библиотек из CDN в Angular

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *

Когда я интегрировал свое Angular-караоке с YouTube, мне попался официальный YouTube-компонент из Angular Material. В README прилагалась инструкция для подключения. Почти каждая строка в ней примере сомнительна. Давайте разберемся, как сделать лучше и применить имеющиеся инструменты для ленивой подгрузки библиотеки.

Давайте
Total votes 26: ↑26 and ↓0 +26
Views 3.8K
Comments 3

Загрузка ленивых полей

Java *
☕️ Season Java

Привет, хабр! Сегодняшняя статья навеяна довольно стандартной ситуацией – существует некий «большой» объект, но для работы приложения далеко не всегда требуется загружать его полностью в память. Для решения такой проблемы существует ленивая загрузка полей. Суть её состоит в том, что загрузка поля объекта откладывается до того момента, как оно [поле] понадобится.

Читать далее
Total votes 6: ↑3 and ↓3 0
Views 3.9K
Comments 9

React: разрабатываем HOC и хук для наблюдения за элементами

Timeweb Cloud corporate blog High performance *Website development *JavaScript *ReactJS *


Привет, друзья!


В данной статье мы с вами разработаем HOC (Higher-Order Component — компонент высшего порядка) и хук (custom hook) для наблюдения за DOM-элементами на странице с помощью Intersection Observer API.


Функционал нашего HOC будет похож на функционал, предоставляемый такими пакетами, как react-lazyload или react-lazy-load. Основное его назначение будет состоять в отложенной (ленивой — lazy) загрузке компонентов. Суть идеи заключается в рендеринге только тех компонентов, которые находятся в области просмотра (viewport — вьюпорт), что может существенно повысить производительность приложения.


Назначением хука будет регистрация пересечения (intersection) наблюдаемого (observable) элемента с областью просмотра (или другим элементом). Этот хук предоставляет очень интересные возможности, парочка из которых будет рассмотрена в соответствующем разделе.


Репозиторий с кодом проекта


При разработке инструментов я буду применять систему типов, предоставляемую TypeScript.


Если вам это интересно, прошу под кат.

Читать дальше →
Total votes 4: ↑3 and ↓1 +2
Views 1.6K
Comments 2