tag:blogger.com,1999:blog-76894669056276265452024-03-13T14:10:32.643-07:00Technology FreaksGet Latest Web DesignsAnonymoushttp://www.blogger.com/profile/10130518473479231548noreply@blogger.comBlogger103125tag:blogger.com,1999:blog-7689466905627626545.post-37834791660300535222019-01-20T01:42:00.000-08:002019-01-20T01:42:02.226-08:00Ionic Native: Styling Google Maps
In our Previous post we have learned how to add Google Maps to our App, In this post lets try to add some custom styles to change look and feel of the Map to suite App Design.
Styling the Map
To style the map we can either style it ourselves by writing the json or we can use the google styling wizard to style the map, which returns json. In this tutorial i will be using the google styling Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-52882499727646796722019-01-19T01:11:00.002-08:002019-01-19T01:11:43.153-08:00Ionic Native: Implementing Google Maps
Introduction
Styling your native google map can be useful, if you have a brand and you want your map to match the brand. It can also provide better ux depending on the use case of the app, also useful for theming your app. In this tutorial we will be building a map that changes style depending on the time of the day. It will have a normal map style during the day and a dark style during the Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-52284034321196574092019-01-17T20:37:00.000-08:002019-01-17T20:37:05.447-08:00Ionic 3 - Project Structure
Before we start building our application, let’s take a close look at the anatomy of an ionic application. Inside the folder that was created during the scaffold, you have a typical Cordova project structure where you’ll be able to install native plugins and create platform-specific project files.
./src/index.html
src/index.html is the main entry point for the app. Much like the index.html fileBhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-9651193813597821722019-01-13T20:47:00.006-08:002019-01-13T20:47:43.433-08:00Getting Started with IONIC3
This tutorial will help you in getting started with Ionic and Cordova Framework.
Step 1: Install Node.js
Most of the tools in the ionic is based on Node and is managed through npm. The best way to get npm installed is through the Node.js.
You can get the latest Node.js installer here: https://nodejs.org
Be sure to install the LTS version of Node.
Check if installation was Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-48259186635508206282019-01-11T05:53:00.002-08:002019-01-11T05:53:14.931-08:00Angular 6 - Lifecycles
In Angular, every component has a life-cycle, a number of different stages it goes through. There are 8 different stages in the component lifecycle. Every stage is called as lifecycle hook event. So, we can use these hook events in different phases of our application to obtain control of the components. Since a component is a TypeScript class, every component must have a constructor method. The Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-41787794972360627402019-01-10T06:46:00.004-08:002019-01-10T06:46:43.003-08:00Angular 6 Services
Angular Services
Angular services concept always confuses newbies with server side REST services. If you are still not sure what it is, I will recommend you to read Angular documentation
Angular Services have responsibility to provide application data/business logic to components. Components should take/provide data to service and function as glue between view and service. It is service who Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-28601019877073602402019-01-09T06:38:00.002-08:002019-01-09T06:38:58.081-08:00Angular 6 Auth Guards / Route Guards - The Magic Autharization
What are Route Guards?
Angular’s route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. They make this decision by looking for a true or false return value from a class which implements the given guard interface.
There are five different types of guards and each of them is called in a particular sequence. The router’s behavior isBhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-87436064840559384902019-01-08T07:02:00.003-08:002019-01-08T07:02:59.945-08:00Angular 6 Routing
When we run an Angular application and serve it on a port number say ( 4200 ), we get our application running at http://localhost:4200
This is the only path our browser understands, and hence it can’t serve different destinations on different paths such as http://localhost:4200/items. But, What if we have multiple paths in the same application ?
How to achieve custom URL paths
Javascript Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-46101096912399868822019-01-02T05:51:00.000-08:002019-01-02T05:58:10.412-08:00Introduction to Angular6: A beginner’s guide - Part 2
Introduction to Angular6: A beginner’s guide - Part 1
How to Create a Component
Use ng generate to create a new component
<!-- close button link -->
<!-- minimize button link -->
<!-- zoom button link -->
iTechnoFreaks
> ng generate component hello-world
Let's look into our component class
Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-7774212053422266262018-12-19T21:14:00.001-08:002018-12-20T03:03:17.960-08:00Introduction to Angular6: A beginner’s guide
Angular, the most widely used framework for creating SPA’s.
SPA in web terminology stands for "Single-Page Application".
Why Single-Page Apps?
While traditional web apps require consistent rendering of data from server leading to a page-reload for every app request, the spa’s however, avoid this performance issue by loading content on the browser using Javascript, so most of the work Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-84973900818158963412016-01-14T22:49:00.000-08:002018-12-20T03:04:41.359-08:00Vertical Fixed Navigation #2
A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them.
Our first concept of vertical fixed navigation is one of our most popular resources. This time, we tried to push this concept a little further.
The basic idea behind putting round indicators on the side of a web page, is to give a hint to the user about the number of Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-15891296957228989492016-01-14T22:45:00.001-08:002016-01-14T22:46:44.277-08:00Cinema Seat Preview Experiment
Maybe you are familiar with those ticket booking systems where, at some point during the purchase flow, you have to choose a seat. This is usually done when selling tickets for games, movies, flights or concerts. Wouldn’t it be cool to have some kind of “realistic” preview of the seat, i.e. see the stage or screen from the perspective of the space you chose? Of course it would :) This is the Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-32707271340756929172014-06-17T02:28:00.000-07:002014-06-17T02:28:01.691-07:00Feature Support & Polyfills
Building a website can be both extremely rewarding and frustrating. Common frustrations arise from trying to get a website to look and perform the same in every browser. All front end developers have shared this frustration at one point or another.
Truth be told, websites do not need to look or perform the same in every browser. Exactly how close a website works in each browser is upBhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-38666844613207403392014-03-30T01:37:00.002-07:002014-03-30T01:37:34.493-07:00Preprocessors
In time writing HTML and CSS may feel a bit taxing, requiring a lot of the same tasks to be completed over and over again. Tasks such as closing tags in HTML or repetitively having to looking up hexadecimal color values in CSS.
These different tasks, while commonly small, do add up to quite a bit of inefficiency. Fortunately these, and a handful of other inefficiencies, have been recognized Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-23961877750529344262014-03-15T21:44:00.000-07:002015-01-10T21:37:54.035-08:00SCSS & Sass
SCSS & Sass
SCSS and Sass are preprocessing languages which are compiled to CSS, resembling Haml a bit in that they make writing code easier, and provide quite a bit of leverage in doing so. Individually SCSS and Sass come from the same origin however they are technical different syntaxes.
Sass, Syntactically Awesome Stylesheets, came first and is a strict indented syntax. Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-8949407783239717022014-03-01T00:49:00.001-08:002014-03-01T00:49:30.484-08:00Responsive Flexible Embed Container
Flexible Embedded Media
Unfortunately the max-width property doesn’t work well for all instances of media, specifically around iframes and embedded media. When it comes to third party websites, such as YouTube, who use iframes for embedded media this is a huge disappointment. Fortunately, there is a work around.
To get embedded media to be fully responsive, the Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-72339563037151077592014-01-09T07:12:00.003-08:002014-01-09T07:12:50.683-08:00Media Queries Contd..
Media Queries Demo
Using media queries we will now rewrite the flexible layout we built previously. One of the current problems within the demo appears when the aside width becomes uselessly small within smaller viewports. Adding a media query for viewports under 420 pixels wide we can change the layout by turning off the floats and changing the widths of thesection and Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-64865006494961048562013-12-28T09:45:00.002-08:002013-12-28T09:45:52.108-08:00Responsive Web Design - media quries
Media Queries
Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage toBhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-66722238898353111322013-12-20T08:23:00.002-08:002013-12-20T08:23:19.193-08:00Responsive Web Design - Part4
Other Media Features
Other media features include identifying available output colors with use of the color, color-index, andmonochrome features, identifying bitmap devices with the grid feature, and identifying the scanning process of a television with the scan feature. These features are less common but equally as helpful when needed.
Media Query Browser Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-17863308370328602632013-12-20T08:22:00.002-08:002013-12-20T08:22:58.815-08:00Responsive Web Design - Part3
Media Queries
Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage toBhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-6314212547535326522013-12-01T08:09:00.000-08:002013-12-01T08:09:08.084-08:00Preprocessors- Session3
Filters
Haml provides a handful of filters, allowing different types of input to be used inside of Haml. Filters are identified with a colon followed by the name of the filter, :markdown for example, with all of the content to be filtered nested underneath.
Common Filters
Below are some of the more common filters, with the more popular ones of the group being :css and&Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-16638991086576439702013-12-01T08:08:00.000-08:002013-12-01T08:08:06.981-08:00Preprocessors - Session2
Division Classes & IDs
In the event a class or ID is used on a div the %div may be omitted, and the class or ID value can be used outright. Again, classes are to be identified with a . and IDs are to be identified with a #.
HAML
HAML CLASSES & IDS.awesome
.awesome.lesson
#getting-started.lesson
COMPILED HTML
HAML CLASSES & IDS<Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-30496761961016855172013-11-07T08:16:00.001-08:002013-11-07T08:16:51.073-08:00Preprocessors
In time writing HTML and CSS may feel a bit taxing, requiring a lot of the same tasks to be completed over and over again. Tasks such as closing tags in HTML or repetitively having to looking up hexadecimal color values in CSS.
These different tasks, while commonly small, do add up to quite a bit of inefficiency. Fortunately these, and a handful of other inefficiencies, have been recognized Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-27658267077154211702013-11-02T01:34:00.001-07:002013-11-02T01:34:20.591-07:00Mobile First Design
One popular technique with using media queries is called mobile first. The mobile first approach includes using styles targeted at smaller viewports as the default styles for a website, then use media queries to add styles as the viewport grows.
The operating belief behind mobile first design is that a user on a mobile device, commonly using a smaller viewport, should’t have to Bhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.comtag:blogger.com,1999:blog-7689466905627626545.post-49763741888798563452013-10-13T21:56:00.001-07:002013-10-13T21:56:41.356-07:00Media Queries
Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage to responsive webBhagya Nagaramlo Bhagyammahttp://www.blogger.com/profile/00861023382732321751noreply@blogger.com