Nowa wersja edytora postów i microblogów na 4programmers.net

1

@Adam Boduch: Widziałeś autocomplete w edytorze? https://danon.github.io/4programmers/ Zobacz czy może tak działać. Okazało się że jest dodatek @codemirror/autocomplete, dość łatyw do użycia.

Jak się okaże że nie, to podepniemy aktualny z 4programmers.net.

3
  1. screenshot-20211012151736.png - nie używamy tu emotek typu :coś: więc wywaliłbym kolorowanie tego
  2. cztery apostrofy (backtick) odpalają nowy rodzaj kodu, który ciągnie się do końca posta? Tak to wygląda po 10 sekundach testów
  3. autouzupełnienie działa dziwnie:
    a) @s
    screenshot-20211012152057.png
    b) @so
    screenshot-20211012152117.png
    c) @som - nagle pojawiają się nowe, których wcześniej nie było
    screenshot-20211012152555.png
    d) @sol - mimo, że dla @so widać no_solution_found z podkreślonym so, dodanie kolejnej pasującej litery czyści listę podpowiadania
    screenshot-20211012152208.png
2

@TomRiddle: tak jak mówiłem - lepiej nie dublować kodu/funkcjonalności. Bo zapewne ten plugin nie będzie już działał w pozostałych miejscach serwisu (komentarze do mikroblogów, pm itd).

0
Adam Boduch napisał(a):

@TomRiddle: tak jak mówiłem - lepiej nie dublować kodu/funkcjonalności. Bo zapewne ten plugin nie będzie już działał w pozostałych miejscach serwisu (komentarze do mikroblogów, pm itd).

No ale wiesz, nie trzeba dublować. Możemy wybrać jeden usunąć drugi.

Ten plugin ma taką zaletę że pokazuje okienko zaraz pod cursorem, a nie na dole, a nadal można go ostylowac i zmienić markup tak żeby pasował do 4p.

0

Pamiętaj też żeby działało pochylenie przez _tekst_, nie tylko przez *tekst*.

1

Zachowanie oczekiwane

Po naciśnięciu skrótu CTRL+Z, w przypadku braku zmian do cofnięcia edytor nie robi nic.

Zachowanie aktualne

Po naciśnięciu skrótu CTRL+Z, w przypadku braku zmian do cofnięcia edytor usuwa tekst.

Kroki do zreprodukowania

  1. Otworzyć stronę https://danon.github.io/4programmers/.
  2. Ustawić kursor na pozycji "cursor":0, czyli tuż przed ciągiem znaków > TomRiddle.
  3. Wpisać aa.
  4. Nacisnąć dwa razy CTRL+Z.
  5. Efekt: ciąg znaków > TomRiddle wygląda teraz > omRiddle.

Środowisko

  • Przeglądarka: Chromium 90.0.4430.212 (Developer Build)

UPDATE Poprawiłem sekcje "Zachowanie oczekiwane" i "Zachowanie aktualne" – zamieniłem miejscami wyrażenia "cofa" i "nie cofa". :)


PS Po wpisaniu jednego znaku, a nie dwóch, czyli a zamiast aa, i naciśnięciu skrótu, edytor wydaje się działać poprawnie.


UPDATE 2 Usunąłem wyrażenie "cofa" z sekcji "Zachowanie oczekiwane" i "Zachowanie aktualne". Ja rozumiałem je przenośnie, w sensie: "oczekuję, że ten skrót będzie powodował zawsze tylko 'cofnięcie' – a okazuje się, że robi coś dodatkowo". Uznałem, że takie przenośne wykorzystanie zwrotu "cofa" utrudnia zrozumienie, o co chodzi.


UPDATE 3

Zachowanie jest reprodukowalne w następujących przypadkach:

  • otwierając przeglądarkę za pomocą polecenia w terminalu: chromium --temp-profile i od razu przechodząc do strony;
  • otwierając przeglądarkę za pomocą polecenia w terminalu: chromium --temp-profile, następnie otwierając nowe okno w trybie "incognito" i dopiero w nim przechodząc do strony.
0
Manna5 napisał(a):

Pamiętaj też żeby działało pochylenie przez _tekst_, nie tylko przez *tekst*.

No przecież działa?

1
Adam Boduch napisał(a):

@TomRiddle: tak jak mówiłem - lepiej nie dublować kodu/funkcjonalności. Bo zapewne ten plugin nie będzie już działał w pozostałych miejscach serwisu (komentarze do mikroblogów, pm itd).

TomRiddle napisał(a):

No ale wiesz, nie trzeba dublować. Możemy wybrać jeden usunąć drugi.

Ten plugin ma taką zaletę że pokazuje okienko zaraz pod cursorem, a nie na dole, a nadal można go ostylowac i zmienić markup tak żeby pasował do 4p.

A obecny ma tę zaletę, że działa prawidłowo i wszędzie, a nie w każdym miejscu będzie ten edytor (np. w komentarzach). Nie mnóżmy bytów.

1

Wiem że spędziłeś nad tym kilkadziesiąt godzin ale moim skromnym zdaniem to wystarczyło dać podgląd na żywo pod treścią posta (jak na stackoverflow). Teraz jest duże ryzyko że WYSINWYG

1
obscurity napisał(a):

Wiem że spędziłeś nad tym kilkadziesiąt godzin ale moim skromnym zdaniem to wystarczyło dać podgląd na żywo pod treścią posta (jak na stackoverflow).

A w jaki sposób to rozwiązałoby problem że część ludzi chce w edytorze czcionkę monospace, a część nie?

Teraz jest duże ryzyko że WYSINWYG

A czemu niby? Nie usuwam żadnych znaków z edytora (nie jest tak, że jak ktoś wpisze **foo**, to znaki się zamieniają na foo), tylko widać zarówno styl jak i symbole. Poza tym w środku siedzi maszyna stanowa która przy zmianie kalkuluje style na nowo (więc np. jak wytniesz i wkleisz całość to dostaniesz dokładnie ten sam efekt).

Także moim skromnym zdaniem ryzyko na wysinwyg jest raczej niskie.

Marooned napisał(a):
TomRiddle napisał(a):
Adam Boduch napisał(a):

@TomRiddle: tak jak mówiłem - lepiej nie dublować kodu/funkcjonalności. Bo zapewne ten plugin nie będzie już działał w pozostałych miejscach serwisu (komentarze do mikroblogów, pm itd).

No ale wiesz, nie trzeba dublować. Możemy wybrać jeden usunąć drugi.

Ten plugin ma taką zaletę że pokazuje okienko zaraz pod cursorem, a nie na dole, a nadal można go ostylowac i zmienić markup tak żeby pasował do 4p.

A obecny ma tę zaletę, że działa prawidłowo i wszędzie, a nie w każdym miejscu będzie ten edytor (np. w komentarzach). Nie mnóżmy bytów.

No tak.

Mam wrażenie że trochę tutaj urosły emocje, i zaczynamy zaciekle bronić swoich zdań.

Pamiętajmy że jesteśmy po tej samej stronie i wszyscy chcemy wytworzyć jak najlepsze rozwiązanie dla wszystkich. Na razie przecież tylko rozmawiamy o różnych rozwiązaniach i ich wadach i zaletach. Chyba lepiej poruszyć taki temat, kiedy edytor jeszcze jest poprawiany i nie wszedł na produkcję, prawda?

0
TomRiddle napisał(a):

A w jaki sposób to rozwiązałoby problem że część ludzi chce czcionkę monospace (@TomRiddle) a część nie (@furious programming) w edytorze?

nikt nie chce mieć czcionki monospace w edytorze tylko podgląd ze stałą szerokością czcionki żeby móc zrobić tabelkę czy napisać kod. Obecnie trzeba się przeklikiwać na zmianę pomiędzy "Treść" a "Podgląd". Gdyby podgląd był pod postem to można przeboleć czcionkę o stałej szerokości bo od razu widać jak post będzie wyglądał w rzeczywistości - pisząc można więc patrzeć w jedno albo drugie miejsce i mamy obie czcionki na raz (jak na stackoverflow).

TomRiddle napisał(a):

A czemu niby? Nie usuwam żadnych znaków z edytora (nie jest tak, że jak ktoś wpisze *foo*, to znaki się zamieniają na foo), w środku siedzi maszyna stanowa która przy zmianie kalkuluje style na nowo (więc np. jak wytniesz i wkleisz całość to dostaniesz dokładnie ten sam efekt).

bo zaczynasz używać innych kontrolek, choćby innej biblioteki do kolorowania składni z obsługą innych języków. szansa że post w rzeczywistości będzie pokolorowany w całkiem inny sposób przechodząc przez całkiem inny kod jest spora

Dodatkowo jeśli będzie się chciało wprowadzić nową składnię to będzie trzeba robić to w dwóch miejscach, więc nowa kontrolka hamuje rozwój. Najprostsze rozwiązania są najlepsze.

3
obscurity napisał(a):
TomRiddle napisał(a):

A w jaki sposób to rozwiązałoby problem że część ludzi chce czcionkę monospace (@TomRiddle) a część nie (@furious programming) w edytorze?

nikt nie chce mieć czcionki monospace tylko stałą szerokość czcionki żeby móc zrobić tabelkę i napisać kod.

Dobre!

2

Ta dyskusja idzie w złym kierunku, bo zaczynają się wkradać emocje i za chwile dojdziemy do punktu, ze nie wiadamo po co @TomRiddle pisze nową wersję.

NIe znam się na technikaliach, w sensie co w tej testowanej wersji zostało dodane, jednak zamysł że sekcja kodu jest inną czcionką mi się podoba. Teraz to już kwestia dogadania pomiędzy @TomRiddle i @Adam Boduch aby wprowadzić do serwisu, bo na mój gust, już można spokojnie to wrzucać.

2
obscurity napisał(a):
TomRiddle napisał(a):

A w jaki sposób to rozwiązałoby problem że część ludzi chce czcionkę monospace (@TomRiddle) a część nie (@furious programming) w edytorze?

nikt nie chce mieć czcionki monospace tylko stałą szerokość czcionki żeby móc zrobić tabelkę i napisać kod.

To jest własnie czcionka monospace przyjacielu.

Wikipedia:

A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space. This contrasts with variable-width fonts, where the letters and spacings have different widths.

.

obscurity napisał(a):

Obecnie trzeba się przeklikiwać na zmianę pomiędzy "Treść" a "Podgląd". Gdyby podgląd był pod postem to można przeboleć czcionkę o stałej szerokości bo od razu widać jak post będzie wyglądał w rzeczywistości - pisząc można więc patrzeć w jedno albo drugie miejsce i mamy obie czcionki na raz (jak na stackoverflow).

Być może, ale pamiętaj że jak piszesz post, to przez dużą część czasu wpisany markdown jest niepoprawny (niedomknięty link, niedomknięta tabelka, niedomknięty obrazek, niedomknięte pogrubienie, niedomknięty kod, etc.) Więc ten podgląd przez sporą część czasu pokazywałby "zesputy" podgląd.

TomRiddle napisał(a):

A czemu niby? Nie usuwam żadnych znaków z edytora (nie jest tak, że jak ktoś wpisze *foo*, to znaki się zamieniają na foo), w środku siedzi maszyna stanowa która przy zmianie kalkuluje style na nowo (więc np. jak wytniesz i wkleisz całość to dostaniesz dokładnie ten sam efekt).

bo zaczynasz używać innych kontrolek, choćby innej biblioteki do kolorowania składni z obsługą innych języków. szansa że post w rzeczywistości będzie pokolorowany w całkiem inny sposób przechodząc przez całkiem inny kod jest spora

Kontrolki na https://danon.github.io/4programmers/ są poglądowe, na 4programmers.net będą podpięte do tych które są używane teraz, także nawet nikt nie zauważy że coś się zmieniło. Co do kolorowania składni, to użyjemy takiego samego theme'a, tak że będą wyglądały podobnie (lub nawet tak samo, jeśli skopiuje się kody RGB 1:1). Języki postaramy się wspierać takie same, tak żeby wszystko co teraz umie edytor 4programmers.net, umiał też nowy edytor. Co do tego że kolorowanie składni w edytorze będzie inne niż wyrenderowane - być może, ale kolorki można ładnie zmienić tak żeby pasowały.

Dodatkowo jeśli będzie się chciało wprowadzić nową składnię to będzie trzeba robić to w dwóch miejscach, więc nowa kontrolka hamuje rozwój. Najprostsze rozwiązania są najlepsze.

Zawsze mogę usunąć kolorowanie składni z edytora :D Wtedy kolorowanie będzie tylko w jednym miejscu.

1
Panczo napisał(a):

Ta dyskusja idzie w złym kierunku, bo zaczynają się wkradać emocje i za chwile dojdziemy do punktu, ze nie wiadamo po co @TomRiddle pisze nową wersję.

No szczerze mówiąc to tak, decyzja nie była z nikim przedyskutowana, po prostu Tom zaczął pisać kontrolkę mówiąc że zrobi prototyp w godzinę a za tydzień pisze że spędził nad tym kilkadziesiąt godzin. Kawał dobrej, nikomu niepotrzebnej roboty.
Teraz szkoda by było tego nie wrzucić na forum (choćby z litości), ale jednak z tonu wypowiedzi choćby Adama i kilku innych osób w tym wątku czy tutaj odczuwam że nie jest zbyt zachwycony tym co się dzieje.

Mimo wszystko uważam że warto przedyskutować z innymi potrzebę zrobienia czegoś zanim poświęci się temu kupę czasu. Tu trochę taka samowolka budowlana

3

Nie kłóćmy się.

obscurity napisał(a):

nikt nie chce mieć czcionki monospace w edytorze tylko podgląd ze stałą szerokością czcionki żeby móc zrobić tabelkę czy napisać kod (…)

@obscurity , w tych słowach jesteś niesprawiedliwy. To, że niektórzy nie chcieli, nie oznacza, że wszyscy nie chcą. Mnie ona nie przeszkadza (o czym pisałem na forum).

TomRiddle napisał(a):

Na prawdę masz tupet, jesli myślisz że możesz komuś dyktować co ma robić w swoim wolnym czasie.

@TomRiddle , bardzo Cię proszę. To nie ma związku z tym wątkiem. (UPDATE Post został usunięty przez @TomRiddle ).

0
Silv napisał(a):

Nie kłóćmy się.

To nie jest kłótnia przynajmniej nie z mojej strony. Nie mam nawet nic do nowego edytora, napisałem tylko że można było zrobić to znacznie prościej i "usytasy" obie strony. Można sobie robić w wolnym czasie co się chce

1
obscurity napisał(a):

No szczerze mówiąc to tak, decyzja nie była z nikim przedyskutowana, po prostu Tom zaczął pisać kontrolkę mówiąc że zrobi prototyp w godzinę a za tydzień pisze że spędził nad tym kilkadziesiąt godzin. Kawał dobrej, nikomu niepotrzebnej roboty.

Mnie jest potrzebne. Uważam to za krok w bardzo dobrym kierunku jeśli chodzi o UX na forum. Fajnie też, że ktoś poza @Adam Boduch zrobił coś dla forum.

I z tego, co widzę, to niechęć niektórych dotyczy nie samej zmiany edytora, ale kolorowania składni i podpowiadania użytkowników. Jak dla mnie kolorowanie w runtimie można usunąć. Co do podpowiadania użytkowników, to nie wydaje się to problemem nie do przejścia.

4
TomRiddle napisał(a):

No ale wiesz, nie trzeba dublować. Możemy wybrać jeden usunąć drugi.

Ten plugin ma taką zaletę że pokazuje okienko zaraz pod cursorem, a nie na dole, a nadal można go ostylowac i zmienić markup tak żeby pasował do 4p.

Czy ten plugin działa jako samodzielna jednostka, tj. bez użycia code mirror? Pamiętaj, że obecnie ten komponent działa w różnych miejscach, gdzie docelowo nie będzie używany Twój komponent. Np. w komentarzach. Podobny mechanizm też wykorzystywany jest w module wiadomości prywatnych, w <input>, gdy wybieramy odbiorcę wiadomości.

Może lepiej po prostu zmienić obecny komponent, aby pozycjonował się w miejscu kursora? Ktoś niedawno o tym właśnie pisał w dziale Coyote.

1
Silv napisał(a):

[...]

UPDATE 2 Usunąłem wyrażenie "cofa" z sekcji "Zachowanie oczekiwane" i "Zachowanie aktualne". Ja rozumiałem je przenośnie, w sensie: "oczekuję, że ten skrót będzie powodował zawsze tylko 'cofnięcie' – a okazuje się, że robi coś dodatkowo". Uznałem, że takie przenośne wykorzystanie zwrotu "cofa" utrudnia zrozumienie, o co chodzi.


UPDATE 3

Zachowanie jest reprodukowalne w następujących przypadkach:

  • otwierając przeglądarkę za pomocą polecenia w terminalu: chromium --temp-profile i od razu przechodząc do strony;
  • otwierając przeglądarkę za pomocą polecenia w terminalu: chromium --temp-profile, następnie otwierając nowe okno w trybie "incognito" i dopiero w nim przechodząc do strony.

@Silv Druga poprawka weszła (wersja 1.0.54): https://danon.github.io/4programmers/ Sprawdź teraz.

1
TomRiddle napisał(a):

@Silv Druga poprawka weszła (wersja 1.0.54): https://danon.github.io/4programmers/ Sprawdź teraz.

Opisane zachowanie u mnie nie występuje, uznaję za naprawione. :) Dzięki. :)


PS @TomRiddle Cofanie czynności jest, a ich ponawianie będzie?

0

@Marooned: Wrzuciłem nową wersję: https://danon.github.io/4programmers/

Marooned napisał(a):
  1. screenshot-20211012151736.png - nie używamy tu emotek typu :coś: więc wywaliłbym kolorowanie tego

Poprawione! Dzęki!

  1. cztery apostrofy (backtick) odpalają nowy rodzaj kodu, który ciągnie się do końca posta? Tak to wygląda po 10 sekundach testów

No, tak działa markdown. Cztery backticki to jest otwarcie i zamknięcie kodu. Dzięki temu możesz użyć trech backticków w kodzie ;)

  1. autouzupełnienie działa dziwnie:
    a) @s
    screenshot-20211012152057.png
    b) @so
    screenshot-20211012152117.png
    c) @som - nagle pojawiają się nowe, których wcześniej nie było
    screenshot-20211012152555.png
    d) @sol - mimo, że dla @so widać no_solution_found z podkreślonym so, dodanie kolejnej pasującej litery czyści listę podpowiadania
    screenshot-20211012152208.png

To jest celowe, z tym @somekind, @somekind1, @somekind2, @somekind3. To było po to żeby przetestować czy kolejne wpisywanie nowych liter woła od nowa Promise do wczytania większej ilości użytkowników.

screenshot-20211013230709.png

Wywaliłem to, teraz powinno być okej: https://danon.github.io/4programmers/

2
Adam Boduch napisał(a):
TomRiddle napisał(a):

No ale wiesz, nie trzeba dublować. Możemy wybrać jeden usunąć drugi.

Ten plugin ma taką zaletę że pokazuje okienko zaraz pod cursorem, a nie na dole, a nadal można go ostylowac i zmienić markup tak żeby pasował do 4p.

Czy ten plugin działa jako samodzielna jednostka, tj. bez użycia code mirror?

Na razie nie, a czemu pytasz?

Pamiętaj, że obecnie ten komponent działa w różnych miejscach, gdzie docelowo nie będzie używany Twój komponent. Np. w komentarzach. Podobny mechanizm też wykorzystywany jest w module wiadomości prywatnych, w <input>, gdy wybieramy odbiorcę wiadomości.

Może lepiej po prostu zmienić obecny komponent, aby pozycjonował się w miejscu kursora? Ktoś niedawno o tym właśnie pisał w dziale Coyote.

No, niby tak. Faktycznie, z tym że edytor jest używany również w innych miejscach to istotny argument. Ja celowalem z moim komponentem w edytor postów oraz mikroblogi.

A co do argumentów "za", to jak pisałem wiadomość do @Marooned to zauważyłem jedno miejsce gdzie nowy komponent może być kapkę lepszy. Jak jest długi wpis, to odległość od kursora do tooltipa może być sporym problemem:

screenshot-20211013231718.png

3

Nowa wersja: https://danon.github.io/4programmers/, wersja 1.0.58.

Poprawiłem autocomplete, w nowym edytorze.

Teraz ma pełne wsparcie dla dodawania, edycji i usuwania nicków z @nick oraz @{nick}, ze spacją lub bez.

Filmik:
autocomplete.gif
(Jesli na Twojej przeglądarce filmik się zatrzymał, odśwież stronę).

0

Ten edytor ma dużą liczbę skrótów klawiaturowych (i to bezpośrednio z Ctrl bez żadnego Alt czy Shift, nie mówiąc już o tym, że przedefiniowywany jest standardowy skrót Ctrl+V), co nie pozwala użyć ich w obrębie przeglądarki do czegoś innego (wbudowane funkcje, wtyczki). Większość użytkowników zna Markdown, a osobom, które go nie znają, nie chcą się nauczyć, a koniecznie chcą formatować treść swoich postów wystarczą przyciski. Na dodatek skróty klawiaturowe trzeba tłumaczyć osobno, a MD jest taki sam dla dużej liczby serwisów. Moim zdaniem potrzebna byłaby opcja wyłączenia tych skrótów.

0
Manna5 napisał(a):

Ten edytor ma dużą liczbę skrótów klawiaturowych (i to bezpośrednio z Ctrl bez żadnego Alt czy Shift, nie mówiąc już o tym, że przedefiniowywany jest standardowy skrót Ctrl+V), co nie pozwala użyć ich w obrębie przeglądarki do czegoś innego (wbudowane funkcje, wtyczki).

No ja mówiłem, żeby ctrl + p nie nadpisywać.
Ale ctrl + v nie jest przedefiniowany - to jest nadal wklejanie, tylko że działa lepiej.

Większość użytkowników zna Markdown

Tych zaawansowanych czy wieloletnich może i tak. Ale posty nowych użytkowników często są źle sformatowane.

0

Wszystko spoko, tylko jeszcze przywrócić z powrotem markup, markdown się nie sprawdza

3

IMO można by to dodać do forum. Czy była przeprowadzan próba integracji z Coyote? Nie bardzo wiem na co jeszcze czekać...

2
Panczo napisał(a):

IMO można by to dodać do forum. Czy była przeprowadzan próba integracji z Coyote? Nie bardzo wiem na co jeszcze czekać...

Zostało jeszcze kilka rzeczy do dodania:

  • kolorowanie składni dla kilku formatów, Scala, Dockerfile oraz Bash/sh
  • kilka poprawek markdown, np teraz da się zamienić wspomnienie użytkownika @TomRiddle na @To**mRidd**le, psując markdown kontrolką "Pogrub". Trzeba dodać zabezpieczenie, żeby tak się nie dało, przynajmniej przypadkiem (klawiaturą nadal będzie się dało)
  • Pracuję jeszcze nad formatowaniem <kbd>Ctrl</kbd>, ale to może poczekać w sumie.

Przygotowujemy się do integracji z Coyote, mamy to w miarę przemyślane, ale próby jeszcze nie było.

3

Czy ja wiem i tak nie zabezpieczymy się przed wszystkimi błędami użytkowników:

kolorowanie składni dla kilku formatów, Scala, Dockerfile oraz Bash/sh

To może byc ewolucja, dużym ułatwieniem jest już zmiana czcionki w bloku kodu, kolorowanie to miły dodatek, ala dla mnie game changerem to jest monotype, koloru nie są tak istotne

kilka poprawek markdown, np teraz da się zamienić wspomnienie użytkownika @TomRiddle na @TomRiddle, psując markdown kontrolką "Pogrub". Trzeba dodać zabezpieczenie, żeby tak się nie dało, przynajmniej przypadkiem (klawiaturą nadal będzie się dało)

Aż sprawdziłem obecna na forum wersja wstawi pogrubienie z przycisku w wołaniu uzytkownika @tomRiddle*

Pracuję jeszcze nad formatowaniem Ctrl, ale to może poczekać w sumie.

Może poczekać

1 użytkowników online, w tym zalogowanych: 0, gości: 1