SASS autocompile on debian - ruby

i couldn't find any information on google for this so i thought i will just ask this general question.
we are developing a web app for customers who can change colors, fonts and stuff in their account through a simplified CustomDesigner (the name) Tab where they can pick colors from a color picker and fonts from a select-box and all this stuff.
currently all these dynamic changes are written through PHP in the CSS but we are working on a complete redesign and rework of the app and want to use the power of SASS for this.
my question is: is it possible to run ruby on a debian server and everytime a user changes some preferences in their account that ruby will compile the generated sass file or the "changed" variables into a new css file completely automatically?
if yes: how? i couldn't find anything at all about this topic.
if my using-example is not good enough and you can't imagine what i want:
think about the custom-bootstrap-builder, where you can simply change all the stuff from viewport-grid-size, fonts, font-sizes, border-radius and all that kind of stuff, and if you click on "download" it delivers a complete bootstrap version with your preselected preferences and downloads it completely automatically.
the download for my use-case is not necessary, instead i want the server to store that "compiled" file in a specific directory on the server and of course import it to the generated HTML.

after some more research and investing more time i found some "module" for nginx which is capable of processing less/sass/scss server side with nginx/LUA
https://github.com/titpetric/nginx-lesscss
i also found a PHP variant to use
https://github.com/leafo/scssphp/
i couldn't try any of these two, but it looks quite promising and i wanted to share if someone else has the same problem.

Related

Odoo - How To Manage & Update Static Files

Static Files in Odoo
I'm new to Odoo, and am working through developing a custom theme for a client. I've worked through the theme tutorial despite the many errors and omissions that exist in that documentation (going to make a pull request to update that after I'm done). My latest struggle is dealing with static files in Odoo, specifically images in the theme.
The Setup
Running Odoo 13.0.20200323 on Ubuntu 18.04 in VirtualBox managed by Vagrant and provisioned with Ansible
The Problem
Changes to image files in the static folder are not reflected on the website. This includes updating the theme in the website theme settings (the update function seems to update everything else). I've changed image names, image content, moved them into other folder, and have not been able to figure out how to have any changes updated on the website. I've restarted the server, doesn't change anything. Updated the theme as stated above, doesn't work. The only way I've been able to have any changes reflected on the front end is to completely destroy and rebuild the server.
Questions
What am I missing? Is there a function I'm not running to trigger Odoo to update what it serves from the static folder?
How does Odoo work with static files in general? On the fly updates to files in the static folder don't seem to have any changes on the front end. Are the files in the static folder copied somewhere else on install, and then served from that other location?
Understanding
I understand that having images and other files change in a folder called static, doesn't make much sense functionally, and that's not my intention for this. Since I'm in development I need to make changes to files, like SCSS, JS, and images, and have those updates reflected on the front end without having to destroy and rebuild the server every time. To be clear, changes to SCSS and JS files that I've registered in .xml files and bundled with various Odoo bundles update just fine when I make changes to them and then update the theme on the backend in the theme management view.
My desire is to understand how Odoo handles the files in the static folder in general, how to update those files properly, and how to manage them while developing and for release.
Answers
I've figured out an answer to the first part of the question as to what I'm doing wrong. It seems like a browser caching issue. When performing a hard reload, empty cache and hard reload, or visiting the site in an incognito window changes are reflected to imagery.
As far as I can tell Odoo is just serving files from the static folder directly. Please correct me if this is not the case.
Follow-up
Does anyone have a good solution for working with changes like this and dealing with browser caching issues?
Answer: I've set up a a couple gulp tasks that use gulp-rev (will replace with gulp-rev-all soon) rev-del and rev-rewrite to handle cache busting through appending hashes to the file names.
I'm going to try setting up Browser-sync in proxy mode to see how that deals with changes to files on reload. I'll report what I find!
Update: Browser-sync has worked well so far as expected. But was kind of useless until I figured out how to work out a fix for the problem below
Does anyone know of how to automate Odoo rebuilding SCSS, JS etc. bundles? So that on file change the theme can be updated and the results seen without having to manually update the theme on the backend to see the results?
Answer: The main task was figuring out how to get live HTML/XML updates working. Which meant building Odoo from the source, and not making any updates or changes to the theme on the backend or frontend from within the Odoo interface. Passing the option --dev xml to Odoo when starting it with odoo-bin allows for the XML code to be evaluated directly, and makes live updates possible. But this extremely helpful (almost necessary) functionality is broken when you make any updates to the them from within Odoo. I'll report on any work arounds to this, but for now as long as I don't touch the theme from within Odoo (update the theme or make edits to it with their editor) then it works great. Also I had to bypass bundling my CSS and JS with their bundler initially to get those updates working live, but may be able to go back and rebundle them now that the code is being evaluated directly.
⭐️Boilerplate and Tutorial Series ⭐️
I'm going to get my whole process for theme building dialed in and then I'll be sharing the boilerplate and build tools on GitHub and also writing and filming a tutorial series on it. Since the built in documentation on that front is straight up error filled, omits critical information and also

How to freeze figma version?

Often during development designs get updated and we want to avoid this. Interesting how other people freeze figma version and whether it's possible. We need somekind of snapshot link which can't be changed neither by designers nor by developers.
when you give the link, you have the options to set the permission. change permisiion to view only for other users that see your screens created in Figma.
Currently, there is no such way to share the file version wise. What I do in this situation, export the Figma document & rename it something like "app_design_v1.0_02_feb.fig".
And then share the file with devs and other stakeholders. Telling them to import the file on their own.
Another solution is to use "Pages". Though it's not very handy for large design projects. You can name your pages as "app_design_v1","app_design_v2" etc. So that everyone knows what they have on which version.

Can sites built with Rapidweaver be worked on without Rapidweaver?

A friend has asked me to do some work on his existing site which was built in Rapidweaver. I'm on Windows, so is there another way I can access and edit his site?
The Rapidweaver project file is meant to be edited only in Rapidweaver, really. As far as I know, the only way around would be to use an HTML editor to modify the pages that are already in the server. However, I would not reccomend you to do it unless you are not going back to Rapidweaver anymore. Because changing the files in the server does not update your local Rapidweaver files. So, you could end up editing something in the server, then getting back to Rapidweaver and upload a "new" version that would not be completely up to date (the previous changes in the server version would be overriden by the older rapidweaver project).
For that kind of work, a CMS (Content Management System) is a more flexible way to work. Nowadays, one of the most common is Wordpress. It will require an inicial setup but after it is working it can be updated from anywhere via web browser, or even from an app in your iPhone. But it is not a Rapidweaver based sollution.
There are a couple CMS related plugins or stacks (Dropkick CMS, Armadillo, Easy CMS, Total CMS...) for Rapidweaver that could also be useful in this context. Once again, first you would need to buy a licence and to setup the website using one of those plugins or stacks. Only then you would be able to edit on the go.

Can I reference a theme, that resides in one database, in another database?

I was just looking into referencing css files in a theme, that reside in a different database and I was wondering:
Could I reference a whole theme that resides in a different database as well with "extend"?
The reason behind that is: Would it possible to keep themes in one central database that can be used by all kinds of applications and therefore, if there should ever be changes to the themes, they only have to be changed in one location and not in every application.
Thank you for your responses in advance.
no I don't think this is possible (happy to be wrong if someone else knows it is?)
to keep all your theme files in a central spot, an XspLibrary in an OSGi plugin is a good solution, however it is a steep learning curve if you haven't done this before. The benefit is once you know this technique it opens the door for 'centralizing' other parts of xpages.
you deploy the plugin to each server and each client if using xpinc, and the every nsf can use a theme from that plugin.
there are a few 'getting started with xpages plugins' articles popping up around. check through planetlotus.org (I'll edit this answer later with some links)
once you know how to do an XspLibrary, you can then download the source code of the bootstrap4xpages project on OpenNTF to see how they are serving up their theme from a plugin.
it relies on the Extension library though so if you don't use the exit lib you could reverse engineer the necessary parts of that project too!
this bootstrap project was set up by Phillipe Riand who was the chief architect of XPages, so it should be a good example!
I am halfway through creating a video series on doing a theme from a plugin but have temporarily lost motivation :(. I might finish it sometime this year, if I do I will post a link to it on this answer. in the meantime I am happy to answer any questions you have about it if you want to give it a go.
otherwise, a quick and dirty solution would be put the theme files / CSS / images directly on the file system of the domino server, where the other theme files are. 'Mastering XPages' might have some advice about this but I don't have it with me right now :)
I think the short answer is you won't be able to load just a theme from a different database.
Each NSF has it's own JVM, sitting on top of the server JVM. So you can extend a theme that's sitting on the server, but not one in another NSF.
XPages Single Copy Design loads a theme from a different NSF by effectively loading the template's JVM. So it's the theme, but also all other design elements.
Jesse Gallagher's done some work in OpenNTF Domino API to allow you to load an XPage or Custom Control from another database, but I'm not sure if that would work for a theme.
If you want to design once and use in many, you can add the theme to the server itself. Looks for the OneUI elements to see where you need to store it (or it may be mentioned in Mastering XPages). You can only nest themes to five levels, but you should be fine.

PhpStorm: SCSS File Watcher Settings

I need help setting up my SCSS file watcher in PhpStorm. I'm on Ubuntu, I have PhpStorm 6, I have RVM with Ruby 1.9.3p194 and Sass 3.2.5. I've set my File Watcher options in, Settings >> File Watcher as follows:
Once I had done that, I changed something in my .SCSS file but I got this error.
...-1.9.3-p194/bin/sass --no-cache --update style_update.scss:style_update.css
/usr/bin/env: ruby: No such file or directory
(I added three dots at the begin of the first line to make the line shorter) So what might be the problem?
The problem is that IDE is not able to find ruby in the PATH. Note that it may be different in terminal and in applications that you start from Ubuntu launchpad.
Use the Environment variables option in the file watcher configuration to specify custom PATH value with a directory containing the required executables.
A quote from an answer/comment before:
"[...] ... just do what is written, add PATH variable ... [...]"
... That's exactly a common misunderstanding between helping people (who are mostly not teachers), who do the tasks on a daily basis, and asking people on the other hand, who can imagine 3 different things behind standartized answers and their words. Stackoverflow should extend on this, not repeat manuals or documentations.
In PHPstorm for example, you have 2 empty fields after hitting the plus on the right corner of the Enviroment variable settings window. The left field has the header "Variable", the right field the header "Value". So, if somebody is not familiar with PATH and ENVIROMENT variables of desktop or server systems, this person will be slidely confused about what has to be placed in the first field. Is it "ruby"? Is it "PATH"? Wouldn't it override the whole PATH variable of the system? Is it a custom given NAME I can choose and how does the system knows about it? No explanation can be found.
If you don't know the logic behind, you cannot assume the right steps from this standart formulated advice. While I am very excited about the feature set of PHPstorm I find the documentation slidely too standartized and unexplainable. Thats why many entries have bad votes from readers below. Like if somebody would ask: "how do I bake bred?" and the answerer says: "First you have to prepare flour and create dough, then you can bake bred." So what do the asker has learned from this answer? Exactly. Nothing what he didn't knew already before. Ok, maybe the question was not clear enough, but this is also a common case: how to ask correctly if you don't know what you actually ask for? From where can the person know, that there is a need to understand how to set PATH variables? I think this is what differs between makers and teachers. Teachers learn to communicate that gap. Documentation often lacks of better teachers writing it. People who work in the support team should be better in thinking like teachers.
To become more constructive: The documentation of PHPstorm says in its example: "choose PATH_TO_LIB as NAME and the path to the library for the VALUE field." Again: from where does this PATH_TO_LIB comes? Is it an own given Name, or a prepared empty VARIABE name PHPstorm watches? If something wents wrong and you start to look for issues which may cause this and start to worry about wrong settings you are lost on this questions even as an experienced PHP developer.
I generally prefer using tools like guard and RVM based ruby installations ATM over build in watch file solutions like these from PHPstorm, which mostly look for a system wide ruby and such first. But with rvm we have project based paths to ruby and such. RVM prevents breaking the compiling-chain of long term theme or module developments based on certain gem versions. Watch here http://www.youtube.com/watch?v=CmTuvzbPduI where Sebastian Siemssen (well known Drupal developer) explains why this is a good concept. But to nicely implement this with PHPstorm features, you need a better low level entry to path editing in PHPstorm.
Sadly this involves pressing save again, since this needs the save file event to be triggered. I would love to see a better implementation, flexibility and better explanation of how to go with the PHPstorm in-build watchers to have a refresh on edit at hand.

Resources