Frontend разработчик

Не торопитесь с использованием 'use client' в Next.js

👉 @frontend_1

1.8K views19:32

0:13

global-error.tsx отображается только в продакшене, а локально в Next.js — нет.

👉 @frontend_1

1.6K views06:36

Полный гайд по CSS Flexbox с примерами из практики

Это первая статья по HTML&CSS из серии. И начать я решил именно с Flexbox. В интернете уже довольно много гайдов по Flexbox в CSS. Но чаще всего это шпаргалки, которые не сильно помогают разобраться как на самом деле все работает. Я постараюсь раскрыть тему на реальных примерах. А в конце статьи поделюсь лайфхаками, которыми сам постоянно пользуюсь в работе.

Если вам больше нравится воспринимать информацию в видео-формате, то можете посмотреть ролик.

https://habr.com/ru/articles/816349/

👉 @frontend_1

1.4K viewsedited 14:07

💡Использование switch (true) в JavaScript

Большинство JavaScript-разработчиков знакомы с оператором switch (документация MDN), но для тех, кто только начинает изучать язык, давайте кратко разберём, как он работает.

Оператор switch позволяет сравнить выражение с одним из нескольких возможных случаев (case):


city = "London";

const getCountryByCity = () => {
 switch (city) {
  case "Edinburgh":
   return "Edinburgh is the capital city of Scotland";
  case "Madrid":
   return "Madrid is the capital city of Spain";
  case "London":
   return "London is the capital city of England";
  default:
   return "Cannot find which country this city is the capital of.";
 }
};

https://seanbarry.dev/posts/switch-true-pattern

👉 @frontend_1

1.2K views08:05

Открытый урок «Оптимизация работы компонентов в React.js».
Когда: 29 января в 20:00 мск.

На вебинаре вы узнаете:
- Как работать с оптимизацией в React.js
- Особенности работы функциональных компонентов и хуков
- Трюк с мемоизацией коллбеков для списка элементов

Встречаемся в преддверии старта курса «React.js Developer» Otus.
Все участники вебинара получат специальную цену на обучение!

Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cHW5Si

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

1.5K views09:03

Знаете ли вы, что в CSS можно определить поворот с помощью блока `turn`? 🤩

👉 @frontend_1

1.3K views20:55

Совет💡

Используй тригонометрические функции в CSS, чтобы создать плавный ступенчатый переход с задержкой 🎬


.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

👉 @frontend_1

Please open Telegram to view this post

VIEW IN TELEGRAM

1.2K views08:08

React 19: что нового в самой популярной библиотеке для создания интерфейсов? Узнайте первыми!

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

Хотите быть на пике технологий? На открытом вебинаре 6 февраля в 19:00 мск разберём, как применять нововведения React 19 в реальных проектах.

Все участники получат скидку на большое обучение «React.js Developer» — идеальный способ прокачать навыки.

Записаться: https://vk.cc/cI3b8C

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

1.0K views10:01

Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙

.

pop {
  view-timeline-name: --pop;
}
img {
  animation: slide both;
  animation-timeline: --pop;
  animation-range: entry 100% cover 50%;
}
.skateboarder {
  --x: 0;
  --y: -45%;
}
@ keyframes slide {
  to { translate: var(--x) var(--y); }
}

https://codepen.io/jh3y/pen/abPgrGR

👉 @frontend_1

1.0K views12:01

Forwarded from Яндекс

1:34

Media is too big

❤️ Как работает Perforator, который Яндекс выложил в опенсорс, и с чем его можно сравнить? Отвечает разработчик инструмента Сергей Скворцов.

Подписывайтесь ➡️ @yandex

Please open Telegram to view this post

VIEW IN TELEGRAM

1.0K views13:01