W tym wątku będziemy zbierać rzeczy (duże i małe) których uczymy się każdego dnia 
Zacznę: Dzisiaj poznałem optipng - narzędzie, które zmniejsza rozmiar plików png bez utraty jakości 
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 onDatastoreza pomocą metodyfindo 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.
1 Like
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.
1 Like
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.
1 Like
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 
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ą
3 Likes
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;
1 Like
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.
1 Like
Dzisiaj się dowiedziałem jakie są założenia Dockera i na co pozwala konteneryzacja.
1 Like
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.
2 Likes
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.
2 Likes
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)
1 Like
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
1 Like
Wczoraj się nauczyłem, że można zamiast ngrok-a (który limituje ilość pageviews-ów na sesję) korzystać z 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ą)
1 Like
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/
2 Likes
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­ta, a Adam nie ma ko­ta
</p>
Demo:
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 ­ w stronach generowanych przez Sealpage 
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 
(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” 
2 Likes