Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (2)

Наибольший вклад в теги

Все теги (23)

Лучшие ответы пользователя

Все ответы (30)
  • Как писать много кода, оставляя его простым, как в начале?

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

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

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


    вообще стоит почитать про паттерны и антипатеррны, это конечно не библия но знать хотя бы основные стоит.
    Ответ написан
  • Как без костылей сделать так, чтобы footer сайта всегда был внизу?

    @dmz9
    не бойся добавить обертку к разметке, от этого никто еще не умер.
    есть всего 2 случая:
    1. высота футера заранее известна и жестко можно её указать. в этом случае обычно использую вот такое
    <html>
    <head>
    <style type="text/css">
    * {
        /* обычно все нормальные адекватные верстальщики юзают css-reset поэтому 
        тут просто масло-масляное. такие правила в нем всегда есть, но они необходимы на самом деле.*/
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body,
    html {
    	background-color: orange;
        height: 100%;
        /* растягиваем корневой элемент и боди на всю высоту окна браузера. 
        да, даже если контента 10 страниц - эти элементы будут именно по размеру окна */
    }
    
    .wrapper {
        min-height: 100%;
        /* обертка должна быть не-меньше чем всё окно целиком. это растягивает враппер 
    на всю высоту окна браузера (как минимум). если контента больше чем одна страница - 
    правило будет просто опускаться, и враппер будет заниматься столько, сколько нужно  */
        padding-bottom: 80px;
        /* вообще, указывать надо чуть больше, либо добавлять main отдельный нижний маржин. 
    если этого не делать футер будет очень близко к main поэтому нужен отступ. 
    обычно 15-16 пикселей (спейсер) */
    }
    
    footer {
    	background-color: green;
        height: 80px;
        /* мы знаем высоту футера и указываем ее */
        margin-top: -80px;
        /* основная суть всего способа - отрицательный верхний маржин затягивает футер наверх на всю 
    собственную высоту футера. соль в том что враппер, идущей по потоку документа перед футером уже занял 
    всю высоту окна. и если мы этого не сделаем то футер всегда будет ниже нижней границы окна 
    даже когда контента не будет, плюс, появится полоса прокрутки. отрицательный маржин 
    нивелирует этот эффект и футер оказывается "прибит" к полу */
    }
    </style>
    </head>
    <body>
        <div class="wrapper">
            <header></header>
            <main>я майн</main>
        </div>
        <footer>пыщщ пыщщ</footer>
    </body>
    </html>

    если используется less/sass то еще проще - заводим переменную (типа $footer_height) и юзаем ее и в паддинге (padding-bottom:$footer_height+15px) и в стилях футера (height:$footer_height; margin-top:-1*$footer_height;). замена высоты футера будет в одном месте (dry!)
    2. второй вариант - высота может меняться - в основном у адаптивных сайтов.
    расскажу как обойтись без флексбокс но нужно немного JS.
    за высотой футера следит скрипт, и при каждом ресайзе страницы обновляет высОты и маржины/паддинги. использовать jquery проще всего, плюс, он почти всегда есть почти везде.
    выглядит примерно так.
    <html>
    <head>
        <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body,
        html {
            background-color: orange;
            height: 100%;
        }
        
        .wrapper {
            min-height: 100%;
            /* теперь паддинг не нужен */
            /* погорячился - все таки нужен )) */
           padding-bottom:80px;
        }
        
        footer {
            background-color: green;
            min-height: 80px;
            /* чтобы футер не схлапывался в нулевую высоту когда в нем пусто */
            height: 80px;
            margin-top: -80px;
            /* можно не убирать, чтобы оставить совместимость с чем то без JS */
        }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <header></header>
            <main>я майн</main>
        </div>
        <footer>а я футер! ололо</footer>
        <script src="http://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            // сначала подождем загрузки
            // объявим переменные, чтобы заново не выбирать каждый раз те же ноды
            var footerHeight, $footer = $('footer'),
                $main = $('main');
            $(window).resize(function() {
                // вешаем обработчик на изменение размеров страницы - т.е. если меняется ширина страницы, 
                // или высота, даже если в футер кто то потом аяксом что то подгрузит - 
                // сработает ресайз и все сам поменяет
                footerHeight = $footer.height('auto').height();
                // важный момент - чтобы "снять" правильную высоту элемента - надо чтобы поток документа сам 
                // назначил верную высоту футеру. а для этого сделаем её "auto". даже если забыли/не захотели убрать 
                // из стилей жестко прописаную высоту - инлайн стиль перебивает весом, и поэтому высота 
                // будет такая "как надо". потом снимаем мерку, и юзаем её
                $main.css({
                    'paddingBottom': (footerHeight + 15)
                });
                // не забываем кемел-кейс для значений-через-дефис
                $footer.css({
                    'height': footerHeight,
                    'marginTop': (footerHeight * -1)
                })
            }).trigger('resize'); // после навешивания обработчиков насильно запускаем первый ресайз
        })
        </script>
    </body>
    </html>

    ------------------------------
    варианты с позиционированием крайне не люблю - дело не в том что я не умею с ним обращаться. я то как раз таки умею, а вот многие другие делают из этого лютые костыли, которые потом заколебешься переделывать. так что лучше не используйте позиционирование там, где оно не нужно (в прибитии футера к полу например).
    то что бутстрап использует позиционирование в своём прибитом футере не значит что это супер-правильно или это best-practices. просто они решили сделать так а не как то иначе.
    Ответ написан
  • Комбинированный if?

    @dmz9
    проваливающийся свич быстрее всех, не слушай никого ыы.
    первый и третий варианты тратят время на создание массивов/объектов соответственно.
    второй вариант, со свичем, ничего не создает, соответственно быстрее.
    var X = 52;
        console.time('someFunction1');
        for (var i=0,x=0; i < 10000; i++) {
            if ([52, 62, 72, 82, 92].indexOf(X) !== -1) {
                x++;
            }
        }
        console.log(x);
        console.timeEnd('someFunction1');
        console.log('--------------');
        console.time('someFunction2');
        for (var i=0,y=0; i < 10000; i++) {
            switch (X) {
                case 52:
                case 62:
                case 72:
                case 82:
                case 92:
                    y++;
                    break;
            }
        }
        console.log(y);
        console.timeEnd('someFunction2');
        console.log('--------------');
        console.time('someFunction3');
    
        for (var i=0,z=0; i < 10000; i++) {
            if({52:1, 62:1, 72:1, 82:1, 92:1}[X]) { z++; }
        }
        console.log(z);
        console.timeEnd('someFunction3');

    10000
    someFunction1: 2.541ms
    --------------
    10000
    someFunction2: 1.192ms
    --------------
    10000
    someFunction3: 3.676ms
    Ответ написан
  • Как сделать, чтобы по клику на нужный адрес, карта показывала это место?

    @dmz9
    строго говоря нарушен принцип "не повторяйся".
    на сайте примере под каждый отдельный селектор тот же самый код, меняются только числа координат.
    само собой напрашивается вынесение этих соответсвий в отдельный js-объект вида
    var coords = {
    	'showMap_1':{
    		[55.66837606904998,37.484163499999944]
    	},
    	'showMap_2':{
    		[55.66266356906509,37.478000999999914]
    	},
    	...
    }

    что интересно - в странице подключен джиквери но скрипт использует ванильные селекторы.
    вобщем, вместо 10 обработчиков на каждом элементе - нужен один вот такой
    $('tr[id=^showMap]').click(function() {
        myMap.setZoom( 15 );
        myMap.panTo(coords[$(this).attr('id')],{flying:1});
        TweenMax.to(window, 0.5, {scrollTo:{y: document.getElementById("map").offsetTop-10}})
    });

    при клике берется идентификатор строки таблицы, по нему сразу получается соответствие из coords по ключу.
    само собой coords должен быть в области видимости рядом с функцией, либо в каком то глобальном объекте (если список координат каждый раз - динамический и пишется в коде страницы на сервере)
    Ответ написан
  • Горизонтальная прокрутка таблицы по клику на кнопку?

    @dmz9
    было дело, приходилось такое мутить.
    есть какой то плагин но можно на js накидать своё, не найду свои сорсы.
    далее с джиквери
    вобщем, по document.ready берем каждую такую таблицу, оборачиваем в обёртку от конфеты.
    обёртка должна быть с прокруткой горизонтальной (overflow-x).
    после того как конфетка завёрнута append после обёртки кнопку. либо, если кнопка уже должна существовать - надо каждый раз проверять - а находится ли обёртка рядом с кнопкой, чтобы, при клике на кнопку прокручивалась именно ближайшая обёртка а не все подряд. если же кнопку создаем под каждую таблицу - просто вешаем хендлер .click(function(){}) а внутри каждый раз меняем прокрутку обёртки.
    по сути, прокрутка вбок - это всего лишь scrollLeft у контейнера-обёртки. сама таблица как была так и есть.
    этот скролл может иметь фиксированый размер в пикселях либо можно снимать ширину с родителя и типа скролить "на всю ширшину родительского контейнера". это достаточно универсально, можно еще чуть меньше сделать, чтобы следующий "слайд" всегда "продолжался" на 15-20 пикселей и было ощущение реальной прокрутки.
    также, через джиквери этот самый scrollLeft можно еще и анимировать, добавляя например эффект "swing". тогда всё будет работать еще более badass!
    плюс, так как это ж майфун, можно навешать на обёртку touch - ивенты, чтобы на лапание пальцами экрана прокрутка тоже отрабатывала.
    ---------------------
    карусель (слайдер) тут не поможет - таблицу на слайды нельзя разбить.
    ---------------------
    если таблицы совсем простые - без смердженых ячеек - есть плагин responsiveTables или типа того. тупо делает из широкой таблицу более узкую но меняет местами вертикальные-горизонтальные строки. читабельно. но если есть ячейки с colspan/rowspan - косячит
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (4)