Tag: coder (Page 2 of 3)

How to write angular services in angular 4 ?

Recently I was working on this angular project when I got stuck to a place – angular services. I wanted to use global variables and functions but had no clue how do i achieve it. After lot of research and going through angular docs i finally ended up to a solution of services.

Angular Services is nothing but an inject-able piece of code that every component can call and use. We will follow the steps to achieve it:

STEP 1

In your command line write:

ng generate service service-name

(service-name will be name of your service) now you will see two files added to your app folder.

STEP 2

Open the file service-name.service.ts and write the following code:
import { Injectable} from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http'; // For http calls if any else you can remove this line.

@Injectable()
export class PortfolioService {

headers = new Headers();
options;
api_url = '';
site_url = '';
skin = '';

constructor(private http:Http) {

this.http.get('assets/config.json').subscribe(data => {
this.skin = data.json().skin;
this.renderer.addClass(document.body, this.skin);
});

}

getapiurl(){
this.http.get('assets/config.json').subscribe(data => {
this.api_url = data.json().api_url;
console.log(this.api_url);
});
return this.api_url;
}

getsiteurl(){
this.http.get('assets/config.json').subscribe(data => {
this.site_url = data.json().site_url;
console.log(this.site_url);
});
return this.site_url;
}

}

Here in our example we are fetching the values for api_url , site_url and skin from config.json file using http request.
the function getapiurl() has a return statement in the end which returns the value of the variable api_url

STEP 3

Open your component file and add following code at respective places.

Starting with imports:
import { ServiceNameService } from '../service-name.service';

In your @component add this:
providers: [ServiceNameService]

In your constructor add this to the parameter:
private service: ServiceNameService
Like this
constructor(private service: ServiceNameService )

Now comes the important part of calling the function that we created in the service file.
We have declared a private variable service in our constructor using which we will call our functions.

this.service.getapiurl()

The above code will give the output as the value of the variable we returned in service.
Thats it!
Now you can use the same function as many times we want and in every component we like.
For any queries leave a comment or you can contact me on the given details in the sidebar.

Enjoy! Happy Coding.

How to add custom post type to wordpress?

WordPress is a savior! Custom Post Type is cherry on cake.

We may or may not like it but, we all have to agree that its something that gives us as front-end developers freedom, to have their own CMS platform without any back-end support.

So, to add more to wordpress we often get the need on how to add a custom post type to our theme. In this post will explain each steps as to how to create and fetch too.

Step 1 – Open function.php

functions.php is a file where we can create our custom hooks, actions and also our custom post type. You’ll find it in the theme folder.

Step 2 – Paste the below code in functions.php

Here I am creating a custom post type for “Discourses” so here is the code:

//DISCOURSE POST TYPE CODE
$labels = array(
'name' => 'Discourses Type',
'singular_name' => 'Discourses',
'search_items' => 'Search Discourses Type',
'popular_items' => 'Popular Discourses Type',
'all_items' => 'All Discourses Type',
'parent_item' => 'Parent Discourses',
'edit_item' => 'Edit Discourses',
'update_item' => 'Update Discourses',
'add_new_item' => 'Add New Discourses',
'new_item_name' => 'New Discourses',
'separate_items_with_commas' => 'Separate Discourses Type with commas',
'add_or_remove_items' => 'Add or remove Discourses Type',
'choose_from_most_used' => 'Choose from most used Discourses Type'
);

$args = array(
'label' => 'Discourses Type',
'labels' => $labels,
'public' => true,
'hierarchical' => true,
'show_ui' => true,
'show_in_nav_menus' => true,
'args' => array( 'orderby' => 'term_order' ),
'rewrite' => array( 'slug' => 'discourses/discourses_type', 'with_front' => false ),
'query_var' => true,
);

register_taxonomy( 'discourses_type', 'discourses', $args );

register_post_type( 'discourses',
array(
'labels' => array(
'name' => __( 'Discourses' ),
'singular_name' => __( 'Discourse' )
),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'supports' => array( 'title', 'editor', 'thumbnail' ),
'rewrite' => array( 'slug' => 'discourses', 'with_front' => false ),
'has_archive' => true,
'supports' => array('title', 'page-attributes', 'editor', 'thumbnail', 'excerpt', 'custom-fields', 'comments')
)
);

Now, watch closely! In the code above for the custom post type “Discourses” replace it with your type exactly the same way. Its case sensitive and if you notice there is “s” at some places and at times not. The D is capital and at sometimes its not. So replace the keyword with full attention.

Step 3 – Fetch Data To Template.

Now, we have our custom post type of “Discourses” ready in our back-end. You can add posts, category and featured image too just like default posts of wordpress. So, now how do we fetch the data to a specific template/page? First, for custom post type you always need a category present only then you can fetch it. So, to fetch the data category is most important.

Wordpress Categories

Paste the below code in your template

<?php
$args1 = array(
'posts_per_page' => '-1',
'post_type' => 'discourses', /* This is where you should put your Post Type */
'orderby'=> 'menu_order',
'tax_query' => array(
array(
'taxonomy' => 'discourses_type',
'field' => 'slug',
'terms' => 'All' /* category you make name it here*/
)
)
);

$my_query1 = null;
$my_query1 = new WP_Query($args1);
if( $my_query1->have_posts() ) {
while ($my_query1->have_posts()) : $my_query1->the_post(); ?>

<!-- Your HTML comes here -->

<?php endwhile;
}
wp_reset_query();
?>

That’s it! Your custom post type is ready to go.
For any further help leave a comment or you can contact me on the details given on the sidebar.

Basic Coding Standards

I came across lot of front-end developers asking “What are the basic coding standards for front-end development?” Well, honestly everyone have their own way of writing codes, the way they are comfortable. But, if you ask me we should follow a practice of coding that all the developers understand and also, saves their time.

Few points that I follow are most important while coding:

  1. Code Indentation – The code should be properly indented with tabs and spaces. The hierarchy should be in such a way that by looking it we as a developer easily understand the structure. Also, it avoids missing any tags to close.
  2. Comments  A lot of developers do not comment or else they comment a lot, comment tells yourself and another developer what is your code about and why is it there in the first place. Second a lot of comments increases the file size and which also leads to slow down the website.
  3. Nomenclature – This is a very crucial and one of the most important factor of coding standard, when writing HTMLs we often us classes and now here’s the issue “What should I use for classes? Hyphens(-)? CamelCase?” Again, CamelCase is apt for javascript/jQuery but, for CSS it is recommended to use hyphens because while typing you need not hit shift key again and again for capital letters in between which increase your chances of making mistakes. People say using hyphens increases the size of css well, so does a capital letter so its recommended to avoid hitting special keys and save time. Using names of classes related to div is important. If its a container we better name it as container instead main-container or main-section. Using smaller names increases the speed of coding and reduces the code length.
  4. Project Structure – Well it goes as follows:
    1. Project Name (Folder)
      1. img (Folder)
      2. fonts (Folder)
      3. js (Folder)
      4. css (Folder)
      5. index.html (Files)
  5. Image Sizes – To avoid large images in website few tips, choose .jpg images over png if background transparency isn’t an issue. Saving it with quality of 50% or Medium also helps in reducing the files size. It is recommended that we convert icons to fonts (https://icomoon.io/app/) for fast loading and optimization.
  6.  Minify – Once all the code is tested its a best practice to minify all the css and combine them in one which reduces the server calls. Same applies to javascript/jQuery post development multiple js files can be combined, minified and hosted. If possible we can minify HTMLs too.
  7. Backup – Backup has always been an issue but, its never an issue if we start our projects after creating a repository on git. I usually use https://gitlab.com/ and https://www.sourcetreeapp.com/

 

So, these are points that we all should follow while we code as a front-end developer.

Leave a comment for any queries or requests.

Page 2 of 3

Powered by DisenoBox