pwtuts.com - tutorials

[SamC]

On twitter @pwtuts

I made this site to:

a) help get beginners up and running with PW.
b) give something back to a community that has been very helpful (and patient) to me.
c) improve my own knowledge because writing about it really drills it home.

Modules:

AOS - lots of useful admin tools
Connect page fields - made tagging and related posts very easy indeed
Custom inputfield dependencies - used to hide fields (on child pages) in a multipage post because all blog posts use the same template
ProFields: repeater matrix - used for all body content (image, RTE and code fields)
Markup Sitemap XML - for submission to google search console
ProFields: Auto links - I have a bunch of pre-determined strings in here (that I need to print out and stick on the wall...)
Tracy Debugger - still can't use properly
IMagick image sizer - very fast compared to GD, especially when some posts have 5+ images and the originals are 2500px wide

Tools:

NodeJS with the usual suspects:

  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "cssnano": "^3.10.0",
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^3.0.0",
    "postcss-flexbugs-fixes": "^3.0.0"
  },
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6"
  }

Bootstrap 4 (npm)
SCSS

In short: had a bunch of fun making this, learned loads. and looking forward to updating with more tutorials.

[adrian]

Beautiful work @SamC ! I look forward to reading through all the tuts sometime soon.

For the lazy amongst us, here is the link: https://www.pwtuts.com

4 minutes ago, SamC said:

Tracy Debugger - still can't use properly

I am glad you are using it, but sad that you don't think you are using it properly. Do you think there are some things I can do to make it easier to understand/use? Maybe we need a tut for it

[elabx]

Great idea and execution!!

I think this could turn into a very important piece of the PW ecosystem. Congrats!

[benbyf]

Awesome work! Keep it up!

quick note, the logo looks abit crunchy on my macbook pro, would suggest hi res image or svg.

[DaveP]

15 hours ago, adrian said:

Maybe we need a tut for it

Joking apart, that's a great idea.

BTW @SamC, would you be open to accepting submissions?

[SamC]

22 hours ago, adrian said:

I am glad you are using it, but sad that you don't think you are using it properly. Do you think there are some things I can do to make it easier to understand/use?

I don't think so. I think it's just me. I'm not like some of the members here with years of PHP experience so I've just never used a tool like this before. I'm sure over time, the usefulness will become much more apparent. I mean, I still use ST3 instead of an IDE because I don't make anything with enough complexity to require one. I'm interested in learning more about the PW classes though and how things actually work together in the background. I have done a Java course at the Open Uni so did stuff like classes/creating objects/getters/setters/interfaces/inheritance/abstract classes/overloading. Was basic but probably enough to get me started.

8 hours ago, benbyf said:

the logo looks abit crunchy on my macbook pro, would suggest hi res image or svg.

Yep, it's a png exported from the original svg I made. Tbh I suck with svg. I use inkscape purely because I can't justify the monthly cost for illustrator although I'd love to give it a shot. I guess I need to change the font in the logo to a path in order to actually see the correct font in the resulting svg when it's displayed on a webpage.

7 hours ago, DaveP said:

BTW @SamC, would you be open to accepting submissions?

Of course, always open to new ideas! I thought this might come up. Would be awesome to have 'posted by displayName', which links to a page listing all the posts written by whatever name. I bet connect page fields could be used for this somehow, maybe a page ref on the user template which links to the existing page ref on the blog posts (the one already linked to the page ref on the tag-entry template).

Not sure how to handle the actual content creation though, I didn't plan on having a user registration form. Maybe I could create a user by request or something.

Thanks for the feedback everyone, it's very useful

[adrian]

6 minutes ago, SamC said:

I use inkscape purely because I can't justify the monthly cost for illustrator

I hate Inkscape - if you don't have Illustrator, take a look at Gravit Designer: https://designer.io/

There are web-based and desktop versions available.

[tpr]

Affinity Designer seems another good choice:

https://affinity.serif.com/en-gb/designer/

[Christophe]

@SamC

And if Gravit Designer doesn't suit your needs, you can always acquire Affinity Designer (no Linux or web-based version) - during the Black Friday period.

Edit: you also currently have a special offer until the 16th for the launch of the 1.6 version. 
It's possible (some of) the free gifts will still be offered during the Black Friday period.

Edited November 7, 2017 by Christophe
Added information

[SamC]

Wow, great suggestions! You mean I can finally use my wacom sketch thing after owning it for about 5 years (in the cupboard)??

Guess I know what I'll be doing for the next few days. Affinity presents a problem though:

"We license Affinity Software for iPad and Mac OS through their respective App stores, independently of Windows and the license is not transferable and needs to be bought for each independent OS (Windows/Mac/iOS) you wish to use it on".

 I use a macbook and a desktop pc. Guess I'll try gravit.

[SamC]

1 hour ago, SamC said:

the logo looks abit crunchy on my macbook pro, would suggest hi res image or svg.

Looks ok now? Bodged an svg together before I look into other image options suggested above.

[Christophe]

I'll add Vectr and sK1 2.0 (ex.PrintDesign) (to Gravit Designer and Affinity Designer).

(There is also SVG Edit, mentioned in another topic.)

Edited April 27, 2018 by Christophe

[bernhard]

Hi @SamC, really nice project! I've just stumbled over your admin theme tutorial: https://www.pwtuts.com/processwire-tutorials/making-a-custom-admin-theme-using-uikit-3-and-the-included-build-tools/

Quote

In the future, myself (and other members of the forum) are looking at a module to do things like colour changes but this is still just an idea.

This is not true any more ? 

Maybe you want to update this tutorial?

[SamC]

@bernhard nice!

I'll update the tutorial (done now) and point to this module. I haven't had much time at ll to work on that site, been so busy trying to learn enough skills to call myself a dev one day...