Задача на js: Перестановки

Напишите функцию, которая принимает строку и возвращает все возможные перестановки символов этой строки.
Пример:

permute("abc");
// Ожидаемый результат: ["abc", "acb", "bac", "bca", "cab", "cba"]

Условия:
Время работы: O(n!)
Использовать рекурсию для решения задачи.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Progressive Enhancement
2. REST API
3. Что нового в ES2023

Лучшие фронтенд вакансии @job_webdev:
1. Разбор вакансии: Junior Frontend Developer
2. HTML-верстальщик
3. Frontend разработчик (React)

Лучшие дизайн вакансии @job_webdesign:
1. UI/UX дизайнер
2. Подготовка к собеседованию на веб-дизайнера
3. UI/UX дизайнер

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

Градиентый border на карточках

Смотреть на codepen 👨‍💻

#какэтосделать

Анимированная буквицы (Drop cap)

Смотреть на codepen 👨‍💻

#практика

Преимущества и недостатки CSS-in-JS

Читать 👨‍💻

#полености

Тег <samp>

Тег <samp> в HTML предназначен для отображения текста, представляющего вывод программы или системы. Это отличный способ выделить текст, демонстрирующий, что программа выдала в ответ на команду пользователя.

Как работает <samp>?
Этот тег обычно используется для оформления сообщений об ошибках, системных уведомлений и других текстов, которые нужны для показа результата программы. Например:

<p>Ошибка: <samp>Файл не найден</samp></p>

В браузере этот текст обычно будет выглядеть так, как будто он написан моноширинным шрифтом, что помогает визуально отличить его от основного содержимого страницы.

Когда использовать <samp>?
Отображение вывода кода или команд.
Системные сообщения и уведомления.
Демонстрация примеров ответов программ.

#html | #теория

Адаптивный дашборд на react и tailwind

Смотреть на codepen 👨‍💻

#практика

Задача на 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 | #теория