Czy spotkałeś się z elementami na stronach internetowych, których przesuwanie i przeglądanie na urządzeniu mobilnym wołało o pomstę do nieba? Na pewno tak. To choćby różnego rodzaju karty informacyjne lub zdjęcia w galerii. Istnieje jednak sposób, który znacznie uprzyjemni korzystanie z nich, a wymaga dodania jedynie kilku linijek w #css i znany jest pod nazwą Scroll-Snap.

Blog: Scroll Snap – polepszanie zachowania przesuwanych elementów
Wideo poglądowe: WIDEO
Demo do przetestowania na urządzeniuPokaż całość

Słyszałem gdzieś kiedyś opinię, w której to blokowanie nagłówków tabeli #html z poziomu #css działa tylko i wyłącznie w demach artykułów, w których się znajdują. Postaram się dzisiaj zagiąć czasoprzestrzeń tak, by końcowy efekt wyszedł z tej czarnej dziury przez horyzont zdarzeń i zadziałał również u Ciebie.

Blokowanie nagłówków tabeli HTML w pionie poziomie za pomocą CSS

#webroad

Jest jeden (znany mi) prosty sposób, aby wywołać żądanie #http przez PowerShell z poziomu menadżera zadań zaplanowanych w Windows. Nie trzeba przy tym tworzyć żadnych dodatkowych skryptów, czy programów. Wykorzystuję tę możliwość do uruchamiania zadań, które muszą zwyczajnie odbić jakiś adres URL w udostępnianych #api. Korzystam z polecenia Invoke-WebRequest.

Zobacz post na moim blogu: Wywoływanie żądania HTTP przez PowerShell w zadaniu zaplanowanym Windows

#webroad

Ciekawostka, wspierana obecnie tylko przez Chromium, czyli selektor ::target-text - pozwala on na stylowanie zaznaczenia frazy w tekście strony internetowej na podstawie specjalnego parametru w adresie URL.

Link do opisu na blogu: Własne style CSS dla zaznaczonej frazy wskazanej w adresie URL za pomocą ::target-text

#webroad #css

Zamiast stosować przewidywalne, inkrementowane identyfikatory w tabelach bazy danych zaleca się często, ze względów bezpieczeństwa, używanie tzw. #uuid, czyli unikalnych identyfikatorów tekstowych. Taki klucz w tabeli maksymalnie niweluje skuteczność ataków ☠️ polegających na kolejnym odpytywaniu URL, zwiększając jedynie parametr ID o jeden.

Na przykładzie #php i #laravel zademonstruję sposób na użycie UUID.

A czy Ty używasz UUID w swoim projekcie?

⛔️ Widzisz jakieś wady?
✅ A może same zalety?

https://webroad.pl/php/7905-uuid-zamiast-auto-increment-id-w-laravelu
#Pokaż całość

Nie tak dawno temu, bo w styczniu 2021 roku, pojawiło się w przeglądarkach Chrome i Edge wsparcie dla właściwości #css, pozwalającej ustanowić współczynnik proporcji dla elementów HTML. Poniższym tekstem pozwolę sobie opisać to przydatne usprawnienie, czyli tzw. aspect-ratio.

https://webroad.pl/html5-css3/7894-wspolczynnik-proporcji-czyli-aspect-ratio-w-css
#webroad #webdesign

Piątek wieczór – czas w sam raz na ostre cięcie na produkcji :-) Dzisiaj krótki wpis, który uporządkuje katalog z klasami migracji bazy danych w Laravel. Z biegiem czasu straszliwie puchnie i warto go co jakiś czas trochę odchudzić.

https://webroad.pl/php/7882-laravel-porzadek-w-migracjach-bazy-danych

#laravel #php #webroad

Polami formularza możemy manipulować za pomocą atrybutu "type". Nie zawsze jednak urządzenie mobilne wie dokładnie, jaką klawiaturę wysunąć użytkownikowi, szczególnie w różnego typu specyficznych przypadkach. Nie zawsze chcemy też polegać na domyślnym wyborze przeglądarki.

✅ Możemy temu w prosty sposób zaradzić i samodzielnie zdefiniować widok klawiatury urządzenia mobilnego.
Zapraszam do nowego wpisu na blogu.

https://webroad.pl/html5-css3/7862-dostosowywanie-klawiatury-urzadzenia-mobilnego-w-polach-formularza

#html #webroad

Po świąteczno-noworocznej przerwie pora rozruszać stawy palcach.
Dzisiejszym tematem będzie centrowanie elementu znajdującego się w kontenerze. Rzecz prosta, lecz często poszukiwana w wyszukiwarkach, szczególnie przez początkujących web-developerów.

O tym, jak wyśrodkować element za pomocą trzech sposobów #css - #flexbox, #grid i #block - przeczytasz na blogu.

https://webroad.pl/html5-css3/7799-jak-wysrodkowac-element-w-kontenerze-3-sposoby-flexbox-grid-i-block
#webroad

Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS
Ostatnio bardzo modny ale i za razem praktyczny – z punktu widzenia użytkownika – jest temat udostępniania wszem i wobec ciemnych wersji interfejsu aplikacji webowych. Sam jestem zwolennikiem tego ruchu i z utęsknieniem wypatruję kolejnych usług, które taką formę oferują.

Co ciekawe, za pomocą #css3 i reguł dostępnych w Media Queries Level 5 możemy wykryć preferencje systemu operacyjnego użytkownika i łatwo dostosować interfejsPokaż całość

Jak zaznaczyć poprawnie i błędnie wypełnione pola formularza w CSS?
Znacie ten ból podczas wypełniania formularza na stronie internetowej? Ciągłe komunikaty - wypełnij to pole, niepoprawny format. Klikamy i klikamy, czasem kilka razy w przycisk wysyłania, za każdym razem dowiadując się o błędach walidacji.

Co zrobić, aby takim jak my, żyło się lepiej?

Zaoferować choćby minimalną, niewielką pomoc w postaci pseudo-klas #css.

✔️ :valid - dla stylów poprawnie wypełnionych pól
❌Pokaż całość

Standardowo przycisk z atrybutem type="submit" wysyła formularz, w którym bezpośrednio się znajduje.
❓ Jak zatem wysłać formularz przyciskiem, który znajduje się poza nim, w zupełnie innym miejscu dokumentu #html?
https://webroad.pl/html5-css3/7816-jak-wyslac-formularz-przyciskiem-nieznajdujacym-sie-w-formularzu
#webroad

Jak skracać tekst znajdujący się w kilku wierszach, w akapicie? Jest to obecnie możliwe również za pomocą #css. Postanowiłem więc odświeżyć swój wpis z przed kilku lat i dostosować go do bieżących możliwości przeglądarek.

Pierwsza część zawiera to, co było w nim do tej pory – skracanie tekstu w jednej linii.

⚔️ Druga część poradnika prezentuje sposób na ucinanie rozbudowanego bloku tekstowego bez stosowania skomplikowanych zabiegów.

https://webroad.pl/html5-css3/6622-automatyczne-skracanie-tekstu-w-css
#webroad

Byte My Code Online: spotkaj światowej sławy ekspertów IT już 12 grudnia

Zbliża się czwarta edycja konferencji Byte My Code Online 2020! W tym roku uczestnicy spotkają się w wirtualnym świecie, a tematem przewodnim edycji będzie: Współczesny Inżynier rok później: innowacyjna adaptacja do #newnormal. Na cyfrowej scenie wystąpią światowej sławy gwiazdy IT.

#bytemycode 2020 to seria technicznych, praktycznych rozmów na temat uczenia maszynowego, sztucznej inteligencji, chmury, nauki o danych i rozwojuPokaż całość

Od Alpha do Beta w pół roku? Nieźle! Czekamy na Bootstrap 5
Nareszcie pojawiła się pierwsza beta #bootstrap 5. Poza wcześniej już opisywanymi nowościami pojawiło się kilka nowych udogodnień oraz szereg mniejszych i większych zmian. Pojawiło się również wsparcie dla tekstu pisanego od prawej do lewej strony.
https://webroad.pl/inne/7783-od-alpha-do-beta-w-pol-roku-niezle-czekamy-na-bootstrap-5
#webroad

Mirror katalogu z serwera zdalnego przez LFTP
Zajmowałem się nie tak dawno przenoszeniem dość dużej aplikacji na nowy serwer. Cały proces zajął ostatecznie kilka dni. Jednak aby samo przełączenie użytkowników do pracy w nowym środowisku odbyło się możliwie bez przerw, największą przeszkodą do pokonania stało się utrzymanie magazynu załączników w aktualnym stanie. Postanowiłem na bieżąco pobierać zmiany z bieżącego środowiska do nowego za pomocą zautomatyzowanego połączenia SFTP za pomocą LFTP.

Post: MirrorPokaż całość

Supervisior – kontrola procesów na przykładzie działania kolejki w Laravelu
Supervisor wykorzystuję do pilnowania kolejek zadań w aplikacjach webowych, jednak może on kontrolować w zasadzie każdy proces w systemie operacyjnym. Dzisiejszy post poświęciłem w całości na instalację Supervisora na CentOS 8 oraz konfigurację do współpracy z frameworkiem #php #laravel.

Import dużej bazy danych MySQL (MariaDB) za pomocą CLI
Kiedy baza danych zaczyna się rozrastać, ciężkie staje się używanie GUI (np. #phpmyadmin) podczas importów wielkich bazodanowych zrzutów. Na szczęście można użyć do tego #cli. Życie od razu staje się prostsze.

#webroad #mysql #mariadb

Przetwarzanie mowy na tekst za pomocą Web Speech API

Można powoli myśleć o sterowaniu witryną internetową za pomocą głosu. W przyszłości pozwoli to podnieść dostępność stron internetowych dla osób z ograniczeniami.

Zaciekawiły mnie możliwości, jakie daje #webspeechapi. Ostatnio napisałem o przetwarzaniu mowy na tekst, więc naturalnym kierunkiem będzie sprawdzenie odwrotności tego procesu – przetwarzanie tekstu na mowę. Niestety, jeśli chodzi o kompatybilność, realnie działa to jedynie na stacjonarnym i mobilnym GooglePokaż całość

Web Speech API - nawigacja na stronie z audiodeskrypcją
Zaprzyjaźniałem się ostatnio z możliwościami #webspeechapi przy okazji tworzenia nawigacji po aplikacji webowej. Konieczna była funkcjonalność odczytująca opisy aktywnych elementów. Posłużyłem się w tym celu interfejsem SpeechSynthesis, który jest już obecnie dość dobrze wspierany przez wiodące przeglądarki. Przyjąłem, że powinienem brać pod uwagę te elementy, które posiadają niepsute atrybuty aria-label, aria-labelledby lub aria-describedby. Dodatkowo chciałem, aby obsługiwane były również formularzePokaż całość