🇺🇲Реально ли специалисту в любой области получить greencard США без предложения о работе, без высшего образования, и без знания английского языка? Ответ: да! Рассказываем, как это сделать.
Виза EB-1a дала возможность более 4000 специалистам из разных областей переехать в США в 2022 году. Она выдаётся на срок до 10 лет, по ней можно работать в любой компании, фрилансить и открывать собственный бизнес. И через 5 лет жизни в США претендовать на паспорт!
Чтобы получить эту визу, не обязательно иметь высшее образование, не нужно знать язык на высоком уровне, а заявку можно подать из любой страны. И, пожалуй, самое главное – не нужно обладать каким-то исключительным талантом! Огромное количество специалистов даже не знают, что могут претендовать на эту визу.
Подписывайтесь на наш Telegram-канал, где мы даём массу полезной информации о релокации: https://news.1rj.ru/str/relocode
Пишите нам в WhatsApp: +44 7496 949122 или в Telegram: @relocode_dm. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.
Виза EB-1a дала возможность более 4000 специалистам из разных областей переехать в США в 2022 году. Она выдаётся на срок до 10 лет, по ней можно работать в любой компании, фрилансить и открывать собственный бизнес. И через 5 лет жизни в США претендовать на паспорт!
Чтобы получить эту визу, не обязательно иметь высшее образование, не нужно знать язык на высоком уровне, а заявку можно подать из любой страны. И, пожалуй, самое главное – не нужно обладать каким-то исключительным талантом! Огромное количество специалистов даже не знают, что могут претендовать на эту визу.
Подписывайтесь на наш Telegram-канал, где мы даём массу полезной информации о релокации: https://news.1rj.ru/str/relocode
Пишите нам в WhatsApp: +44 7496 949122 или в Telegram: @relocode_dm. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.
👎16🤡12❤2👍2
#статья дня
Как выделить абзац полоской на всю ширину экрана?
Да вот так: https://codepen.io/t_afif/full/LYQgPgM
Упорото, не правда ли?
Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.
Источник — тред экспериментов в Твиттере.
Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.
И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/
Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/
Я обычно первый способ из второй статьи использовал. Люблю магию.
И вообще, как такая раскладка по-русски будет-то?
#css #fullbleed #бородач
Как выделить абзац полоской на всю ширину экрана?
Да вот так: https://codepen.io/t_afif/full/LYQgPgM
Упорото, не правда ли?
Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.
Источник — тред экспериментов в Твиттере.
Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.
И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/
Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/
Я обычно первый способ из второй статьи использовал. Люблю магию.
И вообще, как такая раскладка по-русски будет-то?
#css #fullbleed #бородач
👍10
#заметка дня
В чём разница между селекторами
Вот вы не знали (наверное), а она есть!
Псевдокласс
Селектор атрибута
Например,
Да не томи уже!
Короче, суть дела в том, что атрибут disabled может быть установлен на fieldset, в таком случае поля будут недоступны, но в селектор
Сложно? Вот пример: https://codepen.io/alinaki/pen/VwgKOPE
Короче, аккуратнее.
#css #disabled #бородач
В чём разница между селекторами
:disabled и [disabled]?Вот вы не знали (наверное), а она есть!
Псевдокласс
:disabled выберет любой элемент, находящийся в отключённом состоянии.Селектор атрибута
[disabled] выберет любой элемент, имеющий атрибут disabled.Например,
<input type="text" disabled/> подпадёт под оба селектора, вне зависимости от того, случилось это на этапе прямого рендера или через установку свойства disabled узлу.Да не томи уже!
Короче, суть дела в том, что атрибут disabled может быть установлен на fieldset, в таком случае поля будут недоступны, но в селектор
input[disabled] не попадёт ничего.Сложно? Вот пример: https://codepen.io/alinaki/pen/VwgKOPE
Короче, аккуратнее.
#css #disabled #бородач
codepen.io
disabled vs disabled
...
👍16
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Генераторов треугольников на самом деле достаточно много... было создано лет за 20. Поэтому почти все из используют довольно старые техники. Или же вообще универсальные aka clip path.
Потому, встречаем:
https://css-generators.com/triangle-shapes/
Рассчитаны под один элемент. Пример кода:
Пользуемся, котаны!
#css #triangle #tool #generator
Генераторов треугольников на самом деле достаточно много... было создано лет за 20. Поэтому почти все из используют довольно старые техники. Или же вообще универсальные aka clip path.
Потому, встречаем:
https://css-generators.com/triangle-shapes/
Рассчитаны под один элемент. Пример кода:
/* HTML: <div class="triangle"></div> */
.triangle {
width: 180px;
aspect-ratio: 1/cos(30deg);
clip-path: polygon(50% 100%,100% 0,0 0);
background: linear-gradient(45deg,#FA6900,#C02942);
}
Заценили расчет соотношения сторон, кстати? 🤓Пользуемся, котаны!
#css #triangle #tool #generator
👍15❤3🤩2
#codepen дня
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://news.1rj.ru/str/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#noscript #effect #filter #бородач
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://news.1rj.ru/str/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#noscript #effect #filter #бородач
❤12👍5🤩1
#фишка дня
Замотался, но про вас не забыл, котаны!
Вторая, а может и первая, по популярности фигура на сайтах — это звезда. То рейтинг ей поставят, то маской наложат, то конфетти сделают...
Так вот, из поста про треугольники мы уже в курсе, что clip-path можно применять везде. И даже нужно. Так почему бы не нарисовать им звезду?
«Наверное, потому что задолбаешься точки ставить?», — скажете вы, и будете, в целом, правы. Их там вроде... 10? Десять же, да?
Нет! Оказывается, достаточно пяти!
Глядите чо: https://codepen.io/t_afif/pen/jORvmKG
1. Вариант на тригонометрических функциях:
2. Упрощённый вариант, когда всё уже посчитано за нас:
Чтобы понять, как это работает, проще сразу загрузить в генератор clip-path: https://bennettfeely.com/clippy/
Вы не поверите, но это буквально совпадает с тем, как вы безотрывно рисуете звезду карандашом ещё со школьных времён!
#css #star #clip
Замотался, но про вас не забыл, котаны!
Вторая, а может и первая, по популярности фигура на сайтах — это звезда. То рейтинг ей поставят, то маской наложат, то конфетти сделают...
Так вот, из поста про треугольники мы уже в курсе, что clip-path можно применять везде. И даже нужно. Так почему бы не нарисовать им звезду?
«Наверное, потому что задолбаешься точки ставить?», — скажете вы, и будете, в целом, правы. Их там вроде... 10? Десять же, да?
Нет! Оказывается, достаточно пяти!
Глядите чо: https://codepen.io/t_afif/pen/jORvmKG
1. Вариант на тригонометрических функциях:
clip-path: polygon(50% 0,
calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn)))
);
2. Упрощённый вариант, когда всё уже посчитано за нас:
clip-path: polygon(50% 0,80% 100%,0 39%,100% 39%,20% 100%);
Чтобы понять, как это работает, проще сразу загрузить в генератор clip-path: https://bennettfeely.com/clippy/
Вы не поверите, но это буквально совпадает с тем, как вы безотрывно рисуете звезду карандашом ещё со школьных времён!
#css #star #clip
👍19❤1🤩1
#такое дня
Финляндия снова оказалась в мировых IT новостях, но на сей раз ситуация грустная для всех... разработчиков финансовых и платёжных систем.
А всё почему? А всё потому, что правительство Фи планирует повысить НДС до 25.5%.
Самые опытные из вас уже поняли, в чём проблема. И будут абсолютно правы. Потому что это не только офигеть какой высокий налог, но и первый случай нецелого значения налога.
А разработчики, как мы давно знаем, работать умеют только с целыми числами.
Если налог всё же будет введён, он резко превратится в лучшем случае в 26%, что вызовет тонну претензий, а в худшем — вызовет ошибки транзакций.
Ладно, скажете вы, нам-то зачем рассказываешь это? Мясо, мясо давай!
А вот и мясо. Глядите, на иллюстрации — API платёжной системы Paytrail. Прямо указано целое число. И ну всё бы ничего, но они обсуждали это... 2 года назад!
Вот: https://github.com/paytrail/api-documentation/issues/28
И тогда пришли к выводу, что не надо. А оно вот как вышло. Уже вовсю начали выдумывать варианты решения.
А сколько финансовых систем ещё в мире? :)
P. S. Я думаю, следующей новостью из Финляндии будет: «В связи со сложностью внесения изменений в информационные системы правительство приняло решение поднять НДС до 26%».
#api
Финляндия снова оказалась в мировых IT новостях, но на сей раз ситуация грустная для всех... разработчиков финансовых и платёжных систем.
А всё почему? А всё потому, что правительство Фи планирует повысить НДС до 25.5%.
Самые опытные из вас уже поняли, в чём проблема. И будут абсолютно правы. Потому что это не только офигеть какой высокий налог, но и первый случай нецелого значения налога.
А разработчики, как мы давно знаем, работать умеют только с целыми числами.
Если налог всё же будет введён, он резко превратится в лучшем случае в 26%, что вызовет тонну претензий, а в худшем — вызовет ошибки транзакций.
Ладно, скажете вы, нам-то зачем рассказываешь это? Мясо, мясо давай!
А вот и мясо. Глядите, на иллюстрации — API платёжной системы Paytrail. Прямо указано целое число. И ну всё бы ничего, но они обсуждали это... 2 года назад!
Вот: https://github.com/paytrail/api-documentation/issues/28
И тогда пришли к выводу, что не надо. А оно вот как вышло. Уже вовсю начали выдумывать варианты решения.
А сколько финансовых систем ещё в мире? :)
P. S. Я думаю, следующей новостью из Финляндии будет: «В связи со сложностью внесения изменений в информационные системы правительство приняло решение поднять НДС до 26%».
#api
🤡19👍4🤬4🤩2❤1
#заметка дня
Что-то по Твиттеру опять пронеслась война тех, кто считает, что надо максимально ограничивать кандидату доступ информации во время собеседования, не пускать его в поиск Google, запрещать спрашивать у ChatGPT, не давать документацию и так далее. И тех, кто, в общем-то, считает наоборот.
Я пока не видел хороших и правильных примеров использования ChatGPT на собеседованиях, если честно. Единственный известный мне случай подобного поведения кандидата вызывает нервный смех, потому что ему стоило честно сказать: "Не знаю". Он буквально понятия не имел даже как задать вопрос правильно, но с каменным лицом доказывал, что так и надо. Наверное, получился бы хороший продажник.
С документацией всё просто: естественно, надо разрешать доступ. Да даже в университетах разрешают пользоваться конспектами и справочниками. Ну, в нормальных...
Google... ситуация похожа на ChatGPT. Нужно внимательно смотреть, что и как человек гуглит. Как конкретно он формирует запрос и какие ссылки открывает.
Я лично нанимал фронта, который не стеснялся гуглить во время собеседования. Прям стримил экран и искал. Где-то для выжимки из доки, где-то чтобы посмотреть альтернативы алгоритму.
А потом чтобы показать скриншоты своего проекта, который был закрыт пейволлом!
А вот того, кто во время собеседования гуглил меня, мы не взяли...
А как у вас дела обстоят и опыт?
#work #interview #собеседование #бородач
Что-то по Твиттеру опять пронеслась война тех, кто считает, что надо максимально ограничивать кандидату доступ информации во время собеседования, не пускать его в поиск Google, запрещать спрашивать у ChatGPT, не давать документацию и так далее. И тех, кто, в общем-то, считает наоборот.
Я пока не видел хороших и правильных примеров использования ChatGPT на собеседованиях, если честно. Единственный известный мне случай подобного поведения кандидата вызывает нервный смех, потому что ему стоило честно сказать: "Не знаю". Он буквально понятия не имел даже как задать вопрос правильно, но с каменным лицом доказывал, что так и надо. Наверное, получился бы хороший продажник.
С документацией всё просто: естественно, надо разрешать доступ. Да даже в университетах разрешают пользоваться конспектами и справочниками. Ну, в нормальных...
Google... ситуация похожа на ChatGPT. Нужно внимательно смотреть, что и как человек гуглит. Как конкретно он формирует запрос и какие ссылки открывает.
Я лично нанимал фронта, который не стеснялся гуглить во время собеседования. Прям стримил экран и искал. Где-то для выжимки из доки, где-то чтобы посмотреть альтернативы алгоритму.
А потом чтобы показать скриншоты своего проекта, который был закрыт пейволлом!
А вот того, кто во время собеседования гуглил меня, мы не взяли...
А как у вас дела обстоят и опыт?
#work #interview #собеседование #бородач
👍16❤2
#заметка дня
Что-то этот тег настолько слился с фишкой дня, что я почти про него забыл.
Итак, сегодняшняя тема: дробные пиксели! Половинчатые, чаще всего. Уж больно (наши) дизайнеры полюбили полупиксельные бордеры.
К HiDPI-экранам быстро привыкаешь, не правда ли? К слову, картинка от Веса Боса. Так вот, на экранах высокой плотности вы скорее всего получите желаемое — полупиксельную границу. Естественно, полупиксельную в рамках вашей плотности экрана и ваших виртуальных пикселей.
А на обычных экранах произойдёт округление, для 0.5px — до 1px.
А ещё в треде по ссылке нашлось шикарное: целая презентация о том, как в вашей вёрстке из-за сотни разных ошибок округления могут появиться рандомные белые полосы! Особенно при вёрстке писем.
Это на самом деле серьёзная и большая тема, затрагивающая как вопросы рендеринга на экранах различной плотности, так и историю HTML-движков.
Собственно, вот: https://docs.google.com/presentation/d/1orKRwx5DnSoyYL1XQk4nv8ffycgmMePbF9j8fOGhXi0
Абсолютно прекрасно.
#css #round
Что-то этот тег настолько слился с фишкой дня, что я почти про него забыл.
Итак, сегодняшняя тема: дробные пиксели! Половинчатые, чаще всего. Уж больно (наши) дизайнеры полюбили полупиксельные бордеры.
К HiDPI-экранам быстро привыкаешь, не правда ли? К слову, картинка от Веса Боса. Так вот, на экранах высокой плотности вы скорее всего получите желаемое — полупиксельную границу. Естественно, полупиксельную в рамках вашей плотности экрана и ваших виртуальных пикселей.
А на обычных экранах произойдёт округление, для 0.5px — до 1px.
А ещё в треде по ссылке нашлось шикарное: целая презентация о том, как в вашей вёрстке из-за сотни разных ошибок округления могут появиться рандомные белые полосы! Особенно при вёрстке писем.
Это на самом деле серьёзная и большая тема, затрагивающая как вопросы рендеринга на экранах различной плотности, так и историю HTML-движков.
Собственно, вот: https://docs.google.com/presentation/d/1orKRwx5DnSoyYL1XQk4nv8ffycgmMePbF9j8fOGhXi0
Абсолютно прекрасно.
#css #round
❤18👍6
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Google Chrome на днях достиг версии 124. Что это значит? Что у нас очередные обновления в DevTools!
Из наиболее интересного — инспектор анимаций теперь поддерживает нативные анимации по скроллу (на видео).
Если вы ещё не в курсе, что это, рекомендую посмотреть это демо: https://scroll-driven-animations.style/
К слову, автор демо — Брамус Ван Дамм — заодно представил расширение, позволяющее удобно эти самые анимации визуализировать и отлаживать. Есть и полифилл для ScrollTimeline.
Следующая фишка, которая будет, внезапно, полезна не только разработчикам — это отладка контента для автоподстановки в формах — Autofill! То есть теперь можно открыть форму и посмотреть, как и чем она будет заполняться. С точки зрения разработчика это значит, что появился шанс подогнать названия полей под соответствие системе распознавания.
А ещё в DevTools теперь нормальная поддержка нативного нестинга aka вложенности!
Ну и раз такое дело, пусть на всякий случай тут полежит ссылка на список изменений в Chrome 124: https://developer.chrome.com/release-notes/124
#css #chrome #devtools
Google Chrome на днях достиг версии 124. Что это значит? Что у нас очередные обновления в DevTools!
Из наиболее интересного — инспектор анимаций теперь поддерживает нативные анимации по скроллу (на видео).
Если вы ещё не в курсе, что это, рекомендую посмотреть это демо: https://scroll-driven-animations.style/
К слову, автор демо — Брамус Ван Дамм — заодно представил расширение, позволяющее удобно эти самые анимации визуализировать и отлаживать. Есть и полифилл для ScrollTimeline.
Следующая фишка, которая будет, внезапно, полезна не только разработчикам — это отладка контента для автоподстановки в формах — Autofill! То есть теперь можно открыть форму и посмотреть, как и чем она будет заполняться. С точки зрения разработчика это значит, что появился шанс подогнать названия полей под соответствие системе распознавания.
А ещё в DevTools теперь нормальная поддержка нативного нестинга aka вложенности!
Ну и раз такое дело, пусть на всякий случай тут полежит ссылка на список изменений в Chrome 124: https://developer.chrome.com/release-notes/124
#css #chrome #devtools
❤20👍6
#инструмент дня
Милота, за которой стоит самый настоящий матан! Интереснейшие мозаики (паттерны, если хотите): https://codepen.io/yuanchuan/pen/xxEXwZw
Вы можете обратить внимание на использование веб-компонента CSS-doodle. Я тоже заинтересовался, полез в настройки кодпена и… и офигел. Вы только посмотрите на это!
https://css-doodle.com/
Целый инструмент для генерации паттернов. Документация и примеры кода выше всяких похвал.
На его основе создан https://tabbied.com/
Правда, результаты работы Tabbied очень напоминают Экспресс-дизайн 😅
Вообще, весьма круто. Пару вечеров убить точно стоит.
#css #pattern
Милота, за которой стоит самый настоящий матан! Интереснейшие мозаики (паттерны, если хотите): https://codepen.io/yuanchuan/pen/xxEXwZw
Вы можете обратить внимание на использование веб-компонента CSS-doodle. Я тоже заинтересовался, полез в настройки кодпена и… и офигел. Вы только посмотрите на это!
https://css-doodle.com/
Целый инструмент для генерации паттернов. Документация и примеры кода выше всяких похвал.
На его основе создан https://tabbied.com/
Правда, результаты работы Tabbied очень напоминают Экспресс-дизайн 😅
Вообще, весьма круто. Пару вечеров убить точно стоит.
#css #pattern
❤14👍5
This media is not supported in your browser
VIEW IN TELEGRAM
#новость дня
На этой неделе вышел Firefox 125 (точнее, 125.0.1, там нашли уязвимость прямо перед выходом, и нулевую версию скипнули).
И у Mozilla, в отличие от Google, нет такой мощной пиар-команды, которая писала бы статьи на каждый выпуск, рекламируя новые фишки. Поэтому приходится нам с вами. Ну, конкретно в этом случае — Вадиму Макееву, всем вам знакомому.
Короче, к чему весь кипиш. А к тому, что Firefox 125 наконец-то начал поддерживать Popover API!
Вот, в чейнджлоге: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/125#apis
А вот, собственно, документация по API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
Мы с вами тоже рассматривали пару примеров. Вот тут: https://news.1rj.ru/str/htmlshit/2029
Ну и это, в целом, значит, что Popover поддерживается во всех современных движках. И кому-то скоро вполне можно бужет это использовать :)
Ну а кому-то — полифиллить. Но то такое.
#css #popover #firefox
На этой неделе вышел Firefox 125 (точнее, 125.0.1, там нашли уязвимость прямо перед выходом, и нулевую версию скипнули).
И у Mozilla, в отличие от Google, нет такой мощной пиар-команды, которая писала бы статьи на каждый выпуск, рекламируя новые фишки. Поэтому приходится нам с вами. Ну, конкретно в этом случае — Вадиму Макееву, всем вам знакомому.
Короче, к чему весь кипиш. А к тому, что Firefox 125 наконец-то начал поддерживать Popover API!
Вот, в чейнджлоге: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/125#apis
А вот, собственно, документация по API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
Мы с вами тоже рассматривали пару примеров. Вот тут: https://news.1rj.ru/str/htmlshit/2029
Ну и это, в целом, значит, что Popover поддерживается во всех современных движках. И кому-то скоро вполне можно бужет это использовать :)
Ну а кому-то — полифиллить. Но то такое.
#css #popover #firefox
❤9👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?
Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!
Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:
Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/
И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/
Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.
Прекрасные инструменты, целый новый мир открывают.
#fonts #tools #бородач
Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?
Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!
Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:
Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/
И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/
Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.
Прекрасные инструменты, целый новый мир открывают.
#fonts #tools #бородач
👍33
#фильм дня
Node.js с нами уже почти 15 лет и переоценить её влияние на интернет и расстановку сил в разработке вообще невозможно.
И, собственно, к пятнадцатилетию — так-то 27 мая — уже известные нам по документалкам про React.js, Vue.js и GraphQL ребята из Honeypot сняли фильм про создание и становление Node.js. От серверной платформы до де-факто стандартного тулинга во фронтенд-разработке.
Вот: https://youtu.be/LB8KwiiUGy0?si=M8OY8oVtZgdxRAmn
Это мы смотрим!
#documentary #movie #nodejs
Node.js с нами уже почти 15 лет и переоценить её влияние на интернет и расстановку сил в разработке вообще невозможно.
И, собственно, к пятнадцатилетию — так-то 27 мая — уже известные нам по документалкам про React.js, Vue.js и GraphQL ребята из Honeypot сняли фильм про создание и становление Node.js. От серверной платформы до де-факто стандартного тулинга во фронтенд-разработке.
Вот: https://youtu.be/LB8KwiiUGy0?si=M8OY8oVtZgdxRAmn
Это мы смотрим!
#documentary #movie #nodejs
👍12🤩2🤡1
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #noscript #sprite #бородач
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #noscript #sprite #бородач
❤23👍7🤩2
#заметка дня
Ну что, воспользовался
«Присаживайся поудобнее и не паникуй», — сказал себе я вчера, грохнув два дня работы моей жены.
Всё, что нам нужно знать в данный момент — что Git писали не идиоты.
Итак, в моём случае я сделал
...и обнаружил, что пара каталогов того. Пропали.
Хороший вопрос, конечно, какого хера Git это делает, но если подумать, то с точки зрения системы контроля версий-то всё ок. Потому проблема на стороне пользователя.
К счастью, Git на каждый чих строит индекс. И обладает средствами работы с этим самым индексом. Включая работу с файлами.
Для этого встроена утилита, название которой удивительно знакомо линуксоидам:
И вот она-то нам и нужна. Пишем
Да, они там лежат проименованные как хэши, но кого это когда останавливало.
Дальше дело за малым: просмотреть файлы и восстановить.
Мы восстановили все HTML/CSS/JS и даже картинки (с картинками просто: обращайте внимание на бинарные заголовки, там пишется формат).
Но, конечно, используйте мозг почаще. И делайте резервные копии. Тоже почаще.
#git #lost #recover
Ну что, воспользовался
git reset --hard и грохнул половину репозитория, потому что не до конца понимаешь, как оно работает?«Присаживайся поудобнее и не паникуй», — сказал себе я вчера, грохнув два дня работы моей жены.
Всё, что нам нужно знать в данный момент — что Git писали не идиоты.
Итак, в моём случае я сделал
git add :/, чтобы добавить все файлы из каталога. Потом понял, что ошибся, что мне нужны не все, и бахнул git reset --hard....и обнаружил, что пара каталогов того. Пропали.
Хороший вопрос, конечно, какого хера Git это делает, но если подумать, то с точки зрения системы контроля версий-то всё ок. Потому проблема на стороне пользователя.
К счастью, Git на каждый чих строит индекс. И обладает средствами работы с этим самым индексом. Включая работу с файлами.
Для этого встроена утилита, название которой удивительно знакомо линуксоидам:
git fsck. Что буквально расшифровывается как git file system check.И вот она-то нам и нужна. Пишем
git fsck --lost-found и все наши файлы из предыдущей версии индекса, которые не попали в текущее состояние Git, оказываются в каталоге .git/lost-found/Да, они там лежат проименованные как хэши, но кого это когда останавливало.
Дальше дело за малым: просмотреть файлы и восстановить.
Мы восстановили все HTML/CSS/JS и даже картинки (с картинками просто: обращайте внимание на бинарные заголовки, там пишется формат).
Но, конечно, используйте мозг почаще. И делайте резервные копии. Тоже почаще.
#git #lost #recover
❤27👍9🤩3
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://news.1rj.ru/str/htmlshit/1873
Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.
Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/
Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.
И, наконец, мы можем это сделать!
Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN
Значащий код:
Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.
Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.
По-моему, это решение ну в разы приятнее высоких псевдоэлементов.
Как вам, котаны?
#css #has #table #бородач
Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://news.1rj.ru/str/htmlshit/1873
Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.
Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/
Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.
И, наконец, мы можем это сделать!
Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN
Значащий код:
table:has(td:nth-child(5):hover) {
td:nth-child(5) {
background: var(--hover);
}
}
Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.
Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.
По-моему, это решение ну в разы приятнее высоких псевдоэлементов.
Как вам, котаны?
#css #has #table #бородач
👍19❤4🤡2👎1
#фишка дня
Итак, разрабатываете вы интернациональный проект. А что самое главное в интернационализации?
Конечно же кавычки! И как их ставить в оформлении цитат? Руками чтоль?
Ну нет, конечно. У свойства content имеются зарезервированные значения
Пруф: https://codepen.io/alinaki/pen/VwNqNpa
Элемент
#css #til #quotes #i18n
Итак, разрабатываете вы интернациональный проект. А что самое главное в интернационализации?
Конечно же кавычки! И как их ставить в оформлении цитат? Руками чтоль?
Ну нет, конечно. У свойства content имеются зарезервированные значения
open-quote и close-quote, которые и дадут нужный результат, среагируя на атрибут lang элемента. Ваши висячие кавычки никогда не будут прежними :)Пруф: https://codepen.io/alinaki/pen/VwNqNpa
Элемент
q, кстати, так из коробки умеет.#css #til #quotes #i18n
👍24
#инструмент дня
С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?
Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm
Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.
Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...
Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.
Моя рекомендация!
#npm #node #package #бородач
С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?
Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm
Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.
Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...
Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.
Моя рекомендация!
#npm #node #package #бородач
👍22❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
А кому тут неожиданно уместных применений CSS 3D-преобразований?
Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!
Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO
Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).
Маги тут?
#css #3d #transform #бородач
А кому тут неожиданно уместных применений CSS 3D-преобразований?
Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!
Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO
Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).
Маги тут?
#css #3d #transform #бородач
👍22🤩6❤1