15 июля 2021

πŸ›  6 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ², ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅

Frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π² Foquz. https://www.cat-in-web.ru/
НСбольшая ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° малоизвСстных Ρ‚Π΅Ρ…Π½ΠΈΠΊ для HTML, CSS ΠΈ JavaScript.
1
πŸ›  6 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ², ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅

Π Π°Π±ΠΎΡ‚Π° ΠΌΠ΅Ρ‡Ρ‚Ρ‹ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ πŸ’Ό

Π Π°Π±ΠΎΡ‚Π° Π² Π‘Π±Π΅Ρ€Π΅: ΠΏΡ€ΠΎΠΉΠ΄ΠΈ собСсСдованиС ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈ ΠΎΡ„Ρ„Π΅Ρ€ Π·Π° 15 ΠΌΠΈΠ½ΡƒΡ‚

πŸ’­ΠœΠ΅Ρ‡Ρ‚Π°Π΅ΡˆΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Π‘Π±Π΅Ρ€Π΅, Π½ΠΎ Π½Π΅ Ρ…ΠΎΡ‡Π΅ΡˆΡŒ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π΄Π΅ΡΡΡ‚ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠ² HR-собСсСдований? Π’Π΅ΠΏΠ΅Ρ€ΡŒ это ΠΏΡ€ΠΎΡ‰Π΅, Ρ‡Π΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ!

πŸ’‘AI-ΠΈΠ½Ρ‚Π΅Ρ€Π²ΡŒΡŽ Π·Π° 15 ΠΌΠΈΠ½ΡƒΡ‚ – ΠΈ Ρ‚Ρ‹ ΡƒΠΆΠ΅ Π½Π° шаг Π±Π»ΠΈΠΆΠ΅ ΠΊ своСй Π½ΠΎΠ²ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅.

Как ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ„Ρ„Π΅Ρ€?
πŸ“Œ ЗарСгистрируйся
πŸ“Œ ΠŸΡ€ΠΎΠΉΠ΄ΠΈ AI-ΠΈΠ½Ρ‚Π΅Ρ€Π²ΡŒΡŽ
πŸ“Œ ΠŸΠΎΠ»ΡƒΡ‡ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь сразу ΠΆΠ΅!

HR большС Π½Π΅ тянут врСмя – Ρ€Π΅ΠΊΡ€ΡƒΡ‚Π΅Ρ€Ρ‹ свяТутся с Ρ‚ΠΎΠ±ΠΎΠΉ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π΄Π²ΡƒΡ… Π΄Π½Π΅ΠΉ! πŸš€

Π Π΅ΠΊΠ»Π°ΠΌΠ°. ПАО Π‘Π‘Π•Π Π‘ΠΠΠš, ИНН 7707083893. Erid 2VtzquscAwp


Π€Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ – это пСрвая линия ΠΎΠ±ΠΎΡ€ΠΎΠ½Ρ‹ Π²Π΅Π±-сайта (ΠΈΠ»ΠΈ, Ρ‚ΠΎΡ‡Π½Π΅Π΅, пСрвая линия "нападСния" Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ), поэтому Ρƒ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅Ρ€ΠΎΠ² всСгда ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ΠΌΠ½ΠΎΠΆΠΊΠΎ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ ΠΈΠΌ Тизнь, ΠΌΡ‹ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Π»ΠΈ нСсколько ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ…, Π½ΠΎ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠΎ извСстных HTML, CSS ΠΈ JavaScript-ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ².

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;
    
πŸ›  6 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ², ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ :) Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΌΠΎΠ΅Π³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° всСго 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>
    

Упс, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ получится ΠΊΠΎΠΏΠΈΠΏΠ°ΡΡ‚ΠΈΡ‚ΡŒ, придСтся ΠΏΠΈΡΠ°Ρ‚ΡŒ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ всС Ρ€ΡƒΠΊΠ°ΠΌΠΈ.

***

Π­Ρ‚ΠΈ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ часто, Π½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ Π² рядС ситуаций. НадССмся, Π²Ρ‹ нашли Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ интСрСсноС для сСбя.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊΠΈ

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

 
 
16 июля 2021

Надо Π±Ρ‹Ρ‚ΡŒ ΠΌΡƒ.Π΄Π°.ΠΊΠΎΠΌ,Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ клавиши Π½Π° сайтС.Π’Π΅Ρ€Π½ΡƒΡ‚ΡŒ это смоТСт любой школьник, Π° Π²ΠΎΡ‚ сайт ΠΈΠ΄Π΅Ρ‚ Π² Π΅.Π±Ρƒ.Ρ‡ΠΈΠΉ Π±Π°Π½.

Π›Π£Π§Π¨Π˜Π• БВАВЬИ ПО Π’Π•ΠœΠ•

LIVE >

Подпишись

Π½Π° push-увСдомлСния