Re: Веб-Довідник css.in.ua
Я би добавив систему авторизації через соц.мережі або віджет для коментування. Ліньки реєструватись)
Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → Оцінка сайтів → Веб-Довідник css.in.ua
Сторінки Попередня 1 2 3 4 5 Наступна
Для відправлення відповіді ви повинні увійти або зареєструватися
Я би добавив систему авторизації через соц.мережі або віджет для коментування. Ліньки реєструватись)
Привіт, вчора пофіксив ліве меню, тепер воно завжди повністю відображається, (при прокручуванні, при зміні розмірів вікна, при завантаженні)
А сьогодні додам простенький пошук, і все було ок, доки не вирішив підсвічувати співпадання. Подивіться будь ласка, що я роблю не так.
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)); При першому символі все ок, а при другому пустота. Якщо поле очистити і почати пошук вже з іншої літери, то знову при першому - ок, другому - немає ніякого результату пошуку. І так по колу
Всласне, як працює цей пошук, можете наочно переглянути на кодпені.
У мене searchString видно, ЩЯРНТ? https://jsfiddle.net/joxy6xbt/
А я зрозумів. Просто ми ініціалізуємо її у глобальній зоні, а в обробнику події просто витягуємо її (А вона пуста).
Треба ініціалізувати її в самому обробнику, щоб при кожному його виклику, туди потрапляв актуальний пошуковий запит. Це логічно))
$('#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 код має мати такий вигляд
<<b>str</b>ike>
Я так розумію, ви маєте 2 проблеми.
По-перше, у вас немає чіткого завдання. Доки ви намагаєтеся зробити "якось так", у вас і виходитиме "якось так". Чітко опишіть, що саме має робити код - і писати його стане значно легше.
По-друге, у вас плутаються рядок HTML, відповідний DOM-елемент і jQuery-об'єкт, що огортає цей елемент. Чітко визначить, де що саме має бути, і все буде нормально.
Ну і замість "не працює" пишіть, що конкретно відбувається. Бо якщо взагалі не працює, то це значить, що ви не увімкнули комп'ютер.
Ну що ж, маємо результат. Заціните?
$('#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(/>|</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
Фуххх, закінчив нову реєстрацію.
Тепер вона трішки прошунутіша ніж на https://gamgo.net:
В одного користувача може бути декілька соціальних акаунтів, відповідно на кожну соціальну реєстрацію тепер не створюється окремий акаунт;
Прибрав купи сценаріїв, тепер все працює через форми;
Отримав більші можливості по моніторингу помилок, а значить зможу скоріше знайти неполадку і виправити її;
Доопрацював ще декілька внутрішніх деталей. Тепер логіка більш людино подібна;
Зараз почну роботу над особистим кабінетом користувачів, де можна буде додавати соціальні акаунти і маніпулювати іншими даними.
А доки, попрошу вас затестити, можливо випливуть якісь недопрацювання, або ж з'являться якісь побажання, наприклад, як правильно привітати нового користувача, який дизайн має бути у поштового листа.
Всім доброго дня, в цю неділю сталася дуже значна для мене і мого проекту подія, я почав використовувати ґіт.
Це дало мені змогу налаштувати авторозгортання. Я раніше нічого цього не використовував, а коли з'явився час і можливість залюбки розібрався з пхінґом, міграціями та ґітом, налаштував вебхуки в бітбакеті. І тепер, коли я пушу зміни до віддаленого репозиторію, мій проект за долю секунди розгортається на моєму сервері. Тепер немає необхідності заходити по FTP, пам'ятати які файли були змінені, відвантажувати їх, через воркбенч створювати нові поля, таблиці, пам'ятати про різні конфіги і т.п рутинну роботу.
Також мій сервер, теж, трішки змінився. Він одягнув корпус з натурального дерева, кажуть взимку йому буде комфортніше. Тепер у нього твердий диск і новий блок живлення. Виглядає все ось так:
Перше та друге фото - порівняння
Останнє, як мій серверний куточок виглядає зараз.
Також зроблено структуру для керування. Раніше я дивився всі нові повідомлення через воркбенч, зараз це інформативна реалізація в панелі керування.
Загалом ця панель дає мені базис, якого раніше не було, або я не бачив як його можна реалізувати. Тепер я це маю.
Також було додано пункт "Додаткові посилання", що має допомогти читачеві з вивченням та теоретично має збільшити конверсію і час перебування на сайті. Поки, цей пункт є тільки у CSS властивостей, але зовсім скоро з'явиться і у селекторі, пізніше і в інший розділах.
Тепер є можливість додавати приклади, що розміщені деяких браузерівських платформах розробки (Типу джсфідл чи кодпен)
Ще було одне значне клієнтське покращення, але воно вилетіло з голови
І на останок хочу подякувати користувачу Monolith. Він дуже мені допомагає, без його допомоги мені довелося б розриватися між доповненням існуючої інформації та зміною кишок моєї аплікухи. Одне і інше - дуже важливі речі і я б не потяг би їх одночасно. Завдяки тобі css.in.ua змінюється та йде в перед. Дякую тобі за твою допомогу.
NagarD, дякую за теплі слова. А також бажаю успіхів в подальшому розвитку проекту. Разом ми розвиваємо український Інтернет
ого, класно!
прохання - напишіть статтю про те як ви розбиратись з git-ом ?
я щось все з ним мучаюсь і мучаюсь
Напишу, саме для цього я зареєстрував домен sys.pp.ua. Якщо css.in.ua для фронтенда, то сис буде для бекенда. І там я напишу про git, phing, composer, docker, котрий я зараз вивчаю.
Але це буде після того як я закінчу з розробкою мінімального функціоналу css.in.ua. А поки зараз веду невеличкий нотатник в гугл документах, з якого перенесу здобуту інформацію на новий сайт.
ого, класно!
прохання - напишіть статтю про те як ви розбиратись з git-ом ?
я щось все з ним мучаюсь і мучаюсь
Що більше я читаю мануалів по git, то більше мене долає бажання зануритись у fossil (який мені подобається все більше, хоч його толком і не юзав), darcs, hg, bazaar — що-завгодно, тільки не git.
Тим часом, продовжую користуватись svn для власних індивідуальних потреб (хоча й, здається, дозрів до розуміння, що в ньому мені не вистачає можливостей розподілених систем).
Поставив серед іншого bazaar. Зі старту вибісило, що в командному рядку вискакує російська мова — потратив пару днів, зробив українську локалізацію повідомлень (див. вкладення — може, комусь знадобиться). Проблема в тому, що російська локалізація, яку я нашвидкоруч переклав на українську, неповна (схоже, лишилась від старішої версії), тому частина повідомлень усе одно англійські. А ще в них є GUI-інструмент Bazaar Explorer — там узагалі якийсь трешак з локалізацією — українська, англійська, російська — все вперемішку. Схоже, я його скоро теж зненавиджу
Доброго вечору, панове.
Зайшов до стати вебмайстра і помітив одну неймовірно цікаву річ.
Бачу шалену перспективу. Проблема в оптимізації.
Може хто знається трохи на цьому та підкаже, що у мене не правильно зроблено, а що треба зробити.
Саме зараз йде активне доповнення css властивостей, було би класно робити відразу правильно.
Мені вже підказали, що в мене довідник, а не блог. Треба головну сторінку зробити точкою входу, де будуть посилання на довідники та трішки тексту з описом.
Тому зараз хочу сформувати інструкцію по додаванню нового матеріалу.
Мої вітання. Сьогодні напишу два слова про важливість та необхідність логування помилок.
Я вище писав, що додав можливість відслідковувати помилки.
На практиці воно виглядає ось так.
І я відразу бачу, що щось трапилося. Давайте подивимося, що саме спровокувало цю помилку.
Бачимо, що людина зайшла на сторінку https://css.in.ua/html/tag/input/ на якій було викинуто виключення.
А це все через те,що вона додала в кінець шлеш. Дуже класно що додавши в конфін рядок. Все стало на свої місця. Подякую за це розробникам Yii2.
'normalizer' => ['class' => 'yii\web\UrlNormalizer'],
Була ще одна помилка.
Вона вискакувала не один раз. І я я був впевнений, що у мене такої сторінки немає, тому що її пошуки нічого не дали, гадав на якомусь сайті є посилання на цю сторінку, чи мо в індексі гугла щось бите лежить І на десятий раз, до мене дійшло, що я не бачу це посилання, тому, що я вже зареєстрований, а воно показується, тільки новачкам у формі додавання коментаря. Тоді швиденько я виправив теє посилання і як бонус додав кнопки для соціальної реєстрації.
Винагорода не змусила себе довго чекати.
Отже, не полініться, виділіть час та зробіть якусь систему перегляду помилок. Бо я хоч і маю форму для повідомлень про помилки, але нею користується максимум 10% користувачі, що зустріли помилку, тому не варто на такі форми розраховувати.
На цих вихідних плідно попрацював і щойно відправив на сервер нові зміни. Що саме було зроблено?
1. Модуль новин. Кожен користувач може запропонувати новину, котра з'явиться на сайті.
Новини, також, можуть додавати не зареєстровані користувачі.
2. Відтепер статті можуть писати не тільки модератори, а й звичайні користувачі. Цікаво чи пам'ятає про свою обіцянку одна людина?)
3. З'явилася сторінка допомоги.
Що думаєте?)
`
логін: NagarD
роль: Аміністратор?
роль: Гарно обсмажений цюріпоп