AngularJS 2.0 – Here you go!!! What is new?
Posted on December 16, 2015 by Sameera Thilakasiri
Before going into further discussion about 2.0 AngularJS briefly consider the philosophy behind the new version. 2.0 angular development began to address the following concerns:
Mobile
The new angular version will focus on developing mobile applications. The reason is that it is easier to manage desktop looks of things, once you have addressed the challenges related to mobile (performance, load time, etc.).
Modular
Several modules will be removed angular core, resulting in better performance. These find their way into growing ecosystem of angular modules, which means they will be able to pick and choose the parts you need.
Modern
Angular 2.0 will aim SS6 and “evergreen” modern browsers (automatically updates to the latest version). The construction of these browsers means that several hacks and solutions that make it harder for developing angle can be eliminated allowing developers to focus on their domain-related business code.
Upgrading from Angular 1
You may have an Angular 1 app today and you want to start writing Angular 2 code in that app, without changing your working/tested angular 1 code. This is where ngUpgrade comes in.
While you can upgrade apps in a “big bang” approach where you halt production until everything is rewritten, supporting two paths for where teams want to upgrade their Angular 1 apps to Angular 2.
ngUpgrade
You made large investments in Angular 1 and have created some awesome apps. Created ngUpgrade for all of you to make it possible to leverage your existing apps and move forward with Angular 2.
ngUpgrade lets you mix Angular 2 into your existing Angular 1 application. You’ll get to take advantage of Angular 2’s improved speed and APIs immediately as you replace components a bit at a time over the course of your releases.
ngForward
Some teams, with apps that are more sensitive to download size, will want to avoid having both Angular 1 and Angular 2 libraries running in their app simultaneously. For this, have ngForward which lets you write Angular 1 applications in the syntax of Angular 2. This lets your team get used Angular 2 conventions and styles in your apps today and shorten the distance to doing the full upgrade to Angular 2 when you’re ready.
What comes next?
Improvements to move Angular 2 to its full and final release. Many small improvements, the big ones for final are:
- Reducing Angular 2’s payload size.
- Making the Angular CLI usable end to end throughout the development process.
- Creating a more developer-friendly route definition and link API for the Component Router.
- Support for animations.
- I18n and L10n support.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
How to group console.logs – Advanced JavaScript Logging Using console.group()
Posted on August 3, 2015 by Sameera Thilakasiri
You can group related log statements by surrounding them with the console.group() and console.groupEnd() functions:
All log statements issued in between will be displayed as a group in the console view.
console.group("URL Details");
console.log("Scheme: HTTPS")
console.log("Host: example.com");
console.groupEnd();
Collapsing and Nesting Logging Groups
Note that the groups created by console.group() are initially opened. If you’d rather have them collapsed by default, you can call the console.groupCollapsed() instead:
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Easy Animations for AngularJS with Animate.css
Posted on March 13, 2015 by Sameera Thilakasiri
Animate.css is to transitions what Bootstrap is to layout, which means it comes with a number of pre-built and easy to use styles. Animate uses keyframe animations. which specify the start, end, and in-between points of what an element should look like, and although Animate is not tied to Angular, keyframes make Angular animations easier because there is no need to specify the “preparation” phase. Also, complicated animations roll up into a single keyframe name.
div[ng-view].ng-enter {
-webkit-animation: fadeInRight 0.5s;
animation: fadeInRight 0.5s;
}
The ng-hide and ng-show directives need a little more work to function correctly. These animations use “add” and “remove” classes, and adding !important is a key to override the default ng-hide style of display:none.
.ng-hide-remove {
-webkit-animation: bounceIn 2.5s;
animation: bounceIn 2.5s;
}
.ng-hide-add {
-webkit-animation: flipOutX 2.5s;
animation: flipOutX 2.5s;
display: block !important;
}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Website Design Trends To Watch In 2015
Posted on December 12, 2014 by Sameera Thilakasiri
Before we dive into my predictions for the top website design trends to watch in 2015, I’ll start by summing up key trends that emerged in 2014. I can do it in one word.
Simple Web design this past year was all about stripped out the pizzazz and focusing on design that will maximize visitor to lead conversions. It was all about being simple, quick and to the point. I don’t see web design taking a radically different turn this year. In 2015, websites will continue to be simplified, continue to put the focus on responsiveness and dictate the way the user interacts with onpage content. Here you go!
Responsive
If your site is already responsive, kudos! But, you aren’t out of the woods quite yet. To accomodate these new devices – specifically smart watches – the responsive navigation structure we are all used to will need to change. This rollout won’t be fast. By the end of 2015, we should start to see solutions emerging.
Ghost Buttons
Ghost buttons are the Holly Golightly of buttons – minimal, attractive, and, more often than not, they incorporate a very subtle hover animation. These buttons are enough to make any designer swoon.
Not only are ghost buttons gorgeous, they have a practical application in that they are the best option for calls to action being implemented over top of large background images and video.
Storytelling
Your company details and stats may not necessarily make your brand stand out… but your stories will.
Storytelling allows you to show your visitors different aspects of your business and connect with them on a more personal level than simply stating your company facts or statistics.
Flat Design
Since flat design is so focused on minimalist principals, sites appear clutter-free and content focused. Second, it’s how we access content. Flat design is less clunky and much easier for a web server to deliver to devices like mobile phones and tablets.
It’s a perfect marriage of form and function. Material design is a visual language developed by Google in 2014 and is a good example for the same.
Scrolling
For the last couple of years, with the rise of mobile devices and tablets, we have become accustomed to scrolling. We have! You scroll out of habit – don’t act like it is an inconvenience. You like it! Admit it, you like to scroll!
Large Images or ‘Hero’ Images
Don’t be afraid to incorporate a big, beautiful background image or video on your homepage. The fold doesn’t matter! Capture your user’s attention by being purely aesthetic. A prominently displayed tag line and ghost button call to action over top of a powerful and elegant image can really set your site apart.
But wait, won’t this impact my site’s speed? Two years ago, yes this would. Since this is an emerging trend, the need for increased bandwidth is being recognised by developers and hosts. Expect to see new techniques in responsive resizing and image optimisation.
Typography
An emphasis on typography is going to take center stage in 2015 – every designer’s dream come true. Simple, bold typography elements combined with the large images mentioned above, will dominate the web.Because content is king, this emphasis on typography should come as no surprise, and it’s a philosophy that isn’t going anywhere.
Microinteractions
Maybe you’ve noticed those little pop-up windows that interrupt your blog reading about 70% of the way through a page? Well, those little buggers have a name – microinteractions. To be more specific, a microinteraction is a contained experience that a user has with a website that revolves around a single use case. An email sign up box is the best example. Its intention is to promote further user engagement.
Card Design
Another design trend that has been influenced by the rise in mobile is the increased popularity of ‘card design’ websites. This is the web design format of displaying information in modular bite-size panels. Essentially these panels are miniature condensed web pages that contain a brief amount of text, a user name, an image and various share icons. This design layout is a good format for designers to work with as panels can be rearranged in a clean and simple fashion that gives an organised and uniform appearance.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Semantic Search and SEO trends for 2015
Posted on December 12, 2014 by Sameera Thilakasiri
In September 2013, Google released its “Hummingbird” update. Unlike the previous Panda and Penguin updates, Hummingbird was a complete overhaul of the algorithm, based on semantic search.
Semantics is a sub-discipline of linguistics that focuses on the study of meaning. Semantic search attempts to understand the meaning of the query and searcher’s intent. Danny Sullivan of Search Engine Landexplains it.
Long-tail Keywords
Long-tail keywords are longer, more specific phrases consumers are more likely to use when they’re further along in the buying cycle and closer to making a purchase.
The concept behind long-tail keywords is quality over quantity. I once had a client who sold gift baskets. Ranking well for that term would generate a lot of traffic, but she’d have to compete with some top brands to do so. Ranking for longer, more specific terms like “homemade chocolate chip cookie gift baskets” will be less competitive and generate a smaller amount of higher-quality leads.
LSI Keywords
LSI stands for “latent semantic indexing,” which is a fancy term for synonyms and plurals of your main keywords. So if I’m a dentist, I also want to use keywords like dental and dentistry.
Latent semantic indexing also tells Google how keywords are related to one another. So when it sees a webpage containing “apple,” along with keywords like “iPhone” or “Tim Cook,” it understands the page to be about Apple, not apples.
Semantic Markup
You can help search engines better interpret the content of your site by incorporating semantic markup in your on-page optimization.
Semantic or schema markup is microdata inserted in your HTML that uses a common set of properties to describe the contents of your site, such as:
- Event
- Organization
- Person
- Place, Local Business
- Product, Offer
- Review
Schema markup isn’t a ranking factor. But using it gives search engines detailed information they can use to display rich snippets (such as price, availability, and review ratings) right on the results pages, which can certainly improve your click-through rate.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.