HTML: Полезные примеры

Читать

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

#frontend #html

JavaScript: сохраняем страницу в pdf

Читать

В этой небольшой статье мы разберем вариант создания pdf-файла из данных HTML-страницы с помощью клиентской библиотеки html2pdf.js

#frontend #js

Создаем Дизайн-систему

Читать

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

#frontend #js

Просматриваем обновления и изменения содержимого файла с помощь команды tail

Читать

Очень полезная команда tail, присутствует практически в каждой unix-подобной операционной системе, включая macOS и, конечно же, Linux.

#bash #cli

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