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


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

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

  1. 5 баллов
    Всем привет. А что если обсуждение работ будет проходить онлайн? С рекомендациями как улучшить свою работу, как предвидеть ошибки и писать качественный читабельный код. Предыстория Так сложилось, что я часто получаю письма с просьбой оценить вёрстку, подсказать что сделанно хорошо, что плохо, что можно было бы улучшить, какие ошибки были допущенны и как их избегать и так далее. А ещё чаще спрашивают как решить ту или иную задачу, над которой разработчик бётся последние пару дней, хотя решение заключено в паре строках кода. За последние несколько лет такой разбор полётов для меня стал как хобби. Я заметил что ошибки у начинающих повторяются. Приходится объяснять одно и тоже разным людям. Зачем это надо? Сообщество htmlforum.io существует ради того, что бы посетители имели возможность совершенствоваться, повышать свой профессиональный уровень, развиватся и помогать в этом другим. С этой же идеей мне пришла в голову мысль — вести раз в неделю скринкаст, в котором я буду делится своим мнением по поводу вёрстки, которая будет предоставленна на обсуждение. Как добавить вёрстку для оценки? Для того что бы иметь возможность оценить проделанную Вами работы, мне понадобится: Исходный код, выложенный на github, butbucket или любой другой вариант (пожалуйста, не выкладывайте код в архиве, пользуйтесь общедоступными ресурсами) Помимо исходного кода требуется доступ к итоговому результату через браузер. Для этого идеально подойдёт pages.github.com В комментарие к данному посту отпишитесь и предоставьте вышеуказанные данные Что будет в итоге? Вы получите анализ по следующим критериям: вёрстка: какие ошибки допущены, каким блокам не достаточно универсальности, какие проблемы могут возникнуть в будущем, как оптимизировать структуру и поднять гибкость разметки стили: буду обращать внимание на пользование пре-процессорами, предлагать решения которые помогут поддерживать код годами структура проекта: дам рекомендации по организации файловой системы и кода в целом, буду обращать внимание на пользование современными инструментами разработчика В итоге Вы получите анализ по своей работы с точки зрения построения долгосрочных проектов, которые поддерживаются годами, поделюсь своим виденьем какие изменения требуется изменить что бы код не превратился в боль разработчика в ближайшее время. Кстати, не лишним для Вас будет заглянуть в блок Пособие верстальщика и ознакомится предоставленными по теме статьями. Я буду опиратся на описанные в пособие основы в изучении Вашей работы. Когда и где будет обзор? Обзоры будут выкладыватся на канале YouTuBe, каждый вторник в 19.00. Первый обзор будет опубликован 7 августа 2018 г. Первый обзор отложен из-за непредвиденной высокой нагрузки. Как только материал будет готов — отпишусь комментарием в текущем посте. Я тоже хочу делать обзоры Предложение отрыто для всех. Если Вы считаете себя достаточно опытным что бы уметь анализировать работу других разработчиков, — напишите мне в личку @klierik. Стоимость Анализ вёрстки бесплатен. Я понимаю ценность данной информации для начинающих и предлагаю Вам то, чего у меня не было, когда мне доводилось делать первые шаги в веб-разработке. Но если случится так, что мой обзор Вашёй вёрстки помог Вам стать лучше, и есть неуталимое 🙂 желание проявить благодарность, — используйте донейшн. Таким образом у нас с вами будет взаимообмен. Вы получаете консультацию по своей работе, а в обмен поможете существовать данному сообществу.
  2. 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/
  3. 2 балла
    @LUC Большинству реально такой стиль удобнее и читабельней. Разве что многие могут поспорить на тему табы vs пробелы, 2 или 4 пробела, и т.п. мелочи. Теперь далее про Code Style. Он нужен в первую очередь для коммандной работы, чтобы код писался в едином стиле удобном большинству. Кроме того, единый стиль написания, а особенно написание каждого свойства на новой строке, при коммите и дифе не покажет лишних строчек. В вашем же случае, при изменении одного параметра, будет отмечена вся строка. Что тоже не доставляет удобства при работе. А так ваш код вполне может быть вашим личным Code Style, если вы работаете один и он вас устраивает. Чисто правила типографики и восприятия. Как при обычном письме Уменьшает вероятность ошибок при добавлении нового правила, когда точку с запятой могут просто пролюбить.
  4. 2 балла
    Там должна быть страница корпоративного сайта, на которой присутвует Шапка и Футер, стилизированные (взятые) с оригинально сайта. Между ними область с контентом с максимально допустимой шириной (скорее всего до 1170 px). Если на корпоративном сайте нет адаптивности, то, как правило, дописать стили для шапки\футера проблем не составляет. Если же есть то считай пол дела сделанно — так как тебе надо просто скопировать Layout с блоками. Далее, дан текст вакансии — чего, в общем, более чем достаточно. Требуется создать стандартную текстовую страницу в общем стиле корпоративного сайте. Идешь в "Описании компании" или "О Нас" или что-то в таком духе. Это пример как должен выглядеть статичный контент (я имею ввиду стили форматирования абзацев, заголовков, списков, etc). Берешь эти стили и используешь у себя. И последнее — надо же как-то предоставить текст вакансии красиво. Для примера бери вью вакансии с любого агрегатора вакансий в своей стране. Я же возьму за основу вервое что попалось под руку — https://jobs.dou.ua/companies/pg-group/vacancies/63243/?from=rs И так, для тебя важно будет повторить: Дата Заголовок Оклад и формат сотрудничества Перечень требований, навыков и бенефитов (отформатированный, спискоми) Краткая информация о проекте Кнопка отклика на информацию Собственно всё. Для повышения своих шансов могу рекомендовать: Используй препроцессор SCSS Оформи презентабельно файловую структуру проекта, на пример: Создай сборщик который будет собирать ресурсы, обрабатывать и складывать в определенную директорию. На пример на базе GulpJS Подключи стили в <head> а скрипты перед </body> Дерзай 👍
  5. 2 балла
    Для ul нужно фонтсайз поставить в 0, т.к. это инлайн блоки и горизонтальные отступы из-за пробелов. После этого блоки слипнутся, ставите нужный вам маржин, но учтите, что вертикальные маржины схлопнуться, а горизонтальные суммируются.
  6. 2 балла
  7. 2 балла
    Меня как то резко в жизни переклинило в Апреле 15 и я уволился с работы тупо в никуда. Тогда ещё не думал что буду web занимать, вообще не о чём особо не думал, знал только что жить как живу больше не хочу. А что хочу ещё не понимал, хотя в 32 уже пора было сформироваться и такие простые вещи для себя решить. Хотя с другой стороны другие жизнь проживают и не понимают, так что я рад что до меня хотя бы в этом возрасте "дошло". Но одним пониманием сыт не будешь, делать я особо ничего не умел из того чем можно было нормально зарабатывать, тем более в маленьком провинциальном городе. В общем решил со временем что веб штука интересная, купил каких то книжек, курсов накачал вагон стал усиленно и ежедневно верстку постигать. Всё это с полного нуля . Деньги конечно кончились быстрее чем пришли знания, благо родные мне помогали. В итоге год я не работал, но зато освоил не плохо, как мне тогда казалось, верстку, js и даже фреймворки и системы сборки какие то пытался изучать. И всё бы хорошо, только работу найти не получалось. Благо родные у меня есть также в Москве и когда мне предложили приехать и пожить какое то время я не долго думая купил билет, сдал квартиру и приехал сюда с одним чемоданом. Через месяц устроился в небольшую студию на сносную зарплату в которой проработал чуть больше года. Сейчас работаю в крупной компании, но не IT. Фронтенд отдали мне на откуп, натянул на него новый дизайн, но особо там не разгуляешься. Много легаси кода, xsl шаблоны, джуквери и прочие пережитки прошлого. Но всё равно работаю с удовольствием, а Node , Vue и прочие Англуляры курю в свободное и иногда в рабочее время тоже. Надеюсь какие то свои проекты запустить на них со временем.
  8. 2 балла
    Ребята, всем привет! Мы, наконец-то, сменили дизайн и обновились! Заходите, удивляйтесь и набирайтесь знаний: http://css-live.ru p.s. Хочется сказать огромное спасибо нашему дорогому эксперту Николя223, за то, что помог нам по части программирования, без него мы бы не справились!
  9. 2 балла
    Смотрите отладчик и видите как браузер разобрал ваш код: <ul> <li>1</li> <li>2</li> <div> <li>555</li> </div> <p> </p><li>555</li> <p></p> <li>3</li> <li>4</li> <li>5</li> </ul> А дальше внимательно читаем описания элементов UL и P UL P Кроме этого элемент P не может содержать внутри себя другие блочные элементы, это написано вот тут https://www.w3.org/TR/html401/struct/text.html#h-9.3.1 Правило что каждый элемент списка должен начинаться на LI нарушено, но браузер постарался исправить этот момент и отобразить страницу как надо. А вот с P возникла проблема, ибо, и читаем что же такое блочный элемент http://htmlbook.ru/samlayout/blochnaya-verstka/blochnye-elementy И видим там строчки: Отсюда делаем вывод что при добавлении внутрь P элемента LI он разрывает параграф ибо LI по умолчанию имеет свойство display: list-item, а закрывающий тег </p> образует новый элемент параграфа. Читайте документацию внимательнее, и С Новым Годом! =)
  10. 2 балла
    если вы примените opacity < 1 к <div >, то <div class="red"></div> будет находиться в контексте <div >, а не корневого элемента z-index всегда работает относительно контекста, т.е. есть у вас например два div с span <div> <span></span> <span></span> </div> <div> <span></span> <span></span> </div> устанавливая z-index для span они все будут в папке корневого элемента (обзавем его как в linux '/') элементы естесно как массив /span[0] /span[1] /span[2] /span[3] все span будут выравниваться по z-index относительно друг друга теперь вы для первого div указали opacity или например как-нибудь по другому включили контекст, тогда у нас получится /div[0] /span[0] /div[0] /span[1] /span[2] /span[3] тут получается что span[0] и span[1] даже не знают о существовании других span и естесно выравниваться будут только относительно друг друга с нулевым отсчетом относительно родительского div еще это можно объяснить на примере комнаты: смотрите вы сверху на свою комнату есть у вас пол, стул, стол с z-index 1,2,3 соответственно на полу у вас лежат листки, на стуле и на столе листки на столе лежат стопкой и естесно верхние перекрывают нижние, то же самое на стуле и полу, но листки на столе логично что выше листков на стуле или полу, но они их не перекрывают, их перекрывает стол т.е. листки на полу с z-index равным 1000 не будут перекрывать листки на столе с z-index равному 10, потому что они даже не сравниваются, т.к. уже находятся на разных уровнях/плоскостях (в разных контекстах)
  11. 2 балла
    Зачем сбрасывать стили, что бы потом их опять устанавливать? Проще и надежнее сразу установить нужные. Да и добавлении какой-либо новой разметки, для которой не заданы стили - всё не превратится в непонятную кашу. А будет иметь какой-то логичный вид. +1 к отсутствию и нормалайза и ресет. Точнее пишется, так скажем, индивидуальный сет под каждый проект, учитывая его нюансы и особенности. Не нужно делать за браузер его работу, он сам не плохо справляется. Извлекайте из этого пользу.
  12. 1 балл
    Тут проблема в том, что собирается HTML-строка, а в HTML нет экранирования спецсимволов слешем. Для HTML кавычки надо экранировать как &quot;, т.е. str = "Описание: &quot;машина&quot;"; // строка для дальнейшего вывода в HTML А еще лучше в выводе использовать типографские кавычки («ёлочки» или “лапки”), которые и выглядят приятнее, и со спецсимволами ни в одном известном мне компьютерном языке не конфликтуют 🙂
  13. 1 балл
    что-то вроде http://jsfiddle.net/rbgve5p6/
  14. 1 балл
    Начнем с того что заголовок это блочный элемент и по умолчанию занимает 100% ширины. Далее, у строчных элементов выравнивание по вертикали по умолчанию стоит baseline, что и происходит у вас во втором случае. Заголовок занял 100% ширины, синие блоки без текста выровнялись нижним краем по базовой линии текста, тем самым отодвинув строку вниз (т.е. по сути они просто большие буквы). Желтый блок с текстом так же выровнялся относительно baseline. Задайте для .block2 и .inner-block vertical-align:top;
  15. 1 балл
    Проще забить на эту возможность в IE и опере, так как использование картинок может выйти боком. Но это чисто мое мнение
  16. 1 балл
    Что мешает взять любой макет и адаптировать его по своему усмотрению?
  17. 1 балл
  18. 1 балл
    Так примерно https://codepen.io/corvus-007/pen/rvrBOV UPD: новая версия: https://codepen.io/corvus-007/pen/vjaGOe
  19. 1 балл
    Всем привет, Лайкните, плиз, на тему "Laravel: Vue - ChartJS - Realtime | Laravel 5.5 уроки | Laravel 5.6 уроки | Laravel vue | " https://www.youtube.com/watch?v=jV7lVrtZVko Очень интересная тема ...
  20. 1 балл
    Примерно 5 лет. Начинал с Submlime Text 2, использовал NodePad++ для смены кодировки. Пробовал Brackets и Atom. Brackets ради просмотра SVG файлов с помощью плагина для него — SVG Preview. Atom`ом перестал пользоваться. Недавно стал пользоваться Visual Studio Code, но все равно Sublime Text отдаю предпочтение.
  21. 1 балл
    Лично я чуть больше года, а вебматрикс увидел свет в 2003 году, затем в 2011 и 2012 году вышли webmatrix 2 beta и webmatrix 2 rc, затем, 1 мая 2013 состоялся релиз webmatrix 3, а в 2016 мелкомягкие объявили о прекращении поддержки матрикса в пользу viusal studio code (что по личным наблюдениям неплохой редактор) и полностью прекратили поддержку 1 ноября 2017 года, даже странно что столько тянули. Так что понятно почему я его не знаю, я его просто не застал, но мне по прежнему неясно где вы то нашли это ископаемое?
  22. 1 балл
    И у вас опечатка в названии шрифта не Colibri, а Calibri
  23. 1 балл
    Вноси изменения в файл /wp-content/plugins/theme-my-login/theme-my-login.css для селектора: .tml-login .tml-submit-wrap input {}
  24. 1 балл
    У вас сама архитектура вроде бы не правильная. по первой части как бы так не пришлось воротить SELECT products.product_id FROM `test` products LEFT JOIN `test` filter_1 ON products.product_id = filter_1.product_id LEFT JOIN `test` filter_2 ON products.product_id = filter_2.product_id LEFT JOIN `test` filter_3 ON products.product_id = filter_3.product_id WHERE filter_1.`filter_id` = 1 AND filter_2.`filter_id` = 3 AND filter_3.`filter_id` = 4 GROUP BY products.`product_id` UPD: Ещё можно как то так, но всё равно мне не нравится SELECT DISTINCT product_id FROM `test` WHERE `filter_id` IN (1,3,4) GROUP BY `product_id` HAVING COUNT(`filter_id`) = 3 по второй хватит просто SELECT product_id FROM `test` WHERE `filter_id` IN (3, 4) GROUP BY `product_id`
  25. 1 балл
Таблица лидеров находится в часовом поясе Киев/GMT+02:00
Learn HTML in 2 hours!


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

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

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

    • Дорогие Друзья! Рад вам сообщить о выходе новой версии движка 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/ ...