Nacisk na formatowanie kodu

Dla zwykłych użytkowników taki szereg przycisków mało mówi... Im dalej w prawo, tym mniej zrozumiałe :D

To też niewiele mówi...

Diabeł Tasmański też odzywa się dopiero po fakcie:

Poza tym nie instruuje użytkownika, jak ma naprawić problem...
Nie pisze dokładnie jak dodać te znaczniki, gdzie się tego nauczyć itp.

Moim zdaniem:

1. Diabeł Tasmański powinien iść do zaorania. A nawet jeśli nie, to powinien napisać listę kroków, co użytkownik powinien zrobić. Edytuj post -> zaznacz kod -> kliknij przycisk formatowania kodu -> wybierz język. Albo nie graficznie. Edytuj post -> kliknij link Instrukcja obsługi Markdown -> Zapoznaj się z sekcją Kod źródłowy -> wykorzystaj tą wiedzę do formatowania kodu w swoim poscie.
2. Przycisk formatowania kodu powinien zostać jakoś wyróżniony. Jako, że moim zdaniem to najczęściej używana opcja formatowania tekstu na tym forum.
3. Post użytkownika powinien być skanowany w momencie kliknięcia przycisku "Zapisz". Jeśli jego post zawiera kod bez formatowania, wysyłanie posta powinno nie dojść do skutku. Użytkownik powinien dostać wyczerpującą informację, co ma zrobić, i jak ma to zrobić. No i w okienku z informacją trzeba zagrozić, że brak formatowania kodu jest niezgodny z regulaminem. Jeśli użytkownik jest pewien, że jego post nie zawiera kodu, to w okienku z ostrzeżeniem powinien móc potwierdzić, że system się pomylił i publikuje posta bez kodu, albo wrócić do edycji posta.
4. Użytkownik powinien być zachęcany do użycia opcji "Podgląd" przed wysłaniem posta. Jak zobaczy, że jego post z niesformatowanym kodem będzie wyglądał beznadziejnie, to może bardziej do niego przemówi komunikat o formatowaniu kodu.

A nawet jeśli nie, to powinien napisać listę kroków, co użytkownik powinien zrobić. Edytuj post -> zaznacz kod -> kliknij przycisk formatowania kodu -> wybierz język. Albo nie graficznie. Edytuj post -> kliknij link Instrukcja obsługi Markdown -> Zapoznaj się z sekcją Kod źródłowy -> wykorzystaj tą wiedzę do formatowania kodu w swoim poscie.

Może problem jest z GUI?

Wrzucanie kodu jest łatwe jeśli się ręcznie edytuje Markdown np. żeby dodać kod JavaScript:

```javascript
TUTAJ WPISUJ KOD
```

to o wiele prostsze podejście niż Edytuj post -> zaznacz kod -> kliknij przycisk formatowania kodu -> wybierz język.

@LukeJL: Oczywiście. Kwestia ostatecznej treści instrukcji jest otwarta. Ale potrzeba nauczenia użytkownika pozostaje.

Ja również nie używam przycisków, a wpisuje z palca. Ale nie tylko tutaj lecz na Slacku, github itp. Po prostu tak jest szybciej. Ale faktycznie może warto by było zmienić ikonkę i przesunąć bardziej na lewo? Twoje pozostałe propozycje mają sens, ale najszybciej póki co będzie na sam początek zmienić ikonkę.

Ikonka większa i na środek.

Spine napisał(a):

Dla zwykłych użytkowników taki szereg przycisków mało mówi... Im dalej w prawo, tym mniej zrozumiałe :D

Ale te ikonki mają hinty, które w sposób zrozumiały opisują przeznaczenie tych przycisków. Poza tym, te ikonki są zgodne z ikonkami w toolbarach najróżniejszych programów, więc jeśli ktoś nie ogarnia ich przeznaczenia, to musi być totalnym nieogarem. ;)

@furious programming: Ja nie wiem w jaki sposób młodzi ludzie teraz obsługują komputery.
Ale nie robiłbym sobie zbytniej nadziei, że każdy ogarnia najechanie myszką na ikonkę, żeby zobaczyć hinta...

@Adam Boduch, @twoj_stary_pijany:
Coś w tym stylu?

Nawet jeśli nie na tym pasku, to nad tym paskiem mógłby być na stałe pokazany dymek ze strzałką prowadzącą do ikonki.
Tak żeby było wyraźnie.
Tekst mógłby być linkiem z instrukcją.

Może byłoby lepiej, gdyby nowi użytkownicy mieliby od razu rozwiniętą zakładkę z "obsługą markdownu" tak żeby widzieli wszystkie podpowiedzi.

@Xarviel: I tak i nie...
Jeśli domyślnie użytkownik widzi za dużo, to się przestraszy i zniechęci, bo nie będzie wiedział co zrobić.
Może nawet nie doscrollować do przycisku "Zapisz".

Spine napisał(a):

@furious programming: Ja nie wiem w jaki sposób młodzi ludzie teraz obsługują komputery.
Ale nie robiłbym sobie zbytniej nadziei, że każdy ogarnia najechanie myszką na ikonkę, żeby zobaczyć hinta...

Chodziło mi o to, że z punktu widzenia dobrych praktyk tworzenia UI, tutaj wszystko jest zrobione dobrze:

• przyciski są w sensownej kolejności,
• ikonki są wyraźne i jednoznaczne (typowy toolbar do formatowania tekstu),
• są hinty z opisami,
• aktywny przycisk posiada kursor-łapkę,
• nieaktywne przyciski są wyszarzone.

Nie ma tutaj już nic do zrobienia.

Xarviel napisał(a):

Może byłoby lepiej, gdyby nowi użytkownicy mieliby od razu rozwiniętą zakładkę z "obsługą markdownu" tak żeby widzieli wszystkie podpowiedzi.

Problem jest taki, że ta instrukcja jest długa — u mnie na dwa ekrany wysokości, a nie chcę nawet myśleć jak to wygląda na smartfonie (nie używam do internetów). Rozwinięcie instrukcji przesuwa przycisk Zapisz, a lepiej żeby ktoś źle sformatował kod, niż aby nie mógł znaleźć przycisku do wysłania posta — w końcu nie każdy używa klawiatury i nie każdy wie, że jest do tego skrót Ctrl+Enter.

Kiedyś rzuciłem pomysł na domyślą zawartość pytania pokazująca jak powinien wyglądać post.
https://4programmers.net/Forum/Coyote/259117-wartosc_poczatkowa_dla_nowego_watku?p=1182529#id1182529
IMO to byłoby najbardziej zrozumiałe wprowadzenie do Markdown dla początkującego użytkownika.

W sumie nie musi to być treść — może to być placeholder, dzięki czemu nie trzeba będzie kasować tekstu, aby coś napisać. W każdym razie, coś takiego byłoby przydatną podpowiedzią. W końcu pewnie mało kto zagląda do instrukcji obsługi Markdowna (jest jakaś telemetria dotycząca tej instrukcji?).

Ja podam taki przykład...

Jeśli Thunderbird wykryje, że zamierzałeś załączyć plik, to pokazuje Ci się wyróżniona podpowiedź pod polem tekstowym treści wiadomości:

Ta podpowiedź dostarcza nawet przycisk dodania załącznika.

Jeśli nie zauważysz tej informacji i mimo wszystko klikniesz Wyślij bez załączonego pliku, to dostaniesz kolejną informację, która powstrzymuje wysłanie wiadomości:

Analogicznie można taki mechanizm zrobić na 4programmers.

Jeśli serwis wykryje, w treści wiadomości coś co przypomina kod źródłowy, który nie jest objęty znacznikami, to nawet jeszcze przed wysłaniem posta, użytkownik mógłby być gdzieś delikatnie poinformowany i poproszony o sformatowanie kodu.
Jeśli użytkownik zignoruje tą informację, to dostanie pop-upa w momencie kliknięcia przycisku Zapisz.

Pop-up może np. pokazać ikonkę formatowania kodu z dopiskiem: użyj tego.

@Spine: to jest dobry pomysł ale na szybko można zrobić to co @furious programming napisał. Jakieś propozycje co do treści placeholdera?

Może dodać coś w stylu:

Kod źródłowy możesz formatować korzystając ze składni Markdown. Przykładowo:

```java
foo();
```

Może coś takiego?

Adam Boduch napisał(a):

@Spine: to jest dobry pomysł ale na szybko można zrobić to co @furious programming napisał. Jakieś propozycje co do treści placeholdera?

Najlepiej jakby było konfigurowalne przez moderatorów - osobno dla każdego działu.

Spine napisał(a):

2. Przycisk formatowania kodu powinien zostać jakoś wyróżniony. Jako, że moim zdaniem to najczęściej używana opcja formatowania tekstu na tym forum.

Ale wiesz że możesz zaznaczyć dowolny tekst, i użyć skrótu Ctrl+Alt+C, żeby obtoczyć zaznaczenie odpowiednimi znacznikami formatowania fragmentu kodu?

Spine napisał(a):

Może coś takiego?

Na telefonie będzie okropnie wyglądało.

Spine napisał(a):

3. Post użytkownika powinien być skanowany w momencie kliknięcia przycisku "Zapisz". Jeśli jego post zawiera kod bez formatowania, wysyłanie posta powinno nie dojść do skutku. Użytkownik powinien dostać wyczerpującą informację, co ma zrobić, i jak ma to zrobić. No i w okienku z informacją trzeba zagrozić, że brak formatowania kodu jest niezgodny z regulaminem. Jeśli użytkownik jest pewien, że jego post nie zawiera kodu, to w okienku z ostrzeżeniem powinien móc potwierdzić, że system się pomylił i publikuje posta bez kodu, albo wrócić do edycji posta.

Jestem na silne nie. Bądź co bądź, to jest automat który może się pomylić. To że diabeł znajdzie coś co mu wygląda na niesformatowany kod, nie znaczy że to faktycznie jest niesformatowany kod, i blokowanie dodawania postów nic nie da.

To co osiągniesz, to to że ktoś jeszcze bardziej zepsuje treść żeby ominąć walidację.

Riddle napisał(a):

To co osiągniesz, to to że ktoś jeszcze bardziej zepsuje treść żeby ominąć walidację.

Przeczytaj do końca tekst, który zacytowałeś...

Napisałem, że w przypadku gdy system się pomyli, można i tak wysłać posta.

Tak jak w moim przykładzie o Thunderbirdzie.

Spine napisał(a):

Riddle napisał(a):

To co osiągniesz, to to że ktoś jeszcze bardziej zepsuje treść żeby ominąć walidację.

Przeczytaj do końca tekst, który zacytowałeś...

Napisałem, że w przypadku gdy system się pomyli, można i tak wysłać posta.

Tak jak w moim przykładzie o Thunderbirdzie.

Oświadczam: Rozwiązanie które zaproponowałeś, moim zdaniem poskutkuje tym, że ludzie będą pisać okropne treści celem ominięcia walidacji (nawet jeśli tylko klik ich dzieli żeby dodać post).

@Riddle: Nie wiem na jakiej podstawie tak sądzisz... Jeśli pop-up będzie zawierał krótki, zrozumiały komunikat, to raczej każdy go przeczyta i się do niego zastosuje.

Jeśli post nie będzie zawierał kodu, to użytkownik po prostu potwierdzi to odpowiednim przyciskiem: "post nie zawiera kodu, który trzeba sformatować, wysyłaj".

Spine napisał(a):

@Riddle: Nie wiem na jakiej podstawie tak sądzisz... Jeśli pop-up będzie zawierał krótki, zrozumiały komunikat, to raczej każdy go przeczyta i się do niego zastosuje.

Tak, w idealnym świecie by tak było, że użytkownicy zawsze są racjonalnie.

Riddle napisał(a):

Spine napisał(a):

2. Przycisk formatowania kodu powinien zostać jakoś wyróżniony. Jako, że moim zdaniem to najczęściej używana opcja formatowania tekstu na tym forum.

Ale wiesz że możesz zaznaczyć dowolny tekst, i użyć skrótu Alt+C, żeby obtoczyć zaznaczenie znacznikami ```?

No i co w związku z tym? To tylko kolejny sposób, który można sprzedać użytkownikowi...

Ale czy jest on jakoś powszechny i intuicyjny?
Wymaganie od użytkownika znajomości takich skrótów, wymaga nauczenia. To tak jak wyjście z vi :P

Jakiś czas temu to już wspominałem – jestem w stanie wyodrębnić logikę @Tasmanian Devil do postaci mikroserwisu – w moim wyobrażeniu działałoby to tak, że po napisaniu posta albo przed wysłaniem serwis wysłałby treść posta do mikroserwisu, dostał klasyfikację i w zależności od jej wyniku przepuścił albo pokazał komunikat.

Mam to w głowie już od dłuższego czasu, tylko trochę brakuje mocy przerobowych – o ile samo zamknięcie tego do zewnętrznej usługi to kwestia dość szybka, o tyle integracja z Coyote już pewnie mniej.

@Ktos: integracja zajmiemy sie my :)

Wyciągnąłem całą tę wewnętrzną logikę, której używa Tasmanian do bardzo minimalnego WebAPI.

https://github.com/ktos/eleia-webservice

W założeniu ma odbierać POST zawierający ciało posta przed jego formatowaniem, po prostu jako strumień tekstu, natomiast odpowiada obiektem, który mówi, czy klasyfikacja jest pozytywna, z jaką pewnością i jaka linia tekstu spowodowała trigger na "tak".

Oczywiście opakowane w obraz Dockera, 223 MB (być może na Alpine byłby mniejszy, ale na razie nie kombinowałem).

I teraz pytanie jest, w jaki sposób chcemy to zintegrować – już oprócz tego, że to ma się odpalać gdzieś w edytorze postów, pewnie przed wysłaniem, to pytanie, czy w ogóle wrzucamy to jako składową głównego kodu Coyote i w docker-compose robimy, aby budowany był obraz, czy też powinno być całkowicie oddzielnie i niech się dociąga?

@Adam Boduch, jak ci bardziej by pasowało?

Najlepiej w docker-compose jako osobny obraz. W kodzie już się zintegrujemy z tym mikroserwisem :)