Skip to content

Commit

Permalink
2023 files (#47)
Browse files Browse the repository at this point in the history
* 2023 files
  • Loading branch information
MelSumner committed Dec 4, 2023
1 parent 0f8c8ef commit b78a91a
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 7 deletions.
1 change: 1 addition & 0 deletions app/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,6 @@ Router.map(function () {

this.route('addons', function () {
this.route('2021');
this.route('2023');
});
});
13 changes: 13 additions & 0 deletions app/routes/addons/2023.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Route from '@ember/routing/route';

export default class Addons2023Route extends Route {
async model() {
let response = await fetch('/data/2023-addons.json');

let data = await response.json();

return {
addons: data,
};
}
}
18 changes: 18 additions & 0 deletions app/templates/addons/2023.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{{page-title "Awesome Ember Addons, 2023 Edition"}}

<article>
<p class="intro">There are a lot of awesome Ember addons that help making an Ember app easier than ever. While <a href="https://emberobserver.com/" target="_blank" rel="external noopener noreferrer">Ember Observer</a> tracks the <em>most used</em> addons, this is a list of the addons that are both not in the default build of an Ember app and also bring us joy. We don't use them because we necessarily have to, we use them because we want to!</p>

<p class="intro">Just in time for 12 days of your favorite holiday, here are 12 of the Ember addons that brought us joy!</p>

<h2>12 days of Ember: 2023 best-loved addon list</h2>
<WeGrid as |G|>
{{#each @model.addons as |addon|}}
<WeGridItem @addonName={{addon.addonName}} @addonNum={{addon.addonNum}} @addonUrl={{addon.addonUrl}} @updateCurrentVisible={{G.updateCurrentVisible}} @currentVisible={{G.currentVisible}}>
{{!-- template-lint-disable no-triple-curlies --}}
<p>{{{addon.description}}}</p>
{{!-- template-lint-enable no-triple-curlies --}}
</WeGridItem>
{{/each}}
</WeGrid>
</article>
3 changes: 1 addition & 2 deletions app/templates/application.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
<nav>
<ul class="nav-ul">
<li><LinkTo @route="index">Home</LinkTo></li>
<li><LinkTo @route="addons.2021">Awesome Addons</LinkTo></li>
<li><LinkTo @route="ember-for-react-developers">Ember For React Devs</LinkTo></li>
<li><LinkTo @route="addons.2023">Amazing Addons</LinkTo></li>
</ul>
</nav>
<h1>Why Ember?</h1>
Expand Down
10 changes: 5 additions & 5 deletions app/templates/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<article>
<p class="intro">Ember is a JavaScript framework that provides everything you need to build a modern web application. While there are lots of reasons to use Ember, the number one reason is this: you'll gain developer productivity by escaping the churn of the hype cycle.</p>

<WeQuote @quoteText="With Ember, I don't need to worry about the little things. My time is spent focused on the behavior of my application, not things like what state management library I should use or how I should structure my app. These are conversations I no longer need to have!" @cite="Jai Bhagat, Software Engineer" @citeUrl="https://twitter.com/ChaiWithJai" />
<WeQuote @quoteText="With Ember, I don't need to worry about the little things. My time is spent focused on the behavior of my application, not things like what state management library I should use or how I should structure my app. These are conversations I no longer need to have!" @cite="Jai Bhagat, Software Engineer" @citeUrl="https://github.com/ChaiWithJai" />

<h2>The Benefits of Ember</h2>
<dl class="we-card__container">
Expand Down Expand Up @@ -37,7 +37,7 @@

</dl>

<WeQuote @quoteText="The EmberJS community is what makes Ember special. Not only does the community provide help and support for the technology, it sets a tone and shapes a culture that is intentional and invested in long term success and stability. Those core values permeate everything else." @cite="Mason Hale, CEO" @citeUrl="https://twitter.com/masonhale/status/1464662847347171335" />
<WeQuote @quoteText="The EmberJS community is what makes Ember special. Not only does the community provide help and support for the technology, it sets a tone and shapes a culture that is intentional and invested in long term success and stability. Those core values permeate everything else." @cite="Mason Hale, CEO" @citeUrl="https://www.linkedin.com/in/masonhale/" />

<h2 class="border-bottom">Watch The Documentary</h2>

Expand All @@ -48,9 +48,9 @@

<iframe class="iframe-video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/Cvz-9ccflKQ" title="YouTube video player: EmberJS the documentary by Honeypot" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<WeQuote @quoteText="Why Ember? Because the conventions get you building quickly and flexibility allows you to break conventions when necessary. Built-in testing, upgrade paths, and backwards compatibility are great for professionals who want to build robust, stable, and future-proof web applications. Top it off with strong community support and I'm all set." @cite="Sean Massa" @citeUrl="https://twitter.com/endangeredmassa" />
<WeQuote @quoteText="Why Ember? Because the conventions get you building quickly and flexibility allows you to break conventions when necessary. Built-in testing, upgrade paths, and backwards compatibility are great for professionals who want to build robust, stable, and future-proof web applications. Top it off with strong community support and I'm all set." @cite="Sean Massa" @citeUrl="https://github.com/endangeredmassa" />

<WeQuote @quoteText="Ember continues to be a great choice for building complex apps that are meant to last. I've seen many teams excel on it and evolve their code bases over many years without much friction – not necessarily a common sight in the industry. Happy Birthday – on to the next 10 years!" @cite="Marco Otte-Witte, Founder & Managing Director, Simplabs" @citeUrl="https://twitter.com/marcoow/status/1468583006843674629" />
<WeQuote @quoteText="Ember continues to be a great choice for building complex apps that are meant to last. I've seen many teams excel on it and evolve their code bases over many years without much friction – not necessarily a common sight in the industry. Happy Birthday – on to the next 10 years!" @cite="Marco Otte-Witte, Founder & Managing Director, Mainmatter" @citeUrl="https://github.com/marcoow" />

<h2 class="border-bottom">Official Resources</h2>

Expand All @@ -63,6 +63,6 @@
<li><a href="https://embertimes.substack.com/" rel="external">The Ember Times</a>: subscribe to The Ember Times, your source for Ember news.</li>
</ul>

<WeQuote @quoteText="To me, Ember is the together framework. The long-term stability gives me confidence that I will continue to be productive. The appeal is in the ability to participate and not only make ideas happen, but make room for others, too." @cite="Melanie Sumner, Accessibility Engineer" @citeUrl="https://twitter.com/melaniersumner" />
<WeQuote @quoteText="To me, Ember is the together framework. The long-term stability gives me confidence that I will continue to be productive. The appeal is in the ability to participate and not only make ideas happen, but make room for others, too." @cite="Melanie Sumner, Accessibility Engineer" @citeUrl="https://github.com/MelSumner" />

</article>
71 changes: 71 additions & 0 deletions public/data/2023-addons.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
[
{
"addonName": "ember-a11y-refocus", "addonNum": "1", "addonUrl": "https://github.com/ember-a11y/ember-a11y-refocus", "description": "This addon provides accessible route navigation for your Ember app! It has lots of features that all add up to an easy win for improved WCAG conformance in your application."
},
{
"addonName": "ember-a11y-testing",
"addonNum": "2",
"addonUrl": "https://github.com/ember-a11y/ember-a11y-testing",
"description": "This addon is a wrapper around Deque Labs' axe-core accessibility testing engine. It integrates into your testing environment using either a one-time setup, or in individual tests using an a11yAudit() test helper."
},
{
"addonName": "ember-intl",
"addonNum": "3",
"addonUrl": "https://github.com/ember-intl/ember-intl",
"description": "This is a localization library for any Ember App or Addon- it makes it easier to extend the global reach of your app! Look for supporting addons that will check for translation string duplicates, too."
},
{
"addonName": "ember-responsive-images",
"addonNum": "4",
"addonUrl": "https://github.com/simonihmig/ember-responsive-image",
"description": "Automatically generate resized images at build-time, optimized for the responsive web, and using components to render them easily as picture elements."
},
{
"addonName": "ember-web-app",
"addonNum": "5",
"addonUrl": "https://github.com/zonkyio/ember-web-app",
"description": "This Ember addon helps you configure and manage the Web App Manifest to create Progressive Web Apps (PWA)."
},
{
"addonName": "ember-animate-css",
"addonNum": "6",
"addonUrl": "https://github.com/sinankeskin/ember-animate-css",
"description": "If you prefer working in templates, and you love pure CSS animations, look no further!"
},
{
"addonName": "ember-animated",
"addonNum": "7",
"addonUrl": "https://github.com/ember-animation/ember-animated",
"description": "This addon adds animation with minimal changes to your existing application code. It's relatively straight-forward to implement and won't get in the way of accessible routing."
},
{
"addonName": "ember-template-imports",
"addonNum": "8",
"addonUrl": "https://github.com/ember-template-imports/ember-template-imports",
"description": "This addon provides the build tooling required to support Ember's next-gen component authoring format: using &lt;template> to allow authoring JavaScript or TypeScript in the same file as templates, while keeping a clear separation between the template language and the JavaScript around it."
},
{
"addonName": "glint",
"addonNum": "9",
"addonUrl": "https://github.com/typed-ember/glint",
"description": "Ok it's not an addon exactly, but we love it so much we had to include it! Glint is a set of tools to aid in developing code that uses the Glimmer VM for rendering, such as Ember.js v3.24+ and GlimmerX projects. Similar to Vetur for Vue projects or Svelte Language Tools, Glint consists of a CLI and a language server to provide feedback and enforce correctness both locally during editing and project-wide in CI."
},
{
"addonName": "ember-heroicons",
"addonNum": "10",
"addonUrl": "https://github.com/tzellman/ember-heroicons",
"description": "This addon makes it super simple to use heroicons in your Ember app! Not only do they render to SVGs, they also prevent potential accessibility issues by adding the aria-hidden attribute! I approve!"
},
{
"addonName": "ember-apply",
"addonNum": "11",
"addonUrl": "https://github.com/NullVoxPopuli/ember-apply",
"description": "Want to use Tailwind in your app but don't want to figure out how to set it up? What about automating the embroider migration from the classic ember build system? This addon is for you!"
},
{
"addonName": "ember-cp-validations",
"addonNum": "12",
"addonUrl": "https://github.com/adopted-ember-addons/ember-cp-validations",
"description": "This addon has so many personal recommendations, I lost track! It provides computed property-based validations...without observers (probably why I lost track, haha!)"
}
]

0 comments on commit b78a91a

Please sign in to comment.