Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Virtual EmberConf 2020: Platform State of the U...

Virtual EmberConf 2020: Platform State of the Union

Godfrey Chan

March 17, 2020
Tweet

More Decks by Godfrey Chan

Other Decks in Programming

Transcript

  1. <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>
  2. <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>
  3. !!" * 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>
  4. <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>
  5. 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>
  6. <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>
  7. <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>
  8. 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>
  9. 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>
  10. <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>
  11. <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>
  12. z

  13. <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">
  14. 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">
  15. 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; } }
  16. 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">
  17. 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"
  18. 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"
  19. 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() { > >
  20. 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';
  21. 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';
  22. 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"
  23. <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>
  24. <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>
  25. <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>
  26. <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>
  27. {{!!% 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 />
  28. {{!!% 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}} />
  29. {{!!% 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 !$ !!&? />
  30. {{!!% 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"}}
  31. {{!!% 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();
  32. EMBERJS 2019-2020 ROADMAP Invest in Octane Modernize our build system

    Better accessibility by default Share Octane outside our community