css and javascript issues

[jamesalbert]

possibly related to #21

Trying to include font-awesome stylesheets, using <link href="..."> worked fine, but having the css in resources/css the icons are rendering as squares.

Only <script>...</script>'s seem to be working. Both files in resources/js and <script src="https..."> don't seem to work.

If there is a javascript exception thrown, I don't hear about it in the logs.

My questions are:

• is this expected behavior, or have these features been known to work? In that case I can provide more info.
• are there any plans for a dev console to inspect html / debug js? That would be glorious.

[maxence-charriere]

can you provide the snippet where you use <link href="..."> ??

[jamesalbert]

@maxence-charriere that's some record response time 😄

Yeah, so this works for me:

<div class="SelectionMenu">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    ...

[jamesalbert]

closed by accident

[maxence-charriere]

so what is the snippet where it does not work ?

[jamesalbert]

so that's just a template I'm returning in my component's Render()

While that link imports the css just fine, having the css in resources/css the icons are just squares

[maxence-charriere]

For the javascript logs, I would say just to launch it with goapp web run -chrome and use chrome debugger directly.

[jamesalbert]

I'm not including it in particular so according to the docs, all the css gets loaded.

css in resources/css works fine in general. It's just font-awesome in particular doesn't seem to work when loaded from resources/css. For example, when Render() returns:

<div class="SelectionMenu">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <a class="fa fa-github"></a>
    ....

^ This will show a github icon.

However, if I have font-awesome.css in resources/css with Render() returning:

<div class="SelectionMenu">
    <a class="fa fa-github"></a>
    ....

A square is rendered. To prove that resources/css/font-awesome.css is loaded, I removed it, and the squares went away.

[jamesalbert]

goapp web isn't an option for me. It fails with github.com/veandco/go-sdl2/sdl: importing "C" is not supported by GopherJS.

I think it's because I'm using gobot

[maxence-charriere]

is it because https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css refer to external resources that are relative to the remote location ?

[maxence-charriere]

look like its the case:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

If you want to make it work only on local, you would have to copy the ../fonts/ dir.

[jamesalbert]

ha! I'm a little rusty 😄 that'll do it

[jamesalbert]

So that just leaves the javascript, to give a little more detail, this works for me:

<div>
    <script>
    alert("test")
    </script>
</div>

but having the same js in resources/js, the code is not called. Also loading third-party js libraries don't seem to work for me. For example, I'm trying to include Quill:

<link type="text/css" href="https://cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet">
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
alert("quill: ", Quill)
</script>

"quill: " is printed, Quill is undefined

[jamesalbert]

Also, I'm not including javascript to any component in particular. I'm going off the docs that say all files are included by default.

[maxence-charriere]

This is correct, JS files are not auto included. This has been removed a while ago, look like i forgot to upload the doc.

I will have to eitheir update the doc or reimplement it. Thanks for the feedback.

[jamesalbert]

@maxence-charriere Glorious, that solves a lot of my confusion. Thanks a lot for the help 👍

[maxence-charriere]

Just pushed a fix that include the javascript files. Feel free to reopen if the problem is not solved.

[maxence-charriere]

Also for the debugger, i experimented it once but it was way too buggy :(. I ll try to give it another try.

[jamesalbert]

@maxence-charriere awesome, ty for the clarification.

Also, I had one more question! I'm trying to extend drivers/mac, but I'm a total objective-c noob. How do you debug? NSLog doesn't seem to print to terminal. Do I have to open it up in Xcode, or is there a way of debugging from the command line?

[maxence-charriere]

you have to run the exec directly to see what NSLog is printing: YOUR_APP.app/Contents/MacOS/YOUR_EXEC