jsx

This morning I wanted to start playing with SVG. Snap.svg is a JavaScript SVG library that allows you to create, animating and manipulating either existing SVG or elements you have made in Sketch or Illustrator.

To get started we just create an empty svg with and id.

Next we need to active Snap onto our svg element.

var s = Snap(“#svg”);

Now, lets draw some stuff.

var circle1 = s.circle(200, 200, 140); var circle2 = s.circle(150, 200, 140);

To break down the attributes of circle_2 the x-axis coordinate is 150 and the y-xis is 200 and 140 is the radius of the circle.

Then lets group the elements together.

var circles = s.group(circle1, circle2);

We can add attributes now to our circles group. Lets just add a little fill color and some opacity.

circles.attr({ fill: 'mediumturquoise', fillOpacity: .6 });

Snag is a powerful library. It feels like that jquery of SVG. Next up, I want to see how to animate a previous SVG I made in Sketch.

My wife and I went away for my birthday weekend a few weeks ago. There was an a interesting product of that weekend trip. Whenever we go away I just take my kindle and my phone.

At our hotel, the first thing I did was check my phone to see if I missed anything during the drive. I had a few random notifications but I noticed that I didn’t get any service. I was in a true T-Mobile dead zone. I couldn’t even get 2G it was nothing.

But, we were going out for the night and I turned my phone into airplane mode and I didn’t look back. There were a few phantom checks to see if anything was going on but as the night went on it was slightly liberating.

I almost felt like I was doing a juice cleanse for a day. It felt like it was a day of cleanse for my brain. It was only 12 hours or so of minimal internet but I felt it. I noticed it in my mood and my thought process.

This is something I am going to try to do on a regular basis. I am going to start once a month and see how that goes and then maybe move it to one evening a week if the benefits keep coming.

Another blog coined the term “Flexbox Fridays.” I wanted to run with that and post a few links and tutorials that have helped give me a basic understanding over flexbox.

http://www.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ http://demosthenes.info/blog/780/A-Designers-Guide-To-Flexbox https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

The last few days I have been spending some time in Sketch. It took me some time to get used to the workflow. I think some of these are close to what is used in photoshop and illustrator. It was a little embarrassing but these three really helped me this week.

Z Zoom tool

Space Hand Tool

Enter Edit currently selected layer

I also found this today. The mega list of keyboard shortcuts http://sketchshortcuts.com/

I usually keep a list of of my ideas. They can range from the simple to the massive. About two weeks ago, I read https://unicornfree.com/just-fucking-ship and thought enough was enough.

I launched two ideas, Mentobi and Insane Tough. I have been kicking these two ideas around in my head for weeks now. I didn’t really expect many results out of the launch. It just felt great to put something out into the world.

They were not pillars of web design. I had just a few rough ideas and I wanted to give myself a deadline to get them live and functional. I thought I would just sort of pick one and see if I can get some users and maybe build and email list. The only thing I believed in were the ideas. I really didn’t have much of a vision after this or any business plans or concepts. This is the farthest I have gotten in years when trying to build a product. I had my idea, a URL, and a few pieces of content. Step 1 is done and now it is time to figure out a way to get some views onto these new sites.

I tried to push the links around on Twitter and some other sites. Nothing heavy but just trying to generate some eyeballs. I wanted to see if there where any interest in these ideas so I can bury them and move on.

Then, something happened. I got an email. I read this email about 4 different times because I couldn’t believe it. I got a customer! I got a paying customer. I read the email at about 6:30 AM on a Friday morning. Still, I don’t really believe it. In less than a week, for something that did not exist, I got a paying customer.

There was this rush that came over me. I felt like I had some new super power. It was unlike anything that I ever felt before. There was a sense of validation to my ideas- to even some of my past ideas. I felt like I could do anything.

Yet, there was one thing I keep thinking. How do I get Customer #2. Someone believed and now I keep thinking what can I do with this? How far can I go with this?

But, first things first, I have a lot of work to do. I merely sold an idea. Now, what the hell do I do?

I never saw the need to use git or github. The dev process at my day job didn’t allow us to use any version control system. Most of my solo projects are just me solo in an environment I haven’t had the need to collaborate on with anything in a long time.

I had a little file issue with my Mac and my local setup just went away. Files were damaged; it was a big problem. Weeks on a Wordpress theme just down the drain.

I had a github account for there code snippet system “gists,” but I had no open repos or anything like that. It was not part of my workflow at all.

For my next project, I started using it with the command line. It was hard for me to remember all the syntax and get the performance I wanted right away.

I decided to use the Github Mac App. Now, I know some people are squirming at the prospect of using a GUI for a task such as git. But, it really broke down the barrier of entry for me and allowed me to get the process into my workflow. It was easy to open the app and type a message and make it sync. Using the command was not part of my process yet, and the app really helped me get it into my system.

Once you start getting really comfortable with the process, you can move to the command line to get a more robust set of options and settings.

Github has another feature that gives it a killer reason to add to your workflow, and that is Github pages. Pages solves a huge problem that I have when working on a project. It allows you to turn your project into a shareable URL.

Before we go any further, we need to talk about Branches. Each repository can have multiple branches of the same project. So you start off with a “master,” and you can break it off into a working branch or an experimental branch if you want to get weird with your project, or you can work straight off the master.

When you host your project on github, all you have to do is push code to a branch of gh-pages, and you have a working url and project site.

Another great usage is keeping all of your “todo’s” in one stop. You can make a new “issue” on your github page to keep all of your upcoming fixes in one spot and can easily allow others to add and give you feedback on the project.

Also, github is everywhere these days. People are building businesses on top of it. There are apps to expand on your gists, issues, and history. There are other ways to host your git histories. But, sometimes it is easy to start with the most popular. The documentation and process is clear and well released. There is even a way to take your github repos and use it to host your sites with paperplane.io.

There is no reason to not start using git and using it today. If the command line scares you, get the app and start pushing, synching, branching, and forking.

For such a long time, I wasn’t buying into this. I can write CSS just fine. I did need to add another layer on top of that to add another step to my workflow. I was also worried that this would be just a small movement and then it would be “hot” again to write vanilla CSS. Which is what is going on with Javascript. I feel like I just read four posts titled “You don’t need jQuery anymore.”

But, blog post after blog post got me to finally give it a chance. I started with some very basic syntax. I just wanted to dip my toes in and see how I liked it. Within about 30 seconds, I saw and felt all this power that I was missing. Yes, SASS does compile to CSS, but this layer will give you more power and will clean up your code and make your work easier to scale and easier to maintain.

I want to walk through some small tweaks that you can implement today—some ways to get it into your workflow, even if your development environment is not be ready for it. I’ll help you get comfortable with these basic SASS concepts to just get your feet wet and get you looking at your CSS a little differently. Nesting

When I first read about nesting, I got upset. I thought to myself: “This is dumb. Why would I ever use this? It would just mess up my CSS.” Literally, the nav project I worked on looked like this:

.nav ul { } .nav ul li {} .nav ul li a{}

That went on for easily 50 lines, but it’s Sass that can be taken care of with just a small tweak.

.nav { ul {} ul li {} ul li {} }

It makes your file so much more readable, and makes it easier to find the story that is unfolding in your stylesheet. Also, you need to be careful of nesting too deep. If you go more than three levels deep, you are going to have a bad time. If you want to go deeper than the span in the example, it might be worth taking a step back and looking at your markup. That is going to a hyper specific rule and you might be able to work around that.

.nav { ul {} ul li {} ul li { span {} } }

Variables

$font-stack: Helvetica, sans-serif; $white-main: #FF0; $link-color: #CACACAl;

SASS use $ to set a variable. The best way to think about a variable is as something that is stored and can be accessed throughout your document.

Variables allow something like below to happen. We have all had that project where you have to change your color scheme or maybe some last second updates. Setting Variables for your colors, fonts, and anything else that might change over the course of a project is as simple as changing the one line.

.nav { color: $link-color; }

Workflow:

The agency I work for has a very specific LAMP stack that runs a very customized content management system. We really can’t roll out a full SASS workflow into our system without a major rewrite of the system. But, I found myself using SASS everyday. There are a number of tools that make this easy. Codepen

This is for if you are building a little component for an existing page or just need to make a quick mock up. Codepen has become an essential part of my mockup process. Codepen also has great SASS support and it will allow you to pull in Compass (link to more details) which, as stated on their homepage: “Compass is an open source CSS authoring framework. It allows you to pull in a lot of goodies into your SASS file.”

Codepen will compile your SASS into CSS and will allow you pull in Compass and really be able to expand your CSS and do it all in the browser. It will become an essential tool in the early process of learning. It is the best way to jump in and start trying some of these SASS rules. Apps

There are a number of Apps that will watch your local files and compile SASS To CSS. My favorite app is Prepros. It is cross platform with both Windows and Mac apps, and the options are endless. Prepros compiles not only SCSS, but will also compile your Coffeescript and even Haml and Markdown. It is free to try and the pro version is like 30 bucks. What you get makes this well worth it. It changed my workflow forever after grabbing it. The live refresh and Sass error reporting make it one hard thing to give up.

I hate everything I create. I have been really working on writing more. I have been working on getting into the habit of doing daily pages. Today, I was listening to a talk about selling digital products. I was at work, so my attention was in and out. The audience member was talking about her product and she mentioned that she wanted to get people to tell their story and getting themselves to talk. I am one of those people who have that little voice in their head that tells them to shut up.

So, I am going to take the advice and start talking. I am going to find a blog that is a hosted solution so I can’t tinker too much with the design and layout of it.

I am going to give myself some metrics and challenges to go through. I am going to make sure that I write X amount of words every day and try to post at least once a week. If Sunday hits and there is no post, I am making sure that I am writing something and just posting whatever it is, and not really care about the criticism.

I read this epic deck from a young founder who just sold his company. It was one of the more inspiring reads I have come across mainly because he really just broke it down in detail.

As I kept reading all of his advice, I kept saying to myself. Why not me? Why can’t I do all the things I want to achieve? I want to do something that no one has the balls to do. I want to go after something really ambitious and fall flat on my face if I have to.

There was one point that the dude made that keeps sticking with me. He provides a lot of exercises in each section but tells you to write out 1 year goals, 5 year goals, and all time goals.

I going to have some writing metrics and I have a few side projects to finish this weekend and I am going to start branding myself online. Get some websites and an identity that I am proud of and trust in the design.

I shipped a new version of my portfolio site last night. It is amazing what shipping one thing can do for your confidence and mood. When I pushed those files, it was like I conquered the world. There was this geochemical of pride and excitement. I wanted to just sit down and start creating everything I had in my head.

Recently, I had just finished a 30 day writing challenge. I wrote about 27,000 words in that period of time. It was one of the most eye opening things I have done in a long time.

During that month, I kept thinking of this video.

http://player.vimeo.com/video/85040589

The video and the message was just spot on. Even in those 30 days, I experienced that. There was one night, I was so happy with my work and then the next night, I want to give up because I thought the work was so bad. But if you keep producing and keep pushing through these early moments, the work will get better. I think it took me the 30 days just to get the confidence in my voice to get a blog posted. I was scared to ship but writing that huge volume in that short burst just allow me to work out some of the garbage but it got me hooked. I got the bug.

It was really liberating to stick to that schedule because it removed all of the anxieties and fears I had with writing. I was just producing content and it felt amazing. At the end of the day, that is just want I wanted to be done. I just need to shut up and write.

Virtual reality was never a space that I got really excited about. The Oculus rift did seem cool but I never felt the need to actually try it out. At this year’s developer conference [link] Google gave away slabs of cardboard that they dubbed Google Cardboard [link].

The Cardboard is a simple and inexpensive way to experience VR with your smart phone. You follow a set of instructions to cut pieces of cardboard into this.

Dodocase is the first to make a premade kit for the lazy tinkerer like myself. For 25 bucks you receive the precut cardboard, lens, and NFC card all ready to go.

The build process was pretty smooth as we were able to get things all setup in under 30 minutes.

My One Plus One was just too large to fit inside Cardboard so we had to use my wife’s Galaxy S4 [link], and that just barely fit into the smartphone slot.

Google has one app and some “Chrome experiments” that work on the Cardboard. The NFC chip on our cardboard will load the app as soon as you place the phone down on top of the NFC card.

The app comes loaded with about seven different demos to try out:

Google Earth, Tour Guide, Youtube, Exhibit, Photo Sphere, Street Vue and Windy Day.

Google Earth is just like a flying tour of Google Earh. The graphics on this were just terrible and started to make me feel a little sick. I didn’t spend a lot of time wiht this one.

Tour Guide is a walking tour guide of Versailles. You can explore and are given some audio snippets that explain what you are looking at. This was one of the more impressive use cases that I have found. The experience was really immerseve and was just cool to walk around and tour. Another one that could of used a graphics overhaul and that would of really brought this out to another level.

Exhibit and Street View follow on the tour guide example.

Exhibit lets you view some artifacts and Street View allows you to take a “drive” through Paris on a summer day.

Windy Day is an animated short that follows the story of a mouse trying to get his hat back on a windy day.

Google also has made a few more experiments for Chrome in your smartphone’s web browser.

There is a coin collection game, a roller coaster, a stereoscope toy, “visit bears in Russia”, or a virtual helicopter ride and a few music visualizations.

These experiments show also the power of just using Chrome for your apps. Some of these feel very sophisticated and showcase what just developing for the browser can allow some detailed stuff. From, the example code it looks like these are all written in Javascript and use three.js to handle the graphics.

Grabbing one of these kits is a no-brainer. It is a fun little project that will give you a few hours of enjoyment and fun to just play around with some of these demos. Just a word of caution, I had to take multiple breaks as spending too long inside the Cardboard did make me feel a bit ill.

Outside of the obvious use cases for games, it will be interesting to see if people use this for Hangouts (Google’s chat/video app), watching sports or maybe even certain movies being watched in this manner.

This is an intriguing area that we are going in. Samsungand Facebook both making large moves in this space. There are a lot of possibilities and I already have an app idea I am tossing around!