Get started with a Pinterest clone. No external libraries needed.
1. Create a mock-up of a single Pinterest Pin.
2. Create a mock-up of the Pinterest “Add a Pin Screen”.
3. Merge the above; Use the “Add Pin Screen” to generate a single Pinterest Pin.
4. Transfer the logic of our merge in step 3 into our Pinterest Layout.
1. Pin title — the user won’t see this; you can use this on the back-end as a way to store the Pin in a database
2. …
Get Pinterest’s unique grid layout.
A ‘PinterestLayout.js’ component that we’ll use for the Pinterest board.
A ‘Card.js’ component that we’ll use for the actual pins on the board.
function PinterestLayout() {
return (
<div style={styles.pin_container}>
</div>
)
}
const styles = {
pin_container: {
margin: 0,
padding: 0,
width: ‘80vw’,
display: ‘grid’,
gridTemplateColumns: ‘repeat(auto-fill, 250px)’,
gridAutoRows: ‘10px’,
position: ‘absolute’,
left: ‘50%’,
transform: ‘translateX(-50%)’,
justifyContent: ‘center’,
backgroundColor: ‘black’
}
}
Note:
Just HTML, CSS, & JSS
1. Create a mock-up of a single Pinterest Pin.
2. Create a mock-up of the Pinterest “Add a Pin Screen”.
3. Merge the above; Use the “Add Pin Screen” to generate a single Pinterest Pin.
4. Transfer the logic of our merge in step 3 into our Pinterest Layout.
1. Pin title — the user won’t see this; you can use this on the back-end as a way to store the Pin in a database
2. Pin modal — this is the overlay for each card; this won’t be functional for this tutorial, just cosmetic
A programmer’s solution to Parallax web design
We are going to fix an HTML element on page (in this case a DIV shaped like a circle).
When we scroll our page down, we’ll manually scroll the HTML element up.
Since we are manually scrolling our element up, we can control how fast or slow it moves.
This creates our parallax effect.
Normalize the page and make it vertically long so we have scroll space.
body { overflow-x: hidden; width: 100vw; height: 300vh; background-size: contain; background-image: url(‘./back.png’);}
Create a DIV…
<body> <div class=”orb”></div></body>
that we’ll style into a circle.
…
Using a few simple lines of CSS, create Pinterest’s Pin layout.
:root {
--card_width: 250px;
--row_increment: 10px;
--card_border_radius: 16px;
--card_small: 26;
--card_med: 33;
--card_large: 45;
}
Note:
Responsive, Auto-Play & Manual Navigation
We won’t be using any external libraries; all native HTML, CSS, and JS.
We need two components: Deck.js and Card.js
We have 6 elements to work with:
Responsive, Auto-play, Manual Navigation Buttons
We won’t be using any external libraries; all native JSX, CSS, JavaScript.
We need two components: Deck.js and Card.js
We have 6 elements to work with:
Fully responsive; Mobile and Desktop; Button, Wheel, & Touch navigation.
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.
We’re concerned with three touch event listeners.
The final Phase of our Cyberpunk 2077-inspired React-Chrome Extension
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.
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…
…
Fully responsive; Mobile & Desktop; Button, Wheel, & Touch navigation.
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.
We’re concerned with three touch event listeners.
Learning to code…