I have an issue with the compass generated_images_dir. The generated images doesn't get placed in the css/img directory but is instead placed in css. The goal is to have img-sb11bbe84f2.png inside css/img.
How can I get this to work?
I'm using ruby 2.1.2, compass 0.12.7 and Ubuntu 14.04 in case it's relevant
config.rb:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
generated_images_dir = "css/img"
javascripts_dir = "js"
Compass watch output:
>>> Change detected at 23:12:08 to: print.scss
create css/print.css
create css/ie.css
create css/img-sb11bbe84f2.png
create css/screen.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.
Output directory is:
css
├── ie.css
├── img
├── img-sb11bbe84f2.png
├── print.css
└── screen.css
Try using:
generated_images_dir = "."
Related
I am trying to open JSON file which is located in another directory, and receiving error:
FileNotFoundError: [Errno 2] No such file or directory:
I understand that if I provide relative path, the file has to be in same directory, otherwise the full (root) path has to be provided.
My question is how to avoid it, as at the moment I test it locally, but the code is being used by other people so obviously the path can't be from my root.
Any idea of how to resolve it?
Here is the code:
with open("example.json") as commands:
commands = json.load(commands)
You can specify a path relative to your current location.
For example, you're in folder baz and the json file is in folder foo
my
├── bar
│ └── baz <--- you're here
└── foo
└── example.json <--- the file is here
you can access the json file with
with open("../../foo/example.json") as commands:
commands = json.load(commands)
where .. is the parent of a folder. So ../../foo/example.json is the file two parents up (baz -> bar -> my) and then into the folder foo and finally to the json file example.json.
Finally note that if you are on Windows you might need to replace the forward slashes (/) in the path with backward slashes (\).
I am having trouble linking to an external CSS file in one of my served pages in a Go Server.
This is my project structure, with some comments. My $GOPATH, is the top-level directory. Note that there is a "main" executable that was built via using the "$go build main" command from this top-level directory. It essentially compiled the files in the src/main directory. I then run the program directly through this executable ("$.\main").
.
├── bin
├── main <-- Executable, not directory (built via "go build main")
├── pkg
│ └── darwin_amd64
├── src
│ ├── github.com
│ └── main <---- My Go files are here!
├── style
│ └── style.css
└── templates
└── developers.html
I am trying to use the style.css file as an externally linked style file in the developers.html template, that is eventually parsed and merged by Go. The files are listed below, in simplified versions.
developers.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
...
</body>
</html>
server.go
package main
import (
"log"
"net/http"
)
func main() {
styleHandler := http.FileServer(http.Dir("style"))
http.Handle("/style/", http.StripPrefix("/style/", styleHandler))
// router handles other non-static pages,
// and is defined in another .go source file. These are working.
router := MainRouter()
log.Fatal(http.ListenAndServe(":8080", router))
}
I'm sure the problem is how I'm treating the relative paths, but I can't figure it out. Thanks for any help.
I have a directory setup like this:
node_modules
src
index.js
I'm trying to copy these to a dist folder like this:
node_modules
index.js
I've tried a number of variations, such as
gulp.src(['src/**/*', 'node_modules/**']).pipe(gulp.dest('dist'));
But this places all of the node_modules in the /dist and not within the node_modules directory.
Any idea how I can do this?
You need to tell gulp.src that the base directory for node_modules/** is . so that the node_modules created at the destination. However, you cannot set the base to . for src/**/* because that would mean that the src directory would be created in your destination. So you need in effect to specify two sets of sources. gulp-add-src can help with this.
Something like this should work:
var addsrc = require("gulp-add-src");
gulp.src('src/**/*')
.pipe(addsrc('node_modules/**', { base: '.'})
.pipe(gulp.dest('dist'));
I just started looking into using fabric.js, and I'm finding very little resources on how to install it in my site. All I can find is a single stack overflow question that references the file "all.min.js", which upon a quick search of the unzipped file no longer exists.
I've scoured the internet for the past few hours, and it's looking like it is supposed to be common knowledge! I'm still stuck though.
Which file should I link to in my HTML?
Edit: Just to clarify, I downloaded a large ZIP file off fabric.js's github. I was confused as to which file I should link to to include the library.
A more modern fabric.js hello-world using webpack (state of 2018)
Advantages of this method
fabric.js does not need to be committed to version control
Given that all dependencies are in package.json only two commands are required to get up and running from scratch with your project: git clone <url> and npm install
Updating to the latest fabric version is as easy as running npm update
Not only the fabricjs code, but also your own code will be minified.
and it gives you all other goodies provided by webpack
Assumptions
This assumes...
... that you have the NPM >= 5.2 (if I recall correctly, this is needed by webpack).
... that you have access to a CLI shell to run the npm and webpack commands.
... that the npm binaries are on your path. By default: $HOME/.local/bin on *nix systems
NOTE: You will not need superuser/root access to the system if you already have npm available.
Preparations
First, initialise a new npm project:
mkdir my-fabric-project
cd my-fabric-project
npm init -y
Then install webpack into that folder (we will need this for later):
npm install webpack webpack-cli --save-dev
Also, install fabricjs as this is our dependency for our project:
npm install --save fabric
The two npm install commands above will populate our package.json file containing production (fabricjs) and development (webpack & webpack-cli) dependencies.
NOTE: When installing webpack, I got errors regarding cairo at the time of this writing. But it seems they are harmless. cairo is a graphics library and I assume this is only needed if you want to run fabricjs in a nodejs process. Browsers are already capable of rendering graphics so when running fabricjs in client-side code this is a non-issue. Otherwise you may need to install required headers. I assume (not tested) that this error can be solved by installing the package libcairo-dev on debian-based systems.
The Code
Now we have everything ready to get coding.
Create two folders src and dist, so our source tree becomes:
.
├── node_modules
| ├...
| └── ...
├── dist
├── package-lock.json
├── package.json
└── src
2 directories, 2 files
Create a HTML file index.html inside the dist folder with the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World FabricJS</title>
</head>
<body>
<canvas
id="myCanvas"
width="400"
height="400"
style="border:1px solid #000000;">
</canvas>
<script src="main.js"></script>
</body>
</html>
And also a javascript index.js in the src folder with the following contents:
import {fabric} from 'fabric';
function run() {
let canvas = new fabric.Canvas('myCanvas');
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
}
run();
This will give us the following directory structure:
.
├── node_modules
| ├...
| └── ...
├── dist
│ └── index.html
├── package-lock.json
├── package.json
└── src
└── index.js
2 directories, 5 files
You may notice that dist/index.html references a file called main.js which does not exist. We need to run webpack to create it:
npx webpack
Your code should now work. Either open dist/index.html manually, or run a mini-web server from the console to test:
(cd dist && python3 -m http.server)
That's it!
This should get you started with your project and also allow you to leverage the power of webpack to easily split your code. Good luck & Have fun!
Good To Know
The filenames dist/main.js and src/index.js are the defaults when running webpack without a config
webpack will create minified code in dist/main.js by default. This is because it runs in "production" mode by default. To change this, create a file named webpack.config.js with the following contents:
module.exports = {
mode: 'development'
};
You can use it running:
npx webpack --config webpack.config.js
All you need to do download the fabric.js from HERE and save it as js file named fabric.js, and create the html file suppose index.html with below content.
To run this example, these both fabric.js and index.html should be into one folder.
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
</script>
</body>
</html>
Option
You can download fabric.js in any format from HERE
Fabric follows a pretty traditional distribution layout.
You want to use files from the dist directory. fabric.js for development work and fabric.min.js for the live site.
I wrote a game with HTML5. Locally, it only works if I run:
python -m SimpleHTTPServer
And then I open localhost:8000. So, just a bunch of .html and .js files won't work. I want to put my game online and because of this Github (Pages) is out of question, because it won't work.
This is the part of the code I need a server for (I do realize that localhost:8000/res/ won't work on App Engine, I'll need to change the address):
var mapFile = new XMLHttpRequest();
var self = this;
mapFile.open("GET", "http://localhost:8000/res/map" + mapNumber.toString() + ".txt", true);
mapFile.onreadystatechange = function() {
if (mapFile.readyState === 4) {
if (mapFile.status === 200) {
self.lines = mapFile.responseText.split("\n");
self.loadTilesFromLines();
}
}
};
mapFile.send(null);
So, I heard that Google App Engine would work, it supports Python and is very popular. Now, I don't need anything like what they have in their documentation (which is pretty well-written):
import webapp2
class MainPage(webapp2.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'text/plain'
self.response.write('Hello, webapp2 World!')
app = webapp2.WSGIApplication([('/', MainPage)],
debug=True)
All I need is a SimpleHTTPServer that allows me to open my index.html on my-app.appspot.com.
I did try the example and got it up and running, but I can't force my browser to open index.html or src/ or even res/.
So, I am not even sure if Google App Engine supports what I'm trying to achieve here. The documentation just focus on building applications that use Python and all I needed with Python was a SimpleHTTPServer, which I don't think I need with App Engine.
Yes it is very doable on what you're trying to achieve here. Since you just want to serve static files it is very simple and you don't need to include any Python code.
Let's assume that you have this following structure:
└── my-game
├── app.yaml
└── static
├── index.html
├── js
│ └── script.js
└── res
└── map.txt
This app.yaml should look like this:
application: my-app
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /
static_files: static/index.html
upload: static/index.html
- url: /
static_dir: static/
After you're going to install the Google App Engine SDK (if you didn't do that already), you will be able to run the dev_appserver.py command from your terminal. If you have the above structure try to run it using the following:
$ dev_appserver.py /path/to/my-game
If everything went smoothly you'll be able to see your index.html on http://localhost:8080, the map.txt on http://localhost:8080/res/map.txt and you should be able to figure out the rest.
Note that you could still run your application using the python -m SimpleHTTPServer from within the static directory and test it on localhost:8000.