• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Aktualizacja dla bloczków z kodem

VPS Starter Arubacloud
+13 głosów
606 wizyt
pytanie zadane 7 sierpnia 2021 w Sprawy forum przez ScriptyChris Mędrzec (190,190 p.)

Cześć, chciałbym podzielić się małym ogłoszeniem dotyczącym rozwoju forum.

W związku z pomysłami na dalsze poszerzanie funkcjonalności bloczka z kodem, pojawiła się zaktualizowana wersja interaktywnej belki. Przycisk "Kopiuj" został zastąpiony przyciskiem "Opcje", którego kliknięcie otwiera listę opcji. Wewnątrz, na chwilę obecną, są dostępne trzy ficzery, ale w różnym czasie w dyskusjach na GitHubie czy Discordzie padały m.in. propozycje dodania możliwości:

- formatowania zawartości bloczka,
- kompilacji kodu i pokazania wyniku,
- tworzenia wielo-plikowego snippeta uruchamianego w zewnętrznym serwisie (pokroju używanych już CodePen i JSFiddle).

W pierwszej kolejności natomiast, zostały zaimplementowane funkcjonalności pokazania bloczka na pełnym ekranie i wyszukiwarki. Gdy pojawi się okazja do wprowadzenia kolejnych funkcjonalności (np. wspomnianych wyżej), to miejsce na przycisk je aktywujący będzie już przygotowane.

Szczegóły zmian wprowadzonych obecnie:
- przycisk "Szukaj" otwiera wyszukiwarkę, która działa w kontekście danego bloczka (co jest wygodniejsze niż korzystanie z przeglądarkowej szukajki zwłaszcza, gdy w danym temacie jest sporo bloczków z kodem i pewne frazy powtarzają się między nimi) i szuka w trybie ignorowania wielkości znaków (tzw. case-insensitive). Wyszukiwarka posiada wskaźnik aktualnie wybranego wystąpienia oraz licznik wszystkich znalezionych wystąpień. Znalezione i wybrane frazy są zaznaczone odpowiednimi kolorami, a przechodzić pomiędzy kolejnymi wystąpieniami można za pomocą dostępnych przycisków w kształcie strzałek, kierunkowo odpowiadającym im strzałkom na klawiaturze lub kombinacji Enter oraz Shift + Enter. Wyszukiwarka w razie potrzeby przesuwa się w poziomie lub pionie, aby uniknąć przesłaniania aktualnie wybranego wystąpienia. Bloczek jest automatycznie przewijany, jeśli wystąpienie frazy znajduje się poza widocznym obszarem. Do wyszukiwarki można (poza kliknięciem w "Szukaj" z listy opacji) wejść również za pomocą skrótu Ctrl + F (wcześniej trzeba kliknąć w okno z zawartością bloczka, aby nadać mu focus) i z niej wyjść za pomocą klawisza Escape (jeśli pole do wyszukiwania ma focus). Wyszukiwarka zapamiętuje ostatnio wprowadzoną frazę oraz wybrane wystąpienie pomiędzy jej otwarciami - jest to przydatne, jeśli przypadkiem zamknie się wyszukiwarkę, a szukana fraza była długa lub skomplikowana do wprowadzenia;
- przycisk "Kopiuj" znajduje się teraz w liście opcji i jego użycie (udane lub nie) jest sygnalizowane odpowiednim kolorowym komunikatem;
- przycisk "Pełny ekran" jest aktywny, gdy bloczek nadaje się do pokazania na pełnym ekranie, a więc jest przewijalny i jego szerokość wynosi minimum 400px. Ficzer ten działa w jednym z dwóch trybów: korzysta z natywnego Full Screen API przeglądarki lub (jako fallback dla niewspierających przeglądarek) bloczek jest pokazywany jako popup na całą szerokość ekranu. W obu przypadkach bloczek jest automatycznie rozwijany, a otwarte menu opcji chowane;

Zachęcam do dzielenia się sugestiami, co można poprawić lub jakie ficzery dodać oraz do zgłaszania ewentualnych błędów, których nie udało się wyłapać. :)

P.S. Poniżej znajduje się bloczek, na którym można sobie przetestować wprowadzone zmiany.

<?php

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum lectus non leo iaculis, nec posuere ipsum laoreet. 
  Donec et ex dignissim, egestas lectus vitae, tempor risus. Cras vel ullamcorper libero. Sed eu ullamcorper metus.
</p>

<article>
  Quisque sodales dictum urna, id hendrerit orci. Nulla nulla velit, convallis in vestibulum a, sollicitudin quis magna. 
  In placerat sit amet mi tempus scelerisque.
  Nam sollicitudin lobortis suscipit. Morbi eget tortor consequat, mattis dolor ornare, dictum metus. 
  Donec pharetra, sapien a convallis auctor, felis sapien porta leo, nec fringilla mi magna elementum ante. 
  Nam pulvinar velit vitae eros convallis, ut aliquam nisi tincidunt.
  Nullam convallis tortor sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Morbi pulvinar ante ut tellus suscipit pulvinar. Vestibulum a varius orci, sit amet sagittis magna. 
  Cras quis nibh sit amet eros bibendum maximus. 
  Nam ut justo quis nisl porttitor sollicitudin eu consectetur orci. Pellentesque quis tellus massa.

  <q>
    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
   There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
  </q>
</article>

<script>
    const msg = "Hello world!";

    if (typeof window !== 'undefined' && window?.alert) {
        alert(msg);
    } else if (console && typeof console.log === 'function') {
        console.log(msg);
    } 
</script>

?>

 

3
komentarz 7 sierpnia 2021 przez rafal.budzis Szeryf (85,260 p.)
Wygląda ciekawie :) Mi czasem brakuje miejsca na przeglądanie kodu tak po prostu. Fullscreen na pewno ułatwi sprawę jednak zastanawiam się czy może warto by było zwiększyć szerokość strony na full HD. Obecnie mamy tylko 1024px szerokości

Druga rzecz to zajmowanie miejsca po prawej i lewej stronie na avatar i ocenę pytania. Gdyby przebudować nagłówek pytań i poszerzyć treść na cały obszar można by zyskać 100px szerokości dla treści :)
2
komentarz 8 sierpnia 2021 przez CubeStorm Pasjonat (15,020 p.)

@ScriptyChris, Full Screen, coś pięknego.

komentarz 10 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

@rafal.budzis, co do przebudowy layoutu, to ja się nad tym nie zastanawiałem, bo - w kwestii rozbudowy forum - bardziej myślę o ficzerach niż wyglądzie. Ale, jeśli masz jakąś koncepcję, to możesz ją opisać i np. pokazać PoC tworząc issue w forumowym repo - może kiedyś ktoś się za to weźmie (mamy deficyt ochotników). ;)

1
komentarz 13 sierpnia 2021 przez j23 Mędrzec (194,920 p.)

bardziej myślę o ficzerach

Moje propozycje:

  • Możliwość minusowania dopiero od pewnej ilości punktów (czasami odnoszę wrażenie, że minusy rozdawane są z innych niż merytoryczne powodów). Dobrze by było, gdyby było wiadomo, kto je daje.
  • Jeśli chodzi o bloczek kodu, to może możliwość otwarcia w nowym oknie?
  • Zablokowanie możliwości pisania odpowiedzi autorowi wątku - często traktują je jak komentarze.

 

komentarz 13 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)
edycja 13 sierpnia 2021 przez ScriptyChris
  • Możliwość minusowania dopiero od pewnej ilości punktów (czasami odnoszę wrażenie, że minusy rozdawane są z innych niż merytoryczne powodów). Dobrze by było, gdyby było wiadomo, kto je daje.

Dyskusja na temat blokowania/ograniczania/dodania powodu dla ujemnych głosów i ogólnie widoczności autorów głosów przewijała się chyba wielokrotnie. Ostatecznie nie wiem na czym stanęło, bo nie mogę tego znaleźć na GitHubie, więc może jest gdzieś na Discordzie.

  • Jeśli chodzi o bloczek kodu, to może możliwość otwarcia w nowym oknie?

A do czego to by miało służyć? Żeby mieć widoczny tylko wybrany bloczek z kodem i w między czasie robić coś w innym oknie/programie, nie musząc przy tym specjalnie minimalizować okna przeglądarki? Brzmi ciekawie, ale nie wiem na ile to jest skomplikowane po stronie backendu - bo pewnie serwer musiałby serwować konkretny bloczek na podstawie unikalnego URL'a. Tutaj @Arkadiusz Waluk mógłby się wypowiedzieć.

  • Zablokowanie możliwości pisania odpowiedzi autorowi wątku - często traktują je jak komentarze.

A co w sytuacji, gdy autor pytania sam znalazł rozwiązanie problemu i chce je zostawić dla potomnych? Moim zdaniem bardziej pasuje, żeby umieścił taki post właśnie jako odpowiedź, a nie komentarz. Natomiast trudno byłby automatycznie wykrywać, czy autor tematu napisał odpowiedź, która zawiera rozwiązanie jego problemu, czy pomylił się i napisał komentarz jako odpowiedź.


[edycja dotycząca drugiego punktu]

Stworzyłem issue wraz ze wstępnym researchem na ten temat.

1
komentarz 13 sierpnia 2021 przez j23 Mędrzec (194,920 p.)

A do czego to by miało służyć?

Czasami dyskusja rozwija się tak, że nie mieści się na ekranie. i jak chcesz dodać post, który wypunktowuje błędy w kodzie, to trzeba przewijać w górę i w dół, w górę i w dół. Średnio to wygodne IMO.

No i nie musi to być okno sensu stricto (coś w stylu podglądu posta, tylko niemodalnie i z możliwością przesuwania).

A co w sytuacji, gdy autor pytania sam znalazł rozwiązanie problemu i chce je zostawić dla potomnych?

Ma możliwość edycji i zamknięcia pytania z podaniem przyczyny. Nie widzę problemu.

Raczej to jest tak, że jak OP sam dojdzie do rozwiązania, to rzadko daje odpowiedź wyjaśniającą rozwiązanie. Zwykle (o ile w ogóle) podaje powód zamknięcia w stylu "Ok, poradziłem sobie" i tyle. Z kolei często widzę kontynuację dyskusji nie w komentarzu a w odpowiedzi.

komentarz 13 sierpnia 2021 przez Arkadiusz Waluk Ekspert (287,550 p.)

@ScriptyChris, jak już wstępnie wspomniałem, myślę, że backendowo jest to też wykonalne. Musielibyśmy zrobić jakąś podstronę/endpoint, gdzie po podaniu id pytania oraz numeru bloczka treść byłaby parsowana, a następnie zwracany dany kod bloczka. Niestety bloczki same w sobie nie mają żadnego stałego identyfikatora, stąd wydaje się, że najprostsze tutaj byłoby bazowanie po prostu na ich numerze w poście. Jeśli da się to rozwiązać tylko po stronie frontendu to pewnie też byłoby ok.

@j23, co do minusowania to rozważane było wiele opcji - publiczna widoczność wszystkich głosów, konieczność podania krótkiego powodu do głosu lub ujawnienie osoby głosującej czy właśnie możliwość głosowania od jakiegoś progu punktów czy liczby wypowiedzi. Żaden z rozwiązań idealne nie jest, dlatego na razie trzymamy się obecnego modelu.

Jeśli chodzi o odpowiadanie na własne pytania, to możemy to łatwo zablokować, jest taka opcja w konfiguracji forum. Zostało z kilku powodów - czasem właśnie autor może podać rozwiązanie, które sam znalazł. Czasem zdarza się, że użytkownikowi bardzo zależy, aby "podbić" pytanie (aby wskoczyło na górę strony głównej), co można technicznie zrobić obecnie tylko przez dodanie odpowiedzi. Takie podbijanie generalnie nie powinno mieć miejsca, ale czasem ktoś nie uzyskał żadnej odpowiedzi i bardzo mu na tym zależy, więc wtedy lepiej już tak niż założyć duplikat (wtedy istnieje ryzyko, że będą się toczyły równolegle dyskusje w dwóch tematach), skoro innej opcji obecnie nie mamy. No i czasem mamy wątki, które nie są typowymi pytaniami, a tematami gdzie autor może potrzebować dodać coś więcej, co nie będzie tak samo widoczne w komentarzu. W standardowym modelu forum wszystko jest po prostu postem, więc tam nie ma problemu, a u nas traktując odpowiedzi sztywno jako odpowiedzi nie byłoby możliwości w ogóle dodania takiego posta wtedy. Dlatego możliwość dodania odpowiedzi jest do tej pory dostępna. Zablokowana została kiedyś opcja wybrania swojej własnej odpowiedzi jako najlepszej, aby tego nie nadużywać.

1 odpowiedź

+5 głosów
odpowiedź 9 sierpnia 2021 przez Wiciorny Ekspert (269,120 p.)
Bardzo mi się podobają aktualne rozwiązania, tak analizowałem sprawę z ciekawą opcją FULL SCREEN.
Nie myśleliście o implementacji tego, żeby jednak 'wyciemnić bardziej tło' nie całkiem jakby zasłaniać, co na zasadzie wiecie przysłonięcia, mniej człowiek wtedy traci intuicje i się gubi z kontekstu, ale to byc może tylko moje subiektywne spostrzeżenie.
Może akurat, ktoś podobnie to widzi i mozna by coś takiego zastosować zamiast całkowitego zasłaniania "widoku strony".
Niemniej jednak bardzo fajny "ficzer"
1
komentarz 10 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Nie myśleliście o implementacji tego, żeby jednak 'wyciemnić bardziej tło' nie całkiem jakby zasłaniać, co na zasadzie wiecie przysłonięcia, mniej człowiek wtedy traci intuicje i się gubi z kontekstu, ale to byc może tylko moje subiektywne spostrzeżenie.

Niezły pomysł. FullScreen API, z tego co czytam w specce, od strony CSS-a opiera się o dwie pseudoklasy i - sprawdzając na szybko w devtoolsach - da się manipulować m.in. tłem tego ficzera. Więc nie powinno być z tym problemu.

Podobne pytania

0 głosów
0 odpowiedzi 474 wizyt
+30 głosów
8 odpowiedzi 1,451 wizyt
pytanie zadane 7 sierpnia 2016 w Sprawy forum przez ScriptyChris Mędrzec (190,190 p.)
+8 głosów
2 odpowiedzi 274 wizyt

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...