Virtual EmberConf 2020: Platform State of the Union

Virtual EmberConf 2020: Platform State of the Union

22bb3e56828870ee9a0dd93aeadbe04a?s=128

Godfrey Chan

March 17, 2020
Tweet

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
  53. None
  54. Melanie Sumner We are building it together. We are the

    together framework.
  55. None
  56. None