Restrict user access to Single S3 Bucket using Amazon IAM

S3 becomes de-facto standard for publishing files in the internet. When you work with the team, you might want to restrict an access of single S3 bucket to specific users. You can do it in IAM as follows

  1. Create Group
  2. Create User. Then use Manage Password to add a password for your user.
  3. Add User to the created Group
  4. Create and Attach Permission Policy for the group.

Step 1, 2 and 3 are straight forward. But creating and attaching permission policy needs some attention.

In Group tab, go to created group. Then click the Permissions tab and Click the Attach Policy button. You’ll be taken to Set Permissions page where you can Manage User Permissions. Here you can select a Select Policy Template option, then find the Amazon S3 Full Access and click Select button.

You will be prompted with Policy Name and Policy Document. You can change the policy name as you wish. In the Policy Document section, paste the following content

{
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:ListAllMyBuckets",
            "Resource": "arn:aws:s3:::*"
        },
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::mys3bucket",
                "arn:aws:s3:::mys3bucket/*"
            ]
        }
    ]
}

You are done. Have a nice day.

View comments

Startup Landing Pages with Firebase

Now-a-days Landing Page has become common and popular among startups and publishers. Every landing page has one important call-to-action, i.e. to sign up early adopters for their beta version.

To get up & running as soon as possible, the simplest and fastest way to build a landing page is basically having it as a static site without any back end. The downside of this approach is, we need to figure out a way to store the emails that are signed up. As you would expect, there are quite a few really good services you can use right of the bat.

Some of the above services even provides HTML templates, A/B testing and much more. For a non-developer these sites would be the best fit.

If you know a bit of web development and want to build you own custom landing page, then I would strongly recommend to use Firebase to not only collect emails but even feedbacks. Firebase provides powerful APIs to store and sync data in realtime.

Going forward I will show you the technical part of how you can build the pages in Firebase.

Firebase Email Storage

Once you have created a firebase account and have logged in, create a firebase application.

You need to include the firebase javascript in your landing page. This provides the functionality to save your data (e.g. email) into your firebase application.

<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>

Email Signup Form

Following is a basic HTML template for email sign up form.

<div class="signup">
    <h2 class="signup-title">Sign up for beta</h2>
    <p id="signup-success" class="text-success"></p>
    <p id="signup-error" class="text-danger"></p>
    <form class="signup-form form-inline" id="signup-form" role="form" onsubmit="return signup(this)">
        <input class="form-control" name="email" type="email" placeholder="Your email. eg., joe@acme.com" required>
        <button class="btn btn-success" id="signup-button" type="submit" >Join now</button>
    </form>
</div>
Firebase script to save email addresses

On the submission of the button, the script script is invoked to store the email address into your firebase application.

<script>
    var signupForm = document.getElementById('signup-form');
    var signupSuccess = document.getElementById('signup-success');
    var signupError = document.getElementById('signup-error');
    var signupBtn = document.getElementById('signup-button');
    var onSignupComplete = function(error) {
      signupBtn.disabled = false;
      if (error) {
        signupError.innerHTML = 'Sorry. Could not signup.';
      } else {
        signupSuccess.innerHTML = 'Thanks for signing up!';
        // hide the form
        signupForm.style.display = 'none';
      }
    };
    function signup(formObj) {
        // Store emails to firebase
        var myFirebaseRef = new Firebase("https://yourappname.firebaseio.com/signups");
        myFirebaseRef.push({
          email: formObj.email.value,
        }, onSignupComplete);
        signupBtn.disabled = true;
        return false;
    }
</script>

Contact messages

You can also store the feedback, suggestions and questions into your firebase application.

Following is the basic HTML template for a contact form.

<div class="contact">
    <h2 class="contact-title">Send us a message</h2>
    <p id="contact-success" class="text-success lead"></p>
    <p id="contact-error" class="text-danger lead"></p>
    <form class="contact-form" id="contact-form" role="form" onsubmit="return sendMessage(this)">
        <input class="form-control" name="name" type="text" placeholder="Your name. eg., Joe" required>
        <input class="form-control" name="email" type="email" placeholder="Your email. eg., joe@acme.com" required>
        <textarea class="form-control" name="message" placeholder="Your message for us" rows="5" required></textarea>
        <br />
        <button class="btn btn-success pull-right" id="send-button" type="submit" >Send Message</button>
    </form>
</div>

On submission, the below script is invoked to save your email address along with the message into your firebase application.

<script>
    // Send message
    var contactFrom = document.getElementById('contact-form');
    var contactSuccess = document.getElementById('contact-success');
    var contactError = document.getElementById('contact-error');
    var sendBtn = document.getElementById('send-button');
    var onMessageComplete = function(error) {
      sendBtn.disabled = false;
      if (error) {
        contactError.innerHTML = 'Sorry. Could not send message.';
      } else {
        contactSuccess.innerHTML = "Message has been sent.";
        // hide the form
        contactFrom.style.display = 'none';
      }
    };
    function sendMessage(formObj) {
        // Store emails to firebase
        var myFirebaseRef = new Firebase("https://yourappname.firebaseio.com/messages");
        myFirebaseRef.push({
          name: formObj.name.value,
          email: formObj.email.value,
          message: formObj.message.value
        }, onMessageComplete);
        sendBtn.disabled = true;
        return false;
    }
</script>

It is one of the simplest way to handle forms in your landing page. Firebase provides 100 MB of data storage in their basic free plan, which they have aptly named it as Hacker Plan. This should be sufficient for startups to store email addresses and messages.

Caution: If someone gets your firebase URL, they can certainly spam you. Anyway, that is not something you would be worrying about in evaluating your startup idea.

Please share your thoughts and suggestions. Have a nice day.

View comments

Commands and Options I Wish I Knew Earlier About Git

Git becomes de facto of source code management (SCM) system among developers. Many developers used to work on git from console. Mostly used commands are git status, git add, git commit and git push.

Apart from these commands, there are lot of useful commands in git. Initial days, i find difficulties in tracking changes made by me and my team mates couple of days or few weeks ago. Here we will see some of commands that are interesting and useful to your workflow.

1. Short status output

git status is mostly used command in Git. But it gives lot of information which is not useful for people who are proficient with git. If you are one among them, then use

git status -sb

2. View changes by revision

If you want to view changes made at particular revision

  git show <revision>

  git show df2edcd
  (or)
  git show HEAD     #HEAD means latest commit
  (or)
  git show HEAD~1   #HEAD~1 means commit before the commit that HEAD currently points at

In case, you want to view only changed file name, not the contents, Use --name-only option

  git show --name-only  df2edcd
  (or)
  git show --name-only --oneline df2edcd
  (or)
  git show --name-only  --pretty="format:" df2edcd

3. View changes of specific file

If you want to view changes of specific file, then

  git show df2edcd:app/index.html
  (or)
  git show HEAD~1:app/index.html

  git show @{22-09-2014}:app/index.html

4. Search for commit message

You want to search a commit which message matches a regex

  git show :/fixed
  # shows the last commit which has the word "fixed" in its message

  git show :/analytics
  # shows the last commit which has the word "analytics" in its message

5. list all files that were modified or added in this time

List all files added/modified 9 days ago

  git diff "@{9 days ago}"
  git diff --name-only "@{9 days ago}"
  git diff --name-status "@{9 days ago}"

List all files added/modified between 9 days ago and 6 days ago

  git diff "@{9 days ago}" "@{6 days ago}"
  git diff --name-only "@{9 days ago}" "@{6 days ago}"
  git diff --name-status "@{9 days ago}" "@{6 days ago}"

6. Changes between two commit revision

List all files between two commits adab4ab and 6da161b

  git diff adab4ab^ 6da161b
  git diff --name-only adab4ab^ 6da161b
  git diff --name-status adab4ab^ 6da161b

Hope it useful. Share your favorite commands in comments. Happy commit and have a nice day.

View comments