jsx

Today, I spent a lot of time researching designs and diving into material design. I am trying to develop an app idea. I wanted to learn about Material, and I was trying to consume everything I could find. I found a lot of well done Codepens. I highlighted a few of them below.

Nav Animation Animated Tabs Checkboxes Dialog Box Input Fields Sweet Swipe Animations

Much like writing, design is a hard thing for me to tackle. A lot of times when I sit down to create the ideas are swirling, and it can be hard to get going. Another, thing I struggle with its breaking down my concepts into actionable items. I am getting ready to take on a large project. It will require a lot of planning and organization work. This week I spent some time making some screens to show off for a proposal.

Most of the time when I am working if its a new site you might use a grid system or might pull in something like a framework to start going. But, when developing and working for a new native app. It is hard sometimes to start from scratch.

Good design is something that should be honored and admired. Good design is something to get excited about.

When it comes down to it at the end of the day, I just want to make something like this.

I found a repo over on Github that just got me really excited tonight. I had to just post a link to this.

Quark Shell helps you mac menubar using HTML and JavaScript without writing any native code.

Something about that got me really excited. Maybe it will help with the bloat of browser extensions.

You can read up on it over on the repo here.

CSS can be sneakily powerful at times. There are times when it could really get yout out of a jam with some of the lesser know selectors and property. Today, content and attr solved a really special problem from me. These have been around for a long time but in the work I do they are not necessarily used in every project. But, when I do pull them out of the bag of tricks it always seems to blow me away. Below we have a good example of content in action.

.sample:after { content: “I am hardcoded text”; }

attr are used with custom data- attributes. Its hard to example so lets just see an example that will help.

div[data-step]:after { content: “Step ” attr(data-step) “”; background-color:yellow; }

Today, I was trying do a few things in CSS that just wouldn’t work across all browsers. This started me doing a little research whole to find some new selectors. I found a few things worth noting and getting excited about.

:required and :optional – This is for use for forms that are required and just optional. A nice way to style warning messages when you are using the HTML 5 form validation.

:matches() – This selector looks like its purpose is to simply things. It is mainly used for grouping things together.

.special h1, article h1, aside h1 { color: red; } /*same as */ :matches(.special, article, aside) h1 { color: red; }

Last week, I stopped my daily habit of writing. It was one of those weeks that I couldn’t sit down and focus on anything. I only posted once last week, and that was already something that I had written up.

Over, the weekend I stopped and tried to write. I have a list of predetermined topics in times like this. But, still those didn’t work at all. Even tonight, I have issues that I want to get down. I have outlines and actionable items, but I have a hard time focused on those.

That is the power of sticking to those daily habits. After, just merely a week of breaking the chain. It can be challenging to rewire your activities again.

The best thing to do is to keep showing up. Eventually that place and zone you were once in will come back.

This was the week of the Apple Watch. The watch is officially out in the wild. So naturally, the app store has been flooded with new items and app updates. I don’t own an Apple Watch and won’t get since I have an Android. But, there is a lot of interesting things happening in the space. These are just a few of the things I found interesting.

Calm - The meditation app Calm has released support for the Apple Watch. I don’t meditate, but I can see this being a real use case. It’s a hard habit to get started on and some small vibrations to let you know when you finish.

Invision For Apple Watch and Android Wear - I love invision because they seem to one of the few companies who are always on top of it. If something new is out Invision is in that space. I think for such a new device, this is where Invision is going to be super helpful.

Day One - Popular Journal app Day One is now on the watch. You can post some quick entries and read some old posts.

Trello - Trello allows you to add a card, see notifications, and whats do soon. I like the ability to dicate notes. I would love to see some of hot word for use cases like this. I know whenever I am driving I get a lot of ideas. I would say “Add card to trello” and then dictate my note.

Coach.me - Lately, I have been trying to track a few daily habits. Dealing with these on my wrist would be a nice change as this activity you want to track might be far away from a phone or a computer.

Gero - Pomodoro time management for your wrist

Whenever, I start creating something I always start by making a static flat version of the design. I never liked working on a server, and now I want to make sure everything is version controlled. I have an MAMP setup going with Code kit, and that setup works well for working on a theme.

I found Drophost it is a hosting platform that uses Dropbox to sync your files with their servers. There are a few of these hosting services out there, but drophost does allow for a one-click install of WordPress.

Drophost when you enable Wordpress integration syncs your theme folder to your Dropbox account and keeps everything else on their backend. All you get access to is Wordpress admin and the theme folder. While, having limited access to your files can be frustrating at times, it can be helpful that you only focus on the matter at hand.

I am still playing with the service to see if any limitations come up. But, it was nice to load a theme I have made a number of years ago and make a quick little update to the files and still manage to keep everything updated on GitHub.

The early returns are very promising, and I hope it can streamline theme creation.

Revist.io - Bookmarks are one of those things that will never go away. Lately, anything of importance I just stick into Evernote. It is always interesting to see what people can do with bookmarks.

Pocket - I used to use Pocket but then I moved to Instapaper because of highlights. Pocket has just launched a new responsive redesign for their sites. Even if you are not a user, it is worth just checking out as a case study.

Invision Tours - Invision is a product that I never had a reason to use. But, I follow it closely as I see the huge need that it feels, and they just make cool stuff.

Pilot - Anyone who wants to try and disrupt ISPs should be noted and looked at hard. Pilot is a new ISP for New York City at the moment. It seems to be Fiber based and targeting business at the moment.

Pinegrow - Pingegrow is a desktop HTML editor that allows you to create Wordpress themes visually. Also, somehow convert Static Websites to Wordpress themes. That feature alone might be worth searching. As, I prefer to create a static site as to working with a WordPress theme out of the gate.

Pics.io - Version control for your designs. It uses Google Drive for storage. There are a few similar products, but I like that Pics uses Google Drive as a backup.

Marvel Characters Database - Avengers is coming out in a few weeks, and a database of Marvel Characters could come in handy.

Confident Communicator Course - Everyone hates public speaking. This course will allow you to sharpen those skills.

Petcube For Apple Watch If you don’t have a pet this might seem a bit out there. All the pet owners will get excited about this. Petcube allows you to check in on your pet when you are away from home. They have now added Apple Watch support. I like the idea of being able to give my pet a snack from my watch.

Vnyl - A vinyl subscription service. The website is pretty, and I just love the concept.

Hosting of my projects has always been a sore spot for me. I either want total control over the server or want nothing to do with it at all.

Github has a way to eliminate some of that stress for me. Github Pages is a way to host a static site on GitHub’s servers.

Each Github account gets one site with a custom domain, but you also get unlimited project sites.

Projects sites are username.github.io/reponame or domain.com/reponame if you set up a custom domain for your main site.

All you have to go to activate a page is pushed your files to a branch called “gh-pages” and a few minutes later you should see content up on username.github.io/reponame for your projects. Custom Domains

If you want to use a custom domain for your Pages, the site all you have to do is create a file called CNAME and include your URL in that doc.

Configuring A Records

The next part we will look at starting up a blog with Github Pages.

Github Pages uses Jekyll which is a static site generator. I want to walk through a potential workflow for working with Jekyll. I tried to launch this blog on this platform before, I think I have worked out the problems that I have had before.