Building a Pinterest Clone

on YouTube ↗30m

" summary

Builds a Pinterest‑style masonry grid using CSS Grid and Ember modifiers, claiming a working Ember Photo Gallery demo that reflows responsively with no visible delay. Replaces heavy masonry.js positioning (2,500 lines, last released 2018) with a solution of less than 150 lines that uses ResizeObserver, grid-auto-rows set to 1px, per-item row-span calculations, and image-load promises (Unsplash demo). Code and live demo are available at Ember photo gallery / elwayman02.

AI-written summary · about

" chapters (14)

1. 0:00Start
2. 0:37Introduction
3. 1:38Masonry Layouts
4. 3:09Masonry Javascript Library
5. 4:09Grid Layout
6. 6:02Perfect Masonry Layout
7. 6:39Pinterest
8. 11:04Ember Photo Gallery
9. 11:50Masonry Grid Component
10. 14:37Masonry Columns Modifier
11. 15:41Masonry Columns
12. 21:11Masonry Item Template
13. 27:05Takeaways Should Be from Today
14. 27:21Css Grid

" related talks

• 32mAn Ember Dev's Guide to CSS GridJames Steinbach · EmberConf 2020
• 17mReact Responsively, Render ResponsiblyYoav Niran · ReactNext 2018
• 38mResponsive Grid with Garden CLJSPriyatam Mudivarti · Clojure/West 2015
• 37mRebuilding Tumblr as a Single Page AppOli Griffiths · EmberConf 2017
• 46mArt and Science of Shipping Single Page Apps with Ember.jsJesse Cravens · FITC Toronto 2015
• 19mPivoting to React, at scaleTilde Ann Thurium · JSConf Iceland 2016
• 25mMigrating Pinterest profiles to ReactImad Elyafi · JSConfCO 2018
• 51mCSS GRID LAYOUT - PRACTICE TRICKSYauhen Kavalchuk · The Rolling Scopes #46 Mogilev