KSS Installtion and Setup - css

Can someone outline some step by step instructions on how to set KSS up on my local computer?
I've been reading a lot of articles and none of them show a working demo. And they also assume I'm a ruby expert.
I'm expecting to see an html page and some sort of auto-generated documentation page.
I've installed and used gems before but I am by no means an expert. So assume I'm a total noob.
Assume I have the following folder structure:
C:Projects/MySite
index.html
sass
css
js
I did this:
gem install kss
I get confused here though:
styleguide = Kss::Parser.new("#{RACK_ROOT}public/stylesheets")

KSS doesn't have a native outputer. The example that confused you should be run in an Ruby interpretive shell (irb for example, which is installed by default with ruby).
So, go to your command line, type irb, and then type that line into the resulting shell, replacing "#{RACK_ROOT}public/stylesheets" with "C:/Projects/MySite/css"
If you want a nice navigable web page, see the example Sinatra app.

Related

Can't add a breakpoint to Twig files in VS Code

I am trying to debug a Twig template in my Drupal 9 site. I am using VSCode as my IDE and using Xdebug for debugging. I have setup/configured the installation based on the instructions outlined here -
https://www.drupal.org/docs/develop/development-tools/configuring-visual-studio-code
I am able to set breakpoints in PHP files (step thru and watch variables successfully) however I just can't seem to do the same for Twig template files (just so I can see what variables I have access to in that template). What I mean by when I say I am unable to add the breakpoint is that clicking on the gutters of a Twig file within VSCode does not result in addition of any breakpoint.
I'd like to take advantage of Xdebug instead of using debugging functions like breakpoint() and dump() offered by the Devel and Twig_xdebug modules within Drupal. I am pretty sure I am doing something wrong or have missed a step but I can't seem to figure out what it is.
Some more details on my env:
a local Drupal 9 setup on a Mac OS that uses PHP 7.4 and nginx as its webserver.
Xdebug (v3.1.1) is installed and enabled (verified via phpinfo() output)
VSCode (1.63.0) installed with all of the supporting Drupal and PHP extensions outlined in the above article (specifically php-debug) have been installed.
I am using the default launch configuration to Run my debug session in VSCode.
I'd appreciate any pointers on what I am doing wrong and/or what I can try. Also, I hope I provided enough info on my use case.
Twig compiles the template files into PHP files. You need to set breakpoints in these Twig generated PHP files in order to debug them.
On this page, I also see that there is caching involved, which you will need to disable. That documentation seems to be quite comprehensive.
Came here looking for an answer to this very question.
You may be interested to know that there are a couple of ways to achieve this. You can either use a built-in feature of the devel.module (see: https://www.drupal.org/node/2788089) or there is also a contrib module called twig_xdebug, which lives here: https://www.drupal.org/project/twig_xdebug
I think the mechanism behind both of these is probably very similar, to be honest. The latter of those links provides further links to several guides on the subject matter. HTH! :)

Spring Boot .mustache file extension

I'm working on a spring boot application and adding a small configuration web page using Mustache templates using this article as an example. I have it working fine when all of my mustache template files have the extension .html, but the problem is that I don't get any IDE support. IntelliJ IDEA has a plugin for mustache, but the extension has to be .mustache. When I change the file extensions, though, I end up with a 404 error.
I've seen in the official example that they are using .mustache, so I know it's possible. I couldn't find anything in that project to indicate that a setting was changed to enable this. The only major difference is that I am using Kotlin instead of Java, but I don't see why that would have any effect on the mustache file extensions.
What am I missing? Thanks!
According to Spring Boot documentation (for v1.5.6, for v2.0.0.M3) you can easily configure the extension of Mustache template files by setting the following property:
spring.mustache.suffix=.mustache # Suffix to apply to template names.
In v1.5.x the default was .html but in v2.0.0 they switched to .mustache. (release notes)
Also you can configure IntelliJ IDEA to handle *.html files with the Handlebars/Mustache plugin by registering *.html pattern in Settings > Editor > File types > Handlebars/Mustache.
This isn't an answer in place of ones already given. Really it should be a comment, but I can't upload a screenshot in a comment.
It's worth noting that (at least in my IDE), I had to install the mustache plugin (not noted in the kotlin spring tutorial I'm following), and once installed, there is not a context menu selection for a new mustache file type:
But, if you pick the generic File and name it whatever.mustache, the editor will apply the mustache language tool to it.
Seems very "yeah, duh", but it threw me for a bit b/c everything in intellij so far feels so specific, I thought the fact that I wasn't seeing it as an option meant I was missing something :| .
Nevermind. I just realized that it is a 2.0.0 branch of spring boot and the 1.5.x branch still has it as .html.

Static link with Premake

I'm using premake4 on Linux to build a project which links to a third party .a file.
Neither links {"foo"} nor links {"libfoo.a"} work, since premake generates a build script which incorrectly uses the flag -lfoo as if I'm linking a shared library. Using files {"libfoo.a"} will make premake ignore the file since it isn't C.
Premake4 is getting awfully old at this point. Is switching to Premake5 an option?
If not, one hacky workaround would be to use linkoptions to emit the link flags however you would like them to appear.

How do i create a gem which will generate a css file from a template

I have a set of css files which I use in almost all projects.
I would like to create a gem which has a generator inside it.
I managed to write some code using the tutorial given here http://guides.rubyonrails.org/generators.html
However i am not sure about how to move this to a gem and use a command like device install ....
There are actually two ways of doing this (and both involve a Rails Engine afaik).
You create a engine that contains a generator for your file
You create a engine that bundles the CSS file so you can require it without having it present in your code repository. (Similar to the jQuery gem).
To create an engine just follow this guide: http://edgeguides.rubyonrails.org/engines.html.
Just without the mountable option and anything you put inside your app/assets/stylesheet directory will be available through require inside your CSS manifest.
The relevant part in the guide is in 6.4 besides the general boilerplate setup you have to do.
For a generateor the same applies, you just have to put the generator in the generators directory as you would with the app and can then run it from there with the engine prefix.

How to validate HTML/CSS files with grunt.js?

This is a noob question.
I would like to use grunt.js as a build tool for my web project. Can use grunt.js to validate my HTML/CSS files? Do you have an example of such a grunt.js file?
There is another plugin that seems to be updated more often and does not require java. grunt-html-validation. It has a number of options and has been working great for me. You can install and use it like this:
npm install grunt-html-validation --save-dev
Then put something like this in the initconfig of your Gruntfile.js
and this in appropriate places in your Gruntfile.js
grunt.loadNpmTasks('grunt-html-validation');
grunt.registerTask("default", ["validation"]);
There is also a number of useful options including the ability to relax errors based on a regular expression (could be useful for AngularJS for example) and the ability to save a report.
You can use the grunt plugin grunt-html. Beware, you will need Java on your computer to use it. It works well for me.
As of now there seem to be two popular HTML validation plugins:
grunt-html-validation
grunt-html
grunt-html-validation uses the W3C Markup Validation Service and grunt-html uses a local copy of the java-based The Nu HTML Checker.
They both work well and have very similar options so it comes down to whether you want to wait for an external service call or wait for a local java app.

Resources