From 91ad1811d26f162dfcb99012ea72b74948f8501f Mon Sep 17 00:00:00 2001 From: Figby222 Date: Fri, 29 Mar 2024 23:21:57 -0700 Subject: [PATCH 1/2] Make transitions video crucial to the Image Slider This is a simple issue that has not yet been opened. It was not implied as imperative to the Image Slider exercise to watch the video on transitions, but it is necessary to Image Slider step 3 as an introduction to CSS transitions. Changes: Line 9: Clarify that the video demonstrates CSS transitions. Line 42: Reference the transitions video for added clarity. --- .../dynamic_user_interface_interactions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/javascript/javascript_in_the_real_world/dynamic_user_interface_interactions.md b/javascript/javascript_in_the_real_world/dynamic_user_interface_interactions.md index 5590fe81b8c..e433c87dcf9 100644 --- a/javascript/javascript_in_the_real_world/dynamic_user_interface_interactions.md +++ b/javascript/javascript_in_the_real_world/dynamic_user_interface_interactions.md @@ -6,7 +6,7 @@ Fortunately, at this point, you already have all the tools you need to make thes We aren't presenting any new content in this lesson - just giving you the chance to practice some of the techniques that you're going to be using on a daily basis as a JavaScript programmer. -> Animations are typically handled by CSS which is a little out of the scope of this lesson, but interactive stuff like this is no fun without a little motion! If you want to take a break and learn more about making stuff move [go watch this video](https://www.youtube.com/watch?v=8kK-cA99SA0). +> Animations are typically handled by CSS which is a little out of the scope of this lesson, but interactive stuff like this is no fun without a little motion! In order to solidify the principles of implementing a dynamic user interface, and learn about CSS transitions [go watch this video](https://www.youtube.com/watch?v=8kK-cA99SA0). ### Lesson overview @@ -39,7 +39,7 @@ Don't spend too much time worrying about getting your images to display at the c 1. This one is a little more involved than the last two, so think about how you would set up the different elements within the site. 2. Set up a very wide `div` which will contain the individual "slides" of each image. By appropriately positioning that `div` inside a container `div` (which acts like a picture frame), you can choose which slide is visible at any given time. -3. Once you have the slider positioned properly, build functions for "next" and "previous" which will advance to the next or previous slide accordingly. Make the transitions smooth using effects. +3. Once you have the slider positioned properly, build functions for "next" and "previous" which will advance to the next or previous slide accordingly. Make the transitions smooth using effects. Check out [this video on CSS transitions](https://www.youtube.com/watch?v=8kK-cA99SA0). 4. Set up arrow buttons which activate those functions and play with cycling through the images. 5. Add in some navigation dots at the bottom of the slides. Make a horizontal series of empty circles with CSS immediately below the slideshow. Each circle represents a slide, so whenever a new slide is activated, its corresponding circle gets filled in so you can tell where in the show you are. Make each circle link to that particular slide, so you can click on the circle and it will jump to that slide. 6. Add a timeout which advances the slides every 5 seconds. From 56303ea93d9a0338958153aa515895d9029dc5f2 Mon Sep 17 00:00:00 2001 From: Figby222 Date: Sun, 22 Sep 2024 23:18:11 -0700 Subject: [PATCH 2/2] authentication_basics: fix undefined user error Reference user from locals property in order to avoid a reference error if user has not been set to the locals object Changes: Line 254: reference user as locals.user --- nodeJS/authentication/authentication_basics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nodeJS/authentication/authentication_basics.md b/nodeJS/authentication/authentication_basics.md index 315535155cc..80a860dc10e 100644 --- a/nodeJS/authentication/authentication_basics.md +++ b/nodeJS/authentication/authentication_basics.md @@ -251,7 +251,7 @@ and then edit your view to make use of that object like this: - <% if (user) {%> + <% if (locals.user) {%>

WELCOME BACK <%= user.username %>

LOG OUT <% } else { %>