iWatchYouFromAfar
Миша вон на несколько фронтов работает (модкс, октябрь), но он вроде как чистый фрилансер
Pavel
вопрос не в этом, у меня основная работа есть и я порой реально вскрываюсь уже от переизбытка задач
а в чем тогда проблема? не брать доп. заказов? или ты подумываешь уйти во фриланс и оставить работу?
Alexey
Я халявлю много поэтому у меня так себе заработок:) примерно миллион в год
iWatchYouFromAfar
а в чем тогда проблема? не брать доп. заказов? или ты подумываешь уйти во фриланс и оставить работу?
нет, работу ближайшее время точно не оставлю, а чистый фриланс я не вытяну, уже пробовал, нужно с людьми общаться, а я это делать не очень умею, если найду человека который сможет общаться с клиентами, подумаю над этим
iWatchYouFromAfar
я просто сейчас анализирую свой уход с WP, если честно, изрядно потерял клиентов
iWatchYouFromAfar
часть отказалась переезжать на модкс, другая часть теперь не по моей теме, не хочу в WP лазить
Pavel
нет, работу ближайшее время точно не оставлю, а чистый фриланс я не вытяну, уже пробовал, нужно с людьми общаться, а я это делать не очень умею, если найду человека который сможет общаться с клиентами, подумаю над этим
я как раз с клиентом общаться умею) но еще нужно уметь правильно называть цену. А с этим беда. всегда хочется занизить цену чтоб не вызвать негативных эмоций у клиента. в ущерб себе в общем приходится.
iWatchYouFromAfar
я как раз с клиентом общаться умею) но еще нужно уметь правильно называть цену. А с этим беда. всегда хочется занизить цену чтоб не вызвать негативных эмоций у клиента. в ущерб себе в общем приходится.
удаленно общаться это одно, а вживую совсем другое, я живу в мск, жить в мск и работать удаленно такая себе затея, ладно бы жил в провинции
Alexey
часть отказалась переезжать на модкс, другая часть теперь не по моей теме, не хочу в WP лазить
А я б не стал с вордпресса уходить. я правда на нем не сидел особо
Pavel
я просто сейчас анализирую свой уход с WP, если честно, изрядно потерял клиентов
а вот чего лично я не понимаю когда говорят "уход с" - зачем уходить от чего-то? можно ведь использовать сразу целый набор инструментов в зависимости от задачи. Если клиент жирный и платежеспособный, то битрикс, если индивидуальная разработка, то laravel + vue если каталог то модх, если блог и новостник, то wp
iWatchYouFromAfar
А я б не стал с вордпресса уходить. я правда на нем не сидел особо
Леха это слишком больно, когда клиент качает палёную или покупает готовую версию шаблона и ставит тебе такое ТЗ, что ты эту готовую тему считай заного напишешь
Kirill | CosmosDrops
iWatchYouFromAfar
ее проще на modx портировать )
вот в этом и проблема, клиенты хотят ВП
iWatchYouFromAfar
Это другой вопрос:) в идеале конечно сверстать шаблон и натянуть на чистый вордпресс.
шаблон и готовая тема с настройками несколько разные вещи
Alexey
вот в этом и проблема, клиенты хотят ВП
Американцы вот вордпресс любят) модекс у них не в почете:)
iWatchYouFromAfar
меня модкс тем и радует, что тут разворачиваешься в разы быстрее, посему я себе утилиты и сделал, сделал окружение которое позволяет мне быстро развернуть сайт
Kirill | CosmosDrops
вот в этом и проблема, клиенты хотят ВП
пару раз с таким сталкивался, и причем по моему опыту, это не конкретно решение клиента было, а его сеошника, который вп знал, а в modx видать не особо понимал
Alexey
шаблон и готовая тема с настройками несколько разные вещи
Ну тут убеждать надо слезть с готовой темы и лучше чистый шаблон натянуть...хотя по разному конечно
iWatchYouFromAfar
Американцы вот вордпресс любят) модекс у них не в почете:)
я в Швеции работал и жил почти 2 года, онли ВП, там вооообще не хотят смотреть в другую сторону
Alexey
Pavel
Пока сформированных стайлгайдов нет. Озвучу наши собственные требования, по которым разрабатывалась https://sneakers.shopaholic.dev. - модульный код (HTML/Twig, CSS, JS) разложены по папочкам в partials - JS используется стандартный для тех моментов, которые уже реализованы https://www.npmjs.com/search?q=shopaholic - CSS написан по принципу mobile-first - CSS написан по методологии БЭМ - CSS в идеале ванильный, приправленный PostCSS, на крайняк SCSS - семантический HTML, расширенный разметкой schema.org там, где это уместно и aria-атрибутами, там, где рекомендуется - UI темы приближен насколько возможно к требованиям WCAG 2.1 Level AA (хорошая семантика и aria для этого в т.ч. нужны) - все метрики Lighthouse не менее 90 - метрики PageSpeed не менее 90 - интерфейсные картинки оптимизированы, где принято использовать SVG, он используется - контентные картинки подключаются по адаптивной технологии (picture, srcset, size и WebP с фолбэком на JPG) - наличие сборки в поставке темы (Gulp, а лучше Webpack или Rollup), наличие линтинга CSS и JS при сборке. Тема Sneakers максимально приближена к этим требованиям. В будущем мы планируем собирать все темы на фреймворке Undercoat, который неспешно (надеемся ускорится) пилим. https://github.com/undercoat/undercoat/ Следующим сообщением опишу принципы фреймворка (большинство описано в Readme, но не все).
Pavel
Принципы Undercoat. 1. БЭМ На текущей стадии развития CSS это единственная вменяемая методология с разныеми ее вариациями. По множеству опросов, в т.ч. Global state of CSS 2019, 90% разработчиков используют или знают БЭМ. 2. Нет темы по умолчанию Большинство претензий к CSS-фреймворкам заключается в том, что при их использовании непременно приходится "бороться" с дефолтными стилями и "перебивать" их, т.к. никогда не хватает набора настраиваемых переменных, которые идут "из коробки". Тема затрагивается в т.ч. вот здесь https://www.smashingmagazine.com/2018/11/css-frameworks-css-grid/ Поэтому CSS компонентов минимален. Содержит только те стили, которые точно не придется "перебивать" (например, https://github.com/undercoat/undercoat/blob/master/packages/breadcrumb/breadcrumb.css) , а остальное по БЭМу дописывается на проектном уровне переопределения. Затем сборщик склеивает эти наборы стилей и получается общий CSS для компонента. Тем не менее, дефолтную тему можно будет подключить (см. далее про Токены). 3. Mobile friendly Мобильный трафик уже года 4 назад превысил десктопный во всем мире. И чем дальше тем соотношение desktop/mobile все больше в пользу второго. Google индексирует мобильную (adaptive/responsive) версию сайта, если детектит ее. Пока это не учитывается при ранжировании, но... не ровен час. Поэтому mobile-first, adaptive images и все такое. 4. SEO friendly Хорошая семантика HTML, расширенная с помощью microdata от schema.org. Это и индексация хорошая при прочих равных и красивые виджеты в поисковой выдаче. 5. Accesibility (a11y) На Западе, да и все чаще у нас, выставляются требования обеспечения доступности сайтов для людей с ограниченным возможностями (это не только проблемы со зрением). Во фреймворке хорошая HTML-семантика дополняется, где рекомендовано aria/role-атрибутами, что обеспечивает хорошую доступность для скринридеров. Но a11y, это еще и про хорошую доступность с клавиатуры, в т.ч. а это семантика и правильная HTML-разметка. Все больше стран законодательно обязывают владельцев веб-сайтов обеспечивать их доступность. Также при разработке учтены такие особенности под скринридеры, как продемы списков с list-style: none в Safari. 6. Интернационализация В мире письменность не ограничивается форматом слева-направо и сверху вниз (большинство языков). Иврит и арабские языки, например, пишутся справа-налево. А корейский вертикально! С помощью CSS Logical properties можно писать такой CSS, который будет автоматом перестраивать инфтерфейс, под необходимую направленность письма. Посмотрите, например, на интерфейс Wikipedia для того же иврита. Нужно просто перестроить мышление для использования этих свойств. Почитайте https://www.smashingmagazine.com/2019/08/writing-modes-layout/ и https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/ Т.о. образом просто начав писать CSS по-другому без дополнительных трудозатрат, фреймворк "из коробки" дает "выход" на арабский и азиатский рынки. И все это прекрасно фолбэчится с помощью PostCSS, если необходимо, если что. 7. Дизайн-токены Я говорил, что тема по-умолчанию отсутствует. Но она может быть подключена, как зависимость отдельным NPM-пакетом. Пакет будет содержать ровно один файл с токенами (по сути переменными, содержащими описание дизайна). Во все компоненты фреймворка будет добавлен типовой набор CSS Custom properties с пустыми значениями. И, если в компонент, "спустятся" по каскаду значения из токенов, то все компоненты сразу же станут "задизайнены". Такой подход очень интересен еще и потому, что можно будет легко экстендить чужие темы. Представьте, вам нужно сделать какой-то уникальный попап для темы, которую вы купили. А тема создана по описанным, выше принципам. Так вот, вы заверстываете этот попап по гайдам фреймворка, т.е. компоненты в разметке имеют стандартные классы, в классы в стилях содеожат стандартные токены для типовых свойств (цвета, отступы, размер и т.п.). И вот вы подключаете такой компонент в тему и вуаля, он стал выглядеть, как эта тема. Этот подход похож на Props в React. Ну вот как-то так.
Pavel
Вот, что мы планируем с темами по Shopaholic
Pavel
Вот, что мы планируем с темами по Shopaholic
Павел, а как у вас в October с Laravel обновляется? Сейчас, к примеру вышел Laravel 6. а в October тоже апгрейдится ядро под новый Laravel ?
iWatchYouFromAfar
Что-то мне это напоминает
iWatchYouFromAfar
лет 5 назад с товарищем решили сделать шаблон на продажу, на templatemonster вроде
iWatchYouFromAfar
меня там затрахали правками
Pavel
Октябрь сидит на LTS
Pavel
вот вышла новая лтс и на неё сейчас будет миграция
Kirill | CosmosDrops
хм, загуглил чутка про сравнение октября и modx, первое что бросилось в глаза - twig. Реально так и есть? почему не blade?
Dmytro
Twig самый популярный шаблонизатор в целом потому его видать и выбрали
Dmytro
мы в Evo тоже его расматривали в целом его можно юзать тоже ставиться плагином но решили что раз садимся на ларавель а у них Blade то на нем и остановились
Kirill | CosmosDrops
PdoTools Sitemap Карта сайта sitemap.xml для поисковиков.
Kirill | CosmosDrops
=) ну да, именно для этого pdotools )
Kirill | CosmosDrops
Те же яйца, вид сбоку. Но Твиг популярнее
а по удобству\функциональности примерно =?
Алексей
вопрос по hoster BY. Кто нибудь брал хостингшаред Друпала или Битрикса - туда MODX revo ставили - запускался?
Pavel
а по удобству\функциональности примерно =?
хз, я на блейде не писал никогда, но знаю, что они очень похожи
Pavel
Принципы Undercoat. 1. БЭМ На текущей стадии развития CSS это единственная вменяемая методология с разныеми ее вариациями. По множеству опросов, в т.ч. Global state of CSS 2019, 90% разработчиков используют или знают БЭМ. 2. Нет темы по умолчанию Большинство претензий к CSS-фреймворкам заключается в том, что при их использовании непременно приходится "бороться" с дефолтными стилями и "перебивать" их, т.к. никогда не хватает набора настраиваемых переменных, которые идут "из коробки". Тема затрагивается в т.ч. вот здесь https://www.smashingmagazine.com/2018/11/css-frameworks-css-grid/ Поэтому CSS компонентов минимален. Содержит только те стили, которые точно не придется "перебивать" (например, https://github.com/undercoat/undercoat/blob/master/packages/breadcrumb/breadcrumb.css) , а остальное по БЭМу дописывается на проектном уровне переопределения. Затем сборщик склеивает эти наборы стилей и получается общий CSS для компонента. Тем не менее, дефолтную тему можно будет подключить (см. далее про Токены). 3. Mobile friendly Мобильный трафик уже года 4 назад превысил десктопный во всем мире. И чем дальше тем соотношение desktop/mobile все больше в пользу второго. Google индексирует мобильную (adaptive/responsive) версию сайта, если детектит ее. Пока это не учитывается при ранжировании, но... не ровен час. Поэтому mobile-first, adaptive images и все такое. 4. SEO friendly Хорошая семантика HTML, расширенная с помощью microdata от schema.org. Это и индексация хорошая при прочих равных и красивые виджеты в поисковой выдаче. 5. Accesibility (a11y) На Западе, да и все чаще у нас, выставляются требования обеспечения доступности сайтов для людей с ограниченным возможностями (это не только проблемы со зрением). Во фреймворке хорошая HTML-семантика дополняется, где рекомендовано aria/role-атрибутами, что обеспечивает хорошую доступность для скринридеров. Но a11y, это еще и про хорошую доступность с клавиатуры, в т.ч. а это семантика и правильная HTML-разметка. Все больше стран законодательно обязывают владельцев веб-сайтов обеспечивать их доступность. Также при разработке учтены такие особенности под скринридеры, как продемы списков с list-style: none в Safari. 6. Интернационализация В мире письменность не ограничивается форматом слева-направо и сверху вниз (большинство языков). Иврит и арабские языки, например, пишутся справа-налево. А корейский вертикально! С помощью CSS Logical properties можно писать такой CSS, который будет автоматом перестраивать инфтерфейс, под необходимую направленность письма. Посмотрите, например, на интерфейс Wikipedia для того же иврита. Нужно просто перестроить мышление для использования этих свойств. Почитайте https://www.smashingmagazine.com/2019/08/writing-modes-layout/ и https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/ Т.о. образом просто начав писать CSS по-другому без дополнительных трудозатрат, фреймворк "из коробки" дает "выход" на арабский и азиатский рынки. И все это прекрасно фолбэчится с помощью PostCSS, если необходимо, если что. 7. Дизайн-токены Я говорил, что тема по-умолчанию отсутствует. Но она может быть подключена, как зависимость отдельным NPM-пакетом. Пакет будет содержать ровно один файл с токенами (по сути переменными, содержащими описание дизайна). Во все компоненты фреймворка будет добавлен типовой набор CSS Custom properties с пустыми значениями. И, если в компонент, "спустятся" по каскаду значения из токенов, то все компоненты сразу же станут "задизайнены". Такой подход очень интересен еще и потому, что можно будет легко экстендить чужие темы. Представьте, вам нужно сделать какой-то уникальный попап для темы, которую вы купили. А тема создана по описанным, выше принципам. Так вот, вы заверстываете этот попап по гайдам фреймворка, т.е. компоненты в разметке имеют стандартные классы, в классы в стилях содеожат стандартные токены для типовых свойств (цвета, отступы, размер и т.п.). И вот вы подключаете такой компонент в тему и вуаля, он стал выглядеть, как эта тема. Этот подход похож на Props в React. Ну вот как-то так.
кто-нибудь въехал? =)
Anonymous
кто-нибудь въехал? =)
Многабукф не осилили
Pavel
так и знал!
Pavel
ну тада продолжайте юзать бутстрап =)
Anonymous
Я почитал, в большей степени это про фронт, бэков косвенно касается. Так что некоторые вещи пометил себе, чтобы фронтов пинать 😀
Anonymous
Если что я ни разу в жизни не верстал. Так иногда по мелочам двигал элементы
Алексей
канешно понятно. местами прям родное ))) тока БЭМ меня с его длинными классами совсем не мое... вообще.
iWatchYouFromAfar
кто-нибудь въехал? =)
я вчитался, взяли ущемили SASS
iWatchYouFromAfar
все эти лайтхаусы и пейджспиды считаю излишками
iWatchYouFromAfar
завтра гугл вновь решит изменить систему подсчета баллов и трахадром вновь открыт круглосуточно
Pavel
канешно понятно. местами прям родное ))) тока БЭМ меня с его длинными классами совсем не мое... вообще.
никогда не понимал нытья про длинные классы БЭМ. особенно, если кто-то PUG использует =)
iWatchYouFromAfar
в остальном вопросов нет
Алексей
Pavel
завтра гугл вновь решит изменить систему подсчета баллов и трахадром вновь открыт круглосуточно
это про, во-первых, реальные метрики, влияющие на UX, во-вторых, на SEO
iWatchYouFromAfar
при чем здесь sass?
- CSS в идеале ванильный, приправленный PostCSS, на крайняк SCSS
Pavel
- CSS в идеале ванильный, приправленный PostCSS, на крайняк SCSS
а. так вопрос в том, что 90% юзают SASS ради 3-4 фич, 2-3 из которых уже есть в CSS
iWatchYouFromAfar
это про, во-первых, реальные метрики, влияющие на UX, во-вторых, на SEO
слепить шаблон не СЕО адаптированный это нужно постараться конечно, а вот реальные метрики я не очень понял... что за реальные метрики? ты вставил код ЯМ или ГА и pagespeed уже ныть начинает
Dmytro
Про бем очень жаль что 90 процентов из 90 процентов не умеют его нормально готовить
Pavel
а еще SASS отстает обычно от ванильного CSS в плане поддержеи
iWatchYouFromAfar
отрисовка чтоль?
Pavel
да, с этим связанные вопросы
Pavel
это уже UX и конверсии
iWatchYouFromAfar
не ну флагов и барабанов вам как говориться, я не любитель готовых тем просто
Pavel
но вот эта вещь, поменяет представление о готовых темах
iWatchYouFromAfar
хорошо что в едином стандарте
iWatchYouFromAfar
но вот эта вещь, поменяет представление о готовых темах
да нифига она не поменяет, вон на магазины тем попробуй сверстать что-нибудь, утрахаешься
iWatchYouFromAfar
все равно потом сидишь и из купленной клиентом темы, выпиливаешь лишнее