Ответы, понравившиеся пользователю svilkov87

Как из вертикального меню сделать горизонтальное?

annex @annex

Web Developer

ul li {
    display: inline-block;
}

Ответ написан более трёх лет назад

Комментировать

Как вернуть мотивацию к обучению?

Станислав Макаров @Nipheris

При повторной потере мотивации алгоритм следующий:
1) Идем высыпаемся. По-нормальному так, без будильников. Чтоб глаза вообще больше не закрывались.
2) Если мотивация не вернулась (возвращается в 70% случаев) - берем велик (хотя можно и пешком) - и на улицу. Если есть приличный парк в городе - находим пару нестандартных физ. упражнений (можно боевых), пытаемся выполнить. Работа с телом и физические нагрузки - это совершенно другая часть вашего сознания, про нее нужно не забывать.
3) Если мотивация не вернулась (уже где-то 85% случаев) - берем случайную книгу (не техническую), в идеале - из жанра который вам нравится. Читаем. Спокойно, страницы не считаем.
4) Если не вернулась, повторить с п. 1 до пяти раз, не думая о времени и выполняя только самые важные дела (срочные задачи по учебе, работа, если есть), можно даже попросить родных/знакомых помочь по дому и бытовым делам, чтобы себя разгрузить.
5) Если не помогло после 5 раз, задаем новый вопрос на тостере, подробно описываем что делали).

Хотя бы один из п. 1-3 выполняем для профилактики каждый выходной.
P.S. в принципе плохо сравнивать себя с кем-то - для "сравнения" на свете есть всякие соревнования и состязания, где есть правила и контекст. В жизни правил нет, один учится в MIT, другой учится в колледже в России - какие могут быть сравнения? Вы думаете тут большинство людей за один год все узнало и всего добилось? Вы глубоко заблуждаетесь) PHP-шники-выскочки не в счет, у них искаженное представление о реальности.

Ответ написан более трёх лет назад

11 комментариев

Какие задачи нужно уметь выполнять на JS начинающему?

Павел Волынцев @copist

Empower people to give

Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?

Кроме синтаксических конструкций, математических и логических выражений, нужно знать:

Область видимости переменных
Замыкания
Объектно-ориентированное программирование, в частности наследование через прототипы
Шаблон проектирования "модуль"
Операции над DOM
Понимание принципов событийно-ориентированного программирования

Важно - нужно знать, откуда копипастить.
Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало.

Важно - инструменты программиста JavaScript
У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.

Хотелось бы узнать что это за задачи(упомянутые вами 80%)

Реальные задачи джунов:

Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает.
Важно - читать и понимать чужой код намного важнее, чем писать свой. И на работе тебе это приддётся делать чаще, чем ты думаешь. Чтобы подключить к своему проекту чужую JS либу, нужно понимать что она делает, как она конфигурируется, как управлять её поведением. Скажу точно, что написать свой скрипт, который строит графики, намного сложнее, чем понять, как настраивается highcharts.
Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно
1. Усложнение: удалять можно только буквы в словах, а знаки пунктуации и цифры удалять нельзя
2. Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)
3. Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность
Важно - этим обычно все и занимаются - ищут баги. Только в реальной жизни они и без этого скрипта появляются. И не по одному, а прям пачками.
На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из своего скрипта для построения графиков.
1. Усложнение: на одном графике должны быть два курса, по разным шкалам. Наприме, курс доллара к евро и курс юаня к рублю
2. Усложнение: первоначально график вывести в детализации по месяцам, но чтобы можно было "приблизить" (drilldown) детализацию до дней
3. Усложнение: первоначально график вывести текущем месяце, но чтобы можно было загрузить данные для предыдущего месяца без перезагрузки страницы (AJAX)
При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки.
1. Усложнение: в всплывающем окне сделать навигацию по картинкам, вперёд/назад и к нужной картинке
2. Усложнение: в всплывающем окне вместо картинки показать видео-ролик с Youtube
3. Усложнение: в всплывающем окне показать текст HTML
По клику на кнопку "Click me" показать всплывающую форму.
1. Усложнение: реализовать проверку данных на корректность перед отправкой формы (непустое значение, минимальное количество символов, максимальное количество символов, минимальное числовое значение, максимальное числовое значение)
2. Усложнение: если в значении текстового поля встретилась гиперссылка, то считать её за 22 символа при любой длине этой ссылки (как в твитере)
3. Усложнение: реализовать отправку формы на сервер через AJAX, без перезагрузки страницы
4. Усложнение: саму форму в виде HTML загрузить с сервера через AJAX, в момент клика по кнопке "Click me", правила проверок данных должны как-нибудь "извлечься" из самой загруженной формы, например из аттрибутов полей ввода
К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты.
1. Усложнение: сделать форму календаря мультиязычной. Хотя бы через настройки на том же JavaScript
2. Усложнение: сделать так, чтобы с помощью календаря можно было выбрать диапазон дат, чтобы она была привязана к двум полям формы "дата начала" и "дата окончания", и чтобы значение в поле "дата начала" обязательно была меньше чем в поле "дата окончания"
3. Усложнение: сделать так, чтобы с помощью в календаре можно было видно визуально этот диапазон
4. Усложнение: диапазон может быть открытым, но не пустым, то есть пользователь должен задать хотя бы дату начала или дату окончания.
Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме.
1. Усложнение: сделать селектор "тип устройства", чтобы менять размер фрейма (например, "iPhone 5c 1136x640") и "чекбокс" для смены ориентации страницы "горизонтальная" или "вертикальная" (соответственно 1136x640 или 640x1136)
2. Усложнение: в селекторе тем предусмотреть поиск тем по подстроке, и аналогично поиск устройств по части названия (авто-дополнение, auto-complete)
3. Усложнение: тема страницы должна меняться без перезагрузки фрейма

Задачи повышенной сложности, исходя из личного интереса

Реализовать форму для многошагового мастера: форма должна состоять из нескольких страниц (шагов), пользователь может переключать страницы через какие-нибудь элементы управления "вперёд/назад" или "перейти на страницу".
1. Усложнение: реализовать функциональную связь значений, когда некоторые данные зависят друг от друга (ввёл число в поле "количество" и в поле "сумма" значение пересчиталось)
2. Усложение: доступность некоторых полей ввода должна зависеть от данных (например, если указал "есть личный самолёт", то значит можно ввести "марка самолёта")
3. Усложение: видимость некоторых страниц должна зависеть от данных из предыдущих страниц (например, если указал "есть личный самолёт", значит появилась страница "ТТХ самолёта"; иначе страница должна скрыться)
Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat"
1. Усложнение: два игрока на разных компьютерах, ходы передаются по websocket
2. Усложнение: ограничение на ожидания окончания хода 15 секунд, по окончании ожидания автоматически делается случайный ход
Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включен, строка зачёркивается.
1. Усложнение: пользователь может переименовывать, удалять, добавлять строки
2. Усложнение: список хранить в localStorage браузера, чтобы при перезагрузке страницы он восстанавливался
3. Усложнение: пользователь может иметь несколько независимых списков todo
Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул.
1. Усложнение: добавить переключатель режимов "точка"/"линия", в режиме "линия" рисуются линии между двумя последовательно кликнутыми точками
2. Усложнение: можно менять толщину, цвет линий, размер точек
3. Усложнение: последовательность кликов можно воспроизвести ещё раз с самого начала, равномерно или с реальной задержкой между кликами, с обычной скоростью или ускоренно
4. Усложнение: можно выгрузить получившийся рисунок в формате PNG или SVG, причём SVG c анимацией воспроизведения

Можно использовать любую существующую библиотеку.
Например,
для построения графиков www.highcharts.com
для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox и https://jqueryui.com/dialog/
для валидации форм rickharrison.github.io/validate.js
для календаря https://jqueryui.com/datepicker/
для автодополнения https://jqueryui.com/autocomplete/
для передачи данных между несколькими пользователями socket.io или обычный AJAX

Ответ написан более трёх лет назад

16 комментариев

Как вернуть мотивацию к обучению?

Думай Головой @Vyad

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

Ответ написан более трёх лет назад

5 комментариев

Как вернуть мотивацию к обучению?

Alex Chistyakov @alexclear

A cat

> А сегодня "напали" мысли что у меня ничего не получится, что я просто так трачу время и в конце концов я признался себе что я по сути никто.

Парадокс состоит в том, что, чем больше человек знает в той или иной области, тем лучше он понимает, как много ему еще предстоит узнать.
Не забывайте, что мозг при функционировании тратит огромное количество калорий. Если Вы не занимаетесь мыслительной деятельностью ежедневно, организм сильно протестует против подобных расходов. Единственный способ побороть инстинктивное сопротивление организма - не прекращать думать и развиваться дальше.

> Как вернуть мотивацию? Как заставить себя осознать что время которое я трачу на обучение проходит не зря?

Попробуйте записывать свой прогресс. Если Вы разработчик, то Вы в любом случае записываете Ваш прогресс в виде кода. Вернитесь через полгода и посмотрите на этот код - Вам станет очевидно, что полгода прошли не зря.

Ответ написан более трёх лет назад

6 комментариев

Почему меню не выпадает?

Роман Нестерук @Romanssski

jquery первым в списке подключите

Ответ написан более трёх лет назад

2 комментария

Одна страница - один html файл, а если страниц множество??

Павел @mrusklon

Не получается? Яростно гугли!

я в таких случаях советую использовать include php , если не хочется натягивать на cms.
Делаем несколько однотипных блоков которые есть на множестве страниц , например footer.php и его подключаем в index.php , таким образом выйдет оооочень простой и удобный способ править почти весь сайт

Ответ написан более трёх лет назад

3 комментария

Одна страница - один html файл, а если страниц множество??

Валера Удав @TARAKANhoy

Безусловно нет. А если страниц 1000? Тут на помощь приходят языки веб-программирования, которые автоматизируют процессы генерации страниц. Начни изучение PHP и будет тебе счастье)

p.s. как вариант, если нет желания углубляться в программирование, попробуй CMS системы, которые уже написаны за тебя и выполняют все основные задачи сайта, только надо настроить.

Ответ написан более трёх лет назад

8 комментариев

Можно ли начать изучать JS зная CSS+HTML?

Павел @mrusklon

Не получается? Яростно гугли!

если ты можешь что то сверстать , ты знаешь html , а если можешь сверстать красивый шаблон то и css знаешь хорошо.
Js учить нужно только в таком порядке , ты готов.

Ответ написан более трёх лет назад

1 комментарий

Как сделать простой php маршрутизатор (роутер)?

Евгений Д. @devg

I am Yenior software developer

Очень простой роутер, не без недостатков, но довольно быстрый и легко использовать, дописывать под себя.

<?php
/**
 * Простой роутер
 * @devg
 */
final class RouterLite {

  public static $routes = array();
  private static $params = array();
  public static $requestedUrl = '';

  /**
   * Добавить маршрут
   */
  public static function addRoute($route, $destination=null) {
    if ($destination != null && !is_array($route)) {
      $route = array($route => $destination);
    }
    self::$routes = array_merge(self::$routes, $route);
  }

  /**
   * Разделить переданный URL на компоненты
   */
  public static function splitUrl($url) {
    return preg_split('/\//', $url, -1, PREG_SPLIT_NO_EMPTY);
  }
  
  /**
   * Текущий обработанный URL
   */    
  public static function getCurrentUrl() {
    return (self::$requestedUrl?:'/');
  }

  /**
   * Обработка переданного URL
   */
  public static function dispatch($requestedUrl = null) {

      // Если URL не передан, берем его из REQUEST_URI
      if ($requestedUrl === null) {
        $uri = reset(explode('?', $_SERVER["REQUEST_URI"]));
        $requestedUrl = urldecode(rtrim($uri, '/'));
      }

      self::$requestedUrl = $requestedUrl;

      // если URL и маршрут полностью совпадают
      if (isset(self::$routes[$requestedUrl])) {
        self::$params = self::splitUrl(self::$routes[$requestedUrl]);
        return self::executeAction();
      }

      foreach (self::$routes as $route => $uri) {
        // Заменяем wildcards на рег. выражения
        if (strpos($route, ':') !== false) {
          $route = str_replace(':any', '(.+)', str_replace(':num', '([0-9]+)', $route));
        }

        if (preg_match('#^'.$route.'$#', $requestedUrl)) {
          if (strpos($uri, '$') !== false && strpos($route, '(') !== false) {
            $uri = preg_replace('#^'.$route.'$#', $uri, $requestedUrl);
          }
          self::$params = self::splitUrl($uri);
            
          break; // URL обработан!
        }
      } 
      return self::executeAction();
  } 

 /**
   * Запуск соответствующего действия/экшена/метода контроллера
   */
  public static function executeAction() {
    $controller = isset(self::$params[0]) ? self::$params[0]: 'DefaultController';
    $action = isset(self::$params[1]) ? self::$params[1]: 'default_method';
    $params = array_slice(self::$params, 2);

    return call_user_func_array(array($controller, $action), $params);
  }

}
?>

Пример использования:

<?php
// маршруты (можно хранить в конфиге приложения)
// можно использовать wildcards (подстановки):
// :any - любое цифробуквенное сочетание
// :num - только цифры
// в результирующее выражение записываются как $1, $2 и т.д. по порядку

$routes = array(
  // 'url' => 'контроллер/действие/параметр1/параметр2/параметр3'
  '/' => 'MainController/index', // главная страница
  '/contacts' => 'MainController/contacts', // страница контактов
  '/blog' => 'BlogController/index', // список постов блога
  '/blog/:num' => 'BlogController/viewPost/$1' // просмотр отдельного поста, например, /blog/123
  '/blog/:any/:num' => 'BlogController/$1/$2' // действия над постом, например, /blog/edit/123 или /blog/dеlete/123
  '/:any' => 'MainController/anyAction' // все остальные запросы обрабатываются здесь
));

// добавляем все маршруты за раз
RouterLite::addRoute($routes);

// а можно добавлять по одному
RouterLite::addRoute('/about', 'MainController/about');

// непосредственно запуск обработки
RouterLite::dispatch();
?>

UPDATE (07.08.2017):
Дальнейшее развитие данного роутера см. в проекте Litero (https://github.com/bit55/litero)

Ответ написан более трёх лет назад

1 комментарий

Где посмотреть видео про использование Git?

FanKiLL @FanKiLL

Есть переведённые курсы от lynda.com про git - если вам именно на русском надо
rutracker.org/forum/viewtopic.php?t=4782388

Но лучше в оригинале смотреть
rutracker.org/forum/viewtopic.php?t=4178341

Я вам ничего не давал и меня тут вообще не было.

Ответ написан более трёх лет назад

Комментировать

Автоматическое выравнивание html кода SublimeText 3?

Eugene Obrezkov @ghaiklor

NodeJS TechLead

Используйте хоткеи на Reindent.
Открываете User Hotkeys и пишите

[
    {
        "keys": ["ctrl+shift+r"],
        "command": "reindent",
        "args": {
            "single_line": false
            }
        }
]

Ответ написан более трёх лет назад

5 комментариев

Как правильно учить Javascript?

Денис Инешин @IonDen

JavaScript developer. IonDen.com

Вы наверное слышали, что каждый уважающий себя программист обязан написать несколько велосипедов? И JavaScript-программисты тоже так делают и еще как! Так вот в этом нет ничего плохого, это отличное самообучение.

Для начала заходите на любой каталог плагинов для JavaScript или jQuery. Находите интересный, не очень сложный на вид плагинчик (например карусель, лайтбокс, слайдер и т.п.) и пытаетесь сделать похожий, только лучше. Поначалу будет выходить черти что, но, это будет уже реальная задача, где вы начнете сталкиваться с реальными особенностями языка. Вот тут то знания и начнут обретать какую-то структуру у вас в голове.

Не пытайтесь брать сразу сложные вещи, начинайте с малого. Как заметили выше, не смотрите пока что на очень сложные книжки, их читать сейчас почти бесполезно.

Ответ написан более трёх лет назад

6 комментариев

PHP, ООП. Практическое изучение

Eternalko @Eternalko

> я не «въезжаю» в саму суть ООП

Стандартной задачей является класс пользователя.
class user.
Свойства
user_id
user_name
user_email
user_pass
Методы.
login
add_new_user
logout

Вот от этого и начнете «врубаться» что такое ООП и зачем оно нужно на практике.
Инкапсуляции и полиморфизмы оставьте на потом :)

Ответ написан более трёх лет назад

1 комментарий

Войдите на сайт