-
Posts
382 -
Joined
-
Last visited
-
Days Won
14
Everything posted by heldercervantes
-
Love this! Makes total sense. Although I did try to make AlpineJS part of my boilerplate and quickly gave up. Just easier for me to add a JS file and do my stuff with vanilla. Right now I just have a Vite thing, a js that imports and inits scripts from a file (like the one that Bernhard mentioned). Effects like my text reveal thing require adding the type of ready-made JS and CSS that I tend to avoid. However if it could be part of a library of stuff a developer can browse and easily add to their project, it might be a cool idea. Alpine might help with this.
-
It's my own script. Basically I'm identifying every text to animate with a data-attribute. Then my JS starts by breaking each word into a div with overflow:hidden and each letter in a span shifted down and incremented css transition-delay. Then, an intersectionObserver detects when it comes into view and adds a css class that changes each letter's position back to zero and the transition-delay makes them appear one by one. It's a cool approach and practically a snap-on script that I can reuse (and have done so already) on other pages. It still has that error @netcarver pointed out, though. I also have something similar for the images that makes a fade-in reveal effect.
-
That's a glitch on my animation script that I still have to improve 😄 It's on my todo list
-
http://shift-up.pt/ Shift-Up is a consultancy company from Portugal that specializes in government incentives and financing. This is my first project using ProFields and RockFrontend, and I can't really believe how long it took me to start using both. Profields' InputMatrix is a huge step up from my previous custom module that I hacked together using file selects and custom field visibility. And RockFrontend, just by getting latte in the mix, makes everything a lot more polished and professional. The project is a fresh start from the previous old Wordpress solution they had, taking care as to not harm the SEO standing this site had built up with all its content. I started out by writing a content import script that took hundreds of pages from the oh so messy WP export and turned them into neat PW pages. I also had to handle the URLs in the process, ensuring that the old unstructured WP links would be fed to the Redirects module. So the focus here was more on carrying over the content without having to rewrite everything, and now that we're here, when new programs come up we have a platform that can properly grow and add new layout solutions and features.
- 4 replies
-
- 11
-
-
-
A tricky selector based on a parent page's checkbox
heldercervantes replied to heldercervantes's topic in General Support
Well, I can just do two searches. I'm just being stubborn assuming there's a straightforward solution for this 😆 -
Hey guys and gals. I have a page tree that I want to search, where the second level has an "archived" checkbox. Something like this: Home Products Category ('archived' checkbox field is here) Product (these also can have subpages that I want to catch too) Product Product And now that I'm making the search engine for this site, I want to query all product pages, and I want to sort them showing "non-archived" items first. I suppose there's a way I can incorporate something like 'sort=$page->parents[2]->archived' (not like this of course, but...) Any ideas?
-
Of course it's that easy 🤦♂️ How did I not find that discussion? Who knows. Thanks Jan 😘
-
Hi guys. I'm making an import script for a weird site's content. I got to the point where I can successfully clean everything up and shepherd most data from the exported mess to their new home in page fields. I'm also finding file links and image urls that I want to upload to a new files field. I don't have them locally, so basically I need to start from an array of URLs and somehow upload them to the page's files field. But how? I just can't wrap my head around uploading stuff. It's always a pain
-
Planets are sphere primitives with an image texture applied. The Voyager is a GTLF model from NASA (threejs has importers for that). There's a background that's basically a cube with inward facing images and the Saturn rings is just a plane with a PNG texture. You can also see some specs coming towards the camera that's a particle system. Basically 2000 randomly placed vertices that move and get reset once they're past the camera. It's a ton of fun to work with this stuff.
-
Hey Ryan! This is basically a full-viewport Threejs scene on a fixed element behind the content. Planets have a static position, and the probe just moves along the Z axis with the camera attached to it. As the user scrolls, the scrollTop is translated to a Z position for the probe. I had to add a little compensation for the window size so that the probe's position matches the content the user is seeing as is intended. There's also an intersectionObserver detecting each slide coming into view, and depending on what's visible the camera changes position to look left or right. The flying logos are relatively simple. From PW I just generate a JSON with the list from an images field. The script that generates the scene loops through that array, adds planes and textures for each one. X and Y positions just cycle through an array with presets, and Z is incremented with a set distance between them. Content itself is basic Tailwind stuff. Although I have some custom made scripts handling entrance animations, like the typing effect on the dotted text. The game is the result of a conversation with ChatGTP. I had the basic idea of making the user spin the cursor around a dot, mimicking the probe's orbit around Earth, but took the opportunity to challenge the AI. It actually gave me a pretty decent script right off the bat that served as a proof of concept. Then I discussed how to make it challenging and it gave me a few ideas. I iterated over them, and eventually came to the solution of adding movement speed to a variable multiplied by the number of consecutive unbroken turns. Had to refactor the whole thing to make it work properly, but ChatGTP was pretty darn useful in the process.
-
So I've just updated my personal website after some 7 or 8 years. It's a small one pager, but with some quirks that I hope you'll enjoy. Have a look: https://heldercervantes.com/ First, the approach was to somehow reinterpret my CV into a web experience. My last CV, along with my Supertiny agency's website share this space exploration / alien contact theme, so the idea here was to incorporate a journey through space as the user scrolls through the website. In the end you'll find a mini-game, where you can attempt to reach the far depths of space and discover what's out there. Most content is static, but I'm using PW to manage the logos you'll fly by at some point and the projects, the game's highscores and SEO. I intend to improve it a bit in time. Sound is probably the next thing I'll add, and I have some ideas to make the game more interesting. Fun fact: Setting up PW for this one took about 2h.
- 6 replies
-
- 14
-
-
-
This is a particularly good one. Very well designed 👏👏👏👏
-
Just noticed this one, published a few days ago: https://www.ionos.com/digitalguide/hosting/cms/processwire/ Cheers
-
Best approach for mailing users
heldercervantes replied to heldercervantes's topic in General Support
Right now, just one or two hundred. I have a universe of 600 potential users, and I expect about 100 to enroll. These users will get email notifications selectively if a gig is posted that matches their preferences. But this is intended to grow and there will be an effort to increase the user base. -
Best approach for mailing users
heldercervantes replied to heldercervantes's topic in General Support
By the way @bernhard, this is my first project using RockFrontend, and I could just kiss you 😘 Rockfrontend with Latte + Tailwind + Alpinejs is such an awesome mix. -
Best approach for mailing users
heldercervantes replied to heldercervantes's topic in General Support
This is one of my worries. Right now we have a universe of 600 potential users, so we might be talking about hundreds of emails. Not even sure if the hosting provider will be happy with it. In terms of UI I'm thinking of having a checkbox at the end of the page for "Send email alerts on save", which would be used in the hook. And then maybe tie this with ProMailer for throttled sending, handling unsubscribe and all those nice things it does. But I haven't tried it yet so idk if there are any cons. -
Hi guys. I'm currently developing a volunteering board solution. Basically users register saying what are their areas of interest and how they are available for helping, and then there's a "job board" of sorts that lists where help is needed. So I'm doing a simple user registration form, creating users with a specific role. And when I publish a new help request, I want the admin to be able to select from the options of the areas of interest and availability fields, and that should fire an email alert to all corresponding users. This process should be as dummy-proof and straightforward as possible. Any suggestions on how to approach something like this?
-
Seasons Greetings to you all! I'm wondering, does anyone know of a good online magazine powered by processwire? Like a proper magazine with sections, articles, tags, featured articles, related articles and all that? Think stuff like https://www.archdaily.com/ or https://www.designboom.com/ I'm in that lovely position of trying to convince someone who's thinking wordpress to build their site properly.
-
Hey guys. Shouldn't the showcase section have a list by author feature? I just found myself wanting to send someone a link to the showcase of the sites I made in PW and there doesn't seem to be a way to do it. And while at it, how about mentioning which projects were featured on PW Weekly? We now have a quite large projects list there, and if the point is to show off the best work made with PW to legitimise it, we might as well bring out the best projects and make it cool to be featured. What do you think?
-
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.
- 1 reply
-
- 11
-
-
Using DDEV for local ProcessWire development (tips & tricks)
heldercervantes replied to bernhard's topic in Dev Talk
What would really be great is a tutorial on how to set up a project in DDEV, something I'm trying to figure out right now ? Edit: Spoke too soon. This is so easy it sounds like a lie. `ddev config` - Choose PHP project `git clone https://github.com/processwire/processwire.git web` - Downloads PW into the 'web' directory `ddev launch` - Go through the config, enter db, db, db, db in the database step Done -
Here's my most recent project: https://velhinhos.pt/ Velhinhos (translates to something like "little old people") is a free service that helps people understand their needs and find the best care for their elderly, be it nursing homes, at-home services or daycare. The branding – name, logo, tone – is also our work, and we're providing continuity support on ads management and social media. This site features some information/advice about the available options, a blog, and a quiz that helps users better understand the level of dependency. It also feeds leads to their Pipedrive CRM. The frontend is a mix of Tailwind and StencilJS.
-
@bernhard coming back to this as I just stumbled upon a scenario that was discussed here. In the Craft project I'm working on someone added changes that I needed to add to my setup. Got the message, tried applying and it stopped saying that these changes require the "Navigation" plugin. I added it (just a 'composer install' command line), came back, ran it again and done. The whole process feels very polished. I also had conflicts in the yaml files yesterday, two devs adding new fields. The way to fix it was to include both lines, and right at the beginning there's a timestamp that Craft uses to verify if it's up to date. Used the highest one and added 1 at the end to make sure everyone got an update check. It's really interesting to see how these yaml files are set. There's a main one that describes the project, with plugins, system stuff, some names and keys, and then there are individual files for each field, sections (templates), globals and other stuff that doesn't exist on PW.
-
How Craft warns you of changes to the YAML files that you haven't applied yet (pulled from the repo): (I'm so used to the simplification of PW's tree that just seeing a "Routes" button in settings gives me the chills ?) And this is the apply changes screen: First chance I get I'm going to have a serious look at RockMigrations. Every new project I get is increasingly demanding on maintenance, with multiple devs, and this is a really big deal. This and SPAs, but thats a different discussion.