Jump to content

Jonathan Lahijani

Members
  • Posts

    629
  • Joined

  • Last visited

  • Days Won

    23

Posts posted by Jonathan Lahijani

  1. 26 minutes ago, szabesz said:

    Bad news for all of us: 

    https://github.com/tinymce/tinymce/discussions/9496

    "....we have decided to release TinyMCE 7 under the GNU General Public License Version 2 or later, abbreviated as GPLv2+..."

    To see why this is pretty bad news, read: https://github.com/BookStackApp/BookStack/issues/4908

    BTW, I am a happy admin user of BookStack which is highly recommended!

    Now BookStack and ProcessWire share the pain of TinyMCE moving away from MIT 😞

    If I'm understanding this correctly, this would mean all of ProcessWire would have to be open-source, meaning the commercial modules, correct?  Related.

  2. Thanks for releasing this Ryan.

    Although I've been using ProcessWire daily for over a decade at this point, it's nice to compare my version of "The ProcessWire Way" with that of the creator himself and learn any tips and tricks along the way.  This is probably going to be very helpful for beginners.

    When I was researching Tailwind a while ago, the creator (Adam Wathan) spoke about how he made many demo videos of himself replicating websites with his CSS framework so developers could get an idea of how the creator of the tool himself would approach using it.  I feel like these site profiles provide a similar and more realistic learning experience in addition to ProcessWire's great documentation.

    • Like 9
  3. With Geffen Playhouse for example, which was launched in 2019 right before custom fields for files/images was introduced, we needed custom fields for images.  At the time, the best approach was to use the RepeaterImages module, which uses repeaters and all the functionality that comes with it.  This includes the ability enable/disable a repeater item.

    In a recent update, I wanted to remove that dependency and switch to just a normal images field with custom fields, but the client still wanted enable/disable capability on images, hence my approach to it described in this post.

    I think about it just like repeaters.  There are times when you want a piece of data to exist but not be visible.  Without being able to disable an image, you would have to delete it (or do some other weird hack like perhaps add an image tag), which is less than ideal.  With enable/disable capability, it brings it more in line with how multi-item fields, like repeaters, work.

    • Like 3
  4. Lets say you have an multi-image field named 'images' and you want to be able to mark one or more images as disabled as well as make it visually appear as disabled in the admin.  Currently, ProcessWire does not support this natively (requested here), however we can still easily achieve this with using custom fields for files/images, introduced in PW 3.0.142, as well as a hook to achieve the visual effect.

    Follow these steps (modify as needed):

    • create a checkbox field called 'disabled'
    • create a template called 'field-images' which will ProcessWire will detect as a custom template for the 'images' field
    • add the 'disabled' field to that template
    • add the following code to /site/templates/admin.php
    $wire->addHookAfter('InputfieldImage::renderItem', function(HookEvent $event) {
      if($event->object->name!='images') return;
      if(!$event->arguments('pagefile')->disabled) return;
      $event->return = "<div style='opacity:.2'>{$event->return}</div>";
    });

    Of course, if you don't want to display disabled images on your frontend, make sure to update your selector on your 'images' field, like so:

    // before (will still select disabled images)
    foreach($page->images as $image) { ... }
    
    // after (will ignore disabled images)
    foreach($page->images->find("disabled=0") as $image) { ... }
    • Like 4
  5. Hey there fellow Angeleno,

    Let's assume you have a bunch of 'video' pages with a 'file' field where the single video gets uploaded and another field called 'file_transcoded' that contains the transcoded/sized-down version.

    You could create an external script that bootstraps into ProcessWire, loops through each page where 'file_transcoded' doesn't exist (meaning it hasn't been acted upon yet), run ffmpeg on it, take the transcoded file and add it to file_transcoded ($page->file_transcoded->add($transcoded_file)), save and repeat for all the other non transcoded pages.  That external script could be run using a cronjob.  I believe you can do a background process or queue however I don't have experience with that in the context of ProcessWire yet although it's been discussed.

    The approach I mentioned keeps all the files in the natural /site/assets/files/(page-id)/ directory.  I think the main point here is that where the original video files precisely exist is irrelevant as long as you use the $pages API which will take care of that for you.

    • Like 5
  6. Because I don't write JS often, hold my nose when I do, and since it's usually for little tweaks or UI adjustments, my knowledge of the syntax and weirdness of the language overall doesn't seem to stick (how do I add a class to a div again in vanilla JS?).  Google is not so great because oftentimes the information is outdated on Stack Overflow results and requires a lot of sifting. However ChatGPT is phenomenal with JavaScript (and jQuery) if you want develop AND learn at the same time.  Seriously a game changer for me.

    Unfortunately it's not so great for AutoHotkey, or at least it seems to keep giving me v1 code as opposed to v2 despite telling it to give me v2, but that's OK because it still provides some guidance which I supplement with AHKs documentation.

    • Like 1
  7. On 1/19/2024 at 4:17 PM, MarkE said:

    .. or even taking advantage of newer html5 developments. For example, <details><summary>. I guess the fundamental issue is that this is always a moving target, so it makes sense to not try and track the latest fashion, but to move when it is clear that the way forward is established and generally accepted.

    Indeed.  Pico CSS, which is a minimal CSS framework, takes that approach:
    https://v2.picocss.com/docs
    https://v2.picocss.com/docs/accordion

    I wish they supported tabs however.

  8. 20 minutes ago, bernhard said:

    That sounds like a huge task 🙂 

    Actually I just did a find for 'uk-' and replaced it with '', then replaced 'Uikit' with 'Bootstrap' and I was done!

    Just kidding, it's a little more involved but I got very far and it's usable now.  I still need to clean up a few things.  Here's a screenshot (I need to style buttons among other things):

    image.thumb.png.559f9b6ade185d0bd7f05af6e5bdb7c0.png

    To be more clear, while I won't use it immediately, another reason why I personally am making a Bootstrap based admin theme is because it could theoretically take advantage of the many Bootstrap-based admin themes and components (examples), or at least some of the screens and layouts they provide.  That would be very convenient as I do see myself making more web-app type sites where it's purely using PW's backend.

    @bernhardYou're right, it's not deprecated, but in maintenance only mode.  I don't know the inner-workings of jQuery UI but I would assume even though it's functional, browser capabilities are now much more robust and perhaps much of its capabilities are not using JavaScript's newer, native features?  Don't quote me on that, but it feels very old.  I see that CraftCMS uses jQuery UI as well.

    • Like 1
  9. For fun, I've been working on what you would call AdminThemeBootstrap to get a deeper understanding of ProcessWire's admin framework (maybe I'll release it one day but it's more of a pet project).  As you may know, the current admin system has a deep dependency on jQuery and jQuery UI (which is now deprecated).  Things like the navbar dropdowns, tabs and accordions are jQuery UI based components, not (for example) UIkit's dropdown or Bootstrap's dropdown.

    This has gotten me thinking about if there was (not that it's necessary) a comprehensive re-thinking of the admin, what libraries in today's world would be the ideal fit for a project like ProcessWire?

    • Like 9
  10. 9 hours ago, bernhard said:

    Thx @Jonathan Lahijani that looks indeed interesting. It's the first library that I see that made me feel it could be a good replacement for UIkit. All the others felt like a step back imho, even though the utility classes are great for sure and make it super fast and fun to develop.

    I see two problems though:

    • npm install ........ They also offer a CDN Version. Do you have any experience with it? Is that a viable option or is that tremendously huge? I guess they need to add all the css to those files which is obviously less performant than compiling only necessary classes. The thing is with a CMS or a PageBuilder you often don't know what you need upfront, so I really like to include UIkit once and forget it.
    • No Building Tools for Others: You can't use the download files to create End Products meant for End Users to build their own projects using the download files or derived content. --> That's a pity. It would have been great to rebuild some components for RockPageBuilder...

    What are the reasons why you prefer it over UIkit?

    For Flowbite's Javascript file, I just load that file manually.

    For CSS, I didn't realize they have a ready-to-go CSS file as well, but that seems kind of pointless since Tailwind (similar to UIkit and Bootstrap) would require a build process for it to be customizable.  I simply use Tailwind CLI directly (without NPM).  But as you mentioned, given the nature of how Tailwind works whereby it will only include classes if they are used, it makes using it for a page builder more complicated unless you safelist a bunch of classes.

    As far as not being able to use Flowbite for end products, yea that's a downside.  But I don't think there's a problem configuring a page builder / RPB with blocks for a specific client and not general use.

    I'm preferring it over UIkit these days because doing CSS using pure utility classes has won me over as opposed to a mix of utility classes/separation of concerns (UIkit, Bootstrap) vs. pure separation of concerns.  For example, I like that I can copy a block from Flowbite without any thought of it not working or having other styles in the cascade affect it, but at the same time having full flexibility to change it easily.  Tailwind also just makes more sense for designs where you have to "color outside the lines" of a CSS framework like UIkit.

    It's horrific to look at all those classes when using it initially, but then you get used to it.

    • Like 1
  11. 14 hours ago, bernhard said:

    Tailwind? I agree 😄 

    If you dabble in Tailwind some more, I strongly recommend using Flowbite, which is still pure Tailwind but with an added JS library that makes it more batteries included like UIkit and Bootstrap.  Also there are free and premium blocks and layouts which I've purchased that speeds things up considerably while maintaining the flexibility of Tailwind.  To me, it's the winner of the all the various Tailwind competing user interface kits (ie compared to Preline, Tailwind UI, Daisy UI, etc.).

    • Like 1
  12. Hi @ryan,

    Thanks for this update.

    One easy to overlook but important missing part of the repeater update that was made is what happens if you edit a repeater item directly.  Assume we have a repeater field named 'books' and you edit the repeater item page by going to /admin/repeaters/books/(for-page)/repeater-item-page

    When editing it directly, the page to be edited simply gets the RepeaterPage class instead of BooksRepeaterPage class.

    I managed to hack-fix this by doing this in /wire/core/Templates.php:

    		// determine if custom class available (3.0.152+)
    		if($usePageClasses) {
    			// generate a CamelCase name + 'Page' from template name, i.e. 'blog-post' => 'BlogPostPage'
    			$className = ucwords(str_replace(array('-', '_', '.'), ' ', $template->name));
    			
    			// *** *** hack fix: if we are editing a page with a template that starts with 'repeater_', assign the correct page class! *** ***
    			if(str_starts_with($template->name, 'repeater_')) {
    				$className = __NAMESPACE__ . "\\" . str_replace(' ', '', $className) . 'RepeaterPage';
    				$className = str_replace('ProcessWire\Repeater', 'ProcessWire\\', $className);
    			} else {
    				$className = __NAMESPACE__ . "\\" . str_replace(' ', '', $className) . 'Page';
    			}
    			if(class_exists($className) && wireInstanceOf($className, $corePageClass)) {
    				$pageClass = $className;
    			}
    		}

    Can what I described be supported as well?

    • Like 5
  13. After over 10 years, I didn't know you can simply give a page's name when assigning a value to a page field.  I discovered this by accident.

    I used to do this:

    $page->setAndSave('order_status', $pages->get('/path/to/order-statuses/pending/'));

    But I realized you can simply do this in ProcessWire making it much easier on the eyes, with the added benefit of not having to update the code if the path to the page changes:

    $page->setAndSave('order_status', 'pending');

    My mind is blown.  It makes me wonder what other little things I haven't realized yet.

    • Like 3
  14. I'm trying to add a markup field to a repeater item.  I would think to use ProcessPageEdit::buildFormContent however that only executes when a page being edited is loaded, not when a repeater item is expanded.

    What is the correct hook that would allow me to use the form API and insert a markup field somewhere in the repeater item?

  15. I've been using Apache forever... never even touched nginx.  Today I felt like giving Caddy a try and it feels nice.

    I developed what I believe is a much more improved Caddyfile that also supports ProCache and stronger blocking of files (returns a 403 like PW's htaccess file, instead of a 404 which is what /denyaccess seems to do).  I added a way to also put the site in maintenance mode (meaning all requests get rewritten to /maintenance.php) if /maintenance.php exists (which is now part of my deployment process).

    Hopefully I can share the results in a week.

    • Like 5
  16. I love ChatGPT when it comes to doing weird things in JavaScript.  For example, there's a 3rd party service a client of mine is using that allows you to load in custom JS and CSS to customize the appearance of their platform more to your liking.  The HTML of the 3rd party service is lacking in some CSS classes on some elements, so I can't hook into those elements to style them more precisely.  To further complicate things, those elements only appear after an AJAX request is done.

    So I needed to add extra classes on particular elements in the HTML every time an AJAX request was made.  I don't keep up with JS, but after giving it a nice prompt, BOOM, there's the answer with MutationObserver, XMLHttpRequest and addEventListener.  This literally saved me a day, if not more, and tons of headache.

    • Like 6
×
×
  • Create New...