Skill Blog: Веб-разработка
Открыть в Telegram
Полезный материал по веб-разработке. Админ: @cyberwatermelon
Больше605
Подписчики
Нет данных24 часа
-17 дней
-1130 дней
Загрузка данных...
Похожие каналы
Нет данных
Возникли проблемы? Пожалуйста, обновите страницу или обратитесь к нашему support-менеджеру .
Облако тегов
Входящие и исходящие упоминания
---
---
---
---
---
---
Привлечение подписчиков
апрель '25
апрель '25
+2
в 0 каналах
март '25
+5
в 0 каналах
Get PRO
февраль '25
+11
в 0 каналах
Get PRO
январь '25
+23
в 0 каналах
Get PRO
декабрь '24
+16
в 0 каналах
Get PRO
ноябрь '24
+14
в 0 каналах
Get PRO
октябрь '24
+12
в 0 каналах
Get PRO
сентябрь '24
+20
в 0 каналах
Get PRO
август '24
+29
в 0 каналах
Get PRO
июль '24
+20
в 0 каналах
Get PRO
июнь '24
+26
в 0 каналах
Get PRO
май '24
+16
в 0 каналах
Get PRO
апрель '24
+39
в 0 каналах
Get PRO
март '24
+49
в 0 каналах
Get PRO
февраль '24
+69
в 0 каналах
Get PRO
январь '24
+13
в 0 каналах
Get PRO
декабрь '23
+11
в 0 каналах
Get PRO
ноябрь '23
+15
в 0 каналах
Get PRO
октябрь '23
+15
в 0 каналах
Get PRO
сентябрь '23
+27
в 0 каналах
Get PRO
август '23
+31
в 0 каналах
Get PRO
июль '23
+28
в 0 каналах
Get PRO
июнь '23
+34
в 0 каналах
Get PRO
май '23
+53
в 0 каналах
Get PRO
апрель '23
+36
в 0 каналах
Get PRO
март '23
+20
в 0 каналах
Get PRO
февраль '23
+20
в 0 каналах
Get PRO
январь '23
+17
в 0 каналах
Get PRO
декабрь '22
+19
в 0 каналах
Get PRO
ноябрь '22
+20
в 0 каналах
Get PRO
октябрь '22
+25
в 0 каналах
Get PRO
сентябрь '22
+214
в 0 каналах
| Дата | Привлечение подписчиков | Упоминания | Каналы | |
| 02 апреля | +1 | |||
| 01 апреля | +1 |
Посты канала
👩💻 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 |
