Leaderboard

Большинство запросов на рецензию верстки, в разделе Обсуждение работ, в результате имеют одни и теже ответы. Более 90% будущих разработчиков на начальном этапе допускают одни и теже ошибки. Типичные ошибки Запрещено имя класса начинать с цифры, или с дефица после которого следует цифра (пруфлинк: eng рус) Рекомендации Ниже я привожу список самых распространенных ошибок. CSS Не использовать #id для описания стилей блока. Почему-то одна из самых часто встречаемых ошибок -- это использование идентификатора вместо класса, для описания силей блока. Не надо этого делать. Давай мы с тобой определимся раз и на всегда с двумя простыми решениями: .class-name -- имена класов используются для того что бы описать стили блока. В 99,9% случаев программист не будет менять установленные верстальщиком имена классов. #id -- идентификаторы используются в JavaScript для того что бы передать в скрипт элемент и использовать его. Программист имеет право изменять имя идентификатора на своё усмотрение. Возьми за правило не использовать в вёрстке #id. В 99,9% случаев ты сможешь обойтись классами. 0,01% остаётся на уникальные ситуации и вероятность того что тебе такая попадётся, сам понимаешь, очень мала. Давай человеко-понятные имена классам. Когда ты именуешь какой либо класс придерживайся простых рекомендаций: класс должен быть набран латиницей правильно: ".block-reviews" не правильно: ".блок-отзывы" имя класса должно объяснять для чего данный элемент правильно: ".link-checkout" не правильно: ".link-highlight" используй переводчик для поиска англоязычных терминов правильно: ".discount-coupon" не правильно: ".kupon-skidki" не используй сокращений. Пускай имя класса будет длинее, зато его можно прочитать правильно: ".available.in-stock", ".block-shopping-cart" не правильно: ".avail.instk", ".blk-shopCart" не начинай классы с цыфры не правильно: ".7-element" не создавай индексированные классы. Для уточнения конкретного блока используй термины. правильно: ".comment", ".comment.first", ".comment.last", ".comment.highlight" не правильно: ".comment-1", ".comment-2", ... , ".comment-N" так же данный вопрос детальнее раскрыт в этом посте не используй верхний регистр в именах классов, не используй "camelCase" правильно: ".block-layered-navigation" не правильно: ".blockLayeredNavigation" здесь я рассказываю почему не стоит использовать "camelCase". Там же присутвует альтернативная точка зрения. Не описывай стили внутри аттрибута style="". Все стили, за некоторыми редкими исключениями, которые касаются элемента должны быть описаны в CSS файле. Давать всем элементам в коде уникальные имена классов(для непосредственного описания стилей каждого элемента на странице) избыточно. Но, если тебе попался сложный проэкт, который требует такого похода, то рекомендую перед тем как приступить к работе ознакомится с методологией БЭМ и понять как, в данном случае, правильно именовать классы. не указывай размеры картинок в стилях, для этого есть атрибуты тега <img> HTML Не используй комментарии в коде (<!-- comment -->). Лучше написать чистый код и дать ему человеко-понятные классы, нежели плодить комментарии, тем более на русском языке. Не надо везде где попало использовать тег <p> -- используй <div> или <span>. Тег <p> определяет текстовый абзац, а не часть разметки. Использование тега <nav> -- если тебе надо создать одноуровневое меню, то вместо иерархии "nav>ul>li>a" достаточно (и правильнее) использовать "nav>a" Логотип и тег <h1>. Начну с того что по умолчанию не обязательно помещать логотип в заголовок. Единственное где это уместно -- на страницах без заголовка, на пример -- "Главная страница". Такие страницы, как правило не имеют заголовка и содержат только промо контент. Но надо учесть что данный вопрос, все таки, по части SEO, т.е. -- индивидуален для каждого сайта. Приёмы Если надо вывести список данных с маркером, не надо генерировать маркер на стороне сервера. Вместо того что бы выводить: <li>- Возможность уточнять вопрос;</li> <li>- Моментальная публикация;</li> <li>- Гарантия получения ответа;</li> лучше использовать псевдо-элементы. Например: li:before { display: inline-block; vertical-align: middle; content: "-"; } На заметку Не обязательно применять свойство "display: block" в паре с "float: left" и/или "position: absolute (fixed)" -- это избыточно. Подробнее в этом посте Псевдо-элементы ":before" и ":after" по умолчанию отображаются как "display: inline;" Ресурсы, на которые стоит обратить внимание В первую очередь прочитай эту тему до конца, так как другие участники любезно делятся с тобой опытом. Гражданин с забавным ником Sorax Его канал на youtube: http://www.youtube.com/user/ArtSorax Его группа с vk: https://vk.com/soraxcss Системы контроля версий: git http://githowto.com/ , svn http://svnhowto.com/ , mercurial http://mkharitonov.net/hg/help/ru/ http://webfont.ru/ -- шикарный проект со шрифтами от товарища Softlink Методологиея БЭМ -- была разработана в Яндексе. Саму методологию в полном объеме использовать есть смысл на высоконагруженных проектах с большим трафиком, но из неё можно подчерпнуть массу ценной информации и использовать в проектах средней и низкой сложности. Рекомендую ознакомится. Ресурсы, которые не рекомендуются для обучения http://evgeniypopov.com/dvd.html - видео курсы от Евгения Попова http://2develop.ru/videokurs - видео курсы от Дмитрия Валака http://srs.myrusakov.ru/list Придерживаться или нет данных рекомендаций ложится на плечи разработчика. Если есть чем дополнить - предлагайте, так как список не окончен.

Подскажите, как в jade убрать "сжатие" скомпилированного html? В интернетах пишут добавить pretty: true, но не спасает. Может я что то делаю не так? Мой конфиг: https://github.com/npofopr/my-gruntfile/blob/master/Gruntfile.js Там конечно все в куче, но я только начинаю разбираться. Еще есть такой вопрос... Есть ли у гранта "шаблонизация". По типу инклудов что ли... Пока не могу найти ничего простого и подходящего... Чтобы например сделать обертку, которая будет всегда подключаться, а внутренности меняться. Ну или определенный блок можно было легко инклудить в разные страницы. Винда еще начала ругаться, что у меня порт concat'a вечно занят. Но это наверно проблемы винды... Вернее порт надо найти свободный или высвободить этот) Ну и вообще, посмотрел бы на ваши конфиги)

nerv, ну я не думаю что во фрилансе останусь. Просто свой интерес удовлетворил Ничего себе какие страсти... социофобия очень плохо. Если честно - я в реале страшный болтун и ничего плохого в этом не вижу (ну иногда меня за 20 летнего студента могут принять, мне по барабану- надеваю серьёзную маску и профит ) Но у меня есть главное кредо - Никогда не врать, Изворачиваться, подхалимничать. Людям в лицо говорю по факту что о них думаю По по воду денег - вы не переживайте и не принимайте близко к сердцу что тут пишут советы - это всего лишь советы, не отражающие реально вашей стороны жизни) Работать мало и зарабатывать много - это конечно хорошо. Но готовы ли Вы к этому? Представьте что у вас большая куча денег, что бы вы с ней сделали? Если вы хотите много денег прямо - сейчас, могу только посоветовать идти в политику) Не переживайте. на самом деле по большому счёту всё фигня) Не важно сколько у вас денег. Главное научиться при любом раскладе оставаться человеком ))))) upd: Всех благ вам, и бросайте эту социофобию

Потому изначально у псевдоэлементов отображение не блочное, плюс позиция элемента может быть неизвестно где - надо прописать их. УПД, кстати блочное отображение можно и не прописывать - просто у вас у родителя relative не поставлен, в итоге позиционируется псевдоэлемент от body http://jsfiddle.net/Zverushka/yUqwE/5/ А способ клевый. В принцип мне теперь понятно, как написать плагин на javascript, чтобы имитировать градиент у текста. Кстати рабочих плагинов сейчас нет - какие-то глюки у них везде, а ведь это так просто...

Бумага - http://www.books.ru/books/javascript-podrobnoe-rukovodstvo-6-e-izdanie-1814274/ Цифра - http://www.books.ru/books/javascript-podrobnoe-rukovodstvo-6-e-izdanie-fail-pdf-1826701/?show=1 Хотя цифру и так можно найти на просторах инета.

Есть издание 2012-го года: http://www.books.ru/books/javascript-podrobnoe-rukovodstvo-6-e-izdanie-1814274/

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

Мы люди скромные, в интернетах светиться не любим. Кто хочет - пусть сам раскроет свою личность. Твоей фотки, кстати, мы тоже еще не видели Так что приезжай, познакомимся! Торт был самый что ни на есть настоящий!!! Я это подтверждаю лично! Вкусный, красивый и большой... И мы его съели Спасибо Svatov'у за старания! От себя добавлю.... Хорошо посидели. Всем спасибо за хорошее настроение, за организацию и присутствие! Отдельное спасибо IxChel за то, что почтила нас своим присутствием и сделала день рождения htmlbook'а ещё более торжественным! Было очень приятно познакомиться Спасибо Svatov'у за отличный торт и подробный отчет! Ну и как же не поблагодарить горячо уважаемого товарища s0rr0w за поддержку встреч сообщества, стабильное посещение, содержательные беседы и расширение компании! Думаю, это не последняя встреча, так что все, кто не приехал, имеют возможность сделать это в следующий раз

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

Падди, ну юзай дримвиер дальше В чем проблема) Авторы книг просто видимо не шарят))) да, 40 часов в помойку)

Иди [censored] ———- 2.2. Нецензурные выражения, в том числе завуалированные.2.3. Оскорбления участников форума.Правила форума Получаешь устное предупреждение, в следующий раз РО.

У специалиста мало уроков по вёрстке, в основном теория. А какая разница что указывать??? работает одинаково