Товары из Китая оптом

Поиск фабрики, доставка, закупка без комиссий

GramAds: $1.5 CPM (175₽)

Реклама от 175₽: быстрая модерация, высокие конверсии

Продающий дизайн

Увеличение кликов и конверсий гарантировано!

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

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

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

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

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

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

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

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

Категория

Технологии

Статистика

Избранное

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

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

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

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

17 Nov, 09:30

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

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

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

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

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

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

27 0 2 1 3

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

12 Nov, 19:19

Angular 19 is coming 🚀

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

#новости

321 0 3 3

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

9 Nov, 10:15

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

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

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

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

#видео

58 0 0 3

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

4 Nov, 10:01

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

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

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

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

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

#заметки

63 0 1 1 4

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

29 Oct, 09:01

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

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

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

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

#статья

58 0 0 3

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

24 Oct, 10:35

Big O Notation 📈

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

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

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

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

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

#статья

68 0 1 3

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

19 Oct, 10:01

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

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

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

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

#видео

71 0 0 4

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

15 Oct, 09:02

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

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

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

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

Surprise from parent!

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

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

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

Named surprise from parent!

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

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

#заметки #angular

72 0 1 3

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

9 Oct, 09:01

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

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

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

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

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

68 0 0 4

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

4 Oct, 09:01

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

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

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

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

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

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

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

70 0 0 3

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

1 Oct, 09:01

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

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

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

#видео

63 0 0 4

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

28 Sep, 09:02

Lodash Chunk function 📉

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

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

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

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

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

#заметки

71 0 2 5

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

23 Sep, 09:01

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

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

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

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

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

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

68 0 0 4

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

20 Sep, 10:01

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

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

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

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

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

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

70 0 0 1 3

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

18 Sep, 08:50

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

1️⃣ Доклад от разработчика лаборатории Касперского об их пути внедрения E2E-тестов

2️⃣ Доклад о том, как Яндекс сделали для приложения Delivery Club WebView отображение, но в результате всё пришлось переписать на натив

3️⃣ Доклад про математическое мышление с интересными задачками внутри

#видео

67 0 0 3

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

14 Sep, 12:02

Интересная серия статей про HTTP под названием «Ультимативный гайд по HTTP» 📑

Серия состоит из 3 статей, в каждой из которых раскрывается некоторая тема, связанная с протоколом HTTP 🌐

1️⃣ Структура запроса и ответа
Ответы на вопросы: Что такое HTTP? Из чего состоит взаимодействие по данному протоколу?

2️⃣ Cookies и CORS
Ответы на вопросы: Что такое Cookies? Что такое CORS?

3️⃣ HTTP/1.1 vs HTTP/2
Ответы на вопрос: Какие различия есть у двух версий протокола?

#статья

75 0 3 3

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

12 Sep, 09:02

Часто возникает необходимость быстро показать кому-либо, как будет выглядеть приложение с другим текстом?

Для этого приходится изменять его в IDE либо же в DevTools, есть вариант проще 👨🏻‍💻

Откройте консоль и введите туда:
document.designMode = 'on';

Теперь ваш текст становится редактируемым и нет необходимости работать с кодом

Под капотом используется установка свойства contentEditable
document.body.contentEditable = true;

📎 В процессе редактирования можно использовать привычные сочетания клавиш (например Ctrl + B)

Статья

#заметки #статья

75 0 1 6

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

7 Sep, 11:21

Angular Component Input binding 👨🏻‍💻

До 16 версии Angular при необходимости получения какого-либо значения из queryParams в компоненте, необходимо было добавить в конструктор ActivatedRoute, подписаться на его параметр и, например, записать его в локальную переменную, сложно, не так ли?
this.route.queryParams.pipe(map(queryParams) => queryParams['name']).subscribe(...);

В 16 версии нам предоставили возможность делать это намного проще 🚀

Для начала необходимо включить эту опцию при конфигурировании Router:
bindToComponentInputs: true // module подход (внутри конфига RouterModule)
withComponentInputBinding() // standalone подход (внутри provideRouter)

После этого у нас появляется возможность получить в Input компонента одноименный queryParam:
@Input() name: string = ''; // ...url?name=John...

В случае коллизии имён приоритетность будет следующей:
1. Route data (data: { name: 'Alex' })
2. Path param (/Ivan)
3. Query param (?name=John)

Хорошая статья с подробностями 📑

#статья #заметки #angular

70 0 1 1 4

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

3 Sep, 17:22

Доклад о том, как в Яндекс Go улучшают надёжность приложения с помощью Chaos Engineering. Благодаря данному подходу им удалось убрать зависимости между микросервисами и позволить приложению продолжать работу, когда некоторые из них перестали отвечать

#видео

Сломай меня полностью: Chaos Engineering / Яндекс Go Infra Meetup #2

Что такое Chaos и как мы его используем в Такси. Показали на тестовом стенде и внутри приложения Яндекс Такси. Спикеры: Максим Ивашковский и Андрей Матвеев, разрушители инфры в Такси. Узнать больше о мероприятиях для разработчиков, наших командах и процессах можно на https://dev.go.yandex.

71 0 0 3

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

28 Aug, 09:00

Представим ситуацию: у нас есть CSS переменная для высоты хедера и нам необходимо динамически её изменить, как это сделать?

Для этих целей можно воспользоваться следующим кодом:
document.body.style.setProperty('--header-height', '130px');

В случае, когда необходимо получить значение переменной, можно воспользоваться следующим кодом:
getComputedStyle(document.body).getPropertyValue('--header-height');

#заметки

87 0 2 5 5

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

47

подписчиков

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

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

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

Big O Notation 📈 Нотация “О-большое” показывает скорость выполнения алгоритма (как увеличивается...

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

I, T и M-shaped специалисты: что это за классификация? 🤔 Иногда встречал формулировки вида "Я M-...

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