I am new to Pug aka Jade and what i want is to parse a file.pug
to a web browser like Google Chrome.
Following this (Pug on github),
i installed pug but when i create a file.html and file.pug
the pug doesn't render the tags to html.
What is needed to make this happen ?
PUG (or JADE) is a pre-processor that needs to be compiled to html. This means that you need a proper compile module to do that.
As given on the example at https://pugjs.org/api/getting-started.html
Best option is to install "pug" module from NPM
For that to work you first need to have installed NODEjs (from https://nodejs.org/en/)
then its only running the npm install commands to get PUG and PUG client:
npm i pug
npm i pug-cli
After that please refer to the PUG getting started website as stated above for quite easy and detail explanation of the process of using PUG:
https://pugjs.org/api/getting-started.html
Related
I am new to SCSS. I love using SASS for my local development, but when I publish a client’s website and need to make a change, it’s a pain to have to dig out the old project and set everything up so I can edit locally and then publish those changes on the production site.
Currently, I make changes in the SCSS file and then I go to online SCSS to CSS converter tool and convert SCSS to CSS and then put that CSS into CSS file.
Is there any way that if I make a change in the SCSS file in the server then it should directly update the CSS file?
Currently, I use HTML, CSS, SCSS, and Javascript
Thanks,
Use sass package instead of VSCode Extensions like Live SASS Compiler.
Why should not we use "Live SASS Compiler" VSCode extension?
Live SASS Compiler extension is old and hasn't been updated for a while.
Some features like #debug, #warn, #error won't work, so if you are using it, you have to use the sass npm package for that.
So, How to install the sass package?
So simple, just run these commands.
npm install -g sass
And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css
More information is available on the sass docs here
Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki
Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.
Install sass package:
npm install sass --save-dev
Learn more about the package and its CLI
In the package.json file's scripts section, add these:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/css"
},
Run scripts:
npm run sass-dev
// or
npm run sass-prod
What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.
The above is a very basic setup to compiling SCSS files and "watching" them for changes. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.
My static website built using Gatsby utilizes a number of node_modules that use es6. From what I understand, I am facing the issue that is talked about in this link https://github.com/gatsbyjs/gatsby/issues/3780 where my gatsby build fails because uglify is not able to handle es6, and the babel presets built into gatsby do not transpile the node_modules. My initial thought was to edit the babel presets to include the node_modules, but I got a bunch of new errors on gatsby build that looked like this Module build failed: Error: Couldn't find preset. What other solutions can I try?
After trying a number of different solutions, I ended up copying the offending node packages locally and requiring the local versions instead of the node_modules version. This way I could transpile them myself to es5. This is a temporary solution until my team can move to using Gatsby 2 which will fix this problem in the future.
Can anyone point me to a tutorial that uses Polymer 2 and polymer-build from Polymer CLI? When I use any example in the polymer-starter-kit and use polymer serve, it works fine; but when I use polymer build and serve the bundled or unbundled directory, I get 404 errors. I have even updated to the newest alpha version of polymer-cli.
Also, using https://github.com/tony19/generator-polymer-init-2-x-app generators have the same problem.
I also spent quit a bit of time to figure this one out. Please use the polymer-cli#next instead of polymer-cli
Plain polymer-cli doesn't seem to have the latest build and optimizations to support Polymer 2.0#Preview related functionality.
You can install polymer-cli#next. In Ubuntu, you can simply use npm install -g polymer-cli#next
Then on, the bundled and unbundled versions of the application generated through polymer build would just works fine.
Edit:
You can find my sample Polymer2.0#Preview version of the code at https://github.com/phani1kumar/phani1kumar.github.io branch is "devmaster".
the sw-precache-config.js is initial render-blocking. This will load all the resources that the main page needs to make the app available for offline use. src/lazy-resources.html loads resources for the next routes.
You would need to get a proper configuration based on your layout and main page in the following 3 files:
sw-precache-config.js, polymer.json, src/lazy-resources.html. This is a practice followed in the shop app from Polymer team, you may opt to a different mechanism for lazy loading. The bottom-line for lazy loading is to load the resources after Polymer.RenderStatus.afterNextRender.
You may also find the following article interesting: https://medium.com/#marcushellberg/how-i-sped-up-the-initial-render-of-my-polymer-app-by-86-eeff648a3dc0#.pi2iucwzi
I noticed a bug in the generator in that the starter-kit subgenerator was missing a dependency on webcomponentsjs, which would cause an error with polymer-build. And as you discovered, polymer.json was also missing dependencies for the polyfill support of webcomponentsjs, which caused 404s on polyfilled browsers (such as Linux Chrome). That's all fixed now in v0.0.6.
You'll also need a version of polymer-build that does not try to uglify the JavaScript, which would fail due to its inability to recognize ES6. The new-build-flags branch of the polymer-cli repo replaces uglify with babili for ES6 minification (added in PR#525). You could check out that branch and build it yourself, or you could install it from here:
npm i -g tony19-contrib/polymer-cli#dist-new-build-flags
For convenience, this branch is added as a devDependency when generating the 2.0 starter kit with generator-polymer-init-2-x-app.
To build and serve a Polymer 2.0 Starter Kit project:
Generate a 2.0 Starter Kit (using generator-polymer-init-2-x-app, v0.0.6 or newer) by selecting 2-x-app - starter application template:
$ polymer init
? Which starter template would you like to use?
...
2-x-app - (2.0 preview) blank application template
2-x-app - (2.0 preview) blank element template
❯ 2-x-app - (2.0 preview) starter application template
After the project generator finishes, build the project with yarn build:
$ yarn build
info: Deleting build/ directory...
info: Generating build/ directory...
info: Build complete!
Note that the output is only build/, and no longer build/bundled/ and build/unbundled/.
Serve up the contents of the build directory, and automatically open a browser to it:
$ polymer serve build -o
You could also serve it with a different tool to verify that the build output would work outside of the context of any Polymer tools. Start a Python server in build/, and manually open a browser to it:
$ cd build
$ python -m SimpleHTTPServer
I am trying to use components from http://react-components.com (eg. react-youtube) in Reagent based application, but probably my naive approach is not the right one. I tried to install NPM packages with lein-npm module, include script in html page and use them via reagent/adapt-react-class as in this SO question. But for except this sample I wasn't successful.
Usually I get errors like "require/import/module is not defined" or "Youtube is undefined" (by having (def yt-test [] (r/adapt-react-class js/Youtube)). I am confused about what is needed to do. I read something about webpack/browserify, saw cljsjs packages - are those required in order to make this working?
I wrote a step by step guide on how to achieve this with webpack:
blob.tomerweller.com/reagent-import-react-components-from-npm
The general concept is the same as #scttnlsn suggested: bundle all npm packages in an external JS file and expose them through the global window object.
Those components are packaged as CommonJS modules. One approach for accessing CommonJS modules from ClojureScript is to bundle them into a single JavaScript file that can be included with your ClojureScript build.
You'll need to create a JavaScript entry point file which requires your various NPM dependencies and exposes them to ClojureScript (for example, by setting them on window). Create a file (let's call it index.js) containing:
window.YouTube = require('react-youtube');
Then use a tool like Browserify to bundle your entry point file and all of the dependencies it requires:
npm install -g browserify
browserify index.js --standalone window > bundle.js
Include bundle.js in your ClojureScript build and you'll be able to access the React component from ClojureScript via js/YouTube
As the title says.
The linter doesnt seem to work at all for me in Windows. I have tried it with javascript and php files with the correct syntax set.
Im following Jeffery Ways tutorial here -> https://tutsplus.com/lesson/sublime-linter/
I have installed package control,
SublimeLinter and nothing, removed it
installed sublimelinter beta and nothing too.
Any help please
From SublimeLinter's github page:
"If you plan to edit files that use a Javascript-based linter (Javascript, CSS), your system must have a Javascript engine installed... On Windows, you must install the Javascript engine Node.js, which can be downloaded from the Node.js site."
Node.js
Install it like a normal Windows application. Close Sublime and restart. Linting should be working.
You need to point the SublimeLinter to your PHP executable file in the SublimeLinter.sublime-settings.
Change this option:
"sublimelinter_executable_map":
{
"php": "C:\\wamp\\bin\\php\\php5.3.13\\php.exe"
},
Edit:
See this link for more help
http://fuzzytolerance.info/blog/2012/05/14/2012-05-15-getting-sublimelinter-running-on-windows/
In order to get SublimeLint linting js files, I had to follow the instructions here and install this additional plugin:
(I didn't need to follow the 'Linter configuration' step)
https://github.com/SublimeLinter/SublimeLinter-jshint#linter-installation