• Как организовать асинхронную загрузку экрана захвата и остальной страницы?

    @AntowaKartowa
    Мне кажется если попап всегда встречает посетителей, то имеет смысл его добавить сразу в базовую верстку и его стили в базовый цсс, а джаваскрипт чтоб уже после загрузки подхватывал, делал кнопку в попапе активной, вешал обработчик и тд.

    Если бы это был логин попап, то контент на фоне я б сразу не рендерил. Есть куча умников умеющих в девтулс удалить попап и смотреть контент. Если контент подгружается джаваскриптом, то загружаете в фоне сохраняете в переменную, но не рендерите пока пользователь не кликнет на кнопку в попапе.

    Оно не должно мешать загрузке остальной страницы и ее скриптов.

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

    Другое дело джаваскрипт. Его загрузка и выполнение блокируют обработку и рендеринг страницы. Потому рекомендуется объявление джаваскрипта размещать или в самом низу страницы - начнет загрузку скрипта после загрузки страницы. Но кажется это не всегда гарантирует хороший результат.

    Лучше добавить в теги скрипт атрибуты async или defer. Первый не блокирует рендеринг страницы, но начинает свое исполнение сразу как только загружен. Это потенциально может привести к проблемам. Например попап еще не отрендерен, а скрипт уже начал выполнение и не нашел в разметке попапа, не смог повесить обработчики событий и все нерабочий попап получится. Из-за этого же этот атрибут не гарантирует, что скрипты будут выполнятся в том порядке в котором объявлены. Опять же одни скрипты могут зависить от других и это может привести к неработающему функционалу.

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

    Вообще есть бесплатный курс по оптимизации загрузки страницы от гугла. https://www.udacity.com/course/website-performance...

    Кажется я в итоге не на ваш вопрос ответил.
    Ответ написан
    1 комментарий
  • В чем вести проекты?

    Sanes
    @Sanes
    но нет плана

    Начните с карандаша и бумаги.
    Ответ написан
    4 комментария
  • Есть ли хорошие слайдеры без jqery?

    ewgenio
    @ewgenio
    Всё по чуть чуть
    Ответ написан
    Комментировать
  • Нестандартные HTML тэги?

    @GreatRash
    Поисковики этот тег увидят без проблем, ибо HTML - всего-лишь подмножество SGML. Но никакой семантической нагрузки такие теги нести не будут. Короче поисковый робот увидит их как <div>
    Ответ написан
    Комментировать
  • Как сделать на slick, чтобы 2 центральных слайдера были отличными от остальных?

    Krasnodar_etc
    @Krasnodar_etc
    fundraiseup
    CSS
    Если в настройках 4 активных слайда, то :
    .slick-active:nth-child(2),
    .slick-active:nth-child(3) {
      //style...
    }
    Ответ написан
    2 комментария
  • 16 лет. Идти во фриланс или начинать junior'ом в конторе?

    @huwesu
    Работать сейчас самостоятельно во фриленсе = возьмут легко, быстрые деньги, хорошие деньги для молодого. Но упираешься в росте квалификации в тупик через очень скоро. Рост квалификации крайне медленный. И будет всю жизнь до смерти "джуниором". Я сталкивался с такими людьми - им по 30 лет уже, во фриленсе по 10 лет, а до сих пор способны делать только то, что у меня умеют джуны с двухлетним опытом.

    Работать сейчас на фирму = возьмут с трудом, с деньгами намного хуже. Но быстро подтянут в квалификации на очень хороший уровень. Потолка квалификации не будет. Только важно!!!! - нужно выбирать сильную фирму с квалифицированными коллегами и работой В ОФИСЕ, очно, а не на удаленке и не мелкую хренофирмочку со слабыми спецами. Потом можно и на фриленс свалить.

    Вариант - пойти во фриленс немного, а потом в фирму - теоретически, возможен. Но на практике не проканает. Ибо порядок денег совсем другой. И вы просто не сможете после фриленса умерить свои финансовые аппетиты настолько чтобы пойти в фирму. Понравится тратить хорошие деньги. Даже если головой будете понимать, что годами занимаетесь примитивнейшей работой и не растете....
    Ответ написан
    1 комментарий
  • Как вы организуете свою работу?

    @Free_ze
    Пишу комментарии в комментарии, а не в ответы
    То, что делается больше 5 раз и занимает больше двух минут должно быть заскриптовано. То есть всякие бэкапы, апдейты, деплои, миграции, поиск самых смешных котиков и прочие важные в работе вещи можно и нужно автоматизировать. Тем более, что в виндах теперь есть нормальный bash

    ЗЫ Перед тем, как хвататься за Evernote, я бы посоветовал посмотреть, как оттуда можно извлекать свои заметки (экспорт, при необходимости уйти в какой-нибудь другой сервис). Это не так просто. Это касается любого SaaS, который вы планируете использовать в качестве базы знаний.
    Ответ написан
    10 комментариев
  • Как вы организуете свою работу?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Про GitHub.

    1) Любой проект, даже самый маленький начинаю в новом репозитории. Потому что:
    - мало ли что из него вырастет,
    - код в Гитхабе это бэкап, не засерается место в Дропбоксе или других облаках,
    - мгновенный поиск по коду в репозитории, актуально когда проект уже достаточно большой,
    - легче спросить совета у коллег или показать проблему, когда исходники можно посмотреть онлайн,
    - проект удобно хоронить, если он заглох, или закинуть в портфолио, если он клевый.

    2) Создал себе на Гитхабе две дополнительные организации внутри своего аккаунта.
    - «paulradzkov-forks» — для форков чужих проектов.
    - «paulradzkov-heaven» — кладбище для старых проектов, куда перемещаются все неактуальные проекты.
    Эти две дополнительные организации позволяют очистить основной аккаунт от мусора. В нем теперь только несколько актуальных проектов, в которых легко ориентироваться.

    3) Перемещаю все старые проекты из Дропбокса на Гитхаб в «paulradzkov-heaven». Проектов много, это долго, но освободилось уже несколько гигов (т.к. там кроме кода psd-исходники, архивы с инсталляторами и прочее). Место в облаках заканчивается, а на Гитхабе — резиновое.
    Это кладбище уже пригодилось, когда у меня попросили поискать исходники проекта, над которым я работал 3 или 4 года назад, а я через минуту ответил им ссылкой на нужный репозиторий. Не пришлось никуда лезть, распаковывать, искать, запаковывать, отправлять почтой или закачивать в облако.
    Повторюсь, что на Гитхабе классный поиск по исходникам: если нужно посмотреть, как что-то сделал в старом проекте, но не помнишь в каком — можно довольно быстро найти искомое без возни с архивами.

    Итого.
    Код должен лежать на Гитхабе.
    В том числе старые проекты.
    Используйте организации, чтобы рассортировать проекты, если их много.
    Порядок там, где у каждой вещи есть своё место. Придумайте себе правила порядка заранее и соблюдайте их, чтобы не тратить время на ликвидацию беспорядка.
    Ответ написан
    10 комментариев
  • Как изменить стиль сайдбара в Sublime Text?

    lazalu68
    @lazalu68
    Salmon
    Нажмите на Preferences -> Browse packages, попадете в папку Packages. В ней вам надо зайти в папку Theme - Default и найти файлик Default.sublime-theme. В этом файлике вам нужно править объекты у которых поле class соответствует маске sidebar_*

    Например так:
    ...
    {
        "class": "sidebar_container",
        // $base02:    #073642         
        "layer0.tint": [7,54,66],
        "layer0.opacity": 1.0,
        "layer0.draw_center": false,
        "layer0.inner_margin": [0, 0, 1, 0],
        "content_margin": [0, 0, 1, 0]
    },
    {
        "class": "sidebar_tree",
        "row_padding": [8, 3],
        "indent": 12,
        "indent_offset": 17,
        "indent_top_level": false,
        // $base2:     #eee8d5         
        "layer0.tint": [238,232,213],
        "layer0.opacity": 1.0,
        "dark_content": false
    },
    {
        "class": "sidebar_heading",
        // $base1:     #93a1a1         
        "color": [147,161,161],
        "font.bold": true,
        // $base3:     #fdf6e3         
        "shadow_color": [253,246,227],
        "shadow_offset": [0, 1]
    },
    {
        "class": "sidebar_heading",
        "parents":
        [
            { "class": "tree_row", "attributes": ["selected"] }
        ],
    
        "shadow_color": [160, 174, 192]
    },
    {
        "class": "sidebar_label",
        // $base01:    #586e75         
        "color": [88,110,117],
        "font.bold": false
        // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
    },
    {
        "class": "sidebar_label",
        "parents": [{"class": "tree_row", "attributes": ["selected"]}],
        // $base01:    #586e75         
        "color": [88,110,117]
        // , "shadow_color": [60, 60, 60], "shadow_offset": [0, 1]
    },
    
    {
        "class": "sidebar_label",
        "parents": [{"class": "tree_row", "attributes": ["expandable"]}],
        "settings": ["bold_folder_labels"],
        "font.bold": true
    }
    ...


    Только этот код не добявляйте, это код для светлого сайдбара xD

    Гляньте этот или этот

    Ах да, вы же хотите еще чтоб он вам тип файлика показывал)

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

    Вот тут целая куча иконок для саблайма, и все они там очень похожи на те, что вы заскринили. Я даже думаю, что это именно те. Инструкция по установке там же.

    Вся моя писанина, кажется, не имела смысла - парень ниже дал ссылку на тему, которая по дефолту юзает иконки из вашего скрина)

    Кажется по дефолту только третий саблайм умеет юзать иконки, так что если у вас на втором саблайме их нет, то просто поставьте Sublime Text 3 и накатите на него эту тему . После установки темы может показаться что вам подсунули фальшивку и это гавно (которое вы поставили) следует срочно удалить. Я не знаю, зачем разработчик темы сделал это, но с самого начала она выглядит... немного странно. Инструкция как сделать из этой темы то, что вы видите на скринах, лежит там же, на гите.
    Ответ написан
  • Как сделать страницу как эта?

    AndrewHaze
    @AndrewHaze
    Умею гуглить яндексом
    html, body {
        width: 100%;
        height: 100%;
    }
    html {
        background: url(../img/background2.jpg) no-repeat center center fixed;
        background-size: auto auto;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    Ответ написан
    2 комментария
  • Как разрешить с планшета и смартфонов зумить пальцами изображение?

    @Sashjkeee Куратор тега CSS
    f-e
    Ответ написан
    Комментировать
  • Cтоит ли учить flex? препроцессоры LESS/SASS?

    lukoie
    @lukoie
    Да!
    Ответ написан
    Комментировать
  • Верстка Pixel Perfect?

    zooks
    @zooks
    Frontend
    Расхождение в полпикселя нормально. Если пишешь отрицательные маргины, значит в верстке уже что-то не так.
    Также обрати внимание, что для Pixel Perfect макет должен быть подготовлен идеально (каждый отступ и размер шрифта логически обоснован).
    Ответ написан
    1 комментарий
  • Какую книгу по JavaScript выбрать для начинающего?

    "Изучаем программирование на JavaScript", от O'Reilly (Head First JavaScript Programming).
    Ответ написан
    Комментировать
  • При скроллинге двигается картинка. Что за эффект?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    parallax
    остальное нагуглишь
    Ответ написан
    1 комментарий
  • Как и где можно научиться делать такие сайты?

    webinar
    @webinar Куратор тега Веб-разработка
    Учим yii: https://youtu.be/-WRMlGHLgRg
    Задумывая дизайн новичок исходит из своих возможностей. У профи возможности ограничены только фантазией. Так что эти сайты сделаны на опыте и креативном мышлении, а так же большом количестве знаний. Хотите научится нет проблем - надо учить все что попадается под руку. Начать надо с отличных знаний html, css, javascript, canvas, svg, а дальше сами начнете понимать что еще надо.
    Ответ написан
    Комментировать
  • Как отобразить отдельный элемент вне блока с overflow: hidden?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Никак. С тем, что ты показываешь.

    Если только без relative.
    https://jsfiddle.net/webirus/kcbwafc5/
    Ответ написан
    Комментировать
  • Как вы задаете идентификаторы для внутренних станиц, если макет пишется под ЦМС?

    SkiperX
    @SkiperX Куратор тега CSS
    cms собирает страницу из блоков по отдельности
    а что если понадобится собрать другую страницу на основе вашей верстки?
    вложенность это вообще плохо, поведение блока в зависимости от обертки - тоже.
    Ответ написан
    2 комментария
  • Как вы задаете идентификаторы для внутренних станиц, если макет пишется под ЦМС?

    БЭМ, модификаторы, вот это вот всё
    Ответ написан
    Комментировать