Frontender's notes [ru]

В университете я совсем не изучал разработку, но когда настало время выбрать специальность, я понял, что на тот момент web разработка была самым лучшим вариантом. Мне не хотелось решать какие-то упражнения, я хотел делать проекты. И я решил делать развлекательный портал. На тот момент мне казалось, что я хочу стать PHP разработчиком, поэтому я стал делать проект именно на нём. В процессе изучения, я понял, что мне интересен frontend и я сделал небольшой проект и c использованием JavaScript и React. Это также помогло мне закрепить то, что я изучил, на практике. В процессе трудоустройства, я мог показать, что я действительно что-то сделал. Также я в открытую писал в своих резюме, что я работал над своими проектами, что и было моим опытом работы. Помню, что на первом месте работы мне организовали большое review кода. Даже подумывали взять на middle позицию, но отсутствие коммерческого опыта не дало это сделать. Я считаю, что именно те проекты помогли мне найти свою первую работу.

Путь разработчика

👩‍💻 Element.closest()

Метод Element.closest() ищет и возвращает ближайший (начиная с самого элемента) родительский элемент, соответствующий указанному CSS-селектору. Если ни один элемент не соответствует указанному CSS-селектору, возвращается null.

Типичный пример использования Element.closest() — определение области действия при клике. Допустим у нас есть множество кнопок, находящихся во вложенных контейнерах. Необходимо найти ближайший к нажатой кнопке контейнер.

<div class="container main-container">
<button id="1">Кнопка 1</button>
<div class="container parent-container">
<button id="2">Кнопка 2</button>
<div class="container child-container">
<button id="3">Кнопка 3</button>
</div>
</div>
</div>

const mainContainer = document.querySelector('.main-container')

mainContainer.addEventListener('click', function (e) {
const targetElem = e.target

if (targetElem.tagName !== 'BUTTON') {
// Eсли клик выполнен не на кнопке ничего не делаем
e.stopPropagation()
return
}

const containerElem = targetElem.closest('.container')
// Выводим в консоль контейнер, содержащий нажатую кнопку
console.log(containerElem)
})

👩‍💻 Figma запустила бета-версию Code Connect для дизайн-систем клиентов

Figma объявила о выпуске бета-версии Code Connect — функции, созданной для упрощённого внедрения дизайн-систем. Это позволит дизайнерам и разработчикам эффективно сотрудничать в рамках различных рабочих процессов.

Code Connect — это утилита, предоставляемая через npm для проектов JavaScript и TypeScript, а также как диспетчер пакетов Swift для проектов SwiftUI. В ближайшее время появится дополнительная поддержка платформ.

Вот пример того, как выглядит внедрение Code Connect в систему:

import * as figma from '@figma/code-connect'

figma.connect(Button, 'https://...', {
  props: {
    label: figma.string('Text Content'),
    disabled: figma.boolean('Disabled'),
    type: figma.enum('Type', {
      Primary: 'primary',
      Secondary: 'secondary',
    }),
  },
  example: ({ disabled, text, type }) => {
    return (
      <Button disabled={disabled} type={type}>
        {text}
      </Button>
    )
  },
})

👩‍💻 Работа с графиками в SwiftUI: руководство для начинающих

Хотите, чтобы визуальный контент приложения был представлен в виде функциональных графиков? Воспользуйтесь руководством по работе со Swift Charts. Оно поможет освоить процесс создания и настройки диаграмм с возможностями модифицирования, комбинирования и интерактивности.

Читать...

Ответ:

Anonymous Quiz

72% - 10

15% - undefined

6% - Ошибка

7% - Ничего не будет выведено

👩‍💻 Что будет выведено в консоль?

👩‍💻 :checked в CSS

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

После селектора, который выбирает элемент чекбокса или радиокнопки, ставим двоеточие и пишем ключевое слово checked:

option:checked {
  background-color: #2E9AFF;
  color: #18191C;
}

👩‍💻 10 CSS-однострочников для преобразования веб-приложения

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

Читать...

⚙️ Создание анимированного заголовка с эффектом наведения на CSS

В этом примере мы создадим анимированный заголовок для вашего веб-сайта с использованием CSS. Заголовок будет обладать эффектом изменения цвета при наведении курсора.

<h1 class="animated-heading">Добро пожаловать!</h1>

.animated-heading {
  font-size: 36px;
  color: #333;
  transition: color 0.3s ease;
}

.animated-heading:hover {
  color: #ff6347; /* Изменение цвета при наведении */
}

GitVerse – теперь и для малого и среднего бизнеса

На онлайн-презентации «GitVerse: открой вселенную кода» СберТех рассказал про новые фичи платформы. Cреди них – CI/CD-инструменты, ускоряющие разработку, и новые функции GigaCode – персонального AI-ассистента разработчика (AI, artificial intelligence — искусственный интеллект).

Но это еще не все: теперь возможности GitVerse доступны не только индивидуальным разработчикам, но и малому и среднему бизнесу. Это очень удобно: можно организовывать совместную работу команды с GitVerse и управлять доступами к своим репозиториям.

Готовы попробовать? Присоединяйтесь.

👩‍💻 Как оживить фронтенд: 8 лучших JS-библиотек для анимации

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

Читать...

Ответ:

Anonymous Quiz

4% - 1 и 1

11% - 1 и 2

57% - 2 и 1

28% - 2 и 2

👩‍💻 Что будет выведено в консоль?

:target в CSS

Есть ссылки, которые ведут не просто на страницу, а на конкретный HTML-элемент внутри. Псевдокласс :target управляет стилем этого элемента.

После любого селектора ставим двоеточие и пишем ключевое слово target.

.title {
  color: black;
}

.title:target{
  color: pink;
}

p:target::before {
  content: '';
  font-size: 10px;
  color: yellow;
}

«Это я кнопку покрасил 😎»

Фронтендеры и все, кто в теме

24 апреля в 19:00 (мск) пройдёт ежегодная встреча Frontend Mix от ЮMoney – онлайн для всех и офлайн для Санкт-Петербурга.

На митапе эксперты ЮMoney и VK Музыки расскажут, как создают продукты и внедряют новые решения.

В этом году вас ждут четыре свежих доклада:

🟣Инфраструктура CI/CD в ЮMoney.
🟣От A до PWA: путь к Progressive Web App.
🟣Frontend Fortified: как стать неприступным для атак.
🟣Переход к Node. js 20: теория и практика.

Регистрация и все подробности — на сайте Frontend Mix 🙌🏼

👩‍💻 Что такое this? Отличие this в function declaration и стрелочных функциях

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

Функции (function declaration):

• В функциях объявления значение this определяется во время выполнения функции, в зависимости от способа вызова функции.

• Если функция вызывается как метод объекта, то this ссылается на сам объект, на котором вызывается метод.

• Если функция вызывается как обычная функция, то this ссылается на глобальный объект (в браузере это объект window).

function sayHello() {
  console.log(this.name);
}

const person = {
  name: 'John',
  sayHello: sayHello
};

person.sayHello(); // Выводит 'John'

const greet = person.sayHello;
greet(); // Выводит undefined

const person = {
  name: 'John',
  sayHello: function() {
    const greet = () => {
      console.log(this.name);
    };
    greet();
  }
};

person.sayHello(); // Выводит 'John'

👩‍💻 React-хуки useEffect и useLayoutEffect: различие и примеры использования

Понимание поведения хуков useEffect и useLayotEffect  -  ключ к оптимизации производительности React-приложения и обеспечению плавного взаимодействия с пользователем. Выясните, в чем разница между этими хуками, чтобы знать наверняка, когда и как их использовать.

Читать...

👩‍💻 8 репозиториев, которые используют продвинутые React-разработчики

Хотите узнать, какие репозитории пользуются популярностью у продвинутых IT-специалистов? В этом списке собраны лучшие платформы, к которым регулярно обращаются профессиональные программисты.

Читать...