люблю типографику и минимализм.
Контакты

Достижения

Все достижения (2)

Наибольший вклад в теги

Все теги (10)

Лучшие ответы пользователя

Все ответы (12)
  • Как пушить на github чтобы не вводить каждый раз логин и пароль?

    bukinion
    @bukinion
    web-developer ну и временами BA, UX, UI
    Некороткий мануал по 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, консоль что-то ответила и все работает.

    Если работаете с 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


    Вернуть все на Родину можно аналогично
    Ответ написан
  • Как стать верстальщиком в краткие сроки?

    bukinion
    @bukinion
    web-developer ну и временами BA, UX, UI
    1) ...может скринкаст какой-то, может туторил крутой.
    Тут верно говорили, Sorax. Sorax наше все))) еще под мышку HTMLbook, разобраться хорошо с флотами и инлайн-блоками. Нравится сайт с реальными современными примерами кодропс. Там правда больше про фишки и украшайзинги в UI с помощью CSS, временами и с JS.
    Скринкастов по реальной верстке нет... Только практика, с ней и эрудиция, и доля воображения при реализации нетривиальных вещей, или наоборот простых вещей нетривиальным способом. Дорогу осилит идущий.
    2)...необходимые технологии и вещи, которые нужны...
    За день освоить yeoman, посомтреть его генераторы, позапускать, понастраивать, посмотреть структуру генерируемых проектов, он очень простой, с ним сразу grunt/gulp с базовыми настройками, что для простых проектов полностью хватает, тем временем и посмотрите как работают они. Bower аналогично, если есть клиентские зависимости, сам менеджер быстро изучается: пару команд в консоли. Да-да, всего лишь нужны знания консоли и базовый js, все это просто, изучил когда в js полным нубом был, просто не боялся, многие просто шугаются с ними связанного страшных слов: node.js, npm. Часто эти люди бэкэндщики (умора*2). Раннее, быстро подсел на препроцессоры и шаблонизаторы, лайврелоады, теперь без этого не могу, тогда просто пользовался GUI, навроде препроса.
    Подытожу, что без препроцессоров и шаблонизаторов этот пункт можете оставить до лучших времен.
    3)...чистый css без bootstrap?
    Бутстрапп знаю, но юзаю фаундейшн, почти любой проект начинаю с yoeman генератора для нее, всегда работаю с SCSS, поэтому просто выключаю ненужные компоненты и все, зачем заново придумывать ту же сетку?! Или искать нормалайз (не юзайте эрик майеровский reset — моветон), он там включен? Правильно, если человек юзает CSS версию бустраппа, то он тянет как правило все, а стоит? там под 110 КБ в минифицированной версии. Кстати бустрапп, по словам Otto, в 4ой версии с less перейдет на SCSS, это серьезная заявочка в миру CSS-процессинга, к слову, порт SCSS есть давно.
    Просто если вы будете юзать основные компоненты бустраппа, то велик шанс, что вашу верстку в последствии, не перезапишут, подключив к ней еще бустрапп, а такое бывает, мало того бывало, что писал на фаундейшн, так потом обнаруживал еще и подключенный бутстрапп, человек (в данном случае бэкендер) просто не хотел вникать фаундейшн, да и бутстрапп, он то немногим лучше знал)))
    Масштабирование и поддержка проектов лучше, как никак бустрапп стандарт де-факто, как и джикьюери. Про то что дизайн похож как один, ну так, а для того и есть препроцессоры)) Если изучить архитектуру фреймворка, то кастомизировать их можно до полной неузнаваемости.
    Не, ну конечно, можно забавы ради в разные проекты таскать разные компоненты или бойлепрлейты (вроде Skeleton можете посмотреть), только кто потом в них вникать будет?! Гораздо проще минимизировать один любимый фреймворк, а остальное дописать вручную.
    Кстати, про CSS? из личного опыта, после SCSS не могу себя заставить писать простой CSS, хоть убей)) К хорошему быстро привыкаешь.
    4) ...foundation?
    Отчасти выше затронул, вообще, она гораздо сложней того же Бустраппа. Кратко изложу почему, как то уже анализировал подробно:
    На первый взгляд как клавесин и рояль)) Фаундейшн, более гибкая, и более сложная, поэтому и исходники SCSS это что-то по сравнению с бутстраппом. Если же не вдаваться в препроцессорные архитектуры и возможности кастомизации, то они мало чем различаются, оба mobilefirst, ну только сетка в бутстраппе адаптивная(можно переопределить), а в фаундейшн отзывчивая. Ну из ключевых моментов, фанудейшн на rem, и это неисправимо, но исключительно в духе RWD и правильной типографики, в то время как бустрапп на пикселях. Если интересно почитайте по ссылке, там как раз курс по фаундейшн (сам не смотрел))).
    5) ...с обычной верстки на адаптивную?
    Вы в этом плане в выигрышном положении, особенно по сравнению с теми кто еще с таблиц начинал. Многие тогда и закостенели, так как RWD требует большей гибкости ума, и поменьше пикселов. Поищите на эту тему презентации (там просто херов мешок с ссылками и прочими, на видео он и половины не успевает осветить) и конфы (есть и на русском, например, или тут 3-е видео) Виталия Фридмана из Smashing Magazine, он выдает самые сливки по теме, также касаясь бэкэндерской стороны и плотно.
    6) ...задания, которые постепенно вводят в мир верстки
    Сверстайте Тостер)) Он кстати адаптивный ;)
    Ответ написан
  • CSS. Что интересного есть в вашем стандартном шаблоне?

    bukinion
    @bukinion
    web-developer ну и временами BA, UX, UI
    Начал бы с того, что подобные сниппеты идеально хранить, шарить и даже командно работать в Gist (от GitHub), у Gist, кстати есть приложение на Хром (работает и оффлайново, что плюс), он легко встраивается в Sublime, и даже есть в Web Storm. Воркфло изрядно ускоряется с этим.

    подсветка полей... в приведенных примерах для полноты не хватает select, кто-то забывает button)) Главное, что бы при переписывании нативного outline для :focus, для него находилась замена. Прежде всего потому что будет страдать accessibility.

    более полный перенос слов:
    @mixin word-wrap() {
          -ms-word-break: break-all;
          word-break: break-all;
          word-break:     break-word;
          -webkit-hyphens: auto;
          -moz-hyphens:    auto;
          hyphens:         auto;
    }


    последнее не просто ломает слова, в случае неумещающихся, а именно натуральный, браузером, перенос слов, необходимо только:

    <html lang="ru"></html>

    Добавить язык.

    Или наоборот в случае когда на необходима только одна строчка текста:

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    Вообще типографику люблю, поэтому есть и такое еще:

    .like-inline:after {
    	content: '\A';
    	white-space: pre;
    }


    Это на случай, если нам надо сделать перенос строки после каждого инлайнового элемента. Типовой пример, есть у нас список определений, а мы хотим после каждого, определения, делать разрыв, т.е. термин, что бы был с новой строки.

    dl
         dt Артикул
         dd 1729110 
         dt Рост
         dd 164


    Или нужно ряд ссылок оформить как список.

    Класс для инлайн-блоков (что-то их недоиспользуют, а они намного круче float):

    .ib {
         display: inline-block;
         vertical-align: top;
         zoom: 1;
         *display: inline;
    }
    Ответ написан
  • Где можно посмотреть примеры красиво-удобно оформленных больших таблиц с данными?

    bukinion
    @bukinion
    web-developer ну и временами BA, UX, UI
    Классный вопрос)))Сама задача типографическая, а ныне также и RWD-шная.
    Отличная гифка от vis0r вкратце показывает, что именно, и как делать.

    Если же по полочкам, да по ссылочкам, то.
    Прежде чем заниматься графдизайном таблиц, надо, если потребуется, переосмыслить их и привести информацию в понятному и простому виду: определить структуру информации, выбрать способ отображения, избавиться от всех повторов, есть много разных методов оптимизации таблиц — об этом лучше всех написано у Мильчина. Мильчин, — это советская школа еще, в универе по нему учили. Для вас конкретно: Глава 13. Таблицы и выводы. — Мильчин А., Чельцова Л. Справочник издателя и автора : редакционно-издательское оформление издания.

    Типографический аспект верстки можно посмотреть в 15 главе "Типографика. шрифт, верстка, дизайн", Феличи Джеймс, или что говорит "Новая типографика", Я. Чихольд:

    8d61eac53511465a82e76f27435e659d.PNG

    или "О Шрифте", Шпикерман:

    a4f4940a77cd403ba5a253cb1a09c886.PNG

    вот оформление таблиц от Эдварда Тафти:

    a062573f9d6747a5ae52c1c7125dfca3.PNG

    По дизайну и типографике таблиц, в вашем случае, можно попробовать оттолкнуться от Material Design. Там тоже интерактивные таблицы с чекбоксами рассмотрены.

    Еще стоит подумать об адаптивности таблиц: отправная точка, или посмотреть реализации в библиотеке паттернов Бреда Фроста, товарища в скафандре, автора подхода "Atomic Design".
    P.S.
    Только что наткнулся, на jQuery-плагин для таблиц: с адаптивностью! Плюс: сортировка, пагинация, настройка объема вывода строк и т.д.
    Ответ написан
  • На чем работать дизайнеру сайтов?

    bukinion
    @bukinion
    web-developer ну и временами BA, UX, UI
    По существу, если верстальщик граммотный, то все что ему нужно это макет со спецификацией (пдф и пнж), и выведенные отдельно ключевые элементы невоспроизводимые стилями, и поверьте их не так много осталось, тем более всегда есть полезные плагины для вывода: спецификаций, CSS-стилей и элемнтов.

    Вы правильно поставили вопрос, дело не в инструментах, а именно в организации воркфлоу. Иногда можно попинать верстальщика, особенно если знаете CSS.

    А программа хороша.
    Ответ написан