• Поиск наставника AngularJS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Пишите

    https://github.com/gdi2290/ngExam - вот вам план изучения.
    Ответ написан
    2 комментария
  • Правильно ли я верстаю?

    Apathetic
    @Apathetic
    Frontend
    адаптивить

    Есть простое слово "адаптировать". Не насилуйте язык.

    1) Правильно верстать так, чтобы потом другие могли понять, что вы там наверстали. Причин не использовать абсолютное позиционирование в данном случае я не вижу.

    2) только тогда

    4) Если вы имеете ввиду расстановку классов под "с помощью бутстрап сетки", то, наверное, и да и нет. Потому что адаптация - это не только сетка. Это сплошные нюансы в расстановке блоков и элементов, в их размерах, в типографике и так далее.

    5) Если хочет, чтобы была мобильная версия - должен однозначно. В противном случае, как говорится, претензии не принимаются.

    должен ли я адаптивить под абсолютно любое пиксельное разрешение или же только под самые распространенные?

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

    На третий вопрос не отвечаю, потому что тема очень обширна. Нюансы верстки в одной статье и даже книге в принципе покрыть невозможно. Ну, разве что это будет очень большая книга. Жаль, такая устарела бы сразу после выхода. А правил хорошего кода по сети раскидано немеряно. Ну вот, например.
    Ответ написан
    Комментировать
  • Как сделать отступ автоматически?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Элементы с абсолютным позиционированием не зависят от общего потока, поэтому добавлять автоматический отступ относительно другого элемента, средствами CSS, не получится.

    Уберите position: absolute; у параграфов (даты, заголовка, описания). Оберните их в <div class="wrap">...</div> и позиционируйте этот «div» так, как вам нужно.


    Дополнительно (на будущее):

    Строчные элементы не должны содержать внутри себя блочные элементы. Если вы все же хотите это сделать, то делайте из строчного элемента — блочный.

    <a href="#"> <!-- строчный элемент -->
        <p>Some paragraph</p> <!-- блочный элемент -->
    </a>

    Элементу «a», в данном случае, необходимо задать display: block; или display: inline-block; в CSS.

    И еще, пожалуйста, научитесь форматировать код. Во первых, это позволит вам самим лучше воспринимать его, а во вторых, другие разработчики более охотно смогут вам помочь. В такой каше, как у вас, мало кому захочется разбираться (не важно, демо/тест или реальный проект).
    Ответ написан
    1 комментарий
  • Книги vs оф. документация vs статьи vs видеокурсы: как лучше всего изучать новую технологию, или фрейворк?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    По библиотеке или фреймворку:
    1. Схема архитектуры и её понимание,
    2. hello world (код) и разбор ("наложение") кода на архитектурную схему.
    3. Понимание базового архитектурного "скелетона" приложения.
    4. Беглый взгляд по функциям OOB (out-of-box/"из-коробки")
    5. Просмотр возможности подключения плагинов и беглый взгляд по текущему списку и реализуемых ими функций.
    ------------
    Постановка себе задачи и начало реализации на изучаемом инструменте.
    Ответ написан
    Комментировать
  • Как вы постигали жестокое ооп в javascript?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    жестокое ооп в javascript

    для начала - ООП в JS не жесткое, оно как раз таки упрощенное до нельзя.

    классической модели ооп

    Берем классическую модель ООП и...
    - инкапсуляция происходит не за счет модификаторов доступа а за счет сокрытия всего приватного в модулях/замыканиях.
    - Классов нет, но у каждого объекта есть конструктор и прототип (которые в свою очередь так же явлюятся объектами), что по сути то же самое но отличается тем, что у каждого экземпляра объекта, порожденного конструктором, своя копия прототипа, а значит если мы поменяли прототип то все рожденные ранее объекты не будут иметь изменений.
    - контекст вызова в js определяется по владельцу метода, который мы вызвали (ну или его можно подменить руками через call/bind/apply)
    - конструкция new Foo создаст объект с типом Foo, скопирует прототип и затем вызовет конструктор, который по умолчанию не явно возвращает контекст вызова, но вы можете там явно вернуть что угодно, что показывает что это обычная функция.
    - наседование с прототипом работает так же просто, проверяем есть ли что-то у объекта, если нет - идем по цепочке прототипов ниже и ниже. Если мы хотим обратиться к методу прототипа (как бы вызвать parent метод) то нам надо сохранить на него ссылку.
    - Что бы упростить работу со всем этим делом - вооружайтесь babel.js и используйте "классы", суть остается той же но меньше кода да и выглядит логичнее и привычнее.

    Вот как-то собственно и все.
    Ответ написан
    3 комментария
  • Какие правила нужно соблюдать чтобы html-разметка была правильной?

    serjikz
    @serjikz
    web-developer
    1. Проверка на валидность
    2. Табуляция
    3. Как можно меньше использования тегов. К примеру
    <div class="logo"><img src="logo.png"></div> лучше делать так <img src="logo.png" class="logo">
    4. Подключение скриптов и стилей внизу страницы перед закрывающим body
    5. Отсутствие inline стилей в документе
    6. Все style и script в файлах, а не в html (я иногда пишу js в доке, если его мало)
    7. ID - единственный на странице, class - множественный
    8. Вложенность тегов, о которой вы говорили
    9. Отсутствие лишних пробелов Пример:
    <div>
         <img>
    ____
         <a></a>
    </div>

    ___ - пробелы, которые надо удалить, оставив пустую строку.
    10. Пробелы в атрибутах. К примеру <a class=".."> но о них вам валидатор скажет сразу, поэтому не вижу смысла описывать правила валидности

    Ну наверно и всё.
    Ответ написан
    3 комментария
  • Отсутствует папки под названием "jre7" в папке "Java".Что можно с этим сделать?

    Ewintory
    @Ewintory
    Java / Android developer
    Вместо jre7 иногда пишут jre 1.7. У вас я вижу jre 1.8, это последняя на данный момент 8-я версия. Что с этим делать? Да ничего не делать, используйте 8ю. А если нужна именно 7я, скачивайте отсюда.
    Ответ написан
    Комментировать
  • В чём прикол сеток типа Golden Grid System и Frameless?

    Apathetic
    @Apathetic
    Frontend
    Прикол в разнообразии, в том, что вместо того, чтобы делать свой велосипед, можно подобрать подходящее для себя решение. Есть, к примеру, сетки, вообще не создающие дополнительные классы, а работающие только на миксинах (sass, less). Какие-то сетки делают упор на mobile-first, какие-то дают возможность выбора. Golden grid system предлагает помимо собственно сетки еще и базовую типографику (и таких сеток тоже много). Кроме того, не стоит забывать, что бутстрап - это фреймворк, а подавляющее большинство сеток - нет.
    Ответ написан
    6 комментариев
  • Стоит ли изучать Swing?

    EugeneP2
    @EugeneP2
    Java Dev
    Не трать время. Учи web
    Ответ написан
    3 комментария
  • Как сделать такой эффект ховера?

    Therapyx
    @Therapyx
    Data Science
    Вот держи) Сори за цвета, тут уже не принципиально, цвета на твоей совести ))
    https://jsfiddle.net/buh9uaj3/19/

    ключевое:

    li:hover
    {
        background-color:#ff0000;
        border-top: 2px solid blue;
        border-bottom: 2px solid blue;
    }
    Ответ написан
    Комментировать
  • Почему полиморфизм так работает?

    pi314
    @pi314
    Президент Солнечной системы и окрестностей
    Объяснить суть полиморфизма "на пальцах" довольно просто. Представьте себе класс Телефон. Его спроектировал некто в далеких 80-х, и определил в нем метод набратьНомер(). А потом другой программист в 90-х отнаследовал от него класс МобильныйТелефон и перекрыл метод набратьНомер(), т.к. грубо говоря, в новом устройстве набор производится уже не импульсно, а тонально. А потом третий программист отнаследовал от него класс Смартфон. При этом он не стал трогать метод набратьНомер(), а просто добавил методы для нового функционала, типа определитьПоложениеПоGPS() и т.д.

    Теперь представьте себе пользователя. Он родом из 80-х и понятия не имеет о тональном наборе и GPS... но если ему в руки дать любое из этих устройств, он сможет набрать номер и сделать звонок. Почему? Потому, что он умеет использовать метод набратьНомер(), и большего ему знать не нужно.

    А теперь представьте другого пользователя, нашего современника. Он вырос в эпоху смартфонов... но если ему в руки дать старый телефонный аппарат, он тоже сможет сделать звонок, т.к., опять же, знает метод набратьНомер().

    Применительно к ООП, пользователь - это переменная, содержащая ссылку на экземпляр класса. Ее тип (как она была объявлена) - это "набор знаний" о возможностях этого экземпляра. И т.к. Смартфон в своей основе является Телефон-ом, мы вполне можем дать его в руки гипотетическому пользователю из 80-х:
    Телефон устройство = new Смартфон();
    в результате чего он сможет сделать звонок:
    устройство.набратьНомер("03");
    А вот определить свое местоположение он не сможет, пока не узнает о существовании соотв. метода:
    Смартфон усовершенствованноеУстройство = (Смартфон)устройство;

    Это называется приведением типа. В данном примере у экземпляра класса уже был соотв. метод, но чтоб им воспользоваться, нужно сначала явно указать, что мы хотим рассматривать имеющееся у нас в руках устройство не как "простой" Телефон, а как Смартфон.

    P.S. Кстати, в этом примере мы затронули не только полиморфизм, но и наследование, и инкапсуляцию (пользователя "снаружи" совершенно не интересует, как именно производится набор номера - тонально, импульсно или еще как-то иначе)... так сказать, все три кита ООП в одном флаконе. И только так вообще имеет смысл рассматривать эти принципы, т.к. они по сути неотделимы друг от друга, как Отец, Сын и Святой Дух в Христианстве или же длина, ширина и высота в трехмерном пространстве :) Если это понять, ООП становится совершенно простой и естественной парадигмой программирования.
    Ответ написан
    8 комментариев
  • Как правильно понять этот сложный код?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Учи матчасть...

    /* Функция асинхронной загрузки хеадера */
    function getHeader() {
      $.post('modules/constructor.php',     /* Аппелируем к серверному скрипту по указаному адресу */
          { 'action': "header", 'lang': lang },   /* Передаем параметры на сервер */
           function(data) {                            /* Callback - параметр анонимня функция. Вызывается при удачном запросе */
              $('div#header')                          /* Выбираем #header - но правильнее $('#header'), ибо 2 блока с одним id не правильно */
                 .empty().append(data);           /* Очищает выбраный блок и дописывает к нему полученные данные */
           	}
          ).done(function() {                         /* Событие выполняется после удачного выполнения запроса */
            getFooter()                                 /* Вызов запроса Fotter */
          })
    }
    
    /* далее аналогично но для footer */
     
    function getFooter() {
      $.post('modules/constructor.php',    
          { 'action': "footer", 'lang': lang },    
           function(data) {                            
              $('#footer').empty().append(data); 
           	}
          ).done(function() {
            getScriptHandF();              /* Здесь была синтаксическая ошибка: отсутствие замыкающего ";" */
            getContent(content)
          })
    }
    function getContent(cont) {
      $.post('modules/constructor.php', 
          { 'content': cont, 'lang': lang, 'device': devi },
           function(data) { 
              $('#content-wrapper').empty().append(data); 
           	}
          ).done(function() {
    
    /* Далее человек питался сделать прелоадинг картинок. НО! */
    /* Картинки уже начались загружатся после  выполнения
     колбеков из загрузок getContent, getHeader, getFoоter */
            var paths  = [];                  /* Готовим массив для прелоадинга картинок */
            var images = $('body').find('img');    /* Выбираем все картинки */
            images.each(function() {                  /* Пробегаемся по всем картинкам */
              paths.push($(this).attr('src'));          /* Записываем ссылку на картинку в масив */
            });
             
            preloadImages(paths, function () {   /* Вызывает preloadImages Описания процедуры нет */
              $("html,body").animate({"scrollTop":0},200);  /* Анимирует скроллинг если страница прокручена на верх страницы */
              $('#preload').fadeOut(1000);   /* Анимирует прозрачность кроющего блока #preload */
              getScript();                              /* Вызывает getScript */
              if (cont=="home") getSlider(); /* Вызывает getSlider если страница домашняя */
            });
          })
    }
    Ответ написан
    2 комментария
  • Где найти практику для js и jquery?

    @LiguidCool
    Отличной практикой будет:
    1) Качаешь готовый шаблон (в HTML, CSS, JS).
    2) Открываешь в браузере, делаешь скриншот.
    3) Верстаешь по скриншоту оригинал. Периодически подглядываешь в оригинал, сравниваешь, учишься.
    Такой подход хорош тем, что у тебя всегда перед глазами пример. Если оригинал не плох, то ты очень быстро отучаешься говнокодить.
    Ответ написан
    3 комментария
  • Как правильно понять сей код?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    function historyLoad() {
    	// History - это какая-то обертка над History API, что возвращает метод getState точно неизвестно
    	var State = History.getState();
    
    	// Просто логирование
    	History.log('initial:', State.data, State.title, State.url);
    
    	// Показывается прелоадер
    	$('#preload').fadeIn(200);
    
    	// Если последний символ в url слеш, то:
    	// 1. изменяется глобальная переменная content
    	// 2. выполняется функция getHeader
    	// 3. функция завершает работу
    	if ("/" == State.url.slice(-1))
    	{
    		content = "home";
    		getHeader();
    		return;
    	}
    
    	// Разбиваем url по знаку вопроса (забыли var)
    	str = State.url.split('?');
    
    	// Берем часть после знака вопроса (забыли var)
    	strSplit = str[1];
    
    	console.log(strSplit);
    
    	// Разбивает часть после знака вопроса по амперсанду (забыли var)
    	l = strSplit.split('&');
    
    	// Если есть что-то между знаком вопроса и первым амперсандом
    	if (l[0])
    	{
    		// В зависимости от того, что находится перед первым амперсандом
    		switch (l[0])
    		{
    			case "en":
    			case "ru":
    			case "ua":
    				// изменяем глобальную переменную lang
    				// вызываем функцию getHeader
    				lang = l[0];
    				getHeader();
    				break;
    			default:
    				// если первый элемент перед амперсандом не en, ru или ua:
    				// 1. изменяется глобальная переменная content
    				// 2. выполняется функция getHeader
    				content = "abra";
    				getHeader();
    				break;
    		}
    
    		if (l[1] && undefined != l[1])
    		{
    			// Если что-то есть между первым и вторым амперсандами (ну или просто после первого, если других нет),
    			// записываем эту строку в глобальную переменную content
    			content = l[1]
    		}
    	}
    	else
    	{
    		// Вызывем функцию getHeader
    		getHeader();
    	}
    }
    
    // Выполняем функцию при старте страницы
    historyLoad();
    
    // слушаем изменение url страницы, используя обертку над History API и выполняем функцию historyLoad
    History.Adapter.bind(window, 'statechange', function () { // Note: We are using statechange instead of popstate
    	// Log the State
    	historyLoad();
    });


    Ну а вообще, Виталий Пухов прав - ничего особенного в этом коде нет, после месяца изучения js (то есть синтаксис вы уже хорошо понимаете) спокойно можно разбираться, декомпозируя код на небольшие куски.
    Ответ написан
    Комментировать
  • Как правильно понять этот код?

    function preloadImages() {
        // создаем функцию с помощью Function declaration (инструкции объявления функции)
        // как бы говорим интерпретатору "создай функцию и помести ее в переменную preloadImages"
        if (typeof arguments[arguments.length - 1] == 'function') {
        // в javascript нет "перегрузки" функций, функция может принимать сколько угодно значений
        // доступ к переданным аргументам можно осуществить через "псевдо-массив" arguments
        // arguments.length - возвращает количество переданных аргументов
        // в arguments можно обращаться к аргументу по номеру
        // arguments[arguments.length - 1] - последний параметр функции
        // typeof x - возвращает строку, содержащую информацию о типе операнда x
        // в конечном счете проверяется, является ли последний переданный аргумент функцией
            var callback = arguments[arguments.length - 1];
        // копируем ссылку на эту функцию в переменную callback
        // эта переменная еще в момент вхождения интерпретатора в функцию preloadImages поднимется и будет 
        // в лексическом окружении (LexicalEnvironment) функции
        } else {
            var callback = false;
        // иначе остаемся без коллбэка
        }
        if (typeof arguments[0] == 'object') {
        // если первый аргумент функции является объектом (всё, кроме чисел, строк, true, false, null, undefined)
        // здесь, видимо, мы ждем в первом параметре массив изображений
        // вызов вида preloadImages(['img1.jpg',..., 'imgN.jpg'])
            var images = arguments[0];
        // копируем ссылку из первого аргумента-объекта в переменную images
            var n = images.length;
        // записываем количество элементов в массиве в переменную
        } else {
        // если первый аргумент не объект,
        // скорее всего, на входе ждем список строк-урл картинок
        // preloadImages('img1.jpg',..., 'imgN.jpg')
            var images = arguments;
        // здесь уже копируем ссылку на весь список аргументов
            var n = images.length - 1;
        // записываем в переменную n количество параметров с вычетом одного,
        // видимо, задумывалось, что последним аргументом будет функция-callback
        // иначе последнее изображение не обработается
        }
        var not_loaded = n;
        // временная переменная, количество незагруженных изображений
        for (var i = 0; i < n; i++) {
        // обычный цикл с инкрементом на каждой итерации
            jQuery(new Image()).attr('src', images[i]).load(function() {
        // new Image() - создаем HTMLImageElement, 
        // jQuery(new Image()) - делаем из него jquery объект для возможности работы с ним с помощью методов jquery
        // .attr('src', images[i]) - проставляем объекту атрибут src, что сразу запустит загрузку изображения
        // load(function() { - и привяжемся к событию load изображения
                if (--not_loaded < 1 && typeof callback == 'function') {
        // сначала уменьшаем, потом сравниваем с 1 нашу временную переменную
        // отлавливаем когда у нас все изображения загрузятся,
        // порядок загрузки не важен тут
        // и если в переменную callback попала функция, то
                    callback();
        // вызываем ее
                }
            });
          }
        }
    Ответ написан
    1 комментарий
  • Как развить программистское мышление?

    Neuroware
    @Neuroware
    Программист в свободное от работы время
    Соглашусь с Spetros, умение гуглить жизненоважный навык в программировании) 99% любых задач в том или ином виде уже решались до вас, по 70% уже есть хорошо расжованное описание, 50% есть еще и инструкции, поэтому если у вас не удается найти решение это либо плохо искали, либо неправильно поставлена задача.
    По части второго в программировании нужно уметь разбивать задачу на части (подзадачи). То есть скажем задача найти подстроку во всех файлах папки, сходу не ясно как можно искать сразу во всех файлах, очевидно нужно искать в каждом по очереди, если файлы мелкие то все нормально, можно считать их целиком и потом спокойно делать в них поиск, но если они весом под 24Гб, в таком случае нужно читать файлы построчно и делать поиск подстроки в каждой отдельной строке и т.д.
    Если "в голове" не получается построить полное решение конкретной подзадачи, нужно разбить ее на функциональные части и каждую из них решать как отдельную подзадачу. Вцелом любой, даже неимоверно сложный продукт с миллионом строк кода это лишь совокупность маленьких фрагментов, каждый из которых можно понять.
    Ответ написан
    1 комментарий
  • А вы синхроризируете свои проекты с удаленным каким то сервисом, например гитхаб?

    @j_wayne
    О_о неужели кому-то это неочевидно и кто то этого не делает?...
    Кстати, на bitbucket приватные репозитории бесплатны
    Ответ написан
    2 комментария
  • Карьера программиста после 30+. Миф или реальность?

    max-kuznetsov
    @max-kuznetsov
    Главный IT-архитектор
    Боже, сколько страшилок понаписали!

    Дай-ка и я своё слово вставлю.

    Я начинал свою профессиональную карьеру дважды. Первый раз в 2002-м году. На тот момент мне было 26. Работал с Delphi. Дослужился до ведущего разработчика. Но пришлось сменить направление деятельности. И второй раз снова начал с простого программиста, осваивающего Java и .NET. Это было уже в 35. Сейчас работаю архитектором.

    От одного хорошего человека слышал, что главный инструмент разработчика - его голова и опыт. Я бы ещё добавил сюда интуицию и кругозор. Опыт в начале пути стремится к нулю, но голова в 35 работает лучше, чем в 20, интуиция и кругозор значительно более развиты.

    Что до сил, то да, их в 20 лет больше. Но вот внутренней мотивации и простой мудрости не хватает, так что силы транжирятся почём зря. Нет ещё опыта в том, чтобы ставить перед собой цели и добиваться их. Наличие семьи - тоже важный мотиватор.

    Юность имеет свои преимущества, но они не решающие. И недостатков у молодых программистов тоже много. Так что я бы не стал говорить, что у Вас всё плохо. В 30+ жизнь только начинается. Это я точно знаю!

    P.S. У нас в проектах работают люди разного возраста и пола. Программисты в 30 и старше - хорошее ядро команды. Они вносят стабильность. В том числе и в код. Но иногда нужно их мотивировать на то, чтобы пробовать что-то новое. И тут важно присутствие молодёжи.
    Ответ написан
    2 комментария
  • Бекэнд - что надо, а что нет?

    woonem
    @woonem
    Apache/lighttpd + htaccess / NGINX
    Протоколы: HTTP, HTTPS, Сокеты, RTMP
    Туннелирование, Прокси, Модель OSI
    HTTP-заголовки, в том числе Cookies
    PHP/RoR, HTML, CSS, JS
    long polling, AJAX, JSON - для JS
    IRC (семафоры, PCNTL, LOCK_EX, Mutex, Shared Memory) - для PHP
    Фреймворки: Yii2/Laravel/CodeIgniter/Symfony/Composer - PHP, Angular/React+Redux/Vue/Node - JS
    ООП, Паттерны проектирования (MVC/MVVM/Singleton...)
    SQL (MySQL + PHP, Поисковые технологии (индексирование, выборка)
    Пользоваться: Linux, JSBin, Git/SVN, SSH, VNC, RDP
    Ответ написан
    2 комментария