How to create google firebase project

Today, we are share with you how to create google firebase project and how to create database in google firebase and how to setup google firebase database in your project. some time ago we are work with one realtime application and then whare use google firebase database for it. so, first we are give some small indroduction for google firebase and what will be done you by google firebase.

What Is Google Firebase:

Google firebase is google free product. you can done much more by google firebase. google firebase provide foloving feature of developer for application development and database. if you know more then visit this link Google Firebase.

1.) Realtime Database

2.) Crashlytics

3.) Crash Reporting

4.) Authentication

5.) Cloud Functions

6.) Cloud Storage

7.) Hosting

8.) Test Lab for Android

9.) Performance Monitoring

How To Create Google Firebase Project:

Now, let's see how to create your first google firebase project step by step. so first open google firebase console by click on this link Google Firebase Console. then you can see following page, look following screenshot image.

Look this screenshot and click on highlight box "Add project". when you click on this "Add project" link then you can seen following dialog box look this second screenshot and follow instuction.

In this dialog box fill your "Project name" and select any country. then click on "CREATE PROJECT" button. then you can seen another dialog box look like.

Continue reading...

Google Patch Serious Chrome Bugs Including A Zero-Day Under Active Exploit

Google have recently fixed numerous security bugs in their Chrome browser. These Chrome bugs include two serious vulnerabilities as well as a zero-day flaw under active exploit. Chrome Zero-Day Under Exploit Researcher Clement Lecigne of Google’s Threat Analysis Group discovered a zero-day bug in the Chrome browser under active exploit. The vulnerability, CVE-2020-6418, was a type confusion flaw in V8 – a Chrome component that processes JavaScript code. Google labeled it a high-severity flaw in their advisory, what makes it serious is its exploitation in the wild. Though, Google hasn’t shared details about how the attackers are exploiting the bug. Yet, they confirm the zero-day is under attack. Other than this zero-day, Google also revealed two other bugs in the Chrome browser. These include two high-severity bugs for which, Google hasn’t hinted of any active exploitation. One of these caught the attention of Google Project Zero’s Sergei Glazunov. Google described it as an Out of bounds memory access in streams (CVE-2020-6407). The other vulnerability caught Google’s attention after researcher André Bargull reported it. This vulnerability, an integer overflow in the ICU component, the researcher was awarded a $5000 bounty. Google Released Patches Recently, Google has patched all the three flaws and released fixes with the latest Chrome version 80.0.3987.122. As the tech giant rolls out the updates, users must ensure their devices are updated to avoid any issues. This is particularly important considering the active exploitation of the zero-day. The present zero-day marks the third major vulnerability that caught the hackers’ attention before a fix. The first of these (CVE-2019-5786) surfaced online in March 2019. The attackers exploited this use after free flaw to target Windows 7. Whereas, the second vulnerability, another use after free flaw (CVE-2019-13720), appeared online in November 2019.

Continue reading...

New JavaScript features coming in 2020 that will surely rock your world!!

Is this another overly hyped article about JavaScript. Perhaps!!! Maybe after reading this you will share my enthusiasm 😁. In 2020 JavaScript will be getting some exciting new features. Most of these features are already in the final stage of proposal and scheduled to release in 2020.
Some of these features are already available in the latest version of Chrome and Firefox browsers. So you can start playing with them in your browser right away. If not you can also head over to https://codesandbox.io which is an online ide that allows you to write code in your browser.
If you would like to see all the proposals for new JavaScript features you can find them in the following github link.
⚡️ https://github.com/tc39/proposals
Excited!!!, let’s dive in.

Object.fromEntries()

First on our list is a Object method. It is very common in javascript to convert objects to array and vice versa. Especially when you are working with database like firebase or some other no-sql service we are often required to do these type of transformation. In es2017 Object.entries() was introduced which returns an array from an Object with its own key property.
Let’s take a look at an example.

const object1 = {
  foo: "somestring",
  bar: 100
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// Outputs-->
// foo: somestring 
// bar: 100 

Object.fromEntries does the opposite of Object.entries. Given an array it will output an object. Here’s an example

const entries = new Map([
 ['foo', 'bar'],
 ['baz', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// expected output: Object { foo: "bar", baz: 42 }

Dynamic import

This new feature will allow JavaScript to dynamically load modules as needed. Currently when we import modules in JavaScript they are loaded pre-runtime. This is why we keep them at the top of our files. This works for most cases. However, to increase performance, what if we could dynamically load some of our modules at runtime. This new feature will allow that. Below is an example of dynamic module import.

const main = document.querySelector("main");
  for (const link of document.querySelectorAll("nav > a")) {
    link.addEventListener("click", e => {
      e.preventDefault();

      import(`./section-modules/${link.dataset.entryModule}.js`)
        .then(module => {
          module.loadPageInto(main);
        })
        .catch(err => {
          main.textContent = err.message;
        });
    });
  }

Dynamic imports will allow developers to have greater control in how modules get loaded in application.

• It gives us the power to boost performance by not loading code until it is likely to be used
• It allows to catch error scenarios when application fails to load a non-critical module
• It can ensure modules that are dependent on each other don’t get caught into a race condition

You can read about dynamic imports more in the following GitHub link
⚡️ https://github.com/tc39/proposal-dynamic-import

String.prototype.matchAll()

This method returns an iterator object for all matches in a string. Let’s jump right into an example

const re = /(Dr\. )\w+/g;
const str = 'Dr. Smith and Dr. Anderson';
const matches = str.matchAll(re);

for (const match of matches) {
  console.log(match);
}

// outputs:
// => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]

This method makes it really easy to work with strings, sub-strings and pattern matching with regex.

Promise.allSettled

This one is probably my favourite so far. It does exactly as the name suggests. It keeps track of settle promises. Let’s elaborate this through an example.
Let’s say we have an array of promises. We can execute them with Promise.all. However, to know their status (which ones resolved and which ones failed) we need to iterate them all and return new value with the status.

function reflect(promise) {
  return promise.then(
    (v) => {
      return { status: 'fulfilled', value: v };
    },
    (error) => {
      return { status: 'rejected', reason: error };
    }
  );
}

const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.all(promises.map(reflect));
const successfulPromises = results.filter(p => p.status === 'fulfilled');

As you can see we are passing in a function called reflect to return the status. The new proposed api will not require this reflect function. We will be able to do the following

const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);
const successfulPromises = results.filter(p => p.status === 'fulfilled');

Optional Chaining for JavaScript

If you have used Angular or Typescript chances are you are familiar with this feature. We often have to check whether an intermediate node exists in a tree like deep object.

var street = user.address && user.address.street;

The Optional Chaining Operator allows a developer to handle many of those cases without repeating themselves and/or assigning intermediate results in temporary variables:

var street = user.address?.street
var fooValue = myForm.querySelector('input[name=foo]')?.value

Example taken from offcial github proposal page.
Optional chaining can be used in three positions

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

Indeed an exciting time for JavaScript. There are a couple of other features that are also up for release in 2020. BigInt and globalThis are notable. Hopefully this article was informative, for more articles like this please follow me and hit that like button 🌞 🌞 🌞

Continue reading...

Best Linux Distributions that Look Like MacOS

macOS is a brand of proprietary graphical operating Systems developed by Apple and marketed as the primary OS in Mac computers. Its latest release is macOS Catalina 10.5, a closed-source operating system with open-source components written in C, C++, Swift, and Objective C and available in 39 languages.

macOS has since come to be known for its modern and sleekly calm look and feel with applets boasting pleasant dropdown shadows, smooth animations & transitions, easy-on-the-eyes fonts, customization, and developer-friendly setup – to list the most prominent features.

Recommended Read: 11 Best Linux Distros for Developers and Programmers

The Linux world is filled with several distributions born of the desire to solve a specified problem using unique design and build approaches. There are distros created for chemists, astrologers, music producers, and there are ones created to emulate macOS.

Do you miss the UI/UX of your old Mac? Or do you want to turn up your computing experience by giving your laptop a shiny new look with an appearance difficult to distinguish from macOS? Today’s list is of the best Linux distributions that look like macOS.

1. Ubuntu Budgie

Ubuntu Budgie is a distro built with a focus on simplicity, elegance, and powerful performance. It accomplishes this task by implementing its remake of the Budgie desktop environment (originally by the Solus project) to mimic the appearance of macOS with some extra sugar to it.

Ubuntu Budgie is more or less a macOS-fied version of Ubuntu – an operating system already known for its reliability, community support, and approval from professionals around the world. What’s cooler, is that Budgie comes with its own unique features. That’s why its a flavor.

2. Zorin OS

Zorin OS is a distro designed to welcome new Linux users into the community by making it less likely for them to miss the aesthetics of their former Windows or macOS, especially with the app menus.

Zorin OS Linux Distro

Just like macOS, Zorin OS respects user privacy, and it delivers reliable performance even on old hardware which makes it a good OS candidate for development, media production, simulations, and gaming.

An extra feature about Zorin OS is its ability to run many Windows applications so it doubles as a windows alternative. Ain’t that cool?

3. Solus

Solus is an independently developed operating system designed for home computing with a variety of tweaks that work to enable users to customize their desktop better. My favorite graphical features in Solus is ist light and dark theme modes coupled with its slide-in ‘Today‘ and ‘Notification‘ panel reminiscent of macOS.

Solus Linux Distro

Its GUI is with thanks to custom made Budgie desktop which works nicely with its application bundle containing Firefox, Rhythmbox, GNOME MPV, Mozilla Thunderbird, etc.

4. Elementary OS

elementary OS is a privacy-focused distro with a custom-built desktop environment called Pantheon. It is designed to replicate the aesthetics of macOS with nice icons, fonts, animations, and wallpapers to compliment.

Elementary Linux Distro

It prides itself with several beautiful features including a multitasking view, picture-in-picture, and do not disturb mode. Like other distros, it ships with a select collection of software to ensure you can get productive right away and an easy-to-use app center.

5. Deepin Linux

Deepin is an operating system designed with the main focus of providing Linux users with an elegant, reliable, and user-friendly computing environment. All its preinstalled applications are built from scratch or rewritten in-house to ensure a cohesive desktop experience across applications and activity flows.

Deepin Linux Distro

Deepin is easy to use as well as to customize and is hailed as an ideal replacement for new Linux from Windows and macOS.

6. PureOS

PureOS is a privacy & security-centric operating system developed by Purism to provide users with the latest technologies in the form of a modern, full-featured and user-friendly auditable OS without trading off performance or neglecting user rights.

PureOS Linux Distro

It can be run as live media from a USB or CD with sone of its distinguishing features being its macOS GUI aesthetic, HTTPS Everywhere browser extension enabled on by default, and its automatically set engine to DuckDuckGo.

7. Backslash

Backlash is a relatively new Linux-based operating system created for 64-bit processors in 2016. It uses a custom User Interface designed to emulate the macOS look & feel using the awesome KDE and each new update ships with nice improvements to the UI.

BackSlash Linux Distro

As is expected of any note-worthy project, Backlash has comprehensive documentation online to help both users and developers get busy with it from beginner to advanced level. You should check it out.

8. Pearl OS

Pearl OS is a Linux distribution created to make users coming from macOS and Windows comfortable using Linux. It currently uses Xfce as its default desktop environment with the promise of delivering its very own PearlDE which will be a desktop environment created by mixing LXDE and Xfce. It is also available to use with LXDE, GNOME, and MATE.

Pearl Linux Distro

Pearl OS also uses Compiz for desktop customization and effects with a quick “Pearl-Compiz-Default-Settings” reset file in the home directory in case users go “overboard” with their customization settings.

Other Mentions

1. Trenta

Trenta is an operating system that existed to provide users with a Linux distro featuring the most competitive and innovative design. It doesn’t make it to the top 10 list because it has been discontinued due to the lack of support from the development community and its developers have diverted their attention to promoting Trenta icons and releasing 2 new products soon – Trenta Wallpapers and Trenta Tools.

2. Gmac

Gmac is unlike the other options because under the hood is Ubuntu running an immensely redecorated GNOME desktop environment that looks almost indistinguishable from macOS. Its logo is created by merging that of Apple and GNOME. If you’re cool with running a macOS-fied Ubuntu then you’re welcome.

Gmac Linux Distro

Adding to the universal advantage of all the above-mentioned distros share (e.g. easy customization and sleek animations), they are qualified to be used both at home and in the office by developers, content creators, gamers, and users in all other fields.

On that note, we’re at the end of our list. I’m sure you’ve already selected one to give a test run when you’re done reading. Or maybe you have recommendations worthy to make it to the list, feel free to drop your comments below.

Ps. If your goal is just to make your desktop resemble macOS without performing a clean install then you can resort to using a macOS theme with any of these macOS like docks.

Continue reading...

Laravel 5.6 - RealTime CRUD System Using Google Firebase

Today, we are share with you how to built real time CRUD system in laravel using google firebase. yes realtime insert, update, delete or listing is easily possible using google firebase database. in this article we are show to you step by step how to create google firebase database and how to integrate in your laravel application and how to built a realtime CRUD.
You can do many realtime programming stuff by google firebase. after you follow all step of this article then you got final output look like following screenshot.

Create New Project In Firebase:

Now, we are start step by step how to built realtime CRUD system using google firebase. so, first you should create one google firebase project. if you don't know how to create google firebase project then visit our this link How to create google firebase project.

After create your google firebase project you must be get following things from your created project.

1.) api_key

2.) auth_domain

3.) database_url

4.) secret

5.) Legacy server key (Only use for notification)

This all things you got from your google firebase project easily

Configure Google Firebase Setting:

Now, we are configure google firebase setting in our laravel application. so, open config/services.php file and set following configuration in this file.

'firebase' => [
    'api_key' => 'api_key', // Only used for JS integration
    'auth_domain' => 'auth_domain', // Only used for JS integration
    'database_url' => 'https://database_url.com/',
    'secret' => 'secret',
    'storage_bucket' => '', // Only used for JS integration
],
 

Create Route:

Now, create following route in your routes/web.php file. add following route in it.

Route::get('users', 'HomeController@users');
 

Here, we are create one get route for user display view.

Add users Method in HomeController:

Now, we are add one users function app/Http/Controllers/HomeController.php file.

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function users()
    {
        return view('realtimecrud');
    }
} 
 

Create View File:

Now, we are create realtimecrud.blade.php in resources/views folder and add following bootstap code in this file for your design view.

@extends('layouts.app')

@section('style')
<style type="text/css">
.desabled {
 pointer-events: none;
}
</style>
@endsection

@section('content')
<div class="container">
    <div class="row">
     <div class="col-md-4">
      <div class="card card-default">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-10">
                            <strong>Add User</strong>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <form id="addUser" class="" method="POST" action="">
                     <div class="form-group">
                            <label for="first_name" class="col-md-12 col-form-label">First Name</label>

                            <div class="col-md-12">
                                <input id="first_name" type="text" class="form-control" name="first_name" value="" required autofocus>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="last_name" class="col-md-12 col-form-label">Last Name</label>

                            <div class="col-md-12">
                                <input id="last_name" type="text" class="form-control" name="last_name" value="" required autofocus>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12 col-md-offset-3">
                                <button type="button" class="btn btn-primary btn-block desabled" id="submitUser">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
     </div>
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-10">
                            <strong>All Users Listing</strong>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <table class="table table-bordered">
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th width="180" class="text-center">Action</th>
                        </tr>
                        <tbody id="tbody">
                         
                        </tbody> 
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Model -->
<form action="" method="POST" class="users-remove-record-model">
    <div id="remove-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog" style="width:55%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="custom-width-modalLabel">Delete Record</h4>
                    <button type="button" class="close remove-data-from-delete-form" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <h4>You Want You Sure Delete This Record?</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect remove-data-from-delete-form" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger waves-effect waves-light deleteMatchRecord">Delete</button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Update Model -->
<form action="" method="POST" class="users-update-record-model form-horizontal">
    <div id="update-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog" style="width:55%;">
            <div class="modal-content" style="overflow: hidden;">
                <div class="modal-header">
                    <h4 class="modal-title" id="custom-width-modalLabel">Update Record</h4>
                    <button type="button" class="close update-data-from-delete-form" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body" id="updateBody">
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect update-data-from-delete-form" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success waves-effect waves-light updateUserRecord">Update</button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection
 

After add this simple html code in your blade file but still it is not done. now we are add some google firebase javascript code for built realtime CRUD. so, now add following js code in this file into the bottom

<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
    apiKey: "{{ config('services.firebase.api_key') }}",
    authDomain: "{{ config('services.firebase.auth_domain') }}",
    databaseURL: "{{ config('services.firebase.database_url') }}",
    storageBucket: "{{ config('services.firebase.storage_bucket') }}",
};
firebase.initializeApp(config);

var database = firebase.database();

var lastIndex = 0;

// Get Data
firebase.database().ref('users/').on('value', function(snapshot) {
    var value = snapshot.val();
    var htmls = [];
    $.each(value, function(index, value){
     if(value) {
      htmls.push('<tr>\
          <td>'+ value.first_name +'</td>\
          <td>'+ value.last_name +'</td>\
          <td><a data-toggle="modal" data-target="#update-modal" class="btn btn-outline-success updateData" data-id="'+index+'">Update</a>\
          <a data-toggle="modal" data-target="#remove-modal" class="btn btn-outline-danger removeData" data-id="'+index+'">Delete</a></td>\
         </tr>');
     }     
     lastIndex = index;
    });
    $('#tbody').html(htmls);
    $("#submitUser").removeClass('desabled');
});


// Add Data
$('#submitUser').on('click', function(){
 var values = $("#addUser").serializeArray();
 var first_name = values[0].value;
 var last_name = values[1].value;
 var userID = lastIndex+1;

    firebase.database().ref('users/' + userID).set({
        first_name: first_name,
        last_name: last_name,
    });

    // Reassign lastID value
    lastIndex = userID;
 $("#addUser input").val("");
});

// Update Data
var updateID = 0;
$('body').on('click', '.updateData', function() {
 updateID = $(this).attr('data-id');
 firebase.database().ref('users/' + updateID).on('value', function(snapshot) {
  var values = snapshot.val();
  var updateData = '<div class="form-group">\
          <label for="first_name" class="col-md-12 col-form-label">First Name</label>\
          <div class="col-md-12">\
              <input id="first_name" type="text" class="form-control" name="first_name" value="'+values.first_name+'" required autofocus>\
          </div>\
      </div>\
      <div class="form-group">\
          <label for="last_name" class="col-md-12 col-form-label">Last Name</label>\
          <div class="col-md-12">\
              <input id="last_name" type="text" class="form-control" name="last_name" value="'+values.last_name+'" required autofocus>\
          </div>\
      </div>';

      $('#updateBody').html(updateData);
 });
});

$('.updateUserRecord').on('click', function() {
 var values = $(".users-update-record-model").serializeArray();
 var postData = {
     first_name : values[0].value,
     last_name : values[1].value,
 };

 var updates = {};
 updates['/users/' + updateID] = postData;

 firebase.database().ref().update(updates);

 $("#update-modal").modal('hide');
});


// Remove Data
$("body").on('click', '.removeData', function() {
 var id = $(this).attr('data-id');
 $('body').find('.users-remove-record-model').append('<input name="id" type="hidden" value="'+ id +'">');
});

$('.deleteMatchRecord').on('click', function(){
 var values = $(".users-remove-record-model").serializeArray();
 var id = values[0].value;
 firebase.database().ref('users/' + id).remove();
    $('body').find('.users-remove-record-model').find( "input" ).remove();
 $("#remove-modal").modal('hide');
});
$('.remove-data-from-delete-form').click(function() {
 $('body').find('.users-remove-record-model').find( "input" ).remove();
});
</script> 
 

After add this javascript code in your blade file then your realtime crud system done successfully.

Now we are ready to run our example so run bellow command ro quick run:

php artisan serve

Now you can open bellow URL on your browser:

 
http://localhost:8000/users

Please also check our demo for realtime CRUD system.

We are hope you like this tutorials, if any question regarding any query please post your question in our forums click on bellow link Laravelcode's Forums

Continue reading...