• Какие инструменты сейчас в арсенале у верстальщика/front-end разработчика?

    vahe_2000
    @vahe_2000
    Chrome dev tools
    Лучший инструмент, который мы имеем в наших руках сегодня. С момента своего рождения, хром вложил много в его инструментов разработчика и до сих пор их улучшения непрерывно. Каждый выпуск (каждые 6 недель или так) идет со своими собственными торговыми новых функций DEV инструмента.

    LiveReload
    Сколько раз в среднем вы нажмете клавишу обновления на клавиатуре каждый день? Много, верно? LiveReload простой веб-протокол, который вызывает события для клиентов, когда файлы были изменены.

    Тестирование фронтэнд JavaScript код с помощью Mocha / Chai / Sinon

    Karma тест бегун Javascript написаны парней за AngularJS.

    Eще много есть но по моему это самые нужные список front-end
    Ответ написан
    2 комментария
  • Под какие (разрешения) экраны делать адаптивку сайта?

    не путайте физическое разрешение устройства с его логическим диапазоном, если экран имеет разрешение 1280px это не значит, что сайт будет отрисован именно в этом разрешении, вам нужно узнать что такое device pixel ratio, а также meta name=viewport. Сам использую запросы от 320px до 1200px, с промежуточными точками переходов в контексте задачи и эстетических соображений, отдельно пишу стили под iPhone 5-6s, в силу их экзотичности. Также следует помнить, что хороший адаптив это не только ширина, но и высота. Вот табличка по apple, в свое время очень помогла
    Ответ написан
    Комментировать
  • Под какие (разрешения) экраны делать адаптивку сайта?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Обычно должно быть 5-7 размеров
    1. Смартфон в вертикальном положении (320-400)
    2. Смартфон на боку (480 - 650)
    3. Планшет в вертикально положении (768)
    4. Планшет на боку (1024)
    5. Десктоп (обычно 1200 и 1600).

    Между этими размерами должна быть какая-то резина, чтобы переход был плавным и смотрелось нормально на нестандартных девайсах.
    Ответ написан
    5 комментариев
  • Под какие (разрешения) экраны делать адаптивку сайта?

    alex-saratov
    @alex-saratov
    Ну я не стал бы рассчитывать на то что у ВСЕХ мобилок такое разрешение
    Я делаю до ширины 288 px
    Тестирую 10 - 15 режимах, для каждого делаю свой media screen с коррекцией отображения для отдельных элементов. если рассчитывать на популярные, то отсечете часть пользователей.
    @media only screen and (max-width: 990px){	
    }
    @media only screen and (max-width: 850px){	
    }
    @media only screen and (max-width: 767px){	
    }
    @media only screen and (max-width: 566px){	
    }
    @media only screen and (max-width: 489px){	
    }
    @media only screen and (max-width: 379px){	
    }
    @media only screen and (max-width: 339px){	
    }
    @media only screen and (max-width: 299px){	
    }
    Ответ написан
    Комментировать
  • Структура проекта Angualr?

    @ChtotoBudet
    styleguide 1
    styleguide 2
    Тут рекомендации, в том числе и по выбору структуры проекта
    Ответ написан
    Комментировать
  • Структура проекта Angualr?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Возьмите готовый скелет и не парьтесь + как вам советует Azimov Elbek почитайте angular styleguide.
    Ответ написан
    Комментировать
  • Структура проекта Angualr?

    есть ли какие нибудь рекомендации ?

    Да есть.
    Ответ написан
    Комментировать
  • Документирование кода. Правильно ли я делаю?

    Adamos
    @Adamos
    Комментарии на английском - хорошая практика.
    Если у вас возвращается переменная со значением true или false, логично назвать эту переменную по условию, которое истинно или ложно. Operation не может быть true, а вот, скажем, success - может. И комментарий станет излишним, по имени понятно. Аналогично, если в переменной operation_messages должны быть error descriptions, какого черта она называется иначе?
    В общем, если в этом, вполне очевидном, случае верно назвать переменные, то комментарий сожмется до описания формата ввода и вывода. Остальное comments itself.
    Ответ написан
    3 комментария
  • Mixin для media query на stylus?

    andykov
    @andykov
    Shit happens
    Запрос mixin grid stylus
    первая ссылка davidwalsh.name/stylus-grid
    Ответ написан
    Комментировать
  • Mixin для media query на stylus?

    Ivanq
    @Ivanq
    Знаю php, js, html, css
    Поражаюсь людям, которые сначала заходят на форум, а потом, не найдя ответа, лезут в гугл.
    Запрос media query stylus, первая ссылка - https://learnboost.github.io/stylus/docs/media.html
    Ответ написан
    1 комментарий
  • Образовательный ресурс во всем похожий на TheOdinProject.com, но попроще. Есть такой?

    Freika
    @Freika
    Senior Ruby on Rails developer
    А чем не нравится TheOdinProject? У нас, кстати, переводится русскоязычный его аналог: codenamecrud.ru
    Ответ написан
    Комментировать
  • Образовательный ресурс во всем похожий на TheOdinProject.com, но попроще. Есть такой?

    evgenykungurov
    @evgenykungurov
    Программист Ruby/Rails/Системный администратор
    Можно еще попрактиковаться на интерактивных уроках на codeacademy.com"
    и codeschool.com
    По ruby почитать книги, мне понравились The Well-Grounded Rubyist и Russ Olsen - Eloquent Ruby, а так же документацию. Если с англ совсем никак, читайте русскоязычные ресурсы, блоги и другие.
    Кстати, на русском языке его аналог codenamecrud.ru, сам сейчас прохожу курс.
    Ответ написан
    2 комментария
  • Какие существуют Material Design CSS-фреймворки?

    Vampireos
    @Vampireos
    https://vk.com/axelaredz
    Google разродился getmdl.io
    Ответ написан
    Комментировать
  • Как пушить на github чтобы не вводить каждый раз логин и пароль?

    bukinion
    @bukinion
    Некороткий мануал по SSH + GitHub & BitBucket (на Win, почти тоже и на Lin)

    Вначале надо найти ключи
    $ ls -al ~/.ssh
    # Спискок файлов в директории .ssh, если они есть
    # id_rsa.pub # Нам интересны эти два брата, точнее этот публичный код (паб)
    # id_rsa # Это для сверки с пабом


    Если их нет, то будем генерить, после чего ласково попросят пароль, он должен быть сложным, в конечном итоге вводится он будет только один раз при старте сессии.
    $ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
    # Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]
    # Enter passphrase (empty for no passphrase):
    # Enter same passphrase again:


    Кстати, пароль можно и поменять:
    $ ssh-keygen -p # Введете старый, а потом новый.

    Консоль выведет следующее:
    # Your identification has been saved in /Users/you/.ssh/id_rsa.
    # Your public key has been saved in /Users/you/.ssh/id_rsa.pub.
    # The key fingerprint is:
    # 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com


    Теперь надо добавить ваши ключи в ssh-агент
    Удостоверьтесь в том, что он у вас есть — запустите
    $ ssh-agent -s

    Должен быть следующий однострочный (!) вывод, номер pid будет другим, все остальное от лукавого:
    Agent pid 59566

    Если нет, то скорее всего в терминале другая оболочка, тогда:
    $ eval $(ssh-agent -s)
    Agent pid 59566


    Вот теперь можно добавить ключи в ssh-агент
    $ ssh-add ~/.ssh/id_rsa

    Далее, добавим ключи в VCS-сервисы github и bitbucket, для этого скопируйте содержимое id_rsa.pub, и вставьте в настройках своего аккаунта на VCS (например, "SSH and GPG keys" для Github). Активируем ключи.

    для github:
    $ ssh -T git@github.com

    чуть длинней, для bitbucket, вначале надо создать файл-конфиг, ~/.ssh/config, куда добавить следующие строки:
    Host bitbucket.org
    IdentityFile ~/.ssh/id_rsa # Тут приватный ключ!


    После чего запустить следующую команду:
    $ ssh -T git@bitbucket.org

    В каждом случае, если все пройдет успешно, то вы получите следующие сообщения:
    Hi #{username}! You've successfully authenticated, but GitHub does not provide shell access.


    или
    conq: logged in as tutorials.
    You can use git or hg to connect to Bitbucket. Shell access is disabled.


    К слову, что Github, что Bitbucket выдали мне в этот раз такое:
    Thу authenticity of host 'github.com (192.30.253.113)' can't be established.
    RSA key fingerprint is 12:12:12...12.
    Are you sure want to conecting (yes/no)?


    Ответил yes, консоль что-то ответила и все работает.

    Если же вы используете алиасы для хостов, то и активация должна быть через алиас:

    $ ssh -T git@alias


    Если работаете с Sourcetree (рекомендую для винды), то есть такой момент, что программа не принимает стандартный формат этих ключей и что бы работать с программой через ssh придется из полученного ключа (приватный) сгенерировать их в другом формате понятном putty. Для этого используется программа puttygen. Которая входит в поставку Sourcetree.


    Занудно, но уже финал близок, далее нам нужно настроить ~/.bashrc, которого на винде нет, именно он будет содержать инициализационные настройки для консоли и запускать ssh-агент, который будет включать ваши ключи, запоминать сессию:
    # Note: ~/.ssh/environment should not be used, as it
    #       already has a different purpose in SSH.
    
    env=~/.ssh/agent.env
    
    # Note: Don't bother checking SSH_AGENT_PID. It's not used
    #       by SSH itself, and it might even be incorrect
    #       (for example, when using agent-forwarding over SSH).
    
    agent_is_running() {
        if [ "$SSH_AUTH_SOCK" ]; then
            # ssh-add returns:
            #   0 = agent running, has keys
            #   1 = agent running, no keys
            #   2 = agent not running
            ssh-add -l >/dev/null 2>&1 || [ $? -eq 1 ]
        else
            false
        fi
    }
    
    agent_has_keys() {
        ssh-add -l >/dev/null 2>&1
    }
    
    agent_load_env() {
        . "$env" >/dev/null
    }
    
    agent_start() {
        (umask 077; ssh-agent >"$env")
        . "$env" >/dev/null
    }
    
    if ! agent_is_running; then
        agent_load_env
    fi
    
    # if your keys are not stored in ~/.ssh/id_rsa or ~/.ssh/id_dsa, you'll need
    # to paste the proper path after ssh-add
    if ! agent_is_running; then
        agent_start
        ssh-add
    elif ! agent_has_keys; then
        ssh-add
    fi
    
    unset env


    И снова не финал, скорее всего так как вы не пользовались SSH, то ваши уже существующие локальные репо будут работать по http/https, поэтому надо сменить адреса. Адреса удаленных репозиториев проверяются командой $ git remote -v. Для смены адресов git есть специальная команда: $ set-url, ввести следующее:
    $ git remote set-url origin git@github.com:USERNAME/OTHERREPOSITORY.git


    Вернуть все на Родину можно аналогично
    Ответ написан
    1 комментарий
  • Смесь из gulp-jade, jinja2, angularjs Как всё это настроить?

    @rysev-a
    Скажу сразу, я не использую angular. Но думаю что если вы можете использовать jade + angular, то возможно вас заинтересует мой способ:

    Вообще я не думаю, что это дурость. Это очень удобно - использовать gulp для верстки и python (django или flask) для разработки сайта.

    Лично я использую pyjade для flask, а шаблоны jade настраиваю так, чтобы они использовались и при верстке и на flask одинаково. То есть фактически использую одинаковые шаблоны.

    Когда я просто верстаю, то в файле gulpfile.js я добавляю следующее

    gulp.task('jade', function() {
        var siteinfo = require('./siteinfo.json');
        gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade'])
            .pipe(jade({
                pretty: true,
                data: siteinfo
            }))  // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
            .on('error', console.log) // Если есть ошибки, выводим и продолжаем
        .pipe(gulp.dest('./public/')) // Записываем собранные файлы
        .pipe(livereload(server)); // даем команду на перезагрузку страницы
    });


    и создаю файл siteinfo.json, это как аналог базы данных для верстки, например если у меня есть новости, я добавляю вот такое

    {
        "news" : [
            {
                "img"     : "/img/news/001.jpg",
                "title"   : "QT-ITEMS - новый фреймворк или попытка найти теорию всего",
                "anons" : "Как известно, физики давно пытаются найти Теорию Всего, в рамках которой можно было бы объяснять все ",
                "date"    : "2 мая 2015    17:15"
            },        
            {
                "img"     : "/img/news/002.jpg",
                "title"   : "QT-ITEMS - новый фреймворк или попытка найти теорию всего",
                "anons" : "Как известно, физики давно пытаются найти Теорию Всего, в рамках которой можно было бы объяснять все ",
                "date"    : "2 мая 2015    17:15"
            }
        ]
    }


    а в шаблоне jade вывожу так

    .news__block
      for item in news
        article.news__block__item
          a.news__block__item-img
            img(src="#{item.img}").news__block__item-img-src
          a.news__block__item-title #{item.title}
          .news__block__item-anons #{item.anons}
          .news__block__item-date  #{item.date}


    Абсолютно такой же кусок кода я использую и для flask (или django) используя pyjade.
    Только теперь информацию о новостях я получаю не из файла siteinfo.json, а из базы данных из модели News

    (код для flask)
    @app.route("/blog")
    def news():
        news = News.query.all()
        return render_template('news.jade', news = news)


    В итоге я практически не трачу кучу времени на интеграцию верстки из gulp в flask. Для изображений и прочих статических файлов путь одинаковый, потому что я запускаю flask на nginx+gunicorn и статические файлы отдаю с помощью nginx.

    server {
      listen 80;
      server_name default;
      root /home/alex/air-sites/air-sites/static/public/;
      location / {
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        if (!-f $request_filename) {
          proxy_pass http://127.0.0.1:5000;
          break;
        }
      }
    }


    поэтому если я использую стили и скрипты, то они везде добавляются так

    head
      ...
      link(href='/css/screen.css', type="text/css", rel="stylesheet")
      script(src='/js/index.js')


    в общем я предлагаю вам не пытаться сделать из gulp сборщик шаблона jinja, а попробовать использовать jade когда верстаешь и pyjade на рабочем сайте
    Ответ написан
    2 комментария