Примеры js: JavaScript готовые скрипты — примеры на JS

Пример реализация Композиции в JavaScript

Spread the love

В прошлой статье о Композиции было подробно рассказано что это такое и зачем она нужна. В этой статье рассмотрим реальный пример архитектуры с использованием этой парадигмы. Рассмотренный пример композиции очень известный и его вариации часто можно встретить в различных учебных пособиях и в реальном коде. Для лучшего понимания материала рассмотрение композиции будет основано на сравнение ее с классическим наследованием.

И так допустим, что вы разрабатываете веб игру по типу фермы. В этой игре у вас есть собаки и коты. Первым делом вы решили использовать парадигму классического наследования и создать на его основе архитектуру приложения. Вам было нужно обобщить общие признаки этих сущностей и создать базовый класс с общими признаки а потом создать потомки этого класса для конкретных сущностей. Вот что у нас получилось:

class Animal() {
  constructor(name, energy) {
    this. name = name
    this.energy = energy
  }
  eat(amount) {
    console.log(`${this.name} is eating`)
    this.energy += amount
  }
  sleep() {
    console.log(`${this.name} is sleeping`)
    this.energy += 1
  }
  play() {
    console.log(`${this.name} is playing`)
    this.energy -= 1
  }
}
class Dog extends Animal {
  constructor(name, energy, breed) {
    super(name, energy)
    this.breed = breed
  }
  bark() {
    console.log('Woof Woof!')
    this.energy -= .1
  }
}
class Cat extends Animal {
  constructor(name, energy, declawed) {
    super(name, energy)
    this.declawed = declawed
  }
  meow() {
    console.log('Meow!')
    this.energy -= .1
  }
}

В этом примере мы абстрагировали общие свойство каждого животного такие как name, energy, eat, sleep и play в базовый класс Animal. И далее для создания индивидуального типа животного такого как собака или кошка мы создали соотвествующие подклассы Dog и Cat.

Что бы нам проще бы дальше работать с архитектурой опишем этот пример в псевдокоде, для визуализации структуры:

Animal
  name
  energy
  eat()
  sleep()
  play()
  Dog
    bread
    bark()
  Cat
    declawed
    meow()

Используя классическое наследование нашей целью было минимизировать дубликацию кода и максимизировать переиспользованние кода. И вроде бы мы смогли добиться этой цели. По крайней мере на данном этапе у нас все должно хорошо работать.

Но сделаем один шаг в будущее и представим что наша игра стала популярной, и мы продолжили работать над ее развитием. И первое что нам нужно будет сделать это добавить новую сущность “игроки“. Что бы наши пользователи смогли играть не только за кошек и собак но и за самих себя. Для этого нам надо будет изменить структуру классов следующим образом:

User
  email
  username
  pets
  friends
  adopt()
  befriend()
Animal
  name
  energy
  eat()
  sleep()
  play()
  Dog
    bread
    bark()
  Cat
    declawed
    meow()

Это структура построена по парадигме классического наследования. И вроде бы ничего плохо не случилось. Все снова должно хорошо работать. Но к сожалению в отличие от примеров из учебников, в реальной жизни невозможно предугадать новые требования и вектор развития программы. Допустим после 6 месяцев работы программы наши менеджер решили что нам нужны новые изменения. Игроки полюбили наше приложение и им понравилось возможность играть за выдуманный персонажей и им захотелось больше игровых возможностей. У нас сейчас только экземпляры классов животных умеют есть (eat), спать (sleep) и играть (play). Было принято решение предоставить эти возможности так же нашим игрокам. Хорошо не проблема мы можем изменить нашу структуру классов.

Но как это лучше сделать? И так нам нужно что бы пользователи то же могли есть (eat), спасть (sleep) и играть (play). На данный момент эта функциональность встроена в базовый класс Animal. Поэтому нам нужно снова выделить общие свойства и создать новый базовый класс. Примерно так:

FarmFantasy
  name
  play()
  sleep()
  eat()
  User
    email
    username
    pets
    friends
    adopt()
    befriend()
  Animal
    energy
  Dog
    breed
    bark()
  Cat
    declawed
    meow()

В данном случае нам пришлось добавить еще одно наследование. Технически это будет работать, но это будет очень хрупкий базовый класс. В итоги мы получили анти-шаблон который насколько распространен, что у него есть собственно имя Супер объект или Объект бог (God object) С использованием наследования мы вынуждены создавать классы вокруг наших сущностей: игроков, животных, собак и котов. Проблема с игроками сегодня может отличаться от проблем в будущем. Потому что требования всегда могут меняться и это нормально. Мы не может сказать в какой то момент что бы будем реализовать новый функционал только потому что он ломает нашу прекрасную иерархическую структуру классов. Применяя наследование на начальном этапе мы с одной стороны упрощаем себе жизнь, так как применение наследования интуитивно понятно и просто. Но при этом, при условия дальнейшего развития мы лишаемся гибкости и сильно усложняем дальнейшее изменения структуры классов. И в итоге когда нам нужно изменить жестко связанные наследованием структуры начинают разрушатся. Сущность этой проблемы можно описать цитатой создателя Erlang:

Проблема с объектно-ориентированными языками, в том что у них есть все это неявное окружение которые всегда с ними. Вы хотите получить банан, а в итоге получаете гориллу с бананом да еще находящуюся в джунглях
Дон Армстронг

И так если используя наследование так сложно создать гибкую архитектуру, как нам следует поступить? Используя наследование при создание сущности вы всегда отвечаете на вопрос: А из чего эта сущность состоит? Какие у нее есть состояния и какие у нее должны быть методы? Так вот вместо этого вопроса нужно всегда стараться отвечать на вопрос: А что сущность будет делать и что для этого ей нужно? К примеру. Собака у нас должна спать, есть, играть и лаять. Кошка должна спать, есть, играть и мяукать. Игроки у нас будут спать, есть, играть, брать животных и дружить друг с другом. И так давайте трансформируем все эти глаголы в функции, которые будут выглядеть следующим образом

const eater = () => ({})
const sleeper = () => ({})
const player = () => ({})
const barker = () => ({})
const meower = () => ({})
const adopter = () => ({})
const friender = () => ({})

Вместо того что бы реализовывать эти функции в выбранных классах мы их абстрагируем в самостоятельные функции И теперь мы можем использовать их для создания какой угодно композиции из них. Давай взглянем на один из предыдущих методов.

eat(amount) {
  console. log(`${this.name} is eating.`)
  this.energy += amount
}

Обратите внимание что мы с начало выводим в консоль сообщение, а затем увеличиваем свойство текущего экземпляра this.energy на аргумент функции amount. Теперь нам нужно ответить на вопрос как мы сможем оперировать текущим экземпляром из внешней функции. Что если мы передадим экземпляр при вызове функции? Как то так.

const eater = (state) => ({
  eat(amount) {
    console.log(`${this.name} is eating.`)
    state.energy += amount
  }
})

То есть вместо использование контекста this у нас будет передаваться контекст state в виде аргумента при вызове функции. И таким образом через замыкание в каждый момент вызова метода eater мы будем изменения контекст state. Изменим все классы в соответствие с этим шаблоном.

const sleeper = (state) => ({
  sleep() {
    console.log(`${state.name} is sleeping.`)
    state.energy += 1
  }
})
const player = (state) => ({
  play() {
    console.log(`${state.name} is playing.`)
    state.energy -= 1
  }
})
const barker = (state) => ({
  bark() {
    console.log(`Woof Woof`)
    state.energy -= .1
  }
})
const meower = (state) => ({
  meow() {
    console.log(`Meow!`)
    state.energy -= .1
  }
})
const adopter = (state) => ({
  adopt(pet) {
    state.pets.push(pet)
  }
})
const friender = (state) => ({
  befriend(friend) {
    state.friends.push(friend)
  }
})

Таким образом у нас есть функции sleeper, player, barker, meower, adopter, и friender. Теперь когда нам нужно добавить выбранную функциональность собакам, кошкам и игрокам мы просто можем добавить эти функции. Давай посмотрим как это выглядит в коде.

function Dog(name, energy, breed) {
  let dog = {
    name,
    energy,
    breed
  }
  return Object.assign(
    dog,
    eater(dog),
    sleeper(dog),
    player(dog),
    barker(dog)
  )
}
const leo = Dog('Leo', 10, 'Goldendoodle')
leo.eat(10) // Leo is eating
leo.bark() // Woof Woof!

Таким образом мы создали нашу собаку Dog у который есть внутренние состояние dog (используя простой объект JavaScript) с атрибутами имя (name), энергия (energy) и порода (breed). А так же используя Object.assign соединили объект dog с необходимыми нам функциями. Таким образом мы изначально ответили на вопрос что собака может делать, а не то что собака представляет из себя. Теперь таким же образом создадим класс кота.

function Cat(name, energy, declawed) {
  let cat = {
    name,
    energy,
    declawed
  }
  return Object.assign(
    cat,
    eater(cat),
    sleeper(cat),
    player(cat),
    meower(cat)
  )
}

Ранее мы определи что кот может спасть играть мяукать поэтому мы следую той же логики как при создание собаки объединили все нужные функции вместе.

И так же создадим игроков.

function User(email, username) {
  let user = {
    email,
    username,
    pets: [],
    friends: []
  }
  return Object. assign(
    user,
    eater(user),
    sleeper(user),
    player(user),
    adopter(user),
    friender(user)
  )
}

Ранее мы решили что игроки, так же могут спасть, есть и играть И сейчас процесс добавления отдельного функционала стал максимально простым У игроков есть email, username, pets и friends и они могут есть, спать играть, брать домашних животных (adopter) и дружить друг с другом.

Теперь давай те проверим нашу теорию, что если мы хотим предоставить всем собакам возможность дружить. Этого не было задумано в самом начале, но с композицией это сделать очень просто. Просто добавить нужно функцию и добавить нужный атрибут friends: [] для ее работы.

Хотелось бы сразу предупредить в статье не утверждается что одна парадигма однозначно лучше другой. И что всегда нужно использоваться только композицию а не наследование. Все парадигмы это всего лишь инструменты. И у каждого инструменты есть плюсы и минусы. Нужно владеть каждым инструментом и использовать соотвествующий инструмент в подходящих условиях.
Предпочитая композицию перед наследованием и думаю о том что сущности могут делать, а не то что сущности представляют из себя, вы получаете больше свободы, избавляетесь от хрупкости базовых классов и жестких связей наследуемых структур.

Парадигма Композиция настолько стало популярной в последнее время, что в новой версии Vue 3.0 было введено специальный функционал для использования этой парадигмы Composition API

Источник используемый для написание этой статьи:

Была ли вам полезна эта статья?

[4 / 5]

Spread the love

Шпаргалка по Axios | MyJavaScript

Skip to main content

Axios — популярная клиент-серверная библиотека для выполнения HTTP-запросов.

Возможности​

Axios предоставляет следующие возможности:

• отправка XMLHttpRequest из браузера
• отправка HTTP-запросов из Node.js
• поддержка Promise API
• перехват запросов и ответов
• преобразование данных запросов и ответов
• отмена/прерывание запроса
• автоматический разбор/парсинг данных в формате JSON
• автоматическая защита от XSRF

Установка​

yarn add axios
# или
npm i axios

Примеры отправки GET и POST-запросов​

// GET-запрос
const getUserById = async (userId) => {
try {
const response = await axios.get(`/users?id=${userId}`)
return response.data
} catch (err) {
console.error(err.toJSON())
}
}
getUserById('1')
// POST-запрос
const addNewUser = async (newUser) => {
try {
const response = await axios.post('/users', newUser)
return response.data
} catch (err) {
console. error(err.toJSON())
}
}
addNewUser({ firstName: 'John', lastName: 'Smith' })

Пример отправки нескольких запросов​

// Первый запрос
const getUserAccount = () => axios.get(`/user/123`)
// Второй запрос
const getUserPermissions = () => axios.get('/user/123/permissions')
// Отправка обоих запросов
const getUserInfo = async () => {
const [account, permissions] = await Promise.all([getUserAccount(), getUserPermissions()])
return {
account,
permissions
}
}

Настройки запроса​

{
url: '/users',
method: 'get', // default
baseURL: 'http://example.com',
// Преобразование запроса
transfromRequest: [(data, headers) => {
return data
}],
// Преобразование ответа
transformResponse: [(data) => {
return data
}],
headers: {
'Authorization': 'Bearer [token]'
},
data: {
firstName: 'John'
},
// Параметры строки запроса
params: {
id: '123'
},
withCredentials: false, // default
responseType: 'json', // default
responseEncoding: 'utf8', // default
// Прогресс загрузки файлов
onUploadProgress: (e) => {},
// Прогресс скачивания файлов
onDownloadProgress: (e) => {},
// Максимальный размер ответа в байтах
maxContentLength: 2048,
// Максимальный размер запроса в байтах
maxBodyLength: 2048,
proxy: {
protocol: 'https',
host: '127. 0.0.1',
port: 5000,
auth: {
username: 'John',
password: 'secret'
}
},
// Токен для отмены запроса
cancelToken: new CancelToken((cancel) => {})
}

Схема ответа​

{
data: {},
status: 200,
statusText: 'OK',
headers: {},
config: {},
request: {}
}

Настройки по умолчанию​

axios.defaults.baseURL = 'http://example.com'
// Дефолтные настройки общих заголовков
axios.defaults.headers.common['Authorization'] = TOKEN
// Дефолтные настройки для POST-запроса
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

Перехватчики​

Мы можем перехватывать запросы или ответы перед их обработкой в then или catch.

// Перехватчик запроса
axios.interceptors.request.use((config) => {
return config
}, (error) => {
return Promise.reject(error)
})
// Перехватчик ответа
axios.interceptors. response.use((response) => {
return response
}, (error) => {
return Promise.reject(error)
})

Обработка ошибок​

const getUserById = (userId) => {
try {
const { data } = await axios.get(`/users?id=${userId}`)
return data
} catch (error) {
if (error.response) {
// Статус ответа выходит за пределы 2xx
const { data, status, headers } = error.response
console.error(data)
} else if (error.request) {
// Отсутствует тело ответа
console.error(error.request)
} else {
// Ошибка, связанная с неправильной настройкой запроса
console.error(error.message)
}
// Другая ошибка
console.error(error.config)
// Подробная информация об ошибке
console.error(error.toJSON())
}
}

Отмена запроса​

const { CancelToken } = axios
const source = CancelToken.source()
const getUserById = (userId) => {
try {
const { data } = await axios.get(`/users?id=${userId}`)
return data
} catch (thrown) {
if (axios. isCancel(thrown)) {
console.error(thrown.message)
} else {
// Обработка ошибки
}
}
}
// Отмена запроса (параметр `message` является опциональным)
source.cancel('Выполнение операции отменено')

Примеры Vue.js

Простой диспетчер задач на Vue.js и TypeScript

25 июня 2023 г.

Автоматическое создание MindMap с помощью ChatGPT

25 июня 2023 г.

Приложение для заказов в Австралии с Vue.js

24 июня 2023 г.

Минималистичный инструмент для создания пиксельной графики, работающий в браузере

24 июня 2023 г.

Пример проекта на основе Vue CLI для демонстрации возможностей OpenAI GPT. Включает в себя текстовые потоки

23 июня 2023 г.

Мощная директива GSAP для Vue

23 июня 2023 г.

Простое приложение-калькулятор, созданное с помощью Vue.js и Bootstrap

23 июня 2023 г.

Приложение-клон Trello, созданное с помощью Vue.js, которое помогает вам управлять задачами

23 июня 2023 г.

Простое создание PDF-файлов в Nuxt.js с помощью pdfmake

22 июня 2023 г.

Вариант выбора Vue 3 для выбора объекта из списка или массива

22 июня 2023 г.

Безопасное встраивание платежей в приложение VueJS

22 июня 2023 г.

Библиотека предоставляет компонент Vue для отображения стикеров на вашем веб-сайте

21 июня 2023 г.

Шаблон должен помочь вам начать разработку Vue 3 в виде готовой таблицы

21 июня 2023 г.

Vue 3 компонуется для полной интеграции управления состоянием MobX.

20 июня 2023 г.

Простое приложение Vue для печати чеков на бумаге 8,5×11

19 июня 2023 г.

Стартовый кошелек Vue с ганашем

19 июня 2023 г.

Простой плагин поля Icon для Kirby CMS.

18 июня 2023 г.

Приложение для управления Todo с использованием Vue Composition API и TypeScript

18 июня 2023 г.

Небольшая веб-игра, созданная с помощью Vue.js

17 июня 2023 г.

Веб-приложение, разработанное для изучения Vue.js и Vuex, которое поможет вам управлять счетами

17 июня 2023 г.

Платформа управления DAO или децентрализованной автономной организацией

16 июня 2023 г.

Веб-приложение поддержки заявок, упрощающее управление заявками в службу поддержки

16 июня 2023 г.

Динамический веб-сайт электронной коммерции с Vue.js и Firestore

16 июня 2023 г.

Веб-управление задачами, вдохновленное Trello

15 июня 2023 г.

Приложение Air Quality Index Tracker, созданное с помощью Vue.js

15 июня 2023 г.

Легкая платформа, предназначенная для обмена файлами, URL-адресами, заметками и информацией

14 июня 2023 г.

Простой клон Trello, созданный с помощью Vue 3 и Vite

14 июня 2023 г.

Веб-приложение Vuejs с NuxtJS, демонстрирующее портфолио и навыки

13 июня 2023 г.

Простое приложение Dapp и Vuejs для управления платежами в эфире

13 июня 2023 г.

Инструмент, предназначенный для извлечения используемого кода CSS/JS из файла покрытия, сгенерированного Google Chrome DevTools

12 июня 2023 г.

Портфолио AlexVRBK с использованием Vue3, TailwindCSS, ThreeJS и AnimeJS

12 июня 2023 г.

Компонуемый Vue для определения ориентации экрана с помощью медиа-запроса

11 июня 2023 г.

Рик и Морти Вики Написано на Vue с Typescript

11 июня 2023 г.

Улучшенное поведение прокрутки для Vue Router

10 июня 2023 г.

Приложение Water Tracker для измерения расхода воды

10 июня 2023 г.

Поле ввода Vue с возможностью быстрой проверки

09 июня 2023 г.

Веб-сайт агентства Digital Heaven, созданный с помощью Vue.js и Nuxt.js

09 июня 2023 г.

Приложение Pixelic Overlay, созданное с помощью Vue.js

08 июня 2023 г.

Сервер Binance Websocket и торговые графики с использованием d3.js и Vue.js

07 июня 2023 г.

Клон Hacker News, созданный с помощью Nuxt

06 июня 2023 г.

Инструмент, который сочетает в себе chatgpt и mermaid для создания диаграмм с помощью естественного языка

06 июня 2023 г.

Простой инструмент для построения графиков и анализа данных

06 июня 2023 г.

Приложение Vue.js для процедурного создания 2D-карт с симплексным шумом

05 июня 2023 г.

Настольное приложение, в котором вы можете легко отслеживать свои задачи на основе времени

05 июня 2023 г.

Приложение для видеоплеера, использующее Vue.js и электрон

05 июня 2023 г.

Инструмент разработки расширений Chrome для отслеживания попаданий в кэш vue-query и последовательностей повторной загрузки

05 июня 2023 г.

Приложение службы веб-записи экрана, созданное с помощью Vue.js

04 июня 2023 г.

Компонент Vue3, имитирующий ввод, выбор и удаление текста пользователем

04 июня 2023 г.

Основные операции CRUD, фильтрация и сортировка с помощью Vant UI 3 и Typescript

04 июня 2023 г.

Пример использования tiptap 2 в качестве компонента Vue 3 без полного отсутствия рендеринга

03 июня 2023 г.

21 лучший пример JavaScript

JavaScript создает платформы, которые могут привлечь пользователей и гарантировать, что они запомнят ваш сайт и продолжат посещать его снова. Его можно использовать для создания игр, API, возможностей прокрутки и многого другого.

Интернет полон вдохновения в области веб-дизайна, в том числе замечательных примеров использования JavaScript для оживления веб-сайта и обеспечения отличного пользовательского опыта. Здесь мы выбираем некоторые из наших любимых примеров JavaScript в действии для вашего вдохновения.

Гистография — это удивительный способ исследовать материю возрастом 14 миллиардов лет

Если вы когда-нибудь смотрели «Космос», то, возможно, помните, как Карл Саган говорил о Космическом календаре. Если бы возраст Вселенной был сжат до одного года, записанная история человечества уместилась бы в самые последние секунды 31 декабря.

14 миллиардов лет событий — это огромный набор данных, и отобразить его в браузере — непростая задача. Но дизайнер и разработчик Матан Штаубер принял вызов — хотя даже он не был уверен, что это возможно: «Я думаю, что главным препятствием должны быть пропорции», — объясняет он. «Как создать временную шкалу, когда 99,9% истории, которую мы знаем, придется уместить менее чем в один пиксель на экране?» Мор: «Если подумать о том, как люди визуализируют историю, временные рамки, вероятно, являются наиболее распространенными, и все же они не сильно изменились со времен печатной бумаги», — говорит он. «Я увидел в этом захватывающую возможность для дизайна. , особенно сегодня, когда есть доступ к большим источникам данных».

Сайт сканирует и индексирует события из Википедии, берет статью и загружает изображение Google и видео YouTube. Данные легко обнаруживаются, и их приятно потреблять. Если вы когда-либо теряли часы, изучая статьи Википедии, выделите достаточно времени для этой статьи.

Adoratorio решил использовать CSS3 и Javascript вместо WebGL, чтобы придать ощущение глубины

Это онлайн-портфолио, демонстрирующее талант итальянского 3D-художника Филиппо Белло, было задумано, спроектировано и разработано внутри Adoratorio Энеей Росси и Алессандро Ригобелло. Команде была предоставлена ​​полная свобода в его разработке.

Игра с глубиной на сайте очень эффективна — изображения медленно движутся к зрителю, создавая впечатление погружения в каждый проект. Это достигается с помощью так называемого эффекта сегмента: фоновое изображение реплицируется в разных боксах, которые движутся к зрителю. Команда бросила вызов самим себе, избегая самых очевидных технологий. «WebGL подходит не для всех пользователей, — говорит Росси, арт-директор и соучредитель. «Поэтому главная задача этого сайта заключалась в том, чтобы понять, как сделать экран более глубоким, используя только строки кода CSS3 и JavaScript».

Переходы между страницами и небольшие эффекты масштабирования на изображениях — приятный штрих к конечному результату, который, по словам Росси, «абсолютно превзошел наши ожидания».

Сайт «Сент-Луис Браунс» оформлен в стиле старинной книги

Для этого веб-сайта, посвященного истории бейсбольной команды «Сент-Луис Браунс», цифровое агентство HLK создало очень красивый дизайн. Сайт читается как хорошо сделанная старинная книга с главами и текстурированной типографикой. Пользователи могут прокручивать каждую главу для просмотра истории, основанной на времени.

Источником вдохновения для сайта послужили рукописи и рекламные объявления 1920-х годов, причем многие изображения относятся непосредственно к тем годам, которые они описывают. Это привносит уникальное чувство старины в современное цифровое пространство. Это дополняется серо-коричневой цветовой гаммой, подчеркнутой одним оттенком оранжевого.

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

Сайт создан с использованием Node.js и платформы Express, что обеспечивает плавное обновление и обмен контентом.

На сайте Leg Work Studio используется интерактивная анимация, чтобы оживить опыт.

Leg Work выполняет много отличных работ в Интернете, от графического дизайна до взаимодействия и медиа. Поэтому неудивительно, что его собственный личный сайт не является исключением. Индивидуальность студии проявляется в забавных мультимедийных иллюстрациях. Он сочетает в себе старинные фотоэффекты (такие как узор из точек) с цифровыми белыми акцентами и сканы физического почерка, чтобы создать уникальное искусство, представляющее агентство.

Однако не только иллюстрации делают этот веб-сайт примечательным — интерактивная анимация действительно оживляет его. Некоторые из самих иллюстраций на самом деле представляют собой видеоролики, а не статические визуальные эффекты, созданные с помощью After Effects, а такие компоненты веб-сайта, как боковая панель, плавно анимируются.

Веб-сайт разработан с учетом мобильных устройств, а взаимодействие с мобильными устройствами отражается на рабочем столе, где пользователь может проводить пальцем по трекпаду, чтобы переходить по разделам. Веб-сайт создан с использованием Modernizr для обеспечения совместимости и jQuery для взаимодействия.

Сайт Code Conf, посвященный Нэшвиллу

Сайт CodeConf действительно выходит за рамки стандартного веб-сайта конференции. Конференция проходила в Нэшвилле, штат Теннесси, и все в этом дизайне отдает дань уважения этому месту.

Сам веб-сайт приятно отзывчив и имеет теплую, сплоченную цветовую палитру. Причудливые иллюстрации придают сайту характер и создают игривую эстетику кантри-рока, которая продолжается на всей странице (и даже на самом мероприятии).

Не обходится ни одна деталь, так как даже декоративные горизонтальные линейки меню (видимые только на экранах меньшего размера) гармонируют с эстетикой кантри-рока. Сайт реализует Google Maps для функций определения местоположения и построен с использованием jQuery и AngularJS.

Иллюстрировано все: все площадки, «сет-лист» спикеров, призыв к покупке билетов и перерывы между секциями. На сайте также есть забавные персонажи: векторные кактусы, единороги, драконы, осьминоги, ковбои и девушки, играющие музыку и игриво позирующие на странице.

Сайт IBM Design вдохновлен физическим миром, а не цифровым.

За последние несколько лет IBM вложила средства в развитие программы проектирования и направила компанию к ориентированному на человека подходу к созданию программного обеспечения. Недавно он выпустил IBM Design Language, который содержит обновление словаря анимации. Он содержит рекомендации по дизайну и ресурсы для веб-разработчиков, все с открытым исходным кодом на GitHub.

Что мне нравится в этом анимационном обновлении (даже больше, чем тот факт, что он с открытым исходным кодом), так это то, как студия смотрит на наследие IBM и физический мир для вдохновения, а не на другие цифровые объекты. Хейли Хьюз (Hayley Hughes), ведущий язык дизайна IBM, говорит, что команда черпала вдохновение из машин; в частности, их твердые плоскости, физическая масса и твердые поверхности.

«От мощного удара печатной руки до плавного скольжения каретки пишущей машинки — каждое движение было целенаправленным и продуманным», — объясняет она. «Наше программное обеспечение требует такого же внимания к деталям, чтобы продукты выглядели живыми и реалистичными».

Почему анимация так важна для языка дизайна IBM? «Точно так же, как язык тела человека помогает вам читать разговор, анимация передает важную информацию, которая помогает пользователям понять, как ориентироваться и использовать наши продукты», — говорит Хьюз.

Сайт с изображениями для итальянского винодельческого проекта Masi Tupungato

Этот замечательный веб-сайт международного цифрового креативного агентства AQuest для винодельческого проекта Masi Tupungato, базирующегося в Италии, почти позволяет изображениям говорить самим за себя.

Необычно, что экран загрузки используется для каждой из страниц, когда загружаются четкие полноэкранные изображения. Обычно это было бы большим «нет-нет» — пользователи хотят получить контент как можно скорее. Однако здесь это на самом деле улучшает взаимодействие с пользователем, гарантируя полную загрузку изображений до того, как какой-либо контент будет представлен. Дизайн создает ощущение сопереживания, оставляя у пользователей ощущение, будто они были на винодельне и сами собирали виноград.

Некоторые страницы сайта могут быть слишком тяжелыми (весом от 1,2 МБ до 5 МБ), что можно улучшить, внедрив некоторые методы ленивой загрузки. Тем не менее, несмотря на свой вес, сайт хорошо построен: начальная визуализация занимает менее одной секунды, а повторные посещения загружаются в пределах второй отметки. Фреймворк основан на unsemantic.com, который является преемником 960 Grid System.

При просмотре сайта на рабочем столе и в больших окнах просмотра пользователи могут видеть и взаимодействовать с каждым из вин по отдельности. Они могут воспользоваться преимуществом большего размера экрана, чтобы одновременно отображать все характеристики и детали вина. Напротив, на мобильном сайте детали и описание скользят, и их можно снова плавно убрать.

tota11y делает доступность проще

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

Введите tota11y: простой инструмент, который можно включить в виде файла JavaScript на страницу или, что еще проще, использовать в качестве букмарклета на любом сайте. Он помечает элементы на странице, которые не соответствуют правилам доступности — скажем, низкий визуальный контраст или отсутствие текстовых альтернатив для изображений.

Элементы Wayward помечаются визуально, что позволяет легко сделать снимок экрана и точно показать членам команды или клиентам, в чем заключаются проблемы, а расширенные пояснения обучают пользователей методам быстрого устранения сбоев.

Веб-сайт Академии Хана для tota11y не слишком гламурен, но ведь и важная работа не всегда блестит. Деловая простота текста — как по внешнему виду, так и по содержанию — противоречит сложности проблемы, которую сам инструмент призван решить.

Сайт «Знай волчанку» рассказывает о заболевании в увлекательной и информативной форме.

Американский фонд волчанки (LFA) — национальная организация, работающая над разгадкой тайны волчанки. Viget сотрудничает с LFA в бесплатном проекте по повышению осведомленности общественности, чтобы помочь широкой общественности понять болезнь.

«Компания LFA хотела создать веселую, но информативную игру, которая помогла бы обучать публику в увлекательной форме и помочь решить эту проблему», — объясняет Лаура Свелц, дизайнер UX и руководитель проекта. «Наш процесс проектирования был направлен на достижение этой цели, а также на создание чего-то, чем люди с волчанкой действительно хотели бы поделиться».

Решением Вигета была карточная игра, вдохновленная казино, созданная с использованием React, в которой каждая карта подчеркивает факт о волчанке. Индивидуальные иллюстрации дизайнера Блэра Калбрета делают игру беззаботной, обращаясь к серьезной теме. Звуковые эффекты, вдохновленные казино, пронизывают игру.

Плавная и быстрая анимация добавляет игре еще больше удовольствия. Мобильный интерфейс такой же интерактивный, как и рабочий стол, и адаптивные переходы были полностью учтены. Конечным результатом является игровой опыт, который делает обучение легким.

«Лодка», онлайн-графический роман

Подробное повествование неуклонно набирает популярность на новостных и медиа-сайтах, но онлайн-графический роман «Лодка» телеканала SBS, основанный на рассказе Нам Ле, кажется уникальным как по стилю, так и по содержанию. исполнение. Иллюстрации тушью суми, искусно выполненная анимация и леденящий душу звуковой пейзаж отражают историю путешествия молодого вьетнамского беженца.

Чтобы воплотить историю в жизнь, иллюстратор Мэтти Хьюн провел шесть месяцев с оригинальной прозой Нам Ле, делая наброски эскизов и многократно создавая персонажей.

«Я думаю, что баланс, который вы видите, связан с этим длительным периодом разработки», — объясняет продюсер Кайли Болтин. «Этот период глубокого погружения в себя позволил членам основной команды узнать историю вдоль и поперек. Мы знали основные моменты истории и знали, какие моменты необходимо выделить. Руководящим принципом было дополнять основное повествование, а не подавлять его или добавлять элемент просто ради него».

Графические панели напоминают дневниковые наброски – срочные, несовершенные и глубоко эмоциональные. Этот сайт доказывает, насколько мощным и увлекательным может быть онлайн-повествование в умелых руках.

Сможешь ли ты бегать как тигр? Узнайте это с помощью этого сайта и вашего приложения для бега

Московская компания Hungry Boys разработала этот впечатляющий сайт для Всемирного фонда дикой природы в России, чтобы привлечь внимание общественности к его кампании «Спасем тигра». Зачем участвовать в гонках с друзьями, если можно участвовать в гонках на амурском тигре, отслеживаемом с помощью GPS?

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

Это великолепная концепция, и к ней прекрасно подходит дизайн. Резкая черно-желтая цветовая палитра — нехарактерно смелая для благотворительного приложения — подчеркивает актуальность инициативы «Спасти тигра».

Создатель Run4Tiger Ксения Апресян говорит, что при проектировании команда определенно думала о движении: «Мы хотели сделать сайт максимально динамичным. частицы, на главной странице.»

Следующая страница: Еще 10 лучших примеров JavaScript, которые вас вдохновят…

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть учетная запись? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Попробуйте первый месяц всего за £1 / $1 / €1

У вас уже есть аккаунт? Войдите здесь

• 1

Текущая страница:
Страница 1

Следующая страница Страница 2

Ежедневные новости дизайна, обзоры, практические советы и многое другое, выбранное редакторами.