Recently Browsing 0 members
No registered users viewing this page.
The Architekturführer Köln is a guidebook and now a web application about architectural highlights in Cologne, Germany. It contains detailled information about around 100 objects (architectural landmarks) in Cologne. The web app offers multiple ways to search through all available objects, including:
The app is built with the Vue framework and compiled with Webpack 4. As a learning exercise and for greater customizability we opted to not use Vue CLI, and instead wrote our own Webpack config with individually defined dependencies.
The site is a SPA (Single Page Application), which means all internal links are intercepted by the Vue app and the corresponding routes (pages) are generated by the framework directly in the browser, using data retrieved from the API. It's also a PWA (Progressive Web App), the main feature of which is that you can install it to your home screen on your phone and launch it from there like a regular app. It also includes a service worker which catches requests to the API and returns cached responses when the network is not available. The Architekturführer is supposed to be taken with you on a walk through the city, and will keep working even if you are completely offline.
Notable mentions from the tech stack:
Vue Vue Router for the SPA functionality VueX for state management and storage / caching of the data returned through the API Leaflet (with Mapbox tiles) for the interactive maps Webpack 4 for compilation of the app into a single distributable Babel for transpilation of ES6+ SASS & PostCSS with Autoprefixer as a convenience for SASS in SFCs Google Workbox to generate the service worker instead of writing lots of boilerplate code Bootstrap 4 is barely used here, but we still included it's reboot and grid system Backend
The ProcessWire backend is API-only, there are no server-side rendered templates, which means the only PHP template is the one used for the API. For this API, we used a single content type (template) with a couple of pre-defined endpoints (url segments); most importantly we built entdpoints to get a list of all objects (either including the full data, or only the data necessary to show teaser tiles), as well as individual objects and taxonomies. The API template which acts as a controller contains all the necessary switches and selectors to serve the correct response in <100 lines of code.
Since we wanted some flexibility regarding the format in which different fields were transmitted over the api, we wrote a function to extract arbitrary page fields from ProcessWire pages and return them as serializable standard objects. There's also a function that takes a Pageimage object, creates multiple variants in different sizes and returns an object containing their base path and an array of variants (identified by their basename and width). We use that one to generate responsive images in the frontend. Check out the code for both functions in this gist.
We used native ProcessWire data wherever possible, so as to not duplicate that work in the frontend app. For example:
Page names from the backend translate to URLs in the frontend in the form of route parameters for the Vue Router Page IDs from ProcessWire are included in the API responses, we use those to identify objects across the app, for example to store the user's favourites, and as render keys for object lists Taxonomies have their own API endpoints, and objects contain their taxonomies only as IDs (in the same way ProcessWire uses Page References) Finally, the raw JSON data is cached using the cache API and this handy trick by @LostKobrakai to store raw JSON strings over the cache API.
By angelo, italy
I've always used WP but I want to swtich to PW. I'm not sure ....
I'd like to know if it's possible to create a website for an online photo contest.
The participants of the competition could create their own account, in which they upload their photos. The photos uploaded remain visible only to themselves and the judges.
From their account they can make the "entrance fee" payment.
The judges of the competition can create their own account... entering they see the photos of the participants and vote photos
At the main page I imagine the title of the competition, a button to read the regulation, and a button to register.
The website should be in Italian and English.
By Peter Knight
I have a demo site which I moved to a new VPS for client testing
We noticed that leaving a page open and then revisiting the site can result in a 25 second(ish) to load time and will then throw a 500 Error.
The hosting guys had a look and confirmed that the server is fine but the issue could be related to authentication or sessions.
We are running Page Protector and ProCache so I wondered if there were any known bugs here and any recommended actions.
My actual PW log doesn't show anything but the server log has plenty of these
2018-12-06 08:14:00 Error xxx.141.1x.101 500 POST /who-we-are/ HTTP/1.0 1.58 K Apache access 2018-12-06 08:14:45 Warning xxx.141.1x.131 mod_fcgid: read data timeout in 45 seconds, referer: http://demo.abc.not/who-we-are/ Apache error 2018-12-06 08:14:45 Error xxx.141.1x.131 End of script output before headers: index.php, referer: http://demo.abc.not/who-we-are/ Apache error 2018-12-06 09:03:18 Error xxx.141.1x.131 2614#0: *667 recv() failed (104: Connection reset by peer) while reading response header from upstream nginx error Thanks
I want to customize the mywebsite/processwire/profile page. It's almost all good but I want to get rid of the sections 'Admin Theme' and 'Language' so that the user can just set a new password. (see image)
Do I have to modify the admin template or how can I do that? Because when I go tree>Admin>Profile there are no fields to add or remove.
Or where can I find the php file?
I would appreciate your help.
Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
I'm trying to automatically redirect a logged-in user to a custom profile page using $session->redirect() and need to add $user->name to the redirect path.
All my attempts appear to have failed:
$session->redirect('/user-profile/')->name; $session->redirect('/user-profile/')->$user->name; $session->redirect('/user-profile/' . get($user->name . '/')); $session->redirect('/user-profile/' & get($user->name)); Can anyone point out where I am going wrong?