Задача на js: Поиск первой уникальной буквы в строке
Напишите функцию, которая находит первую букву в строке, которая встречается только один раз.
Пример:
Условия:
Время работы: O(n)
#домашка
Напишите функцию, которая находит первую букву в строке, которая встречается только один раз.
Пример:
firstUniqChar("leetcode");
// Ожидаемый результат: 'l'
firstUniqChar("aabb");
// Ожидаемый результат: -1 (все буквы повторяются)
Условия:
Время работы: O(n)
#домашка
👍2
Какой из методов массива JavaScript изменяет его, добавляя элементы в конец?
Anonymous Quiz
11%
unshift()
10%
shift()
61%
push()
17%
pop()
👍1🦄1
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Адаптивный дашборд на react и tailwind
2. Тег <samp>
3. Анимированная буквицы (Drop cap)
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик (React)
2. Frontend разработчик
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Адаптивный дашборд на react и tailwind
2. Тег <samp>
3. Анимированная буквицы (Drop cap)
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик (React)
2. Frontend разработчик
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
👍1🔥1
Тег <dfn>
Тег <dfn> используется для выделения термина или определения в тексте. Он помогает семантически обозначить слово или фразу, которое затем будет объяснено.
Как работает <dfn>?
Обычно <dfn> применяется для выделения слова, которое будет определено рядом с ним. Браузеры не применяют к этому тегу специальных стилей, но его использование улучшает семантическую структуру документа:
В этом примере слово API отмечено как термин, который определяется далее.
Зачем использовать <dfn>?
Семантика: Помогает поисковым системам и программам для чтения с экрана лучше понимать структуру страницы.
Ясность: Читатель сразу видит, что слово или фраза будет объяснено в тексте.
Тег <dfn> особенно полезен при создании учебных материалов, словарей, документации и статей, где есть много определений и новых терминов.
#html | #теория
Тег <dfn> используется для выделения термина или определения в тексте. Он помогает семантически обозначить слово или фразу, которое затем будет объяснено.
Как работает <dfn>?
Обычно <dfn> применяется для выделения слова, которое будет определено рядом с ним. Браузеры не применяют к этому тегу специальных стилей, но его использование улучшает семантическую структуру документа:
<p>Понятие <dfn>API</dfn> означает интерфейс прикладного программирования.</p>
В этом примере слово API отмечено как термин, который определяется далее.
Зачем использовать <dfn>?
Семантика: Помогает поисковым системам и программам для чтения с экрана лучше понимать структуру страницы.
Ясность: Читатель сразу видит, что слово или фраза будет объяснено в тексте.
Тег <dfn> особенно полезен при создании учебных материалов, словарей, документации и статей, где есть много определений и новых терминов.
#html | #теория
👍10
Тег <map>
Тег <map> используется для создания областей с кликабельными ссылками на изображении. Он работает вместе с тегом <area>, который задает области на изображении, и делает их интерактивными.
Как работает <map>?
Задайте картинку с атрибутом usemap, указывающим на имя карты.
Создайте карту с определенными областями, которые станут ссылками:
shape: Определяет форму области (прямоугольник, круг или многоугольник).
coords: Координаты, задающие область клика.
href: Ссылка, которая откроется при клике.
Почему <map> полезен?
Создание интерактивных изображений: Используется для создания сложных карт и схем, где каждая область может вести на отдельную страницу.
Лучший UX: Добавляет удобство для пользователей, которым нужно взаимодействовать с конкретными частями изображения.
#html | #теория
Тег <map> используется для создания областей с кликабельными ссылками на изображении. Он работает вместе с тегом <area>, который задает области на изображении, и делает их интерактивными.
Как работает <map>?
Задайте картинку с атрибутом usemap, указывающим на имя карты.
Создайте карту с определенными областями, которые станут ссылками:
<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="34,44,270,350" href="page1.html" alt="Прямоугольник">
<area shape="circle" coords="337,300,44" href="page2.html" alt="Круг">
</map>
shape: Определяет форму области (прямоугольник, круг или многоугольник).
coords: Координаты, задающие область клика.
href: Ссылка, которая откроется при клике.
Почему <map> полезен?
Создание интерактивных изображений: Используется для создания сложных карт и схем, где каждая область может вести на отдельную страницу.
Лучший UX: Добавляет удобство для пользователей, которым нужно взаимодействовать с конкретными частями изображения.
#html | #теория
👍12
Что такое <template> и как с ним работать?
Тег <template> — это один из самых недооценённых инструментов HTML. Он позволяет создавать невидимые для пользователя шаблоны, которые можно динамически использовать через JavaScript.
Как это работает?
Контент внутри <template> не отображается на странице до тех пор, пока вы не скопируете его с помощью JavaScript и не вставите в DOM.
Используйте <template> для повторяющихся элементов, таких как карточки, списки или модальные окна.
#полезнаястатья
Тег <template> — это один из самых недооценённых инструментов HTML. Он позволяет создавать невидимые для пользователя шаблоны, которые можно динамически использовать через JavaScript.
Как это работает?
Контент внутри <template> не отображается на странице до тех пор, пока вы не скопируете его с помощью JavaScript и не вставите в DOM.
<template id="my-template">
<div class="card">
<h3>Это шаблон!</h3>
<p>Этот текст появится, только если вы его активируете через JS.</p>
</div>
</template>
const template = document.getElementById("my-template");
const content = template.content.cloneNode(true);
document.body.appendChild(content);
Используйте <template> для повторяющихся элементов, таких как карточки, списки или модальные окна.
#полезнаястатья
👍15
Как использовать localStorage для хранения данных?
localStorage — это API браузера для хранения данных на стороне клиента.
Masha
Сохраняет данные даже после перезагрузки страницы или закрытия браузера.
Доступен через объект window.localStorage.
Хранит данные в формате ключ: значение.
Пример:
Запись данных:
Чтение данных:
Удаление данных:
Используйте localStorage для сохранения настроек пользователя, токенов аутентификации и другой информации, которая не требует высокой безопасности.
#полезнаястатья
localStorage — это API браузера для хранения данных на стороне клиента.
Masha
Сохраняет данные даже после перезагрузки страницы или закрытия браузера.
Доступен через объект window.localStorage.
Хранит данные в формате ключ: значение.
Пример:
Запись данных:
localStorage.setItem("username", "Masha");
Чтение данных:
const username = localStorage.getItem("username");
console.log(username); // "Masha"
Удаление данных:
localStorage.removeItem("username");
Используйте localStorage для сохранения настроек пользователя, токенов аутентификации и другой информации, которая не требует высокой безопасности.
#полезнаястатья
👍4
Задача на 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