Feedback about my start and progress with PW

[daniel712]

Hello All,

just want to feedback in this thread about my personal start with PW and my progress:

I watched the video series of Jonathan Lahijani about WP vs. PW and got very excited. Found a german yt playlist of @LeonidLezner with some infos to start with.

After these two series, understood the main concept and advantages BUT, also understood that there is a lot to learn about PHP and CSS coding to get into PW. It's not just working in the nice PW backend... ? This topic is a bit kind of "under-represented" in the Getting started intros. This is definitly not like WP... - it's way better, but also way more coding itself!

So, where is a good starting point to get in this PHP and CSS topics in connection with PW dev? I also did the Beginners Guide of Francesco Schwarz, but there is not too much about it in this one...

Great thanks for help

  Daniel

[szabesz]

Hello Daniel and welcome to ProcessWire,

If you want to ease your way into working with CSS, then I recommend either using UIkit 3 or Bootstrap 5. Both have its pros and cons, so you need to look into both to decide which one you prefer. For example, I started with UIkit 3 but nowadays I prefer Bootstrap 5. So preferences can change, too :) A lot of PW devs also like Tailwind CSS, for example, but there are loads of others, of course, for example: https://github.com/troxler/awesome-css-frameworks

As for PHP, it's hard to recommend something which stands out of the crowd, but you might find useful tutorials here:

https://hackr.io/tutorials/learn-php?sort=upvotes&type_tags[]=1

Just avoid old PHP tutorials as they probably teach deprecated PHP stuff. Stick to PHP 8.x and up.

Hope this helps. Happy coding!

ps: use the Google site search to search on this forum and/or in the PW blog. You'll get quick results that way.

[wbmnfktr]

So... there are more videos in german available. I recently found these from @hheyne.

https://www.youtube.com/@henningheyne/videos

They will help a lot to get into the topic of ProcessWire even more.

The easiest way to get a basic understanding of PHP - at least in my opinion and for a good start with ProcessWire - the official tutorials are really good at this. They tell you how to work with ProcessWire and the absolute basics you need. You can achieve a lot with just that. Maybe not an eCommerce/shop system or similar, but a blog, portfolio, and such are absolutely possible. Maybe look into the existing site profiles to see how others do things. There are some interesting ones there.

https://processwire.com/docs/tutorials/
https://processwire.com/modules/category/site-profile/

You really should play with these and give them a try.

In terms of all the frontend stuff... that's a bit harder. Even though Bootstrap and UIKIT are nice frameworks, you should know at least the basics of HTML and CSS. Which brings us back to the beginning unfortunately.

The way I learned most of the stuff was by playing with existing themes and templates - that's decades ago. There are tons of free themes/templates out there you could deconstruct.

https://styleshout.com/
https://html5up.net

There are good tutorials from Kevin Powell, WebDevSimplified, developedbyed, and many more on YouTube. Maybe give them a try.

[daniel712]

Great! Thanks guys for the starting points!

Quote

There are some interesting ones there.

https://processwire.com/docs/tutorials/
https://processwire.com/modules/category/site-profile/

You really should play with these and give them a try.

This brings me to another ddev question:

When i am browsing through these different profiles to figure things out, do i need to spin up a whole new ddev config for each PW instance or can i do multiple subdomains with each one project in it. But then i would need also different db's - from the first hours of playing with these setup it's only one db in one ddev config, correct? So i will do one ddev config for every project/profile?

[bernhard]

8 hours ago, daniel712 said:

So i will do one ddev config for every project/profile?

I think that is the simplest and cleanest approach. It's possible to spin up multiple databases for one project (https://stackoverflow.com/questions/49785023/how-can-i-create-and-load-a-second-database-in-ddev) but as long as you don't need to have both projects talk to each other I think having them isolated would be the way to go.

Just curious: Did you also find processwire.rocks or did that not pop up in your search? Especially the video about RockFrontend could be very interesting for you.

13 hours ago, szabesz said:

If you want to ease your way into working with CSS, then I recommend either using UIkit 3 or Bootstrap 5. Both have its pros and cons, so you need to look into both to decide which one you prefer. For example, I started with UIkit 3 but nowadays I prefer Bootstrap 5.

I second that recommendation. Having a css framework has helped me a lot to get things done (and work ? ). I'm a huge fan of UIkit and especially in combination with RockFrontend it's a joy to use.

I'd be curious in why you switch to bootstrap @szabesz? I've been looking into Bootstrap recently as there is a lot bigger ecosystem around bootstrap. There are so many great and free templates for bootstrap, but none for uikit. Also their efforts on using css variables is very interesting! I'm just a little afraid of the switch. RockFrontend + Less + UIkit work so well and I usually have all the tools that I need and even the awesome UIkit Javascript Microframework is so nice (https://github.com/uikit/uikit-site/blob/feature/js-utils/docs/pages/javascript-utilities.md) that I'm afraid I'd be missing something on bootstrap ? 

[szabesz]

1 hour ago, bernhard said:

as there is a lot bigger ecosystem around bootstrap

Mostly because of that. For example I wanted to use https://bootstrap-table.com/ and some other smaller interface elements, as well. Also, its docs are better than the UIKit's, I think. While Bootstrap 4 was not something I considered moving to, Bootstrap 5 has matured a lot, so that is why I started to looking into using it in the first place.

Also, Bootstrap is more of a "low level LEGO" solution compared to UIKit, which can be a good thing at times. (For this reason, it is easier for beginners to start with UIKit 3, I believe.)

1 hour ago, bernhard said:

UIkit Javascript Microframework

I am also a fan of Unpoly and jQuery so I do not need yet another similar helper.

uikit.min.js is 139Kb while the full version of jQuery is 90Kb so it looks like the UIKit developers had to (at least partially) reinvent the wheel just to get rid of jQuery. (I have never used UIkit.util too much, so I cannot say for sure, but looking at the docs they have overlapping features.)

Also, Unpoly and jQuery has overlapping features, too, but I am still not ashamed of using  jQuery even in 2023 :) I'm mostly using it for its powerful "selecting" capabilities, which are concise and have matured throughout the years.

Edited April 5, 2023 by szabesz
typo

[daniel712]

Quote

So... there are more videos in german available. I recently found these from @hheyne.

https://www.youtube.com/@henningheyne/videos

Hi Friends,

yes night a had a little doubt when i was browsing some profiles (uikit3 i started with)... will i ever get into this, or just stop right away... ? BUT Let's try step by step...

I mean, i come from a Linux server background (server, and cloud maintaining). So a every day maxim to me is KISS (keep it simple stupid!)... But when i watched all this weaving together HTML, PHP and CSS i  was overwhelmed...

Today i started the tutorial series of Henning to get in the basics and a lot of things become very clear! I hope i can get around coding all the CSS stuff... jut use a nice template and adjust... hopefully... ?

Small anecdote: When setting up vim plugins for the PW dev i smiled a little about the commentary plugin... "why do i ever need a plugin to do comments?" - then i saw all the different commenting styles in these files... :)))

How do you solve the problem of filetypes in vim? I can either set it to html or php, but i need both... in ultisnips i can add filetypes together, the works like a charm, but otherwise? Do you set it to php or html?

[flydev]

Welcome, I see you already got gud answers, and I like to put as always what made me understand ProcessWire on first start.

https://youtube.com/watch?v=IHqnLQy9R1A

There is one or two more vid to see.

Then there on the forum is a lot of good threads. I am on mobile so I give you the oldest but still ✅ to follow, quite a gold post for beginners :

https://processwire.com/talk/topic/4173-grouped-forum-posts-links-articles-tutorials-code-snippets/

Forgot to add something you should also consider giving a look - page-grid - https://weekly.pw/issue/454/

Enjoy ?

 

 

[flydev]

37 minutes ago, daniel712 said:

How do you solve the problem of filetypes in vim? I can either set it to html or php, but i need both... in ultisnips i can add filetypes together, the works like a charm, but otherwise? Do you set it to php or html?

PHP as there is no HTML file to lookup anymore, use ncm2 and php-actor plugins. But, as a small advice (I am a nano guy, you know it, real programmers use nano lol), do yourself a second favor, try VSCode, optionally install the VIM theme ?

[wbmnfktr]

21 hours ago, daniel712 said:

Today i started the tutorial series of Henning to get in the basics and a lot of things become very clear! I hope i can get around coding all the CSS stuff... jut use a nice template and adjust... hopefully... ?

While learning ProcessWire you will burn through a lot of test and demo sites. Or at least I did. And it was fun. Just start building something you already know the structure of. Like a blog, music collection or movie review type of site. Those data structures are relatively easy so it's a good starting point in my opinion. You will get things wrong at the beginning or will find better solutions later on. Enjoy the process.

21 hours ago, daniel712 said:

How do you solve the problem of filetypes in vim? I can either set it to html or php, but i need both... in ultisnips i can add filetypes together, the works like a charm, but otherwise? Do you set it to php or html?

I rarely use HTML-comments in my PHP files so there is nothing I had to change. There are two awesome plugins preservim/nerdcommenter and tpope/vim-commentary - maybe those have some settings available to master this part.

Yet I support @flydev's recommendation of using VS Code could be a better option right now. You have way easier access to everything and always see where you are, where you might need to go, and yes... the whole structure. Way more important are extensions. That's way easier in VS Code than in VIM. Maybe not better but faster.

The moment you know all necessary files, where they are, which names they have, which names and files might be in several places or are similar (init.php and _init.php for example) switch back to VIM if you like. FZF or Telescope are way faster and more reliable than VS Code's Ctrl+P feature. With NVIM's LSP setup and some configs it could probably outsmart VS Code extensions as well.

[daniel712]

Hey Friends,

thanks for the hints to VSCode... ? but i am too much into vim, like and those functions you mentioned are way more customizable, and so on... but with this little anecdote let's put asleep the $EDITOR topic: Yes i watched Kevin when he was duplicating a section block like 5 times in VSCode ... "1, 2, 4 ... now we have 5, i think..." - lol - so , thats one of the main reasons for vim, i love my "vat" or "8dd", not even touched the macro function... :))

Where to go from here:

I found the CSS tuts of Kevin Powell. That will help me through the CSS dschungle! ? Great thanks for that! He also had good tipps for beginners to HTML5 to do it right from the beginning. What i love about this is the close similiarity to LaTeX, because i'm a great fan of LaTeX! And there they copied the principle of keeping apart structure and content... ? Best Wishes to Don Knuth! ? ... Small anecdote to this: I loved the clip where he strippes down the mess in the FIFA Site... ?

I heard about DOM manipulation, so this is a topic to look into for the next days...

Where would be a good starting point to read about a mysql connection of PW to an external existing database? This topic i am very excited about to get and update values thereof with the nice php functions of PW and the custom style templates... i love this freedom! Great Thanks to all PW Devs! ?

Should also be no stress to print nice LaTeX or Markup pdf documents with PW, correct? Has anybody talked about this topic?

For the beginning i will follow the advice of Kevin and try to copy existing sites and to contribute to OpenSource projects, because that's my world... Let's see!

 

 

[daniel712]

Quote

How do you solve the problem of filetypes in vim? I can either set it to html or php, but i need both... in ultisnips i can add filetypes together, the works like a charm, but otherwise? Do you set it to php or html?

I did this thing with a keystroke for now... with <F9> and <F10> i can switch the filetype btw html and php, so this works...

[flydev]

3 hours ago, daniel712 said:

Where would be a good starting point to read about a mysql connection of PW to an external existing database?

Give a read to this Ryan 2012 answer. Then, a good habit in pw, is to just read his clear and concise comments on the source code, easy as .. 

Do not hesitate to ask for help if needed.

Documentation: https://processwire.com/api/ref/wire-database-p-d-o/

Edited April 7, 2023 by flydev
Doc link

[szabesz]

@daniel712 You might find these informative:

• https://processwire.com/talk/topic/21364-legacy-or-second-database-with-processwire/#comment-184482
• https://processwire.com/talk/topic/3987-cmscritic-development-case-study

Also, site localized googling can be helpful: https://www.google.hu/search?q=external+database+site%3Aprocesswire.com%2Ftalk

Hope this helps.

[daniel712]

Hi Friends,

working through different workshops to get into HTML, CSS weaving together with PHP... (Henning and Kevin Frontend Mentor...)... first things first ? I love it... it's so flexible! 

In the Frontend Mentor project i have to use JS on a site. This does not work. Do i have to "enable" JS in PW? I have this code in my head coming from the default:

    <script src="<?php echo $config->urls->templates; ?>scripts/main.js"></script>

Thanks for that!

And PS: is there any way to make these PHP inside HTML some more READABLE??? The code looks sooo ugly. May i break up these long lines with all the PW php inserted? Or how do you do this?

Example:

          <a href="#"><img src="<?php echo $config->urls->templates; ?>images/logo.svg" alt="Manage"></a>
          <button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false"> 
            <img class="icon-hamburger" src="<?php echo $config->urls->templates; ?>images/icon-hamburger.svg"  alt="" aria-hidden="true">
            <img class="icon-close" src="<?php echo $config->urls->templates; ?>images/icon-close.svg"  alt="" aria-hidden="true">
            <span class="visually-hidden">Menu</span>  <!-- screen-reader ... accessability  -->
          </button>

 

[szabesz]

Hi,

When including css/script files, I recommend some cache busting technique, like:

/**
 * Adds file modified date as query string and returns URL to given asset.
 * <script src="<?= assetUrl("assets/js/site-global.js") ?>"></script>
 *
 * @param $relPath string File path relative to /site/templates/, such as "assets/css/site.css"
 * @return string URL with cache busting query parameter
 */
function assetUrl($relPath) {
    $fullPath = wire()->config->paths->templates . $relPath;
    $modified = "";

    if (file_exists($fullPath)) {
        $modified = "?v=" . filemtime($fullPath);
    } else {
        wire('log')->error("CUSTOM WARNING: assetUrl() reports: file of {$fullPath} is missing! (current page ID: " . page() . ")", Notice::debug);
    }

    $url = wire()->config->urls->templates . $relPath . $modified;
    return $url;
}

Add such a utility function to your init.php (or _init.php if you are using it with $config->prependTemplateFile) and call it like shown in the comment above.

44 minutes ago, daniel712 said:

And PS: is there any way to make these PHP inside HTML some more READABLE???

Whenever possible, instead of <?php echo ?> use <?= ?> I think that helps a lot. Also, good IDE and a good color theme can visually make things a lot easier on the eyes. I have PhpStorm for example which even highlights HTML/CSS/JavaScript properly in PHP strings/literals so it helps me a lot in this and other areas as well (for example writing proper comments and a lot more).

Edited April 14, 2023 by szabesz
typos

[bernhard]

36 minutes ago, daniel712 said:

In the Frontend Mentor project i have to use JS on a site. This does not work. Do i have to "enable" JS in PW? I have this code in my head coming from the default:

    <script src="<?php echo $config->urls->templates; ?>scripts/main.js"></script>

You don't have to enable JS in PW. And you can't. ProcessWire just manages content for you and then sends data to the user's client, that is visiting your website. Usually that data is HTML markup. In that markup you can tell the browser to load or execute JavaScript.

You can either use inline JavaScript like this:

<script>
  alert('I am a JavaScript alert');
</script>

That should pop up a JS alert when visiting the page that outputs that lines of html.

The other option is to load an external JavaScript file, which would/should work exactly like you wrote above. I recommend to put only this into the file until that works and then proceed:

alert('works');

 

41 minutes ago, daniel712 said:

And PS: is there any way to make these PHP inside HTML some more READABLE???

You can use RockFrontend to use the Latte template engine. I love it. This is how it would look in your example:

<a href="#"><img src="{$config->urls->templates}images/logo.svg" alt="Manage"></a>
<button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false"> 
  <img class="icon-hamburger" src="{$config->urls->templates}images/icon-hamburger.svg"  alt="" aria-hidden="true">
  <img class="icon-close" src="{$config->urls->templates}images/icon-close.svg"  alt="" aria-hidden="true">
  <span class="visually-hidden">Menu</span>  <!-- screen-reader ... accessability  -->
</button>

You could also just use PHP's short tag syntax:

<a href="#"><img src="<?= $config->urls->templates ?>images/logo.svg" alt="Manage"></a>

 

[daniel712]

Great, thanks for the Tipps! Getting there... getting there...

For the highlighting: I'm a vim guy (like wbmnfktr), so i use neovim with the treesitter plugin for highlighting and nvim-cmp with emmet for the completion. So the highlighting is very nice. I just thought there is a nicer way to write this php inside html somehow nicer, but with the shorthand that's already a little better. In general it's still not very nice... Does anybody know a nice example of this where some care has been taken to make the code itself look as much readable as possible?

Another small question came along (i am going through some workshops...): When i want to put a background image in the CSS file instead of the HTML, the PW php command regarding the path of the file does not work. Is there a solution for this, or is it not the way to do things?

  .mobile-nav-toggle[aria-expanded="true"] {
    background-image: url("<?php echo $config->urls->templates; ?>images/icon-hamburger.svg");
  }

vs.

  .mobile-nav-toggle[aria-expanded="true"] {
    background-image: url("../images/icon-hamburger.svg");
  }

[daniel712]

Sum up for the last weeks:

I learned a lot about HMTL and CSS. Now i will try to do some own sites and see how far i can get...

One question about CSS is: Do you use frameworks or do you style up your projects with your own "little" CSS framework? On this question there are also different youtube contributions of the above mentioned channels, which are very good!

But also i want to ask here in the PW community, how you "usually" start projects?

Do you usually first take a framework (e.g. bootstrap) and only in specific cases style up the project on your own, or do you go the other way round and take your own styles and only for specific reasons take a framework, and why?

Until now, i think, it makes more sense to study CSS and JS itself before studying bootstrap, because their docs are also very escalating and bloated. And after all your work "looks like bootstrap", except you come up with a lot of work on top to "restyle" it that it looks a little bit different.

Tanks for all your input on that and Best Regards!

[szabesz]

5 hours ago, daniel712 said:

it makes more sense to study CSS and JS itself before studying bootstrap

Sure, you need to understand at least the basics of CSS and SCSS before moving on to bootstrap or similar. To begin with, you might want to learn about how to shape page layouts with CSS as that is an essential part of website design.