6 sztuczek frontendowych, których znacznie ułatwią Ci pracę
Poznaj 6 sztuczek, dzięki którym praca na frontendzie będzie o wiele sprawniejsza i prostsza.
Development frontendowy jest teraz niezwykle istotny. Mamy naprawdę szeroki wachlarz zadań, które specjaliści w tej dziedzinie muszą codziennie wykonywać. Frontend Developerzy dużo pracują z HTML, CSS i JavaScriptem, a więc znajomość kilku przydatnych sztuczek może nam tutaj bardzo pomóc. Podzielę się więc tutaj takimi, których pewnie nie znacie.
1. Ukrywanie elementu HTML
Czy wiedziałeś, że możesz ukryć element HTML bez używania JS. Korzystając z atrybutu hidden
, możemy w prosty sposób ukryć dany element HTML w sposób natywny. W rezultacie nie będzie on wyświetlany na stronie internetowej.
Oto przykład kodu:
<p hidden>This paragraph won't show up. It's hidden by HTML.</p>
2. Skorzystaj ze skrótu inset w CSS
Skróty zawsze przydają się do zmniejszania rozmiaru kodu CSS. Właściwość inset
to użyteczny skrót dla czterech następujących właściwości: top
, left
, right
oraz bottom
. Jeśli te 4 właściwości mają taką samą wartość to, zamiast nich, możesz użyć właściwości inset
- Twój kod będzie dzięki temu o wiele czystszy.
Oto przykład:
Zła praktyka:
div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Dobra praktyka:
div{
position: absolute;
inset: 0;
}
3. Wykrywanie prędkości internetu
W JS można w prosty sposób wykryć prędkość internetu, używając obiektu navigator. Jest to bardzo proste.
Oto przykład:
navigator.connection.downlink;
Obraz należy do autora
Jak widać powyżej, mój wynik to 5.65 - prędkość mojego internetu więc nie powala.
4. Wyzwalanie wibracji telefonu
Możesz z łatwością użyć metody vibrate()
w obiekcie navigator, aby wyzwolić wibracje telefonu. Oto przykład:
//vibrating the device for 500 milliseconds
window.navigator.vibrate(500);
Jak widać, urządzenie to będzie wibrowało przez 500 milisekund.
5. Wyłącz pull to refresh
W CSS możliwe jest wyłączenie funkcji pull to refresh na urządzeniach mobilnych. Pozwala to na właściwość overscroll-behavior-y
- wystarczy, że dostarczysz jej wartość contain
.
Oto przykład:
body{
overscroll-behavior-y: contain;
}
6. Uniemożliwiaj użytkownikowi wklejanie tekstu
Być może pojawią się sytuacje, w których konieczne będzie uniemożliwienie użytkownikowi wklejania tekstów w inputy. Można to w prosty sposób osiągnąć w JS korzystając z paste event listener.
Oto przykład:
<input type="text"></input>
<script>
//selecting the input.
const input = document.querySelector('input');
//prevent the user to paste text by using the paste eventListener.
input.addEventListener("paste", function(e){
e.preventDefault()
})
</script>
W rezultacie użytkownicy nie będą mogli wklejać skopiowanego tekstu w polu input.
Podsumowanie
Jak widać, istnieje kilka prostych sztuczek, które na pewno Ci się teraz przydadzą. Mam nadzieję, że artykuł się Wam spodobał. Dziękuję za uwagę!
Oryginał tekstu w języku angielskim możesz przeczytać tutaj.