QP: More Vue.js goodness on the Changelog podcast including a great discussion about the nature of open source and personal projects

Yet another great discussion about Vue.js on the Changelog podcast (http://5by5.tv/changelog/184). Whereas the Fullstack Radio interview (https://eli4d.com/?s=Fullstack+vue.js) focuses on where to begin with Vue.js, the Changelog’s interview focuses on Vue’s origin as well as its comparison with other frameworks.

One additional aspect that this episode touches on is the nature of open source and the ‘line’ between a personal project versus an enterprise worthy one. This discussion begins around 55:40 minutes into the podcast. For anyone trying to persuade your company/management about the merits of using an open source project (whether Vue.js or otherwise), this discussion is for you. I especially like Jerod’s (https://changelog.com/author/jerodsanto/) preceptive comments about assumptions of support and laziness when it comes to open source.

Advertisements

Posting to WordPress by email

Overview

This is a quick post about posting to wordpress by email. WordPress has excellent instructions on posting by email ( via https://en.support.wordpress.com/post-by-email/ ). This post is more about limitations of the post-by-email feature and how to use TextExpander to be more efficient.

Why post by email?

My thinking is that I want to be able to post short snippets by email. I got the idea for this approach from Manton Reece. Like Manton I think that Twitter and Facebook are too ephemeral. So my goal is to post only short snippet-ish posts by email. I’d like to limit these posts to 200 characters if possible but I don’t have a good way of universally controlling the size of the post when posting by through my other devices (without putting my post in a separate editor).

There’s also the issue of post title – should such short posts have titles? Manton indicates that microblogs should not have a title. At this point I’m not too dogmatic about this so I’m fine with having a title where I distinguish it with a ‘Snip’ at the beginning.

To setup just follow the instructions

WordPress’s instructions are excellent

To setup just follow the instructions

When you post via email you get a response from WordPress.com

This was my test post (draft – never published) where I tested Markdown support. It’s a very nice response email telling me that WordPress received my post.

When you post via email you get a response from WordPress.com

Limitation – no Markdown via email 😦

It is somewhat strange but posting by email to WordPress does not interpret Markdown. WordPress’s instructions indicate that different email clients handle formatting differently which is why formatting is limited. Markdown is perfect for posting by email but it does not work with this approach (currently). I think that WordPress would need a new tag such as [markdown on] (with the default being off) and then interpret Markdown in the same way that the WordPress site editor interprets it.

I’ve sent WordPress support a question about this

I’ve sent WordPress support a question about wanting some Markdown love.

I've sent WordPress support a question about this

WordPress support response

WordPress support response

Using TextExpander

TextExpander is awesome and helps me reduce typing significantly both on the Mac and on iOS. Below is my current TextExpander snippet.

Some notes about the choices of the tagging:

  • I choose to explicitly put the title in the body of the email rather than through the subject line. My thinking is that this is close to the meta settings for static blog systems.
  • The [end] tag is very nice because I can put some optional tags or reminders in case I want to change things. I was initially thinking of using a pop-up menu for all the tags on my site but this seems like overkill. It was easier to just copy the tag cloud and put it in the optional section

Version 0.1 of my TextExpander snippet – the popup design choice

This was a first good try but TextExpander custom keyboard on iOS doesn’t work well with TextExpander snippet popups. In order to use popups I would need to use something like Drafts. Drafts is a great app but I don’t want to complicate my toolchain.

Version 0.1 of my TextExpander snippet - the popup design choice

Version 0.5 of my TextExpander snippet – the flat design choice

In my experiments I found out that normal publicize settings through the WordPress web editor (Twitter in my case) do not kick up without a tag push. I also added a ‘Snip’ in front of my title. I also went with a publish status that is offset by a 2 hour delay just in case I completely mess up a snippet. My original tags were also messed up because I used a gigantic phrase for one tag.

This non-popup design allows me to use the TextExpander snippet on my iPhone mail app, save it to draft and pick it up on my Mac’s mail app.

Version 0.5 of my TextExpander snippet - the flat design choice

Conclusion

It is extremely easy to set posting by email in WordPress for those that are using WordPress.com.

Pros:

  • Post from anywhere you have email access
  • Fairly good controls on post (status, date, etc..)
  • Use of TextExpander make posting consistent, reliable and easy

Cons:

  • No Markdown support (hopefully one day…come on Mattmake it so)
  • For microblogging – controlling the character count is not possible (it would be great to let WordPress.com provide feedback via a [count 200] type of tag)

One thing that I didn’t experiment with is using anchor tags to create links within my microblog post. WordPress’s docs indicate that their system will interpret HTML as follows:

As much formatting as possible will be retained, although the Post by Email system will strip unnecessary HTML tags so that your email is displayed correctly. Note that you will need to use an email client that supports rich text or HTML formatting in order to make use of this feature. Most website based clients (Hotmail, Gmail) do support this, as do most desktop clients (Outlook, Mail). You may need to switch your client into rich text or formatted mode.

HTML and email clients are still a big mess in 2015 😦 .

One last last thing – auto-posting to Twitter and Facebook. At some point I’d like to auto post the actual microblog post to Twitter and Facebook rather than a link to it via WordPress’s publicize settings. There’s probably a neat Node.js or Go solution. It’s another task on my never-ending Omnifocus list.

QP: About Vue.js from its creator

I initially heard about Vue.js (http://vuejs.org) in one of the episodes from the Laravel Podcast (http://www.laravelpodcast.com/episodes/19454-episode-37-i-love-the-things-you-are-saying) where the hosts praised Vue’s clarity and closeness to plain ‘old JavaScript object. This week the Full Stack Radio podcast (http://www.fullstackradio.com/30) had an excellent interview with the creator of Vue.js (Evan You) covering Vue’s origin, as well as best practices in using Vue.js.

How to create a static content server on Amazon S3

Overview

In this tutorial I quickly go over creating a static site using S3. This should be a simple process and for the most part it is except Amazon’s security policy editor. There are many ways to control security in AWS and I beat my head against a wall for many hours trying to figure what would work. I present what worked for me but this may not be the ‘best’ way to do the security for an S3 bucket. If get more info on how to better do it I will update this post accordingly.

Assumptions:

  • You’ve created an AWS account on http://aws.amazon.com (it’s super-easy)
  • My static domain (static.eli4d.com) will use WordPress.com’s nameservers. I host this blog (besides all images and static content) on wordpress.com. The $13 is well worth my time and my content is portable due to the static server usage.

Note: Originally I had created an images.eli4d.com S3 bucket but now I am switching to static.eli4d.com. While creating the images bucket I accumulated lots of scattered notes. If there’s any references to the images bucket it is due to this initial effort.

Get an AWS account

Creating an AWS account is extremely easy and it’s faster than Amazon Prime.

Get an AWS account

How to create an S3 bucket for static.eli4d.com

Pick S3

The sheer breadth of Amazon’s web services is astounding…and it keeps growing.

Pick S3

The creation step is very simple – just click that “Create Bucket”

The only gotcha is that your bucket name should be the exact name of the domain you want to associate it with. So if I want static.eli4d.com for my static content, then I need to make a bucket name of static.eli4d.com. If that bucket name is taken (it’s universal across all of AWS) – then you’re out of luck and have to go down a more complicated route (see https://eli4d.com/2015/09/02/amazon-web-services-lesson-s3-bucket-names-are-universal-so-get-your-domain-named-s3-bucket-before-someone-else-does/ ).

The creation step is very simple - just click that "Create Bucket"

S3 Management Console

S3 Management Console

S3 Management Console

S3 Management Console

It’s ALIVE

Franken url is awake…but inaccessible

It's ALIVE

Current permissions – main account

Current permissions - main account

Time to create the index.html

Time to create the index.html

Time to create robots.txt

Time to create robots.txt

Lets get back to the bucket

Lets get back to the bucket

S3 Management Console – uploading files – 1

S3 Management Console - uploading files - 1

S3 Management Console – uploading files – 2

S3 Management Console - uploading files - 2

Upload details page

Keeping it as defaults.

Upload details page

Upload complete

Upload complete

My bucket shows the uploaded files

My bucket shows the uploaded files

Testing end point – can I see that index.html

And the answer is no. Not surprising but the answer is still NO.

It’s time to go down the rabbit hole also known as AWS permissions. This is a short trip into that hole. We’ll have a longer trip when enabling an access policy between a user and this bucket.

Testing end point - can I see that index.html

Allowing anyone to get to the S3 bucket using a browser

Where do I find my S3’s ARN?

Go to the S3 bucket and edit the bucket policy to see the bucket’s ARN. In my case the ARN is arn:aws:s3:::static.eli4d.com/*

Where do I find my S3's ARN?

Setting bucket permissions – 1

Following http://blog.learningtree.com/configuring-amazon-s3-to-serve-images/ in setting bucket properties

Setting bucket permissions - 1

Setting bucket permissions – 2

Keep in mind the following: when you click the link the AWS Policy Generator will launch in a separate browser window. You then create the policy there and then you have to copy the policy that’s created (a bunch of text) from that browser window to this browser window. This is not obvious and from a UX point of view it can be crazy-making and confusing.

Setting bucket permissions - 2

Setting bucket permissions – 3

Setting bucket permissions - 3

AWS Policy Generator

The only permission that the bucket needs to be world readable is GetObject.

AWS Policy Generator

ARN is key

You need to put correct arn:

arn:aws:s3:::static.eli4d.com/* in my case as mentioned above. Mess up the ARN and you will be slightly sad.

‘Principal’ refers to anyone who accesses the bucket (so by putting * we’re saying ‘everyone’).

ARN is key

Once you add the statement

Policy generator gives you a summary before actual generation. It’s time to click the ‘Generate Policy’ button.

Once you add the statement

Clicking the ‘Generate’ button

Side note: that version date is odd. You can’t just put today’s date as the version date.

Clicking the 'Generate' button

So you have a policy and you need to copy it

I know….you’re thinking wtf and so am I. So copy the policy. Then go back to the window where you launched the policy generator.

As a key principal here: do not modify any of this text. Seriously…don’t do it.

So you have a policy and you need to copy it

Here’s where you’re going to copy the text into

Remember that browser window from which you opened the security policy editor. Go back to that one.

Here's where you're going to copy the text into

Now paste in the policy and save it

Now paste in the policy and save it

If everything is ok policy wise you get back to the main window

There’s a really quick green checkbox and here we are (sure wish the UX was better here).

If everything is ok policy wise you get back to the main window

Time to retest the endpoint

Whohoo…now we can get to the S3 bucket.

What’s left:

  • Domain mapping of static.eli4d.com domain to this endpoint
  • Permissions to allow me to sync resources

Time to retest the endpoint

Domain mapping to the S3 bucket

My eli4d.com domain is controlled by WordPress (my registrar, however, is Hover – I LOVE Hover). These instructions apply to adding the static.eli4d.com subdomain via WordPress. I had tested some other domain configurations and this turned out to be the simplest approach (thumbs up to Hover and WordPress support). Depending on your domain configuration – you’ll have to adjust your steps accordingly when adding a subdomain.

Note: any ‘Hover’ URLs from this post are a referral link to Hover. BTW in case I didn’t mention it – I love^1000 Hover.

To the wordpress.com domain editing url

The not-so-easily found domains link on WordPress.com.

To the wordpress.com domain editing url

Lets edit the DNS

Time to add my subdomain of static.eli4d.com

Lets edit the DNS

Create a CNAME record for static.eli4d.com

The steps are to:

  1. Create the CNAME
  2. Click on the ‘Add’ button
  3. Click on the ‘Save Changes’ button

Create a CNAME record for static.eli4d.com

Check that static.eli4d.com is showing on the browser

Problem – when I type static.eli4d.com it redirects to eli4d.com – why?

The answer is DNS propagation that may take between 48 to 72 hours.

Lets pretend that 48 to 72 hours have passed

Ta-da – it works!

Hint: Use Firefox/Chrome private browsing mode to validate domain since it eliminates caching issues.

Lets pretend that 48 to 72 hours have passed

Checking in: workflow – how do I upload resources to my S3 bucket?

Now what? How do I upload my static resources to this S3 bucket? It will most likely be images but it can be anything else (so S3 accepts a maximum of 5 TB sized files). I write my blog entry on my Mac via Markdown putting the static items in the post, but then how where do I go from here to there workflow-wise?

I could just log into the AWS console and upload the resources but it feels clunky and not my type of workflow. What I want is something on the command line that syncs my resource directory to my S3 bucket. So here’s my approach:

  • find a command line utility
  • configure a user on AWS that can sync data only to this bucket (this is just basic security; I don’t want my main ‘root’-ish user to do everything from my mac); ideally I would have a user per bucket but I’ll stick to one sync user to honor some semblance of simplicity and sanity
  • configure the S3 bucket to accept connection from this user (this turned out to be a bear – AWS’s security model is breathtakingly complex)

Note: If you’re ok with just uploading resources via the AWS console then you’re done…enjoy! (please let me know via Twitter that you found these instructions useful…it encourages me to write more of this)

Finding an S3 sync command line utility

Lots of possible solutions but some outdated

Lots of possible solutions but some outdated

But there’s a promising article

at: http://serverfault.com/questions/73959/using-rsync-with-amazon-s3

An Amazon native solution would be ideal (just like using the docs straight from the horses mouth – i.e. amazon).

But there's a promising article

I want sync but…

I need to start at the beginning, so I need to backup to aws cli instructions

I want sync but...

Selecting “User Guide”

Selecting "User Guide"

Nice – the page has what I need

http://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html

Nice - the page has what I need

More AWS cli documentation

More AWS cli documentation

And more AWS docs

http://docs.aws.amazon.com/AmazonS3/latest/dev/walkthrough1.html

And more AWS docs

Command line install instructions

Command line install instructions

I’m using the bundled installer since I don’t have pip but I do have Python 2.7.5

I'm using the bundled installer since I don't have pip but I do have Python 2.7.5

Installing the AWS Command Line Interface – AWS Command Line Interface

Installing the AWS Command Line Interface - AWS Command Line Interface

Sweetest command line – here we go

Just follow the instructions

Sweetest command line - here we go

The ‘aws’ command works!

Note that I moved back to my standard account rather than the admin account on the mac (trying to be secure and all that jazz)

The 'aws' command works!

The command to sync a local folder to the AWS bucket

At this point this command doesn’t work yet but it will later. All possible options for aws cli can be found here: http://docs.aws.amazon.com/cli/latest/reference/s3/sync.html

 aws s3 sync /Volumes/elev-per/Dropbox/eli4d-content/s3/static.eli4d.com/2015/ s3://static.eli4d.com/2015 --delete --exclude "*.DS_Store"

Basically the above command says sync all resources from my local directory and use the local directory as the authoritative source deleting any mismatches on the S3 bucket side (i.e. the –delete) and exclude the Mac side pollution of .DS_Store – so don’t sync those.

The fantastically awesome Nicolas Zakas and a slight sad story about S3

I happened to come across a very interesting post by Nicolas Zakas ( http://www.nczonline.net/blog/2015/08/wordpress-jekyll-my-new-blog-setup/ ).

There are 2 very interesting things:

  1. His comment about s3command was very interesting. Since I don’t regenerate all of the static content – awscli is fine for me. But it’s something to keep in mind for static blog generation.
  2. The ability of someone else to indirectly squat on his domain by taking the name as an S3 bucket. I’ve written about this here: https://eli4d.com/2015/09/02/amazon-web-services-lesson-s3-bucket-names-are-universal-so-get-your-domain-named-s3-bucket-before-someone-else-does/

The fantastically awesome Nicolas Zakas and a slight sad story about S3

Creating an S3 user for syncing

As mentioned before I need a user that can sync resources for this specific bucket

I need some Sam IAM (come on Dr. Seuss – work with me here)

http://docs.aws.amazon.com/cli/latest/userguide/cli-chap-getting-set-up.html#cli-signup%20%28IAM%29

As mentioned before I need a user that can sync resources for this specific bucket

Creating a sync user via IAM – 1

Time to go to that iam console

Creating a sync user via IAM - 1

Creating a sync user via IAM – 2

time to click that user’s link

Creating a sync user via IAM - 2

Creating a sync user via IAM – 3

Select ‘Create New Users’

Creating a sync user via IAM - 3

Creating a sync user via IAM – 4

Creating a sync user via IAM - 4

Creating a sync user via IAM – 5

Creating a sync user via IAM - 5

Creating a sync user via IAM – 6

Here is where you create an access key (I already created it). The gist is AWS creates a public/private key and you need to save it because it’s never shown to you again (i.e. the private key).

Creating a sync user via IAM - 6

Now how do I give this user access to my images bucket?

Duckducking around: https://duckduckgo.com/?q=how+add+IAM+user+to+s3

I found: http://docs.aws.amazon.com/AmazonS3/latest/dev/walkthrough1.html

Click the user to see its permissions

Click the user to see its permissions

New IAM user information

New IAM user information

Configuring aws-cli with my newly created AWS user

Time to configure

http://docs.aws.amazon.com/cli/latest/userguide/cli-chap-getting-set-up.html

Note 1: that I found my region by logging into aws console > s3 and looked at the top area for region corresponding to my s3 bucket.

Note 2: All configuration (default) is in ~/.aws/

Time to configure

Calling s3

S3 references:

http://docs.aws.amazon.com/cli/latest/userguide/cli-s3.html

http://docs.aws.amazon.com/cli/latest/reference/s3/index.html

http://docs.aws.amazon.com/cli/latest/reference/s3/ls.html

http://docs.aws.amazon.com/cli/latest/reference/s3/sync.html

Dang – I need IAM policy for my user.

Calling s3

Configuring my S3 bucket to allow sync from my eli4dsync user

This is what I want

This is what I want

Insert many head scratching hours and attempts to get this going and lots^1000 of expletives

I initially attempted to change the security policy of the S3 bucket to allow for my sync user. I got lots and lots ‘Access Denied’ messages. I scoured AWS documentation, Duckduckgo, Google, Stackoverflow, and a Lynda course about AWS. Somewhere along all of this I figured that maybe I need to approach this from the other side – the eli4dsync user and that maybe I should attach a policy to the user in terms of the bucket access. This is the approach that worked for me but it may not be the right approach. If someone at Amazon would clarify the way security policy works – I would love to write that up (so open invitation AWS people with security policy information to get in touch).

Image credit: https://flic.kr/p/bMGA1T

Insert many head scratching hours and attempts to get this going and lots^1000 of expletives

Applying an inline policy to the IAM user rather than the S3 bucket

Per http://blogs.aws.amazon.com/security/post/Tx3VRSWZ6B3SHAV/Writing-IAM-Policies-How-to-grant-access-to-an-Amazon-S3-bucket

So initially – it looks like this article talks about s3 policy but it isn’t about the s3 bucket but rather the IAM user.

Applying an inline policy to the IAM user rather than the S3 bucket

Testing my sync code against my changes I find that this one works

So there are two parts:

Part (1) applies to the whole bucket. ListObjects is needed for recursion that occurs through the awscli sync command (think subdirectories of files and syncing them…though S3 doesn’t have a file hierarchy concept).

Part (2) applies to objects that are within buckets.

With this inline policy my sync user does NOT have carte blanche – it’s the right thing (for my purposes).

Testing my sync code against my changes I find that this one works

It works!!!

My sync script works and I have a very specific policy for my sync user.

It works!!!

Conclusion and Thanks

That’s it.

As you can tell – the AWS security policy creation is the biggest head scratcher. The rest if fairly straightforward.

My thanks to the folks that created the following resources and/or answered my questions:

Please let me know via Twitter (https://twitter.com/eli4d) that you found these instructions useful…it encourages me to write more of this.

Opinion: Where’s my data and who owns it?

A long time ago I worked for an information security firm. In one of the classes that I took – an animated and spunky instructor asked “what is the most secure computer system in the world?” Me and the other participants answered with technical solutions involving things like firewalls and encryption systems and the instructor stood there smiling and waiting with a Cheshire grin.

Once we all finished he paused for a few seconds and then answered the question with “the most secure computer system in the world is a system that is in a bunker connected to an isolated power source with a closed door and a soldier standing in front that door with an M-16 rifle”. One of my peers protested with “that’s not fair – if the system is not connected to a network, then what’s the point?”

That was the ‘aha’ moment for me about data security and the tug of war between data security and connectivity/usefulness. At the time of this class there were very few networks and the Internet as we know it today did not fully exist.

Fundamentally, there is no data security when you are surfing around the net. Your browser is a speed boat that moves from one information island to another, and data sucking barnacles keep collecting on the bottom under the waterline and out of sight. The difference of course from real barnacles is that you ‘data barnacles’ are quickly connected and stored (cookies, super cookies, trackers, etc…). Unfortunately, you can never wash/scrub/scrape them out like physical equivalents.

Surfing is one thing – but what about a specific relationship with a company? What about a ‘paid’ customer relationship versus a ‘free’ one? I’ve been thinking about this recently when interacting Evernote.

I started using Evernote as an alternative to del.icio.us when del.icio.us went downhill but I never became a paid user. My data usage was always below the max allowed for free users and as time passed I used Evernote less and less.

Recently, I came across the possibility that Evernote would go out of business and this made me think of the data the I accumulated over time. What would happen if they got purchased by another company…how would my data be treated? Who would it be sold to?

So I went down the rabbit hole of trying to get my data deleted. I wanted to email Evernote support but there was no way to do it from their website nor from my logged in account. Twitter saved the day and I got into their ticketing system through the Evernote Twitter responder. Through this person I received an email from a support person (Ms. S). I emailed back and forth about removing my account and my data. Below is my communication with Evernote.

The back and forth with Evernote in pictures

Initial ‘contact’ pages on website did not provide access to any support person

Maybe the ‘support’ page will have something.

Initial 'contact' pages on website did not provide access to any support person

‘Support’ page provided no mechanism to contact a support human

Support page was a dud. Onto Twitter.

'Support' page provided no mechanism to contact a support human

Twitter rules in reaching someone at Evernote

Evernote’s Twitter human responder rocks!

Twitter rules in reaching someone at Evernote

I finally have a ticket to Evernote due to Twitter

I finally have a ticket to Evernote due to Twitter

OK – so I followed your procedures for account deletions but…

“Hard deleting data” – interesting? So how many storage and back-up storage mechanisms does Evernote have?

OK - so I followed your procedures for account deletions but...

But wait….what…so where’s my data? Did you delete my data? What happens if someone acquires your company?

But wait....what...so where's my data?  Did you delete my data?  What happens if someone acquires your company?

Conclusion

This whole interaction left me in this fuzzy territory of feeling that my data is still out there regardless of my request for its removal. I suspect the same support path would apply even if I was a paid customer.

I suppose that my hypocrisy was in thinking of Evernote as a library rather than a company. Whereas librarians care about their user’s privacy companies don’t because that’s not their business model. This doesn’t make Evernote ‘evil’ or ‘good’. Google typically gets the good/evil arguments though it applies to companies in general (though as a sidenote – Google’s Data Liberation Front is an interesting approach in dealing with this very issue…kudos to Google for addressing this upfront).

If I willingly gave my data to Evernote then what does make me? I could claim ignorance…’I didn’t know you guys would never let my data go’ but that’s a stupid excuse. My data is only safe in a locked room on a computer that’s connected to an isolated power supply and nothing else. But when my data is this safe it is also pretty useless. How many pages could I have stored on Evernote without a network connection? Zero pages of course. Was the utility of Evernote worth it? This is the same question that can be applied to all other ‘free’ services:

  • Is the utility of Gmail worth it?
  • What about Google docs?
  • What about Office 365?
  • What about all the free services that I use all over the web?

I don’t know if there’s any good solution to any of this. Perhaps I should have chosen Pinboard as my post-del.icio.us bookmarking service. Maybe a dude developing in his underpants is more trustworthy than a corporation. Then again – maybe not.