👩‍💻 VS Code на максималках: 15 крутых расширений для фронтендера

Собрали для вас 15 плагинов, которые облегчат жизнь веб-разработчику. Тут всё: от работы с HTML до интеграции с Figma и Docker.

Читать...

👩‍💻 Which are in?

Данные два массива строк a1 и a2 возвращают отсортированный массив r в лексикографическом порядке строк a1, которые являются подстроками строк a2.

Пример кода:

a1 = ["arp", "live", "strong"]
a2 = ["lively", "alive", "harp", "sharp", "armstrong"]

вернет ["arp", "live", "strong"]

a1 = ["tarp", "mice", "bull"]
a2 = ["lively", "alive", "harp", "sharp", "armstrong"]

вернет []

Решение задачи🔽

function inArray(array1, array2) {
return array1.filter(str1 =>
array2.some(str2 => str2.includes(str1))
).sort();
}

// Примеры использования:
let a1 = ["arp", "live", "strong"];
let a2 = ["lively", "alive", "harp", "sharp", "armstrong"];
console.log(inArray(a1, a2)); // вернет ["arp", "live", "strong"]

a1 = ["tarp", "mice", "bull"];
a2 = ["lively", "alive", "harp", "sharp", "armstrong"];
console.log(inArray(a1, a2)); // вернет []

👩‍💻 Как реализовать feature gate в React

Предлагаем доступное руководство по реализации feature gate. Этот простой, но мощный механизм позволит легко управлять выпуском новых функций.

Читать...

👩‍💻 Как инженеру-программисту Reactjs перейти на Swift и SwiftUI

Узнаем, как плавно перейти с ReactJS на Swift и SwiftUI. Для этого сопоставим их наиболее распространенные шаблоны проектирования.

Читать...

👩‍💻 Введение в Page Visibility API

Познакомимся с Page Visibility API, рассмотрим его назначение, принцип работы, область применения и практические примеры.

Читать...

👩‍💻 Text-Animation-test

Простая сцена с анимированным текстом. Сделан на чистом CSS.

Открыть код...

👩‍💻 Учебник по JavaScript: работа с объектами

Статья охватывает все аспекты типа Object: создание, наследование, работа с полями и сериализация. Новички освоят базовые концепции языка, а продвинутые пользователи освежат в памяти знания.

Читать...

👩‍💻 Полезная шпаргалка по хукам в React

Хуки — это функции, которые позволяют легко управлять состоянием компонентов в React. Новички смогут быстрее понять, как всё работает, а опытные разработчики смогут закрыть свои вопросы.

Читать...

👩‍💻 Обзор курса “Полное введение в React” от Frontend Masters

Стоит ли тратить время и деньги на изучение курса “Полное введение в React, v8” от Frontend Masters? Ответить на этот вопрос поможет подробный обзор курса с оценкой его содержания, структуры, подхода к обучению и результатов, которых можно достигнуть.

Читать...

👩‍💻 3D wave animation

Анимированная галерея с эффектом волны. Сделана на чистом CSS.

Открыть код...

🔝 Самые интересные статьи за последние дни:

• Как я стал сертифицированным разработчиком Vue.js: вся правда об экзамене

• Pipelining & Composing: улучшаем читаемость кода. Реализация на TypeScript

• Что почитать начинающим разработчикам: подборка книг по JavaScript

• Создание полного Fast-API сервиса с фронтендом и деплоем за полчаса

• ХрюХрюКар: как перестать беспокоиться, начать создавать сервисы и обзавестись друзьями

➡️ 5 стратегий рендеринга веб-страниц: как выжать максимум из вашего сайта

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

Читать...

👩‍💻 7 GitHub-проектов, которые нужны каждому JavaScript-разработчику

Прокачиваем свои навыки в JavaScript с этими семью топовыми репозиториями на GitHub.

Читать...

👩‍💻 Data Reverse

Получен поток данных, который необходимо обратить вспять.

Каждый сегмент имеет длину 8 бит, что означает, что порядок этих сегментов должен быть изменен, например:

11111111  00000000  00001111  10101010
 (byte1)   (byte2)   (byte3)   (byte4)

должен стать:

10101010  00001111  00000000  11111111
 (byte4)   (byte3)   (byte2)   (byte1)

Общее количество битов всегда будет кратно 8.

Данные даны в виде массива:

[1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0]

Решение задачи🔽

function dataReverse(data) {
const segmentSize = 8;
const segments = [];

// Разделяем массив на сегменты по 8 бит
for (let i = 0; i < data.length; i += segmentSize) {
segments.push(data.slice(i, i + segmentSize));
}

// Обращаем порядок сегментов
segments.reverse();

// Объединяем сегменты обратно в один массив
return [].concat(...segments);
}

// Пример использования:
const data = [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1,0,1,0];
const reversedData = dataReverse(data);
console.log(reversedData);
// Вывод: [1,0,1,0,1,0,1,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1]

⚙️ Шаблоны рендеринга Next JS: полное руководство

Изучите механизм выполнения, назначение, особенности использования, преимущества и ограничения каждого из основных шаблонов рендеринга. Овладение этими знаниями позволит решить многие проблемы, связанные со скоростью загрузки, поддержкой состояний, интерактивностью, обновлением данных и SEO-рейтингом страниц приложения.

Читать...

👩‍💻 Приложение для прогноза погоды на Vue JS

В данной статье описывается созданный Vue JS проект для извлечения данных о погоде на основе местоположения, которое задает пользователь.

Читать...

❓ Фронтенд-разработка: чем занимаются и сколько зарабатывают специалисты

Профессия фронтенд-разработчика сейчас в числе самых востребованных в IT. Разбираем базовые вопросы для тех, кто планирует стать фронтенд-разработчиком.

Читать...

👩‍💻 light/dark mode

Анимированное переключение светлой и темной темы. Сделано на Pug и SCSS.

Открыть код...

🔝 Самые интересные статьи за последние дни:

• PHP и Laravel дайджест новостей за июль 2024 года

• PWA vs Native: где приложения для iOS и Android больше никогда не пригодятся

• Нагрузочное тестирование в разработке веб-приложений

• Анимации Hover и эффекты Blur: Полный гид по созданию динамических карточек

• Как работать удаленно, мои наблюдения и рекомендации

🔄 React не обязателен: 5 крутых альтернатив для фронтенда

React — топовый инструмент для создания интерфейсов, но не всегда он лучший выбор. Иногда есть более простые и эффективные библиотеки и фреймворки, которые могут подойти лучше.

Читать...

👩‍💻 Абортим асинхронные задачи в JavaScript с методами AbortSignal.timeout() и AbortSignal.any()

Скорее всего, ты ещё не слышал про два полезных метода в JavaScript — AbortSignal.timeout() и AbortSignal.any(). Они помогают правильно останавливать асинхронные операции и работают в большинстве веб-браузеров.

Читать...