Senior Frontend Developer | JavaScript, React, HTML & CSS

Адрес канала:

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

Язык: Русский

Количество подписчиков: 20.24K

Описание канала:

Изучаем Frontend.
По вопросам сотрудничества: @adv_and_pr
Канал на бирже: https://telega.in/c/senior_front

▲ Vote (1)

Рейтинги и Отзывы

2.67

3 отзыва

Оценить канал senior_front и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.

5 звезд

4 звезд

3 звезд

2 звезд

1 звезд

Последние сообщения 4

2023-06-08 13:41:28

Infinite Scroll

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

Для реализации Infinite Scroll можно использовать различные библиотеки и фреймворки, такие как jQuery, React, Vue, Angular и другие.

Чтобы использовать Infinite Scroll, необходимо обратить внимание на следующие моменты:

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

Если вы используете библиотеку или фреймворк, то, вероятно, существует готовое решение для реализации Infinite Scroll. Иначе, можно написать свой собственный код, следуя принципам, описанным выше.

2.9K views10:41

Открыть/Комментировать

2023-06-07 17:53:07 #вопросы_с_собеседований
Назовите преимущества и недостатки использования стрелочных функций в JavaScript

Преимущества

1. Краткость и лаконичность. Стрелочные функции позволяют определять функции в одну строку кода, что делает код более читабельным и понятным.

2. Неизменяемость контекста (this). В отличие от обычных функций, где значение this зависит от контекста вызова, в стрелочных функциях this всегда берется из внешней функции, в которой они были определены. Это упрощает код и уменьшает вероятность ошибок.

3. Необязательность скобок при одном аргументе. Если функция принимает только один аргумент, то скобки можно не ставить, что делает код еще более лаконичным.

Недостатки

1. Не возможность использовать в качестве конструктора. Стрелочные функции не могут быть использованы в качестве конструктора, что ограничивает их использование.

2. Отсутствие своего контекста. Стрелочные функции не имеют своего контекста, что может быть проблемой в некоторых случаях.

3. Не умение использовать ключевые слова yield и arguments. Стрелочные функции не поддерживают ключевые слова yield и arguments, что может ограничивать их использование в некоторых ситуациях.

2.8K views14:53

Открыть/Комментировать

2023-06-07 13:01:22 #вопросы_с_собеседований
Почему семантическая верстка лучше ARIA?

1. Совместимость с устройствами чтения с экрана

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

2. Поддержка браузерами

Большинство современных браузеров имеют встроенную поддержку семантических элементов. С другой стороны, поддержка ARIA может быть ограничена в некоторых старых браузерах, что может привести к проблемам с доступностью для пользователей.

3. Читаемость кода

С использованием семантических элементов, код веб-страницы становится более читаемым и понятным для других разработчиков. При использовании ARIA, код может стать более запутанным и сложным для понимания.

2.8K views10:01

Открыть/Комментировать

2023-06-06 22:36:39

Оптимизируем задержку ввода в JavaScript

1. Debounce - это метод, который позволяет уменьшить количество вызовов функции, которая обрабатывает пользовательский ввод. Он устанавливает задержку перед вызовом функции, что позволяет пользователю завершить ввод перед тем, как функция будет вызвана.

В примере (1) - функция expensiveFunction вызывается только после того, как пользователь закончил вводить текст в поле ввода. Использование debounce помогает избежать частых вызовов функции и уменьшает задержку ввода.

2. requestAnimationFrame - используется для планирования анимации или обновления экрана. Вызов requestAnimationFrame приводит к обновлению экрана, и это может уменьшить задержку ввода.

В примере (2) - функция expensiveFunction вызывается только после того, как браузер обновил экран. Это позволяет избежать вызовов функции во время пользовательского ввода, что уменьшает задержку ввода.

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

В примере (3) - сообщения отправляются в Web Worker, который выполняет скрипт в отдельном потоке. Это позволяет избежать блокировки главного потока, что уменьшает задержку ввода.

3.1K views19:36

Открыть/Комментировать

2023-06-06 16:21:21

Метод Object.keys()

Метод Object.keys() используется для получения всех ключей объекта в виде массива.

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

Важно отметить, что он возвращает только перечисляемые свойства объекта. Если вы хотите получить все свойства объекта, включая неперечисляемые, вы можете использовать метод getOwnPropertyNames(), который возвращает массив всех свойств объекта.

3.0K viewsedited 13:21

Открыть/Комментировать

2023-06-05 20:44:51

Основы доступного HTML - семантика и вспомогательные технологии

1. Семантика - это использование HTML-тегов для описания содержимого веб-страницы. Использование семантических тегов помогает создавать более понятный и доступный контент. Примеры семантических тегов на фото.

Использование семантических тегов помогает читателям понимать структуру страницы и навигировать по ней.

2. Вспомогательные технологии - помогают людям с ограниченными возможностями использовать веб-страницы. Некоторые примеры включают программы чтения с экрана и устройства управления с джойстиком.

Для доступности веб-страницы можно использовать атрибуты HTML, такие как alt и title, чтобы описать содержимое. Также можно использовать aria-label для описания элементов без использования семантических тегов.

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

3.2K views17:44

Открыть/Комментировать

2023-06-05 14:37:25 #вопросы_с_собеседований
Как большой размер DOM влияет на интерактивность приложения?

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

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

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

3.1K views11:37

Открыть/Комментировать

2023-06-04 15:57:06

CSS свойство Margin

Позволяет задавать внешние отступы элементам на веб-странице. Оно используется для управления расстоянием между элементами и границами блоков, а также для создания пространства между содержимым и границами элементов.

Обратите внимание на пример использования свойства (1):

Мы задаем внешний отступ в 20 пикселей для элементов

. Это означает, что между границами элемента и соседними элементами будет находиться пространство в 20 пикселей.

Кроме того, margin может быть задан отдельно для каждой стороны элемента (2):

Мы задаем отступы для каждой стороны элемента

отдельно. Таким образом, мы можем контролировать расстояние между элементами и границами блоков с высокой точностью.

3.2K views12:57

Открыть/Комментировать

2023-06-03 15:05:04

Коллекции set: .size() и .entries()

Метод .size() - возвращает количество элементов в коллекции set. Например, если у нас есть коллекция set с тремя элементами, мы можем использовать метод .size() для получения числа 3.

Метод .entries() - возвращает новый объект Iterator, содержащий массивы для каждого элемента в коллекции set. Каждый массив содержит два элемента: значение элемента и его индекс.

3.2K views12:05

Открыть/Комментировать

2023-06-02 21:32:07

#вопросы_с_собеседований
Придумайте строку и решите задачу с пояснением HTML
Программа преобразует строку, состоящую из нескольких слов, в хештэг. Если строка пустая, то программа вернет false.

Для создания программы на HTML, которая будет конвертировать строку в хештэг, нужно использовать язык программирования JavaScript.

1. Создадим функцию, которая преобразует входную строку 'inputString' в хештэг.
2. Проверим строку на пустоту. Если она не пустая, разобьем ее на массив слов с помощью метода split().
3. Добавим символ '#' перед каждым словом, объединим массив обратно в строку используя метод join(), и вернем полученную строку.

Для проверки работы функции можно вызвать ее и передать в качестве параметра строку "frontend разработчик". Функция вернет следующий результат: #Frontend #Разработчик.

3.4K views18:32

Открыть/Комментировать