Vanilla JS, Vue.js, HTML/CSS/LESS, RWD, PHP, MySQL, Wordpress, Illustrator/SVG, PhpStorm, Git, Gulp, Webpack;
Веган, порой сыроед, последние 10 лет скитаюсь по "миру"

www.tech-nomad.de

Достижения

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

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

Все теги (26)

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

Все ответы (30)
  • Vue.js + Wordpress?

    @Tech_Nomad Автор вопроса
    Веб-разработчик, переводчик, фрилансер, кочевник
    Наконец таки я решил все технические вопросы для внедрения Vue.js в WordPress-Workflow. Долго я к этому шёл. Трудно было совместить freelancing на основе WordPress и WooCommerce и одновременно самообучение Symfony и Vue.js и создание первых реальных проектов на их основе. Но создание первого большого проекта на основе headless Symfony 4 (JSON API) и потребителя на основе Vue.js меня хорошо продвинуло вперед в направлении внедрения Vue.js в WordPress. Почему мне так интересен WordPress/WooCommerce умея делать Backend на основе Symfony? Потому что WordPress делает доступным веб технологии и маленьким клиентам по "демократическим" ценам, при этом всё ещё позволяя фрилансеру хорошо заработать (по крайней мере в Берлине, где я проживаю).

    Так как путь сюда до сих пор никем в интернете детально не описан и я угрохал недели если не месяцы на решение этой задачи прочитывая все статьи и docs с этой темой связанные (освоил для этого даже наконец таки Docker и Nginx и углубил знания в настройке Webpack) и пройдя многие не верные пути (vue-cli, nuxt.js) - я решил создать в течении следующих недель курс на Udemy.com на английском за 20 баксов. Если будет тут достаточно интереса (хотя бы лайков 10 ), то сделаю туториал и на русском. Курс будет содержать настройки Webpack, Docker (optional), Apache/Nginx. Моё решение сохраняет в отличии от nuxt.js все преимущества как WordPress так и Vue.js при этом соблюдая "законы" SEO и Social Marketing (Twitter Cards, Facebook Open Graph итп) и самое главное Hot Module Replacement с PHP/WordPress Templates!!!!!! .
    Я очень разочарован Nuxt.js и расскажу в Tutorial почему он далеко не во всех случаях технически годен и почему с точки зрения open source этот проект не оптимальный исходя из моего личного опыта.

    UPDATE 15.05.2019
    К сожалению руки до туториала так и не дошли. Но создал Github Repo с простым Starter Theme.
    Демо можно тут просмотреть: wue-theme.app
    Пока без доскональной документации. Надеюсь к концу месяца создам.
    Приколы темы:
    -Hot Module Replacement с PHP файлами (если только это интересно можно и тут скачать Webpack config)
    -полная поддержка SEO без Server Side Rendering (SSR). Реализуется это за счёт загрузки данных вместе с HTML в глобальном JS объекте "technomad", вместо дополнительного AJAX-запроса, что не поддерживается гуглом и для чего и нужны все прибамбасы типа Nuxt.js и phpv8/v8js.
    -элементы меню и новости автоматически добавляются через WordPress-Backend.
    -тема устонавливается как и любая другая тема без каких либо дополнительных настроек сервера (нужно скачать всю Repository и скомпремировать "wuetheme" папку в ZIP и тогда можно просто загружать как и обычную тему).
    -Github Repo без данных из демонстрации. Может ещё добавлю функцию установки демо данных.
    -сервер демо во Франкфурте без CDN. Так что во Владивостоке загрузка наверное немного дольше длится будет)) Из Берлина за 600-700ms загружается с VPS.
    -есть ещё много над чем работать (pagination, проверка загруженны ли скрипты и стили плагинов при Ajax route change, пока они загружаются только при инициальной загрузки, но скрипты и стили могут быть на каждой странице иные) , нo даже в данном виде эта тема на сколько я знаю уникальная.
    -тут можно проследить прогресс перестройки моего сайта с этой темой: stage.tech-nomad.de, там больше клёвых анимаций))
    Пока всё. Have fun :)

    Update 30.05.2019
    Много чего обновил на Github.

    Update 02.06.2019
    Я решил вчерашнюю проблему)))
    Нужно было просто выспаться))
    Завтра подробно опишу и обновлю Github Repo.

    Update 03.06.2019
    -загрузил на Github новую "bulletproof SEO" версию с "Dynamic Rendering Implementation"
    -подробная статья тут

    Update 14.06.2019
    Перенёс сайт на wue-theme.app.
    Демонстрация Github версии тут: starter.wue-theme.app
    Добавил простую Load More Pagination и очистил код.
    Ответ написан
  • С какой книги стоит начать изучать html5 и css3?

    @Tech_Nomad
    Веб-разработчик, переводчик, фрилансер, кочевник
    если знаешь английский то начинай с этих двух:
    John Duckett: HTML + CSS и JavaScript + jQuery

    обе можно легко найти в гугле в формате пдф:
    filetype:pdf john ducket (jQuery javascript OR css html)

    если же с английским не очень:
    Мэтью Мак-Дональд: HTML5 - недостающее руководство

    Дэвид Макфарланд: CSS3 - большая книга
    Ответ написан
  • Что почитать по архитектуре Vue-приложения?

    @Tech_Nomad
    Веб-разработчик, переводчик, фрилансер, кочевник
    Я лично не назвал бы себя особо большым спецом. Но написал уже пару приложений от и до с Vue.js и так получилось что создал насколько я знаю первую полноценную plug and play тему для WordPress (то есть без Node.js SSR но при этом с полной SEO поддержкой, таким образом пользователь может её просто установить как обычную тему на своём сайте и использовать без каких либо дополнительных работ над кодом сайта, что на данный момент при остальных существующих концептах для WordPress в сфере Vue.js не возможно).

    При самообучении (главным образом 22-ух часовый курс от Maximilian Schwarzmüller на Udemy.com) я не натыкался на серьёзные ресурсы с углублённым обсуждением архитектуры Vue.js приложений. Наверное те кто в этом шпарит не сидят особо на тостере или stackoverflow :) По этому я лично просто подстраивал архитектуру своих приложений под endpoints данного Backend (Symfony 4 и WordPress). Для WordPress я просто организую компоненты как я бы организовал обыкновенную тему для WordPress:
    post.php ---> src/components/main/single/post.vue
    index.php ---> src/components/main/lists/posts.vue
    front-page.php ---> src/components/main/pages/home.vue
    page.php ---> src/components/main/single/page.vue
    archive-{custom-post-type}.php ----> src/components/main/lists/{custom-post-type}-posts.vue

    Сайт я делю на части Main, Header, Footer, (Sidebar, если навигация не в Header,) и Modals. (Глобальная) Коммуникация между ними происходит через Vuex модули. А Vue-Router обрабатывает HTTP запросы, используя при этом Axios.

    Обширные и многочисленные методы и hooks (activated, mounted, etc) одной компоненты пытаюсь насколько можно переносить в Mixins и делать их универсальными для использования в других компонентах чтобы держать script tag максимально чистым (когда ищешь ошибки, 200-400 строчек скрипта и 10 разных между собой связанных методов могут стать огромным pain in the ass).

    Совсем недавно натолкнулся на этого парня, которого пару статей и сайт мне понравились:
    https://markus.oberlehner.net/
    Возможно уже в его обширных статьях вы найдёте кучу нужной информации. В добавок он собирается как раз на эту тему выпускать книгу и тут можно на его newsletter подписаться (я подписался и пока никакого спама, только по теме):
    https://oberlehner.us20.list-manage.com/subscribe?...

    А вот куча интересных ссылок которые получаешь при первых же результатах поиска "Vue.js аrchitecture" (то есть без гарантий с моей стороны):
    https://v1.vuejs.org/guide/application.html
    https://learn-vuejs.github.io/vue-patterns/useful-...
    https://itnext.io/how-to-structure-a-vue-js-projec...
    https://dev.to/maxpou/3-tips-for-scaling-large-vue...

    В этой книге есть часть под названием "Large Application Patterns with Vuex":
    https://www.amazon.de/dp/B01N6VAO4P

    Эта книга тоже кажется интересная, более 200 страниц посвящены Vuex и Vue-Router:
    https://www.amazon.de/Fullstack-Vue-Complete-Guide...

    Ну и последним самые авторитетные ресурсы на эту и похожие темы с VueConf Talks:
    https://www.vuemastery.com/conferences/vuejs-amste...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/connect-tec...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...

    Have fun :)
    Ответ написан
  • Нужен совет от фул стек фрилансеров. Стоит ли пытаться стать профи и в js и в php?

    @Tech_Nomad
    Веб-разработчик, переводчик, фрилансер, кочевник
    Я не супер крутой профи в обоих языках. Но уже 10 месяц работаю фрилансером в Германии. Если твоя цель быть фрилансером, то ничего иного не остаётся как углубляться в оба языка. Так как иначе будешь зависить от агентур, которые будут требовать много, а платить как можно меньше. А если хочешь выйти напрямую на заказчиков, то нужно понимать все нюансы веб дизайна и ими владеть как можно глубже (по мимо JavaScript ещё и RWD, SVG/Photoshop/Illustrator и SEO). Для углубления в JavaScript могу посоветовать эти книги:
    shop.oreilly.com/product/9780596805531.do
    https://github.com/getify/You-Dont-Know-JS
    www.apress.com/us/book/9781430262688

    Если же цель работать на Агентуры и прочие, тогда думаю нужно будет делать фокус на специализацию.

    Возможно узким спецам платят на много больше (в Германии до 150€ в час, смотри gulp.de). Но работать на корпорации - это не моё. Я намного больше получаю кайф если могу клиенту в любой сфере вебдизайна помочь решить проблему/задание. Но конечно это шпагат который нужно тренировать - то есть помимо работы нужно постоянно обучаться разным технологиям.
    Ответ написан
  • Как отключить адаптивность в bootstrap? Или как сделать так чтобы сайт открывался всегда в полной версии?

    @Tech_Nomad
    Веб-разработчик, переводчик, фрилансер, кочевник
    помимо viewport можно ещё указать минимальную ширину body и html тэгов:
    body, html {
        min-width: 1000px;
    }
    Ответ написан

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

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