Контакты
Местоположение
Россия, Москва и Московская обл., Москва

Достижения

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

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

Все теги (220)

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

Все ответы (1319)
  • Верстка с нуля: какие основные этапы работы?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

    0) Запускаю Spotify :-)

    1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

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

    3) Запускаю VS Code, открываю нужную папку.

    4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

    5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

    6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

    7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
    Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

    8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

    9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

    10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

    11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

    11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

    12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

    Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
    Надеюсь чем-то поможет мой ответ.
    Ответ написан
    7 комментариев
  • Как расположить элементы по кругу?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Делайте по такому принципу.
    Ответ написан
    12 комментариев
  • Что за шум вокруг темы, что программисты скоро не нужны?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    программисты не будут скоро восстребованы.

    Когда мне было 16, я начинал только программировать, меня волновал тот же самый вопрос. Вот даже тему создавал на форуме www.cyberforum.ru/job/thread127123.html (сильно не читайте, мне стыдно за свои сообщения того времени =) ) Это было 7 лет назад, за это время особо ничего не изменилось, поэтому думаю через еще 7 лет будет все нормально.
    Работы для программиста море, а работники нормальные как правило отсутствуют. Понятное дело, что программирование стало "мейнстримом", делать сайты идут все кому не лень, т.к. везде кричат "Программирование сделает вас богатыми! Всего за месяц вы научитесь создавать сайты за деньги!", благо майнинг переманивает людей, желающих легких денег (не в обиду профессиональным майнерам). Но скажу точно, если вы прочитали хоть одну книжку по своему языку программирования, можете писать без использования jQuery и Boostrap (не в обиду этим технологиям, просто часто вижу, что люди учат не JS/CSS, а jQuery/Boostrap), умеете ставить правильные сроки, сможете написать игру "змейка" - то вы уже лучше 90% программистов, а то и больше.
    будут такие инструменты

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

    Так будет с большинством профессий, даже со специалистами по машинному обучению. Но надо понимать, что это случится еще не скоро, лет 10 у вас есть, а там сделают безусловных доход в развитых странах, а в менее развитых, сделают закон, требующий чтобы более 50% сотрудников были не ИИ :-)
    Скажу точно, если вам программирование не очень нравится, то советую уйти в другую профессию, т.к. без любви к этой профессии будет сложно часами сидеть и учить материал (когда тебя не заставляют). Деньги легкие вы тут тоже не сделаете.
    Ответ написан
    10 комментариев
  • Как набираться опыта и формировать портфолио?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Итак, я учусь на geekbrains веб-разработке.

    Ошибка номер один. Из всех новичков, что я видел, с гикбрайнса самые слабые. Их не учат учиться, их учат повторять, не давая нормальную теоретическую и практическую базу. Задания очень слабые, а курсы поверхностные.
    статьи и пр. это конечно хорошо, но применять на практике то, что прочитал, это совершенно другое, а особенно в боевых условиях

    Пока не будете читать, так и будете практиковать визуальные эффекты на jQuery. Нужна база. В начале 25% теории 75% практики. Читайте https://css-tricks.com , большую книгу css (она немного устарела, гриды не рассматривают, но основная база очень полезная), смотрите Юрия Артюха (если хотите делать крутые анимации), лазьте по https://www.awwwards.com/ и разбирайтесь, как люди так делают. А также практикуйтесь, сделайте себе сайт, сайт другу, сайт девушке - всем.

    UPD: В чем сложно придумать себе близкую к боевому задачу? Боевую задачу вам вряд-ли кто-то даст, т.к. без опыта боевых задач, вы сделаете не боевое решение. Вот там "боевые" задачи.
    1) Сделайте калькулятор произведения матриц - разминочка.
    2) Сделайте игру арканоид, хоть на дивах (а раньше, когда мы учили программирование, новичков привлекала разработка игр, а сейчас почему-то сайты. Раньше было романтичнее как-то).
    3) Сделайте приложение учета личных финансов, в котором есть такие функции
    - личный счет
    - форма добавления денег в личный счет с комментарием и выбором группы доходов (долг, зп, заказ, подарок и.т.д.).
    - форма снятия денег с личного счета с комментарием и выбором группы расхода (вернул долг, купил домой что-то, купил технику, еду, потратил на женщину и.т.д.)
    - Вывод списка доходов и расходов с фильтром, сортировкой и категориями.
    - создание расписания автоматического пополнения (зп) или снятия (аренда, абонентская плата) средств с личного счета.
    - создание простого графика расходов и доходов. Я бы сюда добавил еще прогнозирование доходов и расходов хотя бы через линейную регрессию (да, я люблю машинное обучение),
    - добавление нескольких счетов
    Эта задача норм, и типа боевая, и для себя пригодится, и на гитхаб можно выложить - красота.
    Ответ написан
    14 комментариев
  • Что умеет выдающийся Frontend разработчик?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    linux

    Ну, это и фрондендеру нужно часто знать.
    ЯП

    Я сомневаюсь, что он сейчас сильно проще питона или php, JS очень довольно быстро развивается. А если взять в расчет TypeScript, то тем более.
    В целом, если его очень хорошо протестировать, то разработчик уверен на 99.9%

    Совсем нет. Не получится протестировать на всех браузерах, на всех операционных системах и на всех устройствах с разным экраном, с разным способом ввода.
    то в случае с frontend все гораздо проще

    Ну вот просто вообще не правда. Я также могу сказать, что в бэке учить нечего, изучил язык, изучил laravel, а sql даже учить не надо, используй ORM. Справедливое высказывание?

    Теперь в общем. Во front-end много чего можно изучить
    1) Верстка. Хороший front-end'ер должен хорошо верстать, вопреки частому мнению, что этим должен заниматься верстальщик. А верстка это отдельная широкая тема.
    2) SVG, для многих интерактивных приложений, очень полезно использовать svg, а там куча своих особенностей, хаков и.т.д.
    3) Webgl - довольно сложная тема, не знаю, есть ли в бэке что-то аналогичное по сложности.
    4) Canvas - не просто знать, а уметь рисовать то, что желаешь.
    5) Фрейморки, а там тебе для каждого свое разветвление.
    6) Асинхронное программирование, которое для многих php-шников кажется непонятным.
    7) ООП, т.к. в JS завезли классы, да и TypeScript часто нужно использовать.
    8) Шаблоны проектирования - не только для бэкенда.
    9) Webpack+gulp - ну это было.

    Буду дополнять, если что-то еще в голову придет.
    Ответ написан
    6 комментариев

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

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