Vanilla JS, Vue.js, HTML/CSS/LESS, RWD, PHP, MySQL, WordPress/WooCommerce, Illustrator/SVG, PhpStorm, Git, Gulp, Webpack, nginx/apache, Ubuntu, Docker, Bash,

Веган, порой сыроед

Достижения

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

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

Все теги (27)

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

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

    @FullStackAlex Автор вопроса
    Веб-разработчик, электрик, кочевник
    Наконец таки я решил все технические вопросы для внедрения 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.alexfullstack.dev, там больше клёвых анимаций))
    Пока всё. 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 и очистил код.
    Ответ написан
    21 комментарий
  • С какой книги стоит начать изучать html5 и css3?

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

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

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

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

    @FullStackAlex
    Веб-разработчик, электрик, кочевник
    Я лично не назвал бы себя особо большым спецом. Но написал уже пару приложений от и до с 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 :)
    Ответ написан
    3 комментария
  • Как отключить адаптивность в bootstrap? Или как сделать так чтобы сайт открывался всегда в полной версии?

    @FullStackAlex
    Веб-разработчик, электрик, кочевник
    помимо viewport можно ещё указать минимальную ширину body и html тэгов:
    body, html {
        min-width: 1000px;
    }
    Ответ написан
    Комментировать
  • Реально ли найти гуру frontend-a с которым можно посоветоваться по различным вопросам или это бредовая идея?

    @FullStackAlex
    Веб-разработчик, электрик, кочевник
    Такого рода знакомства в ходе совместного сотрудничества могут возникнуть. Но так, чисто для консультации будет думаю трудно (или даже не реально) найти какого нибудь "гуру" просто "поболтать".

    Я живу в Берлине, тут наверное самая динамичная Web-Dev-сцена во всей Европе, но и мне в принципе не с кем со стажем "проконсультироваться". Бывал я тут на многих meetups (meetup.com) на темы Vue.js, Symfony и WordPress и разговаривал с некоторыми профессионалами, но толку от этих разговоров было мало, разве что пожрать бесплатно обычно на берлинских meetups можно очень хорошо, так как часто их финансируют фирмы которые ищут профессионалов, но даже и это мне как вегану-сыроеду не интересно.

    Так что я просту учусь в одиночку но с помощью хороших книг и туториалов (udemy.com, skillshare.com, lynda.com) и работаю спокойно. До сих пор мой концепт совсем не плохо работал.
    Ответ написан
    Комментировать

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

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