jsx

There was a point in my life where I got on a scale, and it told me no. I was so overweight that a scale had no answers for me. I remember standing in my bathroom, naked at the time, and I knew that I had some problems. I remember thinking to myself that things need to change. I need to make changes in my life. I had no health insurance, and I was having some strange health issues going on. It was a sad scene in my life. But it was a moment that I used to propel myself into some massive changes. Getting Into Working Out

The thing that got me going was P90X, P90X2, and some other Beachbody videos. These workout programs made fitness accessible. They were great problem solvers that made things easy to repeat and redo. The equipment you needed in your house was not overwhelming. I lost a ton of weight, and I got to enjoy working out through these videos.

However, I needed to find something that would change things up. I wanted to be able to do more, and I didn’t want to buy a ton of equipment. Plus, moving a ton of weights into different apartments is a huge pain in the ass. Working Out in Gyms

Then, I signed up for a local gym that was inside a community center. The gym was about six bucks a month, and it had all of the stuff you could ask for. The beautiful part about it was that it was never crowded, and you could have your pick of the machines.

Sadly, I just moved away from this place and had to stop going and was just back to doing workouts at home. Where To Get More

A friend of mine turned me onto a new gym near his house. The gym was setup as a boot camp style workout. Each time you go to the gym, there would be new workouts on the board, different each time.

I loved going to this place. The workouts kicked my ass every time, and it was always new.

But, the problem was on days when I couldn’t go. I am a firm believer that you can easily do a 20-minute workout five days a week. But, I tried all different kinds of apps and videos, and it was never the same as having something prescribed for you.

I would watch one YouTube video, do about half of it, and then quit. I would do an app-based workout and feel like I did nothing at all. What We Are Doing About It

My cofounder and I workout together about four to six times a week. Whenever I miss a day, I always text him for a workout. Whenever he would send me a workout, it was always a much better time than when I would come up with something on my own.

I wanted to be able to recreate and capture the coaching of working out in a gym inside the home.

We built Insane Tough to be the perfect companion to your gym membership. If you travel a lot or don’t have enough time during the week, our workouts work with what you have in your house and with what is going on with you.

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].

Design

For far too long I have had a single goal to publish an app into an app store. It could be any app. I would write down ideas and even build out detailed spec sheets. Then I would design some screens for the app, in hopes that would jump start me. Still nothing ever got done to get to that goal.

A few weeks ago, I wrote about Bitcoin, and I was doing a deep dive in this space. Also, I was messing around with some Sketch plugins, so I figured why not mock up a few screens for an app. I thought it couldn’t hurt.

I had a Sketch file that was just sitting in my Dropbox folder. Randomly, I woke up on a Tuesday at 4 am. I didn’t need to be into work till 8:30. I decided that I wanted to see how far I could go with this app.

I decided to finish the app in 24 hours that I would have to cut out a few screens and a few ideas for the first iteration. I kept a list and the design of those screens. I wanted to focus in on the most basic thing possible for the app.

The app was just going to display the current value of Bitcoin in USD. I had thought about a few other wrinkles. But for round one, we were going to focus in on just finding a good API to get the information from and just displaying it to the page.

After nailing down the screens, it was going to be deciding on how to do this. I have been dipping my toes into React, and I wanted to see what React Native was all about.

Bitcoin has been something that I have long kept an eye on but never used. I made a Coinbase account years ago, and even had .0001 BTC in my wallet since trying TryBTC nearly 4 years ago.

I never really tried to use Bitcoin for anything until this week. I knew there were some merchants that accepted it as payment, but I always thought it would be harder to checkout.

Louis CK released a new project, “Horace and Pete,” online for purchase and he allowed customers to buy it with basically everything possible: PayPal, Bitcoin, or Dwolla. Buying Bitcoin

Louis CK’s content was only a few bucks, so this seemed like the perfect trial run to get some Bitcoin and complete a transaction.

I used Coinbase and Circle and bought $5 worth of Bitcoin in each app. I used two apps to see if the experience would be constant and if the process would be the same. I was curious to see if Coinbase, which is a little bit of a leader in the space, would handle anything differently than a smaller app.

The process was basically to add a debit card and order a certain amount of Bitcoin, which would then show up in your in-app wallet.

The thing that I didn’t think about was that the value of Bitcoin changes, so the value of my wallet changed in a day. It was not a huge swing, but the value of my wallet did go up. Checking Out

The checking out process was surprisingly easy. You basically get a 15-minute window to send the Bitcoin to a certain address. You have to have a few tabs open to complete the process, but it rivals PayPal in simplicity of checkout. There are some things that you have to be aware of, such as making sure the address is correct, and sending Bitcoins of the correct value can be a little hard to get your head around. For example, 0.012909 BTC was around $5.50 at the time of purchase.

Overall, the process was surprisingly really easy and quick. However, the transaction history of the money sent from the wallet is just a unique address for the company that I sent money to. It makes it a little harder to keep track of what you spent your Bitcoin on. Security

Bitcoin wallets don’t offer the normal securities that we are used to with most of our other financial accounts. Make sure that when you sign up, you take advantage of two-factor authentication, which will send you a one-time password via a text message. Future of Bitcoin

I liked using and interacting with Bitcoin. It was a different way to handle money and make transactions. I think there is something there with it. It felt more secure while also being a relatively simple process. However, it is still something that would need a little explanation before it could be adapted for the mainstream.

I am going to keep using the Bitcoin wallet in certain situations. I think it makes a lot of sense for some types of transactions. I think that it makes some transactions easier.

I would love to see something that could make the checkout process even more painless, or something like PayPal where the browser knows your default Bitcoin wallet and will open up a prompt to allow you send the money to that unique address.

During this whole transition, the one thing that I kept trying to think is could I use Bitcoin for all of my transactions?

That is something that I think I would like to try for a week. Where are the holes and where are the limitations with using it? Is it a safety concern? Is there a lack of merchants? How does the flexible nature of the currency affect me? These are things that I want to explore and want to dive into. Bitcoin does feel like the future of money, but are we ready for it?

Your data is yours, and you should be able to do whatever you want to do with that data. For example, if we use a Google product we opt into a certain amount of tracking and such to allow certain things to be free. However, with all of that tracking and data scraping they do things that we simply don’t know about. Although we are okay with Google getting into our data, we are not with other company or even law enforcement agencies.

We use cloud-based software for nearly everything these days. If there is not a sync or a backup option, I don’t want it. I am writing this in an app that syncs all my writing to iCloud on my Mac.

The encryption and privacy of our digital lives has been in the news a ton lately with the iOS encryption case.

If I was going to break down all of the cloud services that I use on a regular basis, the list would be stupidly long. I have at least five different cloud storage accounts and who knows how many different chat apps.

There are a ton of apps that focus on encryption and other types of security that don’t track everything that you do. A lot of them have to charge, and that might be something that is a deterrent which prevents people from making a switch. For example, we have been trained for the last ten years to expect email to be “free.”

For this roundup of apps we will see what we can do for email, storage, and chatting. These are probably the most used functions on a daily basis. Email

When it comes to email it is almost impossible not to use Gmail. Gmail has become the standard in email. They feature list is long, storage space is plentiful, and it integrates nicely with Drive and anyone with an Android phone.

This is going to be one of the hardest things to give up. However, I have been in a beta for a new email product called ProtonMail.

ProtonMail uses client-side encryption to protect emails and user data. When you login, you have a username and password and then a password to decrypt your mailbox.

ProtonMail also has a cool feature that allows you to set an expiration time on email. Storage

If you have a Google account, you have a Google Drive account. There are a lot of people out there who most likely have a few different accounts. There are even startups that position themselves as combining all of your free cloud storages into one account.

One app that is worth looking at if you want to get away from the cloud storage is BitTorrent Sync, which takes the angle of being a personal cloud. The sync and the access depend on your storage sizes. This is a perfect app to run on a NAS hard drive or a home server that you always live on, because if there is no access to the files then you can see them in the other apps.

There a ton of different options and use cases for Sync. I like that Sync allows for placeholder files for your big files, and you only have to download them as you need them.

If you are looking for something closer to Dropbox, Tresorit is a cloud storage provider that claimed that “Data is encrypted before it leaves your device. Only you and those who you share with can access your data.”

They even offer up a bounty for hackers to gain access to their systems. According to their website, nobody has yet achieved such a thing. Chat

When it comes to chatting there are not a whole lot of options. As many companies are aiming to control this space, there is one app, Signal, that is a leader in encryption and privacy. I only heard about this app when it was mentioned that it was the app Edward Snowden recommend.

Signal is the only private messenger that uses open source peer-reviewed cryptographic protocols to keep your messages safe.

Now, I am not sure 100% what that means, but it sounds very solid. The app also allows for making calls as well, Convenience, Price, and Sign Ups

There are some amazing apps out there that could provide a quality level of privacy to your online communication and day-to-day process, however, a lot of these apps don’t have the firepower behind them. Everything down to the design, the UX and even the price of them is all something that is going to be hard for some of us to swallow.

I have had the same email address for ten years, so the process of changing these apps is a pain. Getting buy-in from your friends and family to change apps is another thing that is a huge pain for some.

However, I definitely do want to support companies that take this issue and privacy seriously.

Each month I like to pick a habit that I want to explore and implement into my daily routine. Some of these monthly habits have embedded into my daily practice, such as writing. This is a habit I have hit over 260 straight days with. However, there are other monthly goals, like my no sugar month, which ended on the exact 30th day.

The key is that I also keep a list of some interesting things that I want to try and explore. I know that some of them will be harder than others, and that might factor that into my decision during the month. The key is to finish them and make sure there are no slip-ups. I like to keep a penalty in place just in case a day goes by and I slip up.

For February, I wanted to try meditating. Every person I seem to follow, and every podcast I listen to appears to mention mediation. There was a famous line that I heard that stuck with me “if you can’t meditate for 10 minutes day, then you need to meditate for 20.” I have tried some apps in the past and have played around with the idea of meditating, but I have never committed to it for more than two days in a row. February was a big jump as I attempted to meditate for 29 days.

I download the Calm app, and I subscribed to their premium plan. They have a bunch of free content, but I wanted to make sure I had the option to use everything in their tool box. You never want to have a lot of road blocks when you are trying to get a habit off the ground. Meditation was a habit; I felt could be largely beneficial. Week 1

Every Monday I am going to report on my progress from the previous week. The first week I started off with a generic “How To” that Calm has in its app. You need 10 minutes of quiet time to finish a “session.” So, ten minutes a day for 29 days that sounds easy enough.

The first takeaway was I was trying to do this before bed, and I nearly fell asleep every time. I changed the time to right after work. That is where I noticed some results, and fast. The first time I tried it, I was super burned out and stressed. When I sat down with headphones on, I felt a lot of different afterwards. I felt much calmer and relaxed; I couldn’t even remember some of the shit that was pissing me off before meditating. Week 2

Oddly enough, Week 2 was much harder than Week 1. I started to get confidence in the fact that I was finally meditating. I felt like I was crushing it and it felt fantastic. Then I started falling asleep during sessions and, even worse, began missing sessions. Week 3

I got back into my groove, and I didn’t miss a session. I started shooting for two-minute sessions in the app and then building back up to the 10 minute that some of the programs do offer. Two minutes were much easier to sell to myself in my head, and I would normally not fall asleep if I did them at night or after work. Week 4

This is where I started to experiment with this practice even more. There was an incredible weather day outside this week and, for being the middle of winter, I had to take advantage. I did my meditation outside in the sun near a lake. It was weird to sit there with your eyes closed for 5 minutes. I thought people were staring at me, but nobody was at the park.

I liked meditating outside for some reasons. First, was once it was all done being outside in the elements was almost a relief. It was hard to explain, it just felt better being outside. Next, There was a true cleanse that happened. I felt refreshed. Next Steps

Calm had a lot of different options and reminded me each night to make sure I had my moment of pause. I am going to keep Calm on my home screen and try to make time for it. I think I am going to keep experimenting with the time of day. I think the morning routine would be a perfect place for this. I want to give it a full week in the morning, as a follow-up, to this to see if that is better for me.

There was a quote that I can’t remember who said it and on what medium but it was something like “If you are too busy to meditate for 10 minutes a day you need 30 minutes.”

This past year has been jammed back with new tools, tricks, and packages to fill up our build processes including. It seemed like we talked about React and PostCSS the most. SVG became a norm instead of some weird thing that nobody used.

I want to break out and list some things that I want to use and some things I use on a regular basis.

Colors

---

One thing that I always struggle with is making a great color palette. This is one of the main things that I like to try and nail down before I start a project because it is one of those things I feel like I never get right. There are two tools that help me:

Colorhunt - Find color pallets quick and easy Blend - Generate simple and beautifulgradients

Grid System

---

If a project were small in size and just needed to be a page or two, I would usually load in Foundation or Bootstrap just to get the grid. But if the project is large enough it would be something that I would like to have more control over.

The grid system you use can be the most important part of your project. It could add a lot of bloat and weight to your project.

Neutron - Sass framework that is flexible and creates semantic website layouts

Milligram - Minimalist CSS framework

Flexbox

---

It is now time to get to know Flexbox. News came down recently that Microsoft is killing support for IE8, 9, and 10. We can now start looking at some features that we once labeled as “experimental” and can use these things in production.

Here are a few resources to get you started and get working with Flexbox.

What Is Flexbox? - An excellent overview of Flexbox spec.

Flexbox Froggy - A game for moving Flexbox

Flexbox- A massive roundup of different Flexbox links

PostCSS

---

PostCSS is a tool for transforming CSS with JS plugins. It has been taking everyone by storm this past year. It has a lot of the right elements of other preprocessors, but it’s very easy to write your plugins.

The ecosystem is rich, and there are many different functions that could be added to your projects and make it work for you. PostCSS feels like the future of CSS. It is something that you should spend some time using this year.

Plugin Boilerplate - How to make your own postcss plugin

Plugin Boilerplate [Catalog of PostCSS plugins] – A list of awesome postcss plugins

Whats Next

---

Sometimes, it feels like there are so many new things that it is hard to keep up. But sometimes it is fun to go out and play with the new stuff to get you excited about the craft again.

On the eve of my 32nd birthday, I sit here as a fraud. That is is something I feel like I deal with every day and something that most people go through on a daily basis as well.

According to Wikipedia, Imposter Syndrome is a “persistent fear of being exposed as a ‘fraud.‘”

Here are two things that I would like to call myself one day and not feel like a complete imposter. A writer and a front end developer.

Writing has always been a passion of mine. Ever since I was 12, I would scribble down notes in a notebook. In college, I would keep a pen and paper in my pocket to write down ideas. I love to write. It is one of the things that brings me joy every day.

How does one achieve the status to call himself a writer? Where is the line between success and amateur?

There is not a day that goes by that I feel like this doesn’t affect me. I feel like each day it grows more and more. I was just trying to do some research on a few topics, and there is always someone that is better than you and someone who is more successful than you. Then you open up Facebook or Twitter and see people doing these amazing things. Then you look around, and you have a Diet Coke at your desk, just wondering what the next steps are.

This is one of the harder things I have been working on overcoming lately. I have been trying to put a focus on creating new content and learning more stuff. I get impatient during the process sometimes. It takes the time to make good work. You have to produce a good amount of shit before something great happens. For example, I want to make a web app, but you have to get good at the fundamentals of writing good code and the foundations of some good programming languages. Another one is that I want to write a book, and it might take a long time. It might even take me writing one and then completely scrapping it and writing another one.

How do you get over that initial feeling of being a fraud? How do you get people to listen to you and take you seriously? I don’t think there is an answer that is a blanket statement for everyone.

That is the one thing I hate about these types of post, and I want to avoid those pitfalls. Everyone feels this way, even the people that you admire. They think they produce shit work at times. Maybe they’re even producing shit that they are currently working on.

There is one thing that I learned about this area. The real key is to keep going and to keep fighting. You think your last essay sucks? Great, hit a new tab and start working on the next one. Don’t like the song you just wrote? Time to write another one.

There is no way around this. When you are creating and trying to produce there is bound to be some garbage. Someone can’t write 15 books without a little junk in there.

Sometimes it hurts and sometimes its just hard to keep going on and pushing forward. But, we have to. We are the creators and the makers. The world needs to hear what you have to say. There is someone out there who might be changed or moved by that thing you are working on. So, just keep fighting through the bullshit and remember, even if you make a change in one person’s life, it is all worth it, right?

Last week, Microsoft announced that is killing support for old versions of Internet Explorer and prompting users to upgrade. This is huge news as this will allow us to start really to bring in some new selectors and features into our product and stylesheet. Now, that every browser will be on that same auto updating schedule.

Usually, whenever there is browser news from Microsoft, it gets me poking around MDN to see what is some of the latest and if there is anything new that I can start using. CSS feature queries as it is named by the W3 spec allows us to do feature detections in our CSS files. Let’s get into an example. Why does this matter?

I love bringing in the latest and greatest CSS into my project and a lot of times before it is something that should be used in production.

This is a clean way to load in something that might only be in use for one browser. For example, say Chrome has an advanced feature you want to bring. This would make that a little easier.

If you wanted to use flexbox but wanted to keep some floats in your stylesheet just in case. You can throw this into your file.

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { .wrap { display: flex; flex-flow: row wrap; justify-content: center; } }

Our on the flip side if you can check to see if the browser doesn’t support flexbox and you can toggle that with the “not” keyword.

@supports not ( display: flexbox ) { .wrap { display: block; float:left; } }

Below, You can see a quick example of how I used it in a recent project.

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

Of course, let’s talk support in browsers. [http://caniuse.com/#feat=css-featurequeries] According to Can I Use the feature is across all the key browsers except for old versions of things like IE. You will still need to use something like modernizer to do feature detection.

This will be useful for trying out new things in your projects. It is also something that could make your stylesheets a little more bloated. Use with caution and have fun and testing out the latest and greatest.

Last week, Microsoft announced that is killing support for old versions of Internet Explorer and prompting users to upgrade. This is huge news as this will allow us to start really to bring in some new selectors and features into our product and stylesheet. Now, that every browser will be on that same auto updating schedule.

Usually, whenever there is browser news from Microsoft, it gets me poking around MDN to see what is some of the latest and if there is anything new that I can start using. CSS feature queries as it is named by the W3 spec allows us to do feature detections in our CSS files. Let’s get into an example. Why does this matter?

I love bringing in the latest and greatest CSS into my project and a lot of times before it is something that should be used in production.

This is a clean way to load in something that might only be in use for one browser. For example, say Chrome has an advanced feature you want to bring. This would make that a little easier.

If you wanted to use flexbox but wanted to keep some floats in your stylesheet just in case. You can throw this into your file.

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { .wrap { display: flex; flex-flow: row wrap; justify-content: center; } }

Our on the flip side if you can check to see if the browser doesn’t support flexbox and you can toggle that with the “not” keyword.

@supports not ( display: flexbox ) { .wrap { display: block; float:left; } }

Below, You can see a quick example of how I used it in a recent project.

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

Of course, let’s talk support in browsers. [http://caniuse.com/#feat=css-featurequeries] According to Can I Use the feature is across all the key browsers except for old versions of things like IE. You will still need to use something like modernizer to do feature detection.

This will be useful for trying out new things in your projects. It is also something that could make your stylesheets a little more bloated. Use with caution and have fun and testing out the latest and greatest.