Virtual EmberConf 2020: Platform State of the Union

PLATFORM STATE OF THE UNION

HTML-First HIGHLIGHT #1 For the ambitious markup developer.

<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>

!!" * 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>

AN EMBER DEV'S GUIDE TO CSS GRID TOMORROW AT 1:30
PM · WITH JAMES STEINBACH

<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>

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>

<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>

<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>

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>

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>

<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>

<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>

<Rental"(Image "' RFC #457 Nested Invocations in Angle Bracket Syntax

<img ""%attributes> RFC #311 Angle Bracket Invocation

{{yield to="header"}} RFC #460 Yieldable Named Blocks soon!

{{#if @isAdmin}} <button>Delete"#button> {{/if}}

{{#if (or @isAuthor @isAdmin)}} <button>Delete"#button> {{/if}} RFC #562 Adding Logical
Operators To Templates soon!

HTML-First HIGHLIGHT #1 For the ambitious markup developer.

OCTANE: A PARADIGM SHIFT IN EMBERJS TODAY AT 11:30 AM
· WITH SUCHITA DOSHI

Integrating JavaScript HIGHLIGHT #2 E!ortless reactivity.

<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& hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals& 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">

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& hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals& 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">

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& hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals& 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; } }

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">

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"

AUTOTRACKING: REACTIVITY AND STATE IN MODERN EMBER TOMORROW AT 9:30
AM · WITH CHRIS GARRETT

Working  With The DOM HIGHLIGHT #3 Interactions made simple.

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() { > >

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';

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';

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"

<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>

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>

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>

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>

{{!!% 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 />

{{!!% 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}} />

{{!!% 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 !$ !!&? />

<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"}}

<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();

Working  With The DOM HIGHLIGHT #3 Interactions made simple.

Into The Future WHAT'S NEXT? Building Ember, together.

EMBERJS 2019-2020 ROADMAP Invest in Octane Modernize our build system
Better accessibility by default Share Octane outside our community

WHY JS IS COMING TO EMBER TEMPLATES TODAY AT 5:00
PM · WITH MATTHEW BEALE

“Compiling Ember” by Edward Faulkner

BUILDING EMBERJS TOGETHER Get involved Issues, PRs and RFCs Addons
and tooling Teaching and outreach

WHY CONTRIBUTING SEEMS SCARY TOMORROW AT 5:00 PM · WITH
ANNE-GREETH VAN HERWIJNEN

Melanie Sumner We are building it together. We are the
together framework.

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

Virtual EmberConf 2020: Platform State of the Union

More Decks by Godfrey Chan

Other Decks in Programming

Featured

Transcript