• Оценка своего уровня. Как улучшить код?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    1. Используйте const вместо let для определения переменных которые не переопределяются в коде. Это помогает снизить когнитивную нагрузку с человека читающего код и негласный стандарт в React разработке.

    2. Такие вещи как globalStyles и конфигурацию store лучше вынести в отдельные файлы. Они могут со временем хорошо разрастись.
    По поводу globalStyles, вы вообще можете вынести их в отдельный css файл.

    3. Вместо:
    {
      isModal
      ? <Route path="/auth" component={AuthPopup} />
      : null
    }

    лучше:
    {isModal && <Route path="/auth" component={AuthPopup} />}


    4. Вместо:
    function mapDispatchToProps(dispatch) {
        return {
            autoLogin: () => dispatch(autoLogin()),
            getBrowser: () => dispatch(getBrowser()),
            getMedia: () => dispatch(getMedia())
        }
    }


    лучше:
    const mapDispatchToProps = {
      autoLogin,
      getBrowser,
      getMedia,
    };


    5. Точки с запятыми в конце то есть, то нет. Определитесь и приведите код к одному виду.

    6.
    & label {}
    & input {}
    & span {}

    Это не очень хороший подход. Во-первых ваши стили не изолированные, что может приводить к неожиданным результатам. Во-вторых у вас очень много дублирования стилей. Определите Input и Label как базовые компоненты и используйте в разных местах, то же с остальным если есть.

    7. Почему папка со страницами называется Containers? Дань бойлерплейтам?

    8. Использование trailing comma является хорошей практикой.

    9.
    import {combineReducers} from 'redux';
    import photoReducer from './photoReducer';
    import authReducer from './authReducer';
    import globalReducer from './globalReducer';
    
    export default combineReducers({
        photoReducer, authReducer, globalReducer
    })


    Все таки приятней работать с хранилищем в котором ключи не имеют в названии слова reducer:
    import {combineReducers} from 'redux';
    import photo from './photoReducer';
    import auth from './authReducer';
    import global from './globalReducer';
    
    export default combineReducers({
      photo, 
      auth,
      global,
    });


    10. Забудьте вообще, что в языке есть возможность использовать вложенный тернарный оператор:
    return e === 'invalid-email' ? 'Неверно указан e-mail'
        : e === 'user-not-found' ? 'Указанный e-mail на найден'
        : e === 'wrong-password' ? 'Неверный пароль'
        : e === 'email-already-in-use' ? 'Указанный e-mail уже используется'
        : e === 'network-request-failed' ? 'Нет подключения к интернету'
        : e === 'operation-not-allowed' ? 'Произошла ошибка, попробуйте снова'
        : e === 'popup-closed-by-user' ? 'Окно авторизации закрыто пользователем'
        : e === 'account-exists-with-different-credential' ? 'Аккаунт уже существует с другими данными, используйте другой способ авторизации'
        : e

    Это одна из самых худших практик в JavaScript разработке. Тут лучше подойдет конструкция switch case

    11. Константы actionTypes лучше вынести в папку constants и разложить по разным файлам, иначе со временем у вас там будет свалка.

    12. Вместо:
    import {SET_ACTIVE, CHANGE_VALUE, SET_DEFAULT, UPLOAD, UPDATE_IMAGE, SET_IMAGE_ERROR, SET_LIKE, SET_COMMENT, ADD_ARTICLE_SUCCESS, FETCH_ARTICLES_START, FETCH_ARTICLES_SUCCESS, FETCH_ARTICLES_ERROR} from '../actions/actionTypes';

    Лучше:
    import {
      SET_ACTIVE,
      CHANGE_VALUE,
      SET_DEFAULT, UPLOAD,  
      UPDATE_IMAGE,
      SET_IMAGE_ERROR,
      SET_LIKE,
      SET_COMMENT,
      ADD_ARTICLE_SUCCESS,
      FETCH_ARTICLES_START,
      FETCH_ARTICLES_SUCCESS,
      FETCH_ARTICLES_ERROR,
    } from '../actions/actionTypes';


    13. Попробуйте внедрить библиотеку reselect. И для получения значения из store вместо записи вида:
    function mapStateToProps(state) {
        return {
            browser: state.globalReducer.browser
        }
    }


    использовать селектор:
    const mapStateToProps = state => ({
      browser: browserSelector(state),
    });
    Ответ написан
  • Пример хорошего ТЗ/гайдлайна для вёрстки?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Основные требования: здесь
    Примеры стайл-гайдов: здесь

    1. Требования к вёрстке: здесь, здесь, здесь, здесь
    2. Как проверять качество вёрстки: здесь.
    3. Как определять стоимость (трудозатраты) вёрстки одной унифицированной страницы: здесь.
    4. Требования к дизайнеру: здесь и здесь.
    5. Пример документации (генератор шаблона, Helix3 для CMS Joomla!): здесь
    6. Готовые "скелеты" шаблонов HTML5 для начала вёрстки: простой (с поясняющими комментариями), www.initializr.com (ещё 3 простых) и максимально полный html5boilerplate.com.
    7. Вопросы на вакансию верстальщика (front-end developer): здесь

    Бонус по-теме: Turning Design Mockups Into Code With Deep Learning
    Ответ написан
  • Что можно написать на Node.js?

    MarcusAurelius
    @MarcusAurelius
    автор Impress Application Server для Node.js

    Часто применяется для:

    1. Локальные приложения и утилиты командной строки
    • Сборщики и трансляторы
    • Пакетная обработка и сценарии отложенной обработки
    • Скрипты, CLI (интерфейсы командной строки)
    • Генерация документации, отложенное формирование отчетов
    • Сценарии тестирования для других систем

    2. Серверы
    • Серверы веб-приложений и SPA
    • Серверы и API для мобильных приложений
    • Любые другие веб-API (RPC, JSON, REST)
    • Серверы сообщений и трансляция событий (чаты, игры, интерактив)
    • Заплаты на уже готовые системы, написанные на других языках, для реализации вебсокетов, SSE, лонг-пулинга и т.д., т.е. для затыкания дыр, для решения проблем в узких местах уже работающих систем.

    3. Клиенты
    • Оконные приложения (nw.js, node-webkit)
    • Кравлеры, парсеры и сбор данных

    4. Железо
    • Программирование микроконтроллеров (arduino, espruino, tessel)
    • Промышленная автоматизация

    Редко применяется (но подходит) для:
    • CMS, публикация контента (просто ниша уже занята и в этой задаче нода не дает чего-то принципиально нового или сверх соблазнительного).
    • Массовая электронная коммерция и торговля (не применяется для массовых движков магазинов, но используется отдельными крупными компаниями для торговых и платежных задач в качестве дополнительного средства к уже имеющемуся ПО, по сути закрывает узкие места).

    И плохо подходит:
    • Вычисления и моделирование, со скоростью математических операций нода и JS, как не типизированный язык, не дают хороших показателей
    • Научные приложения (по тем же причинам)
    Ответ написан
  • Как быстро верстать (нужен совет как быть дальше)?

    Препроцессоры на полную мощь (попробуйте jade для html), gulp, библиотека снипетов, опыт, опыт и ещё раз опыт.

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

    Ну и самое главное:
    846381d51bb74da8b80e2558501ceb5e.png

    Позиционируйте себя, находите своего клиента.
    Быстро хотят все, но есть и те кто понимает, что лучше подождать немного дольше и получить готовый, кроссбраузерный, качественный продукт. Чем кривую поделку, которую потом в 2 раза дольше править.
    Ответ написан
  • Как создавать архитектуру JavaScript приложений?

    @Elizavetta
    Matroid: gamedev/js-разработка
    Паттерны в JS уже прочитали?
    Возможно, вы не уделяете внимание рефакторингу по мере написания приложения. Про рефакторинг можно много читать, например вот
    Ответ написан
  • Какие задачи нужно уметь выполнять на JS начинающему?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?


    Кроме синтаксических конструкций, математических и логических выражений, нужно знать:
    • Область видимости переменных
    • Замыкания
    • Объектно-ориентированное программирование, в частности наследование через прототипы
    • Шаблон проектирования "модуль"
    • Операции над DOM
    • Понимание принципов событийно-ориентированного программирования
    Важно - нужно знать, откуда копипастить.
    Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало.

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

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


    Реальные задачи джунов:
    1. Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает.
      Важно - читать и понимать чужой код намного важнее, чем писать свой. И на работе тебе это приддётся делать чаще, чем ты думаешь. Чтобы подключить к своему проекту чужую JS либу, нужно понимать что она делает, как она конфигурируется, как управлять её поведением. Скажу точно, что написать свой скрипт, который строит графики, намного сложнее, чем понять, как настраивается highcharts.

    2. Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно
      1. Усложнение: удалять можно только буквы в словах, а знаки пунктуации и цифры удалять нельзя
      2. Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)
      3. Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность
      Важно - этим обычно все и занимаются - ищут баги. Только в реальной жизни они и без этого скрипта появляются. И не по одному, а прям пачками.

    3. На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из своего скрипта для построения графиков.
      1. Усложнение: на одном графике должны быть два курса, по разным шкалам. Наприме, курс доллара к евро и курс юаня к рублю
      2. Усложнение: первоначально график вывести в детализации по месяцам, но чтобы можно было "приблизить" (drilldown) детализацию до дней
      3. Усложнение: первоначально график вывести текущем месяце, но чтобы можно было загрузить данные для предыдущего месяца без перезагрузки страницы (AJAX)

    4. При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки.
      1. Усложнение: в всплывающем окне сделать навигацию по картинкам, вперёд/назад и к нужной картинке
      2. Усложнение: в всплывающем окне вместо картинки показать видео-ролик с Youtube
      3. Усложнение: в всплывающем окне показать текст HTML

    5. По клику на кнопку "Click me" показать всплывающую форму.
      1. Усложнение: реализовать проверку данных на корректность перед отправкой формы (непустое значение, минимальное количество символов, максимальное количество символов, минимальное числовое значение, максимальное числовое значение)
      2. Усложнение: если в значении текстового поля встретилась гиперссылка, то считать её за 22 символа при любой длине этой ссылки (как в твитере)
      3. Усложнение: реализовать отправку формы на сервер через AJAX, без перезагрузки страницы
      4. Усложнение: саму форму в виде HTML загрузить с сервера через AJAX, в момент клика по кнопке "Click me", правила проверок данных должны как-нибудь "извлечься" из самой загруженной формы, например из аттрибутов полей ввода

    6. К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты.
      1. Усложнение: сделать форму календаря мультиязычной. Хотя бы через настройки на том же JavaScript
      2. Усложнение: сделать так, чтобы с помощью календаря можно было выбрать диапазон дат, чтобы она была привязана к двум полям формы "дата начала" и "дата окончания", и чтобы значение в поле "дата начала" обязательно была меньше чем в поле "дата окончания"
      3. Усложнение: сделать так, чтобы с помощью в календаре можно было видно визуально этот диапазон
      4. Усложнение: диапазон может быть открытым, но не пустым, то есть пользователь должен задать хотя бы дату начала или дату окончания.

    7. Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме.
      1. Усложнение: сделать селектор "тип устройства", чтобы менять размер фрейма (например, "iPhone 5c 1136x640") и "чекбокс" для смены ориентации страницы "горизонтальная" или "вертикальная" (соответственно 1136x640 или 640x1136)
      2. Усложнение: в селекторе тем предусмотреть поиск тем по подстроке, и аналогично поиск устройств по части названия (авто-дополнение, auto-complete)
      3. Усложнение: тема страницы должна меняться без перезагрузки фрейма



    Задачи повышенной сложности, исходя из личного интереса
    1. Реализовать форму для многошагового мастера: форма должна состоять из нескольких страниц (шагов), пользователь может переключать страницы через какие-нибудь элементы управления "вперёд/назад" или "перейти на страницу".
      1. Усложнение: реализовать функциональную связь значений, когда некоторые данные зависят друг от друга (ввёл число в поле "количество" и в поле "сумма" значение пересчиталось)
      2. Усложение: доступность некоторых полей ввода должна зависеть от данных (например, если указал "есть личный самолёт", то значит можно ввести "марка самолёта")
      3. Усложение: видимость некоторых страниц должна зависеть от данных из предыдущих страниц (например, если указал "есть личный самолёт", значит появилась страница "ТТХ самолёта"; иначе страница должна скрыться)

    2. Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
    3. Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat"
      1. Усложнение: два игрока на разных компьютерах, ходы передаются по websocket
      2. Усложнение: ограничение на ожидания окончания хода 15 секунд, по окончании ожидания автоматически делается случайный ход

    4. Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включен, строка зачёркивается.
      1. Усложнение: пользователь может переименовывать, удалять, добавлять строки
      2. Усложнение: список хранить в localStorage браузера, чтобы при перезагрузке страницы он восстанавливался
      3. Усложнение: пользователь может иметь несколько независимых списков todo

    5. Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул.
      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
    Ответ написан
  • Как составить план проектирования проекта?

    MarcusAurelius
    @MarcusAurelius
    автор Impress Application Server для Node.js
    Идея/концепция к проектированию не относится, это отдельный предварительный этап. Для проектов побольше, и в общем случае, проектирование включает такие шаги, многие из которых, конечно, можно пропустить или сократить до минимума, если задача не сложная:
    1. Системный анализ и изучение предметной области
    2. Формирование требований к разрабатываемой системе
    3. Архитектуная задача, которая сводится к простой формуле: разделять, называть и связывать подсистемы
    3.1. Декомпозиция сложных задач
    3.2. Слои (построение слоев абстракций)
    3.3. Планирование топологии системы, программной и серверной инфраструктур
    3.4. Решение вопроса интеграции подсистем, программные интерфейсы, контракты и связывание
    3.5. Интеграция с унаследованными приложениями
    3.6. Минимизация изменений, для случаев, когда постоянно происходят изменения в предметной области
    4. Выбор инструментов решения
    4.1. Выбор парадигм программирования и языков
    4.2. Выбор технологий и платформ
    4.3. Выбор моделей данных, алгоритмов и библиотек
    4.4. Выбор топологий и протоколов
    4.5. Выбор паттернов программирования
    5. Предварительные исследования
    5.1. Проверка гипотез, эксперименты
    5.2. Изучение особенностей технологий
    5.3. Прототипирование
    6. Задачи обеспечения надежности
    6.1. Планирование безопасности и защиты от несанкционированного доступа
    6.2. Планирование отказоустойчивости
    6.3. Планирование мер по обслуживанию системы в режиме эксплуатации
    6.4. Задачи высоких нагрузок, балансировки и масштабирования, если таковые предполагаются
    7. Организация процесса разработки
    7.1. Жизненный цикл программной системы
    7.2. Конвенции кода, соглашения и стандарты
    7.3. Оценка необходимых временных и финансовых ресурсов для разработки системы
    7.4. Календарный план
    7.5. Анализ и минимизация рисков, выявление слабых мест технологий и коллектива
    7.6. Закрепление принципов управления процессом разработки и корректировки задания в процессе
    8. Сборка технического задания из результатов всех предыдущих пунктов
    Ответ написан
  • Бекэнд - что надо, а что нет?

    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
    Ответ написан
  • Из верстальщика во фронт-ендера, какие технологии изучать в дальнейшем?

    Teol
    @Teol
    Мобильный разработчик @OK.ru
    HTML, CSS – база для верстальщика
    Желательно интересоваться UIX частью, тоесть как делать "человекоудобно", что не всегда красиво в коде.

    Переходим во фронтенд:
    JQ (?) - надобность его падает пропорционально написанным велосипедам по работе с домом, анимациями и пониманием Ajax.
    EcmaScript (чистый js, он же "ванилла", но боже упаси произносить это вслух в приличном месте) + паттерны программирования – я бы выделил это все двойным болдом и тройным подчеркиванием. Это база фронтендера.
    Немного bash-а для терминала.
    NodeJS – суть тот же JS, но с привкусом бэкенда, полезно для понимания, как ваши странички вообще доставляются пользователю, какие самые банальные проблемы это в себе таит, и снова понятнее, как работает Ajax.
    Идем дальше и глубже –Stylus | LESS | SASS - препроцессоры, лучше уже хорошо владеть нативным CSS, пониманием атомарного дизайна, модульности и тп. Ощущения от использования словно получил суперсилу для верстальщика, хорошо сочетается с общим пониманием программрования. Есть еще постпроцессоры – их суть в том, что они работают с готовым кодом, когда препроцессоры компилируются в тот самый "готовый" код.
    Шаблонизаторы разметки – Mustache, Handlebars, Jade, EJS, React.

    Упрощаем работу:
    GIT – система версионирвоания – порядок в работе и бекапы. Качественный левелап даже для команды из одного.
    Сборщики Gulp, Grunt, ... и их плагины + пакетные менеджеры (NPM, Bower, ...) - автоматизация тех действий которые набили оскомину, сборка проекта, автоматическая генерация стилей из препроцессора, сборка бандлов, минификация и прочая томуподобная рутина (в которой, однако, не вредно по началу натереть мозолей)

    Чувствуем себя крутым:
    Учим MV* – Ember, Angular, Knockout
    Фреймворки вроде d3.js и работа с канвасом.

    Когда более менее освоетесь с JS:
    Попробовать поучить С++, Java, ... – это не так важно что, к чему душа ляжет. Для общего развития и понмиания программирования.
    Ответ написан
  • Как правильно администрировать VPS?

    HeadOnFire
    @HeadOnFire Куратор тега WordPress
    PHP, Laravel & WordPress Evangelist
    Ни в коем случае не ставить никаких ISP Manager / Vesta / CPanel, иначе никогда не научитесь тому, чему хотите научиться. Кроме того, они жрут ресурсы. Даже Vesta, которая самая легкая, их жрет прилично, а я сильно сомневаюсь, что у вас VPS c 8+ Gb памяти.

    Изучать надо по урокам и статьям, читая мануалы и best practices по каждому package. Порядок, плюс-минус, таков:

    - развернули ось
    - сделали сразу апдейты
    - создали и настроили swap
    - поменяли пароль рута на что-нибудь супер-мега-сложное (его мы использовать все равно не будем)
    - создали себе обычного юзера с паролем нормальной сложности (он будет использоваться для sudo)
    - дали юзеру права sudo
    - закрутили гайки по SSH - сменили порт, запретили вход руту и вход по паролю (только по ssh-ключам), разрешили вход только одному своему новому логину
    - настроили UFW - простой, но эффективный firewall на основе iptables - default deny, allow http, https, свой кастомный ssh-порт. Если логиниться будете только из нескольких мест (офис, дом) - можно вообще ssh разрешить только на эти IP.
    - sudo dpkg-reconfigure tzdata чтобы установить свою временную зону, так логи потом легче читать и понимать
    - настроили logrotate
    - настроили logwatch
    - настроили Postfix, чтобы сервер вам письма мог слать (мы его настраиваем на внешний мейлер, например Mandrill, чтобы все письма точно в спам не падали)
    - настроили fail2ban (потом, после установки и настройки веб-сервера и сайтов, в fail2ban можно дополнения писать, например мы на WordPress-сайтах мониторим попытки авторизации в админку и блочим тем же fail2ban)
    - дальше ставим все что нужно - Git, Nginx, HHVM, PHP5-FPM, MariaDB, Memcached/Redis и так далее.

    Регулярно заходите на сервер, делайте apt-get update && apt-get dist-upgrade.

    p.s.: это по ubuntu/debian, для других систем все то же самое, но packages и команды могут немного отличаться
    Ответ написан
  • Поздний старт в ИТ - есть ли шансы?

    zo0m
    @zo0m
    full stack developer
    какой-то вы неуверенный слишком
    я собеседовал достаточно много студентов и возраст скорее играет на вас
    "Что делал? тебе столько лет, а где опыт?", конечно спросят, только не для того чтобы вас топить, а для того чтобы понять что за человек сидит.
    Если на собеседованиях будете хорошо отвечать -- у вас нет причин не попасть куда-угодно.

    псц, ПОЗДНИЙ СТАРТ в 26 ??? я видел взрослых мужиков за 40 полностью меняющих работу на IT, а вам 26...

    чувак иди проспись
    Ответ написан
  • CSS. Что интересного есть в вашем стандартном шаблоне?

    @Boshnik
    normalize.css
    +
    /* Mobile Screen Resizing */
    @-webkit-viewport {
      width: device-width;
      zoom: 1.0;
    }
    @-moz-viewport {
      width: device-width;
      zoom: 1.0;
    }
    @-ms-viewport {
      width: device-width;
      zoom: 1.0;
    }
    @-o-viewport {
      width: device-width;
      zoom: 1.0;
    }
    @viewport {
      width: device-width;
      zoom: 1.0;
    }


    /* Выравнивание по центру */
    .absolute.center,
    .fixed.center {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .center, .right.left{ 
      margin:auto 
    }
    .top    { top:0  }
    .right  { right: 0 }
    .bottom { bottom: 0 }
    .left   { left: 0 }


    /* btn disabled */
    .btn-disabled {
      background: #ccc !important;
      cursor: not-allowed !important;
      background: #ccc !important;
    }
    .btn-disabled:hover {
      -webkit-box-shadow:none !important;
              box-shadow:none !important;
      background: #ccc !important;
    }


    /* img gray*/
    .img-gray {
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
      filter: gray; /* IE 6-9 */
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
    }
    .img-color:hover {
      -webkit-filter: none;
      -moz-filter: none;
      -ms-filter: none;
      -o-filter: none;
      filter: none;
      filter: none; /* IE 6-9 */
    }


    /* background */
    .parallax {
    	background-size: cover;
    	background-attachment: fixed;
    	background-position: center center;
    	background-repeat: no-repeat;
    }
    .bg-cover {
    	background-size: cover;
    	background-position: center center;
    	background-repeat: no-repeat;
    }


    P.S. background-image задаю в инлайн стилях, удобно при работе с CMS MODX
    Ответ написан
  • Какие есть развивающие игры для будущих программистов?

    Bandicoot
    @Bandicoot
    Backend Developer since 2015
    Тоже интересовался этим вопросом:
    На каких ресурсах можно программировать на JS для фана?
    Какие игры для программистов на JS, PHP, Python вы знаете?

    Но какими бы увлекательными не были эти забавы, это всего лишь игры, малополезное времяпрепровождение. Реальная проектная работа - вот что нужно.
    Ответ написан
  • Как начать заниматься фрилансом? Как начать программировать с нуля?

    maxlips
    @maxlips
    Dev
    Советую начать с HTML+CSS, PHP, т.к. это попса. Работы много, поэтому найти работу джуниора будет просто. Дальше уже решите, какое направление более интересно.

    План.

    Очень быстрый вариант:
    1. ~ 30 дней — Книга по HTML+CSS, книга по PHP+MySQL, написать свой блог на чистом PHP
    2. ~ 180 дней — работа джуниором в любой компании
    Через 210 дней вы уже можете попробовать устроится в хорошую компанию джуниором. Ходить по собеседованиям везде, куда приглашают. Скорее всего вас будут переучивать, но опыт дебагинга говно-кода тоже хорош.

    Быстрый вариант:
    1. ~ 30 дней — Одна хорошая книга по HTML+CSS (любая, гугли отзывы)
    2. ~ 50 дней — Одна хорошая книга по PHP + MySQL
    3. ~ 180 дней — Сделать простой сайт на чистом PHP, далее блог, далее простой интернет-магазин. Гуглим. Гуглим на английском.
    4. ~ 50 дней — читаем статьи по ООП, MVC, изучаем любой популярный MVC фреймворк.
    5. ~ 90 дней — делаем простой сайт, блог, простой интернет-магазин на MVC фреймворке.
    Через 400 дней вы уже можете попробовать устроится в хорошую компанию джуниором. Ходить по собеседованиям везде, куда приглашают.

    Самый главный совет — на стадии джуниора не выбирайте работу по зарплате! Выбирайте компанию и людей, с которыми будете работать. Работа в говно-компании это потеря времени.
    Ответ написан
  • Каким должен быть собственный проект для устройства на работу?

    5angel
    @5angel
    Фронтенд-лид
    Свои проекты показывать можно и нужно. А лучше всего – не просто показать, а рассказать о том, как шла разработка, с какими проблемами вы столкнулись и как их решали. Если вы таким образом хотите повысить свои шансы на получение работы, то проект должен показать, что вы хорошо владеет предметом как с теоретической, так и с практической точки зрения. Я говорю здесь даже не о Ruby, интересные вещь можно написать на любом языке.

    На что нужно обратить внимание:
    Архитектура. Грамотно спроектированная система – залог успеха всего предприятия.
    Производительность. Здесь можно показать как алгоритмическую подготовку и умение работать с базами данных, так и знание особенностей конкретного языка.
    Тестирование и документация. Покрытие тестами и описание функционала, начиная от основных модулей и заканчивая отдельными функциями – тот идеал, которого стараются (но не могут) достигнуть во всех уважающих свою разработку компаниях.

    Если у коллег есть какие-либо дополнения, прошу (:
    Ответ написан
  • Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей?

    5angel
    @5angel
    Фронтенд-лид
    Давайте обратимся к данной публикации, чтобы понять примерные тренды, потому что наиболее выгодный вариант – это все же фронтендер.

    Вкратце, полноценный клиентский разработчик должен знать:
    – html5/css3 + bootstrap
    – один-два препроцессора (less/stylus)
    – чистый js и пару-тройку клиентских библиотек или фреймворков (knockout/backbone/angular/react)
    – немного node.js, чтобы уметь пользоваться пакетным менеджером (npm) и билд-менеджером (gulp/grunt)

    Этот список покрывает большинство клиентских задач в средней студии или стартапе.

    В реальности, от разработчика требуется только одно – уметь быстро накостылять какую-нибудь фичу к релизу, который должен был быть вчера. Собственно, если внимательно посмотреть на список, который я привел, можно заметить, что все эти вещи направлены на максимально быструю разработку – тут костыль, там костыль – и в продакшн. Как бы ни пытались нагнать пафоса на собеседовании, в бою будет именно так.

    Другой вопрос – что со всем этим делать.

    Я обычно предлагаю попытаться начать свой маленький проект. Какой-нибудь простенький личный сайт, игру на js (тот же flappy bird или 1048 – много ума здесь не нужно). Посложнее – свою тему или библиотечку. Это будет хорошим практическим опытом, который не стыдно описать в резюме.

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

    Если говорить о личном опыте, то я неплохо подтянул js с помощью codewars – задачки начинаются от самых простых (преобразование строк, перебор массива), до очевидно тяжелых (собственные интерпретаторы и преобразование данных изображения).

    А вот попытка спихнуть на верстальщика UI/UX – это уже экономия со стороны отдельных контор, которые по какой-то причине не хотят нанимать отдельного дизайнера/проектировщика в штат или по контракту. Тут, к сожалению, придется мириться и смотреть статьи по теме – тот же GoodUI.
    Ответ написан
  • Как правильно работать на oDesk?

    dmitry_pavlov
    @dmitry_pavlov
    World-class .NET freelance contractor (remotely)
    На фрилансе с иностранными клиентами важно:
    • Знание английского. Про уровень писал недавно 'Freelance FAQ: какой уровень английского нужен?'
    • В целом - умение вести официальную (формальную) переписку / переговоры с заказчиком (включая тех, кто далек от технологий и может поставить только бизнес задачу)
    • Умение конвертировать бизнес задачи в технические (составить план проекта, описать техническую часть работы, оценить объем работы)
    • Умение вести отчетность (daly status reports, time tracking, etc..) и управлять рисками (своевременно предупреждать о вероятности их появления, предлагать способы устранения)
    • Умение выдавать вовремя результат (не ждать что кто-то вас будет пасти и подгонять когда надо) и гарантировать его качество (то есть помимо разработки, уметь проверять и перепроверять результат своей работы)
    • Еще раз - знание английского. Умение эффективно вести коммуникацию на понятном клиенту языке - это 80% успеха. Оставшиеся 20% - это уже дело техники. Так что практикуйте этот навык постоянно. Читайте, пишите, слушайте, смотрите все, что нравится на английском. Если есть возможность общаться - не упускайте шанс. Пусть даже письменно. Пусть не с носителями.
    • Ну и следите за спросом - какие технологии в тренде и наиболее востребованы. Старайтесь добавлять в свой патронташ те из них, которые вам максимально близки, постепенно расширяя список или даже - полностью меняя свой стек разработки
    Ответ написан