​​#инструмент дня
#vscode #css #extension

Помните (конечно же нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://yangx.top/htmlshit/375

Так вот, Артём Шибаков (https://twitter.com/ashibakow) разработал автодополнение для Visual Studio Code, автодополняющее CSS-свойства с учётом статистики их использования.

Smart CSS Autocomplete: https://marketplace.visualstudio.com/items?itemName=saionaro.smart-css-autocomplete

Пробуйте, не забывайте отписываться в issues на GitHub и благодарить автора.

P. S. А если вы хотите что-то максимально мощное для автодополнения кода, попробуйте https://www.tabnine.com/

#инструмент дня

Знакомая ситуация? 👆

Сегодня я представляю на ваш суд расширение для VS Code под названием Blockman: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

Что оно делает?

Всё просто: подсвечивает блоки кода, что очень часто бывает довольно удобно. Причём, не прямоугольниками, а всю область видимости целиком.

Да, VS Code подсвечивает парные скобки, но иногда этого бывает недостаточно. Просто посмотрите скринкасты со страницы расширения.

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

#vscode #extension

#инструмент дня
#vscode #css #extension

Помните (конечно же нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://yangx.top/htmlshit/375

Так вот, Артём Шибаков (https://twitter.com/ashibakow) разработал автодополнение для Visual Studio Code, автодополняющее CSS-свойства с учётом статистики их использования.

Smart CSS Autocomplete: https://marketplace.visualstudio.com/items?itemName=saionaro.smart-css-autocomplete

Пробуйте, не забывайте отписываться в issues на GitHub и благодарить автора.

#vscode #css #autocomplete

#инструмент дня

Помните (конечно же, нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://yangx.top/htmlshit/375

Так вот, Артём Шибаков (https://twitter.com/ashibakow) разработал автодополнение для Visual Studio Code, автодополняющее CSS-свойства с учётом статистики их использования.

Smart CSS Autocomplete: https://marketplace.visualstudio.com/items?itemName=saionaro.smart-css-autocomplete

Пробуйте, не забывайте отписываться в issues на GitHub и благодарить автора.

#vscode #css #extension

#vscode дня

Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension

#инструмент дня

Как потырить понравившуюся SVG с сайта в учебных, конечно же, целях?

Поставить себе SVG Gobbler!

https://www.svggobbler.com/

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

#svg #extension

#фишка дня

...от Никиты Голубова aka @midfilecrisis в Twitter.

В WebStorm из коробки (а значит, и в том же PhpStorm) можно получить предпросмотр стилей для выбранного класса. Включая CSS Modules.

Option-Space на macOS, или через Cmd, зависит от выбранных хоткеев. Ctrl+Shift+I на остальных системах.

Аналогичное расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

...почти 4 миллиона установок, ик.

#css #webstorm #phpstorm #vscode #plugin #extension

#расширение дня

Как тестировать свои (и чужие, ну мало ли какие у вас увлечения) проекты на валидацию всякой дряни?

Очевидный ответ — вводить в поля всякую дрянь.

А где её брать? Не в каждой голове столько всего удержится...

Есть решение: расширения для Chrome под названием Bug Magnet.

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

Тестируйте проекты тщательно, котаны.

#test #extension #chrome

#vscode дня

Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension #бородач

#расширение дня

Что, котаны, думали, я буду тут сегодня про выход Bun 1.0 заливать?

Думаю, не. Не сегодня. Я смотрел на Bun очень давно, больше года назад, вот: https://yangx.top/htmlshit/1305

Там всё, что нужно знать. Быстро, удобно, не на V8. А в следующий раз — когда сам попробую в чуть более реальном проекте.

Так какова же тема сегодня? Пытка через решение задач на LeetCode?

Звучит странно, но именно такое расширение для Chrome сегодня прислали подписчики. Называется LeetCode Torture: https://chrome.google.com/webstore/detail/leetcode-torture/clbhgfneekiimoaakhhdjimgnnbnfbeh?hl=en

Суть? Оно не даёт открывать веб-сайты, пока не будет решена хотя бы одна задача с LeetCode. А? Ну? Как вам?

P. S. Не понимаю ваших реакций, это не реклама. Реклама попозже.

#leetcode #chrome #extension

#расширение и #статья дня

Вот эта вот странная блок-схема на иллюстрации — сгенерированное VS Code-расширением ReacTree дерево компонентов одной из частей нашего продукта.

Ссылка: https://marketplace.visualstudio.com/items?itemName=ReacTreeDev.reactree

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

Расширение сыроватое. Например, оно пока не умеет в условный рендеринг и обрывает построение. Ну, спасибо, хотя бы, что не падает. Хотя схему React Router-а оно понимает прекрасно (на иллюстрации).

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

А ещё они заодно написали статью о том, как разрабатывать расширения VS Code, использующие WebView: https://medium.com/@michaelbenliyan/developers-guide-to-building-vscode-webview-panel-with-react-and-messages-797981f34013 Возможно, кому-то будет полезно.

Делитесь схемами, котаны 🙂

#react #tree #vscode #extension

#vscode дня

Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension #бородач

#инструмент дня

Как потырить понравившуюся SVG с сайта в учебных, конечно же, целях?

Поставить себе SVG Gobbler!

https://www.svggobbler.com/

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

#svg #extension #бородач

#статья дня

Я, пару лет назад, чтобы облегчить себе разработку расширения для Google Sheets, написал тоже расширение, но уже для браузера.

Что оно делало?

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

И так прекрасно работало пару лет, а потом появился треклятый Manifest v3 и у меня не было времени перевести на него своё расширение... чуток всё заглохло.

Но зато на работе награду получил

Ладно, давайте к делу.

Итак, статья дня от Злых Марсиан: как конвертировать расширение для Chrome в расширение для Safari.

Оказывается, есть там пара подводных камней. Самое раздражающее — нужен чёртов XCode :)

Ну и своевременное появление этой статьи — оно мне как некий толчок к восстановлению моего решения.

#chrome #safari #extension

#фишка дня

...от Никиты Голубова aka @midfilecrisis в Twitter.

В WebStorm из коробки (а значит, и в том же PhpStorm) можно получить предпросмотр стилей для выбранного класса. Включая CSS Modules.

Option-Space на macOS, или через Cmd, зависит от выбранных хоткеев. Ctrl+Shift+I на остальных системах.

Аналогичное расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

...более 6 миллионов установок, ик.

#css #webstorm #phpstorm #vscode #plugin #extension #бородач

#фишка дня

Помните, обсуждали фишку в Git — bisect? Ну, буквально, двоичный поиск косяка в коммитах: https://yangx.top/htmlshit/3061

Суть в том, что ты приближаешься к проблемному коммиту с двух сторон.

А где ещё у нас могут быть проблемы, потому что мы сделали или установили что-то не то?

Да везде, буквально.

И сегодня речь пойдёт о похожей фишке в редакторе Visual Studio Code. Спряталась она в трёхточечном меню в панели расширений.

Вот обновили вы редактор, или открыли что-то, что до этого не открывали. Или куча расширений обновились разом и началось какое-то неопределённое поведение — жамкаем на Start Extension Bisect.

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

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

Как вам идея, котаны?

#vscode #extension #bisect