• Почему Веб мастер постоянно негодует когда сажает на joomla страницы на Bootstrap?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    Использовать бутстрап для рядовых проектов (даже интернет-магазинов), всё равно, что пытаться добраться до ближайшего магазина за углом, используя скоростную машину или самолет.
    Все эти примочки, которыми напичкан бутстрап никогда не пригодятся на 99,5% сайтов.
    Например, бутстрап обязывает использовать дополнительные зарезервированные классы, которые, казалось бы, ускоряют верстку, но на самом деле, мешают другому человеку (не знакомому с бутстрапом) и заставляют изрядно попотеть, чтобы разобраться во всех этих классах.
    95% дизайн макетов не рисуются по сетке, оптимизированной под верстку с бутстрапом. Половина из этих макетов вообще рисуется безо всяких сеток. Тут всплывает еще один момент - получается, мы пытаемся запихнуть бутстрап в макеты, которые рисовались совсем без рассчета на бутстрап. Большинство дизайнеров вообще знает ничего о бутстрапах. Хорошо, если они умеют грамотно использовать сетки.
    Могу перечислять причины недовольства веб-мастера еще очень долго, т.к. сам являюсь противником использования бутстрапа в обычных сайтах. Бутстрап создан для разработки интерфейсов - для них и нужно его применять.

    Вывод один: не использовать бутстрап, работая в команде с людьми, которые не работают с бутстрапом. Он раздражает всех, кто не читал документацию по нему. Да и тех, кто прочел документацию и решил, что использовать бутстрап - это извращение - тоже достаточно большое количество.
    Ответ написан
    Комментировать
  • С чего начать разработку сайта?

    madmages
    @madmages
    Человек прямоходящий
    интерфейс > архитектура базы > серверная часть > фронтальная часть
    Ответ написан
    Комментировать
  • Знаете ли вы столь же полезные сайты как Toster, Habrahabr, Lifehacker?

    vicodin
    @vicodin
    Имею некоторый опыт
    frontendfront.com
    открыл для себя недавно
    Ответ написан
    Комментировать
  • Можно ли назвать себя Junior JavaScript Developer'ом?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Назваться можно хоть синьером хоть богом, сами понимаете.
    Ответ написан
    Комментировать
  • Что такое Less и Sass?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Лень двигатель прогресса. Хороший пример - принцип DRY - Don't repeat yourself. Я весьма подозреваю что вы стараетесь соблюдать этот принцип когда делаете макеты или чем вы там занимаетесь. Так же я весьма уверен что вы хотя бы пытались чуть автоматизировать рутину своей повседневной работы. Так же у вас могли быть ситуации когда вы переиспользовали какие-то элементы. Мало ли.

    Так вот... CSS это тупая таблица стилей. Селектор и стили, ничего сверх умного тут придумать нельзя. Лет 5-10 назад было довольно модно держать один мегажирный CSS файл на 10К+ строк и радоваться жизни внося все больше изменений и т.д. Соответственно даже если вы соблюдаете всякие правила модульной верстки и все такое, у вас возникает несколько проблем:
    • организация стилей, то есть держать все в одном файле не удобно особенно когда проект длится годами
    • Дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты которые можно реюзать. Так же у вас может появиться масса однообразных селекторов отличающихся лишь немного. При модульных подходах вложенности редко имеет место быть но все же имеет. Но не будем забывать что большинство фигачит селекторы просто так. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.
    • Привязка размеров и параметров к другим стилям, например у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Да, в css3 появился calc для этого но это было относительно недавно и только с недавних пор можно почти без опаски использовать эту штуку.
    • Таблицы стилей, как и HTML ориентированы на удобный разбор этого добра машиной, но не человеком. Человек же существо ленивое и как-то вот лень лишний раз скобку поставить или точку с запятой. Просто лень.


    Есть так же хорошее правило, или идея если хотите.... Если код можно сгенерить - его лучше сгенерить. То есть для решения всех выше перечисленных проблем придумали препроцессоры. Они как бы были и раньше всех этих scss/less/stylus но как-то не решали всех проблем и т.д. Что в итоге было предложено (перечисляю в том же порядке что и в списке выше).

    • У CSS есть такая штука как @ import. Но не очень круто импортировать сотню стилей в продакшене. Стоит сделать так что бы все стили были склеены при сборке проекта. Эта идея в итоге развилась и если разработчик использует это дело правильно, можно зайти в любой файл со стилями и увидеть список всего от чего зависят эти стили. Какие стили подключаются и т.д. Причем один файл с зависимостями может быть подключен в нескольких файлах а препроцессор сам разберется как и куда все вставлять сгенерив максимально оптимизированный по структуре файл. А разработчик получил четкую структуру файлов и возможность быстро найти где что и от чего зависит.
    • С селекторами проблему предложили решить наиболее логичным вариантом. Если у нас есть вложенные селекторы, то имеет смысл определять их внутри блока этого селектора. Это существенно упрощает поддержку стилей. Так же для управления снипитами и прочим добавили миксины - эдакие параметризованные или нет функции которые выплевывают шматок CSS. До появления штук вроде autoprefixer это был единственный способ писать поддерживаемые стили, использовать плюшки CSS3 и вообще новые плюшки и не сойти с ума от префиксов. Префиксы это только пример, там могут быть самые разные штуки позволяющие грамотно производить реюз стилей
    • Проблему зависимостей значений стилей друг от друга решили... собственно самым очевидным способом - переменные. Это удобно, легко поддерживать и в умелых руках это мощный инструмент. Нужно поменять базовые цвета - не нужно лазить по 100500 блоков и править значения руками, можно поправить переменные и все будет хорошо.
    • Насколько я помню SCSS/LESS не стремились решить эту проблему. Какие-то решения образовывались сами собой с течением времени. В плане минимализма и выразительности пожалуй сейчас самая крутая штука это stylus.


    Что в итоге произошло. В один прекрасный момент какие-то там рубисты придумали SCSS (они вообще не любят все что не в стиле ruby в плане минимализма и выразительности). Затем чуваки подумали и сказали, SCSS это круто но почему-то они используют синтаксис знакомый именно Ruby разработчикам а не обычные для CSS конструкции. В итоге реализовали LESS, причем его уже реализовали на javascript, что с наличием node.js позволило это все добро еще на одной платформе собирать. А так как под эту платформу и так плодили препроцессоры оно удачно вписалось.

    Далее уже шли какие-то модификации дальнейшие, вроде того же Stylus, где синтаксис упростили просто до нельзя.

    Личное мнение. На сегодняшний день я не вижу смысла использовать чистый CSS хоть на малых хоть на больших проектах. Вот вообще никакого.
    Ответ написан
    3 комментария
  • Учеба/работа за границей?

    laska
    @laska
    PHP/JS разработчик
    В целом с вашем скиллом заграницей и без денег вам делать нечего. Рабочая виза будет несбыточной мечтой, студенческая реальна, но требует кучу денег (в Германии можно и бесплатно учится, то там конкуренция соответствующая).

    Что нужно, что бы попасть заграницу. Первый путь. Зарегистрироваться на одеске и работать. Выйдите на стабильный рубеж в 1000 долларов в месяц - можете ехать в страны ЮВА / Египет / Индию. Для Европы нужно больше, от 3х примерно. Первый рубеж достигается за год, второй большинством программистов вообще не достигается.

    Или второй путь. Работаете в России на любую фирму. Если вы активно прокачиваетесь, то вам звонят HRы из все более и более крупных компаний, пока наконец не позвонят из условного гугла. В отличии от первого пути, нет промежуточного звена в Тайланде, но в целом наверное он проще.

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

    Извиняюсь за возможно излишние эмоции.
    Ответ написан
    8 комментариев
  • Открытие блока по клику?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    $('div').click(function(){
        $(this).animate({height: $(this).height() == 20 ? 150 : 20 }, 'slow');
    });
    Ответ написан
  • Ul или Div для списка товаров?

    @LMI
    Может напишу непопулярную вещь, но мне кажется, что это лучше сделать таблицой.
    Ответ написан
    2 комментария
  • Как веб разработчику дружить с дизайном?

    ruddy22
    @ruddy22
    Спасение утопающих — дело рук самих утопающих
    а Вы не думал, о такой вещи?!
    -накидать прототип функционала на ангуляре, либо другом фреймворке/либе
    -сверстать
    -результат показать как альтернативу того, что придумал дизайнер.

    на худой конец, есть такое решение uilang.com
    Ответ написан
    4 комментария
  • Как сделать что бы при наведении на картинку появлялось описание?

    Идеи для вдохновения на CoDrops
    Ответ написан
    Комментировать
  • Как сделать что бы при наведении на картинку появлялось описание?

    nalomenko
    @nalomenko
    Руководитель отдела разработок в студии «Lava»
    HTML:

    <div class="container" >
        <img src="./images/image1.jpg" />
        <div class="description" >Your description 1</div>
    </div>
    <div class="container" >
        <img src="./images/image2.jpg" />
        <div class="description" >Your description 1</div>
    </div>
    <div class="container" >
        <img src="./images/image3.jpg" />
        <div class="description" >Your description 1</div>
    </div>


    CSS:

    .container > .description { display:none; }
    .container:hover > .description { display: block; }
    Ответ написан
    Комментировать
  • Как рисуются макеты адаптивных сайтов?

    vicodin
    @vicodin
    Имею некоторый опыт
    Берешь любой макет и повторяешь его в фотошопе со 100% точностью, если что-то не поймешь - берёшь следующий и т.д.

    Что значит откуда взять сетку? Сделать самому! Изгоняй из себя потребительство, и раз уж встал на путь дизайнера - созидай)
    Ответ написан
    4 комментария
  • На каких ресурсах можно программировать на JS для фана?

    globuzer
    @globuzer
    gezgrouvingus progreszive ombusgrander greyderzux
    codepen.io
    Ответ написан
    Комментировать
  • Какие сроки для адаптивной верстки новичком?

    redfieldone
    @redfieldone
    Старый , лысый и без денег.
    Почему 4 дня ? есть еще 4 ночи. Так что беритесь, неуверенность долой. Знания постигаются в оппыте, а опыт в трудностях.
    Ответ написан
    Комментировать
  • Как правильно присвоить active?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    $(function () { 
    	$('.h-nav ul li a').each(function () {
    		if (location.href == this.href) {
    			$(this).closest('li').addClass('active');
    		}
    	});
    });
    Ответ написан
    Комментировать
  • Сортировка AngularJs по вложеным объектам?

    Serhioromano
    @Serhioromano
    Web Developer
    Попробуй так. В HTML:

    <tr ng-repeat="item in items | orderBy:predicate:reverse" class="gradeX">


    А в заголовке

    <a href="" ng-click="reverse = !reverse; predicate = 'phone.type'">Tel</a>


    Проверил на фидле. Вроде работает.

    jsfiddle.net/Serhioromano/hrg0k5es/2
    Ответ написан
    3 комментария
  • Объясните что такое полиморфизм простыми словами ?

    Deerenaros
    @Deerenaros
    Программист, математик, задрот и даже чуть инженер
    Да ладно, парни. Ну хватит уже, к чему такие сложности? Берём и читаем. Вообще совсем не обязательно читать про архитектуру и абстракции именно по своему языку, хотя javascript в этом плане родился уродом.

    Ок. Полиморфизм ни в коем случае нельзя рассматривать отдельно от других фундаментальных понятий - абстракция, инкапсуляция и наследование. Объект и подобные прилагаются из аксиом (хотя это-то тоже аксиомы).

    Собственно, представим себе рядом стакан, кружку, чайник, кофемашину, велосипед и скейт. Что между ними всеми общего? Ну как минимум то, что они есть. То есть это - объекты, которые были созданы. Но как они были созданы? Скорее всего на заводе производителя по чертежам. Ок, чертежём назовём конструктор. Ну а класс? А что это такое? А его нет в нашей вселенной - эта сущность есть абстракция, что живёт лишь в наших мыслях. В реальном мире её нет и никогда не будет, такова уж физика - ей по барабану, что птицы и млекопитающие имеют дальних родственников - она лишь обеспечивает возможность естесственного отбора. А уж родственников друг другу находим мы, люди.

    С объектами и классами разобрались, а что же там с нашими стаканами и велосипедами. Мы уже поняли, что всё это объект, то есть грубо можно все объекты наследовать от какого-нибудь суперпредка, суперкласса, что и реализовано в некоторых языках. Но что другого общего между скейтом и стаканом, например? Конечно, можно углубляться и считать, что они все из молекул, и они все из твёрдых веществ. Однако это всё бред и СПГС, так что ответ прост - да ничего. То есть это совершенно разные объекты с совершенно разным функционалом. Более того - естесственно компьютерные модели и иерархии будут сильно отличатся от физик и химий. И это нормально, вопрос об адекватностях моделей ставиться лишь когда модель неадекватна, а до тех пор пилить можно что угодно, лишь бы работало.

    Вот. У нас есть супер-предок Object, от которого дефолтно наследуются все объекты. Допустим, то что объекты состоят из атомов и есть то, что наследуют все объекты. Но все дополнения и правки - полиморфизм. Так, из атомов мы слепили колёса и приделали на доску - ок, это скейт. На него можно встать и катиться, а сильно извернувшись и полетать в трёх метрах над землёй, прямо таки излучая своё яркое эго. В то время как стакан - это мы слепили из атомов плотную ёмкость, из которой вода не выливается под действием силы тяжести. И прямое применение стакана - налив воды опрокинуть его над ртом, чтобы вода вытекла прямо в желудок. Так делают настоящие пацаны, не заботясь об икоте или страхе утонуть, так что вот - полиморфизм.

    Однако что с остальным? У нас ещё абстракция, инкапсуляция и наследование. Ок, начнём с наследования, так оно наиболее близко. Вот что у нас общего между стаканом и кружкой? Ну в оба можно налить воду, но у кружки есть ручка чтобы держаться. То есть можно придумать некий общий класс - ёмкость. Однако что это за класс? Можно например за этот класс взять стакан, тогда все ёмкости по дефолту стаканы, а всё остальное - видоизменённые стаканы. Но кому-то больше нравяться кувшины, например некоторые чики насят их на голове, считая что это удобно. Ну и пусть носят, но как-то же решить надо, что главнее и идеальнее. Так вот - недостяжимый идеал и есть главный - это называется абстрактный класс. То есть ёмкость, что невозможно создать, для которого нет полного чертежа. А все чертежи, что дополнили до полного - есть наследованные классы от класса ёмкость.

    Тут мы подошли к абстракции. Вот такое иерархическое наследование приводит нас к, возможно главной, идее ООП. Вот мы взяли и выделили всё, куда можно налить воду в отдельный класс, нарисовали общий чертёж, но специально не доделали его, оставив зазор для будущих творцов, и назвали чертёж - ёмкость. Тысячи лет изобретатили всех миров создают свои ёмкости, одна лучше другой. Для разных людей - по разному, конечно. Но каждый раз группировать молекулы стекла определённым образом - непростая задача. Поэтому ремесленники пошли на хитрость, они создали тайный совет ремесленников мира и решили делиться друг с другом своими наработками. То есть создавать мелкие чертежи и объявлять классом, например, извлистой ручки в форме ленты Мёбиуса, например. Возможно такая ручка удобно только инопланетным существам, но чертёж создан и к нему можно ссылаться при создании своего чертежа. Таким образом мы абстрагируемся от низкоуровневой задачи "формирования ёмкостей посредством перемещения молекул" к "конструированию ёмкости посредством совмещения деталей, элементов". Это и есть абстракция.

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

    Таким образом, абстракция невозможна без инкапсуляции и наследовании, как невозможен полиморфизм без, собственно, наследования. Ну а полиморфизм невозможен ещё и без инкапсуляции, которая банально бесполезна без наследования и полиморфизма. Вот такие тут треугольники с пирогами. Жаль только про пирог наврали. И про день рожденье.
    Ответ написан
    3 комментария
  • Как осуществить подключение нескольких шрифтов в css?

    Zoxon
    @Zoxon
    Веб-разработчик
    @font-face {
    font-family: "PT Serif";
      src: url("../fonts/ptserif-normal.eot");
      src: local('☺'), 
      url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-normal.woff") format("woff"),
      url("../fonts/ptserif-normal.ttf") format("truetype"), 
      url("../fonts/ptserif-normal.svg#PT Serif") format("svg");
    
      font-weight: normal;
      font-style: normal;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-bold.eot");
      src: local('☺'), 
      url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-bold.woff") format("woff"), 
      url("../fonts/ptserif-bold.ttf") format("truetype"), 
      url("../fonts/ptserif-bold.svg#PT Serif") format("svg");
    
      font-weight: bold;
      font-style: normal;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-italic.eot");
      src: local('☺'), 
      url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-italic.woff") format("woff"), 
      url("../fonts/ptserif-italic.ttf") format("truetype"), 
      url("../fonts/ptserif-italic.svg#PT Serif") format("svg");
    
      font-weight: normal;
      font-style: italic;
    }
    
    @font-face {
      font-family: "PT Serif";
      src: url("../fonts/ptserif-bolditalic.eot");
      src: local('☺'), 
      url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), 
      url("../fonts/ptserif-bolditalic.woff") format("woff"), 
      url("../fonts/ptserif-bolditalic.ttf") format("truetype"), 
      url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg");
    
      font-weight: bold;
      font-style: italic;
    }


    В font-weight можно использовать не ключевые слова, а цифры

    100 Ultra Light
    200 Thin
    300 Light
    400 Regular, Normal
    500 Roman
    600 Medium, SemiBold
    700 Bold
    800 Heavy, ExtraBold
    900 Black

    При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

    UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
    Svg нужен для Safari версии ниже 5.1

    Подробнее смотрите на caniuse.com

    Хорошая статья на эту тему nicothin.pro/page/web-fonts

    @font-face { 
      font-family: 'Web font'; 
      src: url('webfont.woff2') format('woff2'), 
           url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
           url('webfont.woff') format('woff'); 
      font-weight: normal; 
      font-style: normal; 
    }
    Ответ написан
    4 комментария
  • С чего начать и как изучить веб-дизайн, дизайн интерфейсов в целом?

    Rebelart
    @Rebelart
    дизайнер
    Насколько вы знакомы с фотошопом? От этого зависит с чего начать.
    По части визуала, выше правильно советуют, ходить и смотреть на хорошие примеры. Я бы советовала меньше смотреть на наши сайты и больше на англоязычные ресурсы. (например dribbble.com, просто смотреть, там где дают psd качать, разбирать и смотреть)
    Потом как у вас с английским? Потому что в рунете информации меньше и переводы запаздывают. Но читать ководство и смотреть советы тоже хороший вариант, главное не воспринимать их как аксиому: )
    Потом вы хотите только делать визуальную часть или и проектировать тоже?
    Но это все в большей степени к веб-дизайну относится. Какому еще дизайну вы планируется обучится?
    Ответ написан
    Комментировать