Ответы пользователя по тегу Веб-разработка
  • Где и как можно проверить сайт и получить рекомендации куда двигаться дальше?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Про SEO уже сказали, добавлю про юзабилити и общее впечатление:

    1. Отсутствует информация о всех товарах. Если есть категория в каталоге - она должна что-то содержать. Чем больше ассортимент - тем лучше. А пустующие категории, как и пустющие прилавки в обычном магазине - настораживают.
    Решение проблемы: заполнить сайт контентом. В том числе на всех второстепенных страницах.

    2. А как собственно купить? Ни кнопок "купить", ни информации об оплате и доставке. Это как автомат с газировкой без дырки для денег.
    Решение проблемы: добавить инструкцию как купить. Как минимум напишите, куда позвонить/написать, чтобы заказать какой-то товар, куда вы доставляете, в какие сроки и.т.д. Чем подробнее - тем лучше. Кнопка "купить" у товаров тоже желательна. Даже если она будет вести на страницу "как заказать". Это не полноценная корзина, но лучше, чем ничего.

    3. Тексты на цветных фонах сложно читать. Это даже не дизайнеру заметно. Сложно читать = я не буду это читать.
    Решение проблемы: Уменьшить яркость фонов под текстом (которые с разноцветным паттерном), добавить небольшие темные тени светлому тексту и светлые темному для заголовков на фоне фотографий.

    4. Прелоадер реально бесит. Я серьезно. На этом сайте нет ничего такого, что можно было бы так долго грузить. В современном мире все куда-то спешат, если ваш сайт ничего не показывает по 10 секунд, а соседний показывает что-то сразу - у вас проблемы (особенно, если вы не владеете заметной долей рынка или не предоставляете товар, не имеющий аналогов).
    Решение проблемы: убрать прелоадер. Почитать про оптимизацию скорости загрузки. Как минимум необходимо убрать фон, который весит больше 5MB, картинки можно немного сжать и законвертить в progressive-jpeg, скрипты и стили вниз страницы, наверху вставить critical css (на тостере уже спрашивали про все это - почитайте).
    Ответ написан
    1 комментарий
  • Как не применять html при отключенном JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Как не показывать прелоадер если у человека выключен JS?

    Можно посмотреть на вопрос с обратной стороны и показывать ваш прелоадер с помощью JS. Там, где нет JS - не будет и прелоадера.
    Ответ написан
    Комментировать
  • Какие цели вы преследуете при создании мини/пет-проектов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Какие цели вы преследуете при создании мини/пет-проектов?

    • Попробовать инструмент, который хочется попробовать, но не стоит тащить в основной проект, или спроектировать что-то относительно крупное самостоятельно, что очень полезно для начинающих.
    • Создать какой-то источник дохода из этого проекта в отдаленой перспективе.
    • Just for fun. Иногда можно сделать что-то совсем небольшое, что еще никто не делал, просто чтобы посмотреть, что из этого получится. Например я недавно пытался адаптировать уже существующую верстку одного из проектов для отображения в очках виртуальной реальности. Просто было интересно посмотреть, можно ли это сделать. Первую часть эксперимента описал в статье.
    Ответ написан
    Комментировать
  • Можно ли (используют ли) один и тот же код (к примеру Angular или Vue) как для Веб, так и для Мобильных приложений?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Про Ionic для Angular уже сказали. Для Vue есть Weex. Позволяет собрать приложение под Android и под iOS. Я пробовал делать с ним небольшое приложение под ведроид. Могу выделить плюсы, которые увидел (возможно, что в большом проекте что-то будет по-другому):
    - Vue из коробки, простой и понятный инструмент, что приятно
    - Не тормозит
    - Большая часть кода спокойно переносится из веб-версии без изменений
    И минусы:
    - Стартовать проект без знаний Java довольно непросто (ошибку при первой сборке искал часа три)
    - Небольшое комьюнити, мало информации, на StackOverflow практически нет вопросов по теме

    Для себя сделал вывод, что не стоит использовать Weex в ближайшее время в крупном бизнесе (есть риск провалить все сроки из-за нехватки информации), но для своих небольших приложений попробовать вполне можно, особенно если вам нравится Vue. Думаю стоит присматривать за развитием этого проекта - может быть через пол года/год его уже можно будет спокойно использовать.
    Ответ написан
    7 комментариев
  • Какой выбрать дистрибутив linux для веб разработки?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На вид мне понравилась elementary os

    Ну так и возьмите Elementary OS. Это и правда симпатичная и довольно стабильная система, а под капотом - та же самая Ubuntu, так что любой вопрос будет легко гуглиться, как тут все и говорят.
    Ответ написан
    3 комментария
  • Как подогнать psd для верстки?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Шаблон сделан на разрешение 3360х12078. Можно ли как нибудь изменить это разрешение до необходимого 1920х1014?

    А почему вы решили, что там должно быть 1920? Не глядя кажется, что он в ширину не 1920 должен быть, а 3360/2=1680. А сделан в два раза больше только ради картинок для ретины. В чем проблема при верстке все размеры делать в 2 раза меньше? Тем более, что если макет нормальный, то многообразия размеров там не будет. Но если вы все же хотите поменять разрешение - вам нужно скачать полноценный фотошоп и поменять его там, assets не для этого предназначен.
    Ответ написан
    Комментировать
  • Как законно можно использовать купленный шаблон сайта?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На Envato Elements хочу купить шаблон BOOKRA. Подскажите как законно использовать купленный шаблон?


    Там есть два варианта:
    - За $17: Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
    - За $850: Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.

    1. Сколько коммерческих сайтов могу создать на одном купленном шаблоне один или сколько угодно?

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

    2. Картинки шрифты и пр. в шаблоне будут тоже моими? могу я их использовать для другого сайта?

    В данной ситуации шрифты с google fonts + font awesome. Вы можете их использовать как вам угодно. Картинки не прилагаются (Images used in the Preview demo are not included in the downloaded package). В ситуации в вакууме - смотрите лицензию.

    3. Можно убрать все упоминания автора шаблона или где-то нужно оставлять?

    В данной ситуации вроде бы не нужно упоминать автора (но может я что-то пропустил, почитайте все, что там есть, еще раз).

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

    Да. Но можно докупить поддержку шаблона у автора (опционально).
    Ответ написан
    1 комментарий
  • Какой порядок обучения веб-верстке вы посоветуете?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

    HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
    CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
    JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
    Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
    Git, NPM: без комментариев

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

    Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

    Ну и умение задавать вопросы тоже лишним не будет.
    Ответ написан
    Комментировать
  • Как перестроить дерево в Media запросах?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если я вас правильно понял, то SASS тут не при чем. Почитайте про специфичность селекторов в CSS (это легко гуглится). В крайнем случае можно было бы использовать !important в вашей ситуации, но это только в том случае, если вы понимаете то, зачем вы это делаете, и есть какая-то система его использования во всем проекте.

    Но разумнее будет использовать методологии вроде популярного БЭМ или не очень популярного RSCSS. Это будет гораздо лучшим решением по сравнению с попыткой одну бяку закостылить другой.
    Ответ написан
    Комментировать
  • Есть ли аналог autoreload для chrome?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Я бы посмотрел на Browsersync. Это не расширение для браузера, скорее мини-сервер, который запускается одной командой и очень хорошо справляется с задачами слежения за указанными файлами и обновлением страниц в браузерах, и, разумеется, легко интегрируется в популярные системы сборки.
    Ответ написан
    Комментировать
  • Где можно практиковаться верстать?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Ответ написан
    Комментировать
  • Какие есть сайты с практикой(для новичка)?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Какие есть сайты для новичков с практикой?

    Тостер. Каждый день по темам, связанным с веб-разработкой задаются десятки вопросов, в которых описываются реальные задачи и проблемы, которые у кого-то возникли (в основном вопросы идут как раз от новичков). Можно просто наблюдать, читать ответы от более опытных разработчиков, разбирать их решения, ходить по ссылкам, которые они дают и изучать материалы там. А можно и самому пытаться отвечать по тем темам, в которых уже разобрались, приводить ссылки, делать работающие демки-иллюстрации, как-то аргументировать свое решение, а не просто копипастить. Это один из самых эффективных способов обучения.

    А если например простые psd макеты?Где их можно найти?

    Для начала можете сходить на psdrepo.com, там много красивых макетов.
    Ответ написан
    1 комментарий
  • Как правильно использовать в html единицу измерения em?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вы задаете :root значение размера шрифта (кстати познакомьтесь с вот этой идеей - сам пользуюсь постоянно, замечательная вещь). По умолчанию обычно размер шрифта для :root в браузерах равен 16px. Задавать для :root размер шрифта в rem/em бессмысленно - это как масло масляное.

    1rem (1 root em) будет равен тому размеру шрифта, который задан для :root и будет одинаковым для всех элементов на странице. Если вы вложите кучу элементов с font-size: 1.1rem друг в друга, то все они будут иметь один и тот же размер шрифта.

    1em у каждого элемента будет свой, равный размеру шрифта родительского элемента. Если вы вложите кучу элементов с font-size: 1.1em друг в друга, то каждый следующий будет иметь размер шрифта больше, чем предыдущий.

    ---

    Сам я стараюсь все, что можно, делать в rem (включая все размеры на странице, отступы, border-radius, брейкпоинты и.т.д.) в сочетании с адаптивной типографикой из вышеприведенной статьи, а единицу em использую очень редко. А размеры в пикселях - вообще редкость, только если 1-2px в местах, где округление может сломаться. Такой подход не является общепринятым, но может быть очень удобным, я его описывал в статье на хабре. Демка там получилась так себе, но с тех пор идея обкаталась и успешно применяется.
    Ответ написан
    1 комментарий
  • Как сделать это в методологии rscss?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ну вообще-то можно не только дочерний - rscss.io/css-structure.html#avoid-over-nesting, но если вы хотите избежать такой вложенности в CSS, то можно просто сделать ссылку с оберткой отдельным компонентом, как-нибудь так:
    nav.main-navigation
        ul.links-list
            li.wrapped-link: a.link(href='') Link
            li.wrapped-link: a.link(href='') Link
            li.wrapped-link: a.link(href='') Link
            li.wrapped-link: a.link(href='') Link
            li.wrapped-link: a.link(href='') Link


    .main-navigation {
        // ...
    }
    
    .links-list {
        display: flex;
        justify-content: center;
        margin: 0;
        padding-left: 0;
        list-style-type: none;
    }
    
    
    .wrapped-link {
        flex-basis: 20%;
    	
        > .link {
            display: block;
            padding: 15px;
            text-align: center;
            text-decoration: none;
    		
            &:hover,
            &:focus {
                text-decoration: none;
                background-color: #333;
            }
        }
    }
    Ответ написан
    5 комментариев
  • Подключение шрифтов на сайт и форматы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Достаточно ли этого для кроссбраузерности?

    Ну так можно посмотреть:
    caniuse.com/#search=woff (спойлер: IE9+ и все нормальные браузеры)
    caniuse.com/#search=eot (спойлер: решение для IE6-9)

    Определитесь с вашими критериями кроссбраузерности и сделайте вывод сами.
    Ответ написан
    Комментировать
  • Микроразметка сайта недвижимости?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Не видя самого сайта сложно угадать что там есть, и что нужно размечать. Расскажу как по идее должно быть, а вы там уже примените это к своим реалиям.

    Есть (по идее) две категории сущностей - сама организация, которая каталог предоставляет, и собственно предложения о продаже. Если выражаться в терминах schema.org, то первая сущность относится к Thing > Organization. У нее есть address, description, email, могут быть events, foundingDate, location, logo, telephone, image... и еще много всего, что эту организацию описывает. Сами предложения о продаже недвижимости более всего подходят к Thing > Intangible > Offer, а у оффера могут быть availability, availabilityEnds, availabilityStarts, category, offeredBy, price, priceCurrency, priceValidUntil, review, description, image и еще куча всего. Так что открывайте свой сайт, открывайте документацию, и прям по списку смотрите, какие свойства соответствующих сущностей есть у вас на страницах.
    Ответ написан
    Комментировать
  • Как сделать rss на сайте без движка?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Нуждаемся в rss ленте, но у сайта нету движка. Т.е. html+css+js...на сайте ежедневно создаются записи/страницы:)

    Мсье знает толк в извращениях... Быть может стоит хотя бы какой-нибудь jekyll прикрутить? Заодно и лента будет сама генерироваться.
    Ответ написан
    Комментировать
  • Как сделать эту крутую штуку на CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На чистом CSS такое сделать не получится. Проще всего использовать волну (верхнюю ее часть) в виде SVG картинки (пример). Надеюсь проблем с тем, чтобы нарисовать ее одной кривой, не возникнет.
    Ответ написан
    2 комментария
  • Как решить проблему валидатора?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    У вас два раза повторяется
    <meta name="description" content="" />
    Валидатор вам и говорит, что нельзя делать более одного meta description.
    Ответ написан
    1 комментарий