artemhp

Ruby разработчики внесли большой вклад в развитие front-end вне рубишных проектов: Чего только стоит: sass, haml, coffeescript (с другой стороны - nodejs разработчики, которые активно развивают свои препроцессоры для front-end.) И для комфортной разработки на front-end нужно две среды - nodejs, ruby. К nodejs у меня привязка сейчас в основном из-за grunt. Отсюда и интерес - можно ли обойтись без nodejs/grunt.

Добрый день, Подскажите, существует ли аналог такой экосистемы как grunt'а, но на ruby?

В ссылке Вами приведен один из самых полезных ресурсов для тестирования верстки. Там можно проверять не только при разных вьюпортах, но и особенности разных операционных систем (благодаря виртуальным машиным в мембер аккаунте). Адаптив верстка она во всем адаптив - адаптив к разным устройствам (десктопный компьютер, дислей на холодильника), адаптив к цветовым гаммам устройств (kindle, macbook), адаптив под интерфейсы управления (мышка, тач, клавиатура) и т.п. Вопрос как тестировать и в чем больше зависит от Вашей целевой аудитории. Но всём проверить нереально. Я чаще всего ограничиваюсь режимом эмулуции разных устройств в Chrome.

Почему подключаете файлы скриптов в head и без async? Какой у вас принцип именования классов? Вот к примеру main_nav-wrap, responsive-menu_btn, name_option, franchise-content. Как Вы решаете для себя какой разделитель для слов выбрать? Какой смысл этого селектора - a.zend ? он у Вас очевидно по свойствам и по разметке только в ссылке используется.

А что не устраивает? Изначальную позицию меню нужно было высчиать чем то типа offsetTop, а то там статика и не совсем подходящая, по этому и глючит. Применять стили в JS - тоже лихо. Вы же там вроде классы какие то создавали, почему не создать было отдельный css-класс и не применить ему необходимые свойства?

Рекоммендую никогда не использовать id в стилях. Вам же тогда крайне сложно будет модифицировать стили при необходимости переопределить какое то свойство другим селектором. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Такого стоит избегать: http://outlinenone.com

javascript - "клиентский" язык программирования. Мне интересно, как Вы себе представляете подключаться к базе данных? Если предположить что данные в файлах и включив фантазию подумать, как это сделать только JS (не nodejs даже), то в голову приходит только ActiveXObject и то... подойдет для администрирования ресурса в браузере сервера, где находится ваш новостной портал (конечно если там Windows, иначе магия с Wine).

Visual Studio Express для веб-разработки вполне нормально. У меня первой IDE был Macromedia Dreamweaver 7.0. В наше время очень популярный для веб-разработки Sublime за счет своей легкости и гибкости. Сейчас использую WebStorm + Visual Studio 2013. Для начинающих подойдет что угодно. Для профессиональной разработки в дальнейшем уже остановитесь на том, что больше подходит под проект, с которым будете работать.

Помогите пожалуйста c идеzvb по поводу реализации подобного счетчика для слайдов

Подскажите, а если така вот конструкция? <span><input type="radio"></span><label>Test</label> Как построить селектор, что бы получить доступ к Label только переключателей? Ведь если сделать что то такое: span ~ label, то мы получим доступ абсолютно ко всем лейблам, будь там в спане переключатель или текстовое поле. Спасибо

Подскажите, какой способ сейчас лучше и почему?

Та работы просто хватает. А от кастомных переключателей пришлось пока отказаться. Да и влезть и исправить нельзя, это написание темы для плагина в котором рендерятся разметка с разных блоков системы, которые редактировать нельзя. И jQuery как бы мне хотелось, тоже нельзя. Есть подключаемый файл стилей только. Спасибо большое, о ~ и не знал. Это может быть и решением, даже если ещё какие теги непредсказуемо появляться будут))

Спасибо за ответ, но решение не подойдет так как: 1. У меня к разметке особого доступа нету. Рендерится без меня. 2. Оборачивается он то в li, то div, и нет в том контейнере никакого обозначения, что там переключатель.

Никто не посоветует?

Сделал реализацию переключателя таким способом: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <style type="text/css"> input[type="radio"]{ opacity: 0; position: absolute; } input[type="radio"] + label::before{ content: ""; display: inline-block; width: 13px; height: 13px; line-height: 13px; margin: 0 8px 0 0; background: green; vertical-align: middle; } input[type="radio"]:checked + label::before{ background:red; } </style> </head> <body> <form action="" name="form"> <input type="radio" name="test" id="first" value="1" /><label for="first">First</label> <input type="radio" name="test" id="second" value="2" /><label for="second">Second</label> </form> </body> </html> И работает всё отлично. Всё бы хорошо, но модуль, к которому я делаю этот стиль рендерит в одном месте один переключатель с такой структурой: <input type="radio" name="test" id="second" value="2" /><script type="text/javascript">var a = 0;</script><label for="second">Second</label> Следовательно я дополнительно пропишу то же самое для селектора: input[type="radio"]:checked + script + label::before и получается: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <style type="text/css"> input[type="radio"]{ opacity: 0; position: absolute; } input[type="radio"] + label::before, input[type="radio"] + script + label::before{ content: ""; display: inline-block; width: 13px; height: 13px; line-height: 13px; margin: 0 8px 0 0; background: green; vertical-align: middle; } input[type="radio"]:checked + label::before, input[type="radio"]:checked + script + label::before{ background:red; } </style> </head> <body> <form action="" name="form"> <input type="radio" name="test" id="first" value="1" /><label for="first">First</label> <input type="radio" name="test" id="second" value="2" /><script type="text/javascript">var a = 0;</script><label for="second">Second</label> </form> </body> </html> Последняя реализация работает в Opera, но не работает в Chrome. Помогите решить, что бы заработало в Chrome

Как сделать вот такую вот картинку дивами? Рядом стоящие и растягивающиеся по высоте в не зависимости от контента Напрашивается таблица, но хотелось бы дивами подобной структуры: http://jsfiddle.net/2c4MK/

Большое спасибо, это заработало. В конечном результате я хотел получить что то типа этого: http://jsfiddle.net/artemhp/tCzZt/ Спасибо, попробую разобрать код и сделать в конечном счете то, что мне нужно будет.

body { position: relative; } div.not_table { width: 100%; position: absolute; top: 200px bottom: 100px; } http://jsfiddle.net/artemhp/TnjYe/2/ Метод не работает div.not_table { display: table; height: 100%; } http://jsfiddle.net/artemhp/AEEPd/1/ тоже не работает.

Спасибо, очень даже привлекательно выглядит, попробую

Сложность в том, как сделать, что бы не прикрепить футтер вниз страницы, а блок div по центру должен быть растянутым физически так как там будет скролл.

А Вы не могли бы помочь в подборе более удачного решения?

Можно ли осуществить приведенную мною разметку на базе дивов (блоков), а не таблицы. Главное что бы шапка была статической, а нижняя часть продлевалась до самого конца страницы?

Тоже не получится. Я использую здесь таблицу только для того что бы у меня верхняя часть (шапка) была статической, а весь остальной контент (блок td) растягивался вниз.

Вычитал, что style="position:relative;" плохо работает для td, следовательно данный метод не очень подходит