• Skip to secondary menu
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Blog
  • Web Design SIG Archive
  • WordPress SIG Archive
  • pacsnet.org

PACS WordPress SIG

A Special Interest Group of the Philadelphia Area Computer Society

  • .ORG
  • Codex
  • Design Resources
  • PACS Web SIGs
    • Python
    • JavaScript
You are here: Home / Web Design SIG / JavaScript 30 – Building 30 Things Part 3

JavaScript 30 – Building 30 Things Part 3

April 23, 2018 by Matt 1 Comment

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

Filed Under: Web Design SIG Tagged With: JavaScript

About Matt

Web developer and designer. Learning all the time. Founder & CEO - Cap Web Solutions

Reader Interactions

Comments

  1. Don Arrowsmith says

    April 23, 2018 at 8:29 pm

    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
    } );”

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Get SIG News & Meeting Invites

Notes and invites for upcoming meetings, wrap-ups from previous meetings.

  • This field is for validation purposes and should be left unchanged.

Posts By Category

Tags

accessibility backend Beaver Builder blocks block themes CodePen CoffeeCup Software color ColorZilla Content css CSS Grid design development ecommerce email firefox framework GDPR git Gutenberg HSTS HTTPS JavaScript layouts Lets Encrypt local development material design media library pagebuilders patterns plugins Rachel Andrew resources responsive RSS Security SMTP srcset SSL tools troubleshooting updates WooCommerce WordPress

Footer

Have an idea for a future meeting? Let us know.

  • This field is for validation purposes and should be left unchanged.

Search

PACS Disclaimers

Next Gathering

16 Dec
December 2023 - Virtual
16 Dec 23
  • View Upcoming Meetings
  • Email SIG Leader: Matt Ryan

    Privacy Policy · Terms & Conditions
    Copyright © 2023 PACS WordPress SIG · All Rights Reserved.
    Website by Cap Web Solutions
    Lifestyle Pro Theme on Genesis Framework
    Top of page