#заметка дня
#css #flex #ie #float #flexbugs
По какой-то неведомой мне причине в профильных чатах очень часто, волнами, появляются люди, которых (как они заявляют) учат верстать на float.
Мол, сначала блоки, потом float, потом flex и потом grid. Это, конечно же, полный бред. Никакого порядка изучения нет, есть лишь разные модели раскладки контента.
Более того, я заметил это в паре книг, но сейчас не о них.
Часть из этих людей утверждает, что им приходится верстать на float потому что нужна поддержка Internet Explorer 11, который, будто бы, не поддерживает flexbox.
Господа, я не знаю, кто вас заставляет так считать. Всё прекрасно работает, даже без -ms-префиксов. Проблем на самом деле намного больше и они везде.
Как всегда, залог успешной вёрстки — это простая гигиена и знание справочников. В отношении flexbox она такова:
никогда не используйте короткую запись (flex: 1 0 auto и т. п), пишите конкретные правила; не надо полагаться на значения по-умолчанию.
Эта гигиена, кстати, вообще касается многих сложносоставных правил.
А чтобы быть уверенным, всегда держите в закладках замечательную подборку багов с решениями, которая так и называется: Flexbugs.
https://github.com/philipwalton/flexbugs
#css #flex #ie #float #flexbugs
По какой-то неведомой мне причине в профильных чатах очень часто, волнами, появляются люди, которых (как они заявляют) учат верстать на float.
Мол, сначала блоки, потом float, потом flex и потом grid. Это, конечно же, полный бред. Никакого порядка изучения нет, есть лишь разные модели раскладки контента.
Более того, я заметил это в паре книг, но сейчас не о них.
Часть из этих людей утверждает, что им приходится верстать на float потому что нужна поддержка Internet Explorer 11, который, будто бы, не поддерживает flexbox.
Господа, я не знаю, кто вас заставляет так считать. Всё прекрасно работает, даже без -ms-префиксов. Проблем на самом деле намного больше и они везде.
Как всегда, залог успешной вёрстки — это простая гигиена и знание справочников. В отношении flexbox она такова:
никогда не используйте короткую запись (flex: 1 0 auto и т. п), пишите конкретные правила; не надо полагаться на значения по-умолчанию.
Эта гигиена, кстати, вообще касается многих сложносоставных правил.
А чтобы быть уверенным, всегда держите в закладках замечательную подборку багов с решениями, которая так и называется: Flexbugs.
https://github.com/philipwalton/flexbugs
GitHub
GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.
A community-curated list of flexbox issues and cross-browser workarounds for them. - philipwalton/flexbugs
Ну и эта статья с расшифровкой от прекрасного канала @defront слишком хороша, чтобы её не репостнуть.
Forwarded from Defront — про фронтенд-разработку и не только
Амелия Ваттенбергер написала интерактивную статью про использование процентов в CSS — "What does 100% mean in CSS?".
В статье есть хорошие интерактивные примеры и краткое описание поведения процентов для разных свойств:
- для
- для
- для
- для
- для
- для
- для
- для
- для
- для
Очень прикольная статья. Советую почитать всем, кто хочет разобраться с процентами в CSS.
#css
https://wattenberger.com/blog/css-percents
В статье есть хорошие интерактивные примеры и краткое описание поведения процентов для разных свойств:
- для
height процент высчитывается относительно высоты родителя- для
width — относительно ширины родителя- для
top — относительно высоты родителя- для
left — относительно ширины родителя- для
margin-top — относительно ширины родителя- для
margin-left — относительно ширины родителя- для
padding-top — относительно ширины родителя- для
padding-left — относительно ширины родителя- для
translate-top — относительно высоты элемента- для
translate-left — относительно ширины элементаОчень прикольная статья. Советую почитать всем, кто хочет разобраться с процентами в CSS.
#css
https://wattenberger.com/blog/css-percents
#статья дня
#html #css #px #em #rem #vw #vh
Лето и отпуск не лучшие помощники в написании новых статей, но ничто не забыто.
Тем временем великолепная Йоксель (https://twitter.com/yoksel) выпустила крайне подробную статью о единицах измерения в CSS.
Рассмотрены даже не самые популярные единицы вроде ex и ch, даны разъяснения об их вычислении и приведены наглядные примеры.
Единственное, не сказано о том, что v-единицы не реагируют на масштаб в браузере. Надо бы сообщить. (см. Upd.)
Читаем и не забываем подписываться на Йоксель в твиттере.
Upd. О важности взаимодействия с авторами. В статье появилось упоминание, что v-единицы не реагируют на масштаб. Никогда не стесняйтесь сообщать авторам статей о всём, что считаете нужным.
http://css.yoksel.ru/size-units/
#html #css #px #em #rem #vw #vh
Лето и отпуск не лучшие помощники в написании новых статей, но ничто не забыто.
Тем временем великолепная Йоксель (https://twitter.com/yoksel) выпустила крайне подробную статью о единицах измерения в CSS.
Рассмотрены даже не самые популярные единицы вроде ex и ch, даны разъяснения об их вычислении и приведены наглядные примеры.
Единственное, не сказано о том, что v-единицы не реагируют на масштаб в браузере. Надо бы сообщить. (см. Upd.)
Читаем и не забываем подписываться на Йоксель в твиттере.
Upd. О важности взаимодействия с авторами. В статье появилось упоминание, что v-единицы не реагируют на масштаб. Никогда не стесняйтесь сообщать авторам статей о всём, что считаете нужным.
http://css.yoksel.ru/size-units/
#статья дня
Чему senior-разработчики могут поучиться у начинающих: https://stackoverflow.blog/2019/12/19/what-senior-developers-can-learn-from-beginners/
Она немного выбивается из общей сути канала статья, но всё же о буднях.
Случилось вот что: мы в шесть глаз просмотрели глупейшую опечатку.
В очень старом коде было повторяющееся условие проверки включения элемента в массив настроек:
…и обратное к нему (=== -1).
Очевидно, было принято решение заменить его на переменную shouldCombineResults и использовать везде.
И в этот момент и была допущена ошибка: заменив инверсное условие, мы забыли поставить оператор отрицания: “!”. И на ревью никто не заметил этого.
Почему? Потому что иногда лучше быть чётким в своих условиях, пусть даже код и выглядит странно. Очевидно, решение было плохим, но оно хотя бы было прямолинейным и чётко описывало условие. Раз три человека это пропустило, значит, и подход к рефакторингу был неверным изначально.
Не нужно писать плохой код, но что ещё хуже — во имя благих намерений пытаться исправить дерьмовый, но рабочий код.
Чему senior-разработчики могут поучиться у начинающих: https://stackoverflow.blog/2019/12/19/what-senior-developers-can-learn-from-beginners/
Она немного выбивается из общей сути канала статья, но всё же о буднях.
Случилось вот что: мы в шесть глаз просмотрели глупейшую опечатку.
В очень старом коде было повторяющееся условие проверки включения элемента в массив настроек:
settings.indexOf(“COMBINE_RESULTS”) !== -1…и обратное к нему (=== -1).
Очевидно, было принято решение заменить его на переменную shouldCombineResults и использовать везде.
И в этот момент и была допущена ошибка: заменив инверсное условие, мы забыли поставить оператор отрицания: “!”. И на ревью никто не заметил этого.
Почему? Потому что иногда лучше быть чётким в своих условиях, пусть даже код и выглядит странно. Очевидно, решение было плохим, но оно хотя бы было прямолинейным и чётко описывало условие. Раз три человека это пропустило, значит, и подход к рефакторингу был неверным изначально.
Не нужно писать плохой код, но что ещё хуже — во имя благих намерений пытаться исправить дерьмовый, но рабочий код.
Stack Overflow Blog
What senior developers can learn from beginners
Over the last couple years, I’ve had the luxury of working with and mentoring quite a few beginners. While I’ve obviously witnessed my fair share of programming no-no’s, things are not as black and white as they may seem. There’s a handful of patterns and…
#заметка дня
Оказывается, с мая этого года Chrome больше не размывает текст и контент вообще при использовании transform: translate(-50%, -50%) в случае нечётных размеров или нецелых процентов (звучит глупо, но проблема весьма известная: https://stackoverflow.com/questions/31109299/css-transform-translate-50-50-makes-texts-blurry).
Мне сложно сослаться на конкретную версию, плюс многие разработчики используют Canary, но мы ждали этого больше пяти лет: https://bugs.chromium.org/p/chromium/issues/detail?id=521364
Наконец-то можно больше не удивлять людей подобными предположениями: “А размер модалки чётный?”
Оказывается, с мая этого года Chrome больше не размывает текст и контент вообще при использовании transform: translate(-50%, -50%) в случае нечётных размеров или нецелых процентов (звучит глупо, но проблема весьма известная: https://stackoverflow.com/questions/31109299/css-transform-translate-50-50-makes-texts-blurry).
Мне сложно сослаться на конкретную версию, плюс многие разработчики используют Canary, но мы ждали этого больше пяти лет: https://bugs.chromium.org/p/chromium/issues/detail?id=521364
Наконец-то можно больше не удивлять людей подобными предположениями: “А размер модалки чётный?”
#заметка дня
#shadowdom #css #input
Тема дня — надоедливые иконки в полях ввода.
Я надеюсь, все помнят заметку о Shadow DOM и как с ней работать. Если нет, вот ссылка: https://news.1rj.ru/str/htmlshit/384
Суть проблемы в том, что Chrome начал активно обновлять свой набор полей ввода и практически реализовал все доступные в спецификации. Firefox и Safari пока сильно отстают, но разработчики, как правило, используют правильные типы полей и вешают альтернативные решения.
В последних обновлениях появились иконки часов и календаря в соответствующих полях. Естественно, это сразу не устроило тех, кто оформлял поля самостоятельно. А как их убрать? Секрет снова в Shadow DOM. Читаем статью выше, идём в средства разработчика и быстро получаем решение (см. иллюстрацию и пример):
https://codepen.io/alinaki/pen/yLOVoXe
Надеюсь, скоро подтянутся и остальные браузеры и пример можно будет дополнить.
#shadowdom #css #input
Тема дня — надоедливые иконки в полях ввода.
Я надеюсь, все помнят заметку о Shadow DOM и как с ней работать. Если нет, вот ссылка: https://news.1rj.ru/str/htmlshit/384
Суть проблемы в том, что Chrome начал активно обновлять свой набор полей ввода и практически реализовал все доступные в спецификации. Firefox и Safari пока сильно отстают, но разработчики, как правило, используют правильные типы полей и вешают альтернативные решения.
В последних обновлениях появились иконки часов и календаря в соответствующих полях. Естественно, это сразу не устроило тех, кто оформлял поля самостоятельно. А как их убрать? Секрет снова в Shadow DOM. Читаем статью выше, идём в средства разработчика и быстро получаем решение (см. иллюстрацию и пример):
https://codepen.io/alinaki/pen/yLOVoXe
Надеюсь, скоро подтянутся и остальные браузеры и пример можно будет дополнить.
#codepen дня
Фотореалистичное изображение синтезатора Roland MC-500: https://codepen.io/fossheim/pen/BaKQGZJ
Оригинал изображения можно увидеть по ссылке: https://i.pinimg.com/564x/a2/02/a4/a202a4ab33dff87b53ba54db33518b78.jpg
Да, здесь ничего действительно интересного нет, вполне типичное качественное задротство, но тем не менее, если вам когда-нибудь потребуется имитация реальных поверхностей и постаревшего текста, вы знаете куда идти.
У автора данной работы есть несколько интересных статей о приёмах, позволяющих достичь фотореалистичности в CSS: выделение базовых цветов каждого компонента, использование мягких градиентов вместо сплошных фонов, итеративное выполнение задачи.
https://fossheim.io/writing/posts/css-macintosh/
https://fossheim.io/writing/posts/css-polaroid-camera/
Фотореалистичное изображение синтезатора Roland MC-500: https://codepen.io/fossheim/pen/BaKQGZJ
Оригинал изображения можно увидеть по ссылке: https://i.pinimg.com/564x/a2/02/a4/a202a4ab33dff87b53ba54db33518b78.jpg
Да, здесь ничего действительно интересного нет, вполне типичное качественное задротство, но тем не менее, если вам когда-нибудь потребуется имитация реальных поверхностей и постаревшего текста, вы знаете куда идти.
У автора данной работы есть несколько интересных статей о приёмах, позволяющих достичь фотореалистичности в CSS: выделение базовых цветов каждого компонента, использование мягких градиентов вместо сплошных фонов, итеративное выполнение задачи.
https://fossheim.io/writing/posts/css-macintosh/
https://fossheim.io/writing/posts/css-polaroid-camera/
codepen.io
RolandMC-500.css
Photorealistic illustration of a Roland MC-500. Based on the following ad: https://i.pinimg.com/564x/a2/02/a4/a202a4ab33dff87b53ba54db33518b78.jpg For...
#ссылка дня
#codepen #placeholder #image
Я удивлён, что не все это знают, но когда вы хотите показать что-то на codepen.io или просто лень тратить время на поиск доступных свободных изображений для вашего макета, можно воспользоваться сервисами поставки плейсхолдеров. Один из наиболее популярных — placehold.it.
Пишете адрес, указываете нужный размер в формате 100x100 и получаете серую картинку с указанным размером.
А если открыть главную страницу сервиса и почитать документацию — так там ещё и текст будет и разные цвета фона.
Горячо рекомендую!
https://placehold.it/300x300
#codepen #placeholder #image
Я удивлён, что не все это знают, но когда вы хотите показать что-то на codepen.io или просто лень тратить время на поиск доступных свободных изображений для вашего макета, можно воспользоваться сервисами поставки плейсхолдеров. Один из наиболее популярных — placehold.it.
Пишете адрес, указываете нужный размер в формате 100x100 и получаете серую картинку с указанным размером.
А если открыть главную страницу сервиса и почитать документацию — так там ещё и текст будет и разные цвета фона.
Горячо рекомендую!
https://placehold.it/300x300
#заметка дня
#js #focus #scroll
Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?
Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.
Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.
Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.
А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).
Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy
Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425
Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb
#js #focus #scroll
Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?
Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.
Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.
Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.
А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).
Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy
Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425
Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb
codepen.io
Scroll into view and center
...
#ссылка дня
#css #flex #flexbox #game
Соскучились по играм в CSS? Не всё же лягушек во FlexBoxFroggy.com (игра по флексбоксу) расставлять да морковку в CssGridGarden.com (игра по гридам) сажать.
Встречайте — http://www.flexboxdefense.com/
Tower Defense на flexbox!
P. S. вот только на телефонах не работает. Эх.
P. P. S. не забываем, что помимо игр бывают и человекопонятные шпаргалки вроде шпаргалки по гридам от Йоксель: https://news.1rj.ru/str/htmlshit/402
#css #flex #flexbox #game
Соскучились по играм в CSS? Не всё же лягушек во FlexBoxFroggy.com (игра по флексбоксу) расставлять да морковку в CssGridGarden.com (игра по гридам) сажать.
Встречайте — http://www.flexboxdefense.com/
Tower Defense на flexbox!
P. S. вот только на телефонах не работает. Эх.
P. P. S. не забываем, что помимо игр бывают и человекопонятные шпаргалки вроде шпаргалки по гридам от Йоксель: https://news.1rj.ru/str/htmlshit/402
Flexboxdefense
Flexbox Defense
Your job is to stop the incoming enemies from getting past
your defenses. Unlike other tower defense games, you must
position your towers using CSS!
your defenses. Unlike other tower defense games, you must
position your towers using CSS!
👍1
#статья дня
#css #animation #keyframes #podcast
Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.
Т. е. имея такую анимацию:
box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}
и animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.
Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm
В свою очередь, он почерпнул это из The CSS Podcast: https://thecsspodcast.libsyn.com/022-animation, так что вот вам ещё один хороший ресурс для обучения новому.
#css #animation #keyframes #podcast
Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.
Т. е. имея такую анимацию:
box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}
и animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.
Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm
В свою очередь, он почерпнул это из The CSS Podcast: https://thecsspodcast.libsyn.com/022-animation, так что вот вам ещё один хороший ресурс для обучения новому.
#ссылка #инструмент дня
#css #tools #triangles #noscript #base64 #cursors
Ну кто-то должен был это сделать (жаль, не я 😭). Встречайте, open-source “наше всё”: генератор CSS-треугольников, оттенков цвета, красивых волн для разделения секций (нелишним будет вспомнить https://news.1rj.ru/str/htmlshit/399), утилиту для сжатия SVG, список названий курсоров и кодирование base64 в одном флаконе.
https://omatsuri.app/
#css #tools #triangles #noscript #base64 #cursors
Ну кто-то должен был это сделать (жаль, не я 😭). Встречайте, open-source “наше всё”: генератор CSS-треугольников, оттенков цвета, красивых волн для разделения секций (нелишним будет вспомнить https://news.1rj.ru/str/htmlshit/399), утилиту для сжатия SVG, список названий курсоров и кодирование base64 в одном флаконе.
https://omatsuri.app/
#инструмент дня
#vscode #css #extension
Помните (конечно же нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://news.1rj.ru/str/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/
#vscode #css #extension
Помните (конечно же нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://news.1rj.ru/str/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/
Visualstudio
Smart CSS Autocomplete - Visual Studio Marketplace
Extension for Visual Studio Code - Autocomplete CSS properties smarter - using an usage statistics instead of standard random
#статья дня
#css #js #mediaqueries #width #adaptive
Мы говорим “медиа-запросы” или “media queries” и обычно подразумеваем только часть с CSS. А когда дело касается JavaScript, во многих примерах, курсах и учебниках до сих пор используется сравнение window.innerWidth с желаемым значением на каждое событие изменения размера окна.
Конечно же, это неправильно и устарело. Уже давно существуют медиа-запросы для скриптов:
mediaQuery = window.matchMedia('(min-width: 768px)')
if (mediaQuery.matches) {
alert('Media Query Matched!')
}
Самое прекрасное в этом, что не надо слушать событие изменения размера окна. Достаточно лишь срабатывания самого медиа-запроса!
mediaQuery.addEventListener(function(e) {
if (e.matches) {
// your code
}
});
Подробнее и сравнение разных подходов в статье от Марко Илик (Marco Ilic) на CSS-Tricks: https://css-tricks.com/working-with-javanoscript-media-queries/
#css #js #mediaqueries #width #adaptive
Мы говорим “медиа-запросы” или “media queries” и обычно подразумеваем только часть с CSS. А когда дело касается JavaScript, во многих примерах, курсах и учебниках до сих пор используется сравнение window.innerWidth с желаемым значением на каждое событие изменения размера окна.
Конечно же, это неправильно и устарело. Уже давно существуют медиа-запросы для скриптов:
mediaQuery = window.matchMedia('(min-width: 768px)')
if (mediaQuery.matches) {
alert('Media Query Matched!')
}
Самое прекрасное в этом, что не надо слушать событие изменения размера окна. Достаточно лишь срабатывания самого медиа-запроса!
mediaQuery.addEventListener(function(e) {
if (e.matches) {
// your code
}
});
Подробнее и сравнение разных подходов в статье от Марко Илик (Marco Ilic) на CSS-Tricks: https://css-tricks.com/working-with-javanoscript-media-queries/
CSS-Tricks
Working with JavaScript Media Queries | CSS-Tricks
What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this:
#ngrok
Немного будничных проблем: US-регион ngrok сейчас лежит, используйте EU-регион, для чего укажите ключ
Upd. 16:00 Поднялось!
Ну и если вы до сих пор не используете ngrok для демонстрации промежуточного результата работы или в процессе поиска решения проблемы (в чатах, например) — крайне рекомендую.
В грубом приближении этот инструмент предоставит вашему развёрнутому локально проекту уникальный доменный адрес в сети и позволит при этом контролировать, просматривать и проигрывать заново каждый запрос, что бесценно при отладке.
https://ngrok.com/
Немного будничных проблем: US-регион ngrok сейчас лежит, используйте EU-регион, для чего укажите ключ
--region=eu при запуске.Upd. 16:00 Поднялось!
Ну и если вы до сих пор не используете ngrok для демонстрации промежуточного результата работы или в процессе поиска решения проблемы (в чатах, например) — крайне рекомендую.
В грубом приближении этот инструмент предоставит вашему развёрнутому локально проекту уникальный доменный адрес в сети и позволит при этом контролировать, просматривать и проигрывать заново каждый запрос, что бесценно при отладке.
https://ngrok.com/
Ngrok
ngrok | API Gateway, Kubernetes Ingress, Webhook Gateway
ngrok simplifies app delivery by unifying API gateway, Kubernetes ingress, multi-cluster load balancing and more with ngrok's Universal Gateway.
#статья дня
#jpeg #jpg #webp #img #avif
Соскучились по моей любимой теме карго-культа форматов изображений? Я вам ещё принёс.
Поскольку Chrome 85 теперь поддерживает AVIF, мы можем воочию сравнить плюсы и минусы уже не двух форматов с потерями, а ажно трёх!
Джек Арчибальд (Jake Archibald) из команды Google Chrome рассказывает об особенностях использования AVIF и отмечает не только преимущества, что так любят делать в лагере бездумного использования webp, но и недостатки и отношение к форматам со стороны пользователя. Например, почему загрузка JPEG при большем чем у других форматов размере кажется быстрее?
Сравнением JPEG, WEBP и AVIF дело, впрочем, не заканчивается.
В статье огромное количество как простых примеров, так и технических подробностей.
Читайте и приходите обсуждать: https://jakearchibald.com/2020/avif-has-landed/
А я тем временем приложу мой любимый пример оттуда: прогрессивная загрузка.
#jpeg #jpg #webp #img #avif
Соскучились по моей любимой теме карго-культа форматов изображений? Я вам ещё принёс.
Поскольку Chrome 85 теперь поддерживает AVIF, мы можем воочию сравнить плюсы и минусы уже не двух форматов с потерями, а ажно трёх!
Джек Арчибальд (Jake Archibald) из команды Google Chrome рассказывает об особенностях использования AVIF и отмечает не только преимущества, что так любят делать в лагере бездумного использования webp, но и недостатки и отношение к форматам со стороны пользователя. Например, почему загрузка JPEG при большем чем у других форматов размере кажется быстрее?
Сравнением JPEG, WEBP и AVIF дело, впрочем, не заканчивается.
В статье огромное количество как простых примеров, так и технических подробностей.
Читайте и приходите обсуждать: https://jakearchibald.com/2020/avif-has-landed/
А я тем временем приложу мой любимый пример оттуда: прогрессивная загрузка.
#заметка дня
#css #html #adblock
Сегодня в очередной раз заметил упоминание такой знакомой, но всегда неожиданной проблемы: целые блоки вашей вёрстки просто пропадают.
Секрет проблемы прост: блокировщики рекламы.
Они следят за ключевыми словами в тексте и классах HTML-компонентов. Если вы выбрали один из следующих классов для элемента:
— вам конец.
Блокировщик рекламы не будет разбираться, что adv это advantages, а не advertisement. Будьте осторожны.
Более полный лист классических сокращений можно полистать тут: https://easylist.to/easylist/easylist.txt
tldr: почти всё — пресловутый ad.
Это простое правило слишком легко забывается, а вот последствия могут быть совершенно неожиданными. Мы как-то раз писали админку ротатора рекламной сети и… ну вы уже догадались, к какому коллапсу это привело.
#css #html #adblock
Сегодня в очередной раз заметил упоминание такой знакомой, но всегда неожиданной проблемы: целые блоки вашей вёрстки просто пропадают.
Секрет проблемы прост: блокировщики рекламы.
Они следят за ключевыми словами в тексте и классах HTML-компонентов. Если вы выбрали один из следующих классов для элемента:
adv
advert
advertisement
banner
banners— вам конец.
Блокировщик рекламы не будет разбираться, что adv это advantages, а не advertisement. Будьте осторожны.
Более полный лист классических сокращений можно полистать тут: https://easylist.to/easylist/easylist.txt
tldr: почти всё — пресловутый ad.
Это простое правило слишком легко забывается, а вот последствия могут быть совершенно неожиданными. Мы как-то раз писали админку ротатора рекламной сети и… ну вы уже догадались, к какому коллапсу это привело.
#статья #browsersync #инструмент
Итак, представим себе вполне типичную во фрилансе ситуацию: “Добрый день, у нас есть сайт, но нет мобильной версии/нужно поменять дизайн шапки/подвала/заменить шрифты/поиграть с логотипами/продать барахлишко/спрятать золотишко”. Кто делал — непонятно. Как разворачивать у себя на машине — тем более не ясно. Может там самописная CMS или, того хуже, Вордпресс. Час на работу, день на создание окружения. Но не отказываться же от заказа, если всё, что предстоит сделать — это немного ковырнуть стили и скрипты, да залить на FTP, не правда ли?
Написал немного о том, как чинить практически любой сайт локально не разворачивая его у себя. Это не лонгрид, но слишком длинно для канала. Переходите на наш Телеграф: https://telegra.ph/Hirurgiya-sajtov-po-zhivomu-09-14
TLDR: Browsersync.io в режиме прокси-сервера.
Итак, представим себе вполне типичную во фрилансе ситуацию: “Добрый день, у нас есть сайт, но нет мобильной версии/нужно поменять дизайн шапки/подвала/заменить шрифты/поиграть с логотипами/продать барахлишко/спрятать золотишко”. Кто делал — непонятно. Как разворачивать у себя на машине — тем более не ясно. Может там самописная CMS или, того хуже, Вордпресс. Час на работу, день на создание окружения. Но не отказываться же от заказа, если всё, что предстоит сделать — это немного ковырнуть стили и скрипты, да залить на FTP, не правда ли?
Написал немного о том, как чинить практически любой сайт локально не разворачивая его у себя. Это не лонгрид, но слишком длинно для канала. Переходите на наш Телеграф: https://telegra.ph/Hirurgiya-sajtov-po-zhivomu-09-14
TLDR: Browsersync.io в режиме прокси-сервера.
Telegraph
Режем сайты по-живому
Итак, представим себе вполне типичную во фрилансе ситуацию: "Добрый день, у нас есть сайт, но нет мобильной версии/нужно поменять дизайн шапки/подвала/заменить шрифты/поиграть с логотипом/продать барахлишко/спрятать золотишко". Кто делал — непонятно. Как…
Не написать об этом событии нельзя, но и писать одно и то же весьма глупо. Опять же — Defront :)
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Команда разработчиков Moment.js официально объявила о прекращении развития библиотеки.
Moment.js — самая популярная библиотека для работы с датами и временем на сегодняшний день. Она была создана в 2011 году с прицелом на потребности разработчиков того времени. За весь период существования библиотеки её дизайн не менялся, но сообщество хотело изменений, особенно иммутабельности и переработки архитектуры таким образом, чтобы библиотека стала дружить с тришейкингом. Внесение этих изменений вызвало бы вопросы у текущих пользователей библиотеки, так как получилась бы совершенно другая библиотека. Разработчики Moment.js не захотели идти по пути Angular и разработали альтернативную библиотеку — Luxon.
С сентября 2020 года в Moment.js не будут добавляться новые фичи, не будут больше обсуждаться вопросы тришейкинга, не будет никаких мажорных изменений (это означает, что никогда не будет 3-ей версии), возможно, не будут исправляться какие-либо баги и поведенческие странности, если они будут связаны с архитектурными проблемами. Но будут исправляться все проблемы безопасности, будет обновляться база часовых поясов IANA.
Разработчики рекомендуют не использовать Moment.js для новых проектов без поддержки старых браузеров, вместо неё рекомендуются Luxon, Date.js, date-fns и js-Jode. Также сейчас TC39 работает над Temporal (современной заменой объекта Date), в которой реализуется основная масса фич библиотек для работы с временем.
#announcement #date #library
https://momentjs.com/docs/#/-project-status/
Moment.js — самая популярная библиотека для работы с датами и временем на сегодняшний день. Она была создана в 2011 году с прицелом на потребности разработчиков того времени. За весь период существования библиотеки её дизайн не менялся, но сообщество хотело изменений, особенно иммутабельности и переработки архитектуры таким образом, чтобы библиотека стала дружить с тришейкингом. Внесение этих изменений вызвало бы вопросы у текущих пользователей библиотеки, так как получилась бы совершенно другая библиотека. Разработчики Moment.js не захотели идти по пути Angular и разработали альтернативную библиотеку — Luxon.
С сентября 2020 года в Moment.js не будут добавляться новые фичи, не будут больше обсуждаться вопросы тришейкинга, не будет никаких мажорных изменений (это означает, что никогда не будет 3-ей версии), возможно, не будут исправляться какие-либо баги и поведенческие странности, если они будут связаны с архитектурными проблемами. Но будут исправляться все проблемы безопасности, будет обновляться база часовых поясов IANA.
Разработчики рекомендуют не использовать Moment.js для новых проектов без поддержки старых браузеров, вместо неё рекомендуются Luxon, Date.js, date-fns и js-Jode. Также сейчас TC39 работает над Temporal (современной заменой объекта Date), в которой реализуется основная масса фич библиотек для работы с временем.
#announcement #date #library
https://momentjs.com/docs/#/-project-status/