Подсел на javascript.
JQuery уже не торкает, употребляю потяжелее — react/vue.
Без ежедневной дозы javascript начинается ломка.
Контакты
Местоположение
Россия, Самарская обл.

Достижения

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

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

Все теги (274)

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

Все ответы (1492)
  • Какие книги по программированию must-have?

    delphinpro
    @delphinpro
    frontend developer
    Не буду оригинален, эти книги у всех на слуху (и у меня на полке =).

    Макконнелл: Совершенный код
    Кнут: Искусство программирования
    Роберт Мартин: Чистый код. Создание, анализ и рефакторинг
    Гамма, Влисидес, Хелм, Джонсон (также известные как "Банда четырех"): Приемы объектно-ориентированного проектирования. Паттерны
    Фаулер: Рефакторинг. Улучшение существующего кода
    Ответ написан
  • VueJS: где лучше хранить css, в компонентах .vue или main.css?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

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

    Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

    Что делаем:
    Подключаем в точке входа (main.js) основной стилевой файл:
    import '@/styles/main.scss';
    import Vue from 'vue';
    //...

    В нем подключаем всякое-разное-глобальное-базовое:
    @import "base/normalize";
    @import "base/init";
    @import "base/typography";
    @import "base/code";
    @import "base/links";
    @import "base/tables";
    @import "base/buttons";
    @import "base/control-group";
    @import "base/general-form";
    @import "parts/transitions";
    ...

    Далаем два файла: env-development.scss и env-production.scss
    $NODE_ENV: development;
    @import "cfg-vars";

    $NODE_ENV: production;
    @import "cfg-vars";

    Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
    Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги
    $DEV_MODE: $NODE_ENV == development;
    $MAX_INT32: 2147483647;
    
    @import "cfg-vrhythm";
    @import "cfg-grid";
    @import "../../../node_modules/vrhythm/source/vrhythm";
    @import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
    @import "../mixins";
    @import "cfg-z-indexes";
    
    $wt-family-base: "Open Sans", sans-serif;
    $wt-family-head: "Roboto Slab", serif;
    $font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
    
    //==
    //== Color palette
    //== ======================================= ==//
    
    $palette-light-blue: #3c8dbc; // Primary
    $palette-red       : #dd4b39; // Danger
    $palette-green     : #00a65a; // Success
    $palette-aqua      : #00c0ef; // Info
    $palette-yellow    : #f39c12; // Warning
    
    ...


    Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
    Идём в vue.config.js и добавляем секцию css:
    const NODE_ENV = process.env.NODE_ENV === 'development'
        ? 'development'
        : 'production';
    //...
    module.exports = {
        //...
        css: {
            extract: NODE_ENV === 'production',
            loaderOptions: {
                sass: {
                    data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
                },
            },
        },
    };


    Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

    Enjoy!
    Ответ написан
  • PSR-0 или PSR-4, и как правильно построить структуру проекта?

    delphinpro
    @delphinpro
    frontend developer
    /path/to/project/ это путь к проекту и данный путь нигде не фигурирует, это та директория из которой запускается основной index.php

    Нет. Этот корневая директория проекта. Из нее запускается композер. В ней же обычно лежит DOCUMENT_ROOT каталог, в котором уже и находится точка входа index.php. Также здесь лежат директории vendor (для сторонних пакетов) какой нибудь application/ для ваших файлов.

    Давайте попробую объяснить на примере.

    Пусть будет такая структура, например.
    20151206-170857.png
    в vendor - вам ничего самому писать не нужно. Этот папка для композера.
    public_html - в ней только index.php и все ваши css, images, js. Это папка на которую указывает DOCUMENT__ROOT в настройках домена вашего сервера. Только эти файлы доступны "по интернету".
    application - здесь все ваши самописные php файлы.
    (На остальные каталоги не обращаем внимания, в корне проекта можно располагать все что вам удобно, это не будет доступно из web)

    Под такую структуру написан подобный composer.sjon
    {
      "require": {
        "php": ">=5.5.9",
        "slim/slim": "2.*",
        "twig/twig": "~1.18",
        "slim/views": "^0.1.3",
        "robmorgan/phinx": "^0.4.4",
        "illuminate/database": "^5.1"
      },
      "minimum-stability": "stable",
      "autoload": {
        "psr-4": {
          "MyName\\MyProject\\": "application"
        }
      }
    }

    Тут вроде бы все просто. В require перечислены используемые пакеты. Поясню только autoload. Автозагрузка по стандарту PSR-4. Указано пространство имен ваших файлов и папка в которой они лежат.
    Если ваш класс MyClass лежит в папке application - то у него должно быть пространство имен \MyName\MyProject (полное имя класса получается \MyName\MyProject\MyClass). Если ваш класс MyController лежит в папке application/Mvc/Controllers, то, соответственно \MyName\MyProject\Mvc\Controllers\MyController.

    При этом вам не нужно заморачиваться и писать автозагрузчик. Просто выполните команду php composer.phar install (или php composer.phar dumpautoload для пересборки аавтозагрузчика) и подключите файл автозагрузчика в index.php
    include '../vendor/autoload.php';

    Не использовать композер не имеет смысла, т.к. это очень просто. Просто скачайте файл https://getcomposer.org/composer.phar в корень проекта и пользуйтесь (см выше).
    Ответ написан
  • Как убрать рамки в html?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Правая кнопка мыши
    Пункт «Посмотреть код элемента»
    Наводим курсор на интересующий элемент и все видим
    Желтые рамки - это margin
    Зеленые - padding

    5cfee2ff1acd9033470979.png

    Или смотрим на вкладке «Computed»:

    5cfee33225321589388047.png
    Ответ написан
  • Что означает (jQuery) после (function( $ )?

    delphinpro
    @delphinpro
    frontend developer
    (function( ) {
    })();

    Вот эта конструкция называется "анонимная самовызываемая функция".

    То есть, тут два действия:
    Объявление анонимной функции
    function( ) {
    }

    и сразу ее вызов
    ()()
    Первые скобки это синтаксический приём для вызова анонимной функции. Есть и другие методы. Например
    +function(){}()
    Вторые скобки - это собственно вызов функции и при необходимости передача параметра (обычный вызов же)

    ()(jQuery) — в параметре передается jQuery

    function($){} — а тут этот параметр объявлен и используется

    (function($){})(jQuery) — итого, объявили анонимную функцию, и вызвали ее, передав параметром объект jQuery

    Например, доллар у вас используется другой библиотекой, пусть MooTools.
    Тогда вы запускаете jQuery в безконфликтном режиме

    jQuery.noConflict();

    Это значит, что доллар использоваться не будет, и объект будет доступен только по ссылке jQuery.

    Но для удобства вы можете использовать анонимную функцию и безопасно использовать внутри неё переменную доллара

    (function($){
      $('.slider').slick();
    })(jQuery);


    Чтобы стало совсем понятно, конструкцию можно переписать без анонимной функции =))

    var myFunc = function($){
     // some code
    }
    
    myFunc(jQuery);
    Ответ написан

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

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