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

2023-04-22 11:02:08 #расширение дня

Ну что, пришло время поговорить о серьезных вещах!

А что может быть серьезнее ошибок TypeScript? Правильно, ничего. Уж слишком они формальные. И мы на самом деле уже с вами обсуждали расширение, переводящее их в человеческий вид: https://t.me/htmlshit/1601

И вот есть ещё одно, стремительно набирающее популярность: https://github.com/yoavbls/pretty-ts-errors

Ссылка на VS Code store: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

Работает с Node и Deno, React и Vue, Solid и Qwik. Далее везде, в общем.

Пробуем, рассказываем о результатах.

Прокачивайте скиллы, котаны.

#typescript #ts #vscode Открыть/Комментировать

2023-04-21 19:23:17 #фишка дня

Я надеюсь, вас не смутит, что я сюда теперь буду иногда скидывать заметки для Windows PowerShell. Просто у меня очередной приступ усталости от Linux на десктопе, так что на личный ноутбук вернул Windows 11. Не знаю, надолго ли.

Вернул — потому что OEM. Не суть.

Так вот. Если вы ставите различные утилиты для разработки, от Git, Node.js через Volta до Android и Flutter SDK, вам нужно постоянно обновлять пути в переменной среды — Env — и перезаходить в консоль, чтобы утилиты стали доступны к исполнению.

Ну если вы не лох какой и пользуетесь консолью, конечно.

Так вот, первое, что меня убило — недостаточно просто запустить новую вкладку в Windows Terminal, как я бы сделал в любом эмуляторе терминала в macOS и Linux. Надо перезапускать всё приложение. Мерзость.

Чтобы этого избежать, нужно выполнить следующую команду: $Env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") .

И всё встаёт на свои места.

#windows #powershell Открыть/Комментировать

2023-04-21 12:47:52 #нытьё дня

Итак, тема нытья сегодня: "Почему разработчики ОС с таким упорством вставляют палки в колёса переключателям языков ввода?".

Поясню, что я имею в виду. Начнём с Windows 11.

Мой личный ноутбук — ThinkPad с финской клавиатурой. При установке Windows я указал Eng (US) и Ru (Ru) раскладки клавиатуры, а ОС...

...подсунула мне финскую раскладку для британского английского! Неудаляемую!

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

Кто просил это делать изначально? Вопрос риторический.

Теперь Linux. Конкретно — версии с GNOME.

Баг, повествующий о потере фокуса с поля ввода при переключении языка висит в трекере уже много лет. А точнее — 10. Да, он помечен как просроченный, но проблема-то никуда не делась. И важность "Low" или "Medium". Ну то есть разработчикам похер. А ты, тем временем, чтобы переименовать папку или ввести поле тянулся каждый раз не только переключить язык, но и поставить фокус на место.

Плюс, если у тебя Alt-Shift, во многих приложениях начинали срабатывать индикаторы горячих клавиш (VS Code, например), что тоже сбивало фокус если ты использовал для переключения раскладки не штатную шину GNOME, а что-то стороннее или просто настроил в Tweak Tools.

Теперь перейдём к macOS, которая тоже умудрилась насолить.

На ноутбуках и клавиатурах года так с 2021 есть клавиша с символом глобуса. Как нетрудно догадаться, она переключает раскладку. Но:

1. Кнопка на внешней клавиатуре раньше не работала с ноутбуками, у которых такой кнопки нет (2019 год, например).
2. ОС показывает всплывающее окно, что вызывает задержку переключения до двух секунд
3. Но этого окошку было мало и пару версий macOS назад если курсор мыши находился в месте, где появляется окошко — автоматически выбиралась раскладка, попадающая под курсор. Гениально.

Ну с этим бороться было просто, хоть и смешно:
1. Включаем переключение языка через CapsLock
2. Переназначаем Fn-клавишу на CapsLock
3. CapsLock лично я переназначаю на всех своих машинах на Cmd (mac) или Ctrl (Win, Lin). Потому что я не пианист.

В общем, казалось бы — идее переключения раскладки уже лет пятьдесят. Но находятся индивидуумы, которые хотя всё придумать заново.

P. S. многие проблемы решает однозначное переключение языка кастомным хоткеем сразу на нужный.

#macos #windows #linux Открыть/Комментировать

2023-04-20 22:13:55 #инструмент дня

Нужна карусель изображений на сайт? jQuery-плагины не катят? Swiper.js чёртов огромный монстр и уже набил оскомину? Slick.js глючный? Owl не поддерживается? Нужна интеграция с React, Vue, Svelte?

Встречайте: https://splidejs.com/

Splide написан на TypeScript. Лёгкий, быстрый, куча интеграций. Десятки примеров использования сразу на главной странице. Не портит SEO страниц. Lighthouse тоже очень даже зелёный.

Нет зависимостей и поддержка от IE10.

Просто праздник какой-то.

#slider #carousel #gallery #swiper #бородач Открыть/Комментировать

2023-04-20 18:12:01 Совет фронтендерам: уважайте свое время

Первый шаг — не изобретать велосипед. В Html Gram собраны готовые codepen решения на каждый день. От эффектов при наведении до 3D анимации.

Быстрее пишешь код — больше отдыхаешь. Подписывайся: @HtmlGram Открыть/Комментировать

2023-04-20 11:45:17 #инструмент дня

Пока мы тут эмодзи вместо курсора учились делать — https://t.me/htmlshit/1861 — небезызвестный Wes Bos запилил целый стартап на тему. Я не шучу, там буквально на главной так написано: https://fav.farm/

В чём суть? Передаёте ссылку вида https://fav.farm/ и получаете фавиконку для вашего сайта. Ну или курсор. Как получаете? В посте выше написано, как.

Но это не было бы так интересно, если бы не одно «но»: Safari не поддерживает SVG в фавиконках. Так что же делать?

Wes придумал запилить на Deno.js скрипт, который генерирует PNG из эмодзи, выдёргивая его из шрифта...

...а чтобы стало веселее — дёргает он их из шрифта от Samsung. А, как вы знаете, эмодзи на самсунгах максимально убогие

В общем, казалось бы, какая простая идея, а прокачать скиллы решения проблем можно даже на ней.

#emoji #favicon #deno Открыть/Комментировать

2023-04-19 14:12:53 #ссылка дня

Периодически этот канал позиционируется ещё и как канал «личинки тимлида». За что мне регулярно прилетает в лицо: «Ты почти два года тимлид, какая ты личинка».

Какая-какая, бабочки.

Но суть-то в том, что должность официально не тимлид, а engineering manager. То есть моя задача не только и не столько быть лидером и примером для команды (кек), как заниматься управленческой деятельностью. И тут я всё ещё личинка. И в среднем EMы являются личинками года три, пока не переходят на уровень менеджеров менеджеров.

И я очень вовремя наткнулся на большое исследование руководителей разработки: https://devcrowd.ru/tl23/companies/

Средний размер команды (вы знали, что команда из 8-10 человек называется two pizza team? Безос придумал. Я не согласен ), участие в комьюнити, развитие, технические скиллы, карьера, где тимлиды черпают знания, лидеры мнений, гендерный дисбаланс и так далее. Очень много и очень подробно.

Сижу вот, изучаю...

#teamlead #em #m6 Открыть/Комментировать

2023-04-18 19:06:21 #заметка дня

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

Да, это опять я со своим нытьём про Dart и Flutter, которое можно найти по тегу #remote. И сегодня мы поговорим о сокетах. Конкретно — WebSockets.

Вы наверняка должны были задуматься, откуда в вебсокетах приставка "веб". И ответ на самом деле простой: потому что они реализованы поверх протокола HTTP, для чего используется, очевидно, некий HTTP-клиент. В браузерах свой, в Node.js свой, в мобильных фреймворках свой.

Что из этого следует, например? Ну, что сертификаты наруливаются согласно спецификации HTTPS. И тут начинается самое интересное.

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

Вот у телевизоров Samsung сертификат самоподписанный. Вебсокеты по протоколу wss (websocket secure) работать с таким откажутся, но всё, что надо сделать в JS — передать опцию allowUnauthorized. Всё, полетели жисоны.

Что надо сделать в том же Dart/Flutter?

Перегрузить (заменить, override) библиотечный HTTP-клиент!

Вот так:

class SamsungHttpOverrides extends HttpOverrides {
@override
HttpClient createHttpClient(SecurityContext? context) {
return super.createHttpClient(context)
..badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
}
}

И дальше есть выбор, делать это на глобальном уровне, или передать в конструктор. В моём случае — глобально, поскольку API тоже спрятан за самоподписанным сертификатом:

HttpOverrides.global = SamsungHttpOverrides();

И такое на каждом шагу. Нельзя просто так взять и...

Может, поэтому мобильным разработчикам зачастую больше платят?

#flutter #remote #dart #websocket Открыть/Комментировать

2023-04-18 12:00:40
Разбираешься во Front-End?



Мы создали уникальную игру для программистов прямо в браузере с 3d миром будущего и с ревардами.

Пиши код, развлекайся и зарабатывай, выполняя интересные задачи от уровня Junior до уровня Senior!

Перейди по ссылке и исследуй мир TONight:
https://clck.ru/347ZoT
Открыть/Комментировать

2023-04-17 21:41:17 #ссылка дня

Да-да, я знаю, знаю что команда разработчиков React недавно наконец-то выпустили долгожанную документацию.

Но кто из нас не любит красивые учебники и пособия? Не, ну, может, кто-то и не любит...

Тем не менее, встречайте: React Visualized: https://react.gg/visualized

Крайне забавная штука с интерактивными элементами, объясняющая базовые и не очень принципы React, откуда появились и какие задачи решают: пропсы, стейт, эффекты, рефы, порталы.

Будет дополняться, впрочем :)

#react #reference Открыть/Комментировать