Don’t Be a Hater 2013

Editor’s note: I’m calling time on this one. Have to publish as-is or it will rot in drafts forever 2 years is enough.

Each year my friends and I go over some personal goals we would like to take on in the coming year. In 2013 I made an explicit goal to “stop being a hater.” I was sure to differentiate between criticism and hate, as I feel that criticism is a totally necessary and healthy part of life. Anyway, here was the way I described it to the group.

Stop being a hater – k so the rest of these are relatively self explanatory, but this one is interesting. As you know, I am a google hater. I am also a coffee script hater. And a hater of emberjs and of Facebook. And of just a lot of things that have redeeming qualities and make a lot of people really happy. Now, criticism is important for growth, but I’m not telling google or ember or Facebook or anyone anything. My observations are not to better anyone but only to tear down. I’ve done a decent job keeping my hate to myself and not spewing filth on the internet but I have a lot of it on the inside and I don’t want that anymore.

Here was my much more judicious declaration on twitter: https://twitter.com/joeldart/status/294636343026409473

At the end of the year, I wrote up my thoughts on my ipod touch and emailed it back to the group. Here is that write up:

Firstly, in general I found this to be a really good idea. It was really shocking how much of a difference it made cutting out all that unnecessary negativity. The snide “well actually…” comments about google no longer spoiling someone’s feelings of excitement, loyalty, or gratitude. Not slipping into road rage bc you just give people the benefit of the doubt. There were just a ton of applications where it made things better.
One area I really started to struggle was around crunchy/hippie stuff. Kathryn has done a ton of research on nutrition and parenting and all that stuff, and occasionally the results align with some unconventional practices used by the more granola amongst us. What I found myself doing was not engaging the decisions in a critique (note, criticism is still really important and totally allowed) but just blindly and gruffly hating on whatever was being presented. There was no basic respect being offered and that caused a lot of difficulty.
Another noteworthy anecdote I have is what I learned by deliberately applying the don’t be a hater rules to sports. I waffled on this for a long time as I think that rivalries are an important part of sports and bitterly hating the other team is part of the fun. But I finally decided I would only lose one year, so I went for it.
I don’t think I will fully pull this forward, but I did notice that I still greatly enjoyed football even without the bitter hatred of wabash college and the New England patriots. In fact not being a hater about the pats helped me enjoy an ongoing discussion and joke with a friend that normally would have been us trolling and bickering the whole season.
The last and most painful clarity was about the most common targets of my hate: nickleback and qrcodes. Over the course of the year I probably received 12 emails from friends with snarky references to these two. That’s an average of 1 per month about these subjects which is ridiculous. I don’t receive an email per month about volunteering, football, the muppets, church, or anything else. But my interest in snarky criticism leads to always being top of mind for my friends when it comes to hating. Not only is that sad, but it’s ridiculous that I let myself get worked up about these things. So what? Nickleback isn’t good. Why am I still talking about them. We get if – I think qrcodes are abused and are not correctly solving the problem of the need to deep link and encode metadata into the world around us. Getting mad about marketers wasting their time isn’t properly solving the problem. Why shouldn’t I create a better technology instead of complaining about the current one. Once again, criticism isn’t bad, but we shouldn’t be so quick to define ourselves by what we say no to. Knowing our boundaries is important, but it’s easy to spend all your time fortifying the castle walls and neglecting the culture on the inside.

Through the year, I received a lot of encouragement from others, and I even snuck in a subtle reference to this in my jsconf talk: the only two technical references I made in the talk were Douglas Crockford and IE, figures which draw quite a bit of hate. Subtle – far too subtle for anyone in the audience but me – but cathartic.

My favorite outcome of this experiment, though, was the way this led me to open myself up to the good parts of various things. Previously, my approach to basically everything was clouded by my feelings about it. This meant that if there was anything I could learn from it, I would miss it. My (aspirational) approach now is much more optimistic: there is something good that I can find here, and I would like to find it. I’m super bad at this, but I keep practicing and hope to get better.

Finally, this internal distinction of criticism and hate has helped me sort out feelings around “call out culture” and “tone policing” and other approaches to criticism. It’s complicated, but it doesn’t bother me people not being pleasant or calm when they really are angry and critical. Part of this is good-faith that such criticisms exist to make things better. And part of it, honestly, is just not being a hater.

Posted in Uncategorized | Leave a comment

November Bunkerjs

We’ve been doing an internal JavaScript meetup once a month and there are so many great resources coming out of it, I though I’d reblog for others to see. Hope you enjoy.
-Joel

It was great to see new faces at Bunkerjs this month. Next month, Alex Billingsley will be sharing some non-js-but-cool static site generation with jekyll. Also Brian Banta will be sharing about animations for beginners corner.

Beginner’s corner

This month, Joel talked about showing and hiding things. To do this you need to decide to either: completely hide, make invisible, or move off screen. You decide this based on how you want to affect accessibility and search engines (so it’s different for personal bookmarklets and production). You can use “display: none;” “visibility: hidden;” and “position:absolute;left:-9999px;” for each of the 3 respectively. Of course, with other specific needs, there are more ways to accomplish this, but these were the 3 discussed this month.

Docker

John afterward introduced the group to Docker containers and how this affects server-side JavaScript. Docker is like a virtual machine but super lightweight and flexible. Talk to John to find out what he’s been learning.

Links we discussed

new format for ios bookmark images – https://github.com/h5bp/html5-boilerplate/commit/345925f04384b59929d8d39ba428cef548921408
There’s a new way to specify what image to use when your users add your page to their home screens

making emails stand out on google inbox – http://googleappsdeveloper.blogspot.com/2014/10/make-your-emails-stand-out-in-inbox.html?m=1
Google has a new email client AND a new way to give users one-click actions to your service

css grid examples – http://gridbyexample.com/
New way to layout your pages

form validation – http://developer.telerik.com/featured/building-html5-form-validation-bubble-replacements/
Styling html form validation

whats in chrome 39 – http://blog.chromium.org/2014/10/chrome-39-beta-js-generators-animation.html?m=1
Pretty self explana…

on web compatibility and es6 – https://gist.github.com/fakedarren/28953b01e455078fb4f8
A good look into how important compatibility is to the web

.includes not .contains – https://twitter.com/addyosmani/status/536180623225143296?refsrc=email
The thrilling conclusion

a11y examples – https://twitter.com/slexaxton/status/535584986749861889?refsrc=email
Tongue in cheek intro but cool example about how to make a menu system accessible

khan archictecture discussion- https://github.com/Khan/perseus/blob/master/CONTRIBUTING.md
Really good example for 1. getting new users up to speed. 2. a big project’s design

chrome dev summit videos – https://t.co/N2EBiGKMk8
This is kind of like wwdc for chrome. Check out the videos to keep up with what is happening in the chrome ecosystem

source blackboxing –  https://developer.chrome.com/devtools/docs/blackboxing
Ever tried to step into a method and ended up in jQuery source doe?

w3c frame timing api –  https://github.com/w3c/frame-timing/wiki/Explainer
Performance tracking

dexie –  http://www.dexie.org/
cool looking indexedDB wrapper

css specificity graph generator – http://jonassebastianohlsson.com/specificity-graph/?utm_content=buffer95f18&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
Visually see opportunities for code reuse

aws lambda –  http://aws.amazon.com/blogs/aws/run-code-cloud/
New platform as a service from amazon. Just upload js files to an s3 container and deployed

web sensor api –  http://smus.com/web-sensor-api/
State of the world

docker on windows –  https://twitter.com/ahmetalpbalkan/status/532414384081866752?refsrc=email
Progress

icon fonts vs inline svg –  http://mir.aculo.us/2014/10/31/icon-fonts-vs-inline-svg/
Comparing two methods

dat adventure –  http://maxogden.github.io/get-dat/?id=j8zqyqg6bf6tuik9
Government data tools training

for those that validate – https://twitter.com/h5bp/status/531540556225449986?refsrc=email
it’s a little nicer
Continue reading

Posted in Uncategorized | Leave a comment

Upgrading npm on windows

Had a windows machine which needed to upgrade npm to avoid the whole ^ incompatibility issue. ex:

npm ERR! Error: No compatible version found: minimist@’^0.1.0′
npm ERR! Valid install targets:
npm ERR! [“0.0.0″,”0.0.1″,”0.0.2″,”0.0.3″,”0.0.4″,”0.0.5″,”0.0.6″,”0.0.7″,”0.0.8
“,”0.0.9″,”0.0.10″,”0.1.0″,”0.2.0″,”1.0.0″,”1.1.0″]

Well, I was doing it in the command prompt I was using which was launched as admin for other stuff (since no sudo on windows). So recognizing that the installed version of npm didn’t understand the ^ sign because I listen to nodeup, I typed “npm install -g npm” but got

(a bunch of this type of thing…)
npm WARN unmet dependency which is version 1.0.0
npm WARN unmet dependency C:\Users\jdart\AppData\Roaming\npm\node_modules\npm\no
de_modules\read-installed\node_modules\readdir-scoped-modules requires once@’^1.
3.0′ but will load
npm WARN unmet dependency C:\Users\jdart\AppData\Roaming\npm\node_modules\npm\no
de_modules\once,
npm WARN unmet dependency which is version 1.3.0
npm ERR! peerinvalid The package npmconf does not satisfy its siblings’ peerDepe
ndencies requirements!
npm ERR! peerinvalid Peer npm-registry-client@3.2.2 wants npmconf@^2.1.0

And finally

npm ERR! System Windows_NT 6.2.9200
npm ERR! command “C:\\Program Files\\nodejs\\\\node.exe” “C:\\Program Files\\nod
ejs\\node_modules\\npm\\bin\\npm-cli.js” “install” “npm” “-g”
npm ERR! cwd C:\Windows\System32
npm ERR! node -v v0.10.5
npm ERR! npm -v 1.2.18
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! C:\Windows\System32\npm-debug.log
npm ERR! not ok code 0

When I tried to “more c:\windows\system32\npm-debug.log”, I found out it didnt’ exist which made me realize my current directory was c:\windows\system32 which ideally should be super protected, so I changed my directory to something not-system-level and ran again successfully. No further testing, YMMV

Posted in Uncategorized | Leave a comment

September Bunkerjs

We’ve been doing an internal JavaScript meetup once a month and there are so many great resources coming out of it, I though I’d reblog for others to see. Hope you enjoy.
-Joel

Some reviews from Bunkerjs:

“I learned something”
“This will revolutionize the way I do the blog”
*gasp* “Nice”

In beginners corner we went back to basics, talking about Inspect Element, editing css, and breakpoints
Then we showed off Google’s Karma test runner

Next month: John will share Docker

Here are all the links we discussed (there are a ton):

visual editor for 3d graphics – http://threejs.org/editor/
Now that webgl is on ios, delivering high quality 3d graphics from the browser is available. Will we use it? Who knows, but if we have the need, here’s a tool

WebRTC take 2 – https://msopentech.com/blog/2014/08/19/microsoft-google-hookflash-others-co-author-real-time-communications-specification/
WebRtc allows for realtime video/audio native in the web stack, but the v1 api was a Google prototype. The standards bodies are now engaging everyone to take a second pass. Lots of involvement, including Microsoft,

​PDF2svg - http://pramodhkp.github.io/pdf2svg/
Early prototype using Mozilla’s pdf.js that will convert pdf to svg natively in javscript + browser

Knockout punches – ​http://mbest.github.io/knockout.punches/​
interesting plugin emphasizing knockout 3’s new binding flexibility.

Effective unit testing with AMD - http://bocoup.com/weblog/effective-unit-testing-with-amd/
DyKnow has moved its front end code to AMD for extra flexibility and maintainability. This post describes how also to unit test our code

Just nope - https://twitter.com/slexaxton/status/491116246427922432?refsrc=email
Yepnope is no more with full support behind requirejs for conditional module loading

React and web components
http://addyosmani.com/blog/component-interop-with-react-and-custom-elements/
https://github.com/petehunt/react-gss
http://facebook.github.io/react/blog/2014/09/12/community-round-up-22.html

Fast ui animations – ​http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/

Parallel.js -http://adambom.github.io/parallel.js/​
take advantage of all the cores on your machine

Runtime.js – http://runtimejs.org/​
kernel written in javascript. not practical. just cool

Ampersand.js – http://ampersandjs.com/
&yet’s front end framework built over backbone

Authentication in angular – ​https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec​

Make drive – http://blog.humphd.org/introducing-makedrive/
web filesystem experiment

nodebots with visual studio
http://briangenisio.com/software/2014/08/25/using-visual-studio-to-program-your-nodebot.html​
https://twitter.com/dtex/status/507297195775639552?refsrc=email

knockout parsely – https://www.npmjs.org/package/knockout.parsley.js
validation library

medium’s css – https://medium.com/@fat/mediums-css-is-actually-pretty-good-b8e2a6c78b06
workflow, process, etc they’ve done to make their css maintainable

Requiring stuff in the browser/console/visual studio
https://gist.github.com/mathisonian/c325dbe02ea4d6880c4e
https://chrome.google.com/webstore/detail/requirify/gajpkncnknlljkhblhllcnnfjpbcmebm
http://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e

Grunt/npm/gulp/bower integration in Visual studio – http://www.hanselman.com/blog/IntroducingGulpGruntBowerAndNpmSupportForVisualStudio.aspx​

Chrome gradient inspector - https://chrome.google.com/webstore/detail/css-gradient-inspector/blklpjonlhpakchaahdnkcjkfmccmdik?utm_content=buffer76696&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

memory management – https://twitter.com/addyosmani/status/507294505007976448?refsrc=email

centering stuff in css – http://css-tricks.com/centering-css-complete-guide/
– now you know

w3c spec protip - https://twitter.com/jaffathecake/status/509980193654845440?refsrc=email

service workers – https://jakearchibald.github.io/isserviceworkerready/
the future for offline web apps

​​messageformat.js – https://github.com/SlexAxton/messageformat.js/blob/master/README.md
internationalization can be tricky with pluralized messages (ex 1 user, 2 users… but in english, german, french, dutch…)

katex – http://khan.github.io/KaTeX/
khan academy has open sourced their super fast math equation latex parser

es6 generators in v8 – https://twitter.com/andywingo/status/511876619917459458?refsrc=email

Advanced debugging with chrome – https://docs.google.com/presentation/d/17HjGp4pQlNh2WIwKiTcUpDLIuOdkUcRmALFuoytQsjU/preview#slide=id.p
– kind of amazing presentation

transducers in js – http://jlongster.com/Transducers.js–A-JavaScript-Library-for-Transformation-of-Data?utm_content=buffer39c57&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
– functional programming abstractions

svg animation tool – http://svgcircus.com/
scalable graphics. ex needing a loading animation that scales to the 3x new iphone 6

faker.js – https://www.npmjs.org/package/faker.js
– library to help you generate lots of fake data that still looks and behaves like real

accessible dialogs – http://instructure.github.io/blog/2014/09/25/accessible-dialogs/
from the makers of canvas lms, best practices for your blind users when using dialogs

parcelify – https://github.com/rotundasoftware/parcelify/blob/master/README.md

new font-face spec – https://dev.opera.com/articles/better-font-face/
for loading in custom fonts more easily

open source competitor to chromecast – http://matchstick.tv/home/index.html

using srcset vs picture – http://blog.cloudfour.com/dont-use-picture-most-of-the-time/
using the correct tool for your adaptive designs

Posted in Uncategorized | Leave a comment

On role models and hypocrisy

I don’t know where it started nor why it persists so strongly. I could believe an argument that it makes a great headline and in this age of 24/7 breaking news, such stories are easy money. I could also believe an argument that we are horribly insecure about our faults and when faced with someone that inspires us, we are secretly relieved to find reason to let ourselves off the hook.

 
Of course I’m talking about when the role model falls. 
 
What is odd about the scenario is how we got to a place where we expect our sports heroes to be examples of great moral fiber or our political leaders to be without past transgressions. There is a moment when humanity catches up with everyone, but for some reason, our role models are expected to ascend above this.
 
We have lost the literal sense of the phrase role model and exchanged it for person model or life model where any noted imperfection is a disqualifying mark. 
 
I can’t say I don’t agree that those in highly influential positions should be held to a higher standard, and I am pleased when the role model does the right thing and disappointed when they inevitably do the wrong thing. That said, I do not think that mistakes – no matter how grave – affect the reality of the role that was once admired. I don’t know why you would celebrate a tech leader’s failed project as the sign they are a fraud. A religious leader’s moral failures, a brilliant mind’s ignorance, an overachiever’s regression to the mean. 
 
It seems to me to be both more useful and more human to approach these situations with more heartbreak and humility for the fallen. That we should not mourn the death of our heroes but share in the pain of their stumble and root for them to pick themselves up again.
Posted in Uncategorized | Leave a comment

Weddings

In June of 2007, my wife and I were married. The year or so before that, then, we were planning for the wedding. For those who have not been through this process – or to remind the ones who have- creating such an event is a ton of work and a series of difficult trade offs. The first and most painful trade off, after the date/location, is the guest list.

We wanted our wedding to be a celebration of all the people in our lives that had made us who we were. We also had a budget we could spend. My mother wanted to be able to share the day with her old college roommate. I had a pretty large group of friends from high school. We also had a good size list of college friends. In the end, as you remember, there were a few friends… several actually… that were not invited. I still feel really bad about this as I know how much it would have meant to them to be invited. And I know how much it hurt them not to be.

But I felt I should honor my mom by letting her friend come and the closest members of our extended family. This event was to celebrate the path that brought us together and our families were a huge part of that. The choices were hard, but they were right. And if I had to do them a hundred times, I expect the same results each time.

This came to mind today as I saw a tweet about conference organizers actively seeking out women speakers. I dont organize a conference and every event has different goals, but it seems to me this is very similar. Each conference wants to show off the advances in the field, or put forth a diversity of challenging ideas, or to simply blow attendees minds. And all have a budget for time slots and money. Seems very natural to me that an organizer would want to ensure there was proper representation from each group that makes up the community. The choices are painful and it sucks knowing that there are good friends who will have their feelings hurt, but it’s the right choice.

Posted in Uncategorized | Leave a comment

permissions and hypermedia and discoverable apis

Toward the end of the day today, Alex and I were discussing permissions, usability, and keeping the API dry. The problem is that you have permissions that are part of your app (duh) and these permissions are not the same for every user (duh). Well usability dictates that we should hide unusable actions and unviewable pages (duh). But we want to have a nicely organized API that restfully describes resources. We also want to use that API code for our web tier and we don’t want to have some /classes and /permissions http requests for every web page we render. 

Then I finally realized the connection between hypermedia and discoverable restful apis. All the times I’ve read descriptions of discoverable urls in Apis, all I can hear is “Soap! Wisdl! Auto generated code!” And then I lose interest because that’s not my style. What I miss, though, is that HTML pages have this capability built into them. This is great as it allows links between pages forming the whole web thing, but it also gives a pretty intuitive declaration of your permissions model. So including (or specifically excluding the proper API end points do provide all that discoverability stuff, but it also just lets you w express your permissions model in as intuitive a fashion as you can in your HTML code.

Posted in Uncategorized | 1 Comment