One Second, I Have A Notification

My phone has become an extension of me. For better or for worse, there are not many activities I do without it. But, lately I have been in a creative rut. My writing has been not of a quality that I have liked and my consumption has increased.

How often do we go, “Oh, today sucked. Let me go and watch ten hours of Netflix and sit on Twitter for those hours as well”? Excessive consumption can make you almost depressed, watching all this content and all these different social channels.

How many have had the problem where you sit down to watch a quick episode of something on Netflix and next thing you know, the night is gone. It will also steal away any creativity you might have been feeling that day. Sit on a coach for eight hours and then tell me that you are ready and excited to work on your novel.

I am going to propose something for anyone who wants to be making creative work: Let’s take an internet break. Start small and do it for an hour a week. If your work requires the Internet in some way, block the sites that are distractions. If you have been wanting to get something done and have been putting it off, this hour for you will be your time. Find a time that works for you and get your environment set up beforehand. Then, get to work. That is going to be your hour each week.

 

A Quick Guide to Making a VR App

Google is going to release a proper VR operating system later this year with their release of Android N. It is going to have VR at the core of its OS. You can see below an early build of Android VR as it has already hit the Play Store and YouTube.

Google Cardboard has been around for a while now, and while it is not the most amazing VR experience, it is still the perfect device to start experimenting and playing with some interactions and small prototypes of VR.  Plus, you can get a Cardboard Kit for under $20. Just a word of warning, don’t spend a lot of time inside of the apps. I found myself getting sick.

There is a proposal for a WebVR standard. You can read about all the little details over here at https://mozvr.com/webvr-spec/.

I wanted to find something that I could get into quickly and just start messing around with. I wanted to get something in front of my eyes, so I went searching for frameworks, naturally.

A-Frame was the most straightforward framework I could find and it would allow us to jump inside a few code pens and start playing around with some demos. They also had an extensive examples section with a few different types of use cases for VR. Below is one of the most basic examples. The framework is maintained by the Mozilla VR team.

See the Pen Attempt at VR by John Siwicki (@siwicki) on CodePen.

If you take a look at the markup below, A-Frame has their own tag system.

<a-scene fog="type: linear; color: #F0F0F0">
    <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
    <a-cylinder position="1 0.75 1" radius="0.5" height="21.5" color="#FFC65D"></a-cylinder>
    <a-plane rotation="-90 0 0" width="44" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
</a-scene>

A-Frame is a really simple framework to get started making some simple VR apps. There are many different modes to make different types of apps like panoramic photos or 360 video. I was able to use Googles Cardboard Camera on android to get some interesting shots to make some interesting scenes to stitch together for a VR experience.

 

Hosting Static Sites With Blackblaze

One of my most hated things is dealing with hosting and all the shit that is wrapped up in that world. I wish I could host everything on GitHub Pages. Their system and workflow are perfect for my brain.

There has been countless articles on hosting static sites on Amazon s3. But there was something that kept me away from that. I don’t know why, I never had a bad experience. But I never set up any of my static sites there.

Blackblaze has long been in the backup game. They would allow you to back up your data with a desktop app and they claim that they will allow unlimited backups. Again this was another service that I never used.

Blackblaze announced a new cloud service that would trivialize Amazon’s s3. Blackblaze’s biggest selling point is they have a much lower cost per gigabyte than Amazon. They also provide ten gigs free and a certain amount of bandwidth each day.

Blackblaze has some application support for accessing your files. Cyberduck and Dropshare are just a few of the applications you can use for managing your files.

It seemed like a perfect spot to try and host some of my static sites and get a perfect workflow to go along with it.

FcWUZHnqp5

Blackblaze ask you to create a bucket for your files. They are basically like folders. Then inside those buckets you can add in your files.

ydNdvNIJT9

As you can see above, if you upload an html file you can get a direct link to that file. The same would work for any other types of static assets. Blackblaze generates a long URL and if you wanted to use it to fully host a static site you could just update your cname record to go to your long url to get it live.

I used B2 storage multiple times recently to show off work in progress sites. I also started moving some of my single pages sites over to being hosted here. It was fast and easy to navigate and easy to make sure things were backed up.

 

A Few Thoughts on Google Home

Google I/O is this week and with that comes a few days of nonstop Google News. The big announcement of I/O this year comes in the form of a new hardware device called “Google Home.”

Google Home is a speaker that has Google built into it. It is much like Amazon’s Alexa, but it has a new “Google Assistant,” A connected speaker that allows you to perform simple tasks around your house is the device that you never thought you needed until you got one in your house.

Amazon had a huge lead on this product and has been continually making updates to the product and the core technology. Amazon has even opened up access to Alexa to some third party developers. Google has a lot to catch up to.

Google’s New Assistant

My first thought about the product was, naturally, where in my house could I have two speakers? Google’s voice recognition has always been top notch, but that is something that Amazon has also never had a problem with. The obvious advantage that Google has over Amazon is the number of products that they can integrate with it. Google also showed a few question and answer aspects on stage, like looking up movie times and following that up with more information.

Google also showed Chromecast support for Google Home. Chromecast devices are something that I love. The capabilities of using an all voice device with Chromecast would be interesting. Controlling the TV with an always listening device is something that would be killer in the living room.

It All Comes Down To One Thing

The early preview at I/O and the video of a family interacting with it already shows that this is going to be an interesting device and something that is going to attract a lot of attention later this year.

Google Home’s feature set could be big with things like calendar integration, and having emails read to you. I just hope that I can say something like “Ok, Google. Play ‘The West Wing’ on Netflix” and it shows up on my screen.

What will be interesting to watch is what Google prices a device like this. It feels like something that will fall between $99 and $250.

I love using the Echo and it has become something of a daily practice. I even started writing this using Google’s voice dictation on my Android phone. But, does this start the conversation of how much is too much, Google?

 

365 Days of Writing

Writing was always something that I wanted to get more involved in my day to day life. Early last year, I started a blog and had some posts up, but it was nothing more than that just random posts at random times.

I tried to start the habit of blogging every day for 30 days. I would write a blog post every night on a topic I was thinking about or something I was working on. What ended up happening was about 20 poorly written, not even 500-word posts and about 10 with some value to them.

It was a good way to get over being scared of posting articles as every day I had to hit “Publish” no matter what. That was the best take away from that activity, but the quality was jumbled and the problem still remained it was a random assortment of thoughts.

Morning Pages

I still wanted to write. I actually enjoyed the process of writing and the process of exploring ideas. But, I needed to do something to help that along and I needed to do something that would help me get better and more comfortable with writing and exploring my own ideas.

I was listening to a podcast talking about the concept of morning pages. The idea is every morning you write three handwritten pages with no prompt and no guidance, just start writing.

“Three pages of stream of consciousness writing done before the day begins”

I loved the concept but I had some problems. I didn’t like longhand because this was something that I thought I might want to go back and look at if I had a good idea or something that I wanted to grow on and expand.

I decided to find a simple app that I could write in plain text, was full screen to avoid distractions, and would allow me to search through all of the stuff I wrote. I wasn’t sure what was going to come out of it.

The Results Were Not at All What I Imagined

I didn’t know what to expect from this. I thought there would be amazing ideas flowing. I would have some great business ideas or some book idea and I would be off to the races. I didn’t think that it would become a pseudo therapy session for me. At times, it was a space where I was able to work out problems. It was a place where I could vent about the struggles that I had. It was a place where I would set goals for the month, the day, and the week.

There were many ideas coming out as well. But, all of this other stuff happened. When you turn off the world and allow yourself the time and space to actually write down what is on your mind, the results were remarkable.

This wasn’t without its struggles. Some of the early days, the writing was nothing interesting, “I am tired. Why do I wake up every morning and do this?” There were some days where I was thankful for hot water and coffee and just wanted to talk about the joys of a good show.

It Made Me Hungry

I felt like I was in a creative rut and that is why I wanted to start doing this. But, something happened once I got into my rhythm about three months in.

I wanted more. I wanted to share more. I wanted to start making some of my other creative projects. I got hungry for more.

Writing every morning unleashed the juices. It got me ready to take on the day. It got me set up to tackle some of the other problems and goals on my list.

What it did was allow me to start and get an easy win, which in turn allowed me to setup my mind to start completing.

What Is Next

The daily routine was something that has helped me in other ways. I don’t see a reason to stop or change the practice. The benefits were visible. If I didn’t write in the morning on certain days, I felt like something was missing. It felt like I was on a cloud for the whole day.

Another thing that this practice trigged was the development of more good habits. I tried to break things I wanted to do down into smaller chunks. I was able to get into the habit of mediation, tackle being a vegetarian, and even read more.

I thought about stopping and seeing what happened. But, I enjoy it too much and I didn’t want to go back to being without it. I think that I might use it to experiment more with my writing, trying things such as writing more fiction and getting more comfortable with writing dialogue.

If you have something that you want to try, get it into your day or your routine. Break it down and try to do it for thirty days. It is the perfect amount of time to see how it will work with your life and allow you to make adjustments from there.

If you love experimenting with and wanting to try new things, this is a practice that could change you and allow you to get more done.

 

Website Teardown – Trump vs. Hillary

Screenshot 2016-05-12 22.14.53

Screenshot 2016-05-12 22.15.14

For some reason, I started down a rabbit hole. That is a journey that yields interesting results. So I decided to run both Donald Trump and Hillary Clinton’s websites through some of the normal tests that I go through for the projects I work on.

We ran a few page speed tests as well as a full audit. I wanted to look under the hood to see if there was anything interesting or if there was some interesting technology being used.

A few quick notes before we get started. Hilary’s website weighed in at 1.4MB and 64 requests. Trumps website weighed in at 1.1MB and 92 requests.

Google Pagespeed

Hillary

Desktop: 60
Mobile: 57

Hillary’s website had a few things that should be fixed that could increase her score a ton. A leverage browser caching and optimizing a few images would boost the score on both desktop and mobile by huge numbers.

Trump

Desktop: 87
Mobile: 70

Trump’s big difference is his handling of images so far in the page speed report. I think that is one of the main differences between Donald and Hillary.

Pingdom Website Speed Test

The Pingdom test provides a little more of a breakdown of what is going on with the website. I get to see a sample speed as they allow you test it from different locations as well as give you a nice read out of all the different types of files and each file being requested.

Trump

Load Time: 1.70 sec., 23 Images and 10 Scripts

Trump’s site seems to be really lean and well put together. The website feels like it uses WordPress, but there is nothing that screams that. 1.70 sec. is a nice load time for such a heavy website. The image count is low and most of the page wait is coming from the number of scripts.

Hillary

Load Time: 2.14 sec., 17 Images and 16 Scripts

Going along with the Google Pagespeed scores, Hillary’s load time is a little on the longer side. It seems to be the six extra scripts and the lack of the image optimization that is it slowing down

Wrap Up

The Clinton web team gets a special mention for having a message in both the console and at the top of the document. There is also a link to the job posting page and a small little nod to anyone who is looking at the code. Furthermore, Clinton’s website uses typography as its main component to get its message across. Finally, the main typeface on Clinton’s site is called Unity, a customization of Sharp Sans by Lucas Sharp. I really love this.

In comparison, Trump’s site is led strictly by Trump imagery in the hero spot with Montserrat font controlling the type.

 

Building Habits

When I was younger, I had some issues when it came to communicating in general. Maybe part of it was the fact that I was the youngest of four kids and I had trouble communicating with other people.

The interesting thing is that I was never much of a reader. I always liked stories but I never read a lot.

There is something that is really powerful about a story and about writing. If you have something to say and you get people hooked onto your story, you can get them to go on a journey and you can teach and entertain them. It is also a creative practice that has really low barriers of entry. You can just grab a piece of paper and start constructing. It doesn’t even need that. It can be a much simpler thing. I mean find the ingredients.

The thing about writing that I like is the construction part about it. It is like designing a puzzle, putting it together and taking it apart again to show to your friends. But, the thing that motivates me the most to write is its effects on me. The benefits and the therapeutic nature of it. The calmness of it. There is something awesome about sitting with a blank page and seeing what happens when you start typing and letting go and being free with it. Not being scared about what is going to come out when you start typing.

In May last year, I had become fed up with myself. I was never getting the things done that I wanted to. My to-do list would always have numerous do items and I was stuck in a rut. I had trouble doing any creative work after work hours. I couldn’t even write a few lines of code. I had been wanting to start blogging again and I couldn’t even get myself to publish a post.

I tried to force myself to blog everyday for a month. That was helpful to get over the post anxiety part about it. But, I found that if I sat in a WordPress drafts window without any idea what I wanted to talk about, it made it all that much harder.

I had heard a podcast where someone mentioned “Morning Pages.” At this point, I didn’t know if I heard the proper definition of Morning Pages, where this person was talking about how they just write 3 pages every morning with no distractions.

I set out to try it out and I found that a paper and a pen was not the tool for me. I think that I had trouble reading my own handwriting and I think that was a big determinant. I liked the idea of being able to go back and see what are in these writings.

So, I set out to get an app for my Mac that would allow me to write in full screen so I wouldn’t see any shit on my computer.

Then I started writing. I had the idea of a page goal or a word count. But, I thought to myself that if I missed it or I thought that I would not make it. I might not write. So, the goal was to just write and to see what happens.

The first week was hard but there was some good use of it. The idea of morning pages is to just start writing. So, some of the stuff you start out with at the top of your document is some strange stuff. “My head hurts and I want sour patch kids.” But, then at some point for me, there is always a switch during the writing time where the goodies come out.

There are always the days when you don’t talk about many other things than the sour patch kids.

I kept trying and I kept showing up. Everyday at 6am. Every holiday at 6am. I took a vacation and wrote everyday but not at 6am. I had to give myself a break.

Day by day it got easier and day by day was when the morning interesting things would come out of me. It was an amazing transformation. There was a point where I couldn’t write, and now I couldn’t stop. Even if I decided to write at night and try to write a blog post, the well was always flowing with ideas and with movement.

 

Making Accessibility a Top Priority

Just a few weeks ago, I attended a conference on Web Design. It had been a long time since I had attended any industry event of such caliber. It was refreshing to hear all of the different speakers.

One of the highlights of the conference for me was a talk on Performance and Accessibility. Performance has been something that I have been looking at a lot more over the past few months.

Accessibility was one of those things that I always thought about but didn’t do enough research on.

The speaker of the talk was Marcy Sutton. She played a video in one of her slides about a person trying to load a website using a screen reader. I immediately sat up in my chair. The video was not like anything I had seen. It connected with me. I felt bad, watching that video made me feel like I should be doing more and doing more.

http://marcysutton.github.io/a11y-perf/#/

Marcy’s talk did a great jump of showcasing the importance of Performance and how it integrates into Accessibility. It was definitely a thought process that I never considered—that both of these things are so closely tied to each other.

Tools

https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en

As soon as I got back, I went looking for tools and ways I could highlight potential problem areas. The first thing that I started using was Accessibility Developer Tools by Google. This would allow you to run an accessibility audit on any page and give you a clear set of items to fix. It was a clean way to grab a few small wins and see where you stand on some basic best practices.

Google has a small course on accessibility that introduces tools and techniques for developers to easily ensure that websites are more accessible. The course is quick and will take about 2 hours to complete.

If you use Grunt in your workflow. I found this Grunt wrapper for a11y, automate your accessibility audits.

https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

It is another chrome extension that is a tool to find Accessibility defects. It did flag some of the same things that Google’s Dev tools flagged, but this tool seemed to be a bit more thorough and brought some other issues to light.

Next Steps

I felt bad during the conference and reading some of the documentation on this topic. There are already a lot of good tools and practices out there I should have been incorporating into my workflows. It is not a topic as exciting as some new CSS features or a new framework.

But, I would want to thank Marcy Sutton for her talk and suggest that every developer should watch that video where she has a person using a screen reader.

 

CSS @apply

Variable declarations and mixins are the two preprocessor components that I miss the most in projects where I have to write vanilla CSS.

CSS @applys are something that is coming starting to get support in certain browsers. @applys are away to extend or call reusable chunks of your CSS. If you have ever used sass it is very similar to calling something like a mixin.

Support for CSS @apply is horrible still. It is impossible for them to be used in the project. But, I couldn’t help but just start playing around with it in a few CodePens. The current support as listed via Chrome.

Example syntax for SASS mixins is below. You can pass mixins some variables and some other parameters as well as the ampersand which falls under one rule.

@mixin button($color) {
    border-radius: 5px;
    padding: .25em .5em;

    &:hover {
        cursor: pointer;
    }
}

The syntax for CSS @apply Rule is below. The syntax falls in under the :root select which, is where you would store all of your variables.

It is a clean way to contain all of your custom properties but you root declaration could start to get pretty lengthy if you have a lot of custom things at the top of the document. I like the @apply call later in the document. It feels very natural. The thing that kept tripping me up most is declaring the custom data with double —- syntax.

See the Pen CSS @apply by John Siwicki (@siwicki) on CodePen.

The code is also being used in this Codepen doesn’t not fall back into old browsers very good at all. If you loaded this in a browser that is not supported this would just not load at all.

This simple update is going to be the most exciting update toe the CSS spec. The problem is going to be the roll out of support. As you saw above from Chrome has been supporting these custom elements. Firefox and Edge have nothing at the moment for them.

I wish this was something I could use full-time. The only good polyfill that I was able to find was a postCSS plugin to allow you to use this syntax now.

The syntax is clean and tidy and fun to write and it has great support for Chrome if you are working on just an extension or an app.

 

My Hour With Bots

Facebook Messenger as a platform already has a ton of interesting hooks. They announced some additions recently, like being able to get an Uber and send Spotify songs from inside the app.

This week, Facebook announced their long-awaited Messenger platform. This is going to open up Messenger to bots and communication with businesses and other different aspects of the platform.

Enter the Bots

Along with their announcement today, Facebook introduced three new bots available today to start playing with. CNN, Spring, and Poncho are available for all users today. Facebook said they are going to start to approve bots slowly during the beta phase.

Poncho – Weather

I feel like other than a to-do list, a weather application is always a default go to. Poncho is a charming little weather app that features a cat wearing a poncho. There is an iPhone app for Poncho and even Slack already set up.

Poncho has some cute and charming responses and I was able to even get it to send me a picture of horses running through some water.

I was able to set weather notifications for every weekday for 7 a.m. and 5 p.m. I like the idea of having the weather notification sent to me. Usually, for all my weather needs, I rely on Google Now and IFTTT recipes to warn me about coming rain and snow. The app was nice enough, but I don’t know if this will save me any time down the road.

Shopping with Spring

Before today, I had no idea what Spring was or what type of merchants they dealt with.

The interactions where easy enough and I was prompted to answer a few simple questions. I was then shown inexpensive watches very quickly. I think the thing that was most frustrating about the experience was that to read more, I was taken off Messenger and brought onto the Spring website. I understand Spring wants to get that traffic, but being on a phone, I would like to see if Facebook’s instant article technology could be deployed there. It just felt like it was more moving the search results inside a chat window more than helping me speed up workflow. There is a lot of promise with this one but, I also feel like something is missing.

This might be something on the merchant level, but I feel like payments is another thing that is missing the mark here. Payment is a problem that everyone wants to get their hands on. If messenger becomes a platform that could facilitate that, it could make the experience a lot easier.

CNN

This is one that I felt could have been a really interesting iteration, but it was just messy at times. I was able to read top stories and then I was able to get a few stories related to a specific topic.

It just felt like it was limited. Maybe if it wasn’t limited to one content partner, it could bring some more value.

I also think that it should take a page from the weather app. I would love to get “Morning Digest” that gives me the top five stories from a certain topic. I think that would be a nice way to consume media.

The Future with a Bot

This is an aspect that will explode. If you have a chat bot, you are going to have some sort of Bot API. Telegram and Kik just released updates this week. I am really interested in the update that Telegram just put out. I think that is something that is getting close to nailing it right. There are also some online bots by using keywords like @music.

I am excited by what developers are going to make with these platforms. I haven’t seen anything just yet that is something to get excited about, but it is early and the bots will get more engaging and richer, and will hopefully be able to complete tasks that will make our lives easier.