понедельник, 4 декабря 2017 г.

Bootstrap v4 · Layout Content Components Utilities · Examples

The Bootstrap v4 final is available now. I began read docs and I saw that this is uncomfortable when component examples are located on different pages. Now I begin try to place these all on one page. Further follows the spaceship logbook.

I get up at six o'clock. I have lunch in seven o'clock. In the morning I clean my space ship.
I came home from space at eight o'clock and I began learn Bootstrap 4 (hereafter Bootstrap)...

+ I read Review of the 4th version of Bootstrap https://tokar.ua/read/8707.
  + Once again I read what is sass (used in Bootstrap).

+ Install Bootstarap.
  + Understand the installation options. The options Compiled CSS and JS and Bootstrap CDN are suitable. Judging by the second, only 2 Bootstrap files (css, js) and 2 js-files jQuery and Popper are needed, then why in the downloaded archive all the other files? (why - described in the documentation in the Contents section, for example, in firebug I saw an error that there is no bootstrap.css.map).
  + I found an interesting link for compiling and downloading only the necessary "Customize and download" http: //getbootstrap.com/docs/3.3/customize/

+ There are 10 sites required for the web-designer in https://tokar.ua/read/6816.
+ I read 30 lightweight JavaScript plug-ins and libraries https://habrahabr.ru/post/309430/.
   + IziModal jQuery - tooltips - impressed!
   + Propper.js - a tooltip for the site, used in Bootstrap.

+ Read the Bootstrap documentation.
   + The source code for the examples can be downloaded from the site.

+ Created a test page bs0.

+ I'm working on docks and Bootstrap examples, added to bs0. Conclusion: for landing page this is not enough.
- Make a list of other libraries used by Bent, and work through (already discussed jQuery.parallax).
- I read the docks on Bootstrap.
   + The Reboot section describes what has changed in version 4.

- I read Bootstrap Docs Components, it is difficult to understand which components are based on which ones are part of others, for which some components are required, for example, Jumbotron, here would be such a graph in the form of a tree to show which components are high and which are low. The idea is how to find out this hierarchy: look at Firebug.

- At revision of all documentation there was an idea: to make such test page that it was possible to look through all examples of contents, components, utilities on it.

 https://sergeiki.github.io/bs0/

+ I can not understand how to do it correctly so that when the checkbox is clicked, the Card Component will appear / disappear. Solved.
+ It's unclear how to change the breadcrumb color. Solved.
+ It is necessary to unify the js-script so that when the checkbox is clicked, the Card Component will appear / disappear. Solved.
+ Split the checkbox buttons and change the button labels to On / Off. As a result, I replaced the checkbox with the usual buttons.

+ If you disable popper.js, then alert dismiss button does not work and cards are not closed.
+ I tried to place bs0 on blogspot or on sites.google.com/site/sergeikisite, it did not work, then I tried github.com - it turned out, and besides if I give the name to a repository like sergeiki.github.io, it even comes by the link https://sergeiki.github.io, but this way is suitable only for one project, it's a pity, therefore, something has to be sacrificed, but the idea should be remembered if you need free html hosting.

+ I got to the carousel component, the sample from the help without images did not rotate to the size of the image, as shown in the help, until I framed the images, then I realized that the help is also in the image.
+ I found good examples of carousel https://bootsnipp.com/tags/carousel, just what I'm doing.
- It can remove container, then the page will be on the whole width of the window, and it looks like it would be better.
+ You can also change the color of the entire background by adding <body class = "bg-light">.

- I do not understand how to move the carousel-caption into a corner. can be done with fixed-top + text-right, but is not it crooked?
Another observation - in the side does not move, because the sides of the elements are carousel-control.
Googling, there is a solution: .carousel-caption {top: 0; bottom: auto; }, in terms of displacement up works.
- How to use the bootstrap icons, we need the up arrow.
- Noticed 3 glitches (bugs) in the slideshow: jitter after stopping the slide, resuming the disconnected slideshow after hand switch slides and if last slide have width more than showed then it take part of first slide during slide moving.
- I tried to add a Close icon for Carousel and Breadcrumb, but it did not work, probably because for modals and alerts.
+ Another dock https://www.w3schools.com/bootstrap4/

+ On the netbook, I noticed that my decision to get the carousel-caption up with a line feed is not good. Removed line breaks.
- Is it possible to do collapsing up?

+ On the netbook noticed that the footer of Card2-4 is not at the bottom, but jumps, it turned out that there should be a card-body block, then the footer is correctly positioned according to the level of the remaining cards. Added class="class-body" in div with id="accordion".
+ Google, how to change the direction of collapse, sorted out an example, thought that the case in css or classes, then it came down - it all depends on the order of the collapsible element - above or below the control element, then it will collapse up or down, respectively.

- Idea: I can make an accordion card2-4 button as a split dropdown component and choose one of three card slots through the menu.
- The idea: to make Tooltip or Popover Component on all buttons inside which other components are not immediately visible.
+ If I click on the button, the tooltip does not disappear. Solution: data-trigger = "hover".
+ Problem: it is not possible to set and toggle popover from the enabled state (show). I decided: data-trigger="manual", $("#btn_card1").popover('toggle') and $(this).popover('toggle').
- I found an error: I do not specify data-toggle="popover" to button, but $(this).popover('toggle') works for it. Solution: I had to check $(this).attr("data-toggle")=="popover".

https://sergeiki.github.io/bs0/

+ I tried Scrollspy component, bugs: when selecting an item (menu or list) the previous item is highlighted instead current item; determined that this bug is for h2-h4 HTML tags.
+ When I changed the window size then the navbar brand was unchanged; I replaced it with navbar-text.
- When I resized the browser window the scrollspy did not look nicely.
+ After updating to Bootstrap 4.0.0 above bug with radios came back; I looked at the help, there is a norm, noticed that there was a new class - btn-group-toggle, added - the norm; bug in scrollspy with h2-h4 remained.
- Bug: when opening the modal window then the justify-content-start text is moving in the navbar, and if the navbar is positioned (fixed-top etc.) then it moves to the right (because the modal window disables the browser scroll and the navbar expands, however, in the help this is not observed).

There is a Demo Link on GitHub Pages: https://sergeiki.github.io/bs0
There is a Source Code on GitHub: https://github.com/sergeiki/bs0

пятница, 11 августа 2017 г.

О.О.Новосёлов. Женщина. Учебник для мужчин

Посвящается группе ВК



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

Мужчина и женщина взаимодействуют друг с другом сразу в трех измерениях:
1. Как самец и самка вида Хомо сапиенс - биологические отношения.
2. Как партнер и партнер в бизнесе - экономические отношения.
3. Как личность и личность - межличностные отношения.

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

четверг, 22 июня 2017 г.

Анатолий Протопопов. Трактат о любви, как её понимает жуткий зануда

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

...жизнь может существовать лишь в динамическом равновесии между постоянным синтезом белков и их распадом.
<...>
К примеру, от активности генов, определяющих выработку гормонов серотонина и норадреналина зависит, будет ли человек по жизни беззаботным растеряхой, или напротив – озабоченным аккуратистом.
В «процессе эксплуатации» генетический материал постепенно искажается, в нём накапливаются ошибки, в результате организм столь же постепенно снижает жизнеспособность и в конце концов умирает.
<...>
Феномен размножения живых существ состоит в том, что потомки получают гены, практически свободные от этих накопленных ошибок. В противном случае дети бы наследовали от родителей не только особенности строения тела, но и… возраст (что мы фактически наблюдаем в экспериментах по клонированию), и смена поколений очень быстро бы заглохла, а вернее просто бы не возникла.

Умножение лучше всего производить делением.
Из разговора двух амёб

среда, 8 марта 2017 г.

Произведение n чисел массива на JavaScript

Задача 1.1. У вас есть массив целых чисел, найдите наибольшее произведение из трёх чисел данного массива.
Решение.

var unsortedArray = [-10, 7, 29, 30, 5, -10, -70];
 
computeProduct(unsortedArray); // 21000
 
function sortIntegers(a, b) {
  return a - b;
}
 
// Наибольшее прозиведение - это (min1 * min2 * max1 || max1 * max2 * max3)
function computeProduct(unsorted) {
  var sortedArray = unsorted.sort(sortIntegers),
    product1 = 1,
    product2 = 1,
    array_n_element = sortedArray.length - 1;
 
  // Получаем произведение трёх наибольших элементов уже отсортированного массива
  for (var x = array_n_element; x > array_n_element - 3; x--) {
      product1 = product1 * sortedArray[x];
  }
 
  product2 = sortedArray[0] * sortedArray[1] * sortedArray[array_n_element];
 
  if (product1 > product2) return product1;
 
  return product2;
}
Возникла идея, чтобы скрипт находил произведение из произвольного количества чисел данного массива.
Решение.
// Массив из 21 элемента.
var unsortedArray = [-10, 7, 29, 30, 5, -10, -70, -11, 8, 28, 31, 6, -11, -71, -13, 79, 99, 32, 55, -100, -170];

// Вывод массива по элементам.
function outArrayByElement(ar) {
    var i;
    for (i = 0; i < ar.length; i += 1) {
        document.writeln(ar[i] + '>br /<');
    }
}

// Основная функция. Подсчет минимального и максимального произведений заданного количества элементов массива.
function multiPulti(ar, m) {
    var n = ar.length - 1,
        keys = [],
        max, min,
        maxAr, minAr,
        tmp,
        flag;

    // Возвращает произведение элементов массива по переданному массиву индексов.
    // Если указано, что print равно true, выводит строку из вышеуказанных значений.
    function multi(_ar, print = false) {
        var _i, _m;
        if (print) { _m = '( '; } else { _m = 1; }
        for (_i = 0; _i < _ar.length; _i += 1) {
            if (print) {
                _m += ar[_ar[_i]] + ' ';
            } else {
                _m *= ar[_ar[_i]];
            }
        }
        if (print) { _m += ')' }
        return _m;
    };

    // Наполнение массива индексов начальными значениями.
    // Анонимная функция для ограничения области видимости переменных.
    (function () {
        var _i;
        for (_i = 0; _i < m; _i += 1) {
            keys.push(_i);
        }
    })();

    max = min = multi(keys);

    // Сердце основной функции.
    // Вычисление произведения m элементов n-мерного массива.
    // Вывод минимального и максимального вышеуказанных произведений.
    (function () {
        var _j, _k;
        do {
            for (_j = m - 1; _j >= 0; _j -= 1) {
                flag = false;
                if (keys[_j] < n - m + 1 +_j) {
                    keys[_j] += 1;
                    for (_k = _j + 1; _k < m; _k += 1) {
                        keys[_k] = keys[_k - 1] + 1;
                    }
                    flag = true;
                    _j = -1;
                }
            }
            tmp = multi(keys);
            //document.writeln(multi(keys, true) + '>br /<');
            //outArrayByElement(keys);
            if (tmp > max) { max = tmp; maxAr = multi(keys, true); }
            if (min > tmp) { min = tmp; minAr = multi(keys, true); }
        } while (flag);
        document.writeln('min=' + min + ' ' + minAr + ', ' + 'max=' + max + ' ' + maxAr);
    })();
}
// Первый параетр - массив элементов.
// Второй параметр - количество элементов, произведене которых нужно найти.
multiPulti(unsortedArray, 7);
Некоторые результаты (для последовательностей из 2, 3, 5, 7 и 20 чисел):
min=-16830 ( 99 -170 ), max=17000 ( -100 -170 )
min=-1329570 ( 79 99 -170 ), max=1683000 ( 99 -100 -170 )
min=-9439947000 ( -71 79 99 -100 -170 ), max=8364510000 ( -70 -71 99 -100 -170 )
min=-16614306720000 ( -71 79 99 32 55 -100 -170 ), max=36343795950000 ( -70 -71 79 99 55 -100 -170 )
min=-4.641808736809999e+28 ( -10 7 29 30 -10 -70 -11 8 28 31 6 -11 -71 -13 79 99 32 55 -100 -170 ), max=2.3209043684049993e+28 ( -10 7 29 30 5 -70 -11 8 28 31 6 -11 -71 -13 79 99 32 55 -100 -170 )

среда, 1 февраля 2017 г.

Джонатан Литтелл. Благоволительницы

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

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

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

Я не из тех, кто раздражается по пустякам, я хорошо владею собой. Но и мне тяжело.

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

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

И еще я убеждаюсь день изо дня, что людская память коротка.

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