Таблица лидеров


Популярные публикации

Отображаются публикации с наибольшей репутацией начиная с 03/14/11 во всех областях

  1. 9 баллов
    Друзья, представляю вам новый проект - webreference.ru, доступен также по короткому адресу http://webref.ru Сайт пока не закончен в том виде каком мне это хотелось бы, поэтому это не официальный анонс, а бета-версия для получения советов и выявления ошибок. webref.ru - это сайт, на котором будут справочники и руководства по темам, не обязательно связанным с вёрсткой, как сейчас на htmlbook. К тому же работать над ним будет не один человек, а несколько. С htmlbook же постепенно уберу справочники и переделаю сайт. Как, ещё не знаю, речь не об этом. Итак, что хотелось бы услышать. - найденные баги, ошибки в отображении материалов; - общее впечатление; - удобство использования; - что убрать, что добавить. Ещё мне нужна небольшая помощь по вёрстке под мобильные версии. Есть небольшие проблемы с отображением на мобильных устройствах. Надо спрятать меню на маленьких экранах. Кто готов помочь, за деньги или бесплатно, пишите в личку.
  2. 7 баллов
    Добрый день. Данный пост расскажет о том, как правильно оформить вопрос, что бы получить на него ответ в кротчайшие сроки. Пожалуйста, инвестируй 2 минуты своего времени и прочитай ниже изложенное до конца. Давай согласимся с тем что никто никому ничего не обязан. Задавая вопрос на форуме никого не будет интересовать выполняешь ли ты заказ, за который получишь вознаграждение, или просто верстаешь бесплатный макет, или обучаешься. Ты просишь помощи и кто-то из форумчан любезно согласится тебе помочь. Задавая вопрос понимай тот факт, что время человека, который на него ответит, с очень большое вероятностью, стоит в несколько раз (а то и в десятки раз) дороже чем твоё (в рамках специализации). А это говорит о том что желание тебе помочь непринужденное и безвозмездное — уважай, пожалуйста, этого человека и его намерение решить твою проблему. Пойми нас, пожалуйста, правильно — проблема описанная тобой в паре слов для нас может не иметь вообще никакой, для размышления, информации что бы хоть каким-либо образом её воспроизвести в голове. Мы, к сожалению, не телепаты. Нам не дано узреть твою проблему удаленно. Именно по этому я прошу оформить пост согласно следующих рекомендаций. Давай по-порядку. 0. НЕ ВЫКЛАДЫВАЙ СТРАНИЦЫ КОДА СЮДА! КОД НИКТО НЕ БУДЕТ ЧИТАТЬ! 0.1 В рамках исключения вполне нормальной ситуацией выложить небольшой кусок кода на несколько строк 1. Ссылка на проблему. 1.1 Если проблема возникла на странице рабочего сайта — выложи ссылку на эту страницу. 1.2 Если проблема возникла в ходе разработки сайта, выложи сайт/страницу на любой бесплатный хостинг, и предоставь нам ссылку на проблемную страницу 1.3 Если проблема возникла в процессе создания блока/элемента страницы, выложи код сюда: jsfiddle.net 2. Описание проблемы. Очень важным этапом является корректное описание проблемы. Опиши здесь исходную информацию с которой нам предстоит столкнутся. Толи ли это лэйаут (каркас), или форма поиска, или слайдер, или карусель, или что-то другое — опиши с чем обстоит проблема. 2.1 Если проблема возникла в ком-то определённом браузере (Firefox, Chrome, Opera, Internet Explorer, Safari) то следует указать версию браузера и версию Операционной Системы (ОС). 3. Описание задачи. Далее скажи что должно быть в конечном итоге. Опираясь на ранее изложенные тобой данные нам надо четко понимать что именно тебе требуется иметь в конечном итоге. Если вопрос в html/css — расскажи какую именно ситуацию ты пытаешься решить. Если дело со скриптами — расскажи что именно ты ожидаешь получить в результате. 4. Скриншоты. Очень сильно помогает наглядное представление того что должно быть выполнено. Это может быть от руки нарисованная схема (в paint или photoshop — не важно). Или же скриншот макета, который ты выполняешь. 4.1 Если проблема возникла на странице со множеством элементов, то лучшим вариантом будет скриншот, на котором проблемная область обведена квадратом (или показать стрелочкой). Для этого можно воспользоватся, например, программой Clip2Net или Monosnap. Я искренне надеюсь на твоё понимание и отзывчивость к этим рекомендациям.
  3. 6 баллов
    Большинство запросов на рецензию верстки, в разделе Обсуждение работ, в результате имеют одни и теже ответы. Более 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 Придерживаться или нет данных рекомендаций ложится на плечи разработчика. Если есть чем дополнить - предлагайте, так как список не окончен.
  4. 5 баллов
    Всем привет. А что если обсуждение работ будет проходить онлайн? С рекомендациями как улучшить свою работу, как предвидеть ошибки и писать качественный читабельный код. Предыстория Так сложилось, что я часто получаю письма с просьбой оценить вёрстку, подсказать что сделанно хорошо, что плохо, что можно было бы улучшить, какие ошибки были допущенны и как их избегать и так далее. А ещё чаще спрашивают как решить ту или иную задачу, над которой разработчик бётся последние пару дней, хотя решение заключено в паре строках кода. За последние несколько лет такой разбор полётов для меня стал как хобби. Я заметил что ошибки у начинающих повторяются. Приходится объяснять одно и тоже разным людям. Зачем это надо? Сообщество htmlforum.io существует ради того, что бы посетители имели возможность совершенствоваться, повышать свой профессиональный уровень, развиватся и помогать в этом другим. С этой же идеей мне пришла в голову мысль — вести раз в неделю скринкаст, в котором я буду делится своим мнением по поводу вёрстки, которая будет предоставленна на обсуждение. Как добавить вёрстку для оценки? Для того что бы иметь возможность оценить проделанную Вами работы, мне понадобится: Исходный код, выложенный на github, butbucket или любой другой вариант (пожалуйста, не выкладывайте код в архиве, пользуйтесь общедоступными ресурсами) Помимо исходного кода требуется доступ к итоговому результату через браузер. Для этого идеально подойдёт pages.github.com В комментарие к данному посту отпишитесь и предоставьте вышеуказанные данные Что будет в итоге? Вы получите анализ по следующим критериям: вёрстка: какие ошибки допущены, каким блокам не достаточно универсальности, какие проблемы могут возникнуть в будущем, как оптимизировать структуру и поднять гибкость разметки стили: буду обращать внимание на пользование пре-процессорами, предлагать решения которые помогут поддерживать код годами структура проекта: дам рекомендации по организации файловой системы и кода в целом, буду обращать внимание на пользование современными инструментами разработчика В итоге Вы получите анализ по своей работы с точки зрения построения долгосрочных проектов, которые поддерживаются годами, поделюсь своим виденьем какие изменения требуется изменить что бы код не превратился в боль разработчика в ближайшее время. Кстати, не лишним для Вас будет заглянуть в блок Пособие верстальщика и ознакомится предоставленными по теме статьями. Я буду опиратся на описанные в пособие основы в изучении Вашей работы. Когда и где будет обзор? Обзоры будут выкладыватся на канале YouTuBe, каждый вторник в 19.00. Первый обзор будет опубликован 7 августа 2018 г. Первый обзор отложен из-за непредвиденной высокой нагрузки. Как только материал будет готов — отпишусь комментарием в текущем посте. Я тоже хочу делать обзоры Предложение отрыто для всех. Если Вы считаете себя достаточно опытным что бы уметь анализировать работу других разработчиков, — напишите мне в личку @klierik. Стоимость Анализ вёрстки бесплатен. Я понимаю ценность данной информации для начинающих и предлагаю Вам то, чего у меня не было, когда мне доводилось делать первые шаги в веб-разработке. Но если случится так, что мой обзор Вашёй вёрстки помог Вам стать лучше, и есть неуталимое 🙂 желание проявить благодарность, — используйте донейшн. Таким образом у нас с вами будет взаимообмен. Вы получаете консультацию по своей работе, а в обмен поможете существовать данному сообществу.
  5. 3 балла
    На всю жизнь хватит https://cssauthor.com/templates/ https://psdfreebies.com/psd/category/web-elements/web-templates/ https://psdrepo.com/tag/free-psd-website-templates/ http://www.pcklab.com/templates https://freebiesbug.com/psd-freebies/website-template/ http://www.os-templates.com/free-psd-templates https://colorlib.com/wp/free-psd-website-templates/ https://speckyboy.com/free-photoshop-psd-web-design-template/ https://dcrazed.com/free-photoshop-psd-website-templates/ https://dcrazed.com/best-free-blogger-templates/ https://cssauthor.com/corporate-business-web-templates/ https://freshdesignweb.com/free-travel-website-templates/ https://inscribemag.com/free-psd-website-templates/ https://www.freepik.com/ http://blazrobar.com/tag/free-psds/ http://devfloat.net/business-corporate-bootstrap-templates/ https://freedesignresources.net/category/free-templates/psd-templates/
  6. 3 балла
    Всем привет! Благодаря Светлане (Svetlana_P) у нас возродился еженедельный дайджест крутых эффектов на CSS/SVG/JS. Так что приглашаем всех желающих лицезреть эти чудеса: Еженедельная подборка красивых эффектов на CSS/SVG/JS #46. Следите за выпусками каждую неделю, и говорите спасибо Светлане
  7. 3 балла
    http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
  8. 3 балла
    Не прошло и месяца, как родилось ещё одно спасение для наших дорогих верстальщиков. На этот раз Илья Стрельцын (aka SelenIT) придумал потрясающее решение одной известной задачи, связанной с очисткой потока. Все подробности читайте в новой статье. Новая альтернатива clearfix-у и overflow:hidden Читайте и используйте это чудо в своих проектах!
Таблица лидеров находится в часовом поясе Киев/GMT+02:00
Не пропустите! Сэкономьте до 90% на лучших курсах 2018 года.


  • Ближайшие события

    Ближайших событий не найдено
  • Записи блога

  • Сообщения форума

    • Дорогие Друзья! Рад вам сообщить о выходе новой версии движка Flextype и обновленном плагине Admin (Flextype 0.7.3 + Admin 0.3.0) 🚀 Это серьезное обновление для Flextype! Множество новых возможностей и фиксов улучшающие стабильность и производительность системы!  За эти 19 дней было потрачено более 100 часов на разработку и тестирование, запушено более 300 коммитов в репозитории проекта 👽 Изменения в Flextype 0.7.3: 
      - Flextype Компонент I18n обновлен до 1.2.0
      - Flextype Компонент Filesystem обновлен до 1.1.3
      - Symfony YAML Компонент обновлен до 4.2.1
      - Настройки теперь хранятся в одном settings.yaml файле
      - Content: добавлена возможность создавать скрытые страницы. Изменения в Admin 0.3.0:
      - Новая красивая админка в темном стиле! 
      (светлая тема будет в след. релизах)
      - Information: Страница информации отображает версию ядра и версию плагина админки
      - Users: теперь будут создаваться более безопасные пароли используя php функции password_hash и password_verify
      - Files manager: заменен на новый Media manager.
      - Pages Manager: улучшен функционал клонирования страниц. Теперь клонируется вся папка со страницей.
      - Pages Manager: исправлена бага с переименованием страниц #26 
      - Pages Manager: поле ссылки удалено из таблицы с страницами
      - Pages Manager: в быстрые экшена добавлена возможность просмотра страниц, ссылка открывает страницу в новом окне браузера.
      - Pages Manager: улучшено отображение вложенных страниц! теперь более наглядно отображаются вложенные страницы.
      - Pages Manager: исправлена бага с ссылкой на страницу по умолчанию, которая далее ломала логику работы с клонированными странницами.
      - Pages Manager: исправлена бага с пустым полем template
      - Pages Manager: добавлена возможность выбирать тему страниц при ее создании.
      - Pages Manager: много улучшений и исправлений в функционале по работе с страницами.
      - Pages Manager: Новый редактор страниц, редактор схемы (индивидуальные поля), редактор шаблона, редактор исходника страницы!
      - Plugins Manager: для плагина админки выключатель отключен, но отображается.
      - General: используется новые I18n 1.2.0 компонент.
      - General: используется новые Filesystem 1.1.3 компонент.
      - General: добавлена библиотека Gajus Dindent HTML для форматирование HTML кода, это позволяет сохранять красивый HTML после редактора!
      - General: добавлен Assets Manager для Javascript 
      - General: добавлен Animate.css для анимаций.
      - General: Fontawesome обновлен до 5.6.0 
      - General: Twitter Bootstrap обновлен до 4.1.3
      - General: Codemirror добавлен для лучшей работы с кодом.
      - General: es6-promise обновлен до 4.2.5
      - General: popper.js обновлен до 1.14.6
      - General: gulp-autoprefixer обновлен до 6.0.0
      - General: добавлена система отображения оповещений #41 
      - General: добавлена валидация форм jquery.form-validator.js
      - General: добавлено форматирование YAML файлов при их сохранении.
      - General: много общих улучшений архитектуры и скорости!
      - General: обновленная и улучшенная навигация!
      - Translates: много исправлений и улучшений в переводах. 
      Спасибо: Hmelex, AndiLeni, diomed Скачать Flextype 0.7.3
      https://github.com/flextype/flextype/releases/download/v0.7.3/flextype-0.7.3.zip Скачать Flextype 0.7.3 + Admin 0.3.0
      https://github.com/flextype/flextype/releases/download/v0.7.3/flextype-0.7.3-admin-0.3.0.zip Если у вас есть предложения по улучшению Админки и Ядра системы, пишите в комментариях и на официальном DISCORD сервере: https://discord.gg/tjEHXWD  
    • Большое спасибо за помощь, добавил с помощью теней по бокам  белые отступы и все получилось как в примере.
    • Есть такой код. https://jsfiddle.net/moland2006/vcx3bj27/ Мне вообще нужно сделать так чтобы зазоры между блоками 150х150 были одинаковыми (и вертикальные и горизонтальные и по бокам (слева и справа.) Но я не могу понять почему появляются отступы (зазоры) по вертикали, а по горизонтали их нет. В общем подскажите пожалуйста как убрать вертикальные серые полосы чтобы черные квадраты 6 шт 150х150 пикселей слились в один 300х450.
    • а надо как? так чтобы они перекрывали текст - https://jsfiddle.net/kqrvz4Lo/25/ ...