Using a few simple lines of CSS, create Pinterest’s Pin layout.

Browse our Teachable courses.

Image for post
Image for post

Let’s start by declaring some CSS variables.

:root {
--card_width: 250px;
--row_increment: 10px;
--card_border_radius: 16px;
--card_small: 26;
--card_med: 33;
--card_large: 45;
}

Note:

  • card_width: 250px — the width of our card/pin
  • row_increment: 10px — we are using a CSS GRID to build our layout; technically, each card is made up of multiple 10px increments for the rows; not columns
  • card_border_radius: 16px — used to round the card’s edges
  • card_small: 26 — a small card is made up of 10px * 26 increments (with the margins included: 230 x 230)
  • card_medium: 33 — a medium card is made up of 10px * 33 increments (with the margins included: 230 x…

Responsive, Auto-Play & Manual Navigation

We’re going to build a JavaScript image slider that has an auto-play function as well as manual navigation buttons.

We won’t be using any external libraries; all native HTML, CSS, and JS.

Browse our Teachable courses.

Image for post
Image for post

We’ll start by putting all of our elements on screen.

We need two components: Deck.js and Card.js

We have 6 elements to work with:

  • In the Deck.js
    1. an img that we’ll use as a button for moving right (IMG)
    2. an img that we’ll use as a button for moving left (IMG)
    3. a view port (DIV)
    4. an images container (DIV)
    5. a DIV to hold our “radio” buttons (DIV)
  • In the Card.js
    6. a “card” which we’ll use to hold the image (DIV)
    7. the actual image (IMG)

Responsive, Auto-play, Manual Navigation Buttons

We won’t be using any external libraries; all native JSX, CSS, JavaScript.

Browse our Teachable courses.

Image for post
Image for post

We’ll start by putting all of our elements on screen.

We need two components: Deck.js and Card.js

We have 6 elements to work with:

  • In the Deck.js
    1. an img that we’ll use as a button for moving right (IMG)
    2. an img that we’ll use as a button for moving left (IMG)
    3. a view port (DIV)
    4. an images container (DIV)
    5. a DIV to hold our “radio” buttons (DIV)
  • In the **Card.js**
    6. a “card” which we’ll use to hold the image (DIV)
    7. the actual image (IMG)

Fully responsive; Mobile and Desktop; Button, Wheel, & Touch navigation.

This is Phase Two of a Two-phase project where we build a fully responsive image carousel for mobile and desktop.

Browse our Teachable courses.

Image for post
Image for post

We have 4 large tasks on-hand.

  1. TOUCH navigation.
  2. BUTTON navigation.
  3. WHEEL navigation.
  4. Snap-back functionality.
for (let i = 0; i < this.images.children.length; i++) {
this.updated_position = this.last_positions[i] + difference;
this.images.children[i].style.left = `${this.updated_position}px`;
this.last_positions[i] = this.updated_position;
}

What it says is this:
Take the current position of all of the images — where are they on the X-axis?; add some difference which will move them to a new position.

We have a last_positions array to keep track of where our images are on screen.

Let’s code up the TOUCH navigation.

We’re concerned with three touch event listeners.

  1. touchstart’ — When the user first touches the carousel, we record the X-coordinate in a variable. …

The final Phase of our Cyberpunk 2077-inspired React-Chrome Extension

This is Phase Six of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user’s Spotify session.

Phase One can be found here.

This series of tutorials supposes that you…

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Image for post
Image for post

Like any Chrome Extension, we need to inject the foreground page into the User’s browser.

We, of course, inject from our Background.js script.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === ‘complete’ && tab.url.includes(‘http’)) {
active_tabId = tabId;
chrome.tabs.executeScript(tabId, { file: ‘./inject_script.js’ }, function () {
chrome.tabs.executeScript(tabId, { file: ‘./foreground.bundle.js’ }, function () {
console.log(“INJECTED AND EXECUTED”);
});
});
}
});
chrome.tabs.onActivated.addListener(activeInfo => {
chrome.tabs.get(activeInfo.tabId, function (tab) {
if (tab.url.includes(‘http’)) active_tabId = activeInfo.tabId;
});
});

Staying in our Background.js file, we’ll create those two functions…

function get_state() {
return new Promise((resolve, reject) => {
chrome.storage.local.get(‘chrome-ext-Spotify-controller’, item => {
if (chrome.runtime.lastError) {
reject(‘fail’);
} else {
const state = item[‘chrome-ext-Spotify-controller’] ? …

Fully responsive; Mobile & Desktop; Button, Wheel, & Touch navigation.

This is Phase Two of a Two-phase project where we build a fully responsive image carousel for mobile and desktop.

Browse our Teachable courses.

Image for post
Image for post

We have 4 large tasks on-hand.

  1. TOUCH navigation.
  2. BUTTON navigation.
  3. WHEEL navigation.
  4. Snap-back functionality.
for (let i = 0; i < images.children.length; i++) {
updated_position = last_positions[i] + difference;
images.children[i].style.left = `${updated_position}px`;
last_positions[i] = updated_position;
}

What it says is this:
Take the current position of all of the images — where are they on the X-axis?; add some difference which will move them to a new position.

We have a last_positions array to keep track of where our images are on screen.

Let’s code up the TOUCH navigation.

We’re concerned with three touch event listeners.

  1. touchstart’ — When the user first touches the carousel, we record the X-coordinate in a variable. …

Phase 5 of Cyberpunk 2077-inspired React-Chrome Extension

This is Phase Five of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user’s Spotify session.

Phase One can be found here.

This series of tutorials supposes that you…

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Image for post
Image for post

Let’s start by registering with the Spotify developer console.

Spotify Developer Console.

Documentation on that flow.

We want to be able to refresh our token, so we’ll be using the Authorization Code Flow with Proof Key.

  1. get an authorization code
  2. get an access token using the authorization code
  3. when our access token expires, refresh the token

We’ll follow the instructions for getting an authorization code and construct the proper URI to request.

We’ll handle all of this logic in the background.js of our extension.

Here, we’re creating variables to hold all of the parameters for the request URL. …


Fully responsive; Mobile and Desktop; Button, Wheel, & Touch navigation.

This is Phase One of a Two-phase project where we build a fully responsive image carousel for mobile and desktop.

Phase Two is coming soon.

Browse our Teachable courses.

Image for post
Image for post

We’ll start by putting all of our elements on screen.

We need two components: Deck.js and Card.js

We have 7 elements to work with:

  • In the Deck.js
    1. a button for moving right (BUTTON)
    2. a button for moving left (BUTTON)
    3. a view port (DIV)
    4. an images container (DIV)
    5. a touch area that we’ll use to determine whether or not the user is allowed to scroll the carousel (DIV)
  • In the Card.js
    6. a ”card” which we’ll use to hold the image (DIV)
    7. the actual image (IMG)

Phase 4 of Cyberpunk 2077-inspired React-Chrome Extension

This is Phase Four of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user’s Spotify session.

Phase One can be found here.

This series of tutorials supposes that you…

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Image for post
Image for post

Right off the bat, we need to install another package to help us with transitions.

>> npm install — save react-transition-group

We have two components that use this new package the Player and OptionsPage components.

We’ll start with the open_close button for our ‘Player’.

CSSTransition works by wrapping an HTML element in a DIV element.

This wrapper DIV then has CSS classes added and removed from it.

Those CSS classes have pre-defined names (defined by React Transition Group).

Those class names are:

  • .chrome-ext-flip-appear
  • .chrome-ext-flip-appear-active
  • .chrome-ext-flip-appear-done
  • .chrome-ext-flip-enter
  • .chrome-ext-flip-enter-active
  • .chrome-ext-flip-enter-done
  • .chrome-ext-flip-exit
  • .chrome-ext-flip-exit-active
  • .chrome-ext-flip-exit-done
  • there are three total states: appear, enter, and…

Fully responsive; Mobile and Desktop; Button, Wheel, Touch navigation.

This is Phase One of a Two-phase project where we build a fully responsive image carousel for mobile and desktop.

Phase Two is coming soon.

Image for post
Image for post

We’ll start by putting all of our elements on screen.

We have 7 elements to work with:
1. a button for moving right (BUTTON)
2. a button for moving left (BUTTON)
3. a view port (DIV)
4. an images container (DIV)
5. a “card” which we’ll use to hold the image (DIV)
6. the actual image (IMG)
7. a touch area that we’ll use to determine whether or not the user is allowed to scroll the carousel (DIV)

About

An Object Is A

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store