@splincodewd4 фев 2016 в 00:36

JavaScript

13 мин

218K

CSS * HTML * JavaScript *

+19

Комментарии 38

@dom1n1k 4 фев 2016 в 02:53

Тэги head и body уже отменили, я что-то пропустил?
habrahabr.ru/post/275729/#two

@medved6216 4 фев 2016 в 04:07

Стандарт HTML5
По нему теги body и head могут не использоваться.
Но мне лично они помогают ориентироваться в разметке и использовать для структурирования кода документа.

НЛО прилетело и опубликовало эту надпись здесь

@dom1n1k 4 фев 2016 в 12:30

А смысл?

НЛО прилетело и опубликовало эту надпись здесь

@dom1n1k 4 фев 2016 в 15:24

Ну то есть в переводе на русский: эти тэги допустимо опускать, и ничего не должно ломаться. Своеобразная защита от дурака (что несомненно полезно), но нет никаких разумных аргументов, что так нужно делать.

PS Из статьи по ссылке узнал о единице ch

НЛО прилетело и опубликовало эту надпись здесь

@lain8dono 4 фев 2016 в 06:00

На самом деле, JavaScript никогда не будет вашим узким местом в расчете на производительность.

Ага. Кроме всего кода, который вызывается из колбека window.requestAnimationFrame. Или если вам нужно читать много данных из WebSocket. С этого момента микрооптимизации ваш лучший друг. Никаких forEach. Никакого кода, который плохо переваривается оптимизатором. И обращайте внимание на то, что именно идёт в прототип, а что в сам объект. Кроме того старайтесь не использовать классы.

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

@artemmalko 4 фев 2016 в 06:15

/* хорошо */
.foo.bar {
color: green;
}
.foo {
color: red;
}

Вот как раз в этом месте сначала логичнее указать .foo, а ниже уже .foo.bar

/* плохо */
if (x === undefined || x === null) { /*… */ }

/* хорошо */
if (x == undefined) { /*… */ }

Опять же, иногда нужно явное сравнение с undefined. Это же JS! Вообще == и === нужно использовать только там, где это нужно. Хотите показать, что вы именно с undefined сравниваете, используйте ===, это не будет плохим кодом.

Очень странно написано про каррирование. Из текста кажется, что это просто антипаттерн для всего.

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

@lleo_aha 4 фев 2016 в 07:39

Ещё, очень заинтересовало «всегда используйте рекурсию вместо циклов» с «отличным» примером.

Теперь представим что данная фиговина добавляет 40 чего нибудь (не знаю, фотографий с обрамлением) на страничку. Глубина рекурсии получится 40 (Сорок, Карл!).

«Оптимальней», ну да ну да :/

@TyVik 5 фев 2016 в 16:17

А js не умеет оптимизировать хвостовую рекурсию в цикл?

@UZERE 5 фев 2016 в 19:26

По стандарту ES6 должет уметь. На данный момент реализовано в Babel; в node.js и браузерах ещё нет: kangax.github.io/compat-table/es6

@forgotten 4 фев 2016 в 08:46

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

P.S. Но вот это просто убило

<!-- хорошо -->
<!doctype html>
<html lang=ru>
  <meta charset=utf-8>
  <title>Hello, world.</title>
</html>

Давно ль ‘Hello, world’ вошло в русский язык?…

@dom1n1k 4 фев 2016 в 12:32

Не, ну некоторые советы вполне разумны.
Но, конечно, и много спорного, а местами и просто чуши.

@forgotten 4 фев 2016 в 12:50

Ну да, совет в alt писать что-то осмысленное — норм.
Остальное — местами вкусовщина, местами непонимание, местами откровенно вредные советы.

@forgotten 4 фев 2016 в 13:21

Вообще, весь второй раздел можно заменить на одну фразу «используйте CSS-препроцессоры, такие как LESS, SASS, Stylus» ну или что сейчас самое модное.

@lain8dono 4 фев 2016 в 13:30

ну или что сейчас самое модное

Говорят, что PostCSS.

@forgotten 4 фев 2016 в 13:38

we-have-15-competing-standards.jpg

@dom1n1k 4 фев 2016 в 13:39

Да не, там немало вопросов, которые не касаются технологии, но касаются логики построения стилей. Например, с пунктом 2.7 я согласен. И совершенно неважно, будет ли это делаться на голом CSS или на самом модном турбопрепостпроцессоре.

@forgotten 4 фев 2016 в 13:44

А я нет. В таком примере, как у автора приведён — да, так не надо делать. Но легко можно представить кучу ситуаций, когда так делать надо. Например, первую букву слова выделить другим цветом.

@dom1n1k 4 фев 2016 в 14:13

При чем тут первая буква?
Автор имеет в виду другое — нужно избегать схемы «указать свойство всем, а потом переопределить исключения».
Намного лучше выделить именно нужные элементы и стилизовать именно их (по возможности).

@forgotten 4 фев 2016 в 16:07

Ну да. Указал цвет для текста, а потом переопределил исключение (первую букву). Что не так?
Ну и вообще, показанный пример (li + li вместо li:first-child) конфликтует с первым же правилом «явное лучше неявного».

@dom1n1k 6 фев 2016 в 19:34

Под исключением тут подразумевается откат к предыдущим стилям, отмена только что написанного. Первая буква — не тот случай.

@foxkeys 4 фев 2016 в 10:56

Мдя. Удаление head и body это, конечно, ну оооочень семантично и просто замечательно повышает читабельность…

Легкочитаемый, выразительный и правильный код важнее производительности.

И следом вообще офигительный пример, со стрелочными функциями, который понять не-автору, если он будет хоть на пару строк длиннее — вообще задница. Потому что алгоритм становится совершенно неявным. Человек — не машина. Понять, что и в какой последовательности будет происходить в этом примере — ни разу не просто. А уже попробовать разобраться дебагом в пошаговом режиме и вовсе невозможно.

Отдельное объявление функций используемых только в одном месте — и вовсе архиглупость, т.к. заставляет «листать» выше-ниже, использование Inline записи в данном случае и лаконичнее и понятнее — т.к. сразу видно что и где происходит.

[12, 5, 8, 130, 44].filter(function (val) { return val >= 10; }).map(function(val){return val * val});

Если вы не можете использовать методы Array.prototype, используйте рекурсию.

Омг… Супер-совет, для 10к элементов, например вообще отлично.

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

Нет, конечно изучить и обдумать приведенные советы нужно. Но тут столько спорных моментов, что для новичков эта статья вообще крайне вредна (учитывая ее название «Руководство».
Да еще и массовое использование ES5 и CSS3, тоже штука хорошая — но только с оговорками и полифилами.

P.S. — на мой взгляд, спорными и обсуждаемыми тут являются почти все советы. Просто если на каждый поинт писать возражения — это будет уже статья, а не коммент…

НЛО прилетело и опубликовало эту надпись здесь

@foxkeys 4 фев 2016 в 15:29

Семантическая вёрстка, или семантический HTML-код, — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением)[1], а также предполагающий логичную и последовательную иерархию страницы

© Википедия

Ну вот как-бы иерархию-то тут и ломают… Это если чисто формально подходить.

А если подойти не с формальной точки зрения, а по сути и смыслу семантической верстки — то всё еще хуже.

Ведь для чего вообще в html5 ввели новые тэги? Да как раз таки для создания структуры и иерархии контента! Всё, другого назначения у всяких «article» и «head» нету. С технической точки зрения их функции прекрасно выполняют div'ы

И разрушение структуры путем удаления «head» есть прямое нарушение принципов семантической верстки.

НЛО прилетело и опубликовало эту надпись здесь

@boramod 4 фев 2016 в 11:12

Пожалуйста, расскажите подробней про кеширование. Немного не понял разницу двух примеров. Спасибо.

@boramod 4 фев 2016 в 12:42

*кэширование

@zag2art 4 фев 2016 в 12:20

Улыбнуло слово «ежели», а так ничего вроде

НЛО прилетело и опубликовало эту надпись здесь

@foxkeys 4 фев 2016 в 15:34

Мда. Название «Вредные советы» статье подошло бы лучше.

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

@forgotten 4 фев 2016 в 16:09

Если вы по коридору
Мчитесь на велосипеде,
А навстречу вам из ванной
Вышел папа погулять,
Не сворачивайте в кухню,
В кухне — твердый холодильник.
Тормозите лучше в папу.
Папа мягкий. Он простит.

@seokirill 5 фев 2016 в 06:18

комментарии сплошь отрицательные, а статья в огромном плюсе. странно сие

@QtRoS 5 фев 2016 в 07:53

Кто-нибудь может объяснить, почему первый пример к Который этому правилу помечен как «плохо»?!

@friday 5 фев 2016 в 17:07

Меня умиляет манера изложения: «это — хорошо, это — плохо. dixi». Объяснить, аргументировать, почему так, а не так — не, зачем.

@shoorick 5 фев 2016 в 21:19

Определении языка и кодировки символов не является обязательным, однако рекомендуется всегда объявлять их на уровне документа, даже если они указаны в заголовках HTTP.

Ну да, конечно.
Допустим, в HTTP-заголовке идёт одна кодировка, в документе указана другая — такое бывает, видел много раз. Внимание, вопрос: в какой кодировке клиент увидит страницу?

Мне кажется, указывать кодировку достаточно один раз — в HTTP-заголовке.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий