Продаю канал / Анекдоты

13 782 пдп, доход 28 000 в месяц, срочная продажа

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

22 056 пдп, доход 46 000 в месяц, цена 54 000 рублей

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

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

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

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

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

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

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

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

Категория

Технологии

Статистика

Избранное

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

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

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

Даня про 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

17 0 1 3

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

3 Sep, 17:22

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

#видео

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

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

31 0 0 3

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

28 Aug, 09:00

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

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

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

#заметки

49 0 2 5 4

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

25 Aug, 10:01

Трансформация значения @Input() 👨🏻‍💻

Если мы заведомо знаем, какого типа нам придёт значение в Input и уверены, что нам придётся его изменить, то не обязательно делать это после получения данного значения.
В Angular 16 можно сделать это в процессе:
@Input({ transform: booleanAttribute }) status: boolean;

В поле transform необходимо передать функцию, которая трансформирует значение. Из коробки Angular пока что предоставляет две функции:
import { numberAttribute, booleanAttribute } from '@angular/core';

Если их недостаточно, то мы можем запросто написать свою. Для этого необходимо глобально создать функцию и передать её в свойство transform

⚠️ Важно отметить, что данная функция должна быть создана с помощью Function Declaration (документация) , иначе вы получите ошибку:
NG1010: Input transform must be a function

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

#заметки #angular

51 0 1 1 5

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

21 Aug, 10:06

Хочу порекомендовать хороший англоязычный доклад в продолжение к посту о сложности кода

В нём вы подробно узнаете что такое сложность кода, какая она бывает и как её посчитать. Также автор демонстрирует методы рефакторинга, которые помогут снизить сложность

#видео

Conquering Complexity: Refactoring JavaScript projects

One of the most common issues in JavaScript code bases is that our code is too complex. As projects and their requirements evolve, complexity creeps in. Excess complexity slows progress, frustrating us as we try to keep large chunks of a program in our heads just to understand what is happening. To...

53 0 0 5

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

18 Aug, 10:01

Использование неподходящего метода кодирования и декодирования base64 может уронить ваше приложение ⚠️

Если вы используете функцию кодирования в base64 btoa() и в неё может попасть текст, который вы не контролируете (пользовательский ввод), попробуйте ввести туда кириллицу или, например, эмодзи, скорее всего вы получите ошибку в консоли:
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

Виной всему Unicode Problem (документация)
В документации хорошо описано как решить данную проблему в обе стороны (для декодирования atob() она тоже актуальна). Суть решения в том, чтобы представить строку побайтово, перед тем как запускать процесс кодирования

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

#заметки

56 0 0 3

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

15 Aug, 09:01

«97 этюдов для программистов. Опыт ведущих экспертов», Пит Гудлиф, Роберт Мартин, Диомидис Спинеллис, Кевлин Хенни и др. 📓

Всегда полезно послушать совет от старших коллег. Во время прочтения данной книги можно получить целых 97 советов 🤯

Авторы статей набили не один десяток шишек перед тем как делиться знаниями в этом сборнике и вы определённо подметите для себя что-то полезное 💡

🇷🇺 Скачать на русском

В комментарии можно посмотреть мои заметки, составленные в процессе прочтения данной книги

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

54 0 1 1 3

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

12 Aug, 09:01

Зачем нужен CORS: просто о сложном 📑

Очень полезная и понятная статья о том, что такое CORS (Cross-Origin Resource Sharing)

В мире, где опасности могут ждать нас в каждой ссылке, Frontend разработчику важно понимать как работает данный механизм и как им правильно пользоваться, чтобы защитить своё приложение от киберпреступников

#статья

55 0 2 3

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

9 Aug, 09:01

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

1️⃣ Доклад про собственную ферму устройств Сбера. История создания, советы по выбору устройств и работе с ними

2️⃣ Доклад про то, что такое BDUI и как он работает в Яндекс Маркете. Также в докладе рассказывается о способах оптимизации этого подхода

3️⃣ Доклад о том, что такое платформы в Angular, каков принцип их работы и как написать свою, чтобы запустить Angular приложение где угодно

#видео

63 0 0 4

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

6 Aug, 09:01

Вопрос с собеседования:
«Можно ли передать тело с GET-запросом?» 🤔

Вопрос, который запросто может поставить в тупик, но ответ у него достаточно простой 👨🏻‍💻

Правильный ответ — да. Тело запроса никак не зависит от метода. В стандарте не описана возможность принимать тело запроса у GET-метода, но это и не запрещено. Технически вы можете отправить данные в теле, но скорее всего веб-сервер будет их игнорировать

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

57 0 0 5

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

3 Aug, 09:31

Единицы измерения области просмотра 📐

📏 Viewport Width (vw) – процентная величина от общей ширины области просмотра
10vw представляет собой 10% от текущей ширины области просмотра. То есть 48px на телефоне с экраном шириной 480px

📏 Viewport Height (vh) — процентная величина от общей высоты области просмотра
10vh составляет 10% от текущей высоты области просмотра. То есть 98px на телефоне с экраном высотой 980px

📏 Viewport Minimum (vmin) — процентная величина от ширины или высоты области просмотра, в зависимости от того, которая из двух меньше
10vmin соответствует 10% от текущей ширины области просмотра в книжной ориентации и 10% от высоты области просмотра в альбомной ориентации

📏 Viewport Maximum (vmax) — процентная величина от ширины или высоты области просмотра, в зависимости от того, которая из двух больше
10vmin будет равняться 10% от текущей высоты области просмотра в книжной ориентации и 10% ширины области просмотра в альбомной ориентации

#заметки #css

60 0 1 5

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

30 Jul, 09:01

Следить за зависимостями проекта нужно всегда ⚠️

Зайдите в package.json своего проекта и задайте себе несколько вопросов:

- Мы точно знаем какая зависимость за что отвечает?
- Мы уверены, что у нас нет лишних зависимостей?
- Нет ли у нас нескольких зависимостей, которые выполняют схожие цели?

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

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

В ней всего две колонки: название пакета и краткое описание пакета с указанием цели, с которой он используется у нас

Благодаря этой таблице не только человек, который делал задачу, но и вся команда узнала какие у нас есть зависимости (по названию пакета не всегда понятна суть) и какие зависимости делают одно и то же и нам стоит подумать над выбором одной 🤔

#заметки #советы

71 0 1 5

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

25 Jul, 09:00

Передача параметров адресной строки в Angular 🌐

При навигации между страницами приложения нам часто требуется передавать параметры в адресной строке

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

В Angular при навигации мы можем указать стратегию установки queryParams
router.navigate(
['/route'],
{
queryParams: { page: 2 },
queryParamsHandling: 'preserve'
}
);

Свойство queryParamsHandling принимает 3 значения:

'' – все существующие параметры заменяются на новые (по умолчанию)
'preserve' – все переданные параметры игнорируются
'merge' – текущие параметры дополняются новыми (при коллизии имён переданные имеют приоритет)

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

#заметки #angular

75 0 1 4

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

22 Jul, 10:24

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

1️⃣ Доклад о том, как правильно выбрать UI-библиотеку и не обжечься при создании своего собственного UI-Kit

2️⃣ Доклад про плюсы и минусы монорепозиториев, про то, как с ними жить и когда лучше обзавестись микросервисной архитектурой

3️⃣ Доклад о том, какие сложности могут ждать вас и на какие грабли вы можете наступить, если завтра придется разрабатывать PWA

#видео

72 0 1 2 5

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

19 Jul, 09:02

Какой загрузочный экран выбрать? 📑

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

Может показать спиннер с процентами? 🔘
А может быть анимированный скелет страницы? 🦴
Или выдать какой-нибудь интересный факт или подсказку? 🤔

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

#статья

86 0 2 1 4

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

15 Jul, 08:59

Обязательные Input в Angular ⚠️

В 16 версии Angular появилась маленькая, но очень желаемая возможность: декоратор Input можно сделать обязательным
@Input({ required: true }) name: string;

После добавления свойства required и не передачи обязательного параметра при отрисовке компонента вы получите ошибку компиляции:

NG8008: Required input 'name' from component YourComponent must be specified.

Данное свойство очень полезно, т.к. риск получения undefined в рантайме очень сильно снижается за счёт получения ошибок во время разработки 👨🏻‍💻

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

#заметки

82 0 0 4

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

14 Jul, 09:59

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

#видео

Как мы внедряли Е2Е-тесты и почему у нас ничего не вышло, Руслан Байгунусов

70 0 0 3

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

11 Jul, 09:08

Микроразметка Open Graph 🔬

Я думаю многие привыкли к тому, что при отправке какой-то ссылки в соцсети, у неё появляется превью с картинкой, заголовком и кратким описанием, но как это работает? 🤨

Для этого необходимо добавить в тег микроразметку Open Graph

Ниже, пример такой разметки для добавления картинки и заголовка

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

⚠️ Важно знать, что если ссылка уже отправлялась в соцсети и вы добавили или обновили микроразметку, то ссылка не обновится самостоятельно. Для этого необходимо обновить кеш соцсети руками. Инструкции по обновлению кеша для Telegram и ВКонтакте я приложил в комментарии. Для других соцсетей можно поискать что-то наподобие "сбросить кеш ссылки в {name}"

Удачных экспериментов 👨🏻‍🔬

#заметки

80 0 1 5 4

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

8 Jul, 09:01

«Чистая архитектура. Искусство разработки программного обеспечения», Роберт Мартин 📓

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

В книге раскрывается понятие архитектуры, причины её дороговизны. Рассматриваются парадигмы программирования, принципы дизайна SOLID (SRP, OCP, LSP, ISP, DIP), принципы организации компонентов (CCP, CRP, REP, ADP, SDP, SAP). Во время прочтения, книга повествует о том, как необходимо мыслить при построении архитектуры системы. Также она включает в себя много интересных историй из жизни автора ✍🏻

🇷🇺 Скачать на русском

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

77 0 1 4

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

5 Jul, 11:02

Оптимизация жизни 👨🏻‍💻

Если вы, так же как и я работаете на ноутбуке и часто переключаете режим работы с просто ноутбука на ноутбук как системный блок + периферия, то, вероятно, сталкивались с такой ситуацией:

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

Через какое-то время мне надоело каждый раз заходить в настройки и делать это всё через интерфейс. Я нашёл решение своей проблемы, немного его допилил и теперь у меня есть bat-файл, который требует ввода 0 или 1 и настраивает всё под режим работы
@echo off
set /p action="Enter close lid option (0 - Do Nothing, 1 - Sleep): "
@"%__AppDir__%powercfg.exe" -SetDCValueIndex Scheme_Current Sub_Buttons LidAction "%action%"
@"%__AppDir__%powercfg.exe" -SetACValueIndex Scheme_Current Sub_Buttons LidAction "%action%"
@"%__AppDir__%powercfg.exe" -SetActive Scheme_Current

Файл прикреплю в комментарии 📎

#советы

63 0 0 4 5

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

51

подписчиков

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

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

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

Использование неподходящего метода кодирования и декодирования base64 может уронить ваше приложен...

Зачем нужен CORS: просто о сложном 📑 Очень полезная и понятная статья о том, что такое CORS (Cro...

«97 этюдов для программистов. Опыт ведущих экспертов», Пит Гудлиф, Роберт Мартин, Диомидис Спинел...

Хочу порекомендовать хороший англоязычный доклад в продолжение к посту о сложности кода В нём в...