Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 08/24/2019 in all areas

  1. Hope you guys are having a great week. I'll keep this week's update short since everything I'm working on is in-progress rather than ready to post. But I can tell you about a few things you'll likely see in next week's post: First is that I've got multi-page/paginated form support just about ready to release in FormBuilder. What this means is that you can take forms (especially long forms) and break them up into multiple paginations. This makes for multi-part forms that are more digestible and easy to use for users. The end of each pagination has "Next" and "Prev" buttons for navigation between them. FormBuilder validates each pagination independently as it is submitted so that any errors are taken care of as the user proceeds rather than all at the end. And these are true paginated forms, rather than a JS manipulation of existing forms. More on this next week. I'm also working here on a new Inputfield module called InputfieldToggle. It's an alternative to the core InputfieldCheckbox and the intention here is to make it a selectable alternative for FieldtypeCheckbox fields. Unlike InputfieldCheckbox, it is presented as two radio buttons for "on" and "off" states. (It's also possible to have a "no selection" state distinct from the "no" state, where supported). It comes predefined with several toggle types (Yes/No, On/Off, True/False, Enabled/Disabled), along with the ability to specify your own (multi-language too of course). Like a checkbox, because it is a toggle, it holds a value of either true (1) or false (0). There is also null for no selection. While this is a relatively simple Inputfield, it answers a common need (at least in my experience) and often can provide a better experience than a standard checkbox, depending on the input need. Not to mention, it's a lot more efficient than using an Options or Page field to accomplish the same thing. In addition to sites and apps running in ProcessWire, I think this particular Inputfield has a lot of potential use in the core and its administrative forms, so I might include it in the core, though not yet certain. I'm already using it quite a bit in forms I'm developing for clients in FormBuilder, where in many cases I find it a better fit than InputfieldCheckbox. Lastly, there are some nice UI enhancements just about ready for manipulating column widths of fields in ProcessWire. It makes it a much simpler and quicker job than it currently is, so I'll have more on that next week too. Have a great weekend!
    8 points
  2. I wouldn't call it a manifesto but anyway... let's talk about my workflow. TL;DR I build 90% from scratch. Every time. Each and every project. I don't use frameworks of any flavour.* * except from some JS stuff - see below Long version My boilerplate for new projects: SCSS Skeleton (my personal collection of SCSS Magic) JS Skeleton (my personal collection of JS Magic) HTML/Kit files depending on templates and elements the project needs (inspired by http://bradfrost.com/blog/post/atomic-web-design/) just an empty folder would work totally fine as well Tools I use and need: git Prepros/CodeKit (or ProCache ?) Tools that may be added later (if absolutely necessary): Lazysizes SVGinline jQuery for Slider scripts (slick, OwlCarousel) MixItUp Tools I never use (because I'm too old for that - I guess) Grunt, Gulp, Bower, Webpack, Parcel, ... you get the idea Benefits Projects are portable Projects run everywhere Every part of project can be changed without affecting other things (most of the time) No need for a special setup (at least for the compiled files) Small(est) file sizes and therefore fast websites (in most cases) Downsides Working with others means I have to trust them and their capability to write good CSS/SCSS You have to think at least twice for each step, every time It takes much more time to build everything from scratch It's much more expensive at first Clients often don't understand the benefits and sometimes WANT a Bootstrap website ? FAQ What if you work with others? As mentioned before I have to trust others that they are capable of writing good CSS/SCSS and therefore I tend to work only with very good people I really trust. Is it worth it? Yes! Why? When stuff breaks or needs to be changed, I know where to look, what to change and can do my stuff without the need to take care of any version upgrades, incompatibilities in or with newer version, I don't need a special setup or whatever. AND... if I want to I can still add whatever is needed. Try it the other way around. That's much harder. Are there exceptions? Of course. Backend stuff, admin interfaces and things like - ProcessWire admin is the perfect example. I wouldn't build something like that from scratch. I guess that's my manifesto.
    4 points
  3. Just to add to this a bit: I've found it a bit problematic if you're, for an example, working with nested structures where the nesting level should affect things. That's one example where, to my best knowledge so far, it's usually easier to rely on custom classes. You can still make use of @apply and similar features behind the scenes to make use of Tailwind's features as much as possible, but the point is that you can't always rely on directly applied Tailwind classes alone – at least not without creating solutions that are either inflexible, or unnecessarily complex ? As a disclaimer I'm currently building my first site with Tailwind. It's been a bit of an emotional rollercoaster: at times I find Tailwind utterly awesome, while the very next moment I can be really frustrated with it as I'm once again struggling to figure out what's the Tailwind version of some CSS rule I already have in mind. (For the record, https://nerdcave.com/tailwind-cheat-sheet has been a big help in this regard.) I've been constantly tweaking my approach, going back and forth with things like components and custom utility classes, trying to figure out how to best combine those with native Tailwind features, when to add a new "spacing" or color (or something similar) to Tailwind's config vs. just applying a one-off custom value instead, etc. That being said, I've already got a list of do's and don'ts for my next Tailwind project, so it should go a lot smoother. For the past year or so I've been deeply invested in a BEM type approach, and in some ways Tailwind is the opposite of that. That shift in mental models has definitely been holding me back a bit. After my next project with Tailwind I hope to have a more informed opinion, but currently if someone asked me if they should use Tailwind for their next project, I'd have to reply with "it's complicated" ?
    3 points
  4. Tailwind is utility-first framework. The key difference between something like Uikit and Tailwind is that latter has none of the typical CSS framework components built-in. For an example, here's an example from the docs for creating a "button component": <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Button </button> Colors and sizes (such as the "2" in "py-2" etc.) are configurable, so you can have as many or as few of them as you want, and the names can pretty much be whatever you want them to be (py-thon). Either way you're always building your UI using really simple (the word "atomic" comes to mind) rules. While Uikit has some similar utility classes (and so does Bootstrap), Tailwind has a massive number of them, even without counting the pseudo states (bg-blue hover:bg-blue-dark), responsive classes (p-6 md:p-8 lg:p-10), etc. You can still create your own "custom" components, so that when you add some class – such as "btn" – to an element, you actually get the same thing you would with the rules in the example above. Typically this is done by defining the class in SCSS: .btn { @apply font-bold py-2 px-4 rounded bg-blue-500 text-white; } .btn:hover { @apply bg-blue-700; } Technically that this is something you should only do if you really have to repeat the same string of classes multiple times, though ? Personally one thing I've always struggled with "traditional" CSS frameworks are the components they come with. While they often look quite nice, I've almost never had the chance to actually use them as-is (either there's a predefined PSD layout or something like that, or the client demands changes, or the component is just plain bad) and thus I've basically ended up designing my own component library on top of the one provided by the framework. In most of my projects I've only used a framework like Foundation for the grid implementation. That's where Tailwind comes in: you can build exactly the components you need, BUT you still get certain benefits of a framework, such as globally defined fonts, colours, spacings, etc. I've struggled with this a bit, and I have to agree that to me personally the utility class approach often looks really ugly, and the shortcut class names etc. are hard to decipher. I'm not yet at the point where I can just glance over an element and instantly see what it is or how it's styled. That being said, I don't really think that this is a major issue for most projects: the size of your HTML is unlikely to become a real bottleneck. ... and if it does, you can always use the extracting components approach mentioned above. Use Tailwind for prototyping, and then convert the combinations you use often to custom components (or custom utility classes) ?
    2 points
  5. Please do – the core would definitely benefit from this ?
    2 points
  6. After digging through several PW forum threads, I think the following approach might work: Create each of the 200 pages via API as the user it will be later assigned to (or create as superuser, and later change the owner) Install this module
    2 points
  7. Paginated forms: Looking > Forward > To > This > Alot. Thank-you!
    2 points
  8. This module will log information about all mails that are sent via WireMail to the PW logs From PW Weekly: https://github.com/BernhardBaumrock/RockMailLogger https://modules.processwire.com/modules/rock-mail-logger/
    1 point
  9. Hello everyone, Recently I spent some time researching how I can update my workflow. I really enjoy working with TailwindCSS however, when it comes to Javascript, I often find myself having to search around to find a good package. Often I find myself having a package for lazy loading, a package for sliders, a package for animation, a package for parallax and a package for ajax. Before you know it, you are worrying about dependicies, conflicts and vunrabilities for many different packages. Since the push is to get rid of jQuery and use native javascript, often each will have their own utility classes, some of which do the same thing. This adds a lot of bulk to the website. This is what I love about UIKit, it provides plenty of functionality for a small ~130KB unminified. Not many know this, but the UIKit helper classes are exposed via the API too. So it means you will not have to worry about your javascript working cross-browser (https://github.com/uikit/uikit-site/blob/feature/js-utils/docs/pages/javascript-utilities.md). The perfect thing would be to combine UIKit and TailwindCSS, but the best way to achieve this is up for grabs. I personally use TailwindCSS base and implement components from UIKit. I then use PurgeCSS on the CSS file to make sure anything unused by either UIKit or Tailwind isn't making it to production. I do this using Parcel JS. I have used Webpack and Gulp previously, but I find Parcel is a simple and easy way to get a project started (and it's fast!). The next thing I've found is UIKit is not always the answer. There are now more than ever better ways of achieving things in browser. Such as CSS Grid, `position: sticky`, and `object-fit` try to use these CSS alternatives where possible. Purge will always make sure that you get the smallest possible file size, so avoid using the uk-grid element where possible and use CSS Grid. I have setup a github starter template (https://github.com/TomS-/UIKit-TailwindCSS/tree/master) if you want to have a look at it. CSS Grid will introduce intrinsic design (https://www.youtube.com/watch?v=lZ2JX_6SGNI - Great series) Next will be to use WebP, there is plenty going around on the blogs now about this, but this will make a massive improvement to your Google Page Insight rating (https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.tikari.co.uk%2F&tab=desktop). I would love to hear your web manifesto - and ask me anything about mine ?
    1 point
  10. define "bloat". In your CSS or HTML? Because this surely looks ugly to me: <a href="#" class="no-underline text-black flex items-center cursor-pointer font-mono bg-blue-grey-50 block p-1 pl-2 rounded-tl rounded-tr border border-blue-100 border-b"><span class="inline-block text-lg font-bold mr-1 text-grey-800"> ^ straight from the Tailwind cheatsheet source code. If this isn't bloat, I don't know what is.
    1 point
  11. Yes, that works great too in that case and others similar cases if there is possibility to tweak markup. I also found that purge failed on rather complex navbar css so I found it easiest to skip purge on my own css. Not a problem since with tailwind I write very little css anyways.
    1 point
  12. https://www.fieggen.com/shoelace/index.htm Website I bookmarked some time ago.
    1 point
  13. A neat new Github feature: https://help.github.com/en/articles/navigating-code-on-github And while I'm at it: If you're frequently navigating through GH repos, I can highly recommend this browser add-on: https://www.octotree.io/
    1 point
  14. I prefer to change the pagination style on _init.php, or _func.php, for instance, to use Tailwind classes, using Ryan's modified example:
    1 point
  15. Thanks @Sergio, @apeisa and @Tom. for bringing Tailwind CSS to our attention. Incidentally, I checked out the Tailwind screencasts and ended up picking up Vue.js as well :-). Anyway, to my first question. @apeisa, could you please clarify this statement about ProcessWire custom classes. Does it mean you use Tailwind in the backend/admin/modules or does it mean you use ProcessWire inputfields in the frontend? Thanks. Cross-posting Tom's Tailwind + UIKit + Grid resource:
    1 point
  16. I am not sure how I feel about this... It reminds me of lings cars, but not so flashy/bad (apologies if you had a hand in this, not trying to offend anyone). However, It is awesome to see that it is responsive.
    1 point
  17. If it‘s more for quick dumps of things on your mind and less the super structured kind give nvALT a try. It‘s super fast, keyboard driven and iirc has a great search.
    1 point
  18. For simple markdown/plain text notes with tagging, I use https://simplenote.com/ made by http://automattic.com/. It also has a mobile app. For more complex notes with images and tagging, I use Evernote.
    1 point
  19. I have enjoyed Notion over the last few weeks. However, I do use ClickUp for project management etc, and it has a built in note feature which I use more often (simply because you can convert a note to a task).
    1 point
  20. Definitely, I would recommend PW. In my case, the client didn't like the tree structure of pages, so I had to create separate Process modules for managing news, tags, banners, categories. I have found that it's much easier to control permissions and workflow via custom modules.
    1 point
  21. A sneak preview of a new page builder concept that I'm close to completing. I'll write more about this in coming weeks, but this video demonstrates a lot of unique things going on:
    1 point
  22. Is it a Vue issue or CORS with AJAX in general? https://codepen.io/adrianbj/pen/QzXwGz?editors=0010 If it's just Vue related, I use AXIOS for this stuff: https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html PS, it's looking great! PPS - why AJAX - given how small the JSON for all the modules is, why not just load everything at once via PW's $http->getJSON()
    1 point
  23. Thank you all for your answers! Also interesting with URL segments and GraphQL. It seems it produces slightly slower requests, so I will test it for another project. Using a router solution like the one you pointed seems a bit overkill at this stage specially for my knowledge level. So far Vue and Processwire work very well together. I built some kind of REST api and the performance is very good both for read or to create pages. In some pages I am using regular forms to create posts, users... and in some others I am using vue. Vue of course offers much more potential to build complex, modern interfaces. Great that I can combine both methods. I think Processwire is flexible and powerful enough to build webapps with a smaller learning curve than a full fledged framework such as Laravel. It would be just perfect if creation of APIs for consumption by the front-end would be just a bit easier out of the box. (Is not that the hot keyword of the year? Headless CMS?).
    1 point
  24. You can use Tracy Debugger for catching emails (Mail panel). https://processwire.com/blog/posts/introducing-tracy-debugger/#mail-panel
    1 point
  25. There's another method to be able to overwrite created user directly when creating a page. There's a new template setting to allow overwriting the $page->createdUser that you can enable to allow this via API. Then you can do this: $p = new Page(); $p->template = "basic-page"; $p->set("createdUser", wire("users")->get("importer")); $p->title = "Imported page"; $p->save();
    1 point
  26. Hey Pete, I'm short on time, I think this is what you are after. $templates->get("template_name")->fieldgroup->getField($field, true)->label; *written in browser off the top of my head.
    1 point
  27. Ok so I gave it a shot with creating a module by altering Ryan's code you linked to and this seems to be working so far (I think). Here's the module using that code teppo linked to, slightly modified to match my requirements: <?php /** * Edit Yours Only * */ class EditYoursOnly extends WireData implements Module { public static function getModuleInfo() { return array( 'title' => 'Edit Yours Only', 'version' => 1, 'summary' => 'Custom module to allow users only to edit pages they created. Applies to role \'standard\'', 'author' => 'Christina Holly, TinaciousDesign.com', 'singular' => true, 'autoload' => true, ); } public function init() { if($this->user->hasRole("standard")) $this->addHookAfter("Page::editable", $this, 'editable'); } public function editable(HookEvent $event) { // abort if no access if(!$event->return) return; $page = $event->object; // criteria required in order to edit if($this->user->name !== $page->createdUser->name) $event->return = false; } } If anyone sees any problems that this could cause, please let me know. So far it appears to be working as I want it but I haven't tested it thoroughly. Thanks!
    1 point
  28. What the f*ck JavaScript? A list of funny and tricky JavaScript examples Some really odd stuff there... worth scanning through. I chuckled more than once... "b" + "a" + +"a" + "a"; // -> 'baNaNa' NaN === NaN; // -> false (![] + [])[+[]] + (![] + [])[+!+[]] + ([![]] + [][[]])[+!+[] + [+[]]] + (![] + [])[!+[] + !+[]]; // -> 'fail' typeof NaN; // -> 'number' (It ain't new, so sorry if this has been posted previously here)
    0 points
×
×
  • Create New...