Leaderboard

Just pushed v1.1.0 - actually it is not a "color" picker any more ? // custom CSS + HTML example $event->object->setColors('site_bgcolor', [ // custom css 'custom' => [ 'background: rgb(34,0,255); background: linear-gradient(90deg, rgba(34,0,255,1) 0%, rgba(0,0,0,1) 100%);', 'Blue to black gradient' ], // custom html 'custom2' => [ '<div style="width:200px;"> custom html demo ? </div>', 'Custom HTML demo :)' ], ]);

Happy new year everyone! New year, new module 🙂 A super simple color picker for the ProcessWire backend that can not only pick colors but also custom HTML (so you can use it for picking gradients, for example). Docs and Download: https://www.baumrock.com/en/processwire/modules/rockcolorpicker/

This week I'm happy to report that the InputfieldTinyMCE module is now released. It is currently released in the modules directory and GitHub but the plan is it will be merged into the core, likely before the end of the year. No need to wait till then though, as you can start using it today. Please consider the module in beta for the moment, though the TinyMCE library itself is in a stable state. A lot of the work that went into developing this module went into the configuration aspect. Here are a few a more details that weren't covered in last week's post: After installing the module, on the module configuration screen, you can decide whether several settings should be configurable for each field, or if you want to just configure them with the module (affecting all fields): One of things that I thought was important was to make it a lot simpler to add custom classes/styles to the editor. I always found this kind of a pain in CKEditor. So in TinyMCE, I made it so that you can just define these custom styles with the field settings using just simple CSS definitions. InputfieldTinyMCE takes care of converting to a format that TinyMCE can understand (for its menus), as well as the styles to show in the editor. For instance, I wanted to add some common Uikit text classes to a custom "Uikit" group in the Styles dropdown: And here's the result in the editor: The markup produced has the correct Uikit classes in the markup so that on the front-end of my site the output is Uikit ready. You can add 3rd party or your own custom plugins from the module settings: And then you can enable them for any field in the field editor: These are just a few interesting tidbits, but there's a lot more. Also, if you didn't see last week's blog post, that covers a lot more too. Either way, I'd encourage you to download InputfieldTinyMCE, give it a try and please let me know how it works for you. If you come across any bugs, please open an issue report. Thanks for reading and have a great weekend!

Okay then I'll have a look at it, I hope it's not that difficult to implement ?

Hi @zoeck thx and same to you! It would have been nice to create a new topic for that question. It's easier for everybody to keep track of it and this thread is already 7 pages long... ? To your question: I don't know. I've also seen that screenshot and thought it would be great to have, but I don't know if or how that would work. If you find it out I'm happy to add it to the module ?

No, conditional hooks are great. I just tried to show that this: Pages(template=foo)::saved is wrong and this is the correct version: Pages::saved(template=foo) See https://processwire.com/talk/topic/18037-2-date-fields-how-to-ensure-the-second-date-is-higher/#comment-158164 and

Here's a good short comparison SSE vs polling: https://blog.axway.com/learning-center/apis/api-streaming/server-sent-events In short: use SSE!

Damn, I thought about gradient backgrounds the other day but totally forgot that today ? I've implemented the color blocks with SVG so I can't simply support gradients at the moment, but using DIV instead it will work: I'll refactor and add that tomorrow the other day! Then we have another distinction to other colorpickers ? ?

Nothing: https://github.com/processwire/processwire/commit/188d0e150ddbcac366a662e274997c77a50af66d

Happy New Year! This week we've got ProcessWire 3.0.209 released on the dev branch. Consider this version a release candidate (RC1) for the master/main branch. Relative to 3.0.208, this version contains primarily issue resolutions and minor improvements (commit log). If you have a chance to test it, please let us know if you run into any major issues by reporting them here. So long as no new major issues surface, by this time next week my hope is that we'll have the dev branch merged to the master/main branch for version 3.0.210. This week one of my clients pointed me to https://chat.openai.com/ which is really quite interesting. It's an artificial intelligence that you can chat with, and it knows quite a lot about ProcessWire and how to code in ProcessWire. Though it knows a lot about a lot of different APIs, and actually a lot about everything, not just development related stuff. But I mention it here because of how it appears it's been trained fairly well in ProcessWire. When I asked it for examples of what CMSs it knows how to code for it told me WordPress, Joomla, Drupal and ProcessWire. I'd encourage you to get an OpenAI account to try it out, it can blow your mind. Ask it questions like how to develop a ProcessWire module, how to build a search engine in ProcessWire, how to use pagination in ProcessWire, or anything you can think of. It seems to have an answer for everything. The client that told me about it is currently using it to write AWS scripts for him, and he said it's saving him a lot of development time. What I also find interesting is not just how it seems to have an answer for everything, and that it knows how to code, but also that it makes mistakes pretty regularly, and recognizes those mistakes when you point them out... and apparently learns from them. That's basically how we work. For example, I asked it how to resize an image in ProcessWire and it explained through text and code examples how to use the size() method on image fields. But it also told me that I could use the $options argument to specify the type of resize interpolation (bicubic, linear, nearest, etc.) and ProcessWire has no such option. When I told it that, it apologized and corrected its code example, and also explained more details about the size() method's $options argument. There was another instance where it made a mistake (trying to do a PHP math operation within a string) and I explained that PHP doesn't support that. It essentially said "I know that, but my example doesn't do that". Then I asked it to double check its example because it didn't look right to me, and then it replied (paraphrased) "Oops, sorry, you are right, here's a corrected version." Anyway, it's just kind of funny to me that I'm talking to a computer with these kinds of interactions, and how it seems to "think" and learn a lot like we do. It will be interesting to see where this technology leads. Currently it is a free research preview, where I suppose we are helping to test the AI and help it learn, but it's very interesting and engaging just to talk with it. Also worth noting is that it does not have internet access (other than to chat with people). So it can't go and hunt down information from websites, actually making it that much more impressive in my mind.

And, for me, this is totally insane: open playground (need to be logged) and copy/paste the following (or "make your own wish"). This is the mind blowing response that appeared to me (except for a little error in the "files" selector): // find all pages with "foo" template, only with parent "FOO" and "bar" greater than January the first, 2021 and having a .jpg or .pdf File $pages = $pages->find("template=foo, parent=FOO, bar>='2021-01-01', files.ext=jpg|pdf"); // echo a bootstrap responsive table with id linked to admin edit echo '<table class="table table-responsive table-striped">'; echo '<thead>'; echo ' <tr>'; echo ' <th>ID</th>'; echo ' <th>Title</th>'; echo ' <th>Bar</th>'; echo ' <th>Files</th>'; echo ' </tr>'; echo '</thead>'; echo '<tbody>'; // for each page foreach($pages as $page) { echo '<tr>'; // if editable, echo link to admin edit if($page->editable()) { echo '<td><a href="'.$page->editUrl().'">'.$page->id.'</a></td>'; } else { echo '<td>'.$page->id.'</td>'; } echo '<td>'.$page->title.'</td>'; echo '<td>'.$page->bar.'</td>'; echo '<td>'; // for each file foreach($page->files as $file) { echo '<a href="'.$file->url.'">'.$file->name.'</a><br>'; } echo '</td>'; echo '</tr>'; } echo '</tbody>'; echo '</table>'; speachless... N.B. Performed in a second moment, the code is added with: $files = $page->files; foreach($files as $file) { if($file->ext == "jpg" || $file->ext == "pdf") { echo '<a href="' . $file->url . '">' . $file->name . '</a>'; }

I have been using Github Copilot for a month now and I love it. It is actually very close to pair coding. Colleague who point out your mistakes, remembers function names better than you do, does actually know regexp and also makes silly suggestions and mistakes. With Chatgpt I noticed great use case with a list of numbers I had. They were copy pasted from somewhere and formatting those, reading into code/excel and doing some needed calculations (like avg, median and range) would have taken 5-15 mins of my time. Now it was super fast and easy. AI didn't care about extra spaces and quotes, it did just understand the numbers and knew the math. I just delegated the task and got response back. It did made one silly and strange mistake (427,00 => 4270,00), but after pointing that out everything was correct.

Here's one of my latest projects: https://petibol.pt/ Petibol develops and produces of all types of EPP (Expanded Polypropylene) and EPS components and packaging for various industries. This website is a collaboration between Supertiny and GOdesign. Super simple approach: The frontend is just SCSS and vanilla js "components" (no libraries), and pages are built with a blocks system based on a repeater field. Having tried a bunch of stuff between building this site almost a year ago and publishing it (Tailwind, AlpineJS, VUE...) it's pleasing to return to this site's code and compare the approach. Here I've basically set up Laravel Mix to compile SCSS, join and minify a bunch of <1kb js files. A BEM style approach to the styles so that I have a bunch of preset variables for typography, spacing and whatnot, and the JS files follow the same logic of identifying components like the hamburger or the parallax effect by looking for specific data-attributes and going from there. Super clean, performant, and couldn't be easier to pick up and maintain.

@teppo This thing is apparently kind of an alpha or beta test, but it seems full of potential and kind of cool to imagine where it's headed when the issues are worked out. At the moment, it's odd and kind of funny with the mistakes that it makes. It seemingly just makes stuff up when it doesn't know the answer to something. It's like it has some kind of creative element to it or something, which made the behavior fascinating. It's completely different from any kind of computer interaction I've had before. I love the fact that it seems to know how to code ProcessWire stuff even if it's prone to mistakes. I've not experimented with AI, machine learning, neural networks, etc., but it makes me want to learn more about it.

So, I'm currently having a conversation with ChatGPT about a new module ? Feels weird to be honest: it's quick to answer, especially at first seemed absolutely certain that every answer was the correct one, and kept making obvious mistakes. But that being said: I could've taken the initial code, made a few changes here and there, and it would've been a functional module. Now, after some iterations, it's looking almost perfect. One problem I'm having is that the bot keeps stopping halfway through the answer. When I tried to confront if it about that, this is how it responded: Not sure we're quite on the same page here ? Anyway, it looks like I might be able to take the code provided by the bot, polish it a bit, and put it in use. Sure it required us a dozen tries or so to get here, I had to patiently keep pointing out mistakes and suggest actual hookable methods instead of the non-existing ones that it pulled out of thin air, but that is very impressive nevertheless. I can definitely see how this would be useful for something a little simpler ?

It's essential to my PW work as well so would definitely love to see it maintained, or at least some of its key features incorporated into the PW core which is probably the better approach. Maybe we should start a list of the features we all need and put together PRs for Ryan to get them into the core?

@Joss The utf8mb3 listed on your field_article_text table is the same thing as utf8 I think (utf8 is 3 bytes), so that won't support emojis. Check in your /site/config.php file and look for $config->dbCharset and change it to this: $config->dbCharset = 'utf8mb4'; Then try creating a new Textarea field that uses TinyMCE. It should now use that utf8mb4 charset, and emojis should work. If you want to convert your existing field_article_text field, you'll want to export the table and all its data (with phpmyadmin), then edit the resulting SQL file/dump, change the "CHARSET=utf8mb3" to "CHARSET=utf8mb4". Then import to replace the old table. If you get an error, change the KEY length "250" for that data_exact key in the CREATE TABLE statement to "191".

FCKEditor actually is what CKEditor was originally called. I think it was a good marketing decision to change the name to CKEditor. ? It will be interesting to see what editor IP.Board switches to, whether CKEditor 5, TinyMCE 6, some other editor, or if they just keep using CKEditor 4. Currently, this version of IP.Board uses the same exact CKEditor version as ProcessWire (4.19.0).

This is a double full circle for me. I started using TinyMCE, then migrated my custom stuff to FCKEditor (when that's what it was called). Then when I came to PW Tiny was still the default, then it moved to CKEditor and now we're going back to Tiny :)

@cb2004 Well my preference would have been that CKEditor continue developing and improving CKEditor 4, but now that I've worked with TinyMCE 6 for 3 weeks it's been a pleasant surprise and even more of an upgrade than I think CKEditor 5 would have been. TinyMCE comes with a media plugin and toolbar. Though I've not used it and am guessing you'd have to turn off the Purifier option in order to use it (since it would insert iframes or scripts). I don't think iframes and scripts belong in richtext since it would be very difficult to discern malicious scripts from legit scripts. So I'd rather just disallow them completely (which is one thing Purifier does). Basically, embedding social media or media players directly in markup from a richtext editor opens a lot of security concerns. On the other hand, using modules like TextformatterVideoEmbed, HannaCode, or others that let you embed service specific stuff — this is a good way to do it. It's relatively simple to convert the embed scripts/codes from nearly any social media service into a HannaCode, and even simpler if there's a dedicated module for the service you are wanting to use. So for your client, I would ask them which social media posts they are looking to embed, find out the company's recommend way of doing that, and convert it to a HannaCode, dedicated Textformatter module (one of the simplest kind of moodules to make), or even just ready.php hook after FieldtypeTextarea::formatValue. I think you'll find that configuring individual TinyMCE fields is very simple and there's not really much, if anything at all, to converting a field using CKEditor to one using TinyMCE. I thought that I could also have TinyMCE recognize some of the CKEditor settings and convert them automatically (like toolbar, available headlines, and plugins). On the other hand, I think it's better to configure TinyMCE yourself as there's a lot of useful stuff that wasn't there with CKEditor. But if you just want to convert a defaults configured CKEditor field to a defaults configured TinyMCE field, there's basically nothing to it other than selecting "TinyMCE" rather than "CKEditor" for the "Inputfield type" (Textarea field settings dropdown on the Details tab). One of the nice things about changing a CKEditor 4 field to TinyMCE is that saving a page with an existing value doesn't usually result in any changes to the markup value. CKEditor 4 and TinyMCE 6 seem to markup things exactly the same, just plain simple HTML. Also I should mention that CKEditor 4 isn't going to stop working at any point either. I've been thinking that both TinyMCE and CKEditor will live in the core until CKEditor 4 is completely EOL, and at that point it'll move to a 1st party module. So there won't ever be a case where you will be required to convert all of your CKEditor to TinyMCE fields, unless you want to. In my case, I'll probably keep some installations using CKEditor 4 until it needs some other kind of major development or redo. ProFields Combo, Table and Textareas will all support both CKEditor 4 and TinyMCE 6. I don't see any reason to ever drop CKEditor 4 support in ProFields. So long as the module is installed, it'll be selectable as an option. I'll be adding TinyMCE support to these modules soon as well. @Ivan Gretsky Thanks for testing it out! The intention is that everything works just as before, so there isn't any learning curve. HTML Purifier is enabled by default unless you turn it off (in "Features"). This is what cleans the markup server-side. Since you mention pink H1s, I'm wondering if you instead mean CKEditor's ACF (advanced content filter)? TinyMCE has something similar (content filtering) that can be configured with various settings like valid_elements, valid_children, valid_styles, invalid_styles, and many others. InputfieldTinyMCE uses the defaults for most of these, but the one that I've focused on as a configurable setting with the module is invalid_styles which is exactly how you could prevent pink H1s, by just typing the word "color" and "background" and "background-color" into your "Invalid styles" setting. It's also a good idea to instruct clients on how to "paste as plain text", or add the plain text paste option to your toolbar (I think it's already in the menubar). If you want even more control over how content is pasted without any instruction to the client, TinyMCE has pretty much thought of everything here, see Copy/paste options. As far as I know, we didn't have this level of control with CKEditor. There's not much to add here as there's little or nothing to it unless you've spent a lot of time really tweaking CKEditor settings and custom plugins, etc. And for those cases I would probably just keep using CKEditor 4. But I do plan to have TinyMCE recognize CKEditor settings for toolbar, plugins and block formats, and automatically convert them where there are equivalents. Though I worry a little that by doing that, some might skip over doing any of their own configuration, and thus miss a lot of new options. I'm going to detail how to build simple plugins in a related blog post. I was thinking of a simple HannaCode insert plugin as a good example. Not as powerful as HannaCodeDialog, but rather just a simple example to get module authors started. The module also comes with a really simple plugin example named hello that just alerts "Hello" every time you click a button on the toolbar or menubar, but this obviously isn't useful for anything other than being a starting point.

That's great. Can't wait to find a bit of spare time to take it on a test drive. Cool that the module is already on TinyMCE 6.2, as that release comes with a more flexible autocomplete api. This is going to shave a lot of (or almost all of the) JS code from my autocomplete module.

Regarding multi-language fields such as TextLanguage, TextareaLanguage, and PageTitleLanguage: When multi-language fields are shown in Page Edit mode, I often use them next to non-multi-language fields. That makes the page appear a bit disorganized and cluttered because multi-language fields vs non-multi-language fields don't align horizontally. The reason is that multi-language field have "language switcher tabs" that forces the field to "jump down" whereas normal fields stay in the normal position. See screenshot 1. It makes me sea sick! ? Suggested solution is to move the "language switcher tabs" up so that it aligns with the field label. See screenshot 2.

Many thanks for this, @Mats var request = new Request(url, { headers: new Headers({ 'X-Requested-With': 'XMLHttpRequest' }) }); fetch(request) .then(response => response.text()) .then(data => { console.log(data); });

Works too (with WireArray/PageArray) the trick is to add the two arrays together, PW will remove dublicates. So you can compare count after "merging", if result is different they're not identical. $orig = clone($a1); if($a1->add($a2)->count == $orig->count) $is = "identical"; Edit: hmm, too soon. small correction, needs a clone to keep original array in memory