Cloudfront and Cloudflare personal expernice

Objective

I’m writing this article to express how I’m currently using these technologies. So that later on I can laugh at how naive I was.

The Story

I been building Mythist (Storytelling Site) for a long time but the last 5 months I have had to actually think about server architecture. But before I dive to far into this I would like to talk about the site. The site is separated into two section, web and api. The web is all static files no server side rendering at all. Since my web is all static files than this leaves me some awesome options. Such as CDN. At first I had been using ec2 box with nginx. But I knew I could do better. I had read a post by Dan Esparza about S3. I really wanted to give this a shot. I knew I needed SSL for the web otherwise the browser wouldn’t send the ajax requests. Since the api request contain sensitive data I need it to be encrypted. Luckily the smart guys at amazon had already had a solution for ssl of s3 and it was Cloudfront SNI. I was really happy about this. I got everything setup and started doing some tests and bam. The mobile browsers on my phone and a few others posted up the we cant authenticate the root cert or whatever. So I had to find another solution. Thank fully I saw something on hacker news about Cloudflare. I thought hmmm I wonder if I could use this instead of Cloudfront. At first I was a bit confused on how Cloudflare works. I didn’t upload any files or really do anything for that matter. It was very magical. But I had to make changes to files and couldn’t figure out how to upload a file to Cloudflare. Well duh that is not how Cloudflare works it didn’t download the source it’s just doing a redirect. So I started to get a better grasp of what this redirect means. My current understanding of how this works is the user connects to Cloudflare grabs whatever cached resources they have and grabs the ones not cached this is all via ssl. Now if Cloudflare is missing a file it will go out and grab it from Cloudfront. which in turn grabs it from S3. The way I have Cloudfront setup there is only https. Now if I could find a way to force Cloudflare to force https I think I could get rid of Cloudfront. There is really no reason for the source to be grabbed via ssl. I use headers for my authorization but it is only to the api and is injected the web code via js so grabbing the web shouldn’t contain any sensitive data. So if your using cookie auth this won’t work out very well as your sensitive data will be sent out when grabbing source via Cloudflare. Unless Cloudflare has a way to remove cookies from the request. This is a bit of assumption that Cloudflare passes the cookie data with the request.

The points – tl;dr;

Cloudfront invalidation is painful and time consuming. Invalidation of files is not agile if you make a mistake you have 15 to 30 mins of suffering till the mistake is fixed. (build your web with versioning in mind)
Cloudfront sni ssl doesn’t work for some mobile browsers
Cloudflare is magical and their ssl so far works for everything I have tested with.
Versioning – I haven’t really figured out the best approach to this but next time I would like to change my index html to point to a certain version. Something like below.
/index.html <- some logic to take from query or cookie to point to different versions. Again no sensitive data in cookies.
/gitHash/source/index.js <- body inject the index html view.
This form of versioning could allow for soft deploys but at the end of the day your still going to have 15 to 30 min suffering period because of cloudfront.

Standard

Week 7 & 8 Story Tellers

I have wrapped up all the features for Story Tellers. I’m sure I will be dealing with bugs on this product for the next several months. The big thing that I added over the last few weeks is sharing. Readers can now share your story with their friends on facebook/twitter.

Now I must leave my comfort zone of programming and mostly being anti social. I need to go out and meet new people and hire some writers to seed the content. I’m hoping to get a booth at the up coming phx Comicon. At which point I think it will be wise to open up the app for everyone to use. Hopefully we will have some sweet swag to give away there!

Additionally if anyone is interested to get a sneak peek of the application feel free to hit me up I will give you instructions to check it out.

Standard

Week 6 – Story Tellers

Only two more weeks left before the project should be completed. However like always things are moving forward and well I think. I made up for last weeks performance by picking up a bit more slack week 6. I made the app more mobile friendly by more I mean a hell of a lot more. I had to deal with fonts and them be more responsive. I had to fix menus that where going out of the view port. I think the mobile version is really starting to look nice. I haven’t mess with the editor for mobile yet and I know that one is gonna suck lol. Besides that I had a welcome modal to help direct the user and a tour for the editor. I think styling will mostly be the trend from here on till week 8 and than it’s time to leave my comfort zone. Marketing/recruiting I need to find content creators after week 8 I will be hitting up the contacts I have saved up over time and start to make new connections. If you or someone you know enjoys writing stories send them my way.

It Is Crunch Time.

Standard

Css, Responsive, Font-Size

A few days ago my designer friend was looking at StoryTellers.  He came across a page in a story I was writing where the title is taking up a lot of space.  Granted on my laptop fully expanded its not that bad.  So I told him it is complicated to fix an issue like this.  I battled to not spend time investigating it however he got through to me that it needs to be fixed and look better than it did.  I found a lot of articles on the topic.

Some great resources on the different font size types.
http://css-tricks.com/css-font-size/
http://css-tricks.com/viewport-sized-typography/


I ended up going with using em for all the fonts(selected in the editor) and setting a body pixel with media quires.


@media all and (min-width: 630px) {
 body {
  font-size: 16px;
 }
}

@media all and (min-width: 430px) and (max-width: 630px) {
 body {
  font-size: 14px;
 }
}

@media all and (max-width: 430px) {
 body {
  font-size: 12px;
 }
}

Shows kind of the use of ems.


Update: I been running into an issue like the following

http://jsfiddle.net/LhNfq/
If you end up nesting em they multiple the children font-size.

Standard

Week 5 – StoryTellers

Week 5 has been awful.  I got sick so that like killed two days.  I think the most memorable thing I did was setup the auto-back up for mysql.  Which I’m thinking we should have used RDS instead of on a stand alone server.  I also went to Desert Code Camp.  There was a presenter on the AWS stuff which is making me want to go full AWS and not look back.  I’m really enjoying working on this project there is so many things I want to add but I think most of them will have to wait for a bit I need to prove the project is worth more of an investment.  I’m also for the look out for authors wanting to write CYOA style stories.  If anyone reads this likes to write CYOA and willing to write some stories I have a budget dedicated to authors alone so hit me up.

Standard

Week 4 – StoryTellers

Week 4 has ended and it was a decent week.  Some of the big things that got added new banner, and ssl.  Note took me like 2 days to get the ssl in as I have never added ssl to nginx or linux nor did I understand the building the public cert.  On side note I think I should have done a better job mapping out all the things I needed to do to complete the project.  As its a bit harder now understanding the scope when things like ssl and db automatic backup are stuff I didn’t anticipate.  Well I did but hadn’t put that down as an item that needed to be completed.  I have tried before to come up with everything I need to do to complete a project sometimes that feels like building a mountain out of a mole hill.  I might have to try this route again I notice that even though I’m completing a lot of tickets there is always more poping up bugs/desgin/ and some times missing features.  At this point I have been ordering my items by most important and will work down the list possibly tomorrow I will add that stuff I had left out.  Additionally I feel the fear of failure constantly sneaking up on me.  I know the longer it takes to complete things lowers my chances of success.  Success is currently labeled as making a self sufficient business where I can continue to make my own projects and ideas.  Yet I attempt to strike down the fear by reminding myself that what I’m doing is difficult but till I finish this project till its in the hands of the users will I be able to know anything.  What my friends like what I like is not what everyone likes sometimes people just want to find something to be apart of.

 

So we did have some what of a design discussion about the header below.

header_concept_3

Is the menu in the banner obvious?  Hopefully eventually I will be able to give numbers to support this is or isn’t obvious.

Standard

Week 3 – storyTellers

I was able to get the major missing features in place.  One was forgot password email the other was allowing user to update/delete their stories (I know pretty big feature to be missing just overlooked it).  Getting much closer to the end now.  This last week I did end up really battling with knockout and ckeditor.  I will try and get a post up about some of the issue I ran into and how to solve them.  I also have started using trello for tracking everything.  This is the first week I have used it so far its been great.  I stay more focused/organized, and it motivates me when I see the done pile start to stack up.  Right now my current setup is a to-do, working, and done columns.  Still trying to figure out what I will do with the completed tickets.  I would like to put them all together under something like ‘week 3’, will need to see if this is possible.  Also it would be great to map cards to git checkins like how its done in jira.

Standard