• Как называется подобного рода дизайн?

    Naf_Naf
    @Naf_Naf
    Мне кажется, это называется dashboard. По запросу dashboard design можно много такого найти.
    Ответ написан
    3 комментария
  • Модульность на фронтенде?

    @uniquenicknqame
    В современном фронтенде модульности нет.
    AMD, RequireJS, CommonJS, ES6 (он же ES2015), TypeScript итд: зело употребляют это слово, но в конечном итоге все сводится к Java-подобной системе импортов.
    Хотите убедится?
    --Создайте папку и с помощью npm установите туда что-то простое, но посложнее хэлло-ворда; теперь загляните в папку node_modules -- кто все эти люди?? Казалось бы простую вещь ставил, а в результате 10-ки мб кода на борту..

    Компонентов тоже нет.
    Angular, React -- обманывают. Особенно ангулар.
    Компонент предполагает переносимость.
    Попробуйте перенести что-либо более менее весомое с одного ангулар проекта на другой; я уж молчу про перенос на не ангулар проект.

    В итоге пришлось писать свою систему с четким управлением зависимостями, композишн рутом итд итд.

    Вобщем, если интересно, посмотрите в сторону серьезных "экосистем", таких как Java и/или C#.
    Поищите по ключевым словам: dependency injection, IoC (-container), composition root итд
    А на фронтенде это все даже не в зачаточном состоянии.
    Ответ написан
    3 комментария
  • Модульность на фронтенде?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    (кратко про себя)
    Все лежит в папках: компонент + стиль. Собирается webpack'ом. Но у меня react-проекты.

    (длинно, но вроде бы по делу)
    Если относительно долго занимаетесь - у вас скорее всего уже выработались части, которые похожи - их выносите. Так же скорее всего у вас есть одинаковая структура (обычно это js/css/images и html, либо как вы пишите компонентами (отдельными папками) внутри котороых html + стили и может js ). Делайте шаблон для будущих проектов, в первую очередь удобным для себя - ведь вам с ним работать, а в нем реализуйте то что умеете по-максимуму (жмите картинки, оптимизируйте js и т.д)

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

    кажется, что не использовал это все на 100%

    Всем так кажется, поэтому когда не хочется заниматься работой, идем в гугл и смотрим опен-сорс проекты других людей: gulp, wepback, затем если нашли что-то любопытное идем в npm/github читаем доку. Пытаемся применить в работе.

    Что имеем в итоге?
    1) если все работает и вас устраивает (скорость сборки, удобство проверки в разных браузерах ...) - "работу работать";
    2) если есть время и желание - гуглите опен-сорс решения, читайте твиттер интересных людей / новостную подписку;
    3) если хочется услышать мнение коллег, но при этом коллег рядом нет - пишите статью на хабр. Просто статья: я использую такие-то плагины в своем "шаблоне" - вряд ли получит лестные отзывы, но возможно кто-то напишет: вот в этом месте у вас плохо, сделайте иначе. Возможно, вы придумаете, как написать статью интересно - тогда честь и хвала. И критика. А обоснованная критика всегда хорошо.

    P.S. если используете Jade и следуете BEM-методологии, то я бы порекомендовал посмотреть на этот проект
    Ответ написан
    Комментировать
  • Отзыв о книге "HTML5, CSS3 и JavaScript: Исчерпывающее руководство". Стоит ли внимания?

    @archelon
    Пролистал, вполне толковая книга, можно брать.

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

    Дополнительно:
    Хороший справочник по HTML/CSS: webref.ru (старая версия - htmlbook.ru).
    Там же неплохой базовый учебник: https://webref.ru/layout/learn-html-css
    Лучший, по мнению многих, учебник по JS: learn.javascript.ru.
    Для начинающих могут быть интересны интерактивные курсы (htmlacademy.ru, codecademy.com).
    Ответ написан
    Комментировать
  • Возможно ли сделать стерео(анаглиф) на сайте?

    abyrkov
    @abyrkov
    JavaScripter
    Three.js приходит на помощь - стерео и анаглиф
    Ответ написан
    Комментировать
  • Как сделать неровный блок с помощью css?

    trushka
    @trushka
    Как-то так можно, только надо подгонять трансформации
    https://jsfiddle.net/r0s6sr6h/
    Ответ написан
    Комментировать
  • Есть ли русские аналоги Montserrat Alternates font?

    ttone
    @ttone
    Design / AE / Nuke
    Комментировать
  • Как сделать такую двигающуюся линию с помощью Canvas?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    там ж код открыт. посмотреть лень?
    __modules['oscillation'] = function(module){
      //getViewport().width РР· Р·Р° небольших отступов РїРѕ бокам
      var SW = new SiriWave({
          container: module.get(0),
          width: getViewport().width+10,
          height: 140,
          color: 'ed1c24',
          frequency: 2,
          speed: 0.07,
          amplitude: .01,
          autostart: true
      });
    
      // dirty resize
      $(window).resize(_.throttle(function(){
        SW.width = (getViewport().width+10)*SW.ratio;
        SW.canvas.width = (getViewport().width+10)*SW.ratio;
        SW.canvas.style.width = (getViewport().width+10)*SW.ratio + 'px';
        SW.width_2 = SW.width / 2;
        SW.width_4 = SW.width / 4;
        SW._clear();
      },80));
    
      function impulse(impulse, factor) {
        factor  = factor || 1;
        impulse = impulse || 3;
        TweenMax.to(SW, .15, { amplitude: .1*impulse*1.2, frequency:2+(impulse/2), ease:Power2.easeOut, onComplete:function(){
            TweenMax.to(SW, (.15+(impulse/80))/factor, { amplitude:.0001, frequency:2, ease:Power2.easeIn });
          }
        })
      }
    
      function set(impulse) {
        impulse = impulse || 3;
        TweenMax.to(SW, .3, { amplitude: .1*impulse, frequency:2+(impulse/3), ease:Power2.easeOut })
    
      }
    
      function impulseFrequency(impulse) {
        impulse = impulse || 3;
        TweenMax.to(SW, .3, { frequency:2+(impulse/3), ease:Power2.easeOut, onComplete:function(){
            TweenMax.to(SW, .2+(impulse/50), { frequency:2, ease:Power2.easeIn });
          }
        })
      }
    
      function setFrequency(impulse) {
        impulse = impulse || 3;
        TweenMax.to(SW, .3, { frequency:2+(impulse/3), ease:Power2.easeOut });
      }
    
      function setAmplitude(impulse) {
        TweenMax.to(SW, .3, { amplitude:impulse, ease:Power2.easeOut });
      }
    
      function impulseSpeed(impulse) {
        impulse = impulse || 3;
        TweenMax.to(SW, .3, { speed:0.1+(impulse/30), ease:Power2.easeOut, onComplete:function(){
            TweenMax.to(SW, .2+(impulse/50), { speed:0.1, ease:Power2.easeIn });
          }
        })
      }
    
      function setSpeed(impulse) {
        impulse = impulse || 3;
        TweenMax.to(SW, .3, { frequency:0.1+(impulse/30), ease:Power2.easeOut });
      }
    
      function stop(impulse, factor){
        factor  = factor || 1;
        impulse = impulse || 3;
        TweenMax.to(SW, 0, { amplitude: .1*impulse*1.2, frequency:2+(impulse/2), ease:Power2.easeOut, onComplete:function(){
            TweenMax.to(SW, 0, { amplitude:.0001, frequency:2, ease:Power2.easeIn });
          }
        })
      }
    
      window.line = {
        setAmplitude : setSpeed,
        set : set,
        impulse : impulse,
        setFrequency : setFrequency,
        impulseFrequency : impulseFrequency,
        setSpeed : setSpeed,
        impulseSpeed : impulseSpeed,
        stop : stop
      }
    
      $('body').on('mouseenter','.button',function(){ set(2
    Ответ написан
    2 комментария
  • Как растянуть контент по высоте?

    LenovoId
    @LenovoId
    svg, css,js
    calc (); работает везде : https://jsfiddle.net/Geyan/9z8u92dh/4/ , проверил с 4 устройств
    Ответ написан
    Комментировать
  • Функциональный конструктор сайтов?

    Ilyasyakubov
    @Ilyasyakubov
    Муж, Логист ВЭД, IT-блогер
    если прям готовое решение без собственного хостинга, то https://webflow.com/
    но я все же посоветую купить хостинг + wordpress + pinegrow.com (pinehrow - лучшей визуальной drag-n-drop системы разработки front end сейчас не найти)

    з.ы. для wordpress есть еще шаблон-конструктор headwaythemes, но он менее гибок
    Ответ написан
    Комментировать
  • Как сделать такую анимацию?

    @farlow
    2 картинки - одна с синей полоской, другая нет
    та что с синей - фоном в слое, который лежит сверху и ширину слоя увеличиваем постепенно до 100%
    Ответ написан
    Комментировать
  • Функциональный конструктор сайтов?

    littleguga
    @littleguga
    Не стыдно не знать, а стыдно не интересоваться.
    Суть в том, что если бы был такой клевый конструктор, то верстальщики бы давно остались без работы.

    Ну нет еще идеального инструмента для создания сайта из визуального перетягивания и расположения форм. Кодить всё равно придется.

    Выберите фреймворк, который Вам больше всего понравится и из него клепайте. Других вариантов пока нет.
    Ответ написан
    Комментировать
  • Как сделать ленту фото как у flickr или 500px?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Есть у меня знакомый один, очень хороший фронт-эндщик.
    Он написал сам вот такой плагин - tj-s.ru/tod/tj-gallery.html
    Достаточно легкая штука и крутая, я поставил на пару сайтов уже.
    Без jquery вы такое вряд ли корректно реализуете.
    Если будут проблемы, на сайте ему задавайте.
    Ответ написан
    Комментировать
  • SVG. Перспектива и ресурсы?

    031071
    @031071
    с 2015 г изучаю веб.разработку.
    Не туториал, но кое что есть: css.yoksel.ru/svg-masks
    Ответ написан
    Комментировать
  • Как организован workflow фронтенд разработчика?

    serjikz
    @serjikz
    web-developer
    Давайте по пунктам постараюсь рассказать, как вообще надо работать во front-end.
    1. Вы должны научиться думать блоками (блоками в потоке, выпадающими из потока, flex-блоками и тд и тп). Научиться можно только когда вы поймете как на самом деле надо верстать.
    2. Начните с простой вёрстки. Возьмите макет в .psd (80% работы над каждым сайтом вы будете пользоваться PhotoShop и если вы его не знаете хотя бы на предбазовом уровне - печаль беда), импортируйте оттуда все нужные вам картинки ну и начинайте верстать шаблон поблочно, смотря где какой цвет шрифта, размер, жирность, размер блока, фон этого блока и тд и тп.
    3. Зачем вы себе морочили голову gulp, sass, bootstrap когда ещё верстать даже нормально не умеете - я увы не понимаю. Вам ни один из этих инструментов не поможет пока вы не будете уметь именно верстать. На данный момент не думайте о технологиях, структуре и тд и тп. Просто сверстайте хоть какой-нибудь макет хоть как-то.
    4. Общайтесь с людьми, которые вам могут помочь продвинуться в этой сфере. Таковых крайне много. Можете ко мне в скайп добавиться и узнавать некоторые вещи, можете к другим, к кому угодно фактически, наверно 60-70% верстальщиков с удовольствием поделятся с вами своим опытом
    5. Пишите код аккуратно. Был тут недавно вопрос, в котором человек предоставил код, а там ни{ } нету, ни отступов нормальных нет, ну и половина ; просто потеряны, а в html теги применяются не по назначению вовсе. Нельзя так делать ни в коем случае, иначе ваш уровень не поднимется с уровня плинтуса.
    6. Файловая структура: папки css images js и на уровне с этими папками лежат файлы .html либо .php всё. Если говорить о препроцессорах и сборщиках - не лезте пока в это, потом узнаете как только научитесь нормально верстать. Я думаю нет смысла объяснять что в папках тех должно лежать. Если вы считаете себя особенным - можете распределять внутри images картинки по папкам на составляющие, к примеру сделать папку отзывов, папку галерей каких-нибудь и тп, но я чаще так не делаю, не хочу чтоб дополнительные символы засоряли мне код и ухудшали читаемость.
    7. Связывать между собой html и css судя по всему вы и так уже умеете и привязывать к ним js. Не знаю что вам мешает сверстать любой сайт если вы понимаете как устроены эти 3 технологии (а на них по факту всё и держится).

    Итог: Забудьте про sass, gulp и прочее пока не сверстаете шаблонов 10, эти технологии вас никак не ускорят и никак вам не помогут пока вы не будете уметь просто верстать с шаблона .psd и писать нужные скрипты на js или jQuery хотя бы. Научитесь немного фотошопу и занимайтесь практикой. Найти те самые .psd вообще не проблема, их куча бесплатных в интернете.
    Ответ написан
    2 комментария
  • Кто при создании логотипа должен покупать лицензию на используемый в нем шрифт, исполнитель или заказчик?

    opium
    @opium
    Просто люблю качественно работать
    заказчик конечно, таккак за использование шрифта спросят с него, а не с вас.
    Ответ написан
    Комментировать