Category Archives: Фронтенд

Дерево Пифагора

Posted on by — Leave a reply

С Википедии

 

  Дерево Пифагора
  
    // функция рисует под углом angle линию из указанной точки длиной ln
    function drawLine(x, y, ln, angle)
    {
      context.moveTo(x, y);
      context.lineTo(Math.round(x + ln * Math.cos(angle)), Math.round(y - ln * Math.sin(angle)));
    }
    // Функция рисует дерево
    function drawTree(x, y, ln, minLn, angle)
    {
      if (ln > minLn)
      {
        ln = ln * 0.75;
        drawLine(x, y, ln, angle);
        x = Math.round(x + ln * Math.cos(angle));
        y = Math.round(y - ln * Math.sin(angle));
        drawTree(x, y, ln, minLn, angle + Math.PI / 4);
        drawTree(x, y, ln, minLn, angle - Math.PI / 6);
        // если поставить угол Math.PI/4 , то выйдет классическое дерево
      }
    }
    // Инициализация переменных
    function init()
    {
      var canvas  = document.getElementById("tree");
      var x       = 100 + (canvas.width / 2);
      var y       = 170 + canvas.height;  // положении ствола
      var ln      = 120;                  // начальная длина линии
      var minLn   = 5;                    // минимальная длина линии
 
      canvas.width  = 480; // Ширина холста
      canvas.height = 320; // высота холста
 
      context             = canvas.getContext("2d");
      context.fillStyle   = "#ddf"; // цвет фона
      context.strokeStyle = "#020"; //цвет линий
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.lineWidth = 2; // ширина линий
      context.beginPath();
      drawTree(x, y, ln, minLn, Math.PI / 2);
      context.stroke();
    }
 
    window.onload = init;

Parallax scrolling

Posted on by — Leave a reply

Ссылки

http://www.peaxl.ru/inspiration/21-primer-ispolzovaniya-parallax-scrolling-v-veb-dizajne
http://netfruits.com/2013/03/parallax-scrolling-examples/
http://habrahabr.ru/post/141687/

Не тестила, но надо глянуть

Parallax scrolling responsive framework
http://jalxob.com/cool-kitten/

Почему я не люблю AJAX-автоподгрузку

Posted on by — Leave a reply

https://habrahabr.ru/post/140781/

Почему я не люблю AJAX-автоподгрузку и предпочитаю ссылки с номерами страниц

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

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

Я не люблю автоподгрузку новых элементов на страницу потому что:

1) Она не даёт понимания о количестве страниц сайта.
Примитивная манипуляция, чтобы человек смотрел и смотрел, не зная сколько ему ещё предстоит потратить на это времени. Как только ты досмотрел страницу и готов заняться другим делом, псевдодружелюбный сайт подгружает новую страницу.

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

2) Нет никакой гарантии, что ссылки и новости доступные через автоподгрузку проиндексируются в поисковиках. Допустим на странице показывается 10 последних элементов, в перерыв между заходами робота было опубликовано ещё 20, робот увидит только последние 10 и предпоследние 10 не проиндексируются. Если ваш сайт не твиттер и не имеет специального договора с гуглом, то рассчитывать на 100%-ю индексацию не стоит. Некоторое увеличение шансов индексации даёт наличие RSS.

Применительно к сайту-примеру мы имеем проиндексированными 170 страниц из более чем 240, что составляет менее 71% страниц.

3) Если у сайта есть страницы, то кроме того, что дать прямую ссылку, я всегда могу сказать кому-то: ты там на N-странице, на M-месте. А если автоподгрузка: ты крути страницу и гляди внимательнее. Видимо поэтому в поисковой выдаче AJAX-автоподгрузка используется редко.

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

Если провести аналогию с книгами, то вначале были свитки, потом книги с номерами страниц, а потом кто-то догадался к свитку прикрутить электромотор и типа номера уже не нужны. Хочешь попасть в ленте на 2 года назад — прикрути маленький моторчик к колесу мыши и иди попей кофе.

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