Будни разработчика
14.6K subscribers
1.18K photos
338 videos
7 files
2.02K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://yangx.top/it_adv

Чат: https://yangx.top/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
加入频道
#ссылка дня

Для участия в Google Summer of Code больше не требуется быть студентом! Достаточно просто быть старше 18 лет.

https://opensource.googleblog.com/2021/11/expanding-google-summer-of-code-in-2022.html

Больше проектов, больше менторов, больше возможности выделится. Это ли не прелесть?

#google #gsoc
#фишка дня

Давайте отвлечёмся немного.

Если поискать в Google Pac-Man, появится играбельный дудл :)

Вот так просто.

#game #google #doodle
🥰8👍2🤔1🤮1
#библиотека дня

А на сегодня, чтобы разбавить тему, но не опускаться до банальных библиотек построения диаграм, возьмём инструмент, близкий к корпоративным задачам.

easyData — библиотека, позволяющая вставить на сайт данные из сервисов Google: Analytics, Sheets, Search Console и в целом любых других.

Установка и использование максимально простые (главное не забыть ограничить действия ключа API в Google-консоли), пара строк кода — и вот у вас на руках SEO-панель управления :)

Есть и обучающее видео: https://youtu.be/5BvarQdBtFk?list=PLl1gkwYU90QkjQyRJijEbpouyFOUNv7MW

#seo #google #sheets #dashboard
#статья дня

Любите ли вы Markdown так, как люблю его я?

Даже диаграммы составляю в текстовом виде, как многие мои читатели уже знают: https://yangx.top/htmlshit/913

Терпеть не могу WYSIWYG с первых дней использования компьютера. Никогда не работает так, как надо, и один хрен никто не знает, как правильно использовать стили и контекст. Что-то не то нажал, и вот у тебя весь документ курсивом. А визивиг-редакторы на сайтах это вообще источник бесконечной боли: мусорная разметка, незакрытые теги, инлайн-стили…

Хотя кому-то проще и на кнопочку В нажать, да… но не суть.

Поэтому я крайне обрадовался новости, что и в Google Docs теперь официально появляется возможность писать Markdown: https://www.theverge.com/2022/3/29/23002138/google-docs-markdown-support-formatting-update

Всё есть текст. Всё будет текст.

#google #markdown
🔥6👍2
#ссылка дня

Четырнадцать лет назад, когда Google выпустили Chrome, художник Скотт МакКлауд нарисовал комикс, объясняющий всем и каждому, зачем им нужен новый браузер и как он сделает мир лучше.

Теперь же Скотт снова нарисовал подобный комикс. В доступной форме объясняющий людям, почему им не нужен Chrome и как он сделал мир хуже.

Все просто: https://contrachrome.com/

Хорошее чтиво на вечер.

#chrome #google
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...

Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.

И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols

Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons

Естественно, вы можете скачать SVG и PNG.

Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.

Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.

К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.

#fonts #icons #google #material
👍12👎1
#баг дня

Google весьма знамениты тем, что у них на поток поставлена палочная система.

Если коротко, для достижения следующего грейда, тебе надо внедрить инновацию. Напоминает СССР, не правда ли?

Один сначала вводит инновацию, второй — проводит рационализацию. Оба получили премию.

Вспомним десяток обновлений интерфейса GMail.

Итак, в чём же конкретно проблема: https://issuetracker.google.com/issues/232060574

Есть такой язык и среда — Google Apps Script. Это JavaScript, на самом деле. Используется для написания приложений GSuite (расширения к формам, доксам и таблицам).

У него одновременно поддерживаются две системы развёртывания (деплоя): legacy и текущая.

Мы сидим пока на legacy, поскольку в текущей полно нововведений, несовместимых с жизнью.

Но за каким-то лешим один из сотрудников Google решил провести инновацию и заменил нативные HTML-селекты на самодельные в стиле Material UI.

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

А у нас их там 2000. Естественно, меню улетело за пределы экрана.

Зачем было трогать легаси-среду? Вопрос риторический.

Браво, Google. Браво. Зато инновация внедрена и премия получена

#google #bug
👍10
#фишка дня

Давайте отвлечёмся немного.

Если поискать в Google Pac-Man, появится играбельный дудл :)

Вот так просто.

#game #google #doodle
👍13🤨7
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...

Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.

И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols

Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons

Естественно, вы можете скачать SVG и PNG.

Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.

Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.

К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.

#fonts #icons #google #material
🔥14👍4👎1
#баг дня

Один браузер для всех это же так прекрасно, не правда ли?

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

Например, этот: https://bugs.chromium.org/p/chromium/issues/detail?id=914451

TL;DR: такое количество боли в комментариях мало где найти можно. Причина? С 2014 года игнорируется атрибут autocomplete="off" на формах.

К чему это приводит? К сломанным виджетам выбора с автоподстановкой (autocomplete, combo-box), сломанным интерфейсам выбора даты, к ошибочным заказам в интернет-магазинах... Да просто почитайте поток ненависти 🙂

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

Количество предложенных хаков для исправления огромно, от contenteditable вместо полей ввода до рандомных строк в autocomplete.

Дискуссия ещё и перегибает палку там и очень часто. Потрясающее чтение, рекомендую.

#chrome #google #evil
👍142😁2
#ссылка дня

Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.

У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.

https://codelabs.developers.google.com/

Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.

Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.

Моя рекомендация, в общем.

#google #dev #education
👍25❤‍🔥44
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...

Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.

И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols

Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons

Естественно, вы можете скачать SVG и PNG.

Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.

Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.

К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.

#fonts #icons #google #material #бородач
👍7
#такое дня

Наверняка у вас стоит дома Smart TV. От Samsung, LG и так далее.

Чем отличаются Smart TV от других платформ? Тотальными ограничениями на всё подряд! И ужасной документацией. И не всегда продуманным управлением...

Казалось бы, ну уж web-технологии нынче наверное как-то стабилизированы между современными устройствами? Тоже нет. Всё очень плохо.

И забавно наблюдать, как в Google выкрутились из этой ситуации.

Они написали браузер, который поддерживает только то, что необходимо YouTube TV! Вот, собственно: https://cobalt.foo/

В то время как у многих конкурентов просто HTML5/CSS/JS, Google поставляет целый браузер чтобы запустить всё то же самое! Большинство ОС для TV это всё равно так или иначе испорченный Linux, потому и тестирование становится более предсказуемым.

Чудные дела. Рынку разработки под умные телевизоры точно есть куда расти.

#tv #google

P. S. Я случайно удалил все комментарии к постам на канале. Поэтому они теперь привязаны к другому чату, а @htmlshitchat будет независимым.
👍5
#ссылка дня

Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.

У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.

https://codelabs.developers.google.com/

Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.

Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.

Моя рекомендация, в общем.

#google #dev #education #бородач
👍36
#баг дня

Сегодня Google опрокинул миллионы пользователей расширений Google Sheets.

Для многих станет сюрпризом, но этот рынок огромен: аналитика, SEO, рассылки, бюджет, ведение рекламных кампаний, анализ опросов из Google Forms... всё там.

Только у нашего расширения — под миллион установок, например.

Так вот, когда-то давно в Chrome 83 появилась очередная директива Content-Security Policy (CSP): Trusted Types.

MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types

Web.Dev: https://web.dev/articles/trusted-types

Когда она включена, любую загрузку скриптов надо предварительно одобрить. Любое изменение innerHTML и документа вообще — тоже.

Звучит разумно? Давайте дальше.

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

И сегодня в Google Sheets появился заголовок, включающий директиву, а код настройки — нет.

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

Ах да, директива учитывается только в Chrome 🤡

Баг-трекер: https://issuetracker.google.com/issues/313466551

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

А решение, собственно, заключается в минимальной настройке директивы.

Это то, что должны были сделать разработчики Google Sheets:


<script>
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: string => string,
createScriptURL: string => string,
createScript: string => string,
});
}
</script>


В общем, день был насыщенный.

P. S. По состоянию на 23:00 EET, Google откатывают изменения.

#google #sheets #workspace #bug
🤩13👍82🤡2
#ссылка дня

Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.

У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.

https://codelabs.developers.google.com/

Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.

Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.

Моя рекомендация, в общем.

#google #dev #education #бородач
👍27
#баг дня

Один браузер для всех это же так прекрасно, не правда ли?

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

Например, этот: https://bugs.chromium.org/p/chromium/issues/detail?id=914451

TL;DR: такое количество боли в комментариях мало где найти можно. Причина? С 2014 года игнорируется атрибут autocomplete="off" на формах.

К чему это приводит? К сломанным виджетам выбора с автоподстановкой (autocomplete, combo-box), сломанным интерфейсам выбора даты, к ошибочным заказам в интернет-магазинах... Да просто почитайте поток ненависти 🙂

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

Количество предложенных хаков для исправления огромно, от contenteditable вместо полей ввода до рандомных строк в autocomplete.

Дискуссия ещё и перегибает палку там, и очень часто. Потрясающее чтение, рекомендую.

#chrome #google #evil #бородач
👍10🤬5🤩4
#такое дня

Если вы не знали или не понимали, что такое "секрет Полишинеля", я вам сейчас всё объясню.

Тут выяснилось, что в браузерах на основе движка Blink (Chrome, Brave, Edge, Яндекс.Браузер сами проверите) есть специальное скрытое расширение, которое предоставляет сайтам Google данные о нагрузке на компьютер по каждой вкладке отдельно.

То есть, если Google определяет, что звонок в Meet слишком нагружает систему, он может что-то с этим сделать, ухудшить качество видео или, наоборот, улучшить, если есть запас.

Казалось бы, ну и что такого? А то, что конкурентам подобное недоступно. Тот же Zoom потребует дополнительных телодвижений.

ID расширения: nkeimhogjdpnpccoofpliimaahmaaome
Название: hangout_services.

Предоставляемые дополнением данные отображаются в сервисе meet.google.com в панели "Troubleshooting".

Ну что, это уже недобросовестная конкуренция, или так и надо? :)

#google #chrome
👍11🤩3🤬2
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...

Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.

И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols

Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons

Естественно, вы можете скачать SVG и PNG.

Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.

Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.

К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.

#fonts #icons #google #material #бородач
👍6🤩6
#игра дня

Тут Google выкатил свой адвент-календарь в виде новой игры каждый день: https://santatracker.google.com/

И вчера там было кодирование на системе, подобной языку Scratch... а сегодня простой сокобан :(

И я сначала расстроился, но потом догадался поскроллить вниз! Это, кстати, с первого экрана совсем не очевидно. И нашёл даже простую версию The Impossible Machine! Олды меня поймут.

В итоге там хватает и кодинга, и головоломок, и простых аркад. Идеально, чтобы провести время с семьёй и, возможно, познакомить ребёнка со Scratch, если ещё нет.

Не совсем про программирование пост сегодня, но надо же и отдыхать, ну.

#google #doodle #scratch
👍122