Skill Blog: Веб-разработка
Open in Telegram
Полезный материал по веб-разработке. Админ: @cyberwatermelon
Show more605
Subscribers
No data24 hours
-17 days
-1130 days
Data loading in progress...
Similar Channels
No data
Any problems? Please refresh the page or contact our support manager.
Tags Cloud
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
April '25
April '25
+2
in 0 channels
March '25
+5
in 0 channels
Get PRO
February '25
+11
in 0 channels
Get PRO
January '25
+23
in 0 channels
Get PRO
December '24
+16
in 0 channels
Get PRO
November '24
+14
in 0 channels
Get PRO
October '24
+12
in 0 channels
Get PRO
September '24
+20
in 0 channels
Get PRO
August '24
+29
in 0 channels
Get PRO
July '24
+20
in 0 channels
Get PRO
June '24
+26
in 0 channels
Get PRO
May '24
+16
in 0 channels
Get PRO
April '24
+39
in 0 channels
Get PRO
March '24
+49
in 0 channels
Get PRO
February '24
+69
in 0 channels
Get PRO
January '24
+13
in 0 channels
Get PRO
December '23
+11
in 0 channels
Get PRO
November '23
+15
in 0 channels
Get PRO
October '23
+15
in 0 channels
Get PRO
September '23
+27
in 0 channels
Get PRO
August '23
+31
in 0 channels
Get PRO
July '23
+28
in 0 channels
Get PRO
June '23
+34
in 0 channels
Get PRO
May '23
+53
in 0 channels
Get PRO
April '23
+36
in 0 channels
Get PRO
March '23
+20
in 0 channels
Get PRO
February '23
+20
in 0 channels
Get PRO
January '23
+17
in 0 channels
Get PRO
December '22
+19
in 0 channels
Get PRO
November '22
+20
in 0 channels
Get PRO
October '22
+25
in 0 channels
Get PRO
September '22
+214
in 0 channels
| Date | Subscriber Growth | Mentions | Channels | |
| 02 April | +1 | |||
| 01 April | +1 |
Channel Posts
👩💻 JS Трюк: Для одновременного перебора индексов и значений массива
🟡 Конечно, существует метод .forEach(), но этот трюк предназначен для тех случаев, когда приходится использовать классический цикл for
Метод .entries() возвращает двумерный массив, где первый элемент в каждом подмассиве - это индекс, а второй - само значение. Мы можем использовать деструктурирующее присваивание, чтобы получить эти значения в двух переменных
| 2 |  +1👩💻 Событие beforeunload
Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу
Событие происходит перед событием выгрузки страницы unload
Обработка через определение onbeforeunload на объекте window:
window.onbeforeunload = () => false
Подробнее:
🟡MDN
🟡Doka | 184 |
| 3 | ![Метод для возврата элемента массива по указанному индексу Он действует почти как скобочная запись array[index], за исключение](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo+AjIqgtObDoKrarYqMyP/L2u71////m8H////6/+b9//j/2wBDASstLTw1PHZBQXb4pYyl+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj/wAARCAAoACQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDSdip4B/75zSbm/wAqaHCkgtnPsTTNkY/v/wDfRqhkqtnjBz9MU6oNkf8Atf8AfRpybI/u559STQBLRSbvaiiwDSB0Jo2rzyeKcSB1IFJvXpnrTATYM4yaa21eeTUmRn9KCAeoBouAgAIBz1op1FIAooooAKKKKACiiigD/9k=){kind=small} Метод для возврата элемента массива по указанному индексу
Он действует почти как скобочная запись array[index], за исключением того, что индекс может быть отрицательным | 219 |
| 4 |  Единица turn
Позволяет определять угол в оборотах. 1turn, соответственно, равен одному обороту или 360 градусам.
Удобно использовать в анимации и трансформации элементов, когда требуется повернуть элемент на один или несколько оборотов | 202 |
| 5 |  overAPI - этот ресурс содержит огромное количество различных шпаргалок по самым популярным технологиям
⛓ Ссылка: тут | 202 |
| 6 |  +7CSS Container Queries: Современный подход к адаптиву
Контейнерные Запросы - это передовая функция CSS, поддерживаемая 91.65% браузеров
Они позволяют нам применять стили к элементам на основе условий, касающихся размеров контейнера. Это делается с помощью правила @container, которое работает аналогично медиазапросам, но ориентировано на размеры контейнера, а не окна просмотра | 286 |
| 7 |  Web Developer Checklist - интересный сервис для веб-разработчика, который поможет по пунктам проверить готовность проекта к запуску
Доступен в виде сайта и расширения
Ссылка: тут | 254 |
| 8 |  +5Notifications API в JS
Используется для настройки и отображения уведомлений на рабочий стол пользователя
Поскольку API уведомлений легко злоупотребить, по умолчанию он строго применяет две функции безопасности:
— Во-первых, пользователи должны явно согласиться получать уведомления для каждого источника
— Во-вторых, отправлять уведомления может только код, работающий в безопасном контексте (HTTPS) | 286 |
| 9 |  Простой эффект зума с помощью CSS
Здесь мы создаем обертку над реальным изображением, отключаем переполнение(overflow) на обертке и масштабируем изображения для достижения этого эффекта | 235 |
| 10 |  +5Пять интересных API на JavaScript для создания веб-сайтов, о которых вы (скорее всего) не знали | 210 |
| 11 |  CSS Click Chart - с помощью этого инструмента можно посмотреть, как реализуется то или иное действие на CSS. Также отображается поддержка браузерами
Ссылка: тут | 209 |
| 12 |  +1В типографике маленькие прописные буквы - это стиль или вариант шрифта, который похож на прописные, но имеет уменьшенную высоту, как у строчных букв. Такой способ изменения символов называется капителью
Как правило, он используется для создания акцента на участке текста
В CSS это можно включить с помощью свойства font-variant-caps, установив для него значение
✅ small-caps — включает капитель для строчных букв
✅ all-small-caps — включает капитель для строчных и прописных букв | 192 |
| 13 |  typescript-plugin-css-modules
Из коробки CSS Modules не поддерживают типизацию для классов, определенных в CSS-файлах. Но можно подключить этот плагин, который автоматически сгенерирует TypeScript типы на основе имен классов
В VS Code убедитесь, что используете версию TypeScript, которая установлена в вашем проекте, а не глобальную(Нажмите на версию TypeScript в правом нижнем углу и выберите "Use Workspace Version")
Ссылка: тут | 175 |
| 14 |  101 совет про React
Нашёл для вас полезную статью с советами и подсказками по React
Отличная вещь, которая пригодится при изучении React или для подготовки к собеседованию
Читать: ссылка | 167 |
| 15 |  Держите коллекцию советов профессионалов CSS
Нашел интересный репозиторий с полезными советами по CSS. Есть очевидные и не очень, нашел кое что новое и для себя. Например, не знал что можно сбросить все свойства элмента всего одной командой all: unset; Буду теперь знать)
Ссылка: GitHub | 224 |
| 16 |  Швейцарский нож для работы с массивами. Метод reduce()
Метод reduce сворачивает массив к одному значению (редуцирует) е с помощью переданной функции-колбэка и начального значения. Функция-колбэк будет вызвана для каждого элемента массива, и всегда должна возвращать результат | 181 |
| 17 |  +1Использование CSS-градиента для затемнения картинки
Одним из способов затемнения изображений с помощью CSS является использование градиентов. Этот метод позволяет более гибко настроить эффект, а также добавить различные переходы и цветовые комбинации
СSS:
background: linear-gradient(
to right,
rgb(0 0 0 / 0.5),
rgb(0 0 0 / 0)
), url("img.jpg") 100%/cover no-repeat; | 164 |
| 18 |  +4Подборка интересных трюков в VS Code
Советы, которые недостаточно велики для отдельного поста, но иногда очень могут пригодится | 169 |
| 19 |  +2Подборка 3-х суперполезных функциий в CSS
- Функция calc() позволяет производить математические вычисления прямо в CSS
- Функция clamp() позволяет ограничивать диапазон изменения некоего значения, задавая его нижний и верхний пределы
- CSS-свойство filter добавляет визуальные эффекты к элементам на странице и использует в качестве значений функции | 146 |
| 20 |  Логические свойства в CSS
Логические свойства привязаны не к сторонам экрана, а к направлению письма. Они задают отступы, рамки и позиционирование, опираясь на инлайновую (inline) и блочную (block) оси.
Инлайновая ось проходит в направлении, в котором пишется текст. Например, в тексте, написанном на русском или английском, инлайновая ось пройдёт слева направо, в тексте на арабском — справа налево, а в тексте на японском — сверху вниз.
Блочная ось идёт перпендикулярно инлайновой и имеет своё направление. Например, в тексте, написанном на японском — справа налево, а в монгольском — слева направо
Подробнее | 140 |
