• Как лучше сверстать?

    @bogomazov_vadim
    Наскидку, что вспомнил.

    1. Panzoom.
    2. Зум svg, видео реализации. Но там без тача, насколько я вижу, нужно будет допиливать.
    Ответ написан
    Комментировать
  • Что именно надо знать в Java чтобы начать делать приложения на Android?

    azerphoenix
    @azerphoenix Куратор тега Java
    Java Software Engineer
    Java SE + Android API. А дальше уже развиваться...
    Ответ написан
    Комментировать
  • Что делать, когда умеешь программировать, но нет идей?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Открываешь upwork, ищешь подробно описанные заказы, реализуешь их.
    Ответ написан
    Комментировать
  • Как скачать сайт полностью на компьютер?

    @Borm
    Пробовал webparse.ru - можно скачать мобильную версию и десктопную. Доступны различные тарифы. Тестовая скачка бесплатна
    Ответ написан
    1 комментарий
  • Как заставить slick-slider срабатывать при ресайзе страницы?

    ProjectSoft
    @ProjectSoft
    Front-end && Back-end разработчик
    // Подпишемся на ресайз и продиспатчим его для запуска
    $(window).on('resize', function(e){
    	// Переменная, по которой узнаем запущен слайдер или нет.
    	// Храним её в data
    	var init = $(".card-box").data('init-slider');
    	// Если мобильный
    	if(window.innerWidth < 480){
    		// Если слайдер не запущен
    		if(init != 1){
    			// Запускаем слайдер и записываем в data init-slider = 1
    			$('#card-box').slick({
    				infinite: true,
    				slidesToShow: 1,
    				slidesToScroll: 1
    			}).data({'init-slider': 1});
    		}
    	}
    	// Если десктоп
    	else {
    		// Если слайдер запущен
    		if(init == 1){
    			// Разрушаем слайдер и записываем в data init-slider = 0
    			$('#card-box').slick('unslick').data({'init-slider': 0});
    		}
    	}
    }).trigger('resize');

    https://monosnap.com/file/Jw6PomDPOuv54bY25640JxAz...
    Ответ написан
    4 комментария
  • Как сделать шаблонизатор на php?

    copist
    @copist
    Empower people to give
    Сначала - зачем нужен шаблонизатор. Тут подмена понятий. Скорее вопрос такой: как отделить вывод от заголовков. Если не отделять, то может быть такая ошибка

    <html>
    <body>
    <?php
    // начать сессию
    session_start(); // отправить куку PHPSESSID через заголовки HTTP
    // но она не может отправиться, потому что уже начался вывод HTML в строке "<html ..."
    
    // если не авторизован, то отправить на страницу логина
    if (empty($_SESSION['username']))
        header('Location: /login.php'); // но заголовок HTTP тоже не может отправиться, как и кука
    ?>
        <h1>Hello, <?php echo $_SESSION['username'] ?></h1>
    </body>
    </html>


    Проблема решается, если вывод HTML делать после вывода заголовков. Например, использовать буфер
    <?php ob_start(); // открыть буфер ?>
    <html>
    <body>
    <?php
    session_start(); //  кука PHPSESSID отправится, потому что HTML ещё в буфере
    if (empty($_SESSION['username']))
        header('Location: /login.php'); // заголовок HTTP отправится, потому что HTML ещё в буфере
    ?>
        <h1>Hello, <?php echo $_SESSION['username'] ?></h1>
    </body>
    </html>
    <?php ob_end_flush(); // выбросить содержимое буфера наружу и закрыть его ?>


    Однако так придётся писать в каждом месте, где формируется HTML. Можно ли сократить?

    Простейшее представление через буфер

    <?php
    function render($viewPath)
    {
        if (!is_file($viewPath))
            return 'View "'. $viewPath . '" not exists';
        ob_start();
        include($viewPath);
        return ob_get_clean();
    }
    
    session_start();
    if (empty($_SESSION['username']))
        header('Location: /login.php');
    
    $viewsPath = __DIR__.'/views/'; // где лежат представления
    render($viewsPath . 'page.php'); // нарисовать страницу HTML


    <?php
    # page page.php
    ?>
    <html>
    <body>
        <h1>Hello, <?php echo $_SESSION['username'] ?></h1>
    </body>
    </html>


    А дополнительно ещё решают проблему отделения логики от формирования интерфейса. Работа с внешними данными в одном месте, а отображение их - в другом. Для этого в представление передают всё, что нужно показать. И точка. Лишних данных там не надо. В некоторых фреймворках стоит Exception если представление начнёт работать с базой данных, читает данные из входного запроса или пытается отправить заголовки.

    <?php
    function render($viewPath, $vars)
    {
        if (!is_file($viewPath))
            return 'View "'. $viewPath . '" not exists';
        extract($vars); // extract делает из массива набор переменных в локальной области видимости
        ob_start();
        include($viewPath); // эти переменные будут видны внутри подключаемого файла
        return ob_get_clean();
    }
    
    session_start();
    if (empty($_SESSION['username']))
        header('Location: /login.php');
    
    $viewsPath = __DIR__.'/views/'; // где лежат представления
    render($viewsPath . 'page.php', array( // отображаемые данные передаются массивом
        'username' => $_SESSION['username'],
    ));


    # page.php
    <?php
    /**
     * Подсказки для IDE, чтобы не подсвечивал переменные как неопределённые
     * @var string $username
     */
    <html>
    <body>
        <h1>Hello, <?php echo $sername ?></h1>
    </body>
    </html>


    Не правда ли, с представлениями код становится значительно изящнее. А если логика для реализации представлений хранится в отдельном файле-библиотеке, то код становится короче и понятнее.

    В фреймворках вместо функции render может использоваться объектная реализация

    <?php
    class ViewException extends Exception {}
    
    class View
    {
        public $viewsPath = __DIR__.'/views/';
        
        public function __construct($viewsPath = null)
        {
             // настройка представлений
            // например, можно перепределить место хранения представлений
            if (!is_null($viewsPath))
                $this->viewsPath = $viewsPath;
        }
    
        public function render($viewPath, $vars)
        {
            if (!is_file($this->viewsPath . $viewPath))
                throw new ViewException('View "'. $viewPath . '" in folder "'. $this->viewsPath . '" not exists');
            extract($vars);
            ob_start();
            include($this->viewsPath . $viewPath);
            return ob_get_clean();
        }
    }
    
    $view = new View();
    $view->render('page.php', array(
        'username' => $_SESSION['username']
    ));


    Как таблицы шаблонизаирова если в одной 3 столбца, в другой 5?

    Никто в представлениях не запрещает использовать языковые конструкции. Это могут быть конструкции языка PHP или какой-нибудь другой язык, специально написанный для шаблонизатора. Например, в Smarty, Blade, Pug свои языки. Передай в представление количество колонок и сделай цикл :)

    у первой первый столбец должен быть 70% а у второй последний?

    В представлениях можно подключать стили CSS, через которые меняется отображение (колонка 70%).
    У каждого представления может быть свои стили.
    Если нужно, чтобы были некоторые общие стили и дополнительные, нужные только для этой страницы, используют что-то типа буферизирования вывода блока стилей.

    <?php
    class Assets
    {
        public static $cssLinks = array();
        public static $css = array();
    
        // добавить ссылку на файл стилей
        public function addCssLink($link)
        {
            self::$cssLinks[$link] = $link;
        }
    
        // добавить блок стилей
        public function addCss($name, $css) // $name - это чтобы не дублировались блоки стилей, на всякий случай
        {
            self::$css[$name] = $css;
        }
    
        public function renderCss()
        {
            foreach(self::$cssLinks as $url)
                echo '<link href="'.$url.'" rel="stylesheet" type="text/css" />';
            echo '<style type="text/css">';
            foreach(self::$css as $css)
                echo $css;
            echo '</style>';
        }
    }


    # index.php
    
    $assets = new Assets();
    // общие стили
    $assets->addCssLink('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
    
    // ...
    
    $view = new View();
    $view->render('page.php', array(
        'username' => $_SESSION['username']
    ));


    # page.php
    <?php
    /**
     * @var string $username
     */
    $assets = new Assets();
    $assets->addCssLink('/path/to/my/styles.css'); // ещё один файл стилей
    $assets->addCss('h1 { color: red; }'); // или даже что-нибудь микроскопическое, только для этой страницы
    ?>
    <html>
    <head>
    <?php $assets->renderCss() ?>
    </head>
    <body>
        <h1>Hello, <?php echo $username ?></h1>
    </body>
    </html>


    И аналогично про JS.
    Ответ написан
    7 комментариев
  • Как разделить фон пополам на 2 цвета на css?

    Если вы именно у одного блока хотите задать двойной фон то так:
    .wrapper {
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, green 50%, red 50%);
    }
    Ответ написан
    2 комментария
  • Как верстать такие декоративные элементы?

    @nichvlas
    Этот макет из html academy
    А у них есть курс по свг и как его рисовать через css
    https://htmlacademy.ru/courses/130
    Для таких простых элементов вроде изогнутой линии вполне можно заморочиться и сделать
    Ответ написан
    2 комментария
  • Какие сборщики проектов сейчас в ходу?

    vitali1995
    @vitali1995
    Если речь ведётся о сборке js-проектов, то лучшим ответом будет webpack.
    Если нужна автоматизация произвольного типа задач, тогда лучшим решением будет gulp.
    Впрочем, эти два инструмента отлично дружат друг с другом, когда каждый из них занимается своим делом.
    Ответ написан
    4 комментария
  • Как правильно собирать js по БЭМ?

    Пишите модулями, собирайте Webpack'ом

    https://learn.javascript.ru/modules
    https://habr.com/post/267639/
    https://webpack.js.org/
    Ответ написан
    Комментировать
  • В какой последовательности читать книги по JS?

    @cluberr
    Книги по JS на русском и в каком порядке читать:
    1) Изучаем программирование на JavaScript
    2) Выразительный JavaScript
    3) JavaScript: сильные стороны
    4) Секреты JavaScript ниндзя
    5) JavaScript. Шаблоны
    6) JavaScript. Оптимизация производительности
    7) JavaScript для профессионалов
    8) ES6 и не только
    Ответ написан
    Комментировать
  • В какой последовательности читать книги по JavaScript?

    @Aizen22
    Если дружите с английским можете посмотреть "How to learn JavaScript properly". В зависимости от текущего уровня знаний автор предлагает несколько путей изучения.
    Ответ написан
    Комментировать
  • Как сделать эффекты как на сайте примере?

    Есть такой канал Юрий Артюх, он проводит стримы как раз на тему анимации.
    Думаю у него вы найдете много чего полезного для выполнения этой задачи
    Ответ написан
    4 комментария
  • Как сделать эффекты как на сайте примере?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

    1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

    Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

    2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

    На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

    Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

    Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.
    Ответ написан
    5 комментариев
  • Как верстать такое?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Варианты:
    1. Либо clip-path и трактор отдельно.
    2. Либо множественный фон: внизу желтая картинка, поверх 2 треугольника с помощью линейных градиентов, верхний слой - трактор.
    3. Либо полностью одна фоновая картинка и все.

    Я бы выбрала 2 или 3 способ, в зависимости от потребностей перестроений для разных экранов.

    Как-то так: https://jsfiddle.net/Ankhena/bec9qcyy/
    значения свои поставьте
    Ответ написан
    1 комментарий
  • Уважаемые знатоки, как сделать такую кнопку?

    thoozu
    @thoozu
    Веб-разработчик
    Можно воспользоваться псевдо-классами :before и :after.
    Ответ написан
    Комментировать