28.07.20212 min

Mehdi AoussiadFront-End Web Developer

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.

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

<p>Loading...</p>

Powiązane artykuły

Dziel się wiedzą ze 160 tysiącami naszych czytelników

Zostań autorem Readme

Divante

Senior Vue.js Developer

senior

15 300 - 23 500 PLN

Kontrakt B2BUmowa o pracę

Wrocław

Praca zdalna 100%

Ważna do 13.03.2022

Dobrze
JavaScriptTypeScriptVue.js

T-Mobile Polska S. A.

Frontend Developer

medium

Brak widełek

Kontrakt B2B

Warsaw

Ważna do 26.02.2022

Bardzo dobrze
ReactReduxNode.js

Miinto

(Senior) Frontend Developer - JavaScript (remote)

senior

20 000 - 25 000 PLN

Kontrakt B2BUmowa o pracę

Praca zdalna 100%

Ważna do 12.03.2022

Bardzo dobrze
JavaScript VueJSHTML

Sofomo

React Mid Developer

medium

9 000 - 14 000 PLN

Kontrakt B2B

Praca zdalna 100%

Ważna do 12.03.2022

Dobrze
ReactReduxWebpack
Początkująco
Node.js

Edrone

Junior Frontend Engineer

junior

Brak widełek

Kontrakt B2BUmowa o pracę

Praca zdalna 100%

Ważna do 25.02.2022

Początkująco
JavaScript
Dobrze
HTML/CSS

Asseco Business Solutions

Młodszy programista frontend

junior

Brak widełek

Umowa o pracę

Lublin

Praca zdalna 100%

Ważna do 25.02.2022

Dobrze
JavaScriptHTMLCSS
Początkująco
.NETC#MS SQL

Accenture Polska

Front-End Tech Lead

senior

Brak widełek

Umowa o pracę

Praca zdalna 100%

Ważna do 24.02.2022

Bardzo dobrze
JavaScriptTypeScript
Dobrze
React/React Native/Node.js/Next.js
Początkująco
SassMongoDBAzure

Accenture Polska

Programista Front-End

medium

Brak widełek

Umowa o pracę

Praca zdalna 100%

Ważna do 24.02.2022

Dobrze
JavaScriptAngular/React/React Native
Początkująco
Node.js

DOZ S.A.

Front-End Developer

senior

Znamy widełki

Kontrakt B2BUmowa o pracę

Warsaw

Ważna do 24.02.2022

Bardzo dobrze
Java Script - ES6, HTML5, CSS3Webpack oraz Sass/SCSS/Flex

DOZ S.A.

Front-End Developer

senior

Znamy widełki

Kontrakt B2BUmowa o pracę

Warsaw

Ważna do 24.02.2022

Bardzo dobrze
Java Script - ES6, HTML5, CSS3Webpack oraz Sass/SCSS/Flex