jsx

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.

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?

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.

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.

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.

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.

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.

This month’s challenge was to go vegetarian for the entire month. I usually am not a heavy meat eater except for chicken and bacon. I think that for dinner, it would be easy to substitute meat for vegetarian options, but there is something about bacon and eggs in the morning that I am going to miss. I can already feel that. Week 1

The first week was easier than I thought it would be. We knew it was going to be hard and way too easy to just eat pizza and some bread every day. For breakfast, I stuck with a smoothie and a protein bar.

The first thing that I noticed was that I was sleeping better. I felt a lot more refreshed each morning. Waking up was a little easier and I felt like there was no grogginess or anything like that.

Picking meals was challenging. I think most people have a few staples in their household and have that one meal that they can whip up in a few minutes. But, for me, those meals all had meat in them. So this was a big change for me. I had to think out of the box and get creative with cooking and shopping. Week 2

This is where I started to notice that I was actually craving meat. It wasn’t anything major, just in small moments. The thing I noticed that was the most interesting about this experiment was that it was making me think about my meals.

I would always stop and take a moment. It might be 15 seconds or it might be 15 minutes. But, I would have that moment of pause that would make me think about what I was eating, something that I never really have done prior to this experiment. Final Week

With the final week, we wanted to mix things up a bit and found a few recipes that were quick and easy. We wanted to make something that was a little bit more polished that didn’t take us about two hours to make.

We decided to get a subscription to Green Chef for the month. Green Chef sends you ingredients for recipes that are all prepared and sized out. It makes the cooking process slightly less of painful but doesn’t make it completely painless. I want something that ships in a bag, I put it in a pan, and magically I have a dinner. Green Chef helped get some new tastes into the mix. A few of the recipes were amazing and some were a little bit more on the average side. Recap

I think this whole process was a lot easier than I thought it was going to be. There are many meatless options at restaurants that I never really thought about it. You are limited, but it is something that was easier to navigate than I thought. I thought that I would crack about two days in.

It is officially a week after the deadline ended and the only meat that I have had so far, believe it or not, was bacon. I have had bacon in a few meals. I have had little desire to go for red meat or even chicken. I developed some tastes and some habits that I did find myself liking.

I don’t know that I would go full on vegetarian. It seemed like I ate a ton of carbs during the process and I did find myself eating more. What I had to do toward the end of the process was supplement some of my meals with some mini protein shakes. There were some days where I felt consistently hungry.

Late last year, I went on a cruise. The cruise ship had a robotic bartender that would serve you drinks that you ordered from a tablet in the bar. Of course, this was the first thing that I wanted to check out; a delicious piece of technology awaiting me on a vacation.

When we got the bar, it was a bit underwhelming to see the arm make the drink. There was a cool display that showed what drink was coming up and whose order it was. It was really easy to order something really specific or abstract, but, on the other hand, it didn’t feel like it was faster than a human making the drink. It felt like it was something in Beta and was just cool to look at during a vacation.

Last Friday, I was sitting in a Starbucks drive through, like I do most Fridays before I go to work. I typically order the exact same beverage. It was a little later than I usually go and the line was a little longer. You know the drill. They made a mistake on my order and it was a very human thing to do. I wasn’t mad as I worked in the food service industry before. You can’t be 100% all the time. It’s just not possible.

The Launch festival was early this month. I always try to check out the companies that get featured. The winner of the competition was a company called Cafe X.

Open today serving fresh illy coffee! 610 Nathan Road, Mong Kok. Posted by Cafe X on Saturday, April 9, 2016

That looks amazing, doesn’t it? Can’t you just picture that inside your office in five years? Why Does This Matter?

The robotic bartender was a good start. It showed us some of the possibilities of what could we really do with it. Do we really want to wait?

Cafe X claims to be able to serve you coffee in just under 10 seconds. The machine looks like it is something that could replace baristas at Starbucks. I can see a day where you order from your car, drive over, and the drive through line is almost nonexistent. There is some sort of authentication and then your coffee comes out of a slot. We could be looking at a step into the future of food and food services.

Part 2 – React Native

I have been dabbling with some React work over the past few months. It is hard to find a blog or some code on Github that does not talk about React. I had heard about React Native, but had been using Ionic for another project to get the cross platform support. Now that React Native had Android support, I had been looking for a project to dip my feet in the water.

I had a design that was fairly simple and I wanted to use it as the basis to learn a new technology. React Native has really good documentation, so the stage was set. It was 4:30AM, my design was finalized, and I was ready to build.

Basically, I really didn’t know much about React and its workings. Now, at 4:30AM, I was working with React docs to get me up to speed. React Native comes with a boilerplate code right off the bat, so it was cool to be able to study how some of the text and data was being displayed.

For the app, I needed to get some data. The app was just going to display the current value of Bitcoin. I had found a simple API that displays the current value of Bitcoin in multiple different currencies, so the API was all set, but I couldn’t figure out how to get historical data to make that chart happen. The chart was turning into something that I might have to put on the back burner. After an hour of research, I was still unsure about how to get the historical data.

I only had one more hour before I had to leave for work, so I worked on the style of the single view. React uses Flexbox for styles, so I spent some time setting up my colors and trying to work in some fonts, playing with things that I was comfortable with. There is nothing like getting into the middle of a project, having to leave, and not being able to properly debug. I would stew on it all day.

After I got back from work at 6:00PM that night, I set a deadline to submit the app to the Google Play Store before I went to sleep that night. I had a Google Developer account since it was a little bit cheaper than the $99 Apple fee.

I spent most of my time working in the index-ios.js file and using the Xcode simulator to look at the iOS version of the app. Developing this way was really painless and enjoyable. Trying to work was Android tools is a pain in the ass. Android Studio is a step in the right direction, but the Apple Developer tools are just far better.

I was working on that one file, but I had never anticipated publishing this app in the App Store. But, it was easier to iterate and start some trial and error. I am used to web dev and being able to basically just try anything and refresh.

In my mind, I could just copy this over to Android, compile, and move on. However, for Android you need to sign the APK. It was a whole process and I was getting tired of looking at a screen. My deadline was looming as I spent a lot of time figuring out how to get my API data to work the way that I wanted it to.

I signed my android APK file but didn’t really test things on an android device. I made my Google Developer account and filled out a poorly worldly description of the app. I decided to push the APK live without testing it on a device or even in an emulator.

I felt like I was on top of the world. The listing was rolled out to Google Play. I did it! A long standing goal of mine is finally accomplished.

I went to bed, feeling like I could do anything. I was even writing a list of new app ideas.

The next morning, I installed the app from Google Play. There is no feeling like it seeing your app in the store. It was different from a web project. There was something exciting about it.

I installed it, and my app crashed. I checked some of my code and then submitted another APK before I went off to work. But, the app kept crashing and wasn’t working.

I finally spent some time working on the Android side. I cleaned up my code, installed an APK on an old device, and found what my bugs were. They just there from a rush job. If I was going through the process with some calculated effort, they would have been caught. But I was trying to hit a goal and in the process, I learned a bit about the building process for Android and the differences in the platforms for React.

React is turning out to be an amazing platform. This whole process gave me a small taste of what I can do with React Native. Just looking around, there is another project for React Native Desktop: to get Native Mac Apps running with React Native. The ecosystem is so rich and powerful. Just this past month I saw that React now has more stars on Github than jQuery. This is a space that I am going to spend a ton of time in. There are a ton of great resources out there, but if you are looking for a few quick roundups to get started, I would recommend this [CSS Tricks] screencast and this React.js [free course].