Jump to content


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by 3fingers

  1. Hello all! A client asked us to implement a landing page where some content would have to swap in real time when needed. Basically I need to implement a way to select in the backend (via a select dropdown or whatever) which page I want to use as the "replacer", save and then immediately use its html content to swap the old content, in real-time, on the front-end. I've read about htmx and its sse implementation, and also took a look at this simple example on how to dispach an event via php every second. The front-end part looks way easier to implement, but the backend one it's over my knowledge at the time of this writing. I know @netcarver did some test and also @kongondo is playing with those technology a bit lately. This is the first time I came to such a request and I'm looking for some advice from you guys! :)
  2. Now we are talking πŸ™‚ That's what I meant in my previous post, using pw-panels to have some more options capabilities per single, matrix block, field. In your example video (where the panel is used), is there any reason beyond your preference to not have a repeater field in your main editing page? IMHO the real potential benefit would be delegating custom, reusable options (something like a combo field) for each single repeater matrix entry (if needed). Doing so we could de-clutter the interface and gain more clarity for both us and the user.
  3. I really like the idea behind the third approach where every block has its sets of options to work with. I don't really like the way to access them, via a modal interface, even tought I think you've used it since it's the current best way pw gives us to stay in the state of the page edit. One better approach would be to have somewhere a tab (or tabs) for each and every component inside the block (in this case image and text, as for your example) where the options might have their place to live, something similar to what we already have for the rest of the pages. Or maybe, and even better, use the pw native sliding panels to edit the content of each block. Great job by the way!
  4. That can be easily done changing colour variables inside tailwind.config.js as suggested on my previous post. In addition to that it might be useful, for theming purpose, to create a single preset for every theme you want to have, and switch between them per project-basis. More here https://tailwindcss.com/docs/presets Not something possible out of the box as far as I am aware of. Utility variables are top level and not tied directly to custom sections.
  5. I tried to understand your question but I'm missing something for sure. Can you elaborate a bit deeper please? πŸ™‚ As a quick guess, is this page something you were looking for?
  6. I've found myself that the most useful classes are the ones dedicated to wireframe the layout itself, like margins and paddings. Using them in early stages of the blocking phase seem to be the most effective way for me. So I tend to do the opposite of what you are suggesting: utility classes first and layout tweaking with custom rules later (if needed). There is plenty of utility classes I never had to use, and that's ok. This is also true for vanilla css declarations as well, it all depends on the specific project. To me it's not about how many utility classes I would use, but how many of them I can reuse inside a single project, avoding inconsistencies all over the place. Having the ability to tweak them in one single configuration file is a bonus. Of course this is also true if you are smart enough to go with "pure" css custom variables inside the :root selector of your css. This is certainly an option, if you have found something inside Bootstrap, Bulma or whatever is missing from Tailwind. I don't see the point anyway, because with the new jit mode from Tailwind you will have just the utility classes baked inside your "dist" css, without any bloating useless css.
  7. Nothing wrong with vanilla css at all indeed πŸ™‚ For me tailwind is just a tool that makes me quicker to write my css declarations and development in general. Take the above example: .btn { @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black; } In plain css it would be: .btn { padding: var(--margin-tb) var(--margin-lr); border-radius: var(--medium-radius); font-weight: 600; // and this might be a custom property too if needed background: var(--bg-lighter-gray); color: var(--text-black); } It's more verbose I think. I've intentionally wrote css variables to slightly emulate what tailwind does: helping you to create and use a design system, with consistent values at disposal throughout the entire application. Not to mention purgecss, which is included out of the box, and for me it's a no brainer. It drastically reduce the size of the css to be used in production. That being said I always find myself in the situation where I have to write my custom css classes, where defaults values I set before are enough no more and need more control. There is this new option where you can set arbitrary values directly on the html markup (https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) but I'm not really sold and I still prefer to organize them by myself. Having another tool in the box might be convenient from time to time.
  8. It doesn't work because your condition must be inside the foreach loop below, why you need it to be outside of the loop?
  9. I've read the stencil documentation but I'm not sure how much advantages I could have in learning it and how to integrate it efficiently with Processwire. Have you got some pointers for guides/video courses on this topic? Any reccomendations on how mix processwire with stencil (routes and api generation in particular) ? πŸ™‚ Nice animation and flow on the site by the way, good job!
  10. What about this? (not tested) $pages->addHookAfter('saveReady', function($event) { $p = $event->arguments('page'); if($p->template != 'artist') return; if($p->artist_last_name) return; $ln = explode(' ', $p->title); $lastname = array_pop($ln); $p->set('artist_last_name',$lastname); })
  11. Try to change the trigger from "saveReady to "save"? // Before public function ready() { $this->pages->addHook('saveReady', $this, 'afterSaveReady'); } // After public function ready() { $this->pages->addHookAfter('save', $this, 'afterSaveReady'); }
  12. I've used Mailjet (from the same company of Mailgun) and it worked fine for me. 6.000 emails per month for free are more than enough for testing purpose I think πŸ˜›
  13. Create a new php file inside template folder (or a subdirectory of it, ex. "inc") and paste your html portion you want to include in all the other templates, save it. Then, in all the templates, where you want that portion to appear just: <?php include('path/to/partial.php'); ?> // replace the path with yours.
  14. $featured = $all->find("limit=4, check_featured!={$page->check_featured}"); // Just 4 results here $items = $all->find("limit=6"); // Cannot be 6 here Spot the mistake?
  15. Are you sure you're using the correct syntax? // eg: <img src="<?= $urls->templates ?>img/your_image.jpg"> // $urls is a shorthand for $config->urls
  16. @ryan and @bernhard, you rock! Could you please provide some screenshots of the Reno and Rock themes? Thanks!
  17. Ciao Francesco, bel lavoro! Hi Francesco, good work! I notices a bit of delay on the homepage because the hidden map has to load a lot of tiles/images, I would try to load the map on demand/click to improve the perceived speed of the site πŸ™‚
  18. Hi @Robin S I have a scenario where a series of pages are protected by LoginRegisterPro, so user can access them upon registration. I'd like to grant access to those pages to some users coming from another website via a query string. It is possibile with your module? Is there a hook where I can redirect to login form if a user could not access the page/s? Thanks! πŸ™‚
  19. Hi, you can use PurgeCss for this, you'll need to install postcss and follow some steps in order to make it function. Take a look at this post, you can have an idea on how purgecss works, even if you are not interested in using tailwindcss. I don't think there is something similar for javascript, rather than minification. You'll need to understand which elements rely on which js and then remove the useless parts by hand.
  20. Hi had the same problem on my localhost but then I manage to solve it installing an ssl certificate to have https by default, otherwise I got 403 to every endpoint.
  21. Nice site! That's what I call a mobile first approach! 🀣 On my 27" monitor that hamburger icon is HUGE! I'd expected the same size also for the close button as well πŸ™‚
  22. In the gist the naming of the main css file is different (kickstart.pcss rather than main.css, the .pcss extension is optional) because at the time of the recording I had already made my previous guide, in which I've used that naming convention, so I prefer not to change it. Feel free to name your files however you want, just remember to reflect those changes inside the "scripts" object inside package.json.
  23. I've just recoded a brief video where I've tried to explain how to install tailwind inside Processwire ( really badly spoken πŸ˜† , so be kind...) Moreover I've updated the gist here to reflect the changes I've made since the last time I've written the guide above. There you have it:
  24. @fruid I agree with you that at first it looks complicated, mainly because it need a compilation step which has to be handled in some way. Nowadays is quite common to rely on tools like webpack, rollup, parcel, vite, etc.. to handle some activities like compilation, minification, bundling, etc. Postcss is mainly just one of them, but specifically intended to work with with css. Once you grasp the few key steps to install it and how to purge your css efficiently I guarantee you will see the benefits at your disposal (mainly speed of layout blocking and very low css file sizes). If someone it's interested I can make a video where I can explain all the install steps in further details.
  25. Thanks @MoritzLost now I got it, you've clarified my doubts. So many things to learn πŸ™‚ I'll bookmark this thread for reference in the future πŸ™‚
  • Create New...