CSS3 provides couple of powerful concepts to create layouts: Grid and Flex. The former uses a top to bottom approach and later uses the reverse. Both these concepts are well supported by browsers except IE11. Though there are advantages in leveraging CSS to accomplish layouts (for example, we can make them responsive through media queries) there are benefits in leveraging a HTML like declarative approach. Angular provides a powerful concept called directives that helps to enhance HTML by adding custom behaviors to it.
In this post, I'm gonna show you how we can create couple of directives that helps to craft layouts using CSS3 grid. As a bonus, I also show you how we can make the layouts responsive. I'm also glad to introduce you the library angular-bone which is a real world implementation of this sample that supports both flex and grid layouts.Continue Reading
Decorators are an excellent way to add metadata information to a class / method / property / parameter. Angular uses quite a lot decorators. There are decorators for classes, properties, methods and even parameters. In this post we are gonna see how to extend the built-in Component decorator and create a custom one.Continue Reading
Here comes the fourth and final part of the hybrid mobile series in the hot summer. At the time of writing this from Bangalore (was called as Green City not any more I think) it's quite hot like 40° C. Time to take care of our nature! Anyway, we've come through a long way... let's finish this final part. Our hybrid mobile app "Safe" has grown into a pretty good shape now. So far, the work we've done allows an user to select a photo and persist in a secured way by AES 256 encryption. We also completed the work to edit an already persisted photo or wipe it out permanently.
Encrypting and persisting the photos is not enough to keep them safe! We've to protect the access to the app through a login mechanism and that's what we are gonna build in this part. We'll also see how to build the settings and info pages and last but not least I'll introduce you to Jasmine and show how she'll help us to write some good unit tests. So folks, ARE YOU READY?Continue Reading
Welcome to the third part of creating an awesome hybrid mobile app series. In the last two parts we've set-up the development environment, created grunt tasks to support development and deployment and also we've developed two important pages of the app: list page and the single photo view page. If you remember since we didn't complete the add functionality we've to hard-coded some data in the router to complete these two pages. In this part we are going to complete the complex page of the app - the add/edit page.
Once you completed this part you can successfully upload your photos from the photo library and keep them safe. In the next and the final part we are going to work on the login functionality. Please share your questions and thoughts through comments.Continue Reading
Hello friends, finally.. I'm back to share the second part of creating the hybrid mobile app. Apologies for taking too long! From my experience it looks like writing is harder than coding! Thanks for all the readers who shared their valuable comments. In the previous part, we worked mainly on setting up the development environment and also we tried to create a "Walking Skeleton" by wiring up the crucial components. Sadly, we haven't seen any code specific to the mobile app yet. I bet this part is gonna throw away that. We are going to do some really cool stuff here! We are going to build two important pages: "list page" and "single photo view page". We'll also see how to deploy the app in an iPhone and Android. At the end of this part, you'll have a simple and nice app (with some features) smiling right at you from your mobile.
Actually, I tried to complete most of the core functionalities of the app in this part including the add/edit feature (which is kind of little complicated) but that ballooned the size of the article to a mini-book. Well, nowadays most people don't like to spend more time on reading lengthy articles and so I moved the add/edit feature to a separate part. You would be expecting two more parts from me. In the upcoming one, we'll see how to build the add/edit page and in the last part we'll see how to implement the login/registration feature and the related functionalities of it.Continue Reading
It's been little over an year I've published anything in my blog. Every time I inspect my Google analytics page I sense the traffic is getting down 😣. I've been patience for all this time working now and then with sheer confidence that I could complete this taunting work. People who have been following my recent blog posts know that it's no longer a typical blog where enthusiastic developers write about creating todo app in some got-popular-lately technology or comparing two frameworks and describing their pros and cons in a table. I encourage learning by building something for real. I'm driving my website in that path. It's a place where I can share the experience about something that I built lately. It's easy said but it takes a lot of time and effort to build something useful and share with others. In all those months passed I was working in this hybrid mobile app so called "Safe" that helps to store photos safely. The app runs successfully in both iOS and Android platforms. I would like to share the experience I had in creating this app through this series of blog posts. I strongly believe that it'll help a lot of people to build their own *dream* app 🌝.
The idea (💡) of building a mobile app came to me three years back when I was facing difficulty in keeping sensitive information like passwords, credit-cards and photos. I own an iPhone 3GS device and was thinking that developing an app would help me to keep my secrets safely and easily accessible from anywhere. There are already a lot of apps out there that solves this problem but I want to build one myself so I can learn something new. I ended up finally developing an app that could store only the photos but not the textual information. The good news is the app runs fine in both iOS and Android devices.Continue Reading
Hi folks, I hope it didn't take too long to publish this second part. I was quite busy with a mobile app that came on the way (still working on it) that delayed things little. Thanks for everyone who showed interest in this tutorial. Do you know, your comments are the food for my "How to" tutorials.
In the previous part, we saw how to create a decent blog template quickly using Bootstrap 3. If you haven't read it, I would encourage reading, though, it's not a necessity for reading this part. To follow this article, all you need is some basic knowledge in HTML and CSS. It would be great if you've some little knowledge on the CSS pre-processor language LESS.
If you've read part 1, I believe you should've already gained the knowledge to craft templates for any website using Bootstrap. But the fact is, all the created Bootstrap templates bear the same look and feel provided by the framework as default. The default theme provided by Bootstrap is good for wikis but not for an e-commerce website that sell top-notch products. Look does matters! It's very important that you should customize the theme to reflect your brand.
After reading this part, I'm sure you'll gain enough knowledge to decorate any Bootstrap template. You should also get a glimpse of the CSS pre-processor LESS and the immense benefits it brings to the stage. I would be happier if you learn the trade to create and sell dozens of website templates in a short time with less work and little creativity.Continue Reading
Are you one who doesn't have great design skills but looking for stuff to create nice templates in a short time? Are you one who recently heard about this nice framework called Twitter Bootstrap and don't have much knowledge or experience to customize and create some website that represents your brand? Well folks, this tutorial is for you.
Actually, this is not just a tutorial but workshop. At the end of this workshop, you'll gain two things: First, you'll have a beautiful blog template that you could use right away for your website. Second, which is the most important thing, you'll know how to create stunning templates by yourself which jaw drops others. Here after, you won't be googling to search for any free template, because you know how to create one with the help of Bootstrap. At the time of writing this, the latest version of Twitter Bootstrap is 3, we'll be using the same in this workshop.
Due to time constraint and content size, I've divided this workshop into two parts. In the first part, which is going to be very simple, we are going to create a complete blog template using Bootstrap. At the end of this first part, you'll have a nice blog template with home, single-post, contact and about-me pages.
In the second part, which is going to be more interesting one, where we'll see, how we can download the Bootstrap source code and customize it to create our own theme that matches our imagination.Continue Reading
Our JustBlog is in a pretty good state. Yep! still we got some important things to accomplish before we think about release. One very important thing that's missing is the "commenting system". In this final part, we are going to see about integrating Disqus commenting system to our blog. Also, we will integrate two more services: AddThis and Feedburner, for sharing and subscriptions.
Honestly, the ways we referenced Scripts and CSS in views are not good. We are going to tidy them up by utilizing the bundling and minification feature. We also completely missed exception handling. Luckily, we got ELMAH! which is an error handling/logging library which takes care of that job.
Before we wind up, we will see how to create a contact page and also we'll take necessary steps to make our blog SEO friendly.Continue Reading
In the first part of the series, we have completed the basic functionalities of the blog. We have completed the functionalities to display the latest blog posts, display posts based on categories, tags or search for interested posts. We also created sidebar widgets to display the categories, tags and latest posts.
In this part, we are going to see how we can create an admin console to manage posts, categories and tags. We need a grid control to display the posts, categories and tags. We can't use the ASP.NET grid control because they works based on ViewState. We are going to use a jquery plugin called jQGrid which provides many functionalities required by a typical grid like pagination, sorting, filtering, column resizing and much more. jQGrid is easy to use and most importantly it has a pretty good documentation.
We'll see how to secure the admin page through Forms Authentication. Not only that, we'll also see how to write unit tests for controller actions using NUnit and Rhino Mocks.Continue Reading