• Пример хорошего ТЗ/гайдлайна для вёрстки?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Основные требования: здесь
    Примеры стайл-гайдов: здесь

    1. Требования к вёрстке: здесь, здесь, здесь, здесь
    2. Как проверять качество вёрстки: здесь.
    3. Как определять стоимость (трудозатраты) вёрстки одной унифицированной страницы: здесь.
    4. Требования к дизайнеру: здесь и здесь.
    5. Пример документации (генератор шаблона, Helix3 для CMS Joomla!): здесь
    6. Готовые "скелеты" шаблонов HTML5 для начала вёрстки: простой (с поясняющими комментариями), www.initializr.com (ещё 3 простых) и максимально полный html5boilerplate.com.
    7. Вопросы на вакансию верстальщика (front-end developer): здесь

    Бонус по-теме: Turning Design Mockups Into Code With Deep Learning
    Ответ написан
    3 комментария
  • Тестирование верстки сайта в 4K без монитора 4K?

    xtala
    @xtala Автор вопроса
    Постигает Дзен
    Тривиального решения задачи нет. Ошибка многих начинающих (и меня тоже), то что физическое разрешение мониторов принимается за CSS разрешение.
    На самом деле как подсказал DevMan мониторы с ретина дисплеем в большинстве случаев работают как FullHD мониторы с соотношением x/2, где x
    физическая ширина монитора, в полном разрешение на таких мониторах работать в web затруднительно. Теперь ответы по существу:

    1. В связи с чем вопрос как провести тестирование верстки сайта в 4K без монитора 4K программными средствами?


    -- Отладчик бразуера Chrome. Открываем панель разработчика, включаем адаптивный вид, задаем дополнительный девайс
    класса desktop с размерами 1920 * 1080. Примерно так и будет выглядеть сайт на ретине дисплее с физическим разрешением 3840
    Так же хочу предупредить, что в режиме responsive, некоторые сайты отображаются неверно (Например Хабр полностью прилипает по краям, а в реальности как и Toster центрируется).
    Поэтому надо задавать именно через устройство, а не вбивать значения в режиме responsive.
    У этого способа есть фатальный недостаток, при таком разрешении сайт масштабируется в меньшую сторону,
    что не позволяет разглядеть мелкие детали, а если увеличить масштаб до 100% показывается только верхний левый угол сайта, но нельзя прокручивать его по сторонам,
    чтобы разглядеть во всех деталях. Поэтому этот способ подойдет только для обозрения сайта на больших разрешениях с "высоты птичьего полета".
    -- Отладчик брузера Firefox на удивление именно он наиболее корректно отображает сайты на таких разрешениях и в отличии от Chrome позволяет прокручивать их по сторонам, чтобы разглядеть все детали. Пожалуй этот способ самый приемлимый.
    -- Сайт ami.responsivedesign.is/# неплохой сервис, позволяет быстро сделать презентацию как выглядит сайт на разных устройствах, в том числе и на больших мониторах, но есть два недостатка:
    1) Большой монитор мака отображает сайт в CSS разрешении 1600*992, а не 1920 * x, наверное это связанно с тем, что последнее обновление сайта было в 2013 году.
    2) Некоторые сайты не грузятся (например Хабр), возможно это связанно с какими то скриптами
    -- Сайт quirktools.com/screenfly
    Тоже что и предыдущий пример. Немного удобней. Недостаток тот же. У меня отказался грузить некоторые сайты. Например хабр.
    Как плюс можно отметить расшаривание ссылки, что может пригодиться для обмена мнениями с удаленным разработчиком или заказчиком.
    -- https://www.browserstack.com
    Предоставляет даже реальные устройства в Live режиме(или эмулированные?). Недостаток один -- платный. Правда есть триал, во время триала позволяют пользоваться устройствами 30 минут и не всеми браузерами.

    2. Подойдет ли встроенный отладчик Chrome?


    Подойдет, но не совсем, см п1. лучше использовать Firefox.

    3.Сайт сверстанный на каноничном бутстрап выглядит как несчастная полоска в 1170 пикселей или viewport масштабирует сайт до читабельного размера?


    Отображается как на мониторе 1920 * X . Выглядит вполне прилично. Конечно, если бы такие мониторы использовались в реальном разрешении сайты на бутстрап в развернутом окне выглядели бы как танковая щель.

    4. Пользователем таких мониторов постоянно приходится масштабировать сайты?


    Нет.

    5. Может есть более удобный сервис тестирования верстки в больших разрешениях?


    Самые удобные сервисы перечисленый в п1. Сколько я ни старался удобнее не нашел.

    В заключение пара полезных статей по верстке в больших разрешениях:
    Рассуждения об адаптации верстки для больших экранов, статья старая, но актуальность не потеряла:
    https://web-standards.ru/articles/big-screens/

    Тренды экранов на текущий момент:
    https://www.openstat.com/counter:meta/trends/repor...

    Адаптируем графику под Retina экран
    https://habrahabr.ru/post/139682/
    Статья правда написана 5 лет назад непонятно насколько сейчас она актуальна.

    Оптимизация графики для Retina-экранов
    https://habrahabr.ru/post/150071/

    P.S. Отдельное спасибо DevMan за терпение.
    Ответ написан
    2 комментария
  • CSS em rem % вопросы по относительным еденицам - что лучше...и как?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ankhena W достаточно подробно все описала, но кое-что следует уточнить.

    1. Проценты и em это всё-таки разные единицы измерения. Для каких-то свойств они ведут себя одинаково (в частности font-size), для каких-то - по-разному. Например, при задании line-height процент высчитывается от размера шрифта текущего элемента, а em от размера шрифта родителя.

    2. То же самое. Зависит от свойства, к которому применяется.

    3. Можно использовать (и используют), но не всегда это нужно. Допустим, элемент small должен быть всегда меньше на 25% где бы он не находился. Чем писать правила на все случаи его появления в верстке, проще написать одно правило - font-size: 0.75em;

    4. Неточность у автора. body наследует не настройки браузера, а свойства рутового элемента html, который как раз и задается настройками браузера (по умолчанию).

    5. Отступы в em удобно задавать при описании типографики, но не блоков. Например, для заголовков, параграфов и т.п. Вообще, если описывать всю типографику относительными единицами, ее легко, буквально в пару правил, адаптировать под разные экраны.

    И по всему остальному: истины нет. Неожиданно, да? Тем не менее это похоже на правду. Всё зависит от конкретных обстоятельств. Где-то удобнее использовать одно, где-то другое. И прекрасно, что CSS дает нам такую возможность.
    Ответ написан
    2 комментария
  • Кто как адаптивно верстает 50% бэкграунды (слева одна картинка, справа другая)?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Я такие вещи делаю через after и before, я за чистоту кода в html.
    UPD1: Забыл добавить для .block { overflow-x: hidden; } , чтобы не было прокрутки.

    UPD2: При перестраивании на мобильную версию собственно ничего не уедет.

    UPD3: Адаптация https://jsfiddle.net/webirus/z5cbaq91/
    Всего 3 стиля переопределяешь и все.

    UPD4: Если блок с контентом должен быть как тут dohodnaya-kvartira.webflow.io , то в принципе ничего не меняется. Убираем .form, через after кидаем картинку на .wrapper и двигаем. А блоку .content добавляем z-index. И тогда контентный блок будет на всю ширину.
    Ответ написан
    4 комментария
  • Какие существуют альтернативы .Net технологий?

    @Sterk
    Программист
    Да даже в .net стеке тоже самое можно решить другими методами.
    • WinForms - WPF
    • WinService - self-hosted Web Server или просто Web решение для IIS, не понятно что предполагается под "выполняет различные фоновые операции"
    • WCF - WebApi, NancyFx
    • EF - dapper, NPoco, linq2db, nhibernate
    Ответ написан
    Комментировать
  • Какие теги принято прописывать в элементе head?

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    можно еще
    <meta name="theme-color" content="#ffffff">
    задает "бэкграунд" заголовка вкладки
    fa60a826e319454f9e70ccf64bc9f767.jpg
    Ответ написан
    Комментировать
  • Как определить все места в слове, в которых можно осуществить перенос части этого слова на другую строку, по правилам русского языка?

    @ERAFY Автор вопроса
    В общем у меня получился нижеприведенный класс, позволяющий расставлять знаки "тире" в местах переноса слов по правилам русского языка.
    Класс работает на основе алгоритма Христова, и написан на языке C#.

    Запускать на выполнение нижеприведенный код можно строкой:
    word = PasteDashes.SeparateWord(word);
    Возможно кому пригодиться в будущем.

    -------------------------------------------------------

    public static class PasteDashes
        {
            // Метод проверки, есть ли в строке гласные?
            private static bool isNotLastSep(string subStr)
            {
                string vowel = "аеёиоуыэюя";
    
                var b = false;
                for (var i = 0; i < subStr.Length; i++)
                {
                    if (vowel.IndexOf(subStr.Substring(i, 1)) != -1)
                    {
                        b = true;
                        break;
                    }
                }
                return b;
            }
    
    
            // Метод разбиения слова на слоги
            private static List<string> addSeparator(string tmpS, List<string> sepList)
            {
                sepList.Add(tmpS);
                //tmpS = "";
    
                return sepList;
            }
    
    
            // Метод убирания знаков тире после первой буквы и перед последней (если там есть знаки тире)
            private static string ConnectFirstAndLastLettersToSyllables(string word)
            {
                if (word[1] == '-')
                    word = word.Remove(1, 1);
    
                if (word[word.Length - 2] == '-')
                    word = word.Remove(word.Length - 2, 1);
    
                return word;
            }
    
    
    
            //Основной метод работающий по алгоритму Христова
            public static string SeparateWord(string word)
            {
                string vowel = "аеёиоуыэюя";
                string voiced = "бвгджзлмнрхцчшщ";
                string deaf = "кпстф";
                string brief = "й";
                string other = "ьъ";
                string consonant = "бвгджзйклмнпрстфхцчшщ";
    
                string letter, syllable = "";
                var syllables = new List<string>();
    
    
                for (var i = 0; i < word.Length; i++)
                {
                    letter = word.Substring(i, 1);
                    syllable += letter;
    
                    bool l;
                    if (word.Length != i + 1)
                    {
                        var k = word.Substring(i + 1, 1);
                        Regex rgx = new Regex("[А-Яа-я]");
                        l = rgx.IsMatch(k);
                    }
                    else
                        l = false;
    
    
                    if (l)
                    {
                        // Проверка на признаки конца слогов
                        // Если буква равна 'й' и она не первая и не последняя и это не последний слог
                        if (
                            (i != 0) &&
                            (i != word.Length - 1) &&
                            (brief.IndexOf(letter) != -1) &&
                            (isNotLastSep(word.Substring(i + 1)))
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            //continue;
                        }
    
                        // Если текущая гласная и следующая тоже гласная
                        // EDIT: этот блок необходим если задача - корректно разбить слово на фонетические слоги,
                        // и не нужен если задача - разбить слово на части, которые можно переносить
                        //if (
                        //    (i < word.Length - 1)
                        //    && (vowel.IndexOf(letter) != -1) &&
                        //    (vowel.IndexOf(word.Substring(i + 1, 1)) != -1)
                        //    )
                        //{
                        //    syllables = addSeparator(syllable, syllables);
                        //    syllable = "";
                        //    // continue;
                        //}
    
                        // Если текущая гласная, следующая согласная, а после неё гласная
                        if (
                            (i < word.Length - 2) &&
                            (vowel.IndexOf(letter) != -1) &&
                            (consonant.IndexOf(word.Substring(i + 1, 1)) != -1) &&
                            (vowel.IndexOf(word.Substring(i + 2, 1)) != -1)
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            // continue;
                        }
    
                        // Если текущая гласная, следующая глухая согласная, а после согласная и это не последний слог
                        if (
                            (i < word.Length - 2) &&
                            (vowel.IndexOf(letter) != -1) &&
                            (deaf.IndexOf(word.Substring(i + 1, 1)) != -1) &&
                            (consonant.IndexOf(word.Substring(i + 2, 1)) != -1) &&
                            (isNotLastSep(word.Substring(i + 1)))
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            // continue;
                        }
    
                        // Если текущая звонкая или шипящая согласная, перед ней гласная, следующая не гласная и не другая, и это не последний слог
                        if (
                            (i > 0) &&
                            (i < word.Length - 1) &&
                            (voiced.IndexOf(letter) != -1) &&
                            (vowel.IndexOf(word.Substring(i - 1, 1)) != -1) &&
                            (vowel.IndexOf(word.Substring(i + 1, 1)) == -1) &&
                            (other.IndexOf(word.Substring(i + 1, 1)) == -1) &&
                            (isNotLastSep(word.Substring(i + 1)))
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            // continue;
                        }
    
                        // Если текущая другая, а следующая не гласная если это первый слог
                        if (
                            (i < word.Length - 1) &&
                            (other.IndexOf(letter) != -1) &&
                            ((vowel.IndexOf(word.Substring(i + 1, 1)) == -1) ||
                            (isNotLastSep(word.Substring(0, i))))
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            //continue;
                        }
                    }
                }
                syllables = addSeparator(syllable, syllables);
    
                string finalWord = string.Join("-", syllables);
    
                finalWord = ConnectFirstAndLastLettersToSyllables(finalWord);
    
                return finalWord;
            }
        }
    Ответ написан
  • Десктопное приложение в Web приложение - что использовать?

    saboteur_kiev
    @saboteur_kiev
    software engineer
    Начните с того, что напишите подробное ТЗ по вашей системе без привязки к каким-либо технологиям и языкам, а с привязкой к бизнесу. Со схемами, скриншотами, разделениями на модули.

    Затем решите кто это будет делать, и какими технологиями он это предлагает решать.
    Ответ написан
    Комментировать
  • Как сверстать такой шаблон?

    IgorBee
    @IgorBee
    JS,VBS,3D.Web с 07.2015
    Готовый вариант
    Создаем блоки и меняем им наклон,а внутри прописываем display: inline-block и противоположную трансформацию для текста,чтобы он был ровным.

    transform: rotate(-45deg);
    ncgTFfe.png
    Ответ написан
    1 комментарий
  • Как сверстать такой шаблон?

    @GreatRash
    Ответ написан
    Комментировать
  • Как выполнить поиск изображений на компьютере по преобладающему цвету?

    @nirvimel
    Я писал нечто подобное на Python (не для поиска картинок на диске, а в качестве детали другой более комплексной задачи). Находить конкретный доминирующий цвет (один из более 16 миллионов) бессмысленно, так как на почти идентичном изображении может вообще не быть ни одного пиксела этого конкретного цвета. Возможно, в этом и состоит проблема Color Search.
    Я шел другим путем. У меня был примерно такой алгоритм:
    1. Построение трехмерной (в пространстве RGB) гистограммы.
    2. Аппроксимация этого распределения некоторой функцией (я брал гауссово распределение).
    3. При сравнении двух изображений сравниваются не цвета пикселов, а параметры, аппроксимирующей гистограмму, функции (для гауссова распределения - (мю, сигма) * 3 измерения == 6 параметров; для мю и сигма разные весовые коэффициенты при сравнении). Декартово расстояние в трехмерном пространстве RGB между значениями параметров для двух изображений и есть мера различия их цветовых гамм.
    Ответ написан
    Комментировать
  • Где взять такие иконки на сайт?

    @xreset
    iconfinder
    Ответ написан
    Комментировать
  • Где взять такие иконки на сайт?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Давно пользуюсь the noun project - очень хороший ресурс.
    Для бытовых иконок обычно просто лезу в шрифты FontAwesome и Google Material Icons Font
    Ответ написан
    Комментировать
  • Где взять такие иконки на сайт?

    @YouTy6bl4
    Либо нарисовать, либо использовать Font Awesome, Free Icon Pack, Fontelico
    Ответ написан
    Комментировать
  • Каким путем пойти в плане изучения js фреймворков?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Продолжайте в том же духе. Вы должны научиться видеть решение до того, как возьмётесь за реализацию. Фреймворки значения не имеют. Только грамотное структурирование данных поможет написать грамотное приложение.
    По моим наблюдениям общего вида - необходимо достаточно свободное манипулирование данными как на клиенте так и на сервере. И как правило достаточно трудно подобрать такую архитектуру, чтобы придуманная вами "конструкция" из связей и данных могла без сильных напрягов обрабатываться и на клиенте и на сервере. Всегда будут проблемы.
    Фрейморк ничто, грамотная структура - всё.
    Ответ написан
    Комментировать
  • Какие задачи вы дали были бы начинающему angular разработчику?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Да и какие задачи вы делали когда только начинали?


    Мне дали помниться в зубы ангуляр (1.0 еще), 2 недели на изучение оного и проект который надо сделать... и пришлось делать... было весело)

    В целом помимо "подтянуть перед этим JS", сейчас я бы еще рекомендовал babel.js, без него уже не представляю как можно писать поддерживаемый JS код (можно конечно но его банально больше). Так же вам нужна удобная система сборки - рекомендую webpack, так как с ним проще стартовать и он форсит вас использовать модули. Рекомендую вот этот скелет проекта. Ну и приятный побочный эффект, у вас ваши сервисы не будут напрямую знать что они используются в контексте ангуляра.

    Что до ангуляра - для начала я бы рекомендовал таки почитать документацию, angular styleguide и т.д. Хотя бы недельку. Так же рекомендую с ним использовать TDD (именно юнит тесты с моками всех зависимостей, если тесты писать тяжко - надо придумать как сделать так что бы было попроще, например мокать не http а сервис и т.д.), при обучении особенно хорошо. Очень упрощает поиск слабых мест вашей архитектуры приложения а так же позволяет проще его менять.

    Если вы примите для себя пару простых правил, аля "стараться реже использовать все со знаком доллара напрямую", типа $scope в контроллеры не пихать, вообще поменьше зависимостей от ангуляра для ваших сервисов, стараться не юзать link у директив (ну или делать там только то для чего он нужен - для связывания директивы и DOM, мониторинг атрибутов и вызов контроллера директивы и т.д.), то жить станет чуть проще. Тогда ангуляр сам по себе станет чуточку проще. Ну и да, вообще не использовать независимые контроллеры (ни ng-controller ни контроллеры для маршрутов ngRoute ни для uiRouter, вообще посмотрите в сторону angular/router)

    По задачам.... я бы рекомендовал побольше писать различных компонентов (директивки), которые могут вам понадобиться. Например, так как я по большей части делаю админки на ангуляре, то мне полезны различные UI компоненты, которые можно реюзать, например, фильтры для списков. Это хорошее упрожнение как по мне, так как... ваши компоненты ничего не должны знать о том, как у нас хранятся данные и что вообще мы с ними планируем делать. Там можно побаловаться и с трансклюдами, и с зависимостями между директивами и т.д.

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

    А потом реализовать какую-нибудь апу. А лучше вместе, пописали директивки, попробовали их заюзать. Неудобно - пилим дальше.
    Ответ написан
    Комментировать
  • А расскажeте про promise и $resource?

    AMar4enko
    @AMar4enko
    Основная идея ресурса в том, что объект, получаемый от сервера (одиночный либо список)
    будет являться "потомком" вашего объекта-ресурса.
    Т.е. можно делать так:
    var Person = $resource(...);
    Person.prototype.fullName = function() { return this.firstName + this.lastName; }
    
    Person.query().$promise
      .then(function(response) {
        return response[0].fullName(); // Прототипом каждого элемента в списке будет Person   
      });


    Промисы нужны для того, чтобы эффективно управлять потоком выполнения асинхронного кода.
    Ответ написан
    Комментировать
  • А расскажeте про promise и $resource?

    mudrick
    @mudrick
    Máximo progreso hemos alcanzado en minimo seso.
    Первое — чтобы преобразовать ангуларовский объект (в котором есть всякие одно- и двудолларовые параметры, все эти $xxx и $$xxx) в нормальный (т.н. raw json) нужно использовать стандартные ангуларовские методы из коробки:
    angular.fromJson(response)
    и
    angular.toJson(response)

    Просто поковыряйте эти функции и посмотрите, что они вернут.

    По поводу промисов. Когда вы вызываете какой-либо $resource-метод, например, .query(), то вам сразу же, моментально, возвращается объект с двумя параметрами — $promise и $resolved: false. После того, как ресурс получил данные, в ваш объект с двумя параметрами добавляется ещё куча данных (ну, json-данные, что вам вернул сервер), а параметр $resolved становится true.

    Так вот $promise нужен тогда, когда после загрузки данных вам нужно что-то сделать :) Ведь когда вы послали запрос, вы не знаете, когда придет ответ, а $promise знает и позволяет вам что-нибудь сделать именно после загрузки. Обращаться к промису нужно так:
    vm.data = dataService.getData().$promise.then(success, error);
    
    function success(resource) {
        // тут не данные в resource, а объект $resource с данными, тут можно почистить его через angular.fromJson и т.п.
    }

    Тут, после получения данных, ваш vm.data сразу же пополняется данными ответа (и вы там что-то выводите через ng-repeat — Ангулар там сам понимает, что выводить нужно только ваши данные, и не выводит еще два параметра $promise и $resolved, хотя они в объекте присутствуют, как вы уже в console.log вывели и убедились), а в функции success можно еще что-нибудь сделать.

    Можно так же сразу и не присваивать vm.data ничего, а сначала сделать какие-то действия в success и только потом присвоить, вот так:
    dataService.getData().$promise.then(success, error);
    
    function success(resource) {
        // тут не данные в resource, а объект $resource с данными, тут можно почистить его через angular.fromJson и т.п.
        // сначала что-нибудь делаем с полученными данными, а потом присваиваем их в скоуп
        vm.data = transformMyData(resource);
    }
    Ответ написан
    4 комментария