preloader
+38 063 414 95 29

[email protected]

Конструктор логотипа онлайн
Facebook-f Instagram Google-plus-g Telegram Viber

Blog

HomeBlog
PHP Дайджест № 222/3 (26 марта – 25 апреля 2022) / Хабр
08.05.2022by natoduaadmin_nertyOpencartSEOWebБрендингИнтернет-магазиныКорпоративные сайты и блогиМаркетингОптимизация и ускорение

PHP Дайджест № 222/3 (26 марта – 25 апреля 2022) / Хабр | Веб-студия Nat.od.ua

PHP Дайджест № 222/3 (26 марта – 25 апреля 2022) / Хабр

Дисклеймер: Нет, это не дайджест авторства Романа Пронского. К сожалению, у меня нет достоверной информации — будет ли выходить его дайджест далее.

Однако я взял на себя смелость временно продолжить дело Романа и написать новый дайджест за тот месяц, что прошел с выхода последнего.

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

PHP

Вышли версии PHP:

Релизы посвящены устранению обнаруженных багов.

Кроме того:

  • Одобрен стандарт PER Coding Style, который придет на смену PSR-12

  • Запущен сайт https://thephp.foundation/ На нем можно видеть — кто в данный момент спонсирует разработку PHP и в каких объемах.

RFC (Requests for Comments )Undefined Variable Error Promotion

https://wiki.php.net/rfc/undefined_variable_error_promotion

Интересное предложение, о запрете на использование не объявленных явно переменных в PHP. Подробный рассказ о нём был в предыдущем дайджесте.

Голосование завершено, предложение принято и будет реализовано в PHP 9.

Undefined Property Error Promotion

https://wiki.php.net/rfc/undefined_property_error_promotion

Предложение, достаточно близкое к предыдущему. Внесено в начале апреля.

Предлагается в случае чтения необъявленного или не созданного явно свойства объекта выдавать ошибку уровня E_WARNING.

Идет голосование, на данный момент результат таков: 18 голосов «за» и 3 голоса «против»

Typehint Array Desctructuring

https://wiki.php.net/rfc/typehint_array_desctructuring

Свежее предложение, пока что находящееся в статусе «Черновик» и не имеющее примера реализации.

Предлагается добавить возможность контроля типов в конструкцию «разборки» массива. Например так:

$data = ;
= $data;

Предполагается, что такой контроль типов будет работать по той же схеме, что и, скажем, в аргументах функций: при установленной директиве «strict_types=0» скалярные типы будут приводиться, а при «strict_types=0» — строго проверяться.

Автор RFC надеется, что в случае принятия его предложения, будет открыт путь к типизированному присваиванию не только в случае разыменования массивов, но и для простых переменных, примерно в таком виде:

int $id = 42;True type

https://wiki.php.net/rfc/true-type

Автор предложения, George Peter Banyard, предлагает ввести в систему типов, начиная с PHP 8.2, отдельный тип true. Обосновывает, в основном, уже принятым предложением о добавлении типа false и тем фактом, что введение данного типа упростит статический анализ, и позволит улучшить работу оптимизатора.

В тексте RFC приводится такой пример:

class User {
function isAdmin(): bool
}

class Admin extends User
{
function isAdmin(): true
{
return true;
}
}
Readonly classes

https://wiki.php.net/rfc/readonly_classes

Логичное предложение, развивающее уже имеющийся синтаксис readonly-свойств на целые классы.

Цитата из RFC:

readonly class Test {
public string $prop;
}

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

Предложение в данный момент находится на голосовании, промежуточный итог составляет 27/6 в пользу принятия.

Новости фреймворковSymfonyРелизы

Вышли новые версии фреймворка:

Новости Symfony 6.1

В Symfony 6.1 появится возможность использования перечислений (enum) в роутах. Смотрим пример из анонса новости:

use SymfonyComponentRoutingRequirementEnumRequirement;

// ‘bar’ parameter allows all values defined in the Enum
#)]

Кроме того, добавлена возможность использовать символы UTF-8 в параметрах роутов:

use SymfonyComponentRoutingAnnotationRoute;

# public function someControllerMethod(string $föo, string $bár)
{
// …
}

Подробнее об этих нововведениях можно прочесть по ссылке https://symfony.com/blog/new-in-symfony-6-1-improved-routing-requirements-and-utf-8-parameters

Напомню, что Symfony 6.1 находится в стадии первой беты: https://symfony.com/blog/symfony-6-1-0-beta1-released

ДругоеLaravelYii

Нет значимых новостей. См. статью на Хабре.

Новости одной строкой:

Вышла в свет библиотека AnourValar/office, предназначенная для работы с MS Excel из PHP. В частности библиотека умеет подставлять значения в шаблонные файлы и сохранять результат в разных форматах, включая PDF. Смотрите подробности на https://github.com/AnourValar/office/blob/master/README.md

Продолжает публиковаться серия статей «Functional Programming in PHP» автора Viktor Daróczi — интересный цикл, заслуживающий внимания.

Опубликована небезыинтересная видеоинструкция, посвященная настройке XDebug для Laravel в окружении Sail.

Richard Warepam пытается поставить точку в бесконечном споре на тему того, какие алгоритмы и в какой объеме должен знать каждый разработчик и предлагает свою версию «Шести алгоритмов, которые должен знать каждый»

Вышла версия PHPStan 1.6.0 Самое интересное в этом выпуске — аннотации для условных возвращаемых типов примерно такого вида:

/**
* @return ($as_float is true ? float : string)
*/
function microtime(bool $as_float): string|float
…

Опубликована интересная, но не бесспорная статья об оптимизации по памяти и времени исполнения кода при использовании генераторов.

Вместо заключения

Подготовлено при активном участии сообщества телеграм-чата «PHP Russian Talks».

Замечания по текущему выпуску и предложения для следующего можете отправлять автору в личку или в указанный выше чат.

Read More
Как правильно верстать в 2022 году. Часть 2. Как правильно вкладывать теги друг в друга
06.05.2022by natoduaadmin_nertyOpencartSEOWebБрендингИнтернет-магазиныКорпоративные сайты и блогиМаркетингОптимизация и ускорение

Как правильно верстать в 2022 году. Часть 2. Как правильно вкладывать теги друг в друга | Веб-студия Nat.od.ua

Как правильно верстать в 2022 году. Часть 2. Как правильно вкладывать теги друг в друга

Вступление

Привет хабр! Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

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

Также я расскажу о работе со спецификацией HTML — какие разделы важны для нас, как для верстальщиков и как искать там информацию.

Содержание

  1. Используйте правильные теги

  2. Как правильно вкладывать теги друг в друга

  3. Работа с медиаконтентом

  4. Пишем таблицы на HTML правильно

  5. a или button? Работа с интерактивными элементами и как выбрать правильный тег

  6. Различный теги для медиа-контента

  7. Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы

  8. Пишем доступные формы

  9. Избыточная вёрстка. Как облегчить разметку

  10. Современные фишки HTML и CSS способные облегчить нам жизнь

  11. Экспериментальные технологии, входящие в стандарт

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

Что значит правильно? Что является источником истины при работе с HTML? Конечно же это специфиакция! В данный момент существует так называемый «живой стандарт» пятой версии HTML. Это значит, что у него нет мажорных версий и он обновляется регулярно. Посмотреть последнее обновление спецификации можно здесь: https://html.spec.whatwg.org/

Спецификация HTML — это увесистый документ с кучей разделов. Она существует как для разработчиков браузеров, так и для нас — верстальщиков. Конкретно нас интересуют третий и четвёрный раздел (Semantics, structure, and APIs of HTML documents и The elements of HTML). Эти разделы описывают, как теги можно вкладывать друг в друга и что обозначает каждый тег.

Описание элемента

Каждый элемент имеет метаинформацию и описание.

Сверху размещены метаданные, куда включна следующая информация:

  • куда можно вкладывать тег;

  • какие теги можно вкладывать внутрь этого тега;

  • перечень аттрибутов тега (глобальные, дополнительные и ARIA);

  • информация о доступности;

  • вспомогательные данные.

Далее размещено описание тега — что он обозначает и как его можно использовать.

Спецификация элемента на примере тега

Метаданные тегаМетаданные тега

Метаинформация о теге включает в себя несколько пунктов:

  • Категории — обозначает, к каким типам тегов относится элемент, могут быть следующие типы:

    • Metadata content (например и ) — метаданные страницы, обозначающие представление или поведение содержимого, или отношение к другим документам;</p> </li> <li> <p><strong>Flow content</strong> (например </p> <article>, <span>, </p> <p>) — это все теги, используемые в <body>, то есть почти все в целом, за исключением некоторых мета-тегов;</p> </li> <li> <p><strong>Sectioning content</strong> (например </p> <section>) — какие-либо большие секции, как правило имеющие конкретную структуру и заголовок;</p> </li> <li> <p><strong>Heading content</strong> (все заголовки </p> <h1> – </p> <h6>, а также тег, про который я забыл рассказать в прошлой статье — </p> <hgroup>) — определяет заголовок секции, обозначенной явно, либо <body>.</p> </li> <li> <p><strong>Phrasing content</strong> (например <a>, <span>, <strong>) — различный, в основном текстовый контент, но включающий также некоторые элементы, которые позволяют размечать текст на уровне параграфов;</p> </li> <li> <p><strong>Embedded content</strong> (например <iframe>, <canvas>, <video>) — контент, встраиваемый извне (другие сайты, файлы, скрипты);</p> </li> <li> <p><strong>Interactive content</strong> (например <a>, <button>, <input>) — теги, с которыми пользователь может взаимодействовать;</p> </li> </ul> </li> <li> <p><strong>Контекст использования элемента</strong> — где мы можем размещать элемент.</p> </li> <li> <p><strong>Контентная модель</strong> — важная для этой статьи часть! Это как раз то, что мы <strong>можем размещать внутри тега</strong>.</p> </li> <li> <p><strong>Tag omission</strong> — возможные сценарии, когда закрывающую часть тега можно опустить. Рекомендую не обращать внимания на этот раздел вообще, так как в современном вебе нормальной практикой является закрытие всех парных тегов.</p> </li> <li> <p>Доступные <strong>аттрибуты</strong> тега.</p> </li> <li> <p>Раздел, касающийся <strong>доступности</strong>. Надеюсь когда-нибудь дойдут руки написать о работе с доступностью в рамках спецификации.</p> </li> <li> <p><strong>DOM Interface</strong> — раздел, необходимый для JavaScript-разработчиков, подробно на нём останавливаться не будем.</p> </li> </ul> <p>И всё же, как правильно вкладывать теги друг в друга?Категории элементов по HTML-спецификации</p> <p>Две основные категории тегов — это <strong>Metadata</strong> (метаданные) и <strong>Flow</strong> (поточные теги). Метаданные — это то что в основном входит в <head>, а Flow — то что можно положить в <body>. Однако, некоторые мета-теги мы можем разместить в <body>, поэтому они заходят на Flow-контент (например это <noscript>, <script> и </p> <style>).</p> <p>Внутри <strong>потоковых тегов</strong> находятся все остальные категории.</p> <p><strong>Heading</strong> — это просто залоговки всех уровней, а также тег </p> <hgroup>.</p> <p><strong>Sectioning</strong> — это большие смысловые части документа, секции.</p> <p><strong>Phrasing</strong> — небольшие слова или словосочетания, фразы. В основном это строчные элементы (по крайней мере они такими являлись в спецификации HTML4). Все остальные теги, не имеющие категории Phrasing, как правило являются блочными.</p> <p><strong>Embedded</strong> — как уже писал выше, контент, имеющий внешний источник данных, то есть не имеющий прямое отношение к HTML-документу.</p> <p><strong>Interactive</strong> — категория, пересекающаяся с Flow, Phrasing и Embedded, обозначающая все элементы, с которыми пользователь может взаимодействовать.</p> <p>Проверять возможность вкладывания тегов друг в друга можено по следующему алгоритму:</p> <ol> <li> <p>Смотрим на контентную модель тега, в который вкладываем.</p> </li> <li> <p>Смотрим на категории тега, который вкладываем.</p> </li> <li> <p>Если видим, что категория нам подходит и нет ограничений, то вкладываем, если нет, то вложение запрещено.</p> </li> </ol> <p>Давайте разберёмся на примере. Есть тег </p> <section> и мы хотим вложить в него тег <b>: у секции контентая модель Flow, у <b> категории Flow, Phrasing и Palpable. Соответственно вложение <strong>допустимо</strong>.</p> <p>Другой пример:</p> <p><label></p> <p>Имя:</p> <p> <input type="text" name="name"><br /> </label></p> <p>Частая задача, когда нам нужно внутри лейбла держать и инпут и его описание. Проверям:</p> <ul> <li> <p>Для лейбла контентной моделью является Phrasing Content, но без вложения других лейблов.</p> </li> <li> <p><p> не имеет категории Phrasing, поэтому вкладывать </p> <p> в <label> <strong>нельзя</strong>!</p> </li> <li> <p><input> имеет категорию Phrasing, поэтому мы <strong>можем</strong> вложить его в <label>.</p> </li> </ul> <p>Если сильно упрощать, то во <strong>Flow</strong> мы можем вкладывать и <strong>Flow</strong>, и <strong>Phrasing</strong>, а во <strong>Phrasing</strong> только <strong>Phrasing</strong>.</p> <p>Заключение части 2</p> <p>Но всю эту простыню можно было не читать, а просто воспользоваться сервисом https://caninclude.glitch.me, написанным Александром Вишняковым и скрин которого я разместил в шапке поста. Там по аналогии с Can I Use, можно проверить, вкладывается ли один тег в другой или нет.</p> <p>Ну и не забывайте валидировать код с помощью W3C Validator, который тоже сможет подсказать, правильно ли вы вкладывали теги, или нет.</p> </div> <div class="clear post_clear"></div><div class="gt3_post_footer"><div class="gt3_module_button_list"><a href="https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/">Read More</a></div> <div class="blog_post_info"> <!-- post share block --> <div class="post_share_block"> <a href="javascript:void(0)"><span class="sharing_title">Share</span></a> <div class="post_share_wrap"> <ul> <li class="post_share-facebook"><a target="_blank" href="https://www.facebook.com/share.php?u=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/" data-title="Facebook"><span class="fa fa-facebook"></span></a></li><li class="post_share-twitter"><a target="_blank" href="https://twitter.com/intent/tweet?text=Как%20правильно%20верстать%20в%202022%20году.%20Часть%202.%20Как%20правильно%20вкладывать%20теги%20друг%20в%20друга%20|%20Веб-студия%20Nat.od.ua&url=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/" data-title="Twitter"><span class="fa fa-twitter"></span></a></li><li class="post_share-pinterest"><a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/&media=https://nat.od.ua/wp-content/uploads/2022/05/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno.png" data-elementor-open-lightbox="no" data-title="Pinterest"><span class="fa fa-pinterest"></span></a></li><li class="post_share-linkedin"><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/&title=Как%20правильно%20верстать%20в%202022%20году.%20Часть%202.%20Как%20правильно%20вкладывать%20теги%20друг%20в%20друга%20|%20Веб-студия%20Nat.od.ua&source=Web-студия%20NAT.od.ua" data-title="Linkedin"><span class="fa fa-linkedin"></span></a></li><li class="post_share-mail"><a target="_blank" href="mailto:?subject=%D0%9A%D0%B0%D0%BA+%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE+%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D1%82%D1%8C+%D0%B2+2022+%D0%B3%D0%BE%D0%B4%D1%83.+%D0%A7%D0%B0%D1%81%D1%82%D1%8C+2.+%D0%9A%D0%B0%D0%BA+%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE+%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D1%8B%D0%B2%D0%B0%D1%82%D1%8C+%D1%82%D0%B5%D0%B3%D0%B8+%D0%B4%D1%80%D1%83%D0%B3+%D0%B2+%D0%B4%D1%80%D1%83%D0%B3%D0%B0+%7C+%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%83%D0%B4%D0%B8%D1%8F+Nat.od.ua&body=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/" data-title="Email"><span class="fa fa-envelope"></span></a></li> </ul> </div> </div> <!-- //post share block --> <div class="likes_block post_likes_add " data-postid="17633" data-modify="like_post"> <span class="fa fa-heart-o icon"></span> <span class="like_count">0</span> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <div class="blog_post_preview format-standard-image"> <div class="item_wrapper"> <div class="blog_content"> <a href="https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/"><div class="blog_post_media"><a href="https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/"><img src="https://nat.od.ua/wp-content/uploads/2022/05/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-1170x700.jpeg" alt="11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком / Хабр" /></a></div></a><div class="listing_meta_wrap"><div class="listing_meta"><span class="post_date">01.05.2022</span><span class="post_author">by <a href="https://nat.od.ua/author/natoduaadmin_nerty/">natoduaadmin_nerty</a></span><span class="post_category"><a href="https://nat.od.ua/category/opencart/">Opencart</a><a href="https://nat.od.ua/category/seo/">SEO</a><a href="https://nat.od.ua/category/web/">Web</a><a href="https://nat.od.ua/category/branding/">Брендинг</a><a href="https://nat.od.ua/category/internet-magaziny/">Интернет-магазины</a><a href="https://nat.od.ua/category/blogs-sites/">Корпоративные сайты и блоги</a><a href="https://nat.od.ua/category/marketing/">Маркетинг</a><a href="https://nat.od.ua/category/optimization-speed-up/">Оптимизация и ускорение</a></span></div></div><h2 class="blogpost_title"><a href="https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/">11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком / Хабр | Веб-студия Nat.od.ua</a></h2><p>11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком / Хабр<br /> </p> <div xmlns="http://www.w3.org/1999/xhtml">Предисловие</p> <p>Я полагаю, что вы должны быть знакомы с браузером Chrome, так как это ближайший партнер разработчиков интерфейса. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.</p> <p>В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки.</p> <p>Давайте посмотрим.</p> <p>1. Повторно отправить запрос XHR</p> <p>В нашей работе нам часто приходится отлаживать интерфейс с back-end разработчиками. Использование этой функции может повысить эффективность нашей стыковки.</p> <p><strong>Вам просто нужно сделать эти шаги:</strong></p> <ol> <li> <p>Выберите вкладку Network</p> </li> <li> <p>НажмитеFetch/XHR</p> </li> <li> <p>Выберите запрос, который хотите отправить повторно</p> </li> <li> <p>Щелкните правой кнопкой мыши и выберитеReplay XHR</p> </li> </ol> <p>2. Быстро отправлять запросы в консоли</p> <p>Для одного и того же запроса иногда необходимо изменить входные параметры и отправить их повторно. Как это сделать с минимальными усилиями?</p> <p><strong>Вам просто нужно сделать эти шаги:</strong></p> <ol> <li> <p>Выберите вкладку Network.</p> </li> <li> <p>Щелкните Fetch/XHR.</p> </li> <li> <p>Выберите запрос, который хотите отправить повторно.</p> </li> <li> <p>Выберите Copy затем Copy as fetch.</p> </li> <li> <p>Измените входной параметр и отправьте его повторно.</p> </li> </ol> <p>3. Переменные JavaScript можно копировать</p> <p>Это потрясающе. Вы можете скопировать сложные данные находящиеся в переменных, используя функциюCopy, предоставляемую браузером Chrome.</p> <p>Примечание переводчика: также можно копировать JSON-объекты возвращаемые сервером (на вкладке Network -> Preview) если нажать правую кнопку мыши и copy object</p> <p>4. Получить выбранный элемент DOM в консоли</p> <p>Как мы можем вывести в консоль некоторые атрибуты (такие как ширина, высота, положение и т. д.) элемента DOM выбранного через панель «Элементы»?</p> <ol> <li> <p>Выберите элемент DOM через вкладку Elements.</p> </li> <li> <p>Напишите в консоли $0для доступа к элементу</p> </li> </ol> <p>5. Делайте полноразмерные скриншоты</p> <p>Если мы хотим сделать скриншот всей страницы, состоящей из более чем одного экрана, браузер Chrome может сделать это легко?</p> <ol> <li> <p>Подготовьте содержимое страницы, которую вы хотите захватить</p> </li> <li> <p>Откройте средства разработчика и нажмите комбинацию клавиш — на Windows/Unix Ctrl + Shift + P на MacOS CMD + Shift + P откроется консольCommand</p> </li> <li> <p>Введите Сделать полноразмерный скриншот (если язык ОС английский, то Capture full size screenshot ) и нажмите Enter</p> </li> </ol> <p>Ух ты, круто!</p> <p>А если мы хотим сделать скриншот части страницы, что нам делать?</p> <p>Это также очень просто, просто введите <strong>«Сделать скриншот узла»</strong> (<strong>Capture node screenshot </strong>если ОС на англ.языке) на третьем шаге:</p> <p>6. Разверните все дочерние узлы</p> <p>Как развернуть все дочерние узлы элемента DOM одновременно, не выбирая их по одному? Вы можете использовать комбинацию клавиш «Alt + клик» на вкладке «Elements», чтобы развернуть все дочерние узлы сразу.</p> <p>7. Используйте «$» для ссылки на результат последнего выполнения.</p> <p>Давайте посмотрим на эту сцену: мы выполнили различные операции над строкой, а затем мы хотим узнать результат каждого шага, что нам делать?</p> <p>‘fatfish’.split(»).reverse().join(») // hsiftaf</p> <p><strong>Вы можете сделать что-то вроде этого</strong></p> <p>// шаг 1<br /> ‘fatfish’.split(») // // шаг 2<br /> .reverse() // // шаг 3<br /> .join(») // hsiftaf</p> <p><strong>Более простой способ:</strong></p> <p>Используйте $ чтобы получить результат последней операции</p> <p>// шаг 1<br /> ‘fatfish’.split(») // // шаг 2<br /> $_.reverse() // // шаг 3<br /> $_.join(») // hsiftaf8. Быстро переключайте цвета темы</p> <p>Кому-то нравится белая тема Chrome, а кому-то черная. Мы можем использовать сочетания клавиш для быстрого переключения между двумя темами.</p> <ol> <li> <p>cmd + shift + pвыполнить командную команду</p> </li> <li> <p>Введите «Переключиться на темную тему» ​​или «Переключиться на светлую тему», чтобы переключить тему.</p> </li> </ol> <p>Примечание от переводчика: светлая тема хороша когда на экран попадает много яркого света, например если Вы работаете на пляже в солнечный день</p> <p>9. Используйте $ и $$ для быстрого выбора элементов DOM</p> <p>Использование document.querySelector и document.querySelectorAllдля выбора элементов текущей страницы в консоли является наиболее распространенным способом, но это слишком длинно, и мы можем использовать $ и $$ вместо этого (даже если на страницу не подключен JQuery):</p> <p>10. Используйте $I, чтобы установить пакет npm в консоли.</p> <p>Иногда я хочу использовать NPM-пакеты такие, как dayjsили lodash, но я не хочу заходить на официальный сайт, чтобы проверить это. Было бы неплохо, если бы мы могли попробовать это прямо на консоли, и мы можем!</p> <ol> <li> <p>Установите плагин импорта консоли</p> </li> <li> <p>$i(‘имя’) установить пакет npm</p> </li> </ol> <p>11. Добавьте условную точку останова</p> <p>Мы хотим приостановить выполнение кода, когда при переборе объекта столкнёмся с едой, которая называется ? Как это сделать?</p> <p>const foods = foods.forEach((v) => {<br /> // debugger<br /> console.log(v.name, v.price)<br /> })</p> <p>А вот как:</p> <p>В случае больших объемов данных использование условных точек останова будет очень полезно для разработки и значительно повысит эффективность! Берите на вооружение.</p> <p>Спасибо за внимание!</p> <p>От переводчика: я случайно наткнулся на эту статью, и счёл её полезной для себя. Очень рад, если этот перевод кому то оказался полезным ?</p> </div> <div class="clear post_clear"></div><div class="gt3_post_footer"><div class="gt3_module_button_list"><a href="https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/">Read More</a></div> <div class="blog_post_info"> <!-- post share block --> <div class="post_share_block"> <a href="javascript:void(0)"><span class="sharing_title">Share</span></a> <div class="post_share_wrap"> <ul> <li class="post_share-facebook"><a target="_blank" href="https://www.facebook.com/share.php?u=https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/" data-title="Facebook"><span class="fa fa-facebook"></span></a></li><li class="post_share-twitter"><a target="_blank" href="https://twitter.com/intent/tweet?text=11%20хитростей%20Chrome%20DevTools,%20которые%20помогут%20Вам%20стать%20Senior%20FrontEnd-разработчиком%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&url=https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/" data-title="Twitter"><span class="fa fa-twitter"></span></a></li><li class="post_share-pinterest"><a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/&media=https://nat.od.ua/wp-content/uploads/2022/05/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom.jpeg" data-elementor-open-lightbox="no" data-title="Pinterest"><span class="fa fa-pinterest"></span></a></li><li class="post_share-linkedin"><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/&title=11%20хитростей%20Chrome%20DevTools,%20которые%20помогут%20Вам%20стать%20Senior%20FrontEnd-разработчиком%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&source=Web-студия%20NAT.od.ua" data-title="Linkedin"><span class="fa fa-linkedin"></span></a></li><li class="post_share-mail"><a target="_blank" href="mailto:?subject=11+%D1%85%D0%B8%D1%82%D1%80%D0%BE%D1%81%D1%82%D0%B5%D0%B9+Chrome+DevTools%2C+%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5+%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D1%83%D1%82+%D0%92%D0%B0%D0%BC+%D1%81%D1%82%D0%B0%D1%82%D1%8C+Senior+FrontEnd-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%BC+%2F+%D0%A5%D0%B0%D0%B1%D1%80+%7C+%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%83%D0%B4%D0%B8%D1%8F+Nat.od.ua&body=https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/" data-title="Email"><span class="fa fa-envelope"></span></a></li> </ul> </div> </div> <!-- //post share block --> <div class="likes_block post_likes_add " data-postid="17624" data-modify="like_post"> <span class="fa fa-heart-o icon"></span> <span class="like_count">0</span> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <div class="blog_post_preview format-standard-image"> <div class="item_wrapper"> <div class="blog_content"> <a href="https://nat.od.ua/2022/sozdanie-rasshirenija-dlja-chrome-habr-veb-studija-nat-od-ua/"><div class="blog_post_media"><a href="https://nat.od.ua/2022/sozdanie-rasshirenija-dlja-chrome-habr-veb-studija-nat-od-ua/"><img src="https://nat.od.ua/wp-content/uploads/2022/04/sozdanie-rasshirenija-dlja-chrome-habr-veb-studija-natodua-1170x700.png" alt="Создание расширения для Chrome / Хабр" /></a></div></a><div class="listing_meta_wrap"><div class="listing_meta"><span class="post_date">25.04.2022</span><span class="post_author">by <a href="https://nat.od.ua/author/natoduaadmin_nerty/">natoduaadmin_nerty</a></span><span class="post_category"><a href="https://nat.od.ua/category/opencart/">Opencart</a><a href="https://nat.od.ua/category/seo/">SEO</a><a href="https://nat.od.ua/category/web/">Web</a><a href="https://nat.od.ua/category/branding/">Брендинг</a><a href="https://nat.od.ua/category/internet-magaziny/">Интернет-магазины</a><a href="https://nat.od.ua/category/blogs-sites/">Корпоративные сайты и блоги</a><a href="https://nat.od.ua/category/marketing/">Маркетинг</a><a href="https://nat.od.ua/category/optimization-speed-up/">Оптимизация и ускорение</a></span></div></div><h2 class="blogpost_title"><a href="https://nat.od.ua/2022/sozdanie-rasshirenija-dlja-chrome-habr-veb-studija-nat-od-ua/">Создание расширения для Chrome / Хабр | Веб-студия Nat.od.ua</a></h2><p>Создание расширения для Chrome / Хабр<br /> </p> <div xmlns="http://www.w3.org/1999/xhtml"> <p>Как создать расширение для браузера? Создание расширения для Google Chrome.</p> <p>Сложность: Опытный</p> <p>Вступление</p> <p>Всем привет. Месяц назад, пока бороздил просторы интернета, понял, что у меня есть проблема, я хотел проверить текущую цену Биткойна, но каждый раз заходить на сайт валюты мне было некомфортно. Итак, я решил сделать расширение для Google Chrome с помощью Flutter. И хочу рассказать как я это сделал.</p> <p>Расширение будет достаточно простым, будет лишь функционал проверки состояния Биткойна. Вам не понадобится дополнительная установка каких-либо плагинов. Мы напишем его с помощью встроенных средств web.</p> <p><strong>Ваш Flutter SDK должен быть обновлен до последней версии. Если нет, у вас могут быть некоторые проблемы, поскольку веб-поддержка — довольно новая возможность во Flutter. А также убедитесь, что на вашем устройстве уже установлен Google Chrome.</strong></p> <p>В этой статье я предполагаю, что вы уже имеете некоторое представление о Flutter и его виджетах. Если нет, то рекомендую ознакомиться с ним чуть больше, вот ссылка на документацию.</p> <p>СодержаниеРаздел 1: Создание проекта</p> <p>Создаем новый Flutter-проект, я его назвал «chrome_extension»:</p> <p>Прежде всего, нам нужно создать наше приложение для веб. Измените свое устройство на Chrome из нижней панели:</p> <p>После того как мы это сделали, наше приложение работает в Chrome без ошибок:</p> <p>Теперь перейдите к файлу index.html. Очистите тегbody. Затем создайте новый тег script внутри тега body и укажите атрибуты type и src.</p> <p>Затем вам нужно указать высоту и ширину внутри тега html. Если нет, расширение будет создано с нулевой высотой и нулевой шириной. В итоге ваш код файла index.html должен быть похож на этот:</p> <p><!DOCTYPE html><br /> <html style="height: 650px; width: 300px;"><br /> <head><br /> <!-- Если вы обслуживаете свое веб-приложение по пути, отличному от корневого, измените href ниже, чтобы обращаться по нужному пути. Больше подробностей: * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base $FLUTTER_BASE_HREF — это заполнитель для базового href, который в дальнейшем будет заменен значением. Аргумент `--base-href`, при использовании команды "flutter build". --><br /> <base href="https://habr.com/ru/post/662225/$FLUTTER_BASE_HREF"></p> <p> <meta charset="UTF-8"><br /> <meta content="IE=Edge" http-equiv="X-UA-Compatible"><br /> <meta name="description" content="A new Flutter project."></p> <p> <!-- iOS мета-теги и иконки --><br /> <meta name="apple-mobile-web-app-capable" content="yes"><br /> <meta name="apple-mobile-web-app-status-bar-style" content="black"><br /> <meta name="apple-mobile-web-app-title" content="chrome_extension"> <link rel="apple-touch-icon" href="https://habr.com/ru/post/662225/icons/Icon-192.png"> <p> <!-- Favicon --> <link rel="icon" type="image/png" href="https://habr.com/ru/post/662225/favicon.png"/> <p> <title>chrome_extension


      Следующее, что нужно сделать, это перейти к файлу manifest.json. Здесь вы указываете то, как хотите чтобы ваше расширение себя вело. Мы можем удалить все это и создать снова. Потому что нам нужны не все из них:

      {
      «name»: «First Chrome Extension Name»,
      «short_name»: «First Chrome Extension Short Name»,
      «description»: «Chrome Extension description»,
      «version»: «1.0»,
      «action»: {
      «default_popup»: «index.html»,
      «default_icon»: «/icons/Icon-192.png»
      },
      «manifest_version»: 3
      }

      В файле manifest.json есть много полей. Вы можете прочитать больше по этой ссылке.

      Теперь все установлено. Нам нужно собрать версию нашего проекта. Скопируйте это и вставьте в свой терминал:

      flutter build web —web-renderer html —csp

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

      flutter build web -h

      Теперь нам нужно загрузить наше расширение в Chrome. Откройте Chrome и перейдите к своим расширениям: chrome://extensions/

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

      Нажмите на кнопку «Загрузить распакованное» и добавьте папку web в папку build.

      После этих действий расширение появилось:

      Исходный код полного приложения доступен на Github.

      Раздел 2: Биткойн-трекер

      Пришло время создавать настоящее расширение. Мы будем использовать nomics.com API для текущих цен на валюту. Вы можете получить ключ API по этой ссылке.

      Нам нужно получить данные из API. Этот класс CryptoApi получает данные и возвращает их как List.

      import ‘dart:convert’;
      import ‘package:extension_example/model/currency.dart’;
      import ‘package:http/http.dart’ as http;

      class CryptoApi {
      static const _key = »; // Сюда ваш API ключ

      static Future> getCurrencies() async {
      final url =
      «https://api.nomics.com/v1/currencies/ticker?key=$_key&per-page=100»;

      final response = await http.get(Uri.parse(url));
      final parsed = jsonDecode(response.body).cast>();

      return parsed;
      }
      }

      Затем создай модель валюты (Currency):

      class Currency {
      final String id;
      final String name;
      final String currency;
      final String logoUrl;
      final double price;
      final double oneDayChange;
      final double marketCap;
      final int rank;

      Currency({
      required this.id,
      required this.name,
      required this.currency,
      required this.logoUrl,
      required this.price,
      required this.oneDayChange,
      required this.marketCap,
      required this.rank,
      });

      factory Currency.fromJson(Map json) {
      return Currency(
      id: json,
      name: json,
      currency: json,
      logoUrl: json,
      price: double.parse(json),
      oneDayChange: double.parse(json),
      marketCap: double.parse(json),
      rank: int.parse(json),
      );
      }
      }

      Далее займемся файлом main.dart и отобразим наш список:

      import ‘package:extension_example/api/crypto_api.dart’;
      import ‘package:extension_example/model/currency.dart’;
      import ‘package:flutter/material.dart’;

      void main() => runApp(const MyApp());

      class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
      return MaterialApp(
      theme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      debugShowCheckedModeBanner: false,
      title: ‘Crypto Tracker’,
      home: const Currencies());
      }
      }

      class Currencies extends StatefulWidget {
      const Currencies({Key? key}) : super(key: key);

      @override
      _CurrenciesState createState() => _CurrenciesState();
      }

      class _CurrenciesState extends State {
      @override
      Widget build(BuildContext context) {
      return Scaffold(
      appBar: AppBar(
      title: const Text(‘Crypto Tracker’),
      actions: ,
      ),
      body: FutureBuilder>(
      future: CryptoApi.getCurrencies(),
      builder: (context, AsyncSnapshot snapshot) {
      if (!snapshot.hasData) {
      return const Center(
      child: CircularProgressIndicator(),
      );
      }
      return ListView.builder(
      itemCount: snapshot.data.length,
      itemBuilder: (context, index) {
      Currency currency = Currency.fromJson(snapshot.data);

      return ListTile(
      leading: Image.network(
      currency.logoUrl,
      ),
      title: Text(«${currency.name} (${currency.currency})»),
      subtitle: Text(currency.price.toStringAsFixed(2)),
      trailing: RichText(
      text: TextSpan(
      children: ,
      ),
      ),
      );
      },
      );
      },
      ),
      );
      }
      }

      Еще кое-что, файл manifest.json немного отличается от другого примера. Я загружаю несколько иконок для каждого размера экрана. Не смотря на то, что все они имеют одинаковый значок, Chrome говорит, что нам нужно указать их.

      А еще я добавляю host_permission. Мы используем API в нашем проекте, поэтому мы должны дать разрешение на запрос данных из API. В противном случае доступ может быть заблокирован политикой CORS:

      {
      «name»: «Crypto Tracker»,
      «short_name»: «Crypto Tracker»,
      «version»: «1.0.0»,
      «description»: «There are 100 cryptocurrencies available. You can see current prices.»,

      «host_permissions»: ,

      «content_security_policy»: {
      «extention_pages»: «script-src ‘self’ ‘unsafe-eval’; object-src ‘self'»
      },
      «action»: {
      «default_popup»:»index.html»,
      «default_icon»:»/icons/bitcoin.png»
      },

      «icons»: {
      «16»: «icons/bitcoin.png»,
      «32»: «icons/bitcoin.png»,
      «64»: «icons/bitcoin.png»,
      «128»: «icons/bitcoin.png»
      },
      «manifest_version»: 3
      }

      Теперь мы должны создать веб-приложение с помощью следующей команды:

      flutter build web —web-renderer html —csp

      Затем мы откроем Chrome и перейдем к chrome://extensions/. Нажмите Загрузить распакованное и выберите маршрут ../build/web/. Этот маршрут был сгенерирован на предыдущем шаге.

      Мы видим, что расширение успешно добавлено:

      Заключение

      В этой статье мы создали простое расширение для отслеживания актуальности валют Биткойна для браузера Google Chrome, надеюсь было полезно.

      Исходный код: Github.

Read More
22.04.2022by natoduaadmin_nertyOpencartSEOWebБрендингИнтернет-магазиныКорпоративные сайты и блогиМаркетингОптимизация и ускорение

JavaScript редактор текста для SVG / Хабр | Веб-студия Nat.od.ua

JavaScript редактор текста для SVG / Хабр

Рис 1. Текстовый редактор SVG с поддержкой выделения, копирования, вставки. Работает на пк и мобильных.

Demo | GitHub

<< предыдущая статья

Статья про редактор текста как на рисунке. Исходный код прилагается.

Многострочный текст в SVG

В SVG нет символа переноса строки. Для многострочного текста в SVG используется .

Рис 2. Многострочный текст, третья строка пустая
Line 1
Line 2

Line 4

Листинг 1. Многострочный текст в SVG. Третья строка пустая. Высота строки 20px.

Положение элементов задается относительно верхнего края . Значение атрибута ‘y’ надо рассчитывать.

Расчетов атрибута ‘y’ можно избежать. Листинг 2 дает тот же результат. Используется атрибут ‘dy’ с фиксированным значением. ‘dy’ указывает положение относительно предыдущего элемента.


Line 1
Line 2
.
Line 4

Листинг 2. Многострочный текст в SVG. Третья строка пустая. Высота строки 20px. Отступ задается относительно предыдущего элемента.

Формируем многострочную разметку на JavaScript

Функция ниже делает разметку с фиксированным атрибутом ‘dy’. Разметка получается как в листинге 2.

/**
* create multiline tspan markup
* @param {string} str
* @param {number} lineHeight
* @returns {string}
*/
function svgStrToTspan(str, lineHeight) {
return str.split(‘n’).map((t, i) => {
return `

${t.length === 0
? ‘.’
: escapeHtml(t).replaceAll(‘ ‘, ‘ ‘)}

`;
}).join(»);
}

Листинг 3. Функция делает многострочную разметку

На рисунке 1 при добавлении строки текст смещается вверх. Таким образом текст всегда по центру круга. Листинге 4 показывает как это реализовано:

/**
* @param {SVGTextElement} textEl target text element
* @param {string} str
* @param {{lineHeight:number, verticalMiddle?:number}} param
* @returns {void}
*/
export function svgTextDraw(textEl, str, param) {
textEl.innerHTML = svgStrToTspan(str, param.lineHeight);
if (param.verticalMiddle != null) {
textEl.y.baseVal.value =
param.verticalMiddle — textEl.getBBox().height / 2;
}
}

Листинг 4. Функция вставляет текст в SVG. При указании verticalMiddle текст центрируется по вертикали.

Редактор текста

Редактор должен поддерживать все стандартные возможности:

  • навигацию по тексту, выделение, вставку, копирование;

  • автозамену, проверку правописания;

  • работать на пк и мобильных.

Для стандартных возможностей есть стандартная