• Как реализовать такой дизайн сайта в один экран и анимационными переходами между экранами?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Для переходов между страницами можно использовать Barba.js. А как именно делать сами анимации - смотрите сами, что вам проще будет делать. По идее в WebGL здесь нет необходимости - все можно сделать на CSS-трансформациях.
    Ответ написан
    2 комментария
  • Что умеет выдающийся Frontend разработчик?

    saboteur_kiev
    @saboteur_kiev
    software engineer
    > Я могу себе представить требования к backend, потому что backend сложнее.
    Нет

    > Там нужно учитывать количество пользователей, контролировать нагрузку, управлять памятью.
    Во фронте тоже нужно это учитывать

    > Там разного рода масштабирования, linux и sql.
    Во фронте много js, json, xml, CS, много зрелых технологий на изучение которых требуется много времении сил, много новых технологий.

    > А вот требования к frontend разработчику высокого уровня мне представить сложно. Тут один достаточно простой (по сравнению) ЯП, приходящие модные технологии вроде babel, webpack и TypeScript, которые еще сильнее упрощают работу и какой-нибудь фреймворк.
    А как же webassembly, html5, RMTP, и другое медиа? Флэш сейчас уступил место JS и HTML5, но это только расширяет возможности использования.

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

    > Фронтенд не масштабируется, не реплицируется.
    Так можно говорить, если переложить всю работу на бэкенд. А правильно - грамотно распределять что делает фронтенд, что делает бэкенд и оптимизировать передачу данных. Это оба специалиста должны сотрудничать.

    > В целом, если его очень хорошо протестировать, то разработчик уверен на 99.9%, что все работает на всех браузерах и на всех утройствах. Здесь не может быть ситуации, когда пришло слишком много пользователей или память на сервере закончилась.
    Ну как это не может? Вы знаете все устройства, где запустится ваше вебприложение? А если на смарттв? А если на нонейм планшете? А если это голосовой чат в веб-приложении на 50 человек?

    > Тут нет мониторинг систем.
    Зато есть понимание метрик, их сбора, и отправки на бэкенд или куда-то еще?

    Вдобавок фронтенд, в отличие от бэкенда, ОЧЕНЬ быстро прогрессировал за последние несколько лет. Настолько быстро, что хороших специалистов крайне сложно найти - они просто не успевают изучить все, что на них падает. Бэкенд постабильнее, там печатные книги успевают выйти в 10-м издании.
    Ответ написан
    Комментировать
  • Что умеет выдающийся Frontend разработчик?

    Как человек, делающий и фронт и бэк говорю - бэк проще. На беке ты не паришься вообще с "особенностями" браузеров - у тебя их нет. У тебя вообще практически нет особенностей. У тебя нет необходимости держать в голове пяток яп и разметку(JS, TS, HTML+CSS, CoffeScript, LESS, SCSS) - у тебя есть твой PHP(PYTHON, JAVA) - только один яп. Отдельно идут инструменты сборки - gulp, grunt, webpack - ничего этого нет да и ненужно. Есть композер, который тянет зависимости и все. Тебе ненужно писать километровые конфиги, что бы собрать твое приложение. Линукс тоже знать совсем необязательно - все отлично можно делать и на винде. Ну или развернуть вагрант(докер). Код можно писать где угодно - а вертеться все будет на линуксе. А вот насчет тестирования бэк уделывает фронт на раз-два. Если ты полностью прогнал тестирование (phpunit, codeception) то ты на 99.999% уверен что все пойдет как надо. А вот со фронтом все не так. Ты физически не можешь протестировать ВСЕ браузеры.
    Но есть одно большое но. это конечно мое ИМХО, но всеже - фронт делать интереснее))
    P.S. Забыл упомянуть фреймворки и либы, которые мастхев знать на фронте - React, Vue, Angular и(только камнями не кидайте) jQuery.
    P.P.S Контрольный в голову. Сделали мы клиенту сайт на vue. Сдали, клиент доволен. А потом приходит и говорит - ребята, а на ie8 не работает. А мне очень надо, у меня крупный клиент(бюджетная организация), а у них у всех xp с ie8... (для справки - vue на ie8 не заведется).
    Ответ написан
    7 комментариев
  • Что умеет выдающийся 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 комментариев
  • Адаптивный анимированный слайдер?

    KazeZlat
    @KazeZlat
    Погромист-затейник
    Прочитать описание к посту и найти Github разработчика.
    https://github.com/Cuberto/liquid-swipe
    Ответ написан
  • Как сверстать такой сайт?

    RAX7
    @RAX7
    SVG + padding/margin в процентах
    Ответ написан
    3 комментария
  • Как деплоить небольшие проекты?

    copist
    @copist
    Empower people to give
    1. Хорошая ли идея стягивать все исключительно по тегам т.е. поставил я на фронте и на беке тег v0.4 и скрипт на сервере стянул и то и другое
    2. Самонаписанный скрипт постоянно чекающий теги гитлаба это вообще идея хорошая? В чем +\- деплоя по тегам?


    Метки ставить можно. Даже полезно релизы метками отмечать. Всегда можно определить, на какой комит надо откатиться, чтобы локально восстановить версию кода как на сервере. И release notice писать по git log между метками, а не в памяти держать.

    Постоянно чекать git не надо. Лишняя нагрузка на проц. Совершенно лишняя. Рекомендую веб-хуки или деплоить по SSH команде.

    3. Как быть с адресами и портами.

    Выносите в конфигурационные файлы или в параметры окружения

    10+ вариантов на странице https://css-tricks.com/deployment/
    Я для разного размера проектов пользовался
    1. deployhq - как только обновляется ветка master - сервис обновляет сервер по SSH
    2. веб-хуками из bitbacket + самописным веб-скриптом на PHP без таймлимита - как только приходит хук об обновлении ветки master, выполняется скрипт типа такого
    cd /var/www/project
    cp web/closed.bak web/closed.html # закрыть приложение
    git pull
    composer update && php yii migrate # как то код бэка обновить
    npm run build # как то код фронта обновить
    rm web/closed.html # открыть приложение

    3. такой же командой, запускаемой через ssh, без веб-хуков. Это когда понадобилось сразу бэк и фронт пересобирать из разных репо и из разных веток. Ну типа демо из ветки develop, а релизы из ветки master на несколько серверов.
    4. настраивали Jenkins для авто-установки

    В принципе устраивает
    Ответ написан
    2 комментария
  • Как деплоить небольшие проекты?

    @Stqs
    senior software developer
    вопросы у вас философские, на каждый можно отвести часы обсуждения
    Полноценный CI/CD поднимать не вижу смысла ввиду размеров

    вы ж все равно собираетесь какие-то скрипты мутить и чото выдумывать,
    какая разница это будут крон скрипты на сервере или джоба в дженкинсе? по-скорости написания - одно и тоже будет. так что по-моему размер тут не имеет значение
    единственное что имеет значение - насколько явно у вас описан процесс(алгоритм) билда/разворачивания приложений
    с этой точки зрения мое видение примерно такое:

    1) git не есть инструмент для развертывания по, git лишь для версионирования кода
    и по-идее результатом вашей работы должен быть не код в гитхабе, а какой-то вменяемый артефакт, готовый к деплою (docker-image, pip пакет, npm пакет, deb пакет, jar, war, zip в крайнем случае, и тд и тп). Если производить артефакты то вопрос с тегами отпадет сам собой - у вас будет артефакт какой-то версии и все
    сервер не должен знать ни про какие гиты и ни про какие-то теги в нем
    Здесь я бы рекомендовал паковать все в докер-имеджи хотя бы только потому, что сервер в итоге не будет знать ничего о зависимостях приложения, нужных библиотеках, ниочем вообще, вам нужно установить только докер
    Огромное преимущество использование докера - в Dockerfile вы вынуждены волей/неволей описать точно и явно все шаги требуемые для установки приложения. И что самое замечательное - это все будет храниться в том же репозитории, под контролем гит - шикарно.
    Артефакты желательно хранить в каком-то артефактории,
    но если реально все просто - то можно хранить несколько последних версий прямо на сервере в какой-нибудь папочке

    2) как только вы получили артефакт - его можно деплоить
    неплохо было б знать особенности вашего проекта, но грубо говоря допустим что достаточно его зааплоадить на сервер, положить в нужное место
    опять же с этим дженкинс справится на ура и займет у вас это все дело 10 минут . Если вы опишете логику в Jenkinsfile вы выиграете еще раз потому что процесс развертывания(алгоритм) будет описан опять же ЯВНО. И будет тоже под контролем гита. (Jenkins должен знать только в каком репозитарии и в каком месте ему искать Jenkinsfile)
    Если же вы будете крутить какой-то спрятанный cron скрипт на сервере - о нем никому ничего не будет известно. Поверьте уже через короткое время все это дело начнет усложнятся, что-то забудется, что-то измениться и это все вместе больно ударит вас по яйцам.

    В чем еще преимущество такого подхода: если вам нужно сделать roll-back на предыдущую версию вам не нужно собирать проект заново выкачивая все с гита, ведь у вас есть предыдущие артефакты, ролбек в таком случае вообще не проблема - просто указываем предыдущую версию артефакта и деплоим еще раз и все

    3) Env Variables
    когда приложение стартует - считывает все что ему нужно из переменных окружения
    деплой джоба может каждый раз эти переменные устанавливать перед тем как деплоить - это было бы тоже круто потому что вы сделали бы это знание так же явным

    Итого имеем
    - логика сборки проекта описана в Dockerfile и находится под гитом
    - логика деплоя находится в Jenkinsfile и находится под гитом, и что самое главное является кодом (Jenkinsfile пишем на груви, для простых вещей вам понадобиться 30 минут изучения и все)
    - на сервере мы ничего не устанавливали совершенно кроме самого докера
    - мы храним несколько версий нашего приложения на всякий случай и можем быстро откатиться не прибегая к гиту вообще
    - сервер не знает ничего о гитах
    - на сервере нет НИКАКОЙ дополнительной логики по разворачиванию вашего приложения
    - имея все это очень легко добавлять другие сервера для деплоя - что нам нужно - грубо говоря указать другой айпи и набор env variables к нему ( если они конечно отличаются)
    giphy.gif
    Ответ написан
    5 комментариев
  • Какая сейчас ставка у верстальщиков?

    @MasterMike
    Кому сейчас нужны верстальщики?
    Небольшим веб-студиям, работающим на российский рынок. Сайты сейчас есть практически у всех, региональные студии получают заказы через столичных перекупов. Зарплаты верстальщиков в студиях минимальные, те самые пресловутые 200-500 баксов.

    Ориентируйтесь в сторону frontend-а - работа на продуктовые, аутсорсинговые, аутстафные компании. Оплата труда там в разы выше, плюс в цене фронты с хорошими навыками верстки.

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

    @MasterMike
    Как, как. Берем и верстаем )

    Вы подняли вопрос возможности переиспользования кода в разных проектах.
    На мой взгляд, вещь довольно трудновыполнимая на практике.
    Ответ написан
    2 комментария
  • Вернуть клиенту деньги, за проделанную работу?

    vetero4eg
    @vetero4eg
    Frontend
    Подготовьте ему смету, куда включите все по пунктикам, что сделано: прототип - столько-то часов, столько-то денег, телефонные переговоры с таким-то и таким-то его кандидатом на роль крутого фотографа - столько-то часов, столько-то времени... Длинный список, итого - затрачено времени - стоимость. Ознакомьте клиента. Разберитесь кто что кому еще должен. Желательно держаться в рамках спокойного диалога, ну а там уж как получится.
    Ответ написан
    2 комментария
  • Вернуть клиенту деньги, за проделанную работу?

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

    gobananas
    @gobananas
    finishhim.ru
    Выглядит всё хорошо, дьявол в деталях:
    1. description мета-тег сделали?
    2. Поиск закрыт от индексации
    3. Дублей нет или они закрыты от индексации?
    4. Хлебные крошки?
    5. Внутренняя перелинковка?
    6. Отсутствие портянок текста и структурирование текста на всех страницах
    7. Тайтлы есть, это хорошо, но важно какие они - НЧ, СЧ, ВЧ
    8. h1 есть, хорошо - один ли он на странице (а то иногда делают каждый блок в h1)
    9. Незначимые внешние ссылки имеют rel="nofollow"?
    10. Если есть нерелеватный текст, то его можно закрыть в noindex
    Ответ написан
    9 комментариев
  • SEO-оптимизация с нуля. Ничего не забыл?

    @MasterMike
    Добавлю еще немного к списку:
    - оптимизация изображений;
    - скорость загрузки сайта;
    - локация хостинга на предмет близости к конечному пользователю.

    p.s. Сайт будет замечен поисковиками в любом случае. Особенно если им прямо сказать об этом, мол, товарищи, новый сайт появился, запускайте роботов. Другое дело, как поисковики к нему отнесутся.
    Ответ написан
    Комментировать
  • Может ли эта уязвимость навредить сайту?

    SagePtr
    @SagePtr
    Еда - это святое
    А ещё в пост вставить картинку с котиком, а через некоторое время (когда пост затеряется и шанс модератора наткнуться на него будет минимальным) - заменить картинку с котиком на изображение листа конопли и натравить на него Роскомнадзор.
    В итоге сайт улетает в блокировку, а владельцы некоторое время не понимают, почему кол-во посетителей из России вдруг упало, а найти картинку, к которой РКН придрался, будет весьма сложно, так как факт замены в логах нигде отражён не будет, ибо заменена она будет на стороне стороннего сервера.
    Ответ написан
    1 комментарий
  • EPayments перестали выпускать карты? Альтернативы для фриланса?

    @hoff7
    payoneer - отлично работают, никаких нареканий.
    Ответ написан
    Комментировать
  • Зачем собирать проект на сервере?

    saboteur_kiev
    @saboteur_kiev
    software engineer
    Предполагается, что "сервер" это не боевой сервер, где крутится приложение, а сервер сборки, например агент teamcity/jenkins/hudson.

    Если же у вас на "боевом" сервере что-то пойдет не так, то это что? интернет пропадет, чтобы подкачать зависимости? Так а как юзеры будут тогда на нем работать?

    Предполагается, что разработчиков много.

    Предполагается наличие pull request-ов, которые требуют успешного билда для merge

    Если ты работаешь сам, то делай как тебе удобно. Если работаешь не сам - есть best practice
    Ответ написан
    Комментировать