Семантическая вёрстка

Уверен, вы слышали это словосочетание и не раз. Но можете ли вы чётко сказать для чего именно нужна семантическая вёрстка? Может быть, для красоты? Или для более чистого кода?

Если хотите раз и навсегда разобраться с тем, что зачем и почему — обязательно обратите внимание на статью с Хабра HTML Academy — https://habr.com/ru/company/htmlacademy/blog/546500/. Здесь всё объясняется простым языком и с примерами.

Если хотите что-то посерьёзнее, то можете обратиться к стандартам по этому поводу:

https://www.w3.org/standards/semanticweb/

А для закрепления можете обратиться к уроку на w3schools:

https://www.w3schools.com/html/html5_semantic_elements.asp

Нашёл ещё одну толковую статью про «this». Рекомендую к прочтению.

Ссылочка: https://web.dev/javascript-this/

LinkedIn издевается 👀

Утром пишу сайты, а ночью — портовый грузчик.

Миксины в CSS?

В CSS появилось новое правило @property, которое позволяет управлять кастомными свойствами (CSS-переменными) более гибко.

Пример того, как это выглядит:

@property --spinAngle {
/* An initial value for our custom property */
initial-value: 0deg;
/* Whether it inherits from parent set values or not */
inherits: false;
/* The type. Yes, the type. You thought TypeScript was cool */
syntax: '<angle>';
}

@keyframes spin {
to {
--spinAngle: 360deg;
}
}

В общем-то, с помощью @property можно писать свои собственные небольшие CSS-спецификации.

К сожалению, поддержка пока есть только в Chromium, но думаю, что через какое-то время эту фичу внедрят и для Firefox и Safari, поэтому явно стоит попробовать.

Более подробно можно почитать на css-tricks:

https://css-tricks.com/exploring-property-and-its-animating-powers/

Довольно толковое видео по той же теме, рекомендую:

https://www.youtube.com/watch?v=-4bYR8NwVEs

​​Как запомнить CSS Flexbox и CSS Grid?

Быстрый ответ: заучить и использовать не переставая.

Адекватный ответ: полтора года назад я писал пост про две игры, которые помогают разобраться с гридами и флексами. Если вдруг, вы не знали об этих играх — обязательно найдите часик другой, чтобы их пройти. Они здорово помогают в изучении. Но не будем же мы постоянно лезть в игру, чтобы вспомнить какой-то момент, так? На этот случай есть две довольно неплохих шпаргалки: по гридам и по флексам, соответственно. Рекомендую обратить на них внимание и либо позаимствовать, либо сделать какие-то свои шпаргалки, которые позволят вам пользоваться ими не допуская ошибок. А если совсем лениво всё это запоминать — просто используйте Bootstrap и забудьте о своих проблемах. Но не забывайте, что молоток подходит хорошо только для того, чтобы забивать им гвозди.

​​Эльбрус

Ранее я уже упоминал процессоры Эльбрус и поднимал тему российской микроэлектроники. До сих пор считаю эту тему довольно важной и с большим уважением и интересом отношусь к деятельности компании МЦСТ.

Вчера вышел долгожданный, не побоюсь этого слова, фильм про производство отечественных процессоров на канале «Ай, Как Просто!». Фильм представляет собой интервью, взятое у нескольких ключевых (как я понял) сотрудников МЦСТ. Он раскрывает непростую историю советской, а теперь уже и российской микроэлектроники, удивляет тем, с каким безразличием относится (точнее, относилось) наше государство к такой важной для страны технологии, и насколько это интересно иностранным компаниям (Huawei, Sun Microsystems, Intel).

В общем, нахожусь под большим впечатлением и крайне рекомендую обратить внимание и найти пару часов времени, чтобы начать видеть некоторые вещи под другим углом.

Ссылочка: https://youtu.be/-ojbRZnJkJo


Ещё важные и полезные ссылочки:

Сайт МЦСТ: http://www.mcst.ru/
Сайт Эльбрус: http://www.elbrus.ru/

На сайте elbrus.ru можно найти новости и информацию о самих процессорах Эльбрус, а на сайте МЦСТ — более общую информацию о самой компании.

Делаем самую медленную быструю страницу

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

Автор рассказывает про все ключевые метрики Lighthouse, рассказывает про его отличия от Core Web Vitals. Рассказывает как обмануть Lighthouse и сделать страницу медленной, несмотря на соточку.

Рекомендую обратить внимание, ссылочка:

https://www.tunetheweb.com/blog/making-the-slowest-fast-page/

***

Небольшая вставочка о 6 ключевых метриках Lighthouse:

1) First Contentful Paint (FCP) — эта метрика проверяет, когда на экране отрисовывается первый содержательный или значимый элемент. Цвета фона игнорируются, поскольку они не являются значимыми.

2) Speed Index (SI) — эта метрика проверяет визуальную "прогрузку" страницы (процесс загрузки). Если две страницы загружаются пять секунд, но первая загружает 90% в первую секунду, а оставшиеся 10% в конце, а вторая — только 20% в начале и 80% — в конце, то первая совершенно справедливо будет считаться более быстрой, несмотря на то, что общее время загрузки у них одинаковое.

3) Largest Contentful Paint (LCP) — в то время как FCP смотрит на первую значимую отрисовку, LCP смотрит на самый крупный значимый элемент на странице. Таким образом, небольшой фрагмент текста (например, отказ от ответственности) может обмануть FCP, но если важная часть страницы (фактический текст или изображение баннера) занимает больше времени, то LCP это уловит.

4) Time to Interactive (TTI) — эта метрика пытается измерить, когда вы действительно можете использовать страницу. Если страница отрисовалась очень быстро, чтобы удовлетворить все вышеперечисленное, но затем клик по чему-либо ничего не делает в течение еще нескольких секунд, можно ли считать страницу загруженной?

5) Total Blocking Time (TBT) — похожа на TTI. Показывает, насколько, в целом, загружен ЦП даже после наступления time to interactive.

6) Cumulative Layout Shift Time (CLS) — новая интересная метрика, предназначенная для выявления движений контента при попытке прочитать страницу. Пример: статья загрузилась, вы начали её читать, а затем изображение баннера или реклама, наконец, загружаются и выталкивают текст по всей странице, и вы теряете то место, на котором останавливались, и вам приходится искать его снова. Звучит не очень, верно?

Как правильно откладывать дела на завтра

Пару дней назад на канале «Хулиномика» вышло видео «Скрытая прокрастинация и почему GTD работает плохо». Оно кажется мне довольно интересным, в том плане, что позволяет по-другому взглянуть на ведение списков дел и прочего (я стараюсь держать свои дела в порядке, поэтому можно сказать, что я следую GTD, подробнее об этом можете почитать в моем втором канале @kantetry).

Ответ на главный вопрос: «как правильно откладывать дела на завтра?»

Есть три вида того, чем можно заняться сегодня:

1) Совсем ничего не делать, что довольно неплохо
2) Можно делать что-то менее важное, что довольно плохо
3) Можно делать что-то более важное, что совсем не плохо

В общем, нужно быть таким прокрастинатором, который откладывает важные дела, чтобы сделать ещё более важные.

Подробнее в ролике, крайне рекомендую:

https://youtube.com/watch?v=g7CcnFvkNRc

Lighthouse помог увеличить продажи

Нашёл интересную статейку о том, как улучшение одной из метрик Lighthouse — помогло увеличить продажи. Заставляет всерьёз задуматься о том, что сайт должен быть оптимизирован в соответствии с метриками Lighthouse (разумеется, ни для кого не секрет, что Google поддерживает сайты, которые за этим следят).

Рекомендую к прочтению: https://web.dev/vodafone/

Цветовые функции в CSS

На днях вышел ролик у Вадима Макеева про новую (относительно) фичу в CSS — цветовые функции. Они позволяют смешивать цвета, подбирать контрастные цвета и более гибко работать с оттенками прямо через нативный код (ещё один шажочек в пользу отказа от препроцессоров).

Но есть и минус: фича пока поддерживается только в Safari TP и немножечко в Firefox Nightly. Но, если такая поддержка уже есть — ждать осталось не слишком долго. Скоро CSS станет ещё круче и это замечательная новость.

Ссылка на ролик: https://youtu.be/-6V7EvfUs3k

Кроме прочего, если вам хочется дополнительной информации, есть пост на канале CSS Mind по этой теме: https://www.tg-me.com/css_mind/27

Хочется узнать ваше мнение, поэтому проголосуйте, пожалуйста в следующем опросе

Комментарии в коде

Думаю, всем известно, что код надо комментировать. Да только вот, это нужно уметь делать правильно, потому что плохие комментарии, скорее, испортят общую картину и читаемость, чем дополнят код какими-то действительно важными и необходимыми сведениями, без которых сложно понять контекст той или иной функции (особенно, если код специфичен и пишется для бизнеса, там бывает довольно много таких вещей, которые не понять человеку, не вовлечённому в процесс).

Рекомендую ролик от Сергея Немчинского по этой теме, очень хорошо раскрывает её, не забывая углубляться в детали, приводит вполне неплохие примеры из жизни.

Ссылочка: https://www.youtube.com/watch?v=zPbbdPAg6rg

***

Неплохая статья на tproger: https://tproger.ru/articles/comments-in-code/
Интересный перевод на Хабре: https://habr.com/ru/post/528260/
И даже топик на learn.javascript: https://learn.javascript.ru/comments

Текст поверх картинок

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

Я всегда думал, что самый адекватный способ сделать это — добавить небольшой градиент под сам текст, на фоне которого он будет читаться, но автор разбирает этот подход (он является самым популярным из всех) и объясняет как сделать это правильно.

А какой вариант размещения текста поверх картинок — приемлем? Я бы сказал, что никакой и нет ничего хорошего в размещении текста поверх картинок. Если вы вдруг решили так сделать — лучше не стоит, но кто я такой, чтобы запрещать делать это бизнесу?

Ссылочка на статью: https://ishadeed.com/article/handling-text-over-image-css/

Что не так с программистами?

Без лишних комментариев рекомендую посмотреть ролик:

https://youtube.com/watch?v=oquRyO6Lkro

P. S. к вечеру, скорее всего, что-то будет

​Умный город

Последние два дня принимал участие в молодёжном интенсиве (что-то около хакатона) «Умный город».

Сегодня была защита и наша команда выиграла, представив одно из сильнейших решений. Надеюсь, что мой прототип из Figma и несколько часов работы с CV значительно на это повлияли, но в любом случае — я рад, что принял в этом участие, узнал Белгород и познакомился с новыми людьми.


***

P. S. потихоньку планирую возвращаться к активности и обещаю в ближайшее время записать для вас аж целых 2 видео, одно по Django, одно по Vue.

Недавно в твиттере Ufocoder вкинул пример "некорректной" работы функции parseInt. Вполне понятно, что он сам на все сто процентов понимает почему оно так работает и рассчитывал таким образом просто пошутить (скорее всего), но многие начали это форсить и в очередной раз обвинять JS в том, в чём он не виноват.

В посте ниже разбор конкретно этого случая, рекомендую ознакомиться :)