21

Re: Веб-Довідник css.in.ua

Я би добавив систему авторизації через соц.мережі або віджет для коментування. Ліньки реєструватись)

Подякували: ostap34PHP1

22 Востаннє редагувалося NaharD (22.07.2017 09:28:22)

Re: Веб-Довідник css.in.ua

Привіт, вчора пофіксив ліве меню, тепер воно завжди повністю відображається, (при прокручуванні, при зміні розмірів вікна, при завантаженні)

Прихований текст

http://replace.org.ua/extensions/om_images/img/5972f7df22d84/Ua5ObU1mTSmzgnKIRXF8Yw.png

        if($(document).scrollTop()){                                                                                // Якщо сторінка завантажена зі зміщенням, то потрібно його компенсувати
            $('.left-menu').css('height', '100vh');                                                                    // Якщо сторінка завантажена без зміщенням, висота лівого меню по висоті вікна браузера
            // console.log('Встановлено початкову висоту по виссоті вікна');
        } else {
            $('.left-menu').css('height', $(window).height() - $('#top').height() + $(document).scrollTop());        // Якщо сторінка завантажена зі зміщенням, висоту лівого меню буде зкореговано
            // console.log('Встановлено початкову висоту з урахуванням висоти верхнього меню');
        }

        $(window).on('resize scroll', function(){
        var docScroll = $(document).scrollTop();                                                                     // Висота прокрутки вікна
        var topHeight = $('#top').height();                                                                            // Висота верхнього меню
        var windowHeight = $(window).height();                                                                        // Висота вікна

        if(docScroll<=topHeight){                                                                                     // якщо прокрутив на висоту, меншу ніж висота верхнього меню
            var newTop = topHeight - docScroll;                                                                        // Взнаю на скільки потрібно підняти ліве меню (від висоти верхнього меню віднімаємо висоту зміщення при прокручуванні)

            $('.left-menu').css({'top': newTop});                                                                     // Зменшую відступ зверху у лівого меню
            $('.left-menu').css('height', windowHeight - topHeight + docScroll);                                    // Та коригую висоту лівого меню. Висота вікна - висота верхнього меню + зміщення при прокручуванна
        } else {
            $('.left-menu').css({'top': 0});                                                                        // При швидкому прокручування значення проскакують, тоді встановлюємо відступ в 0
            $('.left-menu').css('height', windowHeight);
        }
    });

А сьогодні додам простенький пошук, і все було ок, доки не вирішив підсвічувати співпадання. Подивіться будь ласка, що я роблю не так.

var searchString = $('#search_input').val();

        $('#search_input').on('input', function() {
            $('#search_result').empty();
            
            if ( this.value == '' ) {                                                              // Якщо пошуковий запит порожній - показуємо список елементів
                
            } else {
                var searchResult = [];                                                              // Масив для результату пошуку
                
                $('#list-item').find('a').each(function() {                              // Перебираємо кожен елемент списку
          // Чому не видно searchString, воно ж наче глобальна.
                    if ($(this).text().search($('#search_input').val()) != -1)  // Якщо елемент містить в собі слово запиту
                        searchResult.push($(this));                                                // Додаємо знайдені елменти в масив
                });

                $(searchResult).each(function() {
                    pattern = new RegExp($('#search_input').val());
                    var itemName = $(this).html().replace(pattern, '<b>'+ $('#search_input').val() +'</b>');
                    // console.log(itemName);
                    $('#search_result').append($('<a>').attr('href', $(this).attr('href')).text(itemName));
//                    $('#search_result').append($(this));                                  // Чому так не працює?
                });
    
                console.log(searchResult);
            }
        });

Паралельно є ще декілька запитань.

  • Чому змінну searchString не видно в тілі функції, вона ж наче глобальна?

  • Чому не коректно працює $('#search_result').append($(this)); При першому символі все ок, а при другому пустота. Якщо поле очистити і почати пошук вже з іншої літери, то знову при першому - ок, другому - немає ніякого результату пошуку. І так по колу

Всласне, як працює цей пошук, можете наочно переглянути на кодпені.

23 Востаннє редагувалося koala (22.07.2017 09:38:57)

Re: Веб-Довідник css.in.ua

У мене searchString видно, ЩЯРНТ? https://jsfiddle.net/joxy6xbt/

24 Востаннє редагувалося NaharD (22.07.2017 10:11:39)

Re: Веб-Довідник css.in.ua

А я зрозумів. Просто ми ініціалізуємо її у глобальній зоні, а в обробнику події просто витягуємо її (А вона пуста).

Треба ініціалізувати її в самому обробнику, щоб при кожному його виклику, туди потрапляв актуальний пошуковий запит. Це логічно))

        $('#search_input').on('input', function() {
            var searchString = $('#search_input').val();
            $('#search_result').empty();
            
            if ( this.value == '' ) {                                                              // Якщо пошуковий запит порожній - показуємо список елементів
                
            } else {
                var searchResult = [];                                                              // Масив для результату пошуку
                
                $('#list-item').find('a').each(function() {                              // Перебираємо кожен елемент списку
          
          console.log(searchString);                                  // Чому не видно searchString, воно ж наче глобальна.
                    if ($(this).text().search($('#search_input').val()) != -1)  // Якщо елемент містить в собі слово запиту
                        searchResult.push($(this));                                                // Додаємо знайдені елменти в масив
                });

                $(searchResult).each(function() {
                    pattern = new RegExp($('#search_input').val());
                    var itemName = $(this).html().replace(pattern, '<b>'+ $('#search_input').val() +'</b>');
                    // console.log(itemName);
                    $('#search_result').append($('<a>').attr('href', $(this).attr('href')).text(itemName));
//                    $('#search_result').append($(this));                                  // Чому так не працює?
                });
    
                console.log(searchResult);
            }
        });

https://codepen.io/NagarD/pen/NvKwdp

Залишається два питання. Чому .append($(this)); все ламає і як коректно відмалювати назву посилання, бо так не працює.

 $(this).html().replace(pattern, '<b>'+ $('#search_input').val() +'</b>');

і маю назва з, або мнемонік, або з тегів. А треба якось це комбінувати. html код має мати такий вигляд

&lt;<b>str</b>ike&gt;

25

Re: Веб-Довідник css.in.ua

Я так розумію, ви маєте 2 проблеми.
По-перше, у вас немає чіткого завдання. Доки ви намагаєтеся зробити "якось так", у вас і виходитиме "якось так". Чітко опишіть, що саме має робити код - і писати його стане значно легше.
По-друге, у вас плутаються рядок HTML, відповідний DOM-елемент і jQuery-об'єкт, що огортає цей елемент. Чітко визначить, де що саме має бути, і все буде нормально.

Ну і замість "не працює" пишіть, що конкретно відбувається. Бо якщо взагалі не працює, то це значить, що ви не увімкнули комп'ютер.

Подякували: leofun01, ostap34PHP2

26

Re: Веб-Довідник css.in.ua

Ну що ж, маємо результат. Заціните?

http://replace.org.ua/extensions/om_images/img/59734a7f484d3/J-zrA09jToGrg55OyA0kLg.png

    $('#search_input').on('input', function() {
      var searchString  = $('#search_input').val();                   // Власне, тут буде зберігатися, наш пошуковий запит
      
            $('#search_result').empty();                              // Перед новим пошуком очищуємо результат попереднього

            if ( this.value == '' ) {                                 // Якщо пошуковий запит порожній - показуємо список елементів
                
            } else {
                var searchResult = [];                                // Масив для результату пошуку
                
                $('#list-item').find('a').each(function() {           // Перебираємо кожен елемент списку
                    if ($(this).text().search(searchString) != -1)    // Якщо елемент містить в собі слово запиту
                        searchResult.push($(this));                   // Додаємо знайдені елменти в масив
                });

        if (searchResult.length > 0) {                                // Якщо щось знайдено, формуємо результат
          $(searchResult).each(function() {                           // Перебираємо масив зі знайденими елементами          
            var pattern     = new RegExp(searchString),
                resultUrl   = $(this).attr('href'),
                resultName  = $(this).html().replace(pattern, '<b>'+ searchString +'</b>');

            $('#search_result').append("<a href="+resultUrl+">"+resultName+"</a>");
          });
// ==================================================================================
          $(searchResult).each(function() {                           // Перебираю масив зі знайденими елементами
            var item      = $(this),
                itemName  = item.html().replace(/&gt;|&lt;/g, '');    // Видаляю html мнемоніки кутних дужок

            if (typeof(redirectTimer) != 'undefined' && redirectTimer)// Для першої ітераці і коли таймера немає перевіряємо і занулюємо
              clearTimeout(redirectTimer);
            
            if (searchString === itemName) {                          // Якщо є точне співпадання запусткаємо таймер і перенаправляємо користувача на знайдений елемент
              console.log('Є повне співпадання! '+ searchString +' = '+ itemName);

              redirectTimer = setTimeout(function(){                  // Функція для автоматичного перенаправлення на результат пошуку
                $(location).attr('href', item.attr('href'))
              }, 500);
              return false;
            }// else {console.log('Немає повного співпадання '+ searchString +' !='+ itemName);}
          });
        } else {                                                      // Якщо нічого не вдалося знайти
          $('#search_result').append("Нічого не знайдено!");          // Виводжу повідомлення
          if (typeof(redirectTimer) != 'undefined' && redirectTimer)  // Занулюю таймер
              clearTimeout(redirectTimer);
        }
            }
        });

https://codepen.io/NagarD/pen/NvKwdp

Подякували: Betterthanyou, ostap34PHP, /KIT\, 221VOLT, leofun015

27

Re: Веб-Довідник css.in.ua

Фуххх, закінчив нову реєстрацію.

Тепер вона трішки прошунутіша ніж на https://gamgo.net:

  • В одного користувача може бути декілька соціальних акаунтів, відповідно на кожну соціальну реєстрацію тепер не створюється окремий акаунт;

  • Прибрав купи сценаріїв, тепер все працює через форми;

  • Отримав більші можливості по моніторингу помилок, а значить зможу скоріше знайти неполадку і виправити її;

  • Доопрацював ще декілька внутрішніх деталей. Тепер логіка більш людино подібна;

https://image.prntscr.com/image/lk5d2u3fSiiRu4PD_NmEyA.png

Зараз почну роботу над особистим кабінетом користувачів, де можна буде додавати соціальні акаунти і маніпулювати іншими даними.

А доки, попрошу вас затестити, можливо випливуть якісь недопрацювання, або ж з'являться якісь побажання, наприклад, як правильно привітати нового користувача, який дизайн має бути у поштового листа.

Подякували: ostap34PHP, Monolith, leofun01, 221VOLT4

28

Re: Веб-Довідник css.in.ua

Всім доброго дня, в цю неділю сталася дуже значна для мене і мого проекту подія, я почав використовувати ґіт.
Це дало мені змогу налаштувати авторозгортання. Я раніше нічого цього не використовував, а коли з'явився час і можливість залюбки розібрався з пхінґом, міграціями та ґітом, налаштував вебхуки в бітбакеті. І тепер, коли я пушу зміни до віддаленого репозиторію, мій проект за долю секунди розгортається на моєму сервері. Тепер немає необхідності заходити по FTP, пам'ятати які файли були змінені, відвантажувати їх, через воркбенч створювати  нові поля, таблиці, пам'ятати про різні конфіги і т.п рутинну роботу.

Також мій сервер, теж, трішки змінився. Він одягнув корпус з натурального дерева, кажуть взимку йому буде комфортніше. Тепер у нього твердий диск і новий блок живлення. Виглядає все ось так:
Перше та друге фото - порівняння
Останнє, як мій серверний куточок виглядає зараз.
http://replace.org.ua/extensions/om_images/img/59cb792451ed7/P1050898.jpg
http://replace.org.ua/extensions/om_images/img/59cb792451ed7/P1050897.jpg
http://replace.org.ua/extensions/om_images/img/59cb792451ed7/P1050899.jpg

Також зроблено структуру для керування. Раніше я дивився всі нові повідомлення через воркбенч, зараз це інформативна реалізація в панелі керування.

http://replace.org.ua/extensions/om_images/img/59cb792451ed7/90oytaXtTKC-7YGMPKn_UQ.png

Загалом ця панель дає мені базис, якого раніше не було, або я не бачив як його можна реалізувати. Тепер я це маю.

Також було додано пункт "Додаткові посилання", що має допомогти читачеві з вивченням та теоретично має збільшити конверсію і час перебування на сайті. Поки, цей пункт є тільки у CSS властивостей, але зовсім скоро з'явиться і у селекторі, пізніше і в інший розділах.

Тепер є можливість додавати приклади, що розміщені деяких браузерівських платформах розробки (Типу джсфідл чи кодпен)

Ще було одне значне клієнтське покращення, але воно вилетіло з голови :(


І на останок хочу подякувати користувачу Monolith. Він дуже мені допомагає, без його допомоги мені довелося б розриватися між доповненням існуючої інформації та зміною кишок моєї аплікухи. Одне і інше - дуже важливі речі і я б не потяг би їх одночасно. Завдяки тобі css.in.ua змінюється та йде в перед. Дякую тобі за твою допомогу.

29

Re: Веб-Довідник css.in.ua

NagarD, дякую за теплі слова. А також бажаю успіхів в подальшому розвитку проекту. Разом ми розвиваємо український Інтернет :)

Подякували: NaharD, LoganRoss, 221VOLT, ostap34PHP4

30

Re: Веб-Довідник css.in.ua

ого, класно!

прохання - напишіть статтю про те як ви розбиратись з git-ом ?
я щось все з ним мучаюсь і мучаюсь  %)

Подякували: Monolith1

31

Re: Веб-Довідник css.in.ua

Напишу, саме для цього я зареєстрував домен sys.pp.ua. Якщо css.in.ua для фронтенда, то сис буде для бекенда. І там я напишу про git, phing, composer, docker, котрий я зараз вивчаю.

Але це буде після того як я закінчу з розробкою мінімального функціоналу css.in.ua. А поки зараз веду невеличкий нотатник в гугл документах, з якого перенесу здобуту інформацію на новий сайт.

Подякували: 221VOLT, Monolith2

32

Re: Веб-Довідник css.in.ua

221VOLT написав:

ого, класно!

прохання - напишіть статтю про те як ви розбиратись з git-ом ?
я щось все з ним мучаюсь і мучаюсь  %)

Що більше я читаю мануалів по git, то більше мене долає бажання зануритись у fossil (який мені подобається все більше, хоч його толком і не юзав), darcs, hg, bazaar — що-завгодно, тільки не git.
Тим часом, продовжую користуватись svn для власних індивідуальних потреб (хоча й, здається, дозрів до розуміння, що в ньому мені не вистачає можливостей розподілених систем).

Поставив серед іншого bazaar. Зі старту вибісило, що в командному рядку вискакує російська мова — потратив пару днів, зробив українську локалізацію повідомлень (див. вкладення — може, комусь знадобиться). Проблема в тому, що російська локалізація, яку я нашвидкоруч переклав на українську, неповна (схоже, лишилась від старішої версії), тому частина повідомлень усе одно англійські. А ще в них є GUI-інструмент Bazaar Explorer — там узагалі якийсь трешак з локалізацією — українська, англійська, російська — все вперемішку. Схоже, я його скоро теж зненавиджу :(

Post's attachments

29.09.2017_23_11_43.png 36.31 kb, 210 downloads since 2017-09-29 

bazaar_uk.zip 79.46 kb, 456 downloads since 2017-09-29 

Подякували: 221VOLT, leofun012

33

Re: Веб-Довідник css.in.ua

Доброго вечору, панове.

Зайшов до стати вебмайстра і помітив одну неймовірно цікаву річ.

http://replace.org.ua/extensions/om_images/img/59d284876fe8d/c0lGXHkZQAyz6Dgg8JbIgg.png

Бачу шалену перспективу. Проблема в оптимізації.

Може хто знається трохи на цьому та підкаже, що у мене не правильно зроблено, а що треба зробити.
Саме зараз йде активне доповнення css властивостей, було би класно робити відразу правильно.

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

Тому зараз хочу сформувати інструкцію по додаванню нового матеріалу.

Подякували: ostap34PHP, 0xDADA11C7, Monolith3

34

Re: Веб-Довідник css.in.ua

Мої вітання. Сьогодні напишу два слова про важливість та необхідність логування помилок.

Я вище писав, що додав можливість відслідковувати помилки.

На практиці воно виглядає ось так.

http://replace.org.ua/extensions/om_images/img/59f06a4bdb379/7Scdzp_xRfSHc46zRfVTUQ.png

І я відразу бачу, що щось трапилося. Давайте подивимося, що саме спровокувало цю помилку.

http://replace.org.ua/extensions/om_images/img/59f06a4bdb379/CelCqY_lTJagJvx9yk1wOw.png

Бачимо, що людина зайшла на сторінку https://css.in.ua/html/tag/input/ на якій було викинуто виключення.
А це все через те,що вона додала в кінець шлеш. Дуже класно що додавши в конфін рядок. Все стало на свої місця. Подякую за це розробникам Yii2.

'normalizer' => ['class' => 'yii\web\UrlNormalizer'],


Була ще одна помилка.

http://replace.org.ua/extensions/om_images/img/59f06a4bdb379/n8Ad4cCBSsi8iifRaxt0pg.png

Вона вискакувала не один раз. І я я був впевнений, що у мене такої сторінки немає, тому що її пошуки нічого не дали, гадав на якомусь сайті є посилання на цю сторінку, чи мо в індексі гугла щось бите лежить І на десятий раз, до мене дійшло, що я не бачу це посилання, тому, що я вже зареєстрований, а воно показується, тільки новачкам у формі додавання коментаря. Тоді швиденько я виправив теє посилання і як бонус додав кнопки для соціальної реєстрації.

http://replace.org.ua/extensions/om_images/img/59f06a4bdb379/RO0hHdewR7yikhnEmQh6fA.png

Винагорода не змусила себе довго чекати.

Отже, не полініться, виділіть час та зробіть якусь систему перегляду помилок. Бо я хоч і маю форму для повідомлень про помилки, але нею користується максимум 10% користувачі, що зустріли помилку, тому не варто на такі форми розраховувати.

Прихований текст

Хочу додати, що по полі message зберігається не тільки повідомлення, а вся траса помилки, я бачу в якому файлі та який рядок викликав збій. Повирізав це щоб картинки менше займали.

Подякували: Monolith, 221VOLT, Q-bart, leofun01, ostap34PHP5

35

Re: Веб-Довідник css.in.ua

На цих вихідних плідно попрацював і щойно відправив на сервер нові зміни. Що саме було зроблено?

1. Модуль новин. Кожен користувач може запропонувати новину, котра з'явиться на сайті.
http://replace.org.ua/extensions/om_images/img/5a1adb7c8ca73/7fcQur_cRa6VgvAmmdkuVQ.png

Новини, також, можуть додавати не зареєстровані користувачі.

2. Відтепер статті можуть писати не тільки модератори, а й звичайні користувачі. Цікаво чи пам'ятає про свою обіцянку одна людина?)

управлінська частина

Для себе зробив ось таку панельку
http://replace.org.ua/extensions/om_images/img/5a1adb7c8ca73/YbmbaBTnT-usI2dxHteXsg.png

3. З'явилася сторінка допомоги.
http://replace.org.ua/extensions/om_images/img/5a1adb7c8ca73/-28QPVo8QnKjo1js-15RKw.png

Що думаєте?)

Виділення теми

До кого звернутись, щоб зафіксували мою тему? Чи хто може це зробити? І що мені при цьому потрібно зробити зі свого боку. Тема chandler.org.ua від miroslav.chandler вже не актуальна, сайт вже не працює давно, хочеться замістити його.

Подякували: /KIT\, Monolith, Q-bart, leofun01, 221VOLT, ostap34PHP6

36

Re: Веб-Довідник css.in.ua

Прихований текст

До кого звернутись, щоб зафіксували мою тему? Чи хто може це зробити? І що мені при цьому потрібно зробити зі свого боку. Тема chandler.org.ua від miroslav.chandler вже не актуальна, сайт вже не працює давно, хочеться замістити його.

0xdada..

Подякували: NaharD1

37

Re: Веб-Довідник css.in.ua

захвіксував

Подякували: NaharD, Monolith, /KIT\, Q-bart, FakiNyan, 221VOLT6

38 Востаннє редагувалося /KIT\ (08.07.2021 12:52:44)

Re: Веб-Довідник css.in.ua

`

39

Re: Веб-Довідник css.in.ua

/KIT\ написав:

логін: NagarD
роль: Аміністратор?

роль: Гарно обсмажений цюріпоп

40 Востаннє редагувалося NaharD (26.11.2017 21:00:01)

Re: Веб-Довідник css.in.ua

Прикольно правда?)

як так зробити

Щоб собі так зробити, то тре попросити адмінів.

Подякували: 221VOLT, ostap34PHP2