• Fast-track to Solid Ember Foundations
    This quick run through will get you setup with a new ember app, using pods structure, TailwindCSS, and PostCSS in no time, flat. Everything is TL;DR. Bonus PurgeCSS setup. Enjoy! Initialization ember new {name} This initializes the directory and all dependencies for getting started. cd {name} yarn install Will install dependencies for application. Newer versions of ember-cli should use yarn by default, but in older versions you may need to pass --yarn true to your...
    Read more...

  • Pods in Ember
    Once upon a time (2016), we heard that pods and classical structured Ember projects would form a new union and there would no longer be a divide1. Unfortunately, since then, nothing has changed and the divide continues. So if you’re starting a new Ember app and are ready to try (or already using) pods structure, then here is a quick how to. New project I wish there was a way to ember new --pods {my-project}...
    Read more...

  • Just Beginning: JSON API with Phoenix 1.3
    I can’t remember the last time I dabbled with Phoenix. Whenever it was, I was messing with channels and all the real time goodness. This year at Elixir Conf I heard about a lot of new changes in Phoenix from Chris McCord and sure enough, when I sat down to create a Phoenix JSON API, most of the tutorials and examples I found were outdated. Phoenix 1.3 was released in July and with it came...
    Read more...

  • Inline SVG with Ember-Concurrency
    SVG is a vector graphic that scales well and is great for vibrant user interfaces. This post doesn’t go into SVG per se, but there is a great article on SVG and it’s application in Web Development over at CSS Tricks. SVG and Ember make for an exciting pair. Binding values and responding to events with SVG and Ember components just works and can create beautiful, fast, and responsive interfaces, easily. There was just a...
    Read more...

  • Video: Pieces of Ember
    At the July monthly SanDiego.js event I gave a quick lightning talk about the different pieces of Ember that can be used outside of the Ember ecosystem. As a follow up, I am also doing a three part series on the topic through the DockYard Blog. The first part covers in full RSVP and Broccoli, while the remaining parts will cover routing and templating.
    Read more...

  • Scope jQuery Selection
    Here is a simple and effective way to pass different jQuery contexts around for manipulation in client packages. Recently I was presented with the issue of instantiating multiple iframes within a single page, all of which would have a small package loaded inside them to run and manipulate itself. These packaged units needed a handle on their own iframe as well as the parent document. $ is setup to work off the current document. When...
    Read more...

  • Ember Facebook Components
    Getting Facebook integrated into an existing website may sound daunting but using the Facebook UI API and Ember together was entirely too easy. Ember-CLI has a directory called initializers that are loaded at app start up. This proves useful for things such as Google Analytics or Facebook SDK initialization. Here is what my facebook-sdk.js initializer looks like. Note the use of global FB. This is used so that JSHint doesn’t freak out when building the...
    Read more...

  • Ember-CLI, Sass, and Bootstrap
    Warning: Ember-CLI is still undergoing heavy construction. All of the posts I have read through are often soon out-dated, as this could likely be. Please note the versions I am using to make sure this is the resource you are looking for. This post is a response to a comment from the Ember.js Wysiwyg Summernote post. Working with vendor libraries and ES6 modules and a build system like Broccoli should be relatively straight forward, and...
    Read more...

  • Ember.js Theme for Reveal.js
    In the process of working on my presentation for QConSF I pulled out some styling from the official Ember.js website and created a theme for Reveal.js out of it. I really enjoy using Reveal.js for my presentations because it allows me to display code side-by-side with working or interactive examples. It also allows me to easily embed media and work in a format that I am familiar with. It is also extremely convenient to host...
    Read more...

  • Video: Intro to JavaScript
    SanDiego.js happily participated in Geek Girl Tech Conference again this year in July. I was asked to provide an “Introduction to JavaScript” session and had some fun putting it together as well as presenting it. The crowd experience was mostly beginners or no-programming-experience-at-all-ers, but there were some other presenters in attendance as well. Those are Adventure Time leggings, if you were wondering. The repository for this presentation is at hbrysiewicz/geekgirl-js.
    Read more...

  • Ember.js Image-Zoom and Preview Components
    Recently I was tasked in creating a large photo plotting tool. Part of this was the ability to preview a zoomed in portion of the full image to ensure the plotted point was in an accurate position. There are two components I’ll be talking about here that are using data bound in the controller between the both of them. One is the full-image preview and the other the zoomed-image preview. The Component Templates …Are pretty...
    Read more...

  • Video: Fake It Til You Make It
    For the July 2014 SanDiego.js speaker Meetup I gave a lightning talk on Pretender, a mock server microlibrary written by @trek. Its much lighter than its counterparts and easy to get up and running with fast. In my opinion, the server DSL looks similar to express. All of the examples are done with Ember.js. The repository for the slides with examples are at hbrysiewicz/sdjs-pretender.
    Read more...

  • Ember.js Ace Editor Component
    A few weeks ago there was a need to interface directly with raw json from the server. I immediately jumped on the chance to make an Ace Editor component for Ember.js. I have been wanting to work with Ace for a while now and as expeted, getting setup with it was smooth much like integrating it with an Ember.Component. Ember.js Ace Editor Component The Component Similar to the Summernote Wysiwyg Ember.js Component I discussed earlier...
    Read more...

  • Ember.js Wysiwyg Component with Summernote
    Users love wysiwyg editors. Summernote has been my favorite to work with as a developer yet. Getting it hooked up as an Ember component was simple and fun, and the end result was rather nice. Ember Wysiwyg Component The Component All this does is wrap the basic Ember.TextArea. This example is rather bare to keep things simple but depending on the use-case the component and its logic could expand quite a bit. For example, when...
    Read more...

  • Ember.js Color Picker - Spectrum.js, HEX and RGB
    I realized this week I have ‘officially’ been paid to make Ember.js apps for 13 months now. That is a long time considering the infancy of Ember.js. One of the first things I did that was fun and exciting was making a color picker, using Spectrum, that kept the hex, rgb, and color-picker in sync. The Template Inside of the component template there is a div to represent the color picker with the style attribute...
    Read more...

  • Hello, Bunny
    I am finally getting around to setting up my own blog. I feel that far too often I find myself working on something that would be useful to reference or that may make someone else’s developing life a bit easier. My hesitation has been partly due to time commitment as well as quality of posts but I’ve accepted I won’t get better at posting unless I try. As an introduction post I don’t want to...
    Read more...