Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

6 sztuczek frontendowych, których znacznie ułatwią Ci pracę

Mehdi Aoussiad Front-End Web Developer / Freelance
Poznaj 6 sztuczek, dzięki którym praca na frontendzie będzie o wiele sprawniejsza i prostsza.
6 sztuczek frontendowych, których znacznie ułatwią Ci pracę

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

Rozpocznij dyskusję

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej