Virtual EmberConf 2020: Platform State of the Union

Transcript

1. PLATFORM STATE OF THE UNION
2. HTML-First HIGHLIGHT #1 For the ambitious markup developer.
3. <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="detail location"><span>Location"&/span> San Francisco"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> 15"#div> "#div> app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
4. <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="detail location"><span>Location"&/span> San Francisco"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> 15"#div> "#div> app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
5. !!" * Base Elements !# * { margin: 0; padding: 0; } body, h1, h2, h3, h4, h5, h6, p, div, span, a, button { font-family: 'Lato', 'Open Sans', 'Helvetica Neue', 'Segoe UI', Helvetica; line-height: 1.5; } body { background: #f3f3f3; } a { color: #016aba; text-decoration: none; } app/styles/app.css <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
6. AN EMBER DEV'S GUIDE TO CSS GRID TOMORROW AT 1:30 PM · WITH JAMES STEINBACH
7. <div class="container"> app/templates/index.hbs <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image" type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="detail location"><span>Location"&/span> San Francisco"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> 15"#div> <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav>
8. app/components/nav-bar.hbs <div class="container"> app/templates/index.hbs <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image" type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav>
9. <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> app/components/nav-bar.hbs <div class="container"> <NavBar "' <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image" type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="detail location"><span>Location"&/span> San Francisco"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> 15"#div> "#div> <div class="map"> <img alt="A map of Grand Old Mansion" src="https:"$""%" width="150" > "#div> app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
10. <div class="container"> <NavBar "' <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image" type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="detail location"><span>Location"&/span> San Francisco"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> 15"#div> "#div> <div class="map"> <img alt="A map of Grand Old Mansion" src="https:"$""%" width="150" > "#div> "#article> "#li> <li> app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
11. app/components/rental.hbs <li> "#li> <li> app/templates/index.hbs <article class="rental"> <button class="image" type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="detail location"><span>Location"&/span> San Francisco"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> 15"#div> "#div> <div class="map"> <img alt="A map of Grand Old Mansion" src="https:"$""%" width="150" height="150"> "#div> "#article> <article class="rental"> <button class="image" type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="detail location"><span>Location"&/span> San Francisco"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> 15"#div> "#div> <div class="map"> <img alt="A map of Grand Old Mansion" src="https:"$""%" width="150" height="150"> "#div> "#article> <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
12. app/components/rental.hbs <article class="rental"> <button class="image" type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mansion"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mansion"#a>"#h3> <div class="detail owner"><span>Owner"&/span> Veruca Salt"#div> <div class="detail type"><span>Type"&/span> Standalone"#div> <div class="detail location"><span>Location"&/span> San Francisco"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> 15"#div> "#div> <div class="map"> <img alt="A map of Grand Old Mansion" src="https:"$""%" width="150" height="150"> "#div> "#article> <li> "#li> <li> app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
13. <article class="rental"> <button class="image" type="button"> <img src="{{@img}}" alt="A picture of {{@title}}"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="{{@url}}">{{@title}}"#a>"#h3> <div class="detail owner"><span>Owner"&/span> {{@owner}}"#div> <div class="detail type"><span>Type"&/span> {{@type}}"#div> <div class="detail location"><span>Location"&/span> {{@location}}"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> {{@bedrooms}}"#div> "#div> <div class="map"> <img alt="A map of {{@title}}" src="{{@map}}" width="150" height="150"> "#div> "#article> app/components/rental.hbs <li> "#li> <li> app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
14. <article class="rental"> <button class="image" type="button"> <img src="{{@img}}" alt="A picture of {{@title}}"> <small>View Larger"#small> "#button> <div class="details"> <h3><a href="{{@url}}">{{@title}}"#a>"#h3> <div class="detail owner"><span>Owner"&/span> {{@owner}}"#div> <div class="detail type"><span>Type"&/span> {{@type}}"#div> <div class="detail location"><span>Location"&/span> {{@location}}"#div> <div class="detail bedrooms"><span>Number of bedrooms"&/span> {{@bedrooms}}"#div> "#div> <div class="map"> <img alt="A map of {{@title}}" src="{{@map}}" width="150" height="150"> "#div> "#article> app/components/rental.hbs <li> <Rental @title="Grand Old Mansion" @owner="Veruca Salt" @type="Standalone" @location="San Francisco" @bedrooms="15" @url="/rentals/grand-old-mansion" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Urban Living" @owner="Mike Teavee" @type="Community" @location="Seattle" @bedrooms="1" app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
15. <Rental"(Image "' RFC #457 Nested Invocations in Angle Bracket Syntax
16. <img ""%attributes> RFC #311 Angle Bracket Invocation
17. {{yield}}
18. {{yield to="header"}} RFC #460 Yieldable Named Blocks soon!
19. {{#if @isAdmin}} <button>Delete"#button> {{/if}}
20. {{#if (or @isAuthor @isAdmin)}} <button>Delete"#button> {{/if}} RFC #562 Adding Logical Operators To Templates soon!
21. z
22. HTML-First HIGHLIGHT #1 For the ambitious markup developer.
23. OCTANE: A PARADIGM SHIFT IN EMBERJS TODAY AT 11:30 AM · WITH SUCHITA DOSHI
24. Integrating JavaScript HIGHLIGHT #2 E!ortless reactivity.
25. <a href="https:"$twitter.com/intent/tweet? url=https%3A%2F%2Fsuper-rentals-tutorial.com%2Frentals%2Fgrand-old-mansion&amp; text=Check+out+Grand+Old+Mansion+on+Super+Rentals%21&amp; hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals&amp; via=emberjs" target="_blank" rel="external nofollow noopener noreferrer" class="share button"> Share on Twitter "#a> app/components/share-button.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text">
26. app/components/share-button.js <a href="https:"$twitter.com/intent/tweet? url=https%3A%2F%2Fsuper-rentals-tutorial.com%2Frentals%2Fgrand-old-mansion& text=Check+out+Grand+Old+Mansion+on+Super+Rentals%21&amp; hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals&amp; via=emberjs" target="_blank" rel="external nofollow noopener noreferrer" class="share button"> Share on Twitter "#a> app/components/share-button.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text">
27. app/components/share-button.js <a href="https:"$twitter.com/intent/tweet? url=https%3A%2F%2Fsuper-rentals-tutorial.com%2Frentals%2Fgrand-old-mansion& text=Check+out+Grand+Old+Mansion+on+Super+Rentals%21&amp; hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals&amp; via=emberjs" target="_blank" rel="external nofollow noopener noreferrer" class="share button"> Share on Twitter "#a> app/components/share-button.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> import Component from '@glimmer/component'; export default class ShareButtonComponent extends Component { get shareURL() { let url = new URL('https:"$twitter.com/intent/tweet'); url.searchParams.set('url', window.location.href); if (this.args.text) { url.searchParams.set('text', this.args.text); } if (this.args.hashtags) { url.searchParams.set('hashtags', this.args.hashtags); } if (this.args.via) { url.searchParams.set('via', this.args.via); } return url; } }
28. import Component from '@glimmer/component'; export default class ShareButtonComponent extends Component { get shareURL() { let url = new URL('https:"$twitter.com/intent/tweet'); url.searchParams.set('url', window.location.href); if (this.args.text) { url.searchParams.set('text', this.args.text); } if (this.args.hashtags) { url.searchParams.set('hashtags', this.args.hashtags); } if (this.args.via) { url.searchParams.set('via', this.args.via); } return url; } } app/components/share-button.js <a href="{{this.shareURL}}" target="_blank" rel="external nofollow noopener noreferrer" class="share button"> Share on Twitter "#a> app/components/share-button.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place to stay."#p> <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text">
29. import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; export default class RentalImageComponent extends Component { @tracked isLarge = false; toggleSize() { this.isLarge = !this.isLarge; } } app/components/rental/image.js {{#if this.isLarge}} <button type="button" class="image large"> <img ""%attributes> <small>View Smaller"#small> "#div> {{else}} <button type="button" class="image"> <img ""%attributes> <small>View Larger"#small> "#div> {{/if}} app/components/rental/image.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mans <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mans <div class="detail owner"><span>Owner"&/span> Veruca Sa <div class="detail type"><span>Type"&/span> Standalone"
30. import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; export default class RentalImageComponent extends Component { @tracked isLarge = false; toggleSize() { this.isLarge = !this.isLarge; } } app/components/rental/image.js {{#if this.isLarge}} <button type="button" class="image large"> <img ""%attributes> <small>View Smaller"#small> "#div> {{else}} <button type="button" class="image"> <img ""%attributes> <small>View Larger"#small> "#div> {{/if}} app/components/rental/image.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mans <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mans <div class="detail owner"><span>Owner"&/span> Veruca Sa <div class="detail type"><span>Type"&/span> Standalone"
31. AUTOTRACKING: REACTIVITY AND STATE IN MODERN EMBER TOMORROW AT 9:30 AM · WITH CHRIS GARRETT
32. Working
 With The DOM HIGHLIGHT #3 Interactions made simple.
33. import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; app/components/rental/image.js {{#if this.isLarge}} <button type="button" class="image large" <img ""%attributes> <small>View Smaller"#small> "#div> {{else}} <button type="button" class="image" <img ""%attributes> <small>View Larger"#small> "#div> {{/if}} app/components/rental/image.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mans <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mans <div class="detail owner"><span>Owner"&/span> Veruca Sa <div class="detail type"><span>Type"&/span> Standalone" export default class RentalImageComponent extends Component { @tracked isLarge = false; this.isLarge = !this.isLarge; } } toggleSize() { > >
34. import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; app/components/rental/image.js {{#if this.isLarge}} <button type="button" class="image large" <img ""%attributes> <small>View Smaller"#small> "#div> {{else}} <button type="button" class="image" <img ""%attributes> <small>View Larger"#small> "#div> {{/if}} app/components/rental/image.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mans <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mans <div class="detail owner"><span>Owner"&/span> Veruca Sa <div class="detail type"><span>Type"&/span> Standalone" export default class RentalImageComponent extends Component { @tracked isLarge = false; this.isLarge = !this.isLarge; } } toggleSize() { > > @action import { action } from '@ember/object';
35. import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; app/components/rental/image.js {{#if this.isLarge}} <button type="button" class="image large" <img ""%attributes> <small>View Smaller"#small> "#div> {{else}} <button type="button" class="image" <img ""%attributes> <small>View Larger"#small> "#div> {{/if}} app/components/rental/image.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mans <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mans <div class="detail owner"><span>Owner"&/span> Veruca Sa <div class="detail type"><span>Type"&/span> Standalone" export default class RentalImageComponent extends Component { @tracked isLarge = false; this.isLarge = !this.isLarge; } } toggleSize() { > > {{on "click" this.toggleSize}} {{on "click" this.toggleSize}} @action import { action } from '@ember/object';
36. import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class RentalImageComponent extends Component { @tracked isLarge = false; @action toggleSize() { this.isLarge = !this.isLarge; } } app/components/rental/image.js {{#if this.isLarge}} <button type="button" class="image large" > <img ""%attributes> <small>View Smaller"#small> "#div> {{else}} <button type="button" class="image" > <img ""%attributes> <small>View Larger"#small> "#div> {{/if}} app/components/rental/image.hbs {{on "click" this.toggleSize}} {{on "click" this.toggleSize}} <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a place <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Mans <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Mans <div class="detail owner"><span>Owner"&/span> Veruca Sa <div class="detail type"><span>Type"&/span> Standalone"
37. <div class="rentals">"#div> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <Rental @title="Grand Old Mansion" @owner="Veruca Salt" @type="Standalone" @location="San Francisco" @bedrooms="15" @url="/rentals/grand-old-mansion" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Urban Living" @owner="Mike Teavee" @type="Community" @location="Seattle" @bedrooms="1" @url="/rentals/urban-living" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Downtown Charm" @owner="Violet Beauregarde" @type="Community" app/templates/index.hbs <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
38. <div class="rentals">"#div> <label> <span>Where would you like to stay?"#span> <input class="light" type="text" "#label> <ul class="results"> <li> <Rental @title="Grand Old Mansion" @owner="Veruca Salt" @type="Standalone" @location="San Francisco" @bedrooms="15" @url="/rentals/grand-old-mansion" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Urban Living" @owner="Mike Teavee" @type="Community" @location="Seattle" @bedrooms="1" @url="/rentals/urban-living" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Downtown Charm" @owner="Violet Beauregarde" @type="Community" app/templates/index.hbs > <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
39. <div class="rentals">"#div> <label> <span>Where would you like to stay?"#span> <input class="light" type="text" "#label> <ul class="results"> <li> <Rental @title="Grand Old Mansion" @owner="Veruca Salt" @type="Standalone" @location="San Francisco" @bedrooms="15" @url="/rentals/grand-old-mansion" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Urban Living" @owner="Mike Teavee" @type="Community" @location="Seattle" @bedrooms="1" @url="/rentals/urban-living" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Downtown Charm" @owner="Violet Beauregarde" @type="Community" app/templates/index.hbs > autofocus <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
40. <div class="rentals">"#div> <label> <span>Where would you like to stay?"#span> <input class="light" type="text" "#label> <ul class="results"> <li> <Rental @title="Grand Old Mansion" @owner="Veruca Salt" @type="Standalone" @location="San Francisco" @bedrooms="15" @url="/rentals/grand-old-mansion" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Urban Living" @owner="Mike Teavee" @type="Community" @location="Seattle" @bedrooms="1" @url="/rentals/urban-living" @img="https:"$""%" @map="https:"$""%" "' "#li> <li> <Rental @title="Downtown Charm" @owner="Violet Beauregarde" @type="Community" app/templates/index.hbs > {{autofocus}} import Modifier from 'ember-modifier'; export default class AutofocusModifier extends Modifier { didInstall() { this.element.focus(); if (document.activeElement !== this.element) { !$ Make the element focusable then try again. this.element.setAttribute('tabindex', -1); this.element.focus(); } } } app/modifiers/autofocus.js <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contac "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand <div class="detail owner"><span>Owner"&/span> V <div class="detail type"><span>Type"&/span> Sta <div class="detail location"><span>Location"&/s <div class="detail bedrooms"><span>Number of be "#div>
41. {{!!% uses @ember/render-modifiers addon !%}} <div class="animation" app/components/animated-dots.hbs import Component from '@glimmer/component'; import { action } from '@ember/object'; import d3 from 'd3'; export default class AnimatedDotsComponent extends Component { app/components/animated-dots.js <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a plac <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Ma <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Ma <div class="detail owner"><span>Owner"&/span> Veruca <div class="detail type"><span>Type"&/span> Standalon />
42. {{!!% uses @ember/render-modifiers addon !%}} <div class="animation" app/components/animated-dots.hbs import Component from '@glimmer/component'; import { action } from '@ember/object'; import d3 from 'd3'; export default class AnimatedDotsComponent extends Component { app/components/animated-dots.js @action setupAnimation(element) { !$ From https:!$bl.ocks.org/mbostock/3231298 !$ Released under the GNU General Public License, version 3 let width = 960, height = 500; let svg = d3.select(element).append("svg") .attr("width", width) .attr("height", height); let nodes = d3.range(200).map(() => ({ radius: Math.random() * 12 + 4 })), root = nodes[0], color = d3.scale.category10(); root.radius = 0; root.fixed = true; let force = d3.layout.force() .gravity(0.05) .charge(function(d, i) { return i ? 0 : -2000; }) .nodes(nodes) .size([width, height]); force.start(); <div class="container"> <nav class="menu"> <a href="/" class="active menu-index"><h1>SuperRentals"#h1>"#a> <div class="links"> <a href="/about" class="menu-about">About"#a> <a href="/getting-in-touch" class="menu-contact">Contact"#a> "#div> "#nav> <div class="body"> <div class="jumbo"> <div class="right tomster">"#div> <h2>Welcome to Super Rentals!"#h2> <p>We hope you find exactly what you're looking for in a plac <a href="/about" class="button">About Us"#a> "#div> <div class="rentals"> <label> <span>Where would you like to stay?"#span> <input class="light" type="text"> "#label> <ul class="results"> <li> <article class="rental"> <button class="image " type="button"> <img src="https:"$""%" alt="A picture of Grand Old Ma <small>View Larger"#small> "#button> <div class="details"> <h3><a href="/rentals/grand-old-mansion">Grand Old Ma <div class="detail owner"><span>Owner"&/span> Veruca <div class="detail type"><span>Type"&/span> Standalon {{did-insert this.setupAnimation}} />
43. {{!!% uses ember-ref-modifier addon !%}} <div class="video-container"> <video ""%attributes src="{{@src}}" <button type="button" {{on "click" this.play}}>Play"#button> "#div> app/components/video-player.hbs import Component from '@glimmer/component'; import { action } from '@ember/object'; export default class VideoPlayerComponent extends Component { @action play() { } } app/components/video-player.js !$ !!&? />
44. {{!!% uses ember-ref-modifier addon !%}} <div class="video-container"> <video ""%attributes src="{{@src}}" <button type="button" {{on "click" this.play}}>Play"#button> "#div> app/components/video-player.hbs import Component from '@glimmer/component'; import { action } from '@ember/object'; export default class VideoPlayerComponent extends Component { @action play() { } } app/components/video-player.js !$ !!&? /> {{ref this "videoElement"}}
45. {{!!% uses ember-ref-modifier addon !%}} <div class="video-container"> <video ""%attributes src="{{@src}}" <button type="button" {{on "click" this.play}}>Play"#button> "#div> app/components/video-player.hbs import Component from '@glimmer/component'; import { action } from '@ember/object'; export default class VideoPlayerComponent extends Component { @action play() { } } app/components/video-player.js /> {{ref this "videoElement"}} this.videoElement.play();
46. Working
 With The DOM HIGHLIGHT #3 Interactions made simple.
47. Into The Future WHAT'S NEXT? Building Ember, together.
48. EMBERJS 2019-2020 ROADMAP Invest in Octane Modernize our build system Better accessibility by default Share Octane outside our community
49. WHY JS IS COMING TO EMBER TEMPLATES TODAY AT 5:00 PM · WITH MATTHEW BEALE
50. “Compiling Ember” by Edward Faulkner
51. BUILDING EMBERJS TOGETHER Get involved Issues, PRs and RFCs Addons and tooling Teaching and outreach
52. WHY CONTRIBUTING SEEMS SCARY TOMORROW AT 5:00 PM · WITH ANNE-GREETH VAN HERWIJNEN
54. Melanie Sumner We are building it together. We are the together framework.