Pull to refresh
8
Karma
0
Rating
Павел Щеголев @Carduelis

Principle Front-end Engineer

URL Search Params

Reading time 3 min
Views 3.1K
JavaScript *
Translation

Somehow I saw code in the project of a neighboring team that generated a string with URL parameters for subsequent insertion into the iframesrc attribute.

This article may seem superfluous, obvious or too simple, but since this occurs in wildlife, you should not be silent about it, but rather share best-practices.

Read more
Rating 0
Comments 0

Учимся правильно писать CSS классы в JSX

Reading time 5 min
Views 16K
JavaScript *Programming *ReactJS *

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

Где проблема актуальна? В экосистеме React, и где мы пользуемся замечательным синтаксисом под названием JSX.

В данной статье мы рассмотрим, почему стоит использовать библиотеку clsx практически в каждом React-проекте.

Читать далее
Total votes 5: ↑4 and ↓1 +3
Comments 25

React 17: Ничего нового?

Reading time 5 min
Views 22K
JavaScript *ReactJS *
Translation

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

Многообещающий Concurrent Mode не будет представлен в 17 версии, как и другие нововведения, над которыми активно работает команда. Грядущий релиз является частью стратегии постепенных обновлений.

Читать далее
Total votes 23: ↑23 and ↓0 +23
Comments 13

Микрофронтенды. Учимся на ошибках

Reading time 6 min
Views 11K
ReactJS *Microservices *
В этой статье я расскажу с какими проблемами удалось столкнуться при построении микрофронтендов, каким образом их можно было бы избежать, а также немного привнести полученного опыта в довольно редкоподнимаемую тему микрофронтендов.



Микрофронтенды на iframe


В одной компании взвешенным и обдуманным решением CTO было принято, что микрофронтендам наравне с микросервисами быть, причем сервировать их надо на iframe'ах.
Читать дальше →
Total votes 9: ↑9 and ↓0 +9
Comments 21

Генерация URL с параметрами на коленке и best practice

Reading time 3 min
Views 4.1K
JavaScript *
Tutorial

Как-то я увидел в проекте соседней команды код, который генерировал строку с URL-параметрами для последующей вставки в iframe src-атрибут.


Эта статья может показаться лишней, очевидной или слишком простой, но раз такое встречается в живой природе, об этом не стоит молчать, а наоборот, поделиться best-practices.


Итак, вот он, оригинальный код:


const createQueryString = (param1, param2, objectId, timestamp, name) => {
  const encodedTimestamp = encodeURIComponent(timestamp);
  const delimiter = '&';
  const queryString = `${param1}${delimiter}
        param2=${param2}${delimiter}
        objectId=${objectId}${delimiter}
        itemTimestamp=${encodedTimestamp}${delimiter}
        itemName=${name}`;
  return queryString.replace(/ /g, '%20');
};

Для справки, param1 и param2 в оригинальном коде имеют говорящие названия. А их значения могут быть любыми строками с множеством невалидных для URL символов

Читать дальше →
Total votes 12: ↑12 and ↓0 +12
Comments 3

Динамический рендеринг на Next.js

Reading time 4 min
Views 18K
JavaScript *Node.JS *ReactJS *Search engine optimization *
Tutorial

Кеширование и серверный пререндеринг (SSR)


Приложение на Next.js (React) имеет из коробки серверный пререндеринг страниц. Это очень хорошо для SEO, и для FMP метрики — время от открытия страницы до первого значимого контента.



Казалось бы, фреймворк умеет в SSR из коробки, зачем вообще писать статью? Есть один нюанс, мы рендерим страницу дважды: сначала на сервере, потом на клиенте, и общее время загрузки неизбежно увеличивается.

Читать дальше →
Total votes 6: ↑5 and ↓1 +4
Comments 4

Анонс новой версии Styled Components v5: Звериный оскал

Reading time 3 min
Views 5K
CSS *JavaScript *ReactJS *
Translation


Мы очень рады анонсировать новую пятую версию styled-components! Новая версия полностью обратно совместима с предыдущей при условии использования React^16.8.


Бету пятой версии можно попробовать уже сейчас:


npm install styled-components@beta

Нужна версия React, поддерживающая React.hooks, т.е. react@^16.8 react-dom@^16.8 react-is@^16.8


А теперь об изменениях!


Быстро. Еще Быстрее. Styled-Components.


Когда больше чем 2 года назад мы выпустили вторую версию, мы обещали фокусироваться на производительности. Мы уже сильно ускорили работу библиотеки в течение нескольких релизов. Так, мы получили десятикратное увеличение скорости в версии 3.1 и еще 25% ускорение в версии 4.


К пятой версии, библиотека styled-components стала еще быстрее! Сравнивая с 4 версией, мы получили:


  • на 19% меньший размер минифицированного кода (16.2kB vs. 13.63kB min+gzip) ️
  • на 18% быстрее инициализация на клиентской стороне
  • на 17% быстрее обновление динамических стилей
  • на 45% (!!!) быстрее серверный рендеринг
Читать дальше →
Total votes 12: ↑10 and ↓2 +8
Comments 8

Как мы на React 16 переезжали

Reading time 6 min
Views 15K
JavaScript *ReactJS *
Tutorial
Recovery mode
Translation
image

Facebook переписал большую часть React'а и выпустил 16 версию. React 16 был очень ожидаемым обновлением, особенно ввиду нового способа рендеринга Fiber, который сильно повышает производительность. Команда разработчиков React в последней версии усердно помечала методы и пакеты устаревшими (deprecated), и мы видели их предупреждения в консоли. В действительности же, миграция не так проста для большого проекта.

Мы в Discord только что запустили обновление нашего приложения на основе React 16 и хотим поделиться нашим опытом, который мы получили в ходе миграции.
Читать дальше →
Total votes 12: ↑11 and ↓1 +10
Comments 23

Почему я перешел с React на Cycle.js

Reading time 9 min
Views 18K
JavaScript *ReactJS *
Recovery mode
Translation

Нетрудно догадаться, что большинство разработчиков сейчас используют какие-либо фреймворки для разработки приложений. Они помогают нам структурировать сложные приложения и экономят время. Каждый день можно наблюдать большое количество обсуждений, какой фреймворк лучше, какой нужно учить, и тому подобное. Так что, в этот раз я поделюсь своим опытом и отвечу на вопрос: «Почему я перешел на Cycle.js с React?».


React, возможно, самый популярный frontend-фреймворк (на момент 2017) с огромным сообществом. Я большой фанат этого фреймворка и он мне помог изменить взгляд на веб-приложения и их разработку. Некоторые любят его, а кто-то считает, что он не так хорош.


Большинство использует React без мысли о том, что есть лучший инструмент или способ разработки веб-приложений. Это дало мне толчок попробовать Cycle.js, как новый реактивный фреймворк, который становится все более и более популярным изо дня в день.


И в этой статье я хочу объяснить:

  1. Что такое реактивное программирование
  2. Как работает Cycle.js
  3. И почему он, на мой взгляд, лучше React
Читать дальше →
Total votes 28: ↑24 and ↓4 +20
Comments 24

Несколько советов less-разработчику

Reading time 7 min
Views 20K
Website development *CSS *
Tutorial
Зачастую, создавая less-файлы (что, впрочем, касается и других препроцессоров css), мы гонимся за красотой и элегантностью less-кода, когда как частенько забываем про скомпилированный css-код. Иногда это влечет за собой критичные последствия, когда объем конечного css возрастает в раз, а код становится совершенно нечитаемым.
Я хочу писать правильный код!
Total votes 22: ↑16 and ↓6 +10
Comments 14

Делаем css-спрайты отзывчивее на retina-дисплеях и не только [less]

Reading time 5 min
Views 25K
Website development *CSS *
Tutorial
image

Зачем нам вообще нужны спрайты?


Напишу лишь вкратце зачем это нужно, так как на хабре уже много раз описывали преимущества и недостатки css-спрайтов.
  • Во-первых, используя спрайты, мы ускоряем загрузку страницы; в случае использования иконок, можно создать универсальное средство для применения в проектах;
  • Во-вторых, не все устройства с высоким ppi (например, Windows Phone 7.5-7.8, Android до 4 версии на стоковом браузере) поддерживают использование webfonts.
  • Легкая интеграция, используя специальные сервисы генерации спрайтов

Постановка проблемы или чтобы жизнь малиной не казалась


Используя css-спрайты со множеством элементов встает проблема о создании css-свойств с background-position; Их нужно писать много, иногда очень много. Конечно, нам помогают многие сервисы по генерации спрайтов — они выдают вместе со спрайтом еще и css/less/sass — файл с координатами. Но практически всегда все жестко завязано на пикселях:
  • Изменяя размер (например, для retina-экранов) исходного файла-спрайта все «едет»;
  • Мы не можем изменять размер элемента-контейнера, куда хотим вставить, допустим, иконку, чтобы эта иконка смасштабировалась: свойства background-size: cover/contain/100% не работают по понятным причинам;

Используя спрайты, подготовленные для 72ppi, на телефонах, планшетах и новых retina-ноутбуках вызывает размытие изображений, и выглядят некрасиво...
Читать дальше →
Total votes 19: ↑15 and ↓4 +11
Comments 32

Зверюшки на CSS3 transitions & transforms

Reading time 4 min
Views 30K
Web design *Vector graphics *
Recovery mode
Sandbox

Пора


Одним прекрасным вечером увидел одну забавную картинку с подобными зверюшками и решил вдохнуть в них жизнь. Решил я это сделать ради научного эксперимента: выявить, действительно ли эти нововведения можно претворять в жизни.
Более 65% пользователей уже могут увидеть transitions в действии.

CSS


Демо Код на jsfiddle
Так как я люблю CSS, решил сделать интерактивных зверюшек на чистом CSS, без каких-либо скриптов.
Благодаря псевдоклассу :checked, можно реализовать действие по клику, что обычно приписывается на js. А также используя уже привычные псевдоклассы :hover и :active, я оживил зверюшек:
.pavepy .body .hand.left,
.pavepy:hover .body .hand.right,
input:checked + .pavepy .body .hand.right,
input:checked + .pavepy:hover .body .hand.left,
input:checked + .pavepy.fox .head .ear.right {
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg); 
	transform: rotate(-30deg);
}

Читать дальше →
Total votes 22: ↑18 and ↓4 +14
Comments 17

Information

Rating
Does not participate
Location
Amsterdam, Noord-Holland, Нидерланды
Date of birth
Registered
Activity