Адаптивные изображения без шаманства / Блог компании Кельник. Все, кто сталкивался с задачей сделать адаптивную графику, знает, что решений уже масса, но никакого единогласно принятого не существует. Зачастую выбор и применение решения для адаптивных изображений становятся головной болью фронтенд-разработчиков. Им приходится заменять src картинок, подгружать однопиксельные изображения и лепить прочие костыли. Нас это не устроило и мы решили сделать свой мотороллер. На типичных сайтах изображения могут появляться тремя способами. Быть элементами дизайна сайта (бекграунды, кнопки и т.д.).Загружаться через специальные модули (например, изображения в фотоальбом).Вставляться через WYSIWYG-редактор CMS (например, в текст статьи).
Мы захотели получить такое решение, которое было бы некой «надстройкой» над сайтом. Сначала на помощь приходит реализация Adaptive Images… Метод Adaptive Images Идея в том, чтобы с минимумом изменений в коде сайта предоставить эти самые адаптивные картинки. Плюсы Adaptive Images Минусы Adaptive Images А теперь немного о грустном. Responsive Web Design. Js. 250 строк кода распознающих дату на русском языке. Около года назад мне понадобилось распознавать даты в тексте, который вводят пользователи. Пришлось немного разобраться в регулярных выражениях и написать функцию, на вход которой поступает текстовая строка, а в результате получается распознанная дата. Пример и код в jsFiddle. Код не претендует на образец, является отъявленной лапшой человека, который занимается программированием в качестве хобби. Но уже год спокойно работает и выполняет свои функции в 3х проектах. Если вы захотите его использовать и, тем более, если хотите показывать его программистам, вам придётся его доработать и оптимизировать, у меня до этого руки, пока, не дошли.
Зайдя в пример на jsFiddle, вы можете попробовать разные варианты и легко разобраться, как он работает и поиграться разными фразами. Используется в Javascript очень просто: jsParseDate("Через 10 дней купить подарки Жене на Новый год в 12:30 напомнить"); Надеюсь, хоть кому то это пригодится. Плагин найдёт широкое применение в планировщиках. «WebGL Beginner's Guide» Глава 1: Начиная работать с WebGL. Всем привет! Хочу начать вольный перевод отличной книги «WebGL Beginner's Guide», которая, на мой взгляд, будет интересна не только новичкам, но и более продвинутым разработчикам. Содержание: Глава 1: Начиная работать с WebGL Глава 2: Рендеринг геометрии Глава 3: Освещение Глава 4: Камера Глава 5: Движение Глава 6: Цвет, глубина и альфа-смешение Глава 7: Текстуры Глава 8: Выбор Глава 9: Собираем все вместе Глава 10: Дополнительные методы WebGL первоначально была основана на OpenGL ES 2.0 (ES означает Embedded Systems), версии спецификации OpenGL для таких устройств как iPhone от Apple и iPad.
Понять структуру WebGL-приложения Создавать свои области рисования (canvas) Проверить WebGL-возможности вашего браузера Понять, как устроена машина состояний WebGL Изменять переменные WebGL, которые влияют на вашу сцену Загружать и исследовать полнофункциональные сцены Системные требования WebGL является веб-основой API 3D-графики. Что представляет собой WebGL Структура WebGL приложения Загружаем 3D-сцену. Делаем «карту памяти» на Javascript с локальным хранением в базе данных браузера. Это небольшой учебный пример редактора карты памяти. За счёт очень подробных комментариев и простого кода, понять его не составит проблем. Статья предназначена для знающих и изучающих Javascript. Я опишу особенности создания редактора карты памяти, который использует базу данных браузера. Причём, это будет не LocalStorage, который не может превышать 5 мегабайт. Объём данных сможет превысить 100-200 мегабайт, так как используется IndexedDB или webSQL, смотря что доступно в конкретном браузере.
Исходники выложены в открытый доступ на Github. Мы уложимся в 520 строк кода, при этом в нашей карте можно будет перетаскивать узлы между собой, удалять, переименовывать и создавать новые. Секрет минимализма в том, что мы будем использовать проверенные в бою плагины: Код программы с комментариями, для тех, кто торопится Многие могут дальше не читать, а просто ознакомиться с кодом. Главный Javascript код с очень подробными комментариями Инструменты которыми я пользуюсь при программировании. СПРАВОЧНИК КОМАНД JAVASCRIPT. Данный справочник представляет Вашему вниманию наиболее полное руководство по объектам, командам и операторам языка JavaScript. Рассмотрены все элементы языка, некоторые даны с примерами употребления. Все элементы языка отсортированы в алфавитном порядке. Текст страницы: 1. Полужирным шрифтом выделены элементы языка. 2. 3. Как найти нужный элемент?
Справочник JS abs (Метод) Возвращает абсолютное значение своего аргумента Math.abs(argument)Применение: Следующие примеры возвращают соответственно 10 и 12.5 document.writeln (Math.abs (-10)); John. age. value = 12.5; document.writeln (Math. abs(John.age.value)); acos (Метод) Возвращает арккосинус своего аргумента (от 0 до Пи-радиан).Math.acos(argument)Применение: Аргумент должен быть числом в диапазоне между -1 и 1. Alert (Метод) Выводит на экран диалоговое окно JavaScript Alert с кнопкой ОК и определенным программистом сообщением. anchors array (Объект) Массив с информацией о якорях в документе.