Skill Blog: Веб-разработка
前往频道在 Telegram
605
订阅者
无数据24 小时
-17 天
-1130 天
正在加载数据
吸引订阅者
十月 '2610月 '26
十月 '260
在0个频道中
九月 '260
在0个频道中
Get PRO
八月 '260
在0个频道中
Get PRO
七月 '260
在0个频道中
Get PRO
六月 '260
在0个频道中
Get PRO
五月 '260
在0个频道中
Get PRO
四月 '260
在0个频道中
Get PRO
三月 '260
在0个频道中
Get PRO
二月 '260
在0个频道中
Get PRO
一月 '260
在0个频道中
Get PRO
十二月 '250
在0个频道中
Get PRO
十一月 '250
在0个频道中
Get PRO
十月 '250
在0个频道中
Get PRO
九月 '250
在0个频道中
Get PRO
八月 '250
在0个频道中
Get PRO
七月 '250
在0个频道中
Get PRO
六月 '250
在0个频道中
Get PRO
五月 '250
在0个频道中
Get PRO
四月 '25
+2
在0个频道中
Get PRO
三月 '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个频道中
频道帖子
👩💻 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 |
