How can developers easily compare the two code files using online tools?

Software development has constantly been taken into consideration because the career of geeks entails a complicated set of rules expansion and comparison tools.

Now, with the improvements in technology, numerous techniques have been evolved over time that has given great help to software developers and made this task easy for them.

From primarily based to spontaneous code inventors and comparison tools, we have a bundle of products existing in the market.

All these products facilitate developers to make a layout in a proper way and they can make suitable changes in their programs to make them more operative.

File comparison tools are one of the great instances among all these tools, which help you to make an evaluation of the content of two files.

In terms of computing, file or document checking is described as computerised examining of two different files living on any record system.

Normally, you need to offer two, or more than two files as entering into those tools. And in a result, the tool will provide statistical assessment between those files.

Overall, the result consists of the content material that is exclusive in the files and the content material that is alike.

Why do we need to do this?

Let’s discuss it in a more general way. The content on any website is normally written by bloggers, articles or content writers.

But, this is really a hard task for them, every time to write each and every single new word without repeating that.

And the case is if you are resaying your words, using your same thoughts again and again. Then, your content will not sound good.

Using the same concepts on a repeat base your content will be marked as plagiarised. And as a result of this, it will leave a very bad and negative impact on your SEO.

It will not generate pure leads, and you will not get organic traffic on your site. On this note, the software developers have to face the consequences of this.

Have a look at an example.

Let’s assume, one fine day you’ve written any data on a general topic. And after a couple of days, you have gotten the same topic with a few changes.

So, it is quite difficult to get new ideas on the same topic within the span of a week. But, you still try hard to make your writing dissimilar from the previous one.

Now, you have two content files on the same topic. And you want to make the comparison what are the differences or similarities between these two files.

So, to check this issue you surely need to look for some online tools which will make comparisons for you in an easy way.

Can anyone make a comparison on their own?

By hand, comparisons may be a long time taking activity. And it could contain some human mistakes which will ruin your whole improvement environment.

If a person is a strong self-made, and analytical thinker then that person can make the evaluation easily.

But, if someone is not so capable, then we have a variety of online tools for this purpose. Just like difference checker.

This is one of the excellent tools which we can easily access online. The difference checker checks the differences and similarities between two texts.

This tool matches each and every word side by side due to its inherent procedures and shows you the best result in just no time.

These kinds of tools are of specific assistance to the program builders or software developers who in any other case could by hand examine the code sections.

That is a pretty hard task in this era when opposition among software and program builder agencies is getting harsh and difficult.

This article carries motives for developers to do an easy comparison between the code files using online tools.

How to compare the files?

Obviously, if two or more people are working on the same file simultaneously, then there is a need to check the difference between those files.

There are certain ways to compare two or more files with each other. The online market is full of such kinds of tools.

Which can easily provide you with this facility? And we need to pick or choose the authentic ones, which we find the best for us.

Online Tools

We have a bundle of online difference checkers or other tools which can make easy comparisons between two code files.

These kinds of tools provide great help to the developers to check the difference of their files to others.

So, here we have come up with the best online comparison tool for you, which will surely give you the best results in this context.

Diff checker is one of the superb tools which can identify the main differences and similarities between two texts files.

This tool compares the text so smoothly and highlights the unique and real content between two given files in just seconds.

These tools do have many options for you in several of the contexts; it depends on your commitment.

Some features of these tools are as under

  • You can have the easy evaluation among two text files even if they are of any sizes.
  • You can reshape your written words.
  • It also offers you the facility to check plagiarism.
  • If text comparison tool finds any similar text in the files, you have the option to change it instantly, to make it genuine.
  • You can look for the quality of your text as well.

Final Words

Writing unique content is not easy work to deal with. So everyone has to make themselves more competent in this term.

All the time, generating new thoughts and presenting them in a different and special way is so hectic.

And if your content has a little bit of similarity in it, it becomes so terrible for software developers. And then they have to use the comparison tools to make it unique and plagiarism free.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to add Multiple Google Maps Markers using Google Map API JS V3

In today’s tutorial, we are going to show you how you can add multiple markers to a single Google Map. Not just that though, we are also going to show you how to add custom map styles and custom markers to make your map look even better.

I’m just going to go ahead and show the full code we use to do this, then explain what everything does after. So let’s begin…

In our example, we are using the ID map so your HTML will simply look like this:


<div id="map"></div>

The only CSS styles we have added are:


#map {
    position: relative;
    width: 100%;
    height: 350px;
    display: block;
}

Pretty straight forward so far right? If you want a larger map then just increase the height of the #map in your CSS code.

For the Google Map to work, we need to get a Google API Key. If you need instructions on this then visit here.

You will need to include the JavaScript between the before the sript that runs your JS Google Map API code. This will be as follows:


  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

If you are using WordPress, then you can register and enqueue as follows:


    wp_register_script('google-js', 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBYL8d1Bnuy1b0EwX9iOldIuORnSMSJcjE' );
    wp_enqueue_script('google-js');	

The WordPress code will go in either your theme or child-theme functions.php file if you have one set up.

Now for the JS code…

You will need to call the following code after you load the Google API script mentioned above:


/* Google Map - Contact Us */

if ($("#map").length > 0) {

    function initializeMap() {

        var locations = [
            ['Battersea Park Road', 51.4705666,-0.1728984, 2],
            ['Webbs Road', 51.4575458,-0.165245, 1]
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: new google.maps.LatLng(51.465691,-0.1706737),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        var icon = {
            url: "/wp-content/themes/spectrum/assets/img/map-marker.png",
            scaledSize: new google.maps.Size(70, 70)
        }; 

        var marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            icon : icon
        });            

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon : icon
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }

        var styles = [
            {"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}      
        ];
    
        map.setOptions({styles: styles});            
    
    }
    
    initializeMap();    

} 

So first things first... we added if ($("#map").length > 0) { so that it will only run the JS code on pages that call the map. If you allow it to run on any page, you will find yourself with some console errors, that's why we only run the code on pages that contain the map.

Secondly, we created an array of locations here; var locations = [, you can add as many as you like. Here, we include the info window title, the latitude and longitude coordinates which you can obtain from the URL when you click a location on Google Maps, and also the ID of the location, in our case there are only 2.

In our example, we added two markers, so what we did here is set the 'centre' point to a location that is in the centre of both of the locations so they show correctly on the map. The lat/long value for the centre can be defined here: center: new google.maps.LatLng(51.465691,-0.1706737),.

We then added a custom marker as were not a huge fan of the 'basic' google map markers. You will see on this line; url: "/wp-content/themes/spectrum/assets/img/map-marker.png", that we added the path to our custom marker. We also scaled the marker so that it is double the size so it looks awesome on retina ; ) This was defined on the next line here; scaledSize: new google.maps.Size(70, 70).

We then created a for loop which goes through all the locations and adds each of the pointers on the map using the custom icon that we created.

Finally, we decided to change the default styles of the map. It's always nice to customise this and make it unique. You will see we added var styles = [ and included a long line of code to adjust the map styles. Fear not though, this is very easy to do! Simply head to Snazzy Maps, pick a cool style the matches your website then replace the code with the one provided through their website.

What we end up with our example is a Google Map that looks as follows:

SWEET! We nailed it guys. We sure hope this helps you, if you need any assistance, feel free to drop us a comment below.

As always, happy coding!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Disable Gutenberg without a Plugin

Most people use the plugin ‘Classic Editor’ to disable Gutenberg, but did you know that it is actually really simple to do this with code? With over 5 millions installs, it’s quite clear that a lot of people go for the simple option.

The code needed to disable it is actually very short and simple, so there is no need for a plugin to do the job, just add the following snippet in your theme’s functions.php file:


    add_filter( 'use_block_editor_for_post', '__return_false' );

Yup, it’s that simple… just one line of code!

There are cases where you may want to enable Gutenberg only in some condition. Below are some frequently used examples:

Allow Gutenberg for Posts Only

We use the same filter and return true if it’s on post edit page.


add_filter( 'use_block_editor_for_post', 'my_disable_gutenberg', 10, 2 );

function my_disable_gutenberg( $can_edit, $post ) {
  if( $post->post_type == 'post' ) {
    return true;
  }

  return false;
}

Allow for Page with the Template “Allow Gutenberg”

First, create a new Page Template, take note of the file name:


<?php
/**
 * Template Name: Allow Gutenberg
 */

require_once 'page.php';

Then, still using the same filter, add a conditional to check if it's using that page template:


add_filter( 'use_block_editor_for_post', 'my_disable_gutenberg', 10, 2 );

function my_disable_gutenberg( $can_edit, $post ) {
  if( $post->post_type == 'page' &&
    get_page_template_slug( $post->ID ) == 'page-gutenberg.php' ) {
    return true;
  }

  return false;
}

Conclusion

There are many reasons to disable Gutenberg on your WordPress site. Maybe you already use another Page Builder or it simply lacks the control ACF provides?

For old sites, you generally want to fully disable it. But you might want to have a little taste of Gutenberg by enabling it on Blog Post only. You can do so by following the code above. 🙂

Hope that helps!

Leave a comment if this has helped you or why you choose to disable Gutenberg.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share