Тонна живых подписчиков по 15р

Подключайся к рекламной платформе и расти свой канал

Делай от 1к подписчиков ежедневно

Подключайся к рекламной платформе и расти свой канал

Продаётся канал l Психология l

23 890 пдп, доход 48 000 в месяц, цена 59 000 рублей

Статистика Избранное

Даня про Frontend👨🏻‍💻

Гео и язык канала: Беларусь, Русский

Категория: Технологии

📝 Заметки 📑 Статьи 📰 Новости 📚 Книги 📹 Видео из мира Frontend и не только
Связаться: @dananaprey

Связанные каналы

Гео и язык канала

Беларусь, Русский

Категория

Технологии

Статистика

Избранное

Фильтр публикаций

Скрывать удаленные

Скрывать репосты

Даня про Frontend👨🏻‍💻

20 Dec, 09:01

CSS white-space ✍🏻

Недавно мне пришлось заставить Materia Design tooltip переносить текст внутри себя

Необходимо было сделать 2 шага:
1) В текст подсказки пришлось добавить символы перевода строки \n
2) Тексту подсказки пришлось добавить свойство white-space: pre-wrap

После этого я решил закрепить это свойство с помощью данного поста 📑

⚠️ Свойство управляет пробельными символами внутри элемента

Значения:
normal - несколько пробелов объединяются в один, переносы строк заменяются пробелами
nowrap - поведение идентично normal, но текст выводится в одну строку
pre - сохраняется форматирование HTML, включая переносы и несколько пробелов, текст может выйти за границы элемента
pre-wrap - поведение идентично pre, но текст не выходит за границы элемента
pre-line - пробелы объединяются в один, форматирование HTML сохраняется, текст не выходит за границы элемента
break-spaces - поведение идентично pre-wrap, но несколько пробелов после крайнего слова переносятся с учётом ширины строки

Документация

#заметки #css

14 0 1 3

Даня про Frontend👨🏻‍💻

15 Dec, 10:02

Знай свой инструмент 👨🏻‍💻

Недавно возникла необходимость найти все кириллические символы в коде приложения и на помощь пришла моя IDE - WebStorm

Всё без проблем нашлось, даже разделилось на блоки (код, комментарии, файлы конфигурации), в общем, очень удобно!

Знать о существовании такой возможности точно стоит, когда-нибудь пригодится

Документация (выше по дереву документации раздел поиска и замены)

#заметки

35 0 0 2

Даня про Frontend👨🏻‍💻

12 Dec, 10:30

Hydration (Гидратация) – процесс восстановления разметки, пришедшей с сервера на клиенте 👨🏻‍💻

В случае отсутствия гидратации при включенном SSR при получении новой разметки вся страница подвергается перерисовке

Это не самый оптимальный вариант, так как он ухудшает показатели и UX (страница теряет состояние, может возникнуть ситуация, в которой для обновления маленькой части страницы необходимо перерисовать её полностью)

При включении гидратации происходит оптимизация процесса перерисовки приложения за счёт навешивания слушателей на DOM-узлы. При получении разметки, перерисованы будут только те части, которые действительно изменились

Ограничения:
- DOM на клиенте и сервере должен быть одинаковым (если мы используем DOM API в коде, это может стать причиной ошибок гидратации)
- HTML должен быть валидным (иначе будут ошибки гидратации)

Гидратацию можно отключить для конкретного компонента (отключится и у дочерних)

Документация

#заметки #angular

42 0 0 3

Даня про Frontend👨🏻‍💻

7 Dec, 11:06

Подборка докладов с различных мероприятий 🎤👨🏻‍💻

1️⃣ Доклад о том, как команда Яндекс Go оптимизировала своё веб-приложение

2️⃣ Доклад о том, как 5 минут рефакторинга каждый день позволят сделать вашу жизнь и жизнь вашего репозитория намного лучше и чище (тайминг 35:00 - 59:55)

3️⃣ Доклад про то, как команда Samokat.tech (сейчас ecom.tech) создавала платформу и переносила не неё десятки своих проектов

#видео

49 0 0 4

Даня про Frontend👨🏻‍💻

29 Nov, 09:38

Вечная дилемма: ::before vs :before. Как правильно? 🤔

Правильно писать ::before и никак иначе ⚠️

В старых спецификациях CSS (Level 1/2) поддерживался синтаксис с одним символом двоеточия для 4 псевдоэлементов (:before, :after, :first-line, :first-letter)

Начиная со спецификации CSS 2.1 появилось чёткое раграничение синтаксиса псевдоклассов (:hover) и псевдоэлементов (::before)

До момента выхода спецификации 2.1 было написано множество сайтов со старым синтаксисом и для обратной совместимости 4 псевдоэлемента поддерживают старый синтаксис, но такое написание является некорректным

Источник: хороший доклад Никиты Дубко о CSS селекторах

#заметки #видео #css

62 0 0 5

Даня про Frontend👨🏻‍💻

22 Nov, 09:30

Начальное значение метода .reduce() 👨🏻‍💻

При использовании метода массива .reduce(), который необходим для того, чтобы применить к каждому элементу массива некую функцию и вернуть одно результирующее значение, мы можем передать второй необязательный агрумент - начальное значение initialValue

Пример:
[12, 2].reduce((acc, el) => acc += el, 3); // 17

Если аргумент не передан:
1) Значение acc будет равным первому значению массива, а значение el будет равным второму значению массива
2) Когда массив состоит из одного элемента, результат будет возвращён без вызова функции
3) Когда массив пуст, будет получена ошибка TypeError

Если аргумент передан:
1) Значение acc будет равным значению аргумента, а значение el будет равным первому значению массива
2) Когда массив состоит из одного элемента, результат будет возвращён после вызова функции
3) Когда массив пуст, данный аргумент вернётся без вызова функции

В комментарии описана особенность initialValue при специфичной реализации

Документация

#заметки #javascript

69 0 0 2 3

Даня про Frontend👨🏻‍💻

17 Nov, 09:30

«Вы не знаете JS: Прототипы объектов и this», Кайл Симпсон 📓

Третья книга из серии "Вы не знаете JS", которую я хочу порекомендовать (первая, вторая)

В этой части вы сможете очень хорошо понять, что такое this, каким поведением он обладает и какие 4 типа связывания this существует и как их различать, рассмотрите всё, что вам нужно знать про объекты, их дескрипторы свойств и внутреннее устройство и, получив эти знания, поймёте что такое прототипы и как они работают

Автор очень подробно описывает многие вещи, они могут быть не понятны после первого прочтения, но если закрепить материал книги, это позволит очень сильно прокачать свои знания 🤓

🇷🇺 Скачать на русском (внутри файл, состоящий из двух частей, данный пост посвящён второй части, пост про первую часть книги)

#книги #разработка

62 0 2 1 3

Даня про Frontend👨🏻‍💻

12 Nov, 19:19

Angular 19 is coming 🚀

Команда Angular покажет 19 версию 19 ноября в 20:00 мск на своём канале

#новости

416 0 3 3

Даня про Frontend👨🏻‍💻

9 Nov, 10:15

Подборка докладов с различных мероприятий 🎤👨🏻‍💻

1️⃣ Доклад о том, как команда Яндекс Go столкнулась с тем, что их темизация не работает как надо и что они предприняли, чтобы её улучшить

2️⃣ Доклад о том, как можно измерять и оптимизировать энергопотребление мобильного приложения

3️⃣ Доклад про базовые принципы безопасности веб-приложений

#видео

84 0 0 3

Даня про Frontend👨🏻‍💻

4 Nov, 10:01

Программное выделение текста с помощью setSelectionRange 🖍

Если вам необходимо программно выделить часть текста, который находится в поле ввода, можно воспользоваться методом setSelectionRange

method(): void {
htmlInputElement.setSelectionRange(0, 15, 'forward');
}

Параметры:
selectionStart - индекс первого выделенного символа
selectionEnd - индекс символа после последнего выделенного символа
selectionDirection? - строка, определяющая направление произведённого выделения

Документация

#заметки

83 0 1 1 4

Даня про Frontend👨🏻‍💻

29 Oct, 09:01

I, T и M-shaped специалисты: что это за классификация? 🤔

Иногда встречал формулировки вида "Я M-shape специалист, я знаю о чём говорю", но не понимал, что это значит и не обзывательство ли это 😁

После некоторых разбирательств я понял, что являюсь T-shape специалистом, а хорошо это или нет, не знаю

Статья, которая помогла мне лучше понять, что это за люди и почему они себя так называют 📑

#статья

75 0 0 3

Даня про Frontend👨🏻‍💻

24 Oct, 10:35

Big O Notation 📈

Нотация “О-большое” показывает скорость выполнения алгоритма (как увеличивается время выполнения алгоритма с ростом входных данных)

Функция O(количество операций) определяет время выполнения алгоритма в худшем случае

Для чего это нужно? 🤔
Для того, чтобы выбрать оптимальную структуру данных или алгоритм

Когда стоит обратить внимание? 🤔
При работе с большими объёмами данных, частые вычисления в реальном времени, сортировка, поиск, фильтрация

Хорошая статья, которая позволит лучше разобраться в этой теме 📑

#статья

81 0 1 3

Даня про Frontend👨🏻‍💻

19 Oct, 10:01

Подборка докладов с различных мероприятий 🎤👨🏻‍💻

1️⃣ Доклад о том, как команда Яндекс Такси научилась реалистично проверять готовность сервиса к повышенным нагрузкам

2️⃣ Доклад о том, как создаются схемы движения общественного транспорта, навигация в торговых центрах и так далее

3️⃣ Доклад про внутреннюю работу таких механизмов браузера как Event loop и Compositing

#видео

84 0 0 4

Даня про Frontend👨🏻‍💻

15 Oct, 09:02

Множественная проекция контента в Angular c помощью ng-content 👨🏻‍💻

Для того, чтобы передать в дочерний компонент html-разметку мы можем воcпользоваться механизмом ng-content

Дочерний компонент:

Родительский компонент:

Surprise from parent!

Но очень часто появляется необходимость передать несколько таких кусков разметки и вставить их в разные места, такая возможность тоже есть

Дочерний компонент:

Родительский компонент:

Named surprise from parent!

С помощью данного механизма можно делать, например, переиспользуемые макеты страниц, а контент в них передавать с помощью проекции, это позволит не дублировать разметку и стили и сделать ваш код гибким и более простым в поддержке 🚀

Документация

#заметки #angular

84 0 1 3

Даня про Frontend👨🏻‍💻

9 Oct, 09:01

Вопрос с собеседования:
«Что такое SSR, какие у него плюсы и минусы?» 🤔

Рендеринг на стороне сервера (Server Side Rendering) – это процесс, при котором сервер получает от клиента запрос, после этого получает все необходимые данные для генерации страницы, формирует контент, генерирует HTML и отправляет его на клиент. Клиент в свою очередь отрисовывает полученную разметку 🖼

Плюсы:
- Увеличение производительности (сервер мощнее браузера)
- Повышение Core Web Vitals
- Улучшение SEO
- Уменьшенный риск XSS и инъекций
- Улучшение интерактивности для маломощных устройств и плохого интернета

Минусы:
- Увеличенная нагрузка на сервер
- Подходит не для всех типов веб-приложений
- Полная перезагрузка страницы (зависит от реализации)

#собеседование

79 0 0 4

Даня про Frontend👨🏻‍💻

4 Oct, 09:01

Хеш-функции 🔐

Хеш-функция – необратимая функция, которая позволяет зашифровать некоторую информацию. Она обязана быть детерменированной: при одинаковых входных данных мы гарантированно получаем одинаковые выходные данные

Вход: любая строка
Выход: битовая строка определённой длины (зависит от алгоритма)
const hashInput(input: string): string {
return hashFunction(input);
}

const hash = hashInput('Data for hashing');
// 6hj4hkq67ku8jrg4hh4

⚠️ Хеш-функции должны быть устойчивы к коллизиям, поиску исходного сообщения и к поиску сообщения, которое генерирует похожий с другим сообщением хеш

Подробная статья на эту тему 📑

#статья #криптография

79 0 0 3

Даня про Frontend👨🏻‍💻

1 Oct, 09:01

Два доклада, которые позволят понять, что Frontend может быть совсем не таким, как мы привыкли 🤯

1️⃣ Опыт команды Самокат в создании 3D сайта-музея (ссылка на сайт-музей)

2️⃣ Опыт команды ЮMoney в переезде их собственной игры на другой движок (ссылка на игру)

#видео

75 0 0 4

Даня про Frontend👨🏻‍💻

28 Sep, 09:02

Lodash Chunk function 📉

Недавно мне пришлось создать список координат из массива чисел и я как обычно начал узнавать, как это делают другие разработчики 👨🏻‍💻

На глаза сразу попалась функция chunk библиотеки Lodash

Она создает массив элементов, разделенных на группы по длине. Если массив невозможно разделить поровну, последний фрагмент будет состоять из оставшихся элементов.
На вход принимает исходный массив и число, обозначающее размер каждого чанка. На выход мы получаем изменённый массив
_.chunk(['12', '27', '36', '52'], 2);
// => [['12', '27'], ['36', '52']]

Да, написать самостоятельно код, который будет делать то же самое не очень сложно, но если библиотека установлена, то зачем изобретать то, что уже изобретено до вас 🚲

Документация

#заметки

82 0 2 5

Даня про Frontend👨🏻‍💻

23 Sep, 09:01

Симметричное шифрование vs Асимметричное шифрование 🔐

Симметричное шифрование – способ шифрования данных, при котором один и тот же ключ используется для кодирования и декодирования информации

⚠️ Одна сторона сначала шифрует данные с помощью закрытого ключа, а вторая дешифрует их с помощью того же самого ключа
Плюсы: скорость
Минусы: необходимость безопасной передачи закрытого ключа

Асимметричное шифрование – способ шифрования данных, при котором используется математическая пара ключей: открытый ключ используется для кодирования, а закрытый для декодирования информации

⚠️ Сторона получения информации генерирует пару ключей и отправляет открытый ключ тому, кто должен её зашифровать. После этого расшифровать информацию можно только с помощью закрытого ключа
Плюсы: нет необходимости безопасной передачи ключей
Минусы: меньшая скорость за счёт более сложной реализации

#заметки #криптография

76 0 0 4

Даня про Frontend👨🏻‍💻

20 Sep, 10:01

«Вы не знаете JS: Области видимости и замыкания», Кайл Симпсон 📓

Вторая книга из серии "Вы не знаете JS", которую я хочу порекомендовать (первая)

В этой части серьёзному разбору подвергаются области видимости и замыкания в языке JavaScript

В книге подробно описаны все существующие области видимости языка, механизм всплытия и замыкания 🤓

🇷🇺 Скачать на русском (внутри файл, состоящий из двух частей, вторая часть)

#книги #разработка

76 0 0 1 3

Показано 20 последних публикаций.

49

подписчиков

Статистика канала

Популярное в канале

Начальное значение метода .reduce() 👨🏻‍💻 При использовании метода массива .reduce(), который нео...

Вечная дилемма: ::before vs :before. Как правильно? 🤔 Правильно писать ::before и никак иначе ⚠️...

Подборка докладов с различных мероприятий 🎤👨🏻‍💻 1️⃣ Доклад о том, как команда Яндекс Go оптимизи...

Hydration (Гидратация) – процесс восстановления разметки, пришедшей с сервера на клиенте 👨🏻‍💻 В ...

Знай свой инструмент 👨🏻‍💻 Недавно возникла необходимость найти все кириллические символы в коде ...