Меню для отзывчивого интерфейса без скриптов

Простое и понятное меню навигации — важнейшая часть удобного интерфейса. Отзывчивость меню тоже критична, ведь сейчас более половины всего интернет-трафика приходится на мобильные устройства.
В подходе mobile-first разработка начинается с самого маленького экрана — мобильного, и по мере увеличения ширины добавляются новые стили и элементы. В итоге страница автоматически подстраивается под размер окна браузера.
Хотя адаптивное меню — ключевой элемент хорошего UX, для его реализации не обязательно использовать JavaScript. В этом руководстве мы покажем, как сделать отзывчивое mobile-first меню только с помощью HTML и CSS.

👉 @frontendInterview

Автовыведение типов в TypeScript: мощь дженериков и функций

Я уже более 7 лет активно использую TypeScript, применяя его в самых разных сценариях — от простых типизированных переменных до сложных условных типов и интерполяции. Однако TypeScript продолжает удивлять: сегодня я открыл для себя ещё один элегантный сценарий использования автовыведения типов в дженериках и функциях.

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

👉 @frontendInterview

Формошлёп — сотни хаков для фронтендеров в одном месте

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

👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.

Исторические кадры: джун устраивается на работу и показывает свои проекты

👉 @frontendInterview

​Какие популярные подходы и инструменты существуют для работы с Redux?

Для упрощения работы с Redux и повышения эффективности разработки вокруг него возникло несколько популярных подходов и инструментов. Эти подходы помогают решать типичные проблемы, связанные с бойлерплейтом, управлением асинхронными операциями и повторным использованием логики. Рассмотрим некоторые из них:

Redux Toolkit (RTK)
Это официальный инструмент, предназначенный для упрощения работы с Redux. Он предоставляет набор утилит, которые помогают сократить количество бойлерплейта при инициализации хранилища, создании редюсеров и действий. Он включает в себя такие функции, как configureStore, createReducer, createAction, и createSlice, которые значительно упрощают процесс работы с состоянием.

Redux Saga
Это библиотека, предназначенная для управления асинхронными операциями (например, доступом к данным, чистыми функциями для побочных эффектов) в приложениях React с использованием Redux. Саги написаны с использованием генераторов, что облегчает управление сложными потоками асинхронных действий.

Redux Thunk
Это промежуточное программное обеспечение (middleware) для Redux, позволяющее диспетчеризации функций вместо действий. Это позволяет откладывать выполнение действия или диспетчеризировать только при выполнении определённых условий. Thunk часто используется для работы с асинхронными запросами.

Reselect
Это библиотека для создания "мемоизированных" селекторов. Селекторы позволяют вычислять производные данные, основываясь на состоянии Redux, и эффективно пересчитывать результаты только при изменении соответствующих частей состояния. Это улучшает производительность, особенно в сложных приложениях.

Normalizr
Это библиотека для нормализации вложенных JSON структур. В контексте Redux она помогает преобразовать вложенные данные в плоскую структуру, что упрощает хранение и манипуляцию данными в хранилище.

Immutable.js
Предоставляет коллекции неизменяемых данных, которые помогают эффективно работать со сложными структурами данных. Неизменяемость данных упрощает отслеживание изменений, повышает производительность приложения и упрощает разработку.

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

👉 @frontendInterview

You don't know JS - Замыкания и объекты

Каким бы опытом программирования на JavaScript вы ни обладали, скорее всего, вы не понимаете язык в полной мере. Это лаконичное, но при этом глубоко продуманное руководство познакомит вас с областями видимости, замыканиями, ключевым словом this и объектами – концепциями, которые необходимо знать для более эффективного и производительного программирования на JS. Вы узнаете, как и почему они работают, и как замыкания могут стать эффективной частью вашего инструментария разработки.
Как и в других книгах серии «Вы не знаете JS», здесь рассматриваются нетривиальные аспекты языка, от которых программисты JavaScript предпочитают держаться подальше. Вооружившись этими знаниями, вы достигнете истинного мастерства JavaScript.

👉 @frontendInterview

List Filtering

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

Пример

filter_list([1,2,'a','b']) == [1,2]
filter_list([1,'a','b',0,15]) == [1,0,15]
filter_list([1,2,'aasf','1','123',123]) == [1,2,123]

👉 @frontendInterview

​Что делает $emit во Vue?

$emit — это метод, используемый для отправки событий из дочернего компонента в родительский компонент. Он позволяет дочернему компоненту уведомлять родительский компонент о том, что что-то произошло, передавая вместе с этим событием любые необходимые данные.

Как его использовать
1. В дочернем компоненте:
- Используйте метод $emit, чтобы отправить событие.
- Передайте имя события и любые данные, которые нужно передать родительскому компоненту.

2. В родительском компоненте:
- Слушайте это событие, используя директиву v-on или её сокращение @.
- Обработайте событие в методе родительского компонента.

Дочерний компонент (ChildComponent.vue)

<template>
  <button @click="notifyParent">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childClicked', 'Данные от дочернего компонента');
    }
  }
}
</script>

Родительский компонент (ParentComponent.vue)

<template>
  <div>
    <h1>Родительский компонент</h1>
    <child-component @childClicked="handleChildClick"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(message) {
      console.log('Событие от дочернего компонента:', message);
    }
  }
}
</script>

Пояснение
1. В дочернем компоненте `ChildComponent`:
- Мы создали кнопку и добавили к ней обработчик события @click, который вызывает метод notifyParent.
- Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных.

2. В родительском компоненте ParentComponent:
- Мы добавили дочерний компонент <child-component> в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked.
- Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль.

Почему это важно?
- Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому.
- Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события.
- Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения.

👉 @frontendInterview

Как настроить баннер cookie-согласия по требованиям GDPR, Google Consent Mode и законодательства разных стран

В современном вебе защита персональных данных – неотъемлемая часть ответственной разработки. Один из ключевых элементов – получение согласия пользователя на использование cookie-файлов. Несоблюдение этих требований может повлечь не только серьёзные штрафы, но и подорвать доверие аудитории.

В этой статье мы разберём:
- Зачем нужно согласие на cookie?
- Какие бывают типы cookie?
- Что такое Google Consent Mode?
- Как реализовать баннер согласия?
- Как управлять куки в зависимости от предпочтений пользователя?
- Как проверить, что настройки согласия работают?

А также приведем примеры политик использования файлов cookie.

👉 @frontendInterview

Как сделать мобильное приложение, если у тебя лапки? Путь от PWA до TWA

Если вы веб-разработчик, но руки «чешутся» написать мобильное приложение, варианты есть. В этой статье я расскажу, как создать собственное прогрессивное веб-приложение (PWA) и доработать его до TWA, чтобы потом протестировать и опубликовать в разных сторах. Никакого rocket science, просто небольшое пособие, которое основывается на моем опыте.

👉 @frontendInterview

Я: «Сегодня усердно поработаю.»
Также я, через минуту после включения компа:

👉 @frontendInterview

​Как добавить слушатель события?

Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.

Почему это нужно?
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.

Как это используется?
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.

Чистый JavaScript
Для добавления слушателя события используется метод addEventListener.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

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

React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

Пример:

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

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

jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

В этом примере мы используем jQuery для добавления обработчика события click к кнопке.

Почему это удобно и важно:
- Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.
- Гибкость: Возможность реагировать на различные действия пользователей.
- Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.

👉 @frontendInterview

Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL

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

👉 @frontendInterview

Это треугольник?

Реализуйте функцию, принимающую 3 целых значения a, b, c. Функция должна возвращать true, если треугольник может быть построен со сторонами заданной длины, и false в любом другом случае.

Пример:
isTriangle(1,2,2) = true

👉 @frontendInterview