The April 2018 meeting of the PACS Web Design SIG continued on with another lesson from Wes Bos’ Javascript 30 course.
We kicked off the SIG with a brief discussion on the upcoming ‘go-live’ date of May 25 2018 for the General Data Protection Regulation. This European Union (EU) based regulation, which is deemed enforceable by international trade law, is a data privacy act requiring that all organizations that collect or maintain private user data must provide a variety of automated tools by which the user can manage the collected data. That management may include viewing said data and deleting it on demand. The GDPR has some teeth. As offered on Wikipedia:
GDPR extends the scope of EU data protection law to all foreign companies processing data of EU residents.[4] It provides for a harmonization of the data protection regulations throughout the EU, thereby making it easier for non-European companies to comply with these regulations; however, this comes at the cost of a strict data protection compliance regime with severe penalties of up to 4% of worldwide turnover or €20 million, whichever is higher.
The brief presentation that was offered during the April Web Design SIG session on Javascript can be found online here. We viewed Day 22 – Follow Along Links first, followed by the start of the day 4 video titled Array Cardio Day 1.
Not confirmed yet, but I anticipate that next month we will finish up the array review before moving on to other topics.
A question came up regarding the style sheet that created the link highlight. Fumbling around on the presentation PC did not result in the file being shown. It is displayed below for your review. (Note. This code is being displayed using the ’embed’ option that is available when viewing one of your gists on GitHub.
Reviewing the use of the Follow Along Link highlighter I noticed behavior that seemed undesirable. It seems that once the highlight class has been applied to a link and you progress to the next slide, the previous are on the page that had displayed the highlight, stills shows the highlight. This is not optimal since the new page being displayed may not have a link at that location that should be highlighted. Take a look at this and see if you can come up with a resolution, add it to the comments. You can create a link to a CodePen site where you work on a fix.
A few resources were briefly highlighted. All of these resources are included in the presentation linked above.
Resources:
Wes Bos’ Online JavaScript Course: https://javascript30.com/
GPDR – General Data Protection Regulation: https://en.wikipedia.org/wiki/General_Data_Protection_Regulation
Free Code Camp education site: https://www.freecodecamp.org/
getBoundingClientRect JS method: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect/
JavaScript, The Definitive Guide – Sixth Edition
Example code from JavaScript, The Definitive Guide, 6th Edition
I think the problem with the highlight artifacts is that the reveal.js library moves in the next slide and the highlighting code isn’t aware that things have changed. I imagine that you can use reveal.js’ Slide Changed Event to recognize this state. You can then remove the highlighting until it is triggered again on the new slide. “The details are left as an exercise for the reader.” 🙂
“A slidechanged event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
Some libraries, like MathJax (see #226), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.
Reveal.addEventListener( ‘slidechanged’, function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );”