TIL: Today I Learned

W tym wątku będziemy zbierać rzeczy (duże i małe) których uczymy się każdego dnia :slight_smile:

Zacznę: Dzisiaj poznałem optipng - narzędzie, które zmniejsza rozmiar plików png bez utraty jakości :blush:

TIL obsługi plików w sealiousie. Dzięki temu udało mi się dodać działającą obsługę zdjęć do sealpage’a.
Na szybko w punktach:

  • Sealiousowej apce przy inicie możmy podać ścieżkę, w której ma zapisywać pliki wrzucane na serwer (domyślnie jest to /uploaded_images(?)).
  • Każdy plik po udanym wrzuceniu na serwer dostaje swoje unikalne id, dzięki temu możemy potem odszukać go za pomocą obiektu Datastore.
  • Zgodnie z powyższymi punktami, trzymam id na froncie i wysyłam go na serwer do komponentu responsive-image, gdzie tam odpytuje on Datastore za pomocą metody find o dane na temat pliku (w tym ścieżka i rozszerzenie).
  • Cała reszta przebiega już w identyczny sposób, jakbym wczytywał plik lokalnie z dysku.

Oprócz samego pisania logiki na backendzie, dowiedziałem się też o istnieniu obiektu FormData, typie zawartości multipart/form-data i tego w jaki sposób i do czego są one potrzebne.

1lajk

Dzisaj nauczyłam się, że zmieniając w wariantach w configu name na default i dodając label można pozbyć się podwójnych wariatnów w docsach.

1lajk

Dzisiaj nauczyłem się jak działa flex-direction oraz shape-outside w css’ie.
Za pomocą flex directiona byłem w stanie ustawić aby obrazek z lewej strony przesunął się na prawo, ale gdy strona przejdzie do widoku jednkolumnowego to obrazek będzie pierszy nie opis (komponent nice-header w stronie firmowej), a shape-outside można wykorzystać do niestandarkowego opływu obrazka przez tekst.

1lajk

Dzisiaj nauczyłem się, że w konsoli JS Firefoxa jest funkcja copy, która kopiuje stringa do systemowego schowka:

copy("focca")

I potem ctrl+v gdzieś indziej :heart:

W szczególności przydatne, gdy chcę wyciągnąć z DOM jakiś duży obiekt w JSON-ie i nie chce mi się bawić w zaznaczanie kursorem

copy(JSON.stringify(Array.from(temp0.children).map(e=>e.value)))

Najlepsze jest to, że odkryłem to przez przypadek - po prostu zawinąłem to w copy myśląc “he he, ale by było gdyby to zadziałało”… po czym to zadziałało. Moje żarty lubią okazywać się prawdą :blush:

1lajk

Dzisiaj nauczyłem się jak używać Flexboxa do wyśrodkowania elementów w kontenerze, zawierającego dwie kolumny.
Miałem problem z wyśrodkowaniem elementów w kolumnach. Użyłem Flexboxa do całego kontenera i myślałem, że wystarczy dodać margin: 0 auto; do każdej kolumny, by wyśrodkować zawartość. Jednak to nie pomogło i rozwiązaniem tego problemu było dodanie do każdej kolumny następującego kawałka kodu:

display:flex; 
flex-flow: column; 
align-items: center;
1lajk

Dowiedziałem się (drugi raz), że pseudoelement ::after pojawi się dopiero jak mu nadamy jakiś content i display. Może tym razem zapamiętam. Do tego nauczyłem się używać opcji shape-outside: w cssie.

1lajk

Dzisiaj się dowiedziałem jakie są założenia Dockera i na co pozwala konteneryzacja.

1lajk

Dowiedziałem się, że przekazywanie do funkcji zmiennej typu boolean nie jest najlepszym pomysłem. Ponieważ zdarzają się przypadki, w których nie wystarczy przekazać true albo false, i jesteśmy zmuszeni użyć nulla.

2lajki

Zapomniałem dodać wczoraj więc dodaje teraz. Wczoraj się nauczyłem debugować stronę przez usb z androida. Najpierw trzeba ustawić w opcjach programistycznych androida zezwolenia na debugowanie przez usb w firefoxie na androidzir również w ustawienia > zaawansowane. Nastepnie podłączyć przez usb do kompa i na kompie kliknąć shift + f8. Jeżeli nie znajduje urządzenia możliwe że musisz zmienic na androidzie opcje użycia usb na PTP.

2lajki

TIL w JS2019 wchodzą nowe metody dla tablic: flat i flatMap.

2lajki

Wczoraj nauczyłem się, że jeżeli chcemy jakiejś paczki używać w projekcie to należy ją zainstalować z --save, a dziś się nauczyłem, że firefox pozwala na wyświetlanie strony bez styli (view -> page style -> nostyle)

1lajk

Afaik nie trzeba już używać opcji --save przy npm install.

Jak ostatnio dałem bez --save to pakiet nie dodał sie do package.json

Dzisiaj utwierdziłem się w przekonaniu, ze jest potrzeba lepszego dialogu pomiedzy bańkami informacyjnymi oraz że jest duże zainteresowanie tematami midline’owymi :3

1lajk

Wczoraj się nauczyłem, że można zamiast ngrok-a (który limituje ilość pageviews-ów na sesję) korzystać z serveo.net:

http://serveo.net/

Nie trzeba nic instalować! Wystarczy użyć:

ssh -R 80:localhost:8080 serveo.net

aby ztunelować jakiś lokalny port pod publiczne IP. Dzięki temu mogę pomagać w debugowaniu stron osobom, które pracują zdalnie :3

Nie z dzisiaj, ale przypomniała mi się ciekawostka, o którą obiłam się jakiś czas temu przy okazji dziwnego błędu:
Linux, w przeciwieństwie do Windowsa i OS X jest całkowicie case-sensitive i dlatego jeśli na Maczku/Windowsie nakażemy w skrypcie np. skopiować coś z /$HOME/downloads, to skopiuje z downloads albo Downloads bez zająknięcia, natomiast Linux się tu wykopyrtnie. Warto zwracać na to uwagę, jeśli robicie coś cross-platformowo (w tym przypadku był to problem z paczką npmową) :slight_smile:

1lajk

TIL że używając seda jakikolwiek znak może służyć za delimeter (przydatne w momencie kiedy w patternie mamy na przykład dużo /).

https://backreference.org/2010/02/20/using-different-delimiters-in-sed/

2lajki

TIL jak się używa CSS-owej funkcji minmax() oraz pseudoklasy :nth-child()

TIL o specjalnym znaku ­ (“soft hyphen”) w HTML. Umieszcza się go w środku słów w tekście, który będzie zawijany na linie. Jest podpowiedzią, że w danym miejscu można łamać słowo myślnikiem.

Przykład użycia:

<p>
  Ala ma ko&shy;ta, a Adam nie ma ko&shy;ta
</p>

Demo:

https://jsfiddle.net/ab6e1gfm/

Co prawda istnieje property hyphens w CSS, która robi to automatycznie, ale obsługuje tylko zasady łamania słów dla języka angielskiego.

Przyszło mi do głowy, aby korzystać z jakiejś biblioteki która zna zasady łamania słów w j. polskim i za jej pomocą automatycznie wstawialibyśmy &shy; w stronach generowanych przez Sealpage :thinking: Założę na to taska w wolnej chwili

EDIT: oh wait, Firefox wspiera zasady myślnikowania dla dużej ilości języków. Inne przeglądarki tylko dla angielskiego :roll_eyes::roll_eyes::roll_eyes::roll_eyes::roll_eyes: (poza Safari, które trochę goni FF)

PS @FilipI - to by rozwiązało problemy z diffami które są odrzucane, bo nie mieszczą na szerokość słowa “wewnątrzszpitalny” :grin:

1lajk