Задача на js: Найти общий элемент в двух отсортированных массивах
Даны два отсортированных массива, необходимо найти все элементы, которые присутствуют в обоих массивах.
Пример:
Условия:
Время работы: O(n + m), где n и m — длины двух массивов.
Эти задачи требуют различных подходов, от динамического программирования до использования хеш-таблиц, и охватывают широкий спектр навыков, полезных для разработки.
#домашка
Даны два отсортированных массива, необходимо найти все элементы, которые присутствуют в обоих массивах.
Пример:
intersection([1, 2, 4, 5, 6], [2, 3, 5, 7]);
// Ожидаемый результат: [2, 5]
Условия:
Время работы: O(n + m), где n и m — длины двух массивов.
Эти задачи требуют различных подходов, от динамического программирования до использования хеш-таблиц, и охватывают широкий спектр навыков, полезных для разработки.
#домашка
🔥1
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Как использовать localStorage для хранения данных?
2. Что такое <template> и как с ним работать
3. Тег <dfn>
Лучшие фронтенд вакансии @job_webdev:
1. Frontend Developer (React+React Native)
2. Frontend разработчик
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Designer
2. Специалист по созданию лендингов через AI
3. Web-дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Как использовать localStorage для хранения данных?
2. Что такое <template> и как с ним работать
3. Тег <dfn>
Лучшие фронтенд вакансии @job_webdev:
1. Frontend Developer (React+React Native)
2. Frontend разработчик
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Designer
2. Специалист по созданию лендингов через AI
3. Web-дизайнер
#лучшеезанеделю
👍1
Как сделать сокращение длинного текста с тремя точками на конце на css?
CSS код:
CSS код:
-webkit-line-clamp: 3;(в этой строке пишем сколько строк должно показываться)
-webkit-box-orient: vertical;#css|#полезности
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
👍10
Фишка с grid + place-items
Это помогает выравнивать элементы по вертикали и горизонтали с помощью лишь двух строк кода
place-items-это сокращение для justify-items и align-items.
#полезности
Это помогает выравнивать элементы по вертикали и горизонтали с помощью лишь двух строк кода
place-items-это сокращение для justify-items и align-items.
#полезности
👍18🔥5
Как сделать круговой текст?
Попробуем реализовать эту задачу при помощи svg.
Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Легче всего поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути.
Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:
#полезности
Попробуем реализовать эту задачу при помощи svg.
Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Легче всего поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути.
<svg class="circle-text" viewBox="0 0 100 100">
<path id="circle-text" d="M 0,50 a 50,50 0 1,1 0,1 z" />
<text>
<textPath xlink:href="#circle-text">
Круговой текст
</textPath>
</text>
</svg>
Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:
.circle-text {
display: block;
overflow: visible;
width: 100px;
font-size: 28px;
fill: red;
}
.circle-text path {
fill: none;
}
#полезности
👍5
5 Советов для Ускорения HTML-верстки
Верстка — это не только про точность, но и про скорость работы. Если вы хотите писать код быстрее, но без потери качества, вот несколько простых и полезных советов:
1. Используйте Emmet для ускорения работы
Emmet — это встроенный инструмент большинства редакторов кода. Он позволяет создавать сложные структуры HTML за пару секунд.
Пример:
Расширяется в:
Попробуйте использовать Emmet для повторяющихся задач, таких как создание списков или вложенных блоков.
2. Организуйте структуру проекта
Пишите код так, чтобы любой мог его понять:
Разделяйте стили и скрипты в отдельные файлы.
Придерживайтесь единого стиля именования классов (например, BEM).
Пример:
3. Работайте с семантикой
Семантические теги (например, <header>, <article>, <nav>) делают ваш код понятнее и лучше для SEO. Используйте их вместо универсальных <div>.
4. Добавляйте комментарии
Комментарии помогут вам или вашим коллегам быстрее разобраться в коде. Например:
5. Проверяйте верстку на всех устройствах
Обязательно тестируйте:
В браузерах: Chrome, Firefox, Safari.
На разных устройствах: телефонах, планшетах и ноутбуках.
Попробуйте бесплатные инструменты, такие как Chrome DevTools, чтобы посмотреть, как ваш сайт выглядит на экранах с разным разрешением.
Ваш HTML-код — это не просто текст, это фундамент любого сайта. Чем чище и качественнее он будет, тем проще с ним работать другим разработчикам.
#полезнаястатья
Верстка — это не только про точность, но и про скорость работы. Если вы хотите писать код быстрее, но без потери качества, вот несколько простых и полезных советов:
1. Используйте Emmet для ускорения работы
Emmet — это встроенный инструмент большинства редакторов кода. Он позволяет создавать сложные структуры HTML за пару секунд.
Пример:
div.container>header+main+footer
Расширяется в:
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
Попробуйте использовать Emmet для повторяющихся задач, таких как создание списков или вложенных блоков.
2. Организуйте структуру проекта
Пишите код так, чтобы любой мог его понять:
Разделяйте стили и скрипты в отдельные файлы.
Придерживайтесь единого стиля именования классов (например, BEM).
Пример:
<div class="menu__item menu__item--active">Главная</div>
3. Работайте с семантикой
Семантические теги (например, <header>, <article>, <nav>) делают ваш код понятнее и лучше для SEO. Используйте их вместо универсальных <div>.
4. Добавляйте комментарии
Комментарии помогут вам или вашим коллегам быстрее разобраться в коде. Например:
<!-- Главное меню сайта -->
<nav>...</nav>
5. Проверяйте верстку на всех устройствах
Обязательно тестируйте:
В браузерах: Chrome, Firefox, Safari.
На разных устройствах: телефонах, планшетах и ноутбуках.
Попробуйте бесплатные инструменты, такие как Chrome DevTools, чтобы посмотреть, как ваш сайт выглядит на экранах с разным разрешением.
Ваш HTML-код — это не просто текст, это фундамент любого сайта. Чем чище и качественнее он будет, тем проще с ним работать другим разработчикам.
#полезнаястатья
👍13
Какой псевдокласс используется для применения стилей к элементам, которые еще не прошли проверку формой?
Anonymous Quiz
17%
:checked
38%
:invalid
17%
:valid
28%
:default
👍4🔥2
Задача: Фильтрация и сортировка списка пользователей
Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: name (имя пользователя), age (возраст пользователя) и isActive (булево значение, указывающее, активен ли пользователь).
Ваша задача:
Отфильтровать массив, оставив только активных пользователей.
Отсортировать активных пользователей по возрасту в порядке возрастания.
Вернуть массив имён отсортированных активных пользователей.
Пример входных данных:
Пример выходных данных:
Указания:
Используйте метод filter() для фильтрации активных пользователей.
Используйте метод sort() для сортировки пользователей по возрасту.
Используйте метод map() для извлечения имён пользователей.
#домашка
Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: name (имя пользователя), age (возраст пользователя) и isActive (булево значение, указывающее, активен ли пользователь).
Ваша задача:
Отфильтровать массив, оставив только активных пользователей.
Отсортировать активных пользователей по возрасту в порядке возрастания.
Вернуть массив имён отсортированных активных пользователей.
Пример входных данных:
const users = [
{ name: 'Alice', age: 25, isActive: true },
{ name: 'Bob', age: 30, isActive: false },
{ name: 'Charlie', age: 20, isActive: true },
{ name: 'David', age: 35, isActive: true },
{ name: 'Eve', age: 28, isActive: false }
];
Пример выходных данных:
['Charlie', 'Alice', 'David']
Указания:
Используйте метод filter() для фильтрации активных пользователей.
Используйте метод sort() для сортировки пользователей по возрасту.
Используйте метод map() для извлечения имён пользователей.
#домашка
👏4❤2
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Сокращение текста на css
2. Советы для ускорения верстки
3. Selection and range
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. Html верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Дизайнер
3. UX/UI дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Сокращение текста на css
2. Советы для ускорения верстки
3. Selection and range
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. Html верстальщик
3. Frontend разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Дизайнер
3. UX/UI дизайнер
#лучшеезанеделю
🔥1
Какой тег используется для элементов навигации?
Anonymous Quiz
90%
nav
1%
div
1%
header
8%
navigation
👍1
С помощью какого css свойства можно запретить перенос текста?
Anonymous Quiz
73%
white-space: nowrap
3%
white-space: pre
19%
word-wrap: break-word
5%
word-wrap: normal
👍7👏1
Макет для тренировки (EASYearn)
Средняя сложность. Лендинг и личный кабинет
Перейти к макету 🧑💻
#практика | #макет
Средняя сложность. Лендинг и личный кабинет
Перейти к макету 🧑💻
#практика | #макет
👍1👏1
Какого поля input не существует?
Anonymous Quiz
42%
input type="color"
2%
input type="date"
3%
input type="number"
28%
input type="reset"
18%
input type="name"
7%
Посмотреть ответы
👍5👏5