SamC

Yeah the pension thing is a problem in a lot of countries, and one of the things (along with holidays/sick leave/perks) that makes working for a company more desirable than self-employment. However, there are pros and cons to both. One of the reasons I want to get into process module development (gonna go through @bernhards great guide) is so I can start looking a the core code and classes and a bit deeper into the system rather than just sticking with the API which is an abstraction away from the underlying PHP. I think once I start to get the hang of that, my skills will certainly improve. I was looking at react and stuff to further my JS, but tbh, am I actually going to use that at the moment? If I need a job at a company, then I need to know this, if I'm making websites for local companies self-employed, then probably not. Same with PHP, I have no idea how to use a framework like laravel. But do I need this? That would take time away from PW module development, which would be a great thing to do, contributing to open source, learning more etc. It's like a cat and mouse game, and I'm most definitely the mouse @szabesz when you say achievable goals, this is something I'm missing which would help for sure. What sort of goals do you set yourself?

Defy convention at your own risk... http://www.telegraph.co.uk/cars/classic/austin-allegro-how-the-worst-car-of-all-time-came-to-be-made/

One ‘issue’ I would say for me learning processwire so far is that I’m not sure how much actual php I’ve learnt. My logic skills have certainly improved, I can see that, but as far as getting a Job as a junior dev with js/php I feel like I’m still so far away! Round here they list requirements that read to me like the requirements for a very experienced dev, not stuff that I’d call “junior”. Can be frustrating. I’m trying to get self employed work as a way to get experience as my normal mon-fri day job has nothing to do with web at all, hardly touch a computer (gotta pay the bills though). This is why I’m always at this every night and weekends. Always looking for that opportunity to do this full time! Lucky I enjoy it so much or I would have given up this dream years ago.

My current solution involves: package.json { "name": "myapp", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Sam", "license": "MIT", "devDependencies": { "@babel/core": "^7.0.0-beta.34", "@babel/preset-env": "^7.0.0-beta.34", "babel-loader": "^8.0.0-beta.0", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.2", "less": "^2.7.3", "less-loader": "^4.0.5", "style-loader": "^0.19.0", "uikit": "^3.0.0-beta.35", "webpack": "^3.10.0" } } webpack.config.js const path = require('path'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractLess = new ExtractTextPlugin({ filename: "myapp.css" }); const config = { entry: "./src/js/app.js", output: { path: path.resolve(__dirname, "dist/"), filename: "js/bundle.js" }, module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.less$/, use: ExtractTextPlugin.extract({ use: ['css-loader', 'less-loader'], fallback: 'style-loader' }) } ] }, plugins: [ new ExtractTextPlugin({ filename: "css/myapp.css", disable: false, allChunks: true }) ] }; module.exports = config; app.js // pull in uikit Less from custom file require("../less/myapp.less"); // get uikit JS import UIkit from "uikit"; import Icons from "uikit/dist/js/uikit-icons"; // loads the Icon plugin UIkit.use(Icons); // call a uikit component UIkit.notification("Holy cow, it works!") // test babel is working const name = "Sam"; myapp.less @import "~uikit/src/less/uikit.theme.less"; // do custom stuff below here .hook-card() { // stuff } Ok, granted, it does output '/dist/css/myapp.css' and '/dist/css/bundle.js', both with uikit 3 (JS and CSS) included properly. Gonna get procache when I have the cash to maybe save my sanity if it's not too late Although, on a positive note, if anyone asks on here how to include uikit with npm and webpack 3, they could give this a go.

lol really? I totally missed that. I mean, home is usually on the logo, but tbh, I didn't even notice the logo in the first place. Actually, I don't think I've ever felt so disorientated on a website.

No way! That's sounds insane. You mean I could throw out all the JS config gibberish and actually make some websites? (and make a process module instead of sodding around with webpack which is teaching me absolutely nothing) Saying that, haven't got the £££ for procache right now. Bah!

https://www.pwtuts.com/processwire-tutorials/changing-the-default-admin-theme/ Came to the party too late though

Yep, ignore it! Bunch of google ass. My sites load well fast enough, google says otherwise of course. But my target audience is usually in the UK where people have quickish internet.

Very flashy indeed! I find it quite confusing to use though, there's stuff everywhere! Maybe a silly question, but how do you get back to the homepage? I'm also getting a weird effect at the top on the slider:

I'm about to dump webpack in the bin after seeing this: https://parceljs.org/ ...it's just got ridiculous. Think I'll stick with my gulp setup for now, works fine. However, this interests me quite a bit: I read: https://processwire.com/blog/posts/pw-3.0.76-plus-login-register/#procache-3.1.7-adds-support-for-scss-and-less So you can just import the uikit core into your own mystyles.less file: @import "./uikit/src/less/uikit.theme.less"; // my custom styles .hook-card() { background: red; } and supply mystyles.less to procache? How does this work on a local development (xampp/mamp/lamp)? If you change the source file, are the new changes compiled instantly? Sounds pretty awesome. How does it differ from 'normal' hosting where you get an already set up server with cpanel, phpmyadmin etc. Do you have to setup all this up yourself with digital ocean?

I feel your pain @Tom. Except I came at all this in a different way and learned HTML and CSS until I was blue in the face (then nodejs/gulp/SCSS/Less/postCSS) and now webpack (which I'm finding horrible). Now however, after spending years ignoring JS/PHP (i.e. actual programming), my skills in that area are not good enough. I'm very lopsided towards CSS and the tools themselves. But now JS is so popular, I don't understand react/angular/vue or any of that stuff. You're certainly not alone with the feeling of "too much to learn"!

I do it differently, I use the google recaptcha module here - can install it via classname (MarkupGoogleRecaptcha) in the admin (modules page). So, in my form at the top (where you include valitron): $captcha = $modules->get("MarkupGoogleRecaptcha"); ...then to render it, just: <label for="recaptcha">Recaptcha (required)</label> <!-- Google Recaptcha code START --> <?php echo $captcha->render(); ?> <!-- Google Recaptcha code END --> ...and to check the response: if ($captcha->verifyResponse() === true) I found this way easier. You fill out the secret key and stuff in the module instead of pasting it into your php file.

Did you complete the recaptcha too? i.e. ticking the box and "Select all images with blah blah..." before submitting? The error comes from somewhere in you _contact_controller.php file, the line where the check for validation happens. Goes a bit like this: // if form has been submitted if ($input->post->sendMe) { // if fields are filled out correctly if ($v->validate()) { // if recpatcha is successful if ($captcha->verifyResponse() === true) { // <<<<<<<<<<<<<<<<<<<<<<<< YOU'RE FAILING HERE // if mail has been sent successfully if ($mail->send()) { $session->sent = true; $session->flashMessage = "Thanks for your message! I will get back to you shortly."; $session->redirect($pages->get($contactPageID)->url); } else { // problem sending mail $session->flashMessage = "Sorry, an error occured. Please try again."; } } else { // problem with recaptcha $session->flashMessage = 'Recaptcha must be complete.'; // <<<<<<<<<<<<<<<<<<<<<<<< SO ELSE STATEMENT RUNS } } else { // problem with fields $session->flashMessage = 'Please fill out the fields correctly.'; } }

Just another way in case someone finds this thread and needs an alternative HTML output. There's also a 'currentItemClass' setting which I had to use when I had this exact same problem, those spans being in there were an issue. With an active class on the list item or the anchor tag they are unnecessary. I tried to find a way to just remove them but ended up doing this instead. Also using BS4, except I did it like this (using BS4 variables + extending a custom border class): <div class="pager-nav pb-5"> <?php echo $entries->renderPager(array( 'nextItemLabel' => "Next", 'previousItemLabel' => "Prev", 'listMarkup' => "<ul>{out}</ul>", 'itemMarkup' => "<li class='{class}'>{out}</li>", 'linkMarkup' => "<a href='{url}'>{out}</a>", 'currentItemClass' => "active" )); ?> </div> and the styles: .default-border { border: $border-width solid; border-color: $card-border-color; border-radius: 10px; } /* Pager */ .pager-nav { display: flex; justify-content: center; ul { display: flex; list-style-type: none; margin: 0; padding: 0; @extend .default-border; li { flex: 1 1 auto; &.MarkupPagerNavFirst a { border-radius: $border-radius 0 0 $border-radius; } &.MarkupPagerNavLast a { border-radius: 0 $border-radius $border-radius 0; } a { font-weight: bold; font-size: $font-size-base * 0.9; color: $gray; background-color: $white; display: block; padding: 0.5rem 1rem; } &.active a { background: $main-color; color: $white; } } } } ...outputs: ...html output: <div class="pager-nav pb-5"> <ul> <li class='active MarkupPagerNavFirst MarkupPagerNavFirstNum'> <a href='/processwire-tutorials/'> <span>1</span> </a> </li> <li class='MarkupPagerNavLastNum'> <a href='/processwire-tutorials/page2/'>2</a> </li> <li class='MarkupPagerNavNext MarkupPagerNavLast'> <a href='/processwire-tutorials/page2/'>Next</a> </li> </ul> </div> It's a different approach so I think it's worth sharing.

I like the sound of this. Could you possibly elaborate a bit? Do you mean literally having one page called 'Yes' and one called 'No'? Ot the questions themselves would each be a page in a repeater field?

Thanks for sharing, gotta try this.

Yeah, you got a point. You can't even run 'npm run compile' from the wire folder either because the included version with core doesn't have the source files/node_modules etc. An alternative, maybe you could git clone the module, compile it with less padding, then install it as a custom one in '/site/modules/' for each of your sites. But then of course you need to keep your personal version updated. Maybe you do need that setting after all

Yeah that'd be good, thanks.

You could stick: // Smaller margins @global-margin: 5px; ...inside your custom less file which is imported into '/custom/pw/_import.less/ (or straight in pw-theme-reno.less) and recompile the less (npm run compile), then you can make global margins any size you like... This affects all margins though. In order to do just the inputfields, it's more tricky as there are multiple padding variables all over the place which are saved to other variables. This is only a small example, been studying this theme for about a fortnight now and still finding it awkward tracing the variables about. Either it's a really super complicated thing to do, or the less is just written in a complicated way, not sure which: I do think though that you will lose the consistency if you override just the collapsed inputfields, the global margin would be the way I'd do it so the entire admin has uniform padding throughout. @szabesz maybe set global from 20px to 15px and you'll be happy

Sounds awesome, never done anything like this before, can we see an example application?

@PWaddict maybe take a look at this thread: It was very helpful to me.

Same here, padding looks good to me rather than everything all squished up. 27" monitor at 2560x1440 with chrome at 110% zoom. Also use a 13" retina macbook (for sitting in bed lazy coding - my fave) and looks fine on that too

Anyone else getting this on v3.0.84? It happens with the new admin theme, but also with the regular classic theme.

I modified the AdminThemeUikit for custom colours etc. I copied the module to '/site/modules/' and just used that instead of the '/wire/' one. However, I was thinking it seems pointless using a second copy of a module that may need updating, so I used the 'Primary CSS file' setting in the core to simply link to my customized CSS: However, this the kicks up a bunch of errors in the UI: The new CSS file is being used, but the locations don't exist. Changing the paths would mean modifying these two files before compiling: pw-jquery-ui-custom.less pw-jquery-ui.less ...which is contradictory to the instructions for creating an admin theme. You should only need to modify one Less file to change the entire theme. From 'pw-theme-reno.less': /************************************************************** * Primary variables * * The entire color theme can be adjusted from the @reno * variables below. * */ I guess I could override all the parts that include images in my custom Less file to point at the original images in the wire folder. What I really wanted with this was to enable a total theme change with one CSS file. This would make theming super awesome, just grab a CSS file, point to it in the AdminThemeUikit settings and done. As it stands, you'd have to recreate the path '/custom/pw/images/', then copy the theme images into that in order to only use the CSS setting in core AdminThemeUikit module. An alternative could be for the Less in the module to have a variable pointing to images location (rather than the current hardcoded background: url() ones), then you could just change it in the single Less theme file: @pathToUiIcons: "/path/to/images"; Would make it simple to point straight to the images in the AdminThemeUikit folder. Maybe I'm missing the point of the 'Primary CSS' setting but I can't see how this is useful unless there is also a way to change the path to the UI Icons.

Sounds like something to do with namespaces, but the other members would have a better idea than me for sure. Sorry I can't be of much help! Maybe this (arjens' reply):