makeomatic
Заполнить бриф

Звоните: +7 (495) 79-222-44

Блог Makeomatic: разработка сайтов и мобильных приложений

Как починить статус бар в iOS7

| Категории: FAQ, iOS7
Анна Аминева

Статус Бар

Как и многие из вас я тщательно работаю над переходом на iOS7 в течении долгого времени. С момента разработки старых приложений в Xcode5 для iOS7, статус бара, накладывающегося на контроллеры видов (views/view controllers), добавилось много головной боли.

Удаление анонимного слушателя событий (anonymous event listeners) в JavaScript

| Категории: Javascript
Анна Аминева

Иллюстрация блокнота

Поддержка замыканий

Одна вещь, которую я люблю в JavaScript- это поддержка замыканий ‘closure’.

1
2
3
4
5
6
7
8
9
function alertOnClick(message)
{
	    var btn = document.getElementById('btnAlert');
	    btn.addEventListener('click', function() {
	        alert(message);
	    }, false);
}
 
alertOnClick('You have clicked the button!');

Создавайте отчет о выполненной работе, используя Git Log

| Категории: GitHub
Анна Аминева

Зарылся

Иногда наши клиенты просят отправить недельный отчет по проделанной работе. Несомненно, это занятие не доставляет удовольствия ни одному разработчику. Я предпочитаю предоставлять данную информацию с помощью git log.

Способ создания git log

Результат можно достичь, в случае использования индивидуальных настроек:
git log --author=Vitaly # Поставьте свое имя

Генерируем следующий вывод данных:

Фотографируй себя когда создаешь коммит

| Категории: GitHub
Анна Аминева

Самофото

Начнем со скачивания imagesnap из https://github.com/rharder/imagesnap или установим его с помощью homebrew
brew install imagesnap

Создадим ~/.gitshots содержащий:
mkdir ~/.gitshots

Добавим post-commit hook, чтобы привязать ваше github хранилище:

1
2
3
4
5
6
7
#!/usr/bin/env ruby
file="~/.gitshots/#{Time.now.to_i}.jpg"
unless File.directory?(File.expand_path("../../rebase-merge", __FILE__))
  puts "Taking capture into #{file}!"
  system "imagesnap -q -w 3 #{file} &"
end
exit 0

Наслаждайтесь!

Блокнот с помощью браузера с одной строчкой кода

концепции и практическое применение

| Категории: Javascript, HTML5
Анна Аминева

Иллюстрация блокнота

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

Текстовый редактор

Существует очень простой способ использования браузера в качестве текстового редактора. Я просто открываю новую закладку и набираю в url закладке:

data:text/html, <html contenteditable>

Вот и браузерный блокнот.

Почему это работает?

Не надо это запоминать. Это вам не ракеты в космос запускать. Используем формат Data URl и говорим браузеру отрисовать html тег (можете попробовать javascript:alert('Bazinga');)

Содержимое вышеописанного html файла- это простая строка с html5 атрибутом contenteditable.

Важно знать: строка будет работать на современных браузерах, которые распознают данный атрибут.
Все готово. Удачи.

Читайте так же статьи по теме:

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

особенности компоновки спрайтов (sprites)

| Категории: FAQ
Виталий Аминев

Макбук про с дисплеем ретина

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

Простого способа переделать все графические элементы не существует. Я, конечно, надеюсь что для начала у вас все
еще есть оригинальные векторные изображения. Тем не менее, проблема кроется не в том, что вам придется создавать все
графические элементы заново. Проблема заключается в том, что вам потребуется поддерживать и старые устройства, для которых
не требуются детальные изображения. Более того, вы не можете изменять ширину или высоту div контейнеров, содержащих
фоновые графические элементы, так как вы всего лишь получите большое изображение, пестрящее “огромными” пикселями.

Преобразуем ваши спрайты для работы с ретиной

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

Javascript, работа с переменными и их типы

скалярные и составные данные, указатели на объекты и массивы

| Категории: Javascript
Виталий Аминев

Фанатизм

Типы переменных в Javascript

1
2
3
4
5
6
7
8
1. String // строка
2. Boolean // булин: true/false
3. Number // число 
4. Object // Объект
5. Array // Массив
6. Function // Функция
7. null // тип - объект, на самом деле ссылка на объект null
8. undefined // не существующая переменная

Скалярные типы переменных

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

К скалярным типам данных относятся:

  1. String

Быстрое тестирование приложений на Cordova/PhoneGap

| Категории: Cordova, PhoneGap
Vladimir Kratyk

Создаем приложение

Я думаю, что у многих в процессе написания приложения с использованием фреймворка Cordova/Phonegap возникала проблема тестирования приложений на девайсе. После каждого изменения нужно постоянно исполнять команды build и run. Этот процесс занимает много времени. А время для разработчиков очень важно ;).

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

Начало работы

Нам потребуется ПК, телефон и WiFi роутер.
Если у вас установлен локальный web-сервер на ПК- это хорошо, если нет, то нужно установить. Я отдаю предпочтение сборкам WAMP для Windows, LAMP для Linux, MAMP для MacOS. После этого копируйте весь свой проект в папку , в которой сервер хранит все файлы, который он предоставляет “наружу”. Для проверки успешности установки набираем в строке браузера http://localhost/
В настройках Apache сервера (файл httpd.conf) открываем доступ к корневой папке:

1
2
3
4
5
6
<Directory />
  Options Includes Indexes FollowSymLinks
  AllowOverride All
  Allow from all #для Всех
  #Allow from 192.168.0.2 для определенного IP-адресса
</Directory>

Перезагрузка сервера

Сохраняем и перезапускаем сервер. Для проверки в строку браузера вводим IP адрес, который роутер выдал вашему ПК (команда ipconfig для Windows и ifconfig для Linux/MacOS).
К примеру: http://192.168.0.3
Подключаемся к WiFi сети с помощью телефона.

На заметку

Очень важно, чтобы телефон и ПК, на котором установлен web-сервер, находились в одной подсети. На телефоне открываем стандартный браузер и вводим http://192.168.0.3/AppName/www, где 192.168.0.3- это IP адрес вашего ПК, на котором установлен web-сервер, AppName/www - это путь к паке, где расположена веб-часть вашего приложения.
Выбор стандартного браузера обусловливается тем, что фреймворк Cordova/PhoneGap запускает ваше приложение на том самом движке, на котором работает стандартный браузер.

Спасибо за внимание и удачи в НАШЕМ УВЛЕКАТЕЛЬНОМ ДЕЛЕ!

P.S.: если же у вас нет роутера, но ПК имеет публичный IP-адрес, то вместо 192.168.0.3 вы должны ввести публичный IP-адрес и тогда можете заходить откуда угодно. Главное иметь подключение к Интернету.

Ежедневные открытия

часто задаваемые вопросы, приводящие к провалам

| Категории: AngularJS
Виталий Аминев

Что такое области видимости в Angular.js?

Scope, оно же область видимости - это объект, ссылающийся на своеобразную модель приложения. Это контекст, в котором
исполняются и обрабатываются выражения.

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

По сути scope - это сердце вашего приложения, в котором и происходит вся “магия”.

Как писать интеграционные тесты с использованием $httpBackend из набора Angular-mocks

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

Приводим ответ в виде примера:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var backendService = angular.module("backendService", ["nameOfYourApp", "ngMockE2E"]);
backendService.run([
  "$httpBackend",
  function ($httpBackend) {
    
    $httpBackend.when("GET", /^\/uri\/to\/match$/).respond(function(method, url, params){
      // здесь самое интересное - формат ответа. Он обязательно должен быть в виде массива
      // 1 элемент - код ответа, Number
      // 2 элемент - строка с ответом, String
      // 3 элемент - дополнительные Headers, Object
      return [ 200, JSON.stringify({success:true, hello: "World!"}), {} ];
    });
  }
]);

Тренды поисковой оптимизации

В разрезе эволюции алгоритомов поисковых машин

| Категории: SEO
Анна Аминева

Прошлое и настоящее Seo

1997-1999- зарождение поисковых машин. Период зомбированной работы seo- специалистов, занимающихся добавлением каждого сайта в поисковые машины. По сей день некоторые сео-компании предлагают своим клиентам самостоятельно регистрировать сайт во всевозможных поисковиках. Далеко не все знают о программах индексации, которые имеют алгоритмы Page Rank (алгоритм ссылочного ранжирования), Trust Rank (точные данные авторитетности сайта), которые, в свою очередь, хранятся в строжайшем секрете.

Расцвет спама

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

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

Что за правило, не имеющее исключений?

Yahoo использовал алгоритмы, исключающие страницы, использующие черные способы оптимизации

Внешние факторы: хорошо для прошлого и бесполезно для будущего?