• Проблема с z-index?

    Zoxon
    @Zoxon
    Веб-разработчик
    Оберните контент блоком ему задайте меньший z-index, а попапу больший
    Кратко
    .lessons-item
    	position relative
    	
    	&__content
    		position relative
    		z-index 1
    		
    	&__popup
    		position absolute
    		z-index 2

    codepen.io/Zoxon/pen/xVxXNj
    Ответ написан
    2 комментария
  • Проблема с z-index?

    LazyTalent
    @LazyTalent
    Data Engineer, Freelancer
    Ответ написан
    Комментировать
  • Почему не работает package control в Sublime Text

    @nick1m
    Столкнулся с той же проблемой "There are no packages available for installation". Возможно кому пригодится.

    Boshnik Маленькая поправка не "В настройках брандмауэра", а в "свойства браузера", а то мне пришлось поискать :).

    Но, на данный момент эту проблему решили, сертификат обновили. Но не работало. Сначала оказалось, что лежал сайт (в конце ответа лежит решение позволяющее обойти и эту проблему), проверяем https://packagecontrol.io/channel_v3.json, но и после возобновления проблема не ушла.

    Добавляем в настройки плагинов для пользователя (Preferences > Package Settings > Package Control > Settings - User) каналы:
    "channels":
    [
    "https://packagecontrol.io/channel_v3.json",
    "https://web.archive.org/web/20160103232808/https://packagecontrol.io/channel_v3.json",
    "https://gist.githubusercontent.com/nick1m/660ed046a096dae0b0ab/raw/e6e9e23a0bb48b44537f61025fbc359f8d586eb4/channel_v3.json"
    ],

    Мою проблему это решило. Видимо channel_v3.json выдаёт сейчас не то, что должен. Решение временное, т.к. скорее всего в ближайшее время починят и в вебархиве данные могут устареть.

    UPD!!!: поправил код, у кого не работало - ссылка резалась тестером, сейчас в код обернул, спасибо Максим !

    UPD2: ещё раз исправил. Добавил свежую ссылку с вебархива от Максим , а так же скопировал на гист свежие данные от 04.01.2016 вторая ссылка, можно использовать по усмотрению. Не забываем о разделителях типа "запятая" :).

    PS: Кстати, ST удобно пользоваться гистом, я там и зарегался вчера только из-за любопытства :).
    Ответ написан
    14 комментариев
  • Как правильно верстать PSD-макет c шириной 1663px или Какими должны быть требования к макетам для дизайнеров?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Сверстать сайт с шириной в 1600 пикселей не проблема. Проблема сделать так, чтобы контент хорошо было видно на десктопах с более низкой шириной, аля 960-1300, имея всю ту же pixel-perfect верстку. Просить отдельный макет для мелких десктопов - мертвый номер, ибо почти никто не будет над таким париться. Делать примитивную резину для десктопа - выбор для тех, кого устраивает клепание говносайтиков. Ибо на сайтах с нормальным дизайном важно сохранение пропорций, 2015 год все таки.
    Я сейчас пилю фронт-енд для китайского интернет-магазина, у которого все десктоп макеты 1800px шириной. При этом им важно, чтобы на каком-нибудь ноутбуке с 1376x768 все выглядело так же, но при этом влезало. В итоге делаю все в rem юнитах. 1800 пикселей стартовая точка, где html, body {font-size: 125%;}, то есть 1rem = 20px (о том, почему не 62.5% для 1rem=10px, напишу ниже). Далее, через media-queries, снижаясь на каждые 10% от ширины, уменьшаю font-size на 10% (то есть на 12.5% в нашем случае). И так вплоть до 1.1к пикселей, то есть почти самого низкого десктопа. Заказчик в восторге, все выглядит ровно так как ему надо на всех разрешениях во всех браузерах (ему естественно не нужен убогий ie8).
    По поводу font-size: 125% - я изначально делал 62.5%, но при понижении до 40%- font-size (аля ~1300px) вебкитовские браузеры на MacOs начинали считать что такая величина шрифта слишком мала для юзера и сами по своей воле рандомно увеличивали габариты элементов. Увеличив весь font-size вдвое, проблема изчезла.
    Ответ написан
    7 комментариев
  • Какими бесплатными стоками вы пользуетесь для поиска иконок, фото и элементов интерфейса?

    dukenuk
    @dukenuk
    UI/UX designer, UI artist
    Большой выбор иконок, которые можно скачать бесплатно и вставить для примера в свой макет, а для релиза, когда идея ясна уже отрисовать свои.
    The Noun Project

    В моей копилке сайтов есть следующие ссылки:
    iconmonstr.com
    www.iconarchive.com - free icon stock search
    www.iconfinder.com - free icon stock search

    designmoo.com - stock web dribble ui free
    freepsdfiles.net
    365psd.com/
    365psd.ru/
    www.freebievectors.com
    www.flaticon.com - free icon
    www.freepik.com
    openclipart.org
    www.freedigitalphotos.net
    www.everystockphoto.com
    www.freephotosbank.com
    www.studio25.ro/EN
    www.photogen.com
    www.freejpg.com.ar
    www.turbophoto.com
    www.kavewall.com
    www.morguefile.com
    www.adigitaldreamer.com
    www.imagebase.net
    www.photorack.net
    qvectors.net
    www.vecteezy.com
    https://www.vectoropenstock.com/
    www.vectormadness.com
    www.vectorilla.com
    vector4free.com
    www.graphicsfuel.com
    www.greatvectors.com
    wowvectors.com
    www.vectorportal.com
    www.free-vectors.com
    www.allvectors.com
    www.logoinstant.com - logo
    shaboopie.com - logo
    imageafter.com - текстуры
    mayang.com/textures — с дневным лимитом
    free-textures.got3d.com — частично бесплатный
    newtek.com/freestuff — требуется регистрация

    Free Photo
    search.creativecommons.org — поисковик бесплатных фоток
    https://www.flickr.com/search/?q=paris&l=cc&ct
    https://500px.com/creativecommons
    photopin.com

    Little Visuals littlevisuals.co
    Unsplash unsplash.com
    Death to the Stock Photo join.deathtothestockphoto.com
    New Old Stock nos.twnsnd.co
    Superfamous (requires attribution) superfamous.com
    Picjumbo picjumbo.com
    The Pattern Library thepatternlibrary.com
    Gratisography www.gratisography.com
    Getrefe getrefe.tumblr.com
    IM Free (requires attribution) imcreator.com/free
    Jay Mantri jaymantri.com
    Public Domain Archive publicdomainarchive.com
    Magdeleine magdeleine.co
    Foodiesfeed foodiesfeed.com
    Picography picography.co
    Raumrot www.raumrot.com/10
    ISO Republic isorepublic.com
    www.gratisography.com
    stockphotos.io
    pickupimage.com — в основном, природа и города.
    www.rgbstock.com
    pixabay.com - free photo
    unsplash.com Unsplash
    www.picjumbo.com Picjumbo
    www.gratisography.com Gratisography
    www.superfamous.com Superfamous
    www.littlevisuals.co Little Visuals
    www.splitshire.com Split Shire
    www.pixabay.com Pixabay
    www.imcreator.com/free I’m Free
    www.nos.twnsnd.co New Old Stock
    wefunction.com/category/free-photos Function Free Photos
    pjrvs.com/a/photos Paul Jarvis Free Photos ]
    www.sxc.hu - hi-res free clipart photo
    www.photl.com - hi-res free clipart photo
    getty.edu - photo history
    www.firestock.ru
    www.photogen.com
    www.everystockphoto.com
    www.stockvault.net
    morguefile.com
    freerangestock.com
    www.dreamstime.com/free-photos
    picjumbo.com
    getrefe.tumblr.com
    pixabay.com
    join.deathtothestockphoto.com
    littlevisuals.co
    superfamous.com
    www.coolwebmasters.com/engine/go.php?url=aHR0c..
    compfight.com
    www.coolwebmasters.com/engine/go.php?url=aHR0c..
    www.imcreator.com/free
    nos.twnsnd.co
    photopin.com
    wefunction.com/category/free-photos
    pjrvs.com/a/photos
    allthefreestock.com — все бесплаьные стоки
    www.pexels.com
    ru.photl.com
    https://stocksnap.io/ — CC
    Ответ написан
    6 комментариев
  • Что такое 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 комментария
  • Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей?

    5angel
    @5angel
    Фронтенд-лид
    Давайте обратимся к данной публикации, чтобы понять примерные тренды, потому что наиболее выгодный вариант – это все же фронтендер.

    Вкратце, полноценный клиентский разработчик должен знать:
    – html5/css3 + bootstrap
    – один-два препроцессора (less/stylus)
    – чистый js и пару-тройку клиентских библиотек или фреймворков (knockout/backbone/angular/react)
    – немного node.js, чтобы уметь пользоваться пакетным менеджером (npm) и билд-менеджером (gulp/grunt)

    Этот список покрывает большинство клиентских задач в средней студии или стартапе.

    В реальности, от разработчика требуется только одно – уметь быстро накостылять какую-нибудь фичу к релизу, который должен был быть вчера. Собственно, если внимательно посмотреть на список, который я привел, можно заметить, что все эти вещи направлены на максимально быструю разработку – тут костыль, там костыль – и в продакшн. Как бы ни пытались нагнать пафоса на собеседовании, в бою будет именно так.

    Другой вопрос – что со всем этим делать.

    Я обычно предлагаю попытаться начать свой маленький проект. Какой-нибудь простенький личный сайт, игру на js (тот же flappy bird или 1048 – много ума здесь не нужно). Посложнее – свою тему или библиотечку. Это будет хорошим практическим опытом, который не стыдно описать в резюме.

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

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

    А вот попытка спихнуть на верстальщика UI/UX – это уже экономия со стороны отдельных контор, которые по какой-то причине не хотят нанимать отдельного дизайнера/проектировщика в штат или по контракту. Тут, к сожалению, придется мириться и смотреть статьи по теме – тот же GoodUI.
    Ответ написан
    10 комментариев