Fixing Small Plugin Problem & Implementing First Sketch

nature-of-code / noc-book

The Nature of Code book (archived repo, see README for new repo / build system!)

http://natureofcode.com

1.94k stars 365 forks source link

Fixing Small Plugin Problem & Implementing First Sketch #151

Closed nonas-hunter closed 6 years ago

nonas-hunter commented 6 years ago

Hi @shiffman and @nelliemckesson ,

The new plugin ( #149 ) is awesome! However, I've been playing around with it and I think I found one small error:

When it creates a new iframe it uses the attribute "data-src" rather than "src" to identify where to pull the preview from. This was not working for me, but when I changed it to "src" it worked perfectly.

I made this edit in the plugin file and implemented the first sketch (Example I.1 Random Walk -- Seeing the actual preview rather than just a screenshot is soooo cool!!!!).

I will continue to work on implementing more sketches through out the day, I just wanted to make sure I was on the right path.

Thanks!

Luke

nonas-hunter commented 6 years ago

I just added the sketches for rest of the introduction - everything is coming together and it is very exciting!

However, there are a few small formatting details that might need to be addressed:

Code Comments - some are bold and in a different font. I can not tell if this was intentional but it does not seem like it.
Sketch Size - the sketches are not filling up the page the same way the did on the older version of the website (they are not centered or take up the full width of the page). Some of them also have scroll bars (This may be something you want to keep or not, I just wanted to point out that they are there.)
Additional Sketches - There are some pictures in the new version that were sketches in the old version and there are some pictures that never were sketches but could be. Should I work on implementing those sketches as well?

nelliemckesson commented 6 years ago

Hey @nonas-hunter ! So, the data-src attribute usage was actually intentional, and is meant to work with the lazy-loading script we'll be using. Basically, the way the lazy-loading script works is that when the frame containing the sketch is scrolled into view, the javascript changes that attribute to "src" and the sketch gets loaded up.

I'm writing another plugin that will add the required script tags to the header of each HTML file, and one of those will be the lazy-loader. I'll be submitting another PR today with that plus the actual lazy-load JS (here's where it comes from: https://raw.githubusercontent.com/ressio/lazy-load-xt/master/dist/jquery.lazyloadxt.extra.min.js).

nelliemckesson commented 6 years ago

Also the sketch size/alignment issues you noticed are fixed in the new CSS/JS files, which will be part of the next PR.

nonas-hunter commented 6 years ago

Thanks for the clarification @nelliemckesson

I'll use the code you just made ( #153 ) and make a new pull request with some of the working sketches.