So, here is my quick beginner’s learning experience of AWS Lambda, S3 and API Gateway. Let’s start with AWS Lambda-
1. AWS Lambda: It lets you run code without the burden of managing servers. And absolutely no allows you to take the privilege of paying only for compute time you consume. (No charge when your code is not running).
   So what is it? All it has are functions. It gives various option to create a function –
i) Author from Scratch: Allows you to write a function from scratch.
ii) Blueprints: Well as name suggests, it has few preconfigured templates to choose.
iii) Serverless Application Repository: Has already developed applications which                 can be used as it or configure them as per needs and deploy.

Let’s discuss in detail about Authoring from Scratch. The below options are going to be present when you begin creating a function –
Name: Lets you choose a name for Lambda.
Runtime: It lets you pick one from various languages in different version.
Role: Here one can set permissions to the function by confining access to AWS resources by creating an IAM Role or choosing one from existing roles(if they are already created for your IAM).
That’s it, your first AWS Lambda function creation would be complete with the above step.
Now, it allows you to configure you function and also Monitor it using CloudWatch Metrics.  Let’s now look into configuration-
1) It allows to configure the function by adding a trigger(which lets you call/invoke your function). There are many options available in these trigger like below –
API Gateway, AWS loT, Dynamo DB, CloudFront, Cloud Watch Events, CodeCommit, S3 and many more.
2) Now adding muscle to your Lambda i.e., function code. Adding code can be done in 3 ways –
a) Adding inline code: It’s fine for a small length of code but not suggestible if                        your  code is too long.
b) Uploading a .ZIP file: It allows you to upload your local .zip file and all                                 it looks for is a handler.js (There is an option to configure your Handler                                name). And it is not suggestible if the file is larger than 10 MB.
c) Upload a file from Amazon S3: Here comes my favorite, as it supports larger                     files and allows to secure your code using various permission settings. All you                         need to do is create S3 buncket and add you file in it. the permissions set to you S3                 buckets are defaulted to its content( if not specified while adding a file). It finally                     provides a link to your file, provide this link to Lambda function and then it                            imports the code from it and also allows you to edit it inline.

Let’s do a basic example of inline code and coding structure in the part2!!

A Single Page Application is what everybody want their web app to be these days, So, What is SPA exactly? It is a web application technology where  everything will be in a single HTML page with different routes provided in the module. it has many features like no page reloads, caching all the data, changing only needed data on a page dynamically,high level scaling.

This can be done by proving routes for each HTML page and the condition to satisfy in order to view the HTML page. The templateUrl of each route can also be given at the route and one can also be associated with each controller or same controller. Let us see this with an example,

In the above example, myPinkSAP is my module. What is a Module? It is the one where all the services, directives, controllers are stored in. And I have associated this module with a variable name called myPinkSAPVar. Now, the variable is used to configure our routes by injecting provider. And the module has a dependency of ngRoute. The syntax of it is – .config(function(injectables) 

templateUrl and controller are the functions which returns the URL of the page we want to route and the controller we want to associate the page with.

All the business logic can be written in controllers, it can be written by having a $scope injected to the function. This scope can be used to add behavior to the controller, in this example I have created two different controllers – PartyController and Work Controller which display data associated to $scope.

All the above code is written in a JavaScript file, this .js file included in a <script> tag in HTML page in which  angularJS  and angularJS-route is imported. This can be done as below-

To associate this HTML tag with the module, use ng-app directive and use anchor tag to link the .html pages to the page. To view all the .HTML pages associated in a page use ng-view directive. One can use partial views to make it efficient.

Simple, run the HTML code and view it to view your application. The whole code can be found here – https://github.com/sirishagavini/AngularJS—Single-Page-Application-

How on Earth, it can be a good thing when someone is being MEAN? In Web developing world, being M.E.A.N can take a web application to a whole new level. Well it is an acronym of MongoDB, Express, AngularJS, Node.js. It is nothing but using AngularJS on client side and Node.js platform with Express framework on the server side and having MongoDB as the database. But what is so special about bring MEAN stack when there are tons of web technologies of building a web app, M.E.A.N is special in its own way of being flexible in terms of Scalable and providing good quality for the web app.

MongoDB: It is  a NoSQL document database, it is a non-structured database where documents will be stored in JSON (easily parsed), which will be internally represented in a BSON format to support extra datatypes like BinData type.

      Wait, what is BSON?  It is a Binary JSON, a binary serialization format used to store documents.

      Why BSON? It is helpful in encoding and decoding the data in a better way.

Express: Express is a Node.js web application framework, which is known for its robustness for building web and mobile applications, data integrations and . There are many Node.js frameworks like hapi.js , koa.js, Mojito and many other frameworks but Express is widely chosen by many web application developers.

AngularJS: It’s been a blessing to all web developers since its release. It helps in avoiding writing thousands of lines of code and allows to write it in MVC (Model View Controller) . It has many features like data binding, dependency injection, directives, filters and many more. It is used as a front end (Client Side) in the MEAN stack. It makes AJAX calls to retrieve data from the API, as the data is in JSON format it is very easy to retrieve the data to the front end.

Node.js: It is used to build  server side web applications with scalability and cross-platfrom compatability.  Best part of Node.js is its support for Single Page Applications, it never waits for an API to retrieve a data which makes it that it will never buffer. It is on Server side of the application usually with Express framework.

Testing: We can run simple task runners like GRUNT or GULP to test by running the test scripts but it also many testing frameworks like Karma, Mocha are available for testing MEAN Stack.

Using MEAN is still a naive practice as it need some bold migration from a traditional practices of storing data and accessing it from the server but it is slowly getting into the big race, many big Organizations like Netflix, Paypal use MEAN stack.

There is a saying that “No matter it is either Ballroom or Battlefield, Princesses always be prepared before entering into it“, similarly, every web developer must be prepared by knowing the pros and cons before writing a code. Here are the few tricks which will be helpful in the preparation –

1. Always put <meta> tag with viewport element and set the content as “width=device-width, initial-scale=1.0“, this comes in rescue if the site has been opened in any device like mobile phone, ipad and initial scale is for zooming purpose.
2. <!DOCTYPE html> is necessary for every HTML page, this make a page valid and also tells the web browser that what kind of document to load.
3. CSS should always preferred to be external if a change has to be done to multiple pages because it reduces the load time and file size also can be reduced. The priority of the inline, internal and external CSS  is in increasing order.
4. Whenever code doesn’t work, always debug it using console, short cut for console is Ctrl+Shift+J , this seems to be a super hero for many programmers. Sometimes, all you need to do is just refresh the page, to see the changes.
5. Minify the code as much as possible, this helps in communicating with  a server and loading a page pretty faster. This is just achieved by removing extra spaces and extra lines, there are many online tools for this job.
6. Whenever you write a JavaScript code, always check the code in JSHint or JSLint, this helps in saving time and also knowing the errors pretty easier way.
7. While writing a  jQuery code, using noConflict() to have a customize variable in the place of regular $ or long jQuery will be helpful in letting $ be used in other scripts. For example, AngularJS uses $ for scoping variables inside controllers.
8. Use JavaScript Task Runners, generally people use GRUNT or GULP for this. This just automates all the process of minifying, linting, testing a code.
9. Always make your website responsive, these days people equally use their mobile phones or ipads like they do use a computers. @media queries in CSS3 will be very helpful in scaling a website by setting minimum or maximum width or height.
10. Between id and class, tags with id have more priority than with class. There can be many tags with same class but there should be only one tag with an id.

Every girl is a princess and every mundane day can be special if you dress better. So we can choose better option by comparing better. But  don’t worry, the princess party checker is finally here. This simple party checker app, helps every girl to check how  a dress, nail paint and lipstick looks like. Lets see how this app can be created.

All I used is AngularJS, HTML and simple CSS. All this has to be within <form> </form> tags. All I used is AngularJS forms,  there are three types of data in forms – text, input, select.

• Text: This is just a text box, we can enter our text here.
• Input: This input field can be of many types like radio, check box. I have implemented these two types in the form.

          Radio:  Radio is used to check color of nail polish. The syntax is like below – I I I have used ng-switch to show only one data at a time, this is just like a switch case in java. And case is given ng-switch-when and the data given is shown here.

Check box: Check box is used to check the dress, The syntax is like below –

The input data can be shown as below, I have modified the text color according to the nail color.

• Select: I have used this using an array and this array is created in a function which is in a controller called PinkFormCtrl. 

This scope is binded with selection element and can be shown in the HTML tag.  I have used ng-options  in the select tag,  that’s fine but what is the value for it :  ” lipStickColor for lipStickColor in lipStickColors“. What on earth is this? Simple, the first lipStickColor is label, second lipStickColor is value  and lipStickColors is the array. It just looks a label for the value in the array.

The complete code can be found here:  https://github.com/sirishagavini/AngularJS-Party-Checker

And finally the app looks like below –

Well, it is our princess birthday and she has some pink balloons, lets help her in flying the balloons.

jQuery : This library is a bliss since it has been released, it is a larger framework which helps in avoiding large lines of code for an event to happen. It makes pages dynamic. It initializes, loads, manipulates DOM elements and  also does  uses AJAX to interact with server to get a information. Here we are going to use animate()  and callback()  functions to fly these balloons. But what are they.

jQuery can be downloaded and place it in the same folder of the HTML file or can be imported to a HTML file by using a link to its library like below:

animate(): This method helps in animating a set of selected elements. All these animations can be customized based on our interests. The syntax can be like:

.animate( properties [,Speed] [, callback function])

Properties: Based on which animation will move toeards (left, right, top, bottom)

Speed: How fast the animation can be done(Slow, fast). This can also be expressed in milliseconds too.

Callback Function(): jQuery’s beauty lies here, it allows to call a function within a function.

The jQuery code can be written within script tag or can be written in a .js file.

An example code is something like below.

In this context, we have animated the balloons to move towards bottom for 20px and 3000 is the duration for the animation. We are flying the balloons first towards bottom and then with call back function we are moving it towards left for 750px with 3000msec speed and again towards left for 250px in 2000msec.

The output is soemething like below:

The working of this code can be viewed here: https://jsfiddle.net/sirishagavini/xc4s2g18/

Converting a PSD(PhotoShop Document) to HTML, CSS, all we have to do is slicing and converting. All this might be confusing but yes that is all we have to do.

First, we need to have a PSD file.But how to do we get that? Its simple, we can create one by ourselves in Adobe Photoshop or any other comfortable editor. Try to add more layers, images and represent text in different formats, this will be helpful in getting more experience.If you could not find anything in the first place, do not panic  but just explore it more and more, you will definitely find a way (Remember, no one can teach you better than you do to yourself) .

So, now we have our PSD file ready. Now we have to open a IDE like Net beans or Eclipse. Create empty HTML and CSS files so that we can add code for the items we have sliced in the PSD.

Slicing a layer in Photoshop

This can be done in PhotoShop by using Slice Tool. Just select a part of the PSD you want to replicate in the browser page and save it in an image format (JPEG, PNG) .

Converting to CSS Code

If it is a background and it goes like a banner like shown above, then the CSS can be like body to use repeat-x  to repeat the background image along x-axis, if it is just an image then CSS can be like #nav

Selecting a text in PhotoShop

Select Horizontal Type Tool and click on the paragraph and it allows to copy the text and this text can be posted in the HTML file. This text can be placed in a <p> tag, there are many alternatives for  this tag. Choose the best tag which meets your requirement.

Replicating Image from PhotoShop to HTML

If you have a image to replicate then put the image in a new folder in the project in IDE. (In this example, imageresource is a folder) .now, give reference to the image as below in the HTML file.

Tip: Refresh the browser to see the changes effected after every single change done to the code. This helps to keep track of any mistakes.

Simple, This way you can convert a PSD file o HTML file 🙂

Haha I am a girl who loves to shop, in fact shopping is like a therapy to me 😛 . I always wanted to keep track of my stuff. So I created this app so that I can get cut down my unnecessary shopping.  Oops,a girl never shops for no reason, So no shopping can be an unnecessary, so its just an extra shopping.

Here is the code to create yourself such app by the link following link from Github  https://github.com/sirishagavini/ShoppingTracker/

Here is the look of the App.