Ответы пользователя по тегу Веб-разработка
  • Как писать много кода, оставляя его простым, как в начале?

    @dmz9
    не знаю зачем тут пацаны советуют чистый код Р. Мартина
    https://www.ozon.ru/context/detail/id/5011068/
    вот что нужно на замену
    https://www.ozon.ru/context/detail/id/138437220/
    есть обе у меня, но красненькую купил раньше. в ней больше информации как внешне так и по сути.

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

    во многих конвенциях о code-style указываются очень грамотные вещи, и они не просто так там находятся. в общем смысл такой - код должен быть самодокументируемым/самоописательным, а комментарии к коду не должны быть в стиле "моё почтение, капитан!".
    • код должен напоминать хорошую прозу.
    • комменты описывают намерение (зачем?) а не реализацию (как?).
    • прими во внимание время жизни переменной. чем ближе переменная к "месту военных действий" тем лучше. перекликается со временем жизни переменной - чем быстрей "умирает" тем лучше, часто можно даже без переменной обойтись не в убыток читаемости.
    • люди советуют тут ограничиваться конкретным числом строк. имхо - вредный совет. метод не должен ограничиваться. метод должен быть такой длины, которая требуется. иногда без "супер-методов" не обойтись (это не о функциях на 100500 входящих параметров), невозможно просто разбить тяжелую функцию на более мелкие куски, не умножив число запоминаемых переменных/других методов. метод может быть в 3 строки, может быть даже в одну, а может быть в сто-двести строк и более. если из метода ничего нельзя выбросить и нечего добавить - значит он в точности занимает столько сколько нужно.
    • многословие приветствуется но без фанатизма. машине почти всё-равно какой длины у тебя функция (если вы понимаете о чем я), а для тех кому нет - есть минификаторы (для js например)
    • название метода должно однозначно говорить о его назначении. спрашивай себя - зачем этот метод? зачем это свойство? если ты не можешь ответить значит и запомнить/вспомнить не сможешь, значит у метода/свойства нет конкретного предназначения и потом (через какое то время) будет сложно разобраться для чего он вообще нужен.
    • визуально отделяй приватные/публичные методы. это тоже некоторая подсказка которая помогает разбираться в коде.
    • следуй одному стилю как минимум в отдельно-взятом файле. (кемелкейс отдельно, лодаш отдельно).
    • следуй принципу наименьшего удивления (программиста). т.е. поменьше роялей в кустах
    • соблюдай абстракции. если класс это не просто набор статичных методов - значит он описывает какие то действия вполне определенного объекта. не раздувай и не разбивай на несколько классов одну цельную и четкую абстракцию. это поможет сосредоточиться на отдельном куске кода в один момент.
    • старайся не писать рядом в одном классе методы, которые "проникают" во все аспекты приложения (антипаттерн - суперкласс/божественный объект).


    вообще стоит почитать про паттерны и антипатеррны, это конечно не библия но знать хотя бы основные стоит.
    Ответ написан
    2 комментария
  • Про transform: rotate(). Как правильно крутить?

    @dmz9
    1. лучше сделать добавление-удаление класса, вместо накручивания инлайн-стилей.
    в цсс проще пихать вендорные префиксы. а у элемента будет меняться класс, добавляющий ему вращение через цсс.
    2. https://github.com/Modernizr/Modernizr/wiki/HTML5-... -> imsky.github.io/cssFx
    полифилл это скрипт поддержки (js) который поможет тем браузерам где нет реализации каких то вещей.
    3. если нужны кастомные повороты то тут вот что
    3.1 теоретически через несколько тысячелетий появится поддержка attr() внутри любого цсс свойства. пока что поддерживается только content: attr(какой-то-атрибут), т.е. псевдоэлемент. вобщем, когда то можно будет заюзать что то вроде
    <div ang="10"></div>
    div{
      transform:rotate(attr(ang, deg));
    }

    но пока увы это не работает. скрипт менял бы только атрибут ang и все.
    3.2 раз уж там что то у тебя похожее на джиквери то вот
    www.richardfawcett.net/demos/jquery_1.8.0_testing.html
    после 1.8 джиквери сам добавляет вендорные префиксы.
    однако чтобы это юзать надо использовать не выборку дом-элемента, а именно джиквери объект
    var angle=12.5;
    $(marker._icon).css({
      transform:"rotate("+angle+"deg)"
    })

    джиквери сам проставит префиксы. и да, .css метод на джиквери объекте, вместо style на дом-элементе.
    Ответ написан
    Комментировать
  • (Визуальный редактор медиа-выражений и работа с psd прямо в редакторе/онлайн) Response and extract for brackets - альтернативы есть?

    @dmz9
    текстовый редактор - для текста, графический - для графики и макетов.
    пихать всё в одно это бред.
    я обычно для верстки использую пхпшторм, фотошоп для макетов, хром для результатов.
    ---------------------------------
    tl:dr
    в фотошопе юзай хоткеи, спрайты собирай сборщиком (не онлайн), мелкие картинки с макета экспортируй скриптом (есть встроеный сценарий), юзай гугл-фонтс или белку, адаптивные макеты одной и той же вьюшки лучше скидывать в одно рабочее поле
    в редакторе - юзай эммет (если есть), юзай лайвтемплейты (если редактор поддерживает), юзай автокомплит (если редактор поддерживает). юзай сборщики файлов (более системный совет). юзай другой редактор (если он нифига не поддерживает), например phpstorm / webstorm, грамотно организуй структуру проекта (логически), работай на основе какого нибудь адаптивного фреймворка (например бутстрап 4), юзай scss
    ---------------------------------
    longread
    в фотошопе можно ускориться так
    1. юзать хоткеи. по факту верстальщику надо знать от силы 15 хоткеев
    например вот такие (неполный список конечно же)
    • скопировать слой в новый файл.
    • тримминг пустых пикселей
    • сохранить в формате для веб (типа сохранение картинок) - их всеравно потом лучше бы пережать так как ФШ добавляет много лишнего мусора внутрь (этот хоткей есть так то)
    • вкл-выкл режим показа границ слоёв. мегаполезная фишка.
    • вкл-выкл направляющие.

    2. спрайты - мелкие фотки со всех макетов скидываешь в один новый файл, потом переименовываешь каждый слой по смыслу (в т.ч. ховер-слои) так чтобы названия не повторялись. далее запускаешь скрипт - импорт слоёв в файлы. он быстро всё триммингует, сохраняет в пнг и выплевывает в папку. название слоёв становится названием файла. однако скрипт достаточно "противный" и дописывает свои индексы в начале файла. исправляется единоразовой правкой самого скрипта (уже не помню где лежит, делал года 2 назад).
    далее, если ты действительно верстаешь а не пишешь голый цсс - у тебя есть сборщик. например я юзаю бутстрап 4 (который наверно уже не альфа) и грунт. в грунт прикрутил команду grunt sprite которая берет все пнг из папки (которые фотошоп туда положил) и собирает из них
    • файл спрайта
    • парциал сцсс для использования каждого спрайта по отдельности в коде других парциалов

    сборщик это примерно такой
    "grunt-spritesmith": "^6.3.1"
    код примерно такой
    sprite:{
          all: {
            src: './sprite/*.png',
            dest: './../images/sprite.png',
            destCss: './scss_custom/_sprite.scss',
            imgPath: '../../../images/sprite.png',
            padding: 3,
            algorithm: 'left-right',
            cssVarMap: function (sprite) {
              sprite.name = 'sprite-' + sprite.name.replace(/\s|\(|\)/g, '_');
            },
            cssTemplate: 'css.sprite.template'
          }
        },

    спрайт темплейт примерно такой
    {{#spritesheet}}
    @mixin sprite(){
    	display:inline-block;
    	overflow:hidden;
    	background-image: url({{{image}}});
    	background-repeat: no-repeat;
    }
    .sprite{
    	display:inline-block;
    	overflow:hidden;
    	background-image: url({{{image}}});
    	background-repeat: no-repeat;
    }
    {{/spritesheet}}
    {{#sprites}}
    .{{name}}{
      background-position: {{px.offset_x}} {{y}};
      width: {{px.width}};
      height: {{px.height}};
    }
    @mixin {{name}}(){
      background-position: {{px.offset_x}} {{y}};
      width: {{px.width}};
      height: {{px.height}};
    }
    {{/sprites}}

    генерирует не только сам класс но еще и миксин (который можно юзать во всяких ховер-эффектах!)
    вобщем, тут сборщик очень сильно упрощает и автоматизирует сборку спрайтов. с ужасом вспоминаю дни когда руками их собирал в онлайн сервисе.
    если юзаешь что то другое (компас, гулп или что там еще за звери наплодились) - красава, разберешься наверно как прикрутить.
    3. вытаскивать фотки и сохранять - в фотошопе занимает около 4 секунд (по одной, руками).
    там даже мышкой не надо тыкать (при условии что слой уже выбран).
    алго примерно такой
    • хоткей - скопировать на новый документ, ок, ты перешел в новый таб
    • хоткей - тримминг пустых пикселей - фотка обрезана по размеру
    • хоткей - сохранить для веб - и вот ты уже выбираешь место сохранения.

    4. иногда дизайнеры ленятся и не обрезают фотки - на помощь приходит выделение нужного куска макета и "скопировать совмещенные данные". сразу же делаешь новый файл, энтер, ctrl+v, сохранить.
    5. юзай линейку, заставляй дизайнеров соблюдать одинаковые отступы, проси шрифты которые юзали в макетах (хотя бы в одном формате), храни наборы конверченых для пуленепробиваемого font-face у себя где нибудь на складе - часто могут пригодиться. подключение уже готовой пачки шрифтов на все вкусы браузеров - что может быть приятнее (и быстрее) ? ммм, наверно только гоогле-фонтс.
    6. адаптивные макеты я обычно скидываю все в один файл (один вид = 4-5 макетов, напр. карточка товара). так проще смотреть что куда уплывает и куда перемещается.
    -----------------------
    ускорение в редакторе
    юзаю phpstorm. в его состав входит webstorm поэтому этот варик чуть менее чем абсолютный эпик вин. в него интегрируется вообще что угодно, в т.ч. можно настроить собственные вотчеры файлов (сасс, лесс) (без грунта/гульпа итп). алсо - автоподсказки кода (и тех миксинов спрайтов тоже), лайв-темплейты очень удобная штука, а еще встроеный эммет - совсем красота.
    в шторме есть лайв-релоад. если имеешь хотя бы 2 монитора - можно заценить. на одном браузер, на другом верстаешь - тут же видишь результат (вотчер компилирует цсс, лайв релоад его перечитывает и обновляет)

    всё делается на парциалах (т.е. файлы-кусочки в терминологии сасс "partials"). парциалы прикольны тем что вотчер не станет компилировать новый парциал в готовый код, пока ты его никуда не подключил. а если писать без подчеркивания - станет (т.к. это уже не парциал). т.о. создание таких файлов не ломает промежуточные результаты работы.

    для адаптивной верстки выглядит примерно так
    /* /includes/header/_header.scss */
    header{
    	@include media-breakpoint-up(md){
    		margin-bottom: .5rem;
    	}
    	.top{
    		border-bottom: 1px solid #ccc;
    		height: (42rem/16); // нужно было 42 пикселя, а рем = 16. приходится изворачиваться
    		font-size: (14rem/16);
    		margin-bottom: (28rem/16);
    		@include media-breakpoint-up(md){
    			margin-bottom: 3rem;
    		}
    		@include media-breakpoint-up(lg){
    			border-bottom: 0;
    		}
    	}
    }

    для справки -
    $grid-breakpoints: (
    		xs: 0,
    		sm: 480px,
    		md: 768px,
    		lg: 960px
    );

    media-breakpoint-up - миксин бутстрапа 4, просто сразу говорит о том что "для экрана больше чем md будет вот так то". само собой есть и -down, -between.
    причем вся конструкция для миксина тоже не пишется руками - для этого есть лайв темплейт
    поэтому я пишу (tab - это раскрытие эммета или лайв-темплейта)
    bp (tab) md (tab) mb.5rem (tab)
    это раскрывается в
    @include media-breakpoint-up(md){
      margin-bottom: .5rem;
    }

    и компилируется в
    @media (min-width: 768px) {
      header {
        margin-bottom: .5rem;
      }
    }

    не призываю юзать бутстрап прям везде и всюду - призываю лишь юзать "наработки" которые позволяют забыть о написании медиа-запросов руками. даже если от бутстрапа юзается одна сетка - да или хоть вообще одни миксины - это того стоит.
    Ответ написан
    2 комментария