• Какие методы верстки при работе с SVG-графикой?

    AMar4enko
    @AMar4enko
    Самый толковый и наиболее широко поддерживающийся способ это svg-спрайты через xlink:href (поищите статью на хабре).
    Смысл в том, что вы берете 100 мелких svg файлов и заталкиваете в один большой, помечая отдельные фрагменты идентификаторами.
    Этот файл загружаете одним XHR-запросом и вставляете в DOM, после чего можете делать
    <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my-cool-icon"></use>
    </svg>

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

    moropsk
    @moropsk
    Использовал следующие инструменты в качестве базы знаний:
    1. OneNote (из пакета Office). Быстрый экспорт заметок.
    2. Для сохранения прочитанного в интернете использую ресурс https://raindrop.io
    Ответ написан
    1 комментарий
  • Как эффективно изучать JS?

    @Scribblex
    Я рекомендую изучать JS примерно таким путем:
    – чтение learn.javascript.ru (чтение и, естественно, практика);
    – параллельное прохождение модулей по JS на codeschool;
    – держите перед глазами актуальные вопросы для собеседования JS-разработчика (habrahabr.ru/post/239065/), стараясь на них ответить;
    – читайте хороших авторов: Дуглас Крокфорд, Джон Рейзиг, Стоян Стефанов;
    – найдите на GitHub людей, которые согласятся ревьюить Ваш код, я серьезно!

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

    Желаю успеха!
    Ответ написан
    10 комментариев
  • Опишите тезисно, как сегодня должен быть сверстан хороший сайт?

    In4in
    @In4in
    °•× JavaScript Developer ^_^ ו°
    • БЭМ. Независимые блоки.
    • Препроцессоры
    • Постпроцессоры
    • Семантическая верстка
    • Целиком и полностью адаптивная верстка
    • Грамотное использование тегов HTML5
    • Оптимизация скорости загрузки страниц
    • Меньше бессмысленных JS-плагинов и библиотек
    • Относительная кроссбраузерность
    • Деление сайта на 2 версии - сжатую (без мусора и воды, ту, что реально сервер будет отдавать) и обычную (для человеко-понятного редактирования).
    • И еще: Тык
    Ответ написан
    9 комментариев
  • Какими бесплатными стоками вы пользуетесь для поиска иконок, фото и элементов интерфейса?

    dimonchik2013
    @dimonchik2013
    полковник Андрейченко
    лидер - www.freepik.com/, у него много эксклюзива, а не как у других- сборники со свалок в сети

    по иконкам - от него же www.flaticon.com

    еще есть всякие all-free-download.com, но там мутнее с лицензией

    из относительно бесплатных рекомендую www.kozzi.com ( коззи скис, остался graphicstock.com, на него надо подписаться мылом и потом ловить акции на дешевую годовую)
    Ответ написан
    Комментировать
  • Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей?

    @lastnast
    Вообще да, технологий очень много во фронтенде, и они появляются почти каждый месяц. За всеми не угнаться, многие умирают быстро. Я сам сначала терялся, думал как все это знать и успевать изучать.

    Вообще стандарт:
    HTML5/CSS3;
    JavaScript / jQuery;
    Адаптивная, кроссбраузерная верстка;
    Git;

    Освойте все это на профессиональном уровне, и у вас всегда будет работа. А далее изучайте технологии по мере популярности и востребованности. Заходите на hantim.ru, выбираете: front end, html, верстальщик и тд. Смотрите что больше всего требуют, а затем изучайте, ну и по мере свободного времени изучайте то, что облегчает работу вроде node.js, less/sass и тд.

    Создайте Evernote, сделайте блокнот по работе, и добавляйте туда новые знания, что вы узнали, интересные статьи, вообщем как сказали выше - структурируйте вашу базу знаний, она очень пригодится. Еще такой совет: к примеру когда начинаете читать книгу, сохраняйте важные вещи, заметки, техники в ваш Evernote, делайте конспекты. Тогда вам не нужно будет возвращаться к книге, потому что все самое важное будет у вас в сжатом виде. Еще такая техника развизает быстрый способ чтения, вскоре вы автоматом будете пробегать мимо бесполезной воды, а впитывать только важное.
    Ответ написан
    2 комментария
  • Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей?

    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.
    Ответ написан
    10 комментариев
  • Навыки front-end разработчика

    gelevanog
    @gelevanog
    javascript developer
    HTML (XHTML, HTML4, HTML5) - обязательно (внимание на HTML5)
    CSS (2.1, CSS3, etc.) - обязательно (внимание на все версии)
    JavaScript / Ajax - обязательно, классика
    jQuery - обязательно, классика
    Popular Frameworks (HTML5 Boilerplate, Twitter Bootstrap, etc.) - первый удобный шаблон для html5 проекта, не более, второе уже классический шаблон для адаптивной верстки
    Modernizr - библиотека для определения браузеров, клиентов, девайсов - прочитать, усвоить, применять по необходимости что-то определить
    OOCSS / BEM / SMACSS (Modular coding methodologies) - способы удобного написания стилей, прочитать, усвоить, применять по необходимости
    CSS Grids - не знаю что автор имел ввиду - видимо CSS-сетки, просто надо знать
    CSS Frameworks / Resets - ничего сложного технологии обнуления стилей и опять наборы CSS правил с классами типа animate.css
    Progressive Enhancement / Graceful Degradation - понятие связанное с кроссбраузерностью и упрощением функционала и отображения в некоторых браузерах
    HTML and CSS Specifications (W3C / WHATWG) - чаще проверять код на валидность, это позволяет понять свою ошибки как раз на основе этих спецификаций
    UX / Usability - больше для дизайнеров, но тоже пригодится
    Website Speed / Performance - плюшки по оптимизации
    Developer/Debugging Tools (Chrome Dev Tools, Firebug, etc) - умение ковыряться в консоли, надо знать и применять всегда
    YUI Library - по необходимости
    Dojo / MooTools / Prototype - изучать и применять по необходимости
    Responsive Web Design - надо знать работу с css медиа-запросами
    Mobile Web Development - абстрактное понятие связанное с разработкой мобильных веб-приложений
    Mobile Web Performance ---
    Cross-Browser / Cross-Platform Development - абстрактное понятие связанное с разработкой кроссбраузерных и кроссплатформенных приложений
    Document Object Model (DOM) - дом модель - на вводном курсе по js должен знать о ней каждый фронтендер
    Cross-Browser Bugs and Inconsistencies (primarily IE6-8) - без комментариев
    CSS Pre-Processors (LESS / Sass) - удобные препроцессоры для работы со стилями, рекомендую для упрощения работы с CSS
    Version Control (Git / GitHub / CVS / Subversion) - полезный навык, нужный не только фронтендерам, полезен для командной разработки.
    HTML5 APIs (Canvas, Geolocation, Video, etc.) - изучать и применять по необходимости
    Object-oriented Programming (OOP) - без комментариев
    Back-end Templating languages/technologies (PHP, Ruby, .NET, etc) - нужно знать на базовом уровне, что бы понимать как обрабатывать данные на клиенте, возвращенные/отданные сервером, мучать бэкендщика по этому поводу.
    Scaffolding, Task Runner tools (Yeoman, Grunt, Bower, etc.) - удобные штуки упрощающие работу
    MVC Frameworks (Angular, Backbone, etc.) - изучать и применять по необходимости
    MySql - изучать
    Accessibility / WAI-ARIA - изучать и применять по необходимости
    Microdata / Microformats - изучать и применять по необходимости
    HTML5/CSS3 Polyfills - изучать и применять по необходимости
    CMS (WordPress, Drupal, Joomla, etc) - изучать и применять по необходимости
    Functional Programming - без комментариев, надо знать
    Data Formats (e.g. JSON, XML) - надо знать
    Internationalization / Localization - абстрактное понятие
    Content Strategy - изучать и применять по необходимости
    Offline Web Apps - изучать и применять по необходимости
    Regular Expressions - надо знать на базовом уровне
    .htaccess - изучать и применять по необходимости
    SVG - изучать и применять по необходимости
    Image Editing Tools (Photoshop, Fireworks, etc.) - надо знать
    Web Font Embedding / Licensing - работа со шрифтами
    SEO - фронтеднеру надо знать на уровне семантичной вертски
    Haml - работа с HTML
    CoffeeScript - работа с JS

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

    SazereS
    @SazereS
    Как я обычно советую людям изучать веб-технологии:

    1. Разобраться в принципах работы HTML и CSS, завести справочник по тегам/свойствам и больше к этому не возвращаться. С тонкостями разбираться лучше по мере возникновения необходимости. Вообще, всю теорию HTMLя можно уместить на двух листках А4 11м шрифтом.

    2. Изучить какой-нибудь из серверных языков: PHP, Python, Ruby, можно и NodeJS, но тогда лучше сначала разобраться хотя бы с основами JS. Причем не стоит сразу использовать фреймворки — для начала написать что-нибудь простое, типа «4 странички с текстом из базы + комментарии на них». Затем попробовать реализовать MVC на том же проекте. Сделать авторизацию, админку и т. д.

    3. Вернуться к фронт-энд части и сделать ее более динамичной — это сначала чистый JS, а потом и JQuery или Blackbone, или что вам еще понравится. Разобраться с AJAX, написать чат на нем, например. Попробовать фронт-фреймворки, LESS, SASS и т. п.

    4. Опять бэк-энд. Ставим фреймворк, к которому душа лежит, и пытаемся сделать какой-либо сложный проект.

    5. Тут вы уже сами поймете что делать ;)
    Ответ написан
    Комментировать
  • Как эффективно переучиться на веб-разработчика?

    @egorinsk
    Вообще, не увлекайтесь спецификациями. Марк Цукерберг как-то без них обошелся. Google тоже не следует строгим стандартам.

    Если вы хотите «эффективно» изучить матеиал, тогда вы должны читать статьи «для чайников» (которые вы с вашим опытом, наверняка освоите за кратчайшее время). HTML/CSS так устроены, что даже если вы сделаете 100 ошибок на странице, он все равно как-нибудь да отобразится. Ну если вы хотите более солидные знания, то параллельно смотрите непонятные моменты в спецификациях, это в общем-то полезно. А сэкономленное время посвятите практике. Она тут очень важна.

    Вот, что стоит изучить (в любом порядке):

    1) Начните с основ HTTP (только ради бога, не читайте спецификацию целиком, хватит общего представления о методах запросов, заголовках и теле запроса, кодах ответа 403/404/500/200/300)
    2) Изучите основы HTML (есть раздел на сайте htmlbook). SGML вам хватит в том объеме, в котором он упоминается в спецификации HTML. PCDATA не упоминается в ней и потому знать про отличия от CDATA вам не нужно (ну если так хотите узнать, найдите спецификацию SGML и почитайте).

    Обратите внимание, в некоторых (некачественных) статьях вы можете увидеть штуки вроде [br /] — самозакрывающиеся теги. Это ошибочный синтаксис, который употребляют авторы, путающие HTML и XHTML. В HTML такого синтаксиса нет (хотя в силу своей толерантности к ошибкам в HTML такой код как-то работает).

    3) Изучите CSS и позиционирование элементов. Вот хороший учебник, разъясняющий тонкости всяких флоатов: softwaremaniacs.org/blog/category/primer/ А спецификацию CSS2.1, думаю, вы нагуглите сами, она довольно понятно написана.

    4) Изучите яваскрипт (да, включая замыкания и прототипы) и DOM. Обратите внимание, jQuery — лишь обертка над DOM и не зная DOM, вы не сможете нормально пользоваться jQuery, вы лишь научитесь копипастить скрипты из интернета, не понимая, как они работают. После этого можете изучать jQuery, заодно советую заглянуть в исходный код, а не только читать документацию.

    5) Изучите один из серверных языков, хотя бы основы

    6) Изучите основы SQL

    7) Начинайте что-нибудь делать, так как в этот момент у вас будет очень много теоретических знаний и очень мало практических. Можете сделать простое веб-приложение, можете улучшить какое-нибудь существующее.

    8) Изучите ООП

    9) Изучите какой-нибудь серверный MVC-фреймворк

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

    > А есть ещё и XHTML, который тоже имеет свои отличия…

    Его уже нет, его никто не будет развивать и использовать, более того, и раньше многие использовали не XHTML, а лишь похожий на XHTML синтаксис (в частности самозакрывающиеся теги), а на деле писали HTML. Вы можете изучить его, но только ради любопытства, а не ради практической пользы.

    > Клиентская разработка нынче редко обходится без всяких шаблонизаторов типа HAML/SASS

    Вы еще Coffescript забыли упомянуть. Это очень спорные вещи, есть мнения как за, так и против. Но в любом случае, согласитесь, как-то странно изучать SASS, не изучив вначале CSS, верно? Начинающему это не нужно.

    > а для эффективной серверной разработки всё и того сложнее: фреймворки, ORM, continuous integration, очереди задач и прочая-прочая.

    Для приложения из 3 страниц все это не нужно. Сложные технологии нужны в больших и огромных проектах, начинать можно и без них. И более того, не имея определенного опыта работы с кодом, вы вряд ли поймете, зачем это нужно. А когда понадобятся, тогда и изучите.

    По вопросу, где брать информацию: авторитетные источники (для поиска ответа во всех подробностях) — это спецификации W3C, официальная документация фреймворков, неофициальные источники вроде htmlbook, stackoverflow или Хабра — для того, чтобы быстро получить представление о тех или иных возможностях HTML. Еще можете какую-нибудь книгу почитать, только не старую.
    Ответ написан
    5 комментариев
  • С чего начать и как изучить веб-дизайн, дизайн интерфейсов в целом?

    nvkzNemo
    @nvkzNemo
    Что бы не совершать кучи ошибок допускающихся художниками и полиграфистами пришедшими в веб, а так же понять в чём заключается веб-дизайн, а так же дизайн интерфейсов, рекомендую нижеприведенные книжки, в том порядке, в котором читал их я. Я перечитал кучу литературы, но эти самые стоящие.
    1. Стив Круг «Веб-дизайн или Не заставляйте меня думать»
    2. Якоб Нильсен «Веб-дизайн»
    3. Дональд Норман «Дизайн привычных вещей»
    4. Джеф Раскин «Интерфейс»
    5. Алан Купер «Психбольница в руках пациентов»

    Ну и конечно же не забывать про Ководство и периодически заглядывать в Советы.

    Нормального самоучителя по созданию макета от А до Я мне не встречалось. Иногда проскакивают статьи на сайтах вроде Smashing Magazine, или на Техдизайнере.

    Ну а что бы быть «в тренде» — могу посоветовать, для тренировки, отрисовать один-в-один несколько сайтов именитых веб-дизайнеров (нарпимер с Ревижена, только не вздумайте их в портфолио ложить себе потом), прочитать всё что найдёте про модульные сетки (1, 2 и т.д.) и регулярно посещать Dribbble.
    Ответ написан
    2 комментария
  • Материал по UX (User Experience)?

    Сьюзан Уэйншенк «Интуитивный веб-дизайн»
    Сьюзан Уэйншенк «100 главных принципов дизайна»
    Расс Унгер «UX дизайн: Проектирование опыта взаимодействия»
    А также бессмертные труды Джефа Раскина, и, конечно, Алана Купера.
    А также комьюнити на просторах сети:
    ux-spb.ru/
    userexperience.ru/webinars/

    И конференции:
    userexperience.ru/2012/
    www.profsoux.ru/
    Ответ написан
    1 комментарий