Получи случайную криптовалюту за регистрацию!

Будни разработчика

Логотип телеграм канала @htmlshit — Будни разработчика Б
Логотип телеграм канала @htmlshit — Будни разработчика
Адрес канала: @htmlshit
Категории: Дизайн , Технологии
Язык: Русский
Количество подписчиков: 11.63K
Описание канала:

Блог Senior JS-разработчика из Хельсинки
Автор: @bekharsky
По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv
Чат: https://t.me/htmlshitchat

Рейтинги и Отзывы

3.00

3 отзыва

Оценить канал htmlshit и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.

5 звезд

0

4 звезд

0

3 звезд

3

2 звезд

0

1 звезд

0


Последние сообщения 3

2023-06-27 18:54:14
#баг дня

Встречали ли вы баги, которым восемь лет?

А вот есть такие! Причём, казалось бы, подобное уже давно должно было быть решено... но нет.

Итак, встречайте: https://bugs.chromium.org/p/chromium/issues/detail?id=507397

Суть бага в следующем: для inline-flex контейнера (а ранее и для flex) неверно рассчитывается ширина (а у кого-то и высота) в случае column wrap раскладки (flex-flow). Демо: https://codepen.io/anon/pen/pJLwYp

Смешное хотите? Microsoft Edge, который ещё на старом движке почти от IE, с этим справлялся без проблем. А вот все современные браузеры так или иначе валились.

Исправлено в грядущем Chrome 116.

#bug #chrome #edge #flex
1.9K viewsSergey Bekharsky, 15:54
Открыть/Комментировать
2023-06-27 09:45:16
#расширение дня

А что, если история гита может быть представлена не в виде вертикального списка?

А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?

А что, если можно не открывать интерфейс git blame на каждый чих?

Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.

Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

Всем git, котаны!

P. S. вы же в курсе, что устанавливать расширения можно из консоли?

Как-то так:

code --install-extension pomber.git-file-history


Если команда code недоступна, решение тут.

#git #history #vscode
2.2K viewsSergey Bekharsky, edited  06:45
Открыть/Комментировать
2023-06-26 15:05:41
#инструмент дня

Перфекционисты тут?

Не так давно Андрей Ситник в Твиттере поднял тему красивого кода. В данном случае под красивым кодом подразумевалась сортировка импортов (и экспортов) модулей и методов.

И вот он, ESLint плагин для всяческой упоротой и не очень сортировки импортов: https://github.com/azat-io/eslint-plugin-perfectionist

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

По мне, честно говоря, ну такое себе... Но я тоже стараюсь сначала импортировать типы, как минимум.

А если вы когда-нибудь вообще задавались вопросом, где зона ответственности Prettier, а где — ESLint (или любых других), на эту тему имеется соответствующая статья: https://blog.joshuakgoldberg.com/the-blurry-line-between-formatting-and-style/

TL;DR: всё, что меняет AST (пара постов выше) — зона ответственности линтера. А красотули — форматтера.

Всем perfection, котаны!

#js #eslint #beauty
1.9K viewsSergey Bekharsky, 12:05
Открыть/Комментировать
2023-06-26 08:46:16
#фишка дня

Кому немного зла, близкого к абсолютному? :)

Как превратить вообще все ссылки в вашем проекте в управляемые вашим роутером? В нашем случае, либо Next.js либо react-router. Да очень просто: https://gist.github.com/devongovett/919dc0f06585bd88af053562fd7c41b7

На скриншоте есть ошибка, кто найдет — возьмет с полки пирожок.

Но если я такое увижу в новом проекте... не надо :) Это крайний случай.

#react #router #hack
1.8K viewsSergey Bekharsky, 05:46
Открыть/Комментировать
2023-06-25 18:57:37
#статья дня

Итак. Я когда-то вам разгонял про фреймворк RICE. И нет, это не про джаббаскрипт, это про работу. Как сортировать задачи, грубо говоря. Что важно, что менее важно. А что не нужно. Вот тут: https://t.me/htmlshit/1249

Думаете, это просто теория? Вот и народ из Shopify тоже так думал, а в итоге стали переводить своё мобильное приложение на React Native согласно приоритетам, рассчитанным по RICE. Золушки, ага.

На самом деле все логично: бахнуть разом огромное приложение на новую технологию невозможно, но и вслепую выбирать экраны для переделки — тоже. Добавление же экранов в новой технологии не решит проблему наличия старых и их поддержки. Так что пришлось подумать.

Собственно, вот оно: https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native

Получилось долго
.

#react #native #rice #бородач
1.8K viewsSergey Bekharsky, edited  15:57
Открыть/Комментировать
2023-06-25 09:00:00
#фишка дня

Презентации Apple — событие больше культурное, чем технологическое. Даже если они показывают что-то переворачивающее мир. Ясно, что кто не захочет — тот не перевернётся.

Ну, кроме шуток, люди не ставят массово напоминания о презентациях Google и Samsung или Huawei. Не транслируют их построчно.

Зато по какой-то причине (миллион хомячков) к презентациям яблока находятся энтузиасты, которые повторяют новые фишки: от иконок до анимаций.

Последняя презентация тоже не обошлась без подобного. Вот весьма забавный пример: размытая виньетка.

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



Так вот, к чему я. Такую виньетку можно легко сделать на чистом CSS: https://expensive.toys/blog/blur-vignette

Секрет в сочетании шести градиентов: линейных и радиальных.

В статье даже конструктор виньеток имеется :)

#css #apple #blur
1.8K viewsSergey Bekharsky, edited  06:00
Открыть/Комментировать
2023-06-23 21:21:14
#статья дня

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

Вот тут: https://t.me/htmlshit/1638

Мой плагин был очень простой: запрет констант уровня модуля. Ну вот так вот :( Они при сборке терялись, потому что иди нахер, вот почему.

Так, к статье дня. Анастасия Щедрина о том, как работает ESLint и о том, как написать свой плагин для линтинга React-приложения: https://habr.com/ru/companies/domclick/articles/743384/

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

#eslint #react #ast
2.0K viewsSergey Bekharsky, 18:21
Открыть/Комментировать
2023-06-23 14:02:29 64% россиян работают за компьютером и проводят как минимум по восемь часов в день пять дней в неделю в сидячем положении. Чаще всего сидячий образ жизни ведут айтишники (96%) и работники финансового сектора (95%).

Низкая активность в течение дня влияет концентрацию, настроение, сердечно-сосудистую систему и опорно-двигательный аппарат. Кроме того, IT-специалист вынужден постоянно смотреть в экран. От этого страдает зрение.

Что делать?

Тут помогут спланированные перерывы в работе, физические упражнения, гимнастика для глаз, график питания.

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

Сделать это может Хома Стоев - бесплатный Telegram бот. Он учитывает график работы и присылает полезные напоминания.

Итак, с чем работает Хома:

1) Вред сидячего образа жизни можно компенсировать за счет перерывов. Бот сообщает, когда нужно сделать паузу для разминки. Присылает упражнения. Рассказывает, как внедрить в жизнь комбинированную работу стоя/сидя.

2) Профилактика проблем со зрением - гимнастика для глаз. Бот напоминает об этом, отправляя инфографику с упражнениями.

3) Если системно забывать об отдыхе, может произойти выгорание. Хома сообщает о начале и конце рабочего дня, чтобы вы успевали восстанавливаться.

4) Для продуктивной работы нужна энергия. Ее основной ресурс - питание. Бот напоминает о поддержании водного баланса и обеденных перерывах.

Чтобы настроить и запустить Хому - вам нужно буквально 5 минут: https://t.me/stoev_bot

#реклама
1.9K viewsSergey Bekharsky, edited  11:02
Открыть/Комментировать
2023-06-23 09:09:38
#такое дня

Я пропустил, что каналу исполнилось 5 лет! 30 мая 2018 года я поменял кое-что в жизни: https://t.me/htmlshit/2

Интересно, куда делось сообщение номер 1... Ну не суть.

Изначально я просто цитировал своих заказчиков из мира российского диджитала и пытался шутить (ну хорошо же получалось).

А потом канал стал способом перестать проводить столько времени в чатах по CSS, объясняя всем и каждому, как вертикально центрировать дивы :)

Спасибо, что вы со мной, котаны и котанессы!

Всем чмаффки.
1.9K viewsSergey Bekharsky, 06:09
Открыть/Комментировать
2023-06-12 09:16:20
#codepen дня

А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога

Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить

Спасибо Ксении Кондрашёвой.

#webgl #shader
169 viewsSergey Bekharsky, 06:16
Открыть/Комментировать