kongondo

@flydev ??, Sorry to tag you like this. I am not sure if you are following the discussion here regarding content blocks? Just wondering how far you are from releasing your Editor.js-based Fieldtype? Given that you've probably spent months developing the module, I'd be interested to hear what your thoughts are.

Thanks for the defs @Jonathan Lahijani I'll see if I can set myself a challenge to build a basic clone of this this weekend ?.

Same here with Hotwire. I watched 4 different videos and I still couldn't get it. Site / Content / Page / Theme Builder Are these four really synonymous? I am not an expert, not at all. However, we seem to be using these terms interchangeably, meaning perhaps we are not on the same page? Could someone please explain the differences? @Jonathan Lahijani?

No. That date has not yet been set :-).

I see your point. However, it doesn't need to be an SPA. Webpack is a pain to configure, although there are various approachable alternatives out there.

This is very much doable using Vue JS. It is a progressive framework. You can use it with your existing HTML ,sprinkling in as much or as little of Vue reactiveness as you need.

Btw, @Jonathan Lahijani, making content editable versus non-editable as per your comment in the video is 'quite easy' to do with reactive frameworks. You can even make this configurable if you wanted.

Sure, but to some extent, we have been locking ourselves to the future of some technologies for decades - PHP, MySQL, jQuery. This is not necessarily a bad thing. It depends on the maturity of the technology, I suppose. Sometimes it depends on the needs of the users of the tool you are providing, for instance, Bootstrap 5 removed dependency on jQuery having been 'locked' in for at least a decade, I reckon. GitHub did the same. Sorry, my examples are all jQuery-related - it is just a coincidence ?.

Ha! Great minds! ??. I just beat you to it ?.

Thanks for the very insightful video @Jonathan Lahijani Flexible Content / Page Builders When it comes to this, if you look at what's out there, in many cases, you'll invariably end up in either of two places with respect to the technology behind the builders; Vue JS or React. A few examples: Statamic - Vue JS Gutenburg - React YOOtheme Pro's Builder - Vue JS Storyblok - Vue JS There is ?. It is called Vue JS (I prefer it over React). OK, there is no ready made tool solution but from my experience developing Padloper 2, I can say it is quite doable. If we are to build any sort of page/site builder, I'd highly suggest to look at either Vue or React - especially Vue. It will save you a lot of hassle. The biggest challenge I found with these frameworks if using the CLI versions (recommended) is that the 'app' has to be developed outside ProcessWire as they run on different ports. This means the app has to be 'built' in order to test it inside ProcessWire. This is a tedious process. I have never been able to develop a Vue app inside ProcessWire and still get the benefit of Hot Reloading. If we end up using Vue JS (or even React), then perhaps we need to pay a visit to our old friend jQuery (and its siblings - UI) to plan for their retirement? ?. It wouldn't make sense to have both. Even if we didn't end up with Vue, modern JavaScript has some great APIs that can replace the dependency on jQuery. I know this is a huge undertaking. I know both the modern and the old have their pros and cons. I also know that jQuery is not evil. I know the decision to use it or not can be subjective. I just prefer working with reactive frameworks (and vanilla JS). What do you guys think? @ryan, would modern JavaScript tools fit into this vision?

Happy to help :-). Glad you sorted it out.

Assuming I understood the question...one way to do it: <?php namespace ProcessWire; // init empty string to store markup output $out = ""; $events = $pages->find('template=calendar-post, limit=5, Start_date|End_date>=today, sort=Start_date'); // we found events if($events->count()){ $out .="<h2>My Header for events</h2>"; // my events code! // start list - just an example $out .= "<ul>"; foreach($events as $single) { $out .= "<li>{$single->title}</li>"; } // close the list $out .= "</ul>"; } // use this if you need to show 'no events info' else { $out .= "<div>There are no events at the moment!</div>"; } echo $out; Please note, I haven't checked the validity of your selector.

This will not work with PHP, so no ProcessWire if that was your intention.

And another one: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/ Helped me once when I couldn't trigger events using vanilla js.

Thanks everyone. I have also found some brilliant articles at Hongkiat including this one on moving items in a CSS grid.

Quick follow-up @psy, can I then use margins (top or bottom) as needed to further pull/push the overlapping element as required or that is a 'no no'? Thanks.

Thanks @psy. I saw his other older ones but I missed this one.

Thanks @Sergio!

Here's one for you CSS ladies and gents. I am trying to improve my knowledge (and use!) of CSS Grid and Flex. I have pored over tutorials, both written and visual. However, I have hit a brick wall with something seemingly simple. I would like to overlap two divs as illustrated in the image below. There are two layouts, one slightly different than the other. I would like div two to overlap div one. In the good 'ol days maybe a negative margin and position absolute would have done the trick. I would like to achieve this using CSS Grid and if needed, CSS Flex. I don't care about IE. Thanks for any code, pointers etc.

Correct :-)

I take it you mean vanilla JavaScript? Here's a short list of candidates ?. https://www.youtube.com/playlist?list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX https://www.youtube.com/playlist?list=PLillGF-RfqbZ7s3t6ZInY3NjEOOX7hsBv https://www.youtube.com/watch?v=ZcQyJ-gxke0&list=PL4cUxeGkcC9jx2TTZk3IGWKSbtugYdrlu https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc https://www.youtube.com/watch?v=4l3bTDlT6ZI&list=PL4cUxeGkcC9i5yvDkJgt60vNVWffpblB7 https://www.youtube.com/watch?v=FIORjGvT0kk&list=PL4cUxeGkcC9gfoKa5la9dsdCNpuey2s-V https://www.youtube.com/watch?v=0Mp2kwE8xY0&list=PL4cUxeGkcC9gKfw25slm4CUDUcM_sXdml https://www.youtube.com/watch?v=YxWMxJONp7E&list=PL4cUxeGkcC9jAhrjtZ9U93UMIhnCc44MH https://www.youtube.com/watch?v=0Mp2kwE8xY0&list=PL4cUxeGkcC9gKfw25slm4CUDUcM_sXdml https://www.youtube.com/watch?v=ANDyf6VEYHE&list=PL4cUxeGkcC9gdqHxcUgGhl_cV6xET1_0N https://www.youtube.com/watch?v=qoSksQ4s_hg&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

Well, hello somebody! Look at what I've stumbled upon ?. Tailwind Starter Kit A beautiful extension for TailwindCSS. Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular. Yes and vanilla JS as well! (currently, 16 dynamic components.). License: MIT GitHub: https://github.com/creativetimofficial/tailwind-starter-kit Site + Demos: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/ A tutorial on YouTube. I haven't dug in deep yet (e.g. purge/tree shaking, etc). @Jonathan Lahijani. What do you think? ?

I am saying you can use the shop itself to manage your featured products. Conversely, you also have the flexibility of pulling anything you want from Padloper into your ProcessWire pages (for GUI edit). In such cases though, you will have to develop the Fieldtype/Inputfield yourself. Padloper will provide the API necessary for the pulling of the data. In a nutshell, I meant, you choose what is convenient for your use case :-).

By the way, and I know this was just an example, but in my book, this is something that should be handled from the shop side. Surely, it is a bit much to build a whole custom Fieldtype/Inputfield just to show featured products on the home page ?.

Yes, I did get that but now I realise my example of repeater fields was not clear enough. By complex fields I also meant page fields (page reference fields). @nabo, By complex fields I also meant page reference fields since they don't just output simple values. Either, way there are no such plans. However, a custom FieldType/Inputfield field should be able to accomplish this. All the field would store are the IDs of the product. The Inputfield would display the title of the selected products. In the frontend you can use the Padloper API to get those products using the saved IDs.