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.
Related
I have my project folder and in my project folder I have a client and server folder. In the client folder I have my main index.html file. I created another html file called products.html and access that through index.html successfully like this <a href="/products.html></a>
However, later I decided to create a html folder and store all my html files in there. When I stored my products.html file in the html folder and accessed it through index.html like this it doesnt work and instead I am getting a 404 error.
Why is the index.html file able to access the products.html file when they both are in the same folder but not when they are in separate folders?
***FOLDER STRUCTURE THAT WORKED***
project_name folder--> client folder--> index.html file & products.html
***FOLDER STRUCTURE THAT DIDNT WORK***
project_name folder --> client folder--> html folder --> product_categories --> products.html file
Assuming that your folder structure looks something like this:
.
└── html
├── index.html
└── product_categories
└── products.html
This would be the correct way to reference products.html from your index.html file:
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 trying to understand what exactly ties the page-object gem to Cucumber.
The page factory is exposed to Cucumbers world which allows the use of on / visit in steps, but this seems to be something that can be exposed without Cucumber.
The #browser variable which page-object relies on is created in a before_suite or before_scenario context in Cucumber but this can also be created without Cucumber.
Is there anything actually tying this gem to Cucumber?
Yes. Page-object gem can be used outside of Cucumber.
Here is an example how you can use it with RSpec.
$ tree
├── Gemfile
├── spec
│ ├── my_app
│ │ └── search_spec.rb
│ ├── pages
│ │ ├── article_page.rb
│ │ └── index_page.rb
│ └── spec_helper.rb
Gemfile
source "https://rubygems.org"
gem 'rspec'
gem 'page-object'
spec_helper.rb
require 'page-object'
Dir["#{File.dirname(__FILE__)}/pages/*_page.rb"].each { |file| require file }
RSpec.configure do |config|
config.include PageObject::PageFactory
config.before do
#browser = Watir::Browser.new :firefox
end
config.after do
#browser.close
end
end
search_spec.rb
require 'spec_helper'
describe 'Search field' do
it 'searches an article' do
visit(IndexPage) do |page|
page.search = 'Ruby'
page.submit_search
end
expect(on(ArticlePage).main_header).to eq('Ruby')
end
end
article_page.rb
class ArticlePage
include PageObject
h1(:main_header)
end
index_page.rb
class IndexPage
include PageObject
page_url 'https://www.wikipedia.org'
text_field(:search, id: 'searchInput')
button(:submit_search)
end
As has been mentioned on rubygems.org PageObject gem has only development dependency on Cucumber. It doesnt need cucumber for implementation. A precise explanation of difference between runtime and development dependencies is given here.
For execution purposes Cucumber looks for step definitions. Passing Page Factory to World adds the PageObject capabilities to Cucumber. The only thing that I can think of tying PageObject to Cucumber are its unit tests. Evmorov has already given a great solution for it to work with Rspec alone.
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 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 = "."