Javascript: убираем дубли разрывов строк

Допустим, у нас есть контент с повторяющимися разрывами строк. А нам ужно получить текст с только одним разрывом между строками.

Узнать правильный ответ

#interview #frontend #js

AI: 11 советов для программистов

Читать

В 2024 году я полностью прекратил писать собственные программы. Отныне я занимаюсь копированием кода, созданного искусственным интеллектом. В связи с этим, позволю себе поделиться некоторыми советами по использованию инструментов ИИ, основанными на практическом опыте.

#ai

JavaScript: размер файла изображения

Есть форма с полем ввода, позволяющим пользователям загружать изображения:

<input
  name='image'
  type='file'
  accept='image/*'
/>

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

Узнать правильный ответ

#interview #frontend #js

JavaScript: ведущий ноль

Довольно часто к числу, выводимому на экран, нужно добавить ведущий ноль, особенно, если это число меньше 10. Как это сделать?

Узнать правильный ответ

#interview #frontend #js

JavaScript: цвет страницы

Как с помощью свойства CSS 'filter' и JavaScript динамически менять цвет страницы?

Узнать правильный ответ

CSS: выбираем элемент без атрибута

Как в HTML-документе обратиться к стилям элемента, у которого нет определенного атрибута?

Узнать правильный ответ


#interview #frontend #css

JavaScript: динамический импорт модулей

Нужно загрузить файл из папки, название которой создается динамически.

Написав:

import test from folder + '/test.js'

или

import test from `${folder}/test.js`

Вы поймете, что код не работает...


Узнать правильный ответ

#interview #frontend #js

CSS: отключаем выделение текста

Читать

Попробуем отключить возможность выделения текста (как впрочем и всего остального содержимого веб-страницы) с помощью CSS-свойства user-select

#css #frontend

CSS: flexbox для выравнивания по центру

Читать

Flexbox дал, пожалуй, наипростейшую возможностью центрирования элементов на странице.

#frontend #css

JavaScript: доступ к истории

Читать

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

#frontend #js

JavaScript: определяем броузер

Кажется, что узнать, в каком броузере находится текущая сессия пользователя, довольно просто. Ведь именно для этого предназначено свойство userAgent объекта navigator

Узнать правильный ответ

#interview #frontend #js

JavaScript: поиск элементов массива

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

Узнать правильный ответ

#interview #frontend #js

JavaScript: объединение данных

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

Узнать правильное решение

#interview #frontend #js

JavaScript: удаление дублей

Допустим, Вы получили перечень контактов, некоторые из которых могут дублироваться. Необходимо получить список, включающий только уникальные контакты (адреса электронной почты)

Узнать правильный ответ

#interview #frontend #js

JavaScript: преобразование данных

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

Узнать правильный ответ

#interview #frontend #js

CLI: обнволение npm

Читать

Довольно часто возникает необходимость обновления большого количества npm-пакетов, принадлежащих разным проектам и находящихся в различных подпапках одной директории.

#cli #bash

HTML: отправляем данные нередактируемых полей

Читать

Порой, при работе с HTML-формой возникает необходимость в отключении возможности редактирования значения поля ввода input пользователем.

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

Атрибут readonly - решение проблемы, он позволяет отправлять данные поля ввода в составе сведений формы и отключает возможность внесения изменений для пользователя

#frontend #html

JavaScript: как получить подстроку

Читать

Часто в javaScript нужно извлечь часть строки.

Вот простой способ решения такой задачи. С помощью метода split() и манипуляции с элементами массива получаем фрагмент строки от ее начала до первого вхождения разделителя (не включая сам разделитель -):

const str = 'test-hey-ho'
str.split('-')[0] //'test'

#interview #frontend #js

Полезные элементы HTML: dialog

Читать

HTML-элемента 'dialog' позволяет получать модальные диалоговые окна, не полагаясь на библиотеки JavaScript. Такой семантически верный подход можно использовать для создания оповещений, подтверждений, всплывающих окон.

Например:

<dialog id="myDialog">
    <p>Это диалог</p>
    <button onclick="document.getElementById('myDialog').close()">Закрыть</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Открыть</button>

Такой элемент достаточно просто стилизовать или оснастить дополнительным функциями с помощью JavaScript.

#frontend #html

Полезные элементы HTML: picture

Читать

HTML-элемент picture - контейнер для вложенных элементов source. Он необходим для загрузки адаптивных изображений, оптимизированных в соответствии с выбранными размерами и разрешениями экрана.

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

Например:

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

Таким образом, picture сокращает время загрузки картинки, повышает удобство работы пользователя, предоставляя наиболее подходящее изображение.

#frontend #html

Полезные элементы HTML: output

Читать

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

Например:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0">
    = <output name="result" for="a b">0</output>
</form>

Таким образом, output дает простой вариант создания интерактивных и динамических форм без необходимости использования многострочного кода JavaScript.

#frontend #html