Week 1 of JavaScript, jQuery, and AJAX | Genin

This last week or so at Flatiron we have been learning JavaScript and jQuery. And within the last 24 hours AJAX. Though all three of these topics are vast and in many respects fun I found myself at a loss as to what to blog about.

In an effort to find a topic I came across a variety of things that were either too broad, too complicated, or too simple to do a proper post on. However, I have collected enough mini-topics to throw together a grab bag of fun things to consider about JavaScript, jQuery, and AJAX.

1. Pre-Packaged Plugin One: Parallax

Parallax is an effect that became very popular on the web in the early 2010’s. It is typically used as a banner image that stretches the width of a website. You can see demos here:
Conceptually what is happening is an images with transparency are placed on top of one another. Each image has an absolute position (think the board game Battle Ship). The position begins to move in response to the users mouse. If an image is larger it will move at a different rate than a smaller image. This variance creates the illusion of depth amongst the different images.

With some knowledge of JavaScript and jQuery you can grab the code to do this and play with it to your needs:

2. AJAX with a time interval

Ever felt really frustrated that you have to click each time you want your AJAX requested .gif to refresh on the page. Well with this bit of code, that could definitely be used for a better purpose, you can trigger your AJAX at a time interval.

Theorizing a better implementation. We are doing a quick AJAX project that taps into the Spotify API. It embeds a single song and begins to play the track. We highlight this particular track and do not want to display an entire playlist. However, it would be great if the user did not have to select a new track each time a song is over.

One possible solution would be to make the request interval equal to a variable that corresponds to the song length.

3. AJAX with bookmarks and the back button

Put simply, they do not inherently get along. The back button may take into account each AJAX request and force a user to cycle through several clicks before arriving at their desired content.
A bookmark of a page with information generated with AJAX will take a user to the static page before the AJAX request.
The solution:

4. AJAX calls are visible in Developer Tools

From stackoverflow:
-From within the developer tools click on the Network button. If it isn’t already, enable it for the session.
-Click the “XHR” sub-button.
-Initiate an AJAX call.
-You will see items begin to show up in the left column under “Resources”.
-Click the resource and there are 2 tabs showing the headers and return content.

5. JavaScript Plugin Two: fullPage.js

fullPage.js is a well put together example of yet another design trend, full screen sections. These sections are great for a desktop experience. They allow the designer to more dynamically control what a user is viewing at one time. Content is divided up into vertical slides, each slides fills the entirety of the viewport at a time.

6. jQuery Hide & Show Timed Transitions

jQuery allows you to hide and show elements on the page. Hide and show take arguments of keywords that equate to predefined speeds. For example see this code:

Hide and show also take a specific time in milliseconds. For example:

So this hide process will take 2 seconds.

You can also create your own keyword variables with a specific time. I could foresee this being handy on a specific project were you wanted consistent timings but the defaults were too fast or too slow.


Quick Tips on Succulent Care:

1. Let them dry out completely, your plant will not die from lack of water. Or at least it will take much longer than you think.
2. If a plant is completely dry, arid, for days. You can water it completely without worry.
3. Gentle pour with water that is room temperature.
4. Succulents thrive in soil that drains.
5. A transplanted plant is a sensitive plant — let it adjust to its new environment without your care.