Что такое хинт в javascript
Хинт Hint
Хинт — это подсказка, появляющаяся при наведении на элемент.
Обычно маленькую подсказку называют тултип, а большую хинт. Но в Контур.Гайдах всё наоборот. Так исторически сложилось. Зато проще запомнить: меньше слово — меньше контрол.
При общении с пользователями мы говорим не «хинт», а «всплывающая подсказка».
Когда использовать
Используется на элементах, которые не вмещают полное название или требуют небольшого пояснения. Например: панель действий, иконки без текста, сокращенные слишком длинные названия в таблице.
Описание работы
Хинт появляется при наведении курсора на элемент, с задержкой в 400 миллисекунд. Это нужно чтобы при движении курсора по странице не было моргания хинтов.
Исчезает хинт мгновенно, как только курсор «уйдет» с элемента. Хинт исчезает и в том случае, если после его появления прокрутить страницу.
Хинт должен полностью заменить в интерфейсе стандартные хинты браузера, вместо системных подсказок из тегов alt и title.
Текст
Текст хинта — максимально короткий, в идеале не больше 70 символов. Не может содержать инструкцию.
Не дублируйте название объекта в хинте.
Размер и расположение
Максимальная ширина прямоугольной области 200 px.
Хинт появляется сверху от элемента к которому относится. Если сверху нет места — открывается вниз. Можно указать приоритет — сверху или снизу, и даже слева или справа.
Если хинт находится сверху или снизу от элемента, то текст в нем выравнивается по центру. Если справа или слева — то выравнивание по левому краю.
8 практичных хитростей веб-разработчика — применить немедленно!
HTML, CSS и JS хинты, которые полезно знать — перевод 8 Tricks for Web Developers You Can Put Into Practice Immediately
Веб-разработчику всегда приятно лишний раз облегчить себе жизнь. Особенно, если это можно сделать моментально и на практике. Только вот список приемов по облегчению жизни разработчика — почти бесконечен, да и не все из них безопасно часто применять.
Поэтому я, Daan, объединил те некоторые из HTML, CSS и JavaScript приемов, о которых, на мой взгляд, будет полезно узнать каждому веб-разработчику. Надеюсь, что хоть с парочкой из трюков я вас познакомлю первым!
1. Внешние ссылки.
Можно стилизовать ссылки разными методами; один из способов это сделать — приписать ко внешним ссылкам специализированный класс.
Но это громоздко и ненужно, поскольку для простых задач можно и не создавать лишний класс.
Рассмотрим CSS-селектор:
Селектор принимает все те a теги, атрибут href которых содержит две косые черты (для фильтрации относительных URL-адресов) и не содержит URL-адреса вашего веб-сайта. То есть, фильтр проходят только внешние ссылки.
Просто, неправда ли?!
2. Легкий подсчет
Наверное, console.log вы уже много раз использовали. Но знали ли вы о других, более полезных для отладки функциях?
В приведенном выше примере массив names содержит пять имен. Функция count вызывается каждый цикл, поэтому счетчик вернет 5.
3. Углы
4. Подписи и субтитры
Добавление подписей или субтитров ко всему аудио и видео на веб-сайте очень поможет посетителям. Это, вероятно, не требует дополнительных объяснений.
Атрибут label определяет заголовок текстовой дорожки. Атрибут kind указывает тип текстовой дорожки и может иметь одно из следующих значений: заголовки, главы, описания, метаданные или субтитры. Атрибут srclang определяет язык текста дорожки и является обязательным, если атрибут kind это субтитры.
5. Динамические свойства
Иногда бывает необходимо добавить к объекту динамические свойства. К счастью, в JavaScript это возможно. На самом деле, есть несколько способов сделать это.
Вот так выглядит первый способ:
Приятно знать, что в ES6 можно комбинировать динамические свойства с интерполяцией.
Давайте рассмотрим следующий пример, в котором мы добавили дополнительное свойство к объекту person с помощью интерполяции:
Последний способ добавить динамическое свойство к объекту — определить его так же, как при добавлении пары ключ-значение в массив:
Большое преимущество этого метода — он позволяет добавлять динамические свойства не только при объявлении объекта; такой способ часто комбинируется с оператором if :
6. Стилизация необязательных и обязательных элементов ввода.
Вот как это выглядит:
7. Список, разделенный запятыми.
Вот небольшой хитрый трюк, который позволяет вам создать список, разделенный запятыми, используя только неупорядоченный список HTML и пару строк CSS.
Вот как выглядит результат:
8. Уникальные значения массива
Javascript optional type hinting
When a programming language is statically typed, the compiler can be more precise about memory allocation and thus be generally more performant (with all other things equal).
I believe ES4 introduced optional type hinting (from what I understand, Adobe had a huge part in contributing to its spec due to actionscript). Does javascript officially support type hinting as a result? Will ES6 support optional type hinting for native variables?
If Javascript does support type hinting, are there any benchmarks that show how it pays off in terms of performance? I have not seen an open source project use this yet.
5 Answers 5
My understanding, from listening to many Javascript talks on the various sites, is that type-hinting won’t do as much to help as people think it will.
In short, most Javascript objects tend to have the same «shape», if you will. That is, they will have the same properties created in the same order. This «shape» can be thought of as the «type» of the object. An example:
All objects made from «Point» will have the same «shape» and the newer internal Javascript engines can do some fancy games to get faster lookup.
In Chrome (perhaps others), they use a high-bit flag to indicate if the rest of the number is an integer or a pointer.
With all of these fancy things going on, that just leaves typing for the human coders. I, for one, really like not having to worry about type and wouldn’t use that feature.
This video describes things in far more detail: http://www.youtube.com/watch?v=FrufJFBSoQY
I’m late, but since no one really answered you questions regarding the standards, I’ll jump in.
As you mentioned, now they’re working on churning out ECMAScript 6 (which has some totally awesome features!), but don’t expect to see type hinting. The Adobe guys have, to a degree, parted ways with the ECMAScript committee, and the ES committee doesn’t seem interested in bringing it back (I think for good reason).
If it is something you want, you might want to check out TypeScript. It’s a brand new Microsoft project which is basically an attempt to be ES6+types. It’s a superset of JavaScript (almost identical except for the inclusion of types), and it compiles to runnable JavaScript.
Что такое хинты в T-SQL (Microsoft SQL Server)
Приветствую Вас на сайте Info-Comp.ru! В данном материале мы с Вами поговорим о том, что же такое хинты в языке T-SQL (Microsoft SQL Server), Вы узнаете, какие типы хинтов бывают, для чего и в каких случаях мы их можем использовать.
В предыдущих материалах мы с Вами рассмотрели архитектуру выполнения запроса в Microsoft SQL Server, план выполнения запроса, поговорили об операторах плана запроса, сегодня же мы поговорим о том, как мы можем влиять на процесс формирования плана выполнения запроса, а влиять на него мы можем как раз с помощью хинтов.
Хинты в T-SQL
Хинт (hint) – это указание оптимизатору запросов, которое переопределяет его поведение по умолчанию на время выполнения SQL инструкции.
Иными словами, с помощью хинта мы можем сказать оптимизатору запросов, как именно поступить в той или иной ситуации в процессе построения плана запроса.
Например, мы можем сказать, какой конкретно индекс использовать, какой конкретно алгоритм физического соединения таблиц применить, или, допустим, на время выполнения запроса разрешить «грязное чтение».
Обычно оптимизатор запросов SQL Server выбирает самый оптимальный план выполнения запроса и крайне редко ошибается, поэтому использовать подсказки, т.е. хинты, без острой на то необходимости не рекомендуется.
Однако оптимизатор запросов все же может ошибиться или построить план, который нас будет не устраивать, и в этом случае мы можем подсказать оптимизатору с помощью хинтов, как лучше было бы поступить в той или иной ситуации.
Обязательно стоит отметить, при использовании хинтов Вы должны четко понимать, как изменится план выполнения запроса и как запрос с хинтом будет отрабатывать в случае изменения каких-либо факторов, которые влияют на процесс формирования плана. Например, что будет, если у нас объем данных в таблицах, участвующих в запросе, увеличится в несколько раз, т.е. в данном случае Вы должны понимать, не просядет ли производительность с нашим хинтом в случае увеличения объема данных, иными словами, наш хинт так же эффективно будет работать, как и с текущим объемом данных.
Примечание! Факторов, влияющих на построение плана выполнения запроса, на самом деле много, поэтому использование хинтов рекомендуется только опытным разработчикам и администраторам баз данных, да и то в самом крайнем случае, когда другого решения нет.
Типы хинтов в T-SQL
В Microsoft SQL Server хинты мы можем использовать в разных секциях запроса, и на основе этого можно выделить следующие типы хинтов.
Join Hints
С помощью именно этого типа хинтов мы можем влиять на выбор алгоритма физического соединения таблиц.
Существуют следующие хинты:
Пример.
В этом примере с помощью хинта Hash мы принудительно задали тип физического соединения таблиц Hash Match.
Более подробно о типах физического соединения таблиц мы говорили в отдельном материале.
Query Hints
Хинты на уровне запросов распространяются на весь запрос. Иными словами, они влияют на все операторы в SQL инструкции.
Определяются такие хинты с помощью ключевого слова OPTION. В SQL запросе может быть определено только одно предложение OPTION, при этом в нем мы можем указать несколько хинтов.
Существует много различных хинтов, которые мы можем использовать на уровне запросов, например, у OPTION существуют следующие параметры (представлена лишь небольшая часть):
Пример.
В этом запросе мы использовали хинт RECOMPILE.
Table Hints
Табличные хинты относятся только к таблицам и представлениям, для которых они указаны. Такие хинты предназначены для определения способа блокировки, указания конкретного индекса, способа обработки данных в таблицах, например, сканирование или поиск.
Заметка! Всем тем, кто только начинает свое знакомство с языком SQL, рекомендую прочитать книгу «SQL код» – это самоучитель по языку SQL для начинающих программистов. В ней очень подробно рассмотрены основные конструкции языка.
Вот несколько популярных табличных хинтов:
Табличные хинты задаются в предложении FROM с помощью ключевого слова WITH, которое мы указываем после названия таблицы или представления.
Пример.
В данном примере для таблицы Production.Product мы указали хинт INDEX, с помощью которого задали конкретный индекс, а для таблицы Production.ProductReview мы указали хинт NOLOCK, который позволяет обрабатывать данную таблицу в режиме READ UNCOMMITTED, т.е. мы можем читать неподтверждённые данные (грязное чтение).
На сегодня это все, надеюсь, материал был Вам полезен, пока!
Статические анализаторы JavaScript и ошибки, от которых они помогут отучиться (Часть 1)
Далеко не каждая строка моего кода получается идеальной с первого же раза. Ну, в некоторых случаях… Иногда… Ладно – практически никогда. Правда заключается в том, что я трачу значительно больше времени на исправление своих собственных глупых ошибок, чем мне хотелось бы. Именно поэтому я использую статические анализаторы практически в каждом написанном мной файле JavaScript.
Статические анализаторы просматривают код и находят в нем ошибки, прежде чем вы его запустите. Они выполняют простые проверки, например, проверку синтаксиса принудительного исполнения (например, наличия табуляции вместо пробелов) и более глобальные проверки, такие как проверка того, чтобы функции не были слишком сложными. Статические анализаторы также ищут ошибки, которые невозможно найти в процессе тестирования, например, == вместо ===.
В больших проектах и при работе в больших командах вам не помешает небольшая помощь в поиске таких «простых» багов, которые на самом деле оказываются не такими простыми, как кажутся.
JSLint, JSHint и Closure Compiler
Есть три основных варианта статических анализаторов для JavaScript: JSLint, JSHint и Closure Compiler.
JSLint был первым статическим анализатором для JavaScript. Его можно запустить на официальном сайте или использовать одну из надстроек, которые можно запускать в локальных файлах. JSLint находит много важных ошибок, но он очень жесткий. Вот яркий пример:
JSLint показывает в этом коде две ошибки:
Первая проблема – это определение переменной i в условиях цикла. JSLint также не принимает оператор ++ в конце определения цикла. Он хочет, чтобы код выглядел следующим образом:
Я ценю создателей JSLint, но как по мне – это перебор. Он оказался жестким и для Антона Ковалева, поэтому он создал JSHint.
JSHint работает так же, как и JSLint, но он написан в дополнение к Node.js, а потому он более гибкий. JSHint включает большое количество опций, что позволяет выполнять пользовательские проверки путем написания своего собственного генератора отчетов.
Запустить JSHint можно с сайта, но в большинстве случаев лучше установить JSHint в качестве локального инструмента командной строки с помощью Node.js. Как только вы установите JSHint, его можно запустить в ваших файлах с помощью такой команды:
JSHint также включает плагины для популярных текстовых редакторов, поэтому его можно запускать в процессе написания кода.
Closure Compiler от Google – это совсем другая разновидность программы. Как предполагает его название, он представляет собой не только программу для проверки, но и компилятор. Он написан на Java и основан на анализаторе Rhino от Mozilla. Closure Compiler включает простой режим для выполнения базовой проверки кода, и более сложные режимы, позволяющие выполнять дополнительную проверку и обеспечивать соблюдение определений отдельных видов.
Closure Compiler сообщает об ошибках в коде JavaScript, но также создает минимизированные версии JavaScript. Компилятор удаляет пустое пространство, комментарии и неиспользуемые переменные и упрощает длинные выражения, делая скрипт максимально компактным.
Google сделал очень простую версию компилятора, доступную в сети, но скорее всего, вы захотите скачать Closure Compiler и запустить его локально.
Closure Compiler после проверки кода выводит список файлов в один минимизированный файл. Таким образом, вы можете запустить его, скачав файл compiler.jar.
Выбираем правильную программу проверки
В своих проектах я комбинирую Closure Compiler и JSHint. Closure Compiler выполняет минимизацию и базовую проверку, в то время как JSHint проводит более сложный анализ кода. Эти две программы отлично работают вместе, и каждая из них охватывает те области, которые не может охватить другая. Кроме того, я могу использовать возможности расширения JSHint, чтобы писать пользовательские программы проверки. Одна написанная мной общая программа проверяет определенные функции, которые мне не нужны, например вызов функций, которых не должно быть в моем проекте.
Теперь, когда мы рассмотрели несколько программ для проверки, давайте разберем немного плохого кода. Каждый из этих шести примеров представляет собой код, который не стоит писать, и ситуации, в которых программы проверки кода могут спасти вас.
В этой статье для большинства примеров используется JSHint, но Closure Compiler обычно выдает похожие предупреждения.
JavaScript – это язык с динамической типизацией. Вам не нужно определять типы в процессе написания кода, при этом они существуют при запуске.
JavaScript предлагает два оператора сравнения для управления такими динамическими типами: == и ===. Давайте рассмотрим это на примере.
Оператор сравнения == — это остатки языка С, в который JavaScript уходит корнями. Его использование практически всегда является ошибкой: сравнивание значений отдельно от типов редко является тем, что разработчик на самом деле хочет сделать. На самом деле, число «сто двадцать три» отличается от строки «один два три». Эти операторы легко неправильно написать и еще легче неправильно прочесть. Проверьте этот код с помощью JSHint и вы получите следующее:
Неопределенные переменные и поздние определения
Давайте начнем с простого кода:
Видите баг? Я совершаю эту ошибку каждый раз. Запустите этот код, и вы получите ошибку:
Давайте сделаем проблему немного более сложной:
Запустите этот код, и вы получите следующее:
Этот второй пример работает, но у него есть очень неожиданные побочные действия. Правила для определения переменных JavaScript и области видимости оказываются, в лучшем случае, запутанными. В первом случае JSHint сообщит следующее:
Во втором случае он сообщит такое:
Первый пример поможет вам избежать ошибки времени выполнения программы. Вам не нужно тестировать свое приложение — JSHint найдет ошибку за вас. Второй пример хуже, так как в результате тестирования вы не найдете баг.
Проблема второго примера коварно незаметная и сложная. Переменная myVar теперь исчезла из своей области видимости и поднялась в глобальную область. Это означает, что она будет существовать и иметь значение Hello, World даже после запуска функции test. Это называется «загрязнение глобальной области видимости».
Переменная myVar будет существовать для каждой другой функции, которая будет запущена после функции test. Запустите следующий код после того, как выполните функцию test:
Вы все равно получите Hello, World. Переменная myVar будет висеть по всему вашему коду как шаблон, который приводит к сложным багам, которые вы будете искать всю ночь перед релизом, а все потому, что вы забыли вписать var.