We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Building a Pinterest Clone

00:00
playback rate
1
quality
720p
subtitles
off
playback rate
0.25
0.5
0.75
1
1.25
1.5
1.75
2
quality
720p
480p
360p
240p
 Cite
 Share
 Download Purchase
EmberConf
Confreaks, LLC
 Hawker, Jordan

Formal Metadata

Title
Building a Pinterest Clone
Title of Series
Number of Parts
Author
License
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
One of the holy grails of responsive web layouts is the “Masonry” grid commonly used on Pinterest and many other sites. With the advent of native features like Flexbox and CSS Grid, many layout woes are a thing of the past. However, this design pinnacle still stands strong as a challenge to frontend engineers, often requiring a mess of complex JavaScript to manipulate the DOM successfully. Now, there’s a light at the end of the tunnel! Let’s explore how we can build a MasonryGrid component with nothing more than CSS Grid and Ember’s modifier pattern, making this problem a thing of the past.
00:00
Cross-site scriptingBuildingCloningSoftware developerFront and back endsSoftware developerFront and back endsStaff (military)Cross-site scriptingComputer animationJSON
00:49
Linker (computing)Computing platformSoftware testingSoftware developerEnterprise architectureGradientFront and back endsProduct (business)State transition systemComputer networkLibrary (computing)Execution unitTablet computerUser interfaceMaxima and minimaWhiteboardMonad (category theory)FingerprintClefForm (programming)Gamma functionCoefficient of determinationINTEGRALMereologyQuicksortProjective planeLibrary (computing)BitOperator (mathematics)ImplementationSpacetimeCartesian coordinate systemCodeSoftware testingLine (geometry)Software developerLengthGradientEnterprise architectureAreaNumberModemComputing platformComputer animation
04:02
InformationBitShift operatorNumberContent (media)Library (computing)SpacetimeRow (database)Web pageUniform resource locatorMultiplication signComputer animation
04:48
Query languageHypermediaOperations support systemAerodynamicsSpacetimeGraph (mathematics)HypermediaQuicksortContent (media)NumberSpacetimeUtility softwareClique-widthDemo (music)InternetworkingDynamical systemCartesian coordinate systemCross-site scriptingUsabilityPerfect groupRow (database)Direction (geometry)Computer animation
06:39
Instance (computer science)Web pageSpacetimeBitShift operatorContent (media)Graph (mathematics)Row (database)InternetworkingProduct (business)Computer animation
07:33
Computer virusTrailClique-widthMathematicsExecution unitTape driveDivision (mathematics)Cross-site scriptingWeb pageElement (mathematics)Content (media)Computer configurationConsistencyCategory of beingWeb browserFeedbackSoftware testingGraphical user interfaceGraph (mathematics)Projective planeQuicksortCategory of beingProduct (business)Clique-widthText editorContent (media)MereologyElement (mathematics)Position operatorGraph (mathematics)CalculationSet (mathematics)DemosceneWeb browserWeb pageCASE <Informatik>Multiplication signConsistencyRow (database)PixelMultiplicationNumberTransformation (genetics)Cross-site scriptingHome pageCartesian coordinate systemLatent heatComputer animation
11:02
Digital photographyMeta elementMaxima and minimaDigital photographyProjective planeDemo (music)Row (database)Content (media)Web pageNumberComputer animation
11:31
Numerical digitDigital photographyUniform resource locatorEuclidean vectorCross-site scriptingLinker (computing)ArchitectureTerm (mathematics)BitImplementationMultiplication signNatural numberMedical imagingService (economics)Digital photographyDemo (music)Content (media)QuicksortComputer architectureConnectivity (graph theory)Cross-site scriptingLevel (video gaming)Structural loadComputer animation
13:10
Price indexGamma functionQuicksortParameter (computer programming)Connectivity (graph theory)Content (media)Cross-site scripting
13:36
Clique-widthEuclidean vectorNumberRow (database)DistanceClique-widthBlock (periodic table)Cross-site scriptingConnectivity (graph theory)Content (media)SpacetimeComputer animation
14:32
Information managementHash functionString (computer science)NumberParameter (computer programming)Connectivity (graph theory)Clique-widthTemplate (C++)Row (database)Right angle
15:10
Element (mathematics)Vertex (graph theory)Graph (mathematics)Dynamical systemHypermediaQuery languageClique-widthImplementationDemo (music)Mobile appFluid staticsNumberState of matterGraph (mathematics)Electric generatorClique-widthTemplate (C++)Interactive televisionElement (mathematics)Query languageHypermediaState observerComputer animation
16:11
Linker (computing)Graph (mathematics)Social classExecution unitPhysical lawInterior (topology)Gamma functionMotion blurComputer wormNumberState observerGreatest elementElement (mathematics)Demo (music)Graph (mathematics)SpacetimeSingle-precision floating-point formatClique-widthImplementationBitCalculationConstructor (object-oriented programming)Multiplication signCross-site scriptingTemplate (C++)Set (mathematics)Category of being
18:05
Content (media)Wrapper (data mining)Euclidean vectorLinker (computing)Connectivity (graph theory)Wrapper (data mining)Content (media)Covering spaceGroup actionRow (database)Division (mathematics)Template (C++)MultilaterationComputer animation
18:41
PixelElement (mathematics)Content (media)Graph (mathematics)Graph (mathematics)BitElement (mathematics)Content (media)Perfect groupRow (database)NumberPixelImplementationComputer animation
19:10
Content (media)Electronic visual displayLinker (computing)Element (mathematics)Level (video gaming)PixelContent (media)Element (mathematics)ImplementationRow (database)Cross-site scriptingNumber
20:18
Computer-generated imageryDemo (music)Uniform resource locatorMedical imagingWeb browserElement (mathematics)Computer animation
20:52
BackupCAN busComputer wormWorld Wide Web ConsortiumLinker (computing)Computer configurationDependent and independent variablesDigital photographyService (economics)Connectivity (graph theory)Group actionSocial classWrapper (data mining)Row (database)Structural load
21:44
Euclidean vectorLinker (computing)Gamma functionStress (mechanics)QuicksortCalculationElement (mathematics)Image resolutionContent (media)Social classGroup actionMereologyResolvent formalismConstructor (object-oriented programming)Structural loadConnectivity (graph theory)Row (database)
22:57
MetadataDigital photographyEuclidean vectorComputer-generated imageryContent (media)Linker (computing)Event horizonMedical imagingMetadataDigital photographyContent (media)Connectivity (graph theory)ChainEntire functionStructural loadEvent horizonElement (mathematics)Social classGroup actionWeb browserResolvent formalismComputer animation
24:12
Content (media)Web browserMedical imagingDigital photographyGraph (mathematics)Row (database)Computer architectureDemo (music)BuildingConnectivity (graph theory)ChainImage resolutionService (economics)Cross-site scripting
25:43
SimulationProduct (business)Sigma-algebraBinary multiplierDemonState of matterMaxima and minimaProduct (business)Different (Kate Ryan album)Structural loadContent (media)Medical imagingWeb pageGraph (mathematics)Computer animationMeeting/Interview
26:06
Product (business)Digital photographyEuler anglesGraph (mathematics)Medical imagingContent (media)Cross-site scriptingCalculationMeeting/InterviewComputer animation
26:31
Product (business)Digital photographyLemma (mathematics)Execution unitOnline chatGamma functionStructural loadContent (media)Category of beingCross-site scriptingRow (database)Computer animationMeeting/Interview
26:56
Digital photographyProduct (business)Template (C++)Element (mathematics)Cross-site scriptingConfiguration spaceInterface (computing)Keyboard shortcutEvent horizonSlide ruleContent (media)Software developerProduct (business)Element (mathematics)Web browserCategory of beingGraph (mathematics)State of matterCartesian coordinate systemLogicNatural numberVapor barrierElectric generatorLatent heatDataflowKeyboard shortcutEvent horizonTemplate (C++)Slide ruleDigital photographyNumberProcess (computing)Utility softwareCross-site scriptingBitTwitterCodeDemo (music)Computer clusterRow (database)Computer animationMeeting/Interview
29:51
WebsiteSquare numberComputer animation
Transcript: Englisch(auto-generated)