Forem: Joe L. Wroten

Non-Ember Things in Ember

Joe L. Wroten — Thu, 26 Apr 2018 00:00:00 +0000

The Ember community is great and full of great ember-cli friendly addons to add to your project. Using Redux? Check out ember-redux. Need FastClick? Check out... well, actually your best bet is ember-hammertime but you get the point.

But sometimes you just need to incorporate something that isn't Ember ready. Today that's easier than ever!

Show Me

In this example we'll be adding url-polyfill to our Ember app. I know ember-url is out there but it lacks some of the functionality url-polyfill offers.

yarn add url-polyfill or npm install --save url-polyfill
In your ember-cli-build.js within the module.exports = function() { add the following...

app.import('node_modules/url-polyfill/url-polyfill.js');

You're done!

For bonus points, you can even configure which import you use based on the environment...

app.import({
  development: 'PATH/file.js',
  production: 'PATH/file.min.js',
});

This also works with css files to bring in your favorite CSS framework, animation library or other tool. If you're still using bower, simply point your import path to bower_components/DEPENDENCY/FILE.EXT.

But, wait, I have some setup I need to do!

That's cool too! An initializer is likely what you'll want.

ember generate initializer myInitializer

Then within there you can run any initialization code your heart desires and it'll run at app load.

Want to go further?

Make an ember-addon for your favorite tool and publish it on npm! The community would appreciate it and love the easy of an ember install.

Go make great things. Or... combine great things into an even greater thing!

Faster Test Suites, Less Code, Embracing Writing Addons.

Joe L. Wroten — Fri, 17 Nov 2017 06:06:38 +0000

Less code, a faster test suite, and a tighter focus on core functionality can be achieved through embracing open source. Ember addons are on point in delivering such a promise as I've learned while open sourcing a widely used component at work.

The key is a separation of concerns. Modifying code rebuilds the app and, before shipping, all tests must be verified again regardless of what the modifcations touch. Moving chunks of an app, such as a component, to an open source addon grants all the benefits that come with code isolation. Admittedly similar can be achieved with careful abstraction and no open source, but I feel it's the right direction for myself and likely others to aim for.

Less code a developer must retain in their heads the easier they may reason about the way an app flows. A well tested and well documented addon promises a level of functionality not often afforded by yet another file to be debugged within the app. While addon code eventually gets compiled into the final output, I've found the act of isolating code into an addon forces me to code more concisely and clearly for public consumption. Without the goal of open sourcing the addon I may cut corners thinking "it's just for me, no big deal" which can do more harm than good longterm.

Faster test suite runs, without the cost of coverage, comes isolating tests to separate addon projects. This goes both ways in fact. Tests get removed from the original app and an addon will have just the tests to cover itself resulting in a quick build and test time. Isolated testing concerns can lead to higher relative code coverage and a quicker feedback loop for test-driven development.

Tighter focus on core functionality arises from the need to isolate an addon's concern to a concise idea. Assigning a name and writing documentation for an addon is a healthy exercise in producing a highly intentional and hopefully valuable addon.

After becoming no longer afraid of the world of open source I've learned to embrace the advantages that come from creating a wide range of projects. Addons are a new and exciting world for me and hopefully for you as well.

Less Blue Light, Better Sleep

Joe L. Wroten — Sat, 02 Sep 2017 00:00:00 +0000

Actively limiting blue light, both artificial and natural, can make you a healthier and happier person. No, really, it can.

Photo by Juil Yoon on Unsplash

Imagine a workday without eye strain or grogginess. Regaining control over your ability to fall asleep comfortably. With some tweaks to daily habits and reducing blue light intake this can be a reality.

What? Why blue light?

Briefly, the more harmful spectrum of light is within a band of blue light. This narrow band of harmful light contributes the most to eye strain and wakefulness. Learn More

On Eye Strain

Sitting for eight or more hours staring at a screen isn't what you're paid for - you're paid to produce results. You can only achieve that if you're healthy. Eye strain can lead to headaches and health problems resulting in your eyes degrading slowly over time.

Get up. Move around.

Take a break from the computer screen. Converse with your colleagues. Avoid eating lunch at your desk. While we're reducing our blue, let's up our green - go outside and see some grass, trees, plants to feel refreshed and revitalized. Some time in the sun can help too.

Filtering Blue Light

Just as there are glasses to protect from the sun, some glasses filter out blue light. Over the counter blue light filtering lenses are available or you may speak with your eye doctor on adding them to your next pair. I personally use blue light filters in my primary pair of glasses and can happily say there is no color noticeable color distortion to disrupt my design work.

UPDATE: Some applications you already use such as Amazon's Kindle book reading service offers dark or sepia themes for reading with reduced eye strain.

Applications like F.lux (or iOS Night Shift, Android Twilight, Linux Redshift and others) allow for removing or reducing the output of blue light from your device. Some of these tools can intelligently fade the amount of blue light based on the time of day or be disabled based on a timer.

On Sleep

Blue light activates "wake up" signals in our brain (what? this isn't a science blog). Avoid these wake up signals 30-60 minutes before bed and you'll not only fall asleep more easily, but you'll be awaken more smoothly without that groggy sensation.

If you're unable to get 30-60 minutes away from a screen before bed then reconsider your nighttime habits. Worse yet, if you're coding late into the night then immediately attempt going to sleep your mind is at its most active state or you could burn yourself out. Instead, consider shutting off the screen a little early and let your mind problem solve during the downtime and while you're sleeping - you'll likely be more productive.

Quality of sleep is far more important than the quantity of sleep you receive. If you're not waking up feeling refreshed then you'll need to reconsider your sleep habits.

For bonus points, cut out caffeine from your diet some or entirely. Avoid eating just before bed and sleep in a dark room without interruptions whenever possible.

Summary

To truly live a healthy work life balance we must take care of ourselves physically and mentally. The quality of sleep we receive drastically affects our moods and health in both the short and long term. Better managing the excess of blue light from our modern world into our lives can result in better sleep and longer lasting good eyesight with fewer health problems.

Enjoy this article? I've also written about What Polyphasic Sleep Taught Me About Passion.

The Great App Store Trials

Joe L. Wroten — Sun, 13 Aug 2017 00:00:00 +0000

Today marks my first day as a published app store developer. It's been a dream of mine to release work I've done not just on the web, but as something native you can put in your pocket without needing a browser. Some stories are of great heroes who overcome dangerous challenges through incredible feats of might; this one is of the problems and solutions of releasing a web app to the Play Store.

Act I: Building the App

I chose the Quasar Framework powered by Vue.js with Cordova mobile conversion built in. Choosing tools that played well together assured me that if I read the documentation and put in the effort I'd eventually succeed.

Release often. Advice I give to anyone and even easier to follow for a hobbyist project. Hit your minimum viable product then release the app to the public.

Problem: Releasing a Web App Cheaply and Easily

I'm no server admin. I've built my app and just wish to see it online for public consumption.

Solution: Netlify

Open Source projects can be automatically deployed and built directly from a Github repo for free to the Netlify servers. Once hosted you get a simple URL to include in your project.

Problem: Bugs

They happen, bugs are a natural part of application development. Keeping a todo list on your computer seems counter to the connected open source world we live in.

Solution: Github Issues

Being transparent in logging bugs has a number of benefits. Github Issues is a great tool for this.

As easy as a todo list.
Great practice, especially if you follow SemVer and write clean commits.
Users know what's busted and have a window into helping to fix the bugs themselves.
Forms a public history for the project while encouraging a changelog as the app evolves.

Act II: Building for Android

Generally Quasar makes compiling for Android easy and enjoyable. Running their mobile dev tools unveiled several mobile specific bugs, which I logged then fixed.

Quasar's easy tools are great for quick feedback but are nothing compared to a real debugging APK running on your phone. Luckily there are docs for wrapping your Quasar app in Cordova.

Problem: Running Cordova Built APK

The documentation drops off quickly after Cordova has done its job.

You find yourself in a wolf's den of opinions and tools in a world of assumed knowledge.

Emulation through Android Studio is possible, but I could never get it to work with my non-Android-Studio app.

Solution: Cordova compile to device.

After some digging, the most successful way to compile to my Android device was:

quasar build from my root.
quasar run --device from the cordova directory while my phone was plugged in with USB Debugging turned on.

This automatically compiles and opens the app on your connected Android device.

P.S. Android Studio may still be required here.

Also... Overcoming USB Debugging

Enabling USB Debugging on modern Android phones is the opposite of obvious. Luckily, this guide to Android USB debugging explains the process.

Also... Overcoming USB Cable Differences

I encountered times where USB debugging refused to work. Turns out some usb cables only transfer power and not data. Use the correct USB cable type to avoid wasted time for silly reasons.

Problem: Local Ajax Calls Don't Work

JSON cannot be fetched locally as we could on Netlify. I did not wish to bake in all of my data on the web app to slow down initial load.

Solution: Bake in data for the app build only.

For my web app, the only concern with baking in data was app size for first load. On mobile that's not a problem. In fact, baking in the data means an even easier offline solution.

I wrote a data processor node script that could either compile my data to a JSON file or to a JS importable module (with export default ...) along with some package.json build scripts to simplify the process during development and releases. In the app, I always import the JS module and if there is data.length > 0 I use it, else I attempt to fetch the JSON file.

It took effort, but assured that my both the web and android app were quick to launch.

ACT III: Publishing

Congratulations! You have an app that runs on Android. Next, you must fumble through the app publishing process. I've done my best to list the steps, problems and solutions below.

Step: You Want Money and My Soul?

First step is registering for a Publisher Account with your Google User. This involves agreeing to many terms of services and paying a fee of $25 that separates you from the potential onslaught of crapware and spam that may otherwise reach the Play Store. Relatively straightforward and a necessary evil to progress.

Problem: Releasable APK file

Up until now we've been using a debugging APK file. That's not good enough for release.

Solution: Cordova Build

cordova build will create an android-release-unsigned.apk that is, as the filename implies, an unsigned but otherwise ready to release APK.

Problem: Signing the APK file

One of the least documented parts of the process is signing the APK outside of a completely Android Studio made app.

Solution: Android App Studio, Keystore, jarsigner

Install Android Studio and launch it
Open an Existing Project... choose the cordova created project directory for the app
Build -> Generate Signed APK
Key Store Path: Create New (follow onscreen prompts)
- Note the place you've saved it, and what the key alias is (key0 is fine)
Close Android Studio, we'll instead use jarsigner to sign our apk:

  jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <~/path/to/keystore.jks> <~/path/to/android-release-unsigned.apk> <KEY ALIAS>

Problem: Installing onto Android Device

Let's get it running on our Android once again, signed and ready to release.

adb install ~/path/to/android-release-signed.apk

Solution: Installing `adb`

adb can be installed from the Android Studio Preferences screen:

Appearance & Behavior > System Settings > Android SDK > SDK Tools
Check Android SDK Build-Tools, Android SDK Platform-Tools, Android SDK Tools
If adb still isn't available, correct your path like so: https://stackoverflow.com/questions/10303639/adb-command-not-found

Now running adb install on your apk will install directly to your device.

Problem: zipalign

While uploading to the Play Store you may see a notice that the apk is not zipaligned.

Solution: zipalign it

Unfortunately this is not a tool we can install by itself, but it does come with Android Studio.

The command we desire to run is something like:

zipalign -v 4 ~/path/to/file.apk ~/path/to/newfile.apk

Replace zipalign with the path to it on your machine, likely under your android studio sdk directory.

Finally we have a signed, zipaligned, releasable APK file ready for the Play Store. Follow the prompts on the site and your app will hopefully be published within a day.

I encourage others to write about their experiences building apps for the Play Store. I'm sure there are simpler ways to achieve the same result with fewer headaches. Ultimately, having a published app on the Play Store is a very satisfying experience and this document will serve as a reminder of the trials I've been through in an attempt to inform others of the problems that may be encountered along the way with some solutions that worked for me.

Stuck with a similar project? Reach out to me on Twitter @SharpShark28

Performance Reviews - You and Your Peers

Joe L. Wroten — Thu, 01 Jun 2017 20:21:25 +0000

You possess something invaluable. Management relies on you to give honest feedback of your coworkers when its time for peer performance reviews.

Perhaps writing a performance review feels boring or mandatory. An empty, white, often-too-small text box with the ask of summarizing a coworker's qualities as an employee can be daunting. Never underestimate its importance, however, just as we see importance in reviewing a peer's code before its added to the project we consider our own, we should equally consider our peers themselves at the company we associate with.

Provide Feedback Often - Not Just On Judgment Day ðŸš«

Imagine you're in a college class. You feel you're doing well. You take your final. Suddenly you're given a failing grade for the course.

Being given poor marks when it's too late isn't fair and doesn't support a healthy culture. Give feedback regularly throughout the year to avoid surprise criticism and give time to improve and fix any critiques you may have.

Write any critique given as with an actionable solution. Instead of "they made me miss the deadline" perhaps "if we communicate better we should be able to make the next deadline as a team".

Questions To Reflect Upon ðŸ’

Below are the questions I consider when reflecting upon my experiences and understanding of a colleague I'm trying to qualify.

Has This Person Ever Made Your Day Easier? ðŸ‘

"Colleague pair programmed with me to solve a difficult problem while teaching me how to debug similar problems in the future."
"Colleague wrote a well documented component that solved my needs and saved me many hours of work."

Acknowledge when a coworker has saved you time, stress, or helped you learn a new skill. These are often selfless offerings from people just looking to help their fellow workers and make the company a better place to work.

Conversely, if an individual has made more days difficult than they have made easier that is an indicator of a problem worth speaking up about.

Has This Person Helped You Grow? ðŸŒ±

"Colleague made me rethink how I approach testing my code."
"Colleague provided a great example of how to reach a work-life balance."

Positive influences, critical thinkers, and industry leaders often surround us at work. It's easy to presume these are already known qualities to everyone. It's important to be explicit and state what may seem obvious to us, but may not be to others such as management.

If you've learned from those around you it's only fair to acknowledge the source of the growth for the teachers to be rewarded. This not only could lead to their promotion, but also to a positive feedback loop of them desiring to continue to help others.

Has This Person Shown Any or All The Skills of a Senior Engineer or Equivalent? ðŸ·

"Colleague was very receptive to my code feedback despite it being my first few weeks on the job."
"Colleague was eager to help me learn an otherwise obscure skill."
"Colleague showed professionalism in their demeanor by addressing core problems while never making excuses. A real doer, not a complainer"

Potential promotions are a primary goal of peer reviews. On Being a Senior Engineer offers a new perspective on what makes a mature engineer while dismissing false qualities like years of experience.

Mature engineers seek out constructive criticism of their designs.

Mature engineers understand the non-technical areas of how they are perceived.

Mature engineers do not shy away from making estimates, and are always trying to get better at it.

Mature engineers have an innate sense of anticipation, even if they don't know they do.

Mature engineers understand that not all of their projects are filled with rockstar-on-stage work.

Mature engineers lift the skills and expertise of those around them.

Mature engineers make their trade-offs explicit when making judgements and decisions.

Mature engineers don't practice CYAE ("Cover Your Ass Engineering").

Mature engineers are empathetic.

Mature engineers are aware of cognitive biases.

Conversely, if an individual meets very few or none of the items on this list it may be an indicator of room for improvement.

Has This Person Shown Healthy Levels of Involvement or Desire to Job Craft? ðŸ»

"Despite colleague being from team X, they were passionate while collaborating on my project."
"Project lead improved the designs of their reports to help in understanding the data. Their background in design really shows through their work."

It's all too easy to sit at a desk and trudge through the minimum amount of work assigned to earn a paycheck. It's also all too common to overwork oneself accepting an ever increasing quantity of that same work.

Job Crafting shows a strive for work-life balance through utilizing one's own unique set of skills. A colleague who works on a diverse range of projects while collaborating with multiple teams is a great quality to acknowledge during a peer review. Your acknowledgment will help encourage management to consider what the individual is already doing in a more official capacity to assist in further developing their career.

Start Writing

Extracting answers to these questions into their qualities is the last step in writing a quality peer review. As with any professional writing, be concise. Be fair. Write about others as you wish they'd write about you.

Getting Started Gets Better With You

Joe L. Wroten — Fri, 05 May 2017 12:34:14 +0000

How was your onboarding experience? How were your first moments of any development job in recent recollection?

If you recall it being a pleasant experience, then I'm glad for you. Generally, onboarding a new developer involves a process of awkwardly asking people you barely know what feel like stupid questions.

Getting Started Gets Better With You

Write down your questions no matter how seemingly simple they may be. Then follow up on your notes with the answers.

Where is the app's repo?

How do I install the app's dependencies?

How do I launch the app?

Where do I find work to do?

Suddenly you wind up with something akin to an FAQ (Frequently Asked Questions). Passing along these questions and answers to the next new hire can make a dramatic impact on their first impression and ability to ramp up quickly.

Making It Real

Asking for forgiveness rather than permission can be daunting when you're new. A safe way to spread and better your notes is sharing them with the next new hire. Be sure to gather any questions they have and improve your notes with each person you work with.

Ideally publishing these notes internally in an internal knowledge base, wiki, or the README.md of the project repo can be a great resource. I encourage
anyone to submit a pull request to clean up the often neglected README's in repositories to answer the typical questions that currently may be answered by repetitive word of mouth.

See a problem? Be the solution.

Anyone can make a positive impact on company culture by sharing what you've learned with others.

Take notes. Share them. Don't be afraid of taking initiative. Imagine the impact such an effort could've had on your first days and don't let the trend of ignoring onboarding continue.

Self Code Review with Git Add Patch

Joe L. Wroten — Fri, 05 May 2017 12:31:34 +0000

Code reviews reduce logical errors, call out typos, and prevents accidentally committing more code than intended (1). They're essential for all sized teams pushing to the same code base while maintaining sanity.

Should a developer find themselves discovering any accidental "oops!" in their pull request it's a good indicator of a flaw in workflow. Introducing the interactive self code review:

git add --interactive

Interactive adding in git offers a choose-your-own-adventure style "What Now>" series of options.

The Useful Bit: Git Patch

Today let's look at the patch option. We can skip to the patch option in the future with this handy shortcut:

Example pretends we have file.ext and have added a line that defines a version...

git add -p

diff --git a/file.ext b/file.ext
index sha1..sha2 sha3
-- a/file.ext
++ b/file.ext
{
  "name": "example json",
  +"version": "1.0.0",
  "private": true,
Stage this hunk [y,n,q,a,d,/,e,?]?

Looks like a huge chunk of stuff! Broken down, the response describes what file was modified followed by a chunk of color coated git diff.

Now What? Staging Hunks of Code

Many options are provided in the "Stage this hunk?" prompt following a git add patch.

Pressing ? in response to the prompt explains each valid response. These are some essentials:

y - stage this hunk
n - do not stage this hunk
q - quit

You'll find that by going through this process you can read every line you'd like to add to a commit and make better choices about them.

Splitting `s`

These "magical" feeling chunks aren't always smart enough. Sometimes there's a need to split (with the s response) a chunk into smaller chunks. This comes up more often than you'd think if you're developing empathetically.

`a` Add or `d` Don't Add Entire File

An a response will stage the current hunk and all the following within the current file automatically. This is not recommended because you're opting to skip parts of your personal code review.

However, d is a nice way to skip adding anything from an entire file and can save a lot of time.

Manually Editing

Typos or "oops!" can be quickly corrected with the e response. This will open just the chunk for quick adjustments including line adding and removal.

Summary

Git patch has become a core part of my workflow to ensure quality and boost personal confidence in the code I ship. Give it a try today!

Easy Git Commit Targeting

Joe L. Wroten — Fri, 05 May 2017 12:26:13 +0000

Hi, I'm Joe L. Wroten

Joe L. Wroten — Fri, 05 May 2017 12:20:50 +0000

I have been coding for 6+ years.

You can find me on Twitter as @SharpShark28

I live in Austin, TX.

I work for Q2ebanking.

I mostly program in these languages: JS, HTML/HBS, CSS/Sass.

I am currently learning more about Haskell.

A pleasure to meet you!

Forem: Joe L. Wroten

Non-Ember Things in Ember

Show Me

But, wait, I have some setup I need to do!

Want to go further?

Faster Test Suites, Less Code, Embracing Writing Addons.

Less Blue Light, Better Sleep

What? Why blue light?

On Eye Strain

Get up. Move around.

Filtering Blue Light

On Sleep

Summary

The Great App Store Trials

Act I: Building the App

Problem: Releasing a Web App Cheaply and Easily

Solution: Netlify

Problem: Bugs

Solution: Github Issues

Act II: Building for Android

Problem: Running Cordova Built APK

Solution: Cordova compile to device.

Also... Overcoming USB Debugging

Also... Overcoming USB Cable Differences

Problem: Local Ajax Calls Don't Work

Solution: Bake in data for the app build only.

ACT III: Publishing

Step: You Want Money and My Soul?

Problem: Releasable APK file

Solution: Cordova Build

Problem: Signing the APK file

Solution: Android App Studio, Keystore, jarsigner

Problem: Installing onto Android Device

Solution: Installing adb

Problem: zipalign

Solution: zipalign it

Performance Reviews - You and Your Peers

Provide Feedback Often - Not Just On Judgment Day ðŸš«

Questions To Reflect Upon ðŸ’­

Has This Person Ever Made Your Day Easier? ðŸ‘

Has This Person Helped You Grow? ðŸŒ±

Has This Person Shown Any or All The Skills of a Senior Engineer or Equivalent? ðŸ·

Has This Person Shown Healthy Levels of Involvement or Desire to Job Craft? ðŸ»

Start Writing

Getting Started Gets Better With You

Getting Started Gets Better With You

Making It Real

See a problem? Be the solution.

Self Code Review with Git Add Patch

The Useful Bit: Git Patch

Now What? Staging Hunks of Code

Splitting s

a Add or d Don't Add Entire File

Manually Editing

Summary

Easy Git Commit Targeting

Hi, I'm Joe L. Wroten

Solution: Installing `adb`

Questions To Reflect Upon ðŸ’

Has This Person Ever Made Your Day Easier? ðŸ‘

Has This Person Shown Any or All The Skills of a Senior Engineer or Equivalent? ðŸ·

Has This Person Shown Healthy Levels of Involvement or Desire to Job Craft? ðŸ»

Splitting `s`

`a` Add or `d` Don't Add Entire File