Вёрстка сайтов | HTML, CSS, JS

Куки в JavaScript: Как использовать и управлять

Читать 👨‍💻

#js | #теория

Эксперименты с CSS Grid: Создание асимметричных макетов

Читать 👨‍💻

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

Анимации с помощью Lottie и Bodymovin

Читать 👨‍💻

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

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

Лучшие статьи @free_html_lessons:
1. Карта расстояний на Vue.js
2. Что такое PWA
3. Ты наконец-то поймешь асинхронность в JS

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

Лучшие дизайн вакансии @job_webdesign:
1. ux/ui designer
2. web designer
3. Графический дизайнер

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

Рекурсивная сумма всех чисел в объекте

Напишите функцию, которая принимает объект и рекурсивно вычисляет сумму всех чисел, находящихся внутри него.
Если объект содержит вложенные объекты, необходимо рекурсивно проходить по ним.
Если внутри объекта есть нечисловые значения, их игнорировать.

Примеры:

Input: { x: 5, y: { z: 7, w: { v: -3, }, }, }
Result: 9
Input: { a: "text", b: { c: true, d: null, e: 5, }, }
Result: 5

#домашка

Макет для тренировки (образовательные технологии)

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

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

Карта расстояний на Vue.js

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

#практика

Что такое PWA и почему это важно для современного веба?

В мире современных технологий пользователи ожидают быстрые, удобные и надежные приложения. Здесь на помощь приходит концепция Progressive Web Apps (PWA) — прогрессивных веб-приложений.

Что такое PWA?
PWA — это веб-приложения, которые работают как нативные мобильные приложения. Они разрабатываются с использованием веб-технологий, таких как HTML, CSS и JavaScript, но обладают возможностями, которые раньше были доступны только нативным приложениям.

Основные характеристики PWA:
- Установка: PWA можно добавить на главный экран устройства без необходимости загрузки из магазина приложений.
- Высокая производительность: Кэширование позволяет сократить время загрузки.
- Обновления в реальном времени: Приложение всегда актуально, так как оно обновляется прямо с сервера.

Ключевые преимущества PWA
- Кросс-платформенность: Одно приложение работает на всех устройствах — компьютерах, планшетах и смартфонах.
- Экономия ресурсов: PWA занимают меньше места, чем нативные приложения, и не требуют установки через App Store или Google Play.
- Повышение вовлеченности: Благодаря push-уведомлениям и возможности работы офлайн, пользователи остаются дольше на сайте.
- Простая разработка: Нет необходимости писать код отдельно для Android и iOS.
Как PWA изменяет бизнес?
Компании, которые внедряют PWA, часто отмечают рост конверсий и снижение отказов. Примером может служить компания AliExpress: после перехода на PWA время, проводимое пользователями на сайте, увеличилось на 74%, а конверсии — на 104%.

PWA — это не будущее, а настоящее веб-разработки. Если вы хотите сделать ваш сайт быстрым, удобным и доступным для всех пользователей, рассмотрите возможность внедрения PWA уже сегодня!

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

Ссылки mailto: и tel:

Читать 🧑‍💻

#html | #теория

Ты наконец-то поймешь асинхронность в JS

Читать на habr 🧑‍💻

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

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

Лучшие статьи @free_html_lessons:
1. Атрибуты data-*
2. Вопросы по css на собеседовании
3. Анимация вращения текста на границе

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

Лучшие дизайн вакансии @job_webdesign:
1. ux/ui designer
2. digital designer
3. Графический дизайнер/веб-дизайнер

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

Получение значения из объекта по пути

Напишите функцию get(obj, path), которая принимает объект obj и строку path, представляющую путь к значению в объекте.
- Если путь существует, функция должна возвращать соответствующее значение.
- Если путь не существует, функция должна возвращать undefined.
- Путь передается в виде строки, разделенной точками (.).

Примеры:

Input: { a: { b: { c: "d" } } }, "a.b.c"
Result: "d"
Input: { a: { b: { c: "d" } } }, "a.b"
Result: { c: "d" }

#домашка

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

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

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

Анимация вращения текста на границе

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

#практика

Вопросы по css на собеседовании

Читать 👨‍💻

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

Изменение размера панелей на чистом css

Читать 👨‍💻

#практика

Атрибуты data-*

Читать 👨‍💻

#html | #теория

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

Лучшие статьи @free_html_lessons:
1. Вопросы и задачи из собеседований на js
2. Что такое SSL сертификат?
3. Как выбрать следующие элементы после выбранного?

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик + Frontend
2. frontend разработчик
3. Frontend developer

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер #junior
2. product designer
3. Web-дизайнер

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

Задача: Управление списком студентов

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

Дано:
Список студентов представлен в виде массива объектов. Каждый объект содержит имя студента и его оценки по различным предметам. Например:

const students = [
  { name: "Alice", grades: { math: 85, english: 92, history: 78 } },
  { name: "Bob", grades: { math: 90, english: 80, history: 85 } },
  { name: "Charlie", grades: { math: 72, english: 88, history: 95 } },
  { name: "David", grades: { math: 95, english: 91, history: 89 } },
  { name: "Eva", grades: { math: 87, english: 94, history: 76 } },
];

Задание:

1. Функция `getAverageGrade(subject)`**: принимает название предмета (например, `"math"`) и возвращает среднюю оценку по этому предмету для всех студентов.

2. Функция `getTopStudent(subject)`**: принимает название предмета и возвращает имя студента с самой высокой оценкой по этому предмету.

3. Функция getStudentReport(studentName)`**: принимает имя студента и возвращает строку с его средними оценками по всем предметам в формате: `"Alice: math - 85, english - 92, history - 78". Если студент не найден, функция должна вернуть строку "Student not found".

Пример выполнения:
иском студентов

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

Дополнительные условия:
- Постарайтесь сделать код чистым и читаемым.
- Используйте методы массивов, такие как map,Задача: УпЗадача: Упиадача: У


Эта задача помогает закрепить знания о работе с массивами и объектами, а также о методах работы с ними в JavaScript.

#домашка

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

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

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