Задача на js: Поиск первой уникальной буквы в строке

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

firstUniqChar("leetcode");
// Ожидаемый результат: 'l'
firstUniqChar("aabb");
// Ожидаемый результат: -1 (все буквы повторяются)

Условия:
Время работы: O(n)

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @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 Дизайнер

#лучшеезанеделю

Руководство по цветовым функциям CSS

Читать статью 👨‍💻

#css | #полезности

Тег <dfn>

Тег <dfn> используется для выделения термина или определения в тексте. Он помогает семантически обозначить слово или фразу, которое затем будет объяснено.

Как работает <dfn>?
Обычно <dfn> применяется для выделения слова, которое будет определено рядом с ним. Браузеры не применяют к этому тегу специальных стилей, но его использование улучшает семантическую структуру документа:

<p>Понятие <dfn>API</dfn> означает интерфейс прикладного программирования.</p>

В этом примере слово API отмечено как термин, который определяется далее.

Зачем использовать <dfn>?
Семантика: Помогает поисковым системам и программам для чтения с экрана лучше понимать структуру страницы.
Ясность: Читатель сразу видит, что слово или фраза будет объяснено в тексте.
Тег <dfn> особенно полезен при создании учебных материалов, словарей, документации и статей, где есть много определений и новых терминов.

#html | #теория

Графика на Canvas для начинающих

Читать 👨‍💻

#теория

Тег <map>

Тег <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 | #теория

Что такое <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> для повторяющихся элементов, таких как карточки, списки или модальные окна.

#полезнаястатья

Как использовать localStorage для хранения данных?
localStorage — это API браузера для хранения данных на стороне клиента.

Masha
Сохраняет данные даже после перезагрузки страницы или закрытия браузера.
Доступен через объект window.localStorage.
Хранит данные в формате ключ: значение.

Пример:
Запись данных:

localStorage.setItem("username", "Masha");  

Чтение данных:

const username = localStorage.getItem("username");  
console.log(username); // "Masha"

Удаление данных:

localStorage.removeItem("username"); 

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

#полезнаястатья

Атрибут inert

Читать 👨‍💻

#html | #теория

Макет для тренировки (манипуляции)

Перейти к макету 🧑‍💻

#практика | #макет

Задача на js: Найти общий элемент в двух отсортированных массивах

Даны два отсортированных массива, необходимо найти все элементы, которые присутствуют в обоих массивах.
Пример:

intersection([1, 2, 4, 5, 6], [2, 3, 5, 7]);
// Ожидаемый результат: [2, 5]

Условия:
Время работы: O(n + m), где n и m — длины двух массивов.
Эти задачи требуют различных подходов, от динамического программирования до использования хеш-таблиц, и охватывают широкий спектр навыков, полезных для разработки.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @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-дизайнер

#лучшеезанеделю

Как сделать сокращение длинного текста с тремя точками на конце на css?

CSS код:

-webkit-line-clamp: 3; 

(в этой строке пишем сколько строк должно показываться)

-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

#css|#полезности

Фишка с grid + place-items

Это помогает выравнивать элементы по вертикали и горизонтали с помощью лишь двух строк кода
place-items-это сокращение для justify-items и align-items.

#полезности

Как сделать круговой текст?

Попробуем реализовать эту задачу при помощи 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 Советов для Ускорения 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-код — это не просто текст, это фундамент любого сайта. Чем чище и качественнее он будет, тем проще с ним работать другим разработчикам.

#полезнаястатья

Selection и Range

Читать 👨‍💻

#js | #теория

Макет для тренировки (метры)

Перейти к макету 🧑‍💻

#практика | #макет