Π Π°Π±ΠΎΡΠ° ΠΌΠ΅ΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ πΌ

πΠΠ΅ΡΡΠ°Π΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Π‘Π±Π΅ΡΠ΅, Π½ΠΎ Π½Π΅ Ρ ΠΎΡΠ΅ΡΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡΡ Π΄Π΅ΡΡΡΡ ΠΊΡΡΠ³ΠΎΠ² HR-ΡΠΎΠ±Π΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΠΉ? Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠΎ ΠΏΡΠΎΡΠ΅, ΡΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ!
π‘AI-ΠΈΠ½ΡΠ΅ΡΠ²ΡΡ Π·Π° 15 ΠΌΠΈΠ½ΡΡ β ΠΈ ΡΡ ΡΠΆΠ΅ Π½Π° ΡΠ°Π³ Π±Π»ΠΈΠΆΠ΅ ΠΊ ΡΠ²ΠΎΠ΅ΠΉ Π½ΠΎΠ²ΠΎΠΉ ΡΠ°Π±ΠΎΡΠ΅.
ΠΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡΡΠ΅Ρ?
π ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΡ
π ΠΡΠΎΠΉΠ΄ΠΈ AI-ΠΈΠ½ΡΠ΅ΡΠ²ΡΡ
π ΠΠΎΠ»ΡΡΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠ²ΡΠ·Ρ ΡΡΠ°Π·Ρ ΠΆΠ΅!
HR Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΡΠ½ΡΡ Π²ΡΠ΅ΠΌΡ β ΡΠ΅ΠΊΡΡΡΠ΅ΡΡ ΡΠ²ΡΠΆΡΡΡΡ Ρ ΡΠΎΠ±ΠΎΠΉ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π²ΡΡ Π΄Π½Π΅ΠΉ! π
Π Π΅ΠΊΠ»Π°ΠΌΠ°. ΠΠΠ Π‘ΠΠΠ ΠΠΠΠ, ΠΠΠ 7707083893. Erid 2VtzquscAwp
1. ΠΡΡΡΡΠΎ ΡΠΊΡΡΡΡ
Π§ΡΠΎΠ±Ρ ΡΠΏΡΡΡΠ°ΡΡ DOM-ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ JavaScript, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ HTML-Π°ΡΡΠΈΠ±ΡΡΠ° hidden
. ΠΡΡΠ΅ΠΊΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Ρ display: none
, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΈΡΡΠ΅Π·Π°Π΅Ρ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ.
<p hidden>ΠΡΠΎΡ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ Π½Π΅ Π²ΠΈΠ΄Π΅Π½ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΎΠ½ ΡΠΏΡΡΡΠ°Π½ ΠΈΠ· HTML.</p>
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠΊ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
2. ΠΡΡΡΡΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ
ΠΡ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ inset? ΠΡΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ Π²ΡΠ΅ΠΌ Π·Π½Π°ΠΊΠΎΠΌΡΡ
top
, left
, right
ΠΈ bottom
. ΠΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ Ρ ΠΊΡΠ°ΡΠΊΠΈΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° margin
ΠΈΠ»ΠΈ padding
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ Π²ΡΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΎΠΉ.
// ΠΠΎ
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
// ΠΠΎΡΠ»Π΅
div {
position: absolute;
inset: 0;
}
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΡΠ°ΡΠΊΠΈΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° CSS-ΡΠ°ΠΉΠ»Π°, ΠΈ ΠΊΠΎΠ΄ ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠΈΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, ΡΡΠΎ inset β ΡΡΠΎ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΎΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°Π΅Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΈΡΡΠΌΠ°. Π’ΠΎ Π΅ΡΡΡ Π΅ΡΠ»ΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ·ΡΠΊ Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ rtl, ΡΠΎ Π»Π΅Π²ΠΎ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ.
3. Π£Π·Π½Π°ΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΠ· ΠΊΠΎΠ΄Π° Π½Π° JavaScript Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ° navigator
.
navigator.connection.downlink;

Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π΅ ΠΎΡΠ΅Π½Ρ :) Π‘ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠ΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° Π²ΡΠ΅Π³ΠΎ 5,65 ΠΌΠ±/ΡΠ΅ΠΊ.
4. ΠΠΊΠ»ΡΡΠΈΡΡ Π²ΠΈΠ±ΡΠ°ΡΠΈΡ Π½Π° ΡΠΌΠ°ΡΡΡΠΎΠ½Π΅
ΠΠ°, ΡΠ°ΠΊ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ. ΠΠ΅ΡΠΎΠ΄ vibrate() ΠΎΠ±ΡΠ΅ΠΊΡΠ° window.navigator
ΠΌΠΎΠΆΠ΅Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ΅ΠΆΠΈΠΌ Π²ΠΈΠ±ΡΠ°ΡΠΈΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅.
window.navigator.vibrate(500);
ΠΠ΅ΡΠΎΠ΄Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ β Π²ΡΠ΅ΠΌΡ Π²ΠΈΠ±ΡΠ°ΡΠΈΠΈ Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ . Π ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΄Π°ΠΆΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½ β ΡΠ΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠ² Π²ΠΈΠ±ΡΠ°ΡΠΈΠΈ ΠΈ ΠΏΠ°ΡΠ·. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΠΉΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΌΠ°ΡΡΠΈΠ² ΡΠΈΡΠ΅Π».
5. ΠΠ°ΠΏΡΠ΅ΡΠΈΡΡ pull-to-refresh
Pull-to-refresh (ΠΏΠΎΡΡΠ½ΠΈ Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ) β ΡΡΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΠΏΠ°ΡΡΠ΅ΡΠ½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΡΠ»ΠΈ ΠΎΠ½ Π²Π°ΠΌ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ, ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΏΡΠ΅ΡΠΈΡΠ΅ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° overscroll-behavior-y ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ contain
.
body {
overscroll-behavior-y: contain;
}
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ ΠΎΠΊΠΎΠ½ β ΠΎΠ½ΠΎ Π·Π°ΠΏΡΠ΅ΡΠ°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ Π²Π°ΡΡΠ²Π°ΡΡ ΡΠΊΡΠΎΠ»Π» Π½Π° ΡΠ΅Π±Ρ ΠΏΡΠΈ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΠΈ Π³ΡΠ°Π½ΠΈΡΡ.
6. ΠΠ°ΠΏΡΠ΅ΡΠΈΡΡ Π²ΡΡΠ°Π²Π»ΡΡΡ ΡΠ΅ΠΊΡΡ
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°Ρ
ΠΎΡΠΈΡΠ΅ Π·Π°ΠΏΡΠ΅ΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΡΠ°Π²Π»ΡΡΡ Π² ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π° ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΎΡΠΊΡΠ΄Π°-ΡΠΎ ΡΠ΅ΠΊΡΡ (Ρ
ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅, ΡΡΠΎΠΈΡ Π»ΠΈ ΠΎΠ½ΠΎ ΡΠΎΠ³ΠΎ). ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΡΠ»Π΅Π΄ΠΈΠ² ΡΠΎΠ±ΡΡΠΈΠ΅ paste
ΠΈ Π²ΡΠ·Π²Π°Π² Π΅Π³ΠΎ ΠΌΠ΅ΡΠΎΠ΄ preventDefault()
.
<input type="text"></input>
<script>
const input = document.querySelector('input');
input.addEventListener("paste", function(e){
e.preventDefault()
})
</script>
Π£ΠΏΡ, ΡΠ΅ΠΏΠ΅ΡΡ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΠΊΠΎΠΏΠΈΠΏΠ°ΡΡΠΈΡΡ, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΠΈΡΠ°ΡΡ Π²Π²ΠΎΠ΄ΠΈΡΡ Π²ΡΠ΅ ΡΡΠΊΠ°ΠΌΠΈ.
ΠΡΠΈ ΠΏΡΠΈΠ΅ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ, Π½ΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π² ΡΡΠ΄Π΅ ΡΠΈΡΡΠ°ΡΠΈΠΉ. ΠΠ°Π΄Π΅Π΅ΠΌΡΡ, Π²Ρ Π½Π°ΡΠ»ΠΈ ΡΡΠΎ-ΡΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ Π΄Π»Ρ ΡΠ΅Π±Ρ.
ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
ΠΠ°Π΄ΠΎ Π±ΡΡΡ ΠΌΡ.Π΄Π°.ΠΊΠΎΠΌ,ΡΡΠΎΠ±Ρ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅.ΠΠ΅ΡΠ½ΡΡΡ ΡΡΠΎ ΡΠΌΠΎΠΆΠ΅Ρ Π»ΡΠ±ΠΎΠΉ ΡΠΊΠΎΠ»ΡΠ½ΠΈΠΊ, Π° Π²ΠΎΡ ΡΠ°ΠΉΡ ΠΈΠ΄Π΅Ρ Π² Π΅.Π±Ρ.ΡΠΈΠΉ Π±Π°Π½.