#заметка дня
Если у вас было хоть что-то важное на Heroku, сайд-проект или не дай бог рабочие материалы — срочно или съезжайте оттуда, или меняйте все явки-пароли.
В Heroku уже две недели творится неладное. Сначала утекли OAuth-токены (включая интеграцию с GitHub), теперь оказалось, что ещё и хешированные, конечно, но все же доступы к БД.
Не завидую я ни им, ни их клиентам, в общем: https://status.heroku.com/incidents/2413?updated
Мимо меня вся эта истерия сервисов деплоя как-то мимо прошла, мне проще было сервер развернуть в своё время. Есть в этом и плюсы, и минусы, конечно.
В общем, берегите себя и свои данные :).
#heroku #security
Если у вас было хоть что-то важное на Heroku, сайд-проект или не дай бог рабочие материалы — срочно или съезжайте оттуда, или меняйте все явки-пароли.
В Heroku уже две недели творится неладное. Сначала утекли OAuth-токены (включая интеграцию с GitHub), теперь оказалось, что ещё и хешированные, конечно, но все же доступы к БД.
Не завидую я ни им, ни их клиентам, в общем: https://status.heroku.com/incidents/2413?updated
Мимо меня вся эта истерия сервисов деплоя как-то мимо прошла, мне проще было сервер развернуть в своё время. Есть в этом и плюсы, и минусы, конечно.
В общем, берегите себя и свои данные :).
#heroku #security
Heroku
Heroku Status
Heroku Status provides the current status and incident history report for the Heroku platform.
👍15
👍9
#ссылка дня
Я и подумать не мог, сколько в моей работе времени будет отдано обсуждению различных фич продукта.
Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.
В продуктовой же компании дела обстоят чуть-чуть иначе. Если ты на уровне senior, от тебя ожидают не только и не столько дубасить код, сколько понимать принципы работы продукта и быть готовым защищать решения по бизнес-логике или взаимодействию с клиентом.
Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.
Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers
Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.
Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).
#docs #explainers #process
Я и подумать не мог, сколько в моей работе времени будет отдано обсуждению различных фич продукта.
Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.
В продуктовой же компании дела обстоят чуть-чуть иначе. Если ты на уровне senior, от тебя ожидают не только и не столько дубасить код, сколько понимать принципы работы продукта и быть готовым защищать решения по бизнес-логике или взаимодействию с клиентом.
Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.
Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers
Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.
Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).
#docs #explainers #process
GitHub
GitHub - MicrosoftEdge/MSEdgeExplainers: Home for explainer documents originated by the Microsoft Edge team
Home for explainer documents originated by the Microsoft Edge team - MicrosoftEdge/MSEdgeExplainers
👍9❤1
👍14😁3💩3🤩1
#фишка дня
Продолжаем путешествие по «родительскому селектору» или :has.
Что делать, если вам нужно четыре элемента показать в столбик, а если их больше — в строку, через запятую?
Нет ничего проще! Правда, если у вас есть доступ к возможностям :has. Но мы уже обсуждали, что есть даже полифилл в виде плагина для PostCSS: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
Вот пример (без полифилла, только сафари): https://codepen.io/una/pen/LYQpwgQ
#css #has #future
Продолжаем путешествие по «родительскому селектору» или :has.
Что делать, если вам нужно четыре элемента показать в столбик, а если их больше — в строку, через запятую?
Нет ничего проще! Правда, если у вас есть доступ к возможностям :has. Но мы уже обсуждали, что есть даже полифилл в виде плагина для PostCSS: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
Вот пример (без полифилла, только сафари): https://codepen.io/una/pen/LYQpwgQ
#css #has #future
👍10❤1
#инструмент дня
Лучший email — текстовый email.
Жаль, что маркетологи считают иначе… и продолжают требовать красиво свёрстанные письма, с картинками, таблицами, поддержкой IBM Lotus и Outlook Express 2010… брр.
Можно, конечно, обратиться к признанным мастерам табличной вёрстки. Но вот беда — их с каждым годом становится всё меньше.
Поэтому давайте обратимся к современным способам: MJML.
Mailjet Markup Language. Mailjet — это контора такая есть… или была. Короче говоря, набор React-компонентов для простой вёрстки писем.
Репозиторий: https://github.com/mjmlio/mjml
Все ещё лень верстать даже так? У них есть шаблоны и онлайн-редактор!
Сказка, короче.
#email #markup #mjml
Лучший email — текстовый email.
Жаль, что маркетологи считают иначе… и продолжают требовать красиво свёрстанные письма, с картинками, таблицами, поддержкой IBM Lotus и Outlook Express 2010… брр.
Можно, конечно, обратиться к признанным мастерам табличной вёрстки. Но вот беда — их с каждым годом становится всё меньше.
Поэтому давайте обратимся к современным способам: MJML.
Mailjet Markup Language. Mailjet — это контора такая есть… или была. Короче говоря, набор React-компонентов для простой вёрстки писем.
Репозиторий: https://github.com/mjmlio/mjml
Все ещё лень верстать даже так? У них есть шаблоны и онлайн-редактор!
Сказка, короче.
#email #markup #mjml
GitHub
GitHub - mjmlio/mjml: MJML: the only framework that makes responsive-email easy
MJML: the only framework that makes responsive-email easy - mjmlio/mjml
👍11🥰2
😁44👎21🤯14👍3😢3🥰1
#инструмент дня
Кто-нибудь ещё считает, что подсказки и ошибки TypeScript страшно раздражают своей формальностью?
Say no more!
Появилось расширение, переводящее их на человеческий (ну… английский) язык!
КДПВ говорит сама за себя, а пока дам ссылку: https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator
Ну и песочница, чтоб побаловаться и понять: https://ts-error-translator.vercel.app/
Отправьте ей свою ошибку и давайте посмотрим на результат.
P. S. а ошибки типов Styled Components оно переведёт, как считаете?
#vscode #ts #typescript
Кто-нибудь ещё считает, что подсказки и ошибки TypeScript страшно раздражают своей формальностью?
Say no more!
Появилось расширение, переводящее их на человеческий (ну… английский) язык!
КДПВ говорит сама за себя, а пока дам ссылку: https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator
Ну и песочница, чтоб побаловаться и понять: https://ts-error-translator.vercel.app/
Отправьте ей свою ошибку и давайте посмотрим на результат.
P. S. а ошибки типов Styled Components оно переведёт, как считаете?
#vscode #ts #typescript
👍6
#опрос дня
Кто требовал вопрос на понимание работы языка, а не на подвохи и внимательность? Готовьтесь отвечать.
Кто требовал вопрос на понимание работы языка, а не на подвохи и внимательность? Готовьтесь отвечать.
Что выведется в консоль?
Anonymous Quiz
9%
0 1 2 3 4 5 6 7 8 9 и 9
9%
0 1 2 3 4 5 6 7 8 9 и 10
25%
1 2 3 4 5 6 7 8 9 и 9
27%
1 2 3 4 5 6 7 8 9 и 10
6%
десять раз undefined и 2
25%
девять раз undefined и 1
👍27😢23😁6
#заметка дня
Что-то мы совсем забыли про полезные кусочки кода.
Например, как сделать красивую градиентную тень?
Да очень просто! Как и всегда, ответ на этот вопрос – псевдоэлемент. Поместили, подвинули, размыли. Готово.
Вот даже живой пример: https://codepen.io/argyleink/pen/WNxeBKa
Похоже на Philips Ambilight, не правда ли? Ну так давайте оживим: https://gifted-nightingale-ba0eea.netlify.app/
Добавляйте в ваши коллекции, но лучше – запоминайте принцип.
#css #gradient #shadow
Что-то мы совсем забыли про полезные кусочки кода.
Например, как сделать красивую градиентную тень?
Да очень просто! Как и всегда, ответ на этот вопрос – псевдоэлемент. Поместили, подвинули, размыли. Готово.
Вот даже живой пример: https://codepen.io/argyleink/pen/WNxeBKa
Похоже на Philips Ambilight, не правда ли? Ну так давайте оживим: https://gifted-nightingale-ba0eea.netlify.app/
Добавляйте в ваши коллекции, но лучше – запоминайте принцип.
#css #gradient #shadow
👍21🤩2
#ссылка дня
Поскольку Netlify прокинул меня с вебинаром, придётся на них обидеться.
А пока давайте продолжим тему с вариативными шрифтами.
Наверняка все знают шрифт Roboto — дефолтный на Android и в целом уже очень популярный. Google на днях запилили его вариативную версию — Roboto Flex.
В статье на material.io — https://material.io/blog/roboto-flex — рассказана история его создания и проблемы, с которыми столкнулись авторы.
Ну а взять шрифт можно на Google Fonts: https://fonts.google.com/specimen/Roboto+Flex
#font #css
Поскольку Netlify прокинул меня с вебинаром, придётся на них обидеться.
А пока давайте продолжим тему с вариативными шрифтами.
Наверняка все знают шрифт Roboto — дефолтный на Android и в целом уже очень популярный. Google на днях запилили его вариативную версию — Roboto Flex.
В статье на material.io — https://material.io/blog/roboto-flex — рассказана история его создания и проблемы, с которыми столкнулись авторы.
Ну а взять шрифт можно на Google Fonts: https://fonts.google.com/specimen/Roboto+Flex
#font #css
👍7
#ссылка дня
Итак, Netlify извинился за вчерашнее отсутствие вебинара (опустим тот факт, что я прислал свою личную ссылку, стыд и позор).
Так вот, вебинар. О чём? О Netlify Edge Functions.
Это serverless (обожаю это слово) среда выполнения JavaScript, основанная на Deno.
Нужен статичный сайт, но хочется добавить пару фишек типа отправки писем, или валидации, или генерации картинок и так далее — не обязательно заводить сервер или поднимать целый инстанс Heroku. Можно просто открыть удобный интерфейс, написать пару функций, будто вы на сервере, и получить желаемый результат.
Serverless тут означает, что нет взаимодействия непосредственно с железом, инфраструктурой.
Естественно, они не одни такие. Просто продукт совсем новый и основан на Deno, а не Node.js.
Так что попробую таки пройти вебинар и побаловаться.
#netlify #serverless
Итак, Netlify извинился за вчерашнее отсутствие вебинара (опустим тот факт, что я прислал свою личную ссылку, стыд и позор).
Так вот, вебинар. О чём? О Netlify Edge Functions.
Это serverless (обожаю это слово) среда выполнения JavaScript, основанная на Deno.
Нужен статичный сайт, но хочется добавить пару фишек типа отправки писем, или валидации, или генерации картинок и так далее — не обязательно заводить сервер или поднимать целый инстанс Heroku. Можно просто открыть удобный интерфейс, написать пару функций, будто вы на сервере, и получить желаемый результат.
Serverless тут означает, что нет взаимодействия непосредственно с железом, инфраструктурой.
Естественно, они не одни такие. Просто продукт совсем новый и основан на Deno, а не Node.js.
Так что попробую таки пройти вебинар и побаловаться.
#netlify #serverless
Netlify
Getting Started with Edge Functions
A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!
👍7
#инструмент дня
Забавный обучающий проект посвящённый DOM Events (событиям объектной модели документа). Кликам и фокусам, короче.
Что такое target, bubble, propagation? Всё показано максимально наглядно.
Если, правда, вы с концепцией уже знакомы, может быть даже чересчур наглядно. Но тем не менее.
Итак, встречайте: https://domevents.dev/
#js #dom #education
Забавный обучающий проект посвящённый DOM Events (событиям объектной модели документа). Кликам и фокусам, короче.
Что такое target, bubble, propagation? Всё показано максимально наглядно.
Если, правда, вы с концепцией уже знакомы, может быть даже чересчур наглядно. Но тем не менее.
Итак, встречайте: https://domevents.dev/
#js #dom #education
domevents.dev
Explore DOM Events
A visualizer to help you learn how the DOM Event system works through exploration
👍15
#статья дня
Помните, не так давно мы обсуждали правильное использование кодов клавиш?
Как оказалось, есть очень яркий пример, почему нужно использовать code. И пример этот — игры.
Когда-то было решено, что стрелки для перемещения персонажей в FPS-играх использовать неразумно: далеко от остальных клавиш и слишком близко к мыши (для правшей). А вот WASD — самое то. Но вот удивительное дело: половина Европы использует не QWERTY, а AZERTY раскладку. И тут у тех, кто использует key, случается конфуз, как на картинке.
Все примеры и подробности тут: https://www.bram.us/2022/03/31/wasd-controls-on-the-web/
#keyboard #js
Помните, не так давно мы обсуждали правильное использование кодов клавиш?
Как оказалось, есть очень яркий пример, почему нужно использовать code. И пример этот — игры.
Когда-то было решено, что стрелки для перемещения персонажей в FPS-играх использовать неразумно: далеко от остальных клавиш и слишком близко к мыши (для правшей). А вот WASD — самое то. Но вот удивительное дело: половина Европы использует не QWERTY, а AZERTY раскладку. И тут у тех, кто использует key, случается конфуз, как на картинке.
Все примеры и подробности тут: https://www.bram.us/2022/03/31/wasd-controls-on-the-web/
#keyboard #js
👍7🥰2
#ссылка дня
Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial
Достаточно подробно и аккуратно расписано, но следует в очередной раз предупредить: это лишь шпаргалка. И как любая шпаргалка, она приносит больше пользы автору, нежели читателю.
Грань между хорошей шпаргалкой и сносной обучающей статьёй очень тонка, кто-то схватит с одной картинки, кому-то нужно лить воду (и это совсем не обязательно плохо).
С другой стороны, этих шпаргалок становится столько, что иной раз можно составить подобие полной картины.
Но лучше самим идти и пробовать все примеры.
#css #flex #flexbox #tutorial
Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial
Достаточно подробно и аккуратно расписано, но следует в очередной раз предупредить: это лишь шпаргалка. И как любая шпаргалка, она приносит больше пользы автору, нежели читателю.
Грань между хорошей шпаргалкой и сносной обучающей статьёй очень тонка, кто-то схватит с одной картинки, кому-то нужно лить воду (и это совсем не обязательно плохо).
С другой стороны, этих шпаргалок становится столько, что иной раз можно составить подобие полной картины.
Но лучше самим идти и пробовать все примеры.
#css #flex #flexbox #tutorial
👍3