開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

Today I will talk about some html tags which are not very well-known but of course they are so useful if you know them. So lets get started.

<s> tag

S tag similar to the line-through value of a text decoration CSS property. This is very useful when you need to represent content that is no longer relevant or valid.

Price - <s>100</s>
<p>Discount Price - 70<p>

<ruby>, <rt>, and <rp> tags

The Ruby <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters.

The HTML Ruby fallback bracket () element is used to provide fallback brackets to browsers that do not support the display of ruby annotations using the element.

<ruby>
  お休み <rp>(</rp><rt>Oyasumi</rt><rp>)</rp>
</ruby>

<detail> Tag

This tag is used to specify additional details that the user can show or hide on click.

<details>
<summary>Click</summary>
<p>Helo</p>
</details>

<abbr> tag

The tag displays the full meaning of the abbreviation when the user hovers the cursor over the abbreviation.

<p>My name is <abbr title="Hlaing Tin Htun">Hlaing</abbr> </p>

Well , there are some other interesting tags you probably don’t know yet. Discovering them might be very useful in our daily works relating with creating HTML elements.

Yuuma

Tweet

During studying flutter, I learned a beautiful and simple grid system. These interesting and simple grid view layout topics I would like to share you today.

Ever created with a multiple layout with multiple rows within a column?

Try a GridView! While there are multiple GridView constructors, the most common way to create a GridView is the count constructor.

GridView.count(
..
..
)

Start by listing all the items you want in the grid,

GridView.count(
children: [allItems],
)

but it doesn’t end there, control how many items you want to across the grid, by setting the crossAxisCount property.

GridView.count(
crossAxisCount: 1,
children: [allItems],
)

Setting it to 1 makes it look like a normal list. And if your items want to some social distancing? Use mainAxisSpacing gives horizontal space between the rows and crossAxisSpacing provides vertical space between the columns.

GridView.count(
mainAxisSpacing: 28.0,
crossAxisCount: 2,
children: [allItems],
)

Now Let’s make simple grid view using GridView.count constructor.

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text("He'd have you all unravel at the"),
      color: Colors.teal[100],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Heed not the rabble'),
      color: Colors.teal[200],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Sound of screams but the'),
      color: Colors.teal[300],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Who scream'),
      color: Colors.teal[400],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution is coming...'),
      color: Colors.teal[500],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution, they...'),
      color: Colors.teal[600],
    ),
  ],
)

The result is!

By Ami

Tweet

今回はsourcetree/githubの認証エラーの対処方法をシェアします。

Tweet

Here is final part how to do push notification using Firebase.Let’s start it.

Get Firebase Cloud Messaging (FCM) Server Key

This step will show how to get FCM key and Firebase web app’s configuration credentials.

Then firstly go to the Firebase site and we need to create a project.

Then add your notification app name for adding Firebase to web app.

Then copy the Firebase configuration keys, and this will help to connect laravel to Firebase.

Next, go to the project dashboard setting and copy the sever key and paste in HomeController of SERVER_API_KEY variable in sendNotification() function. Next step create the controller and let’s add the key.

Create Route

We need to do some of routes to store token and send push notification so let’s add our routes in web.php.

routes/web.php

Create Controller

Here, we need add saveToken() and sendNotification() method for admin route in HomeController.

app/Http/Controllers/HomeController.php

Then update the home.blade.php

In the final step, we have to create head over to a public folder and create a new firebase-messaging-sw.js file; this file holds the web push notification configurations.

public/firebase-messaging-sw.js

Finally, to see the push notification results we need to execute php artisan serve command. Next we will do register, signed-in and then click on the allow notification button, it will generate the device id, also add push notification title and body in the given form.

we will receive notification as like bellow:

By Ami

Tweet

Firstly create a new fresh Laravel project using a composer command:

composer create-project laravel/laravel push-notification-app

Then go to the app’s root:

cd push-notification-app/

Database Connection

Secondly, to make a database connection in .env file filling with database name, username, password.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Install Laravel UI Scaffolding

Next, install ui package and create auth scaffolding based on Bootstrap CSS framework.

composer require laravel/ui

After that, need to install to manifest bootstrap auth ui.

php artisan ui bootstrap --auth

You have to suggested commands to compile your fresh scaffolding.

npm install && npm run dev

Update Server Key in User Table

We need to add a new column in the current user table.

php artisan make:migration add_column_device_token

Subsequently, we need to add this device token key in the new table.

class AddColumnDeviceToken extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        //
        Schema::table('users', function (Blueprint $table) {
            $table->string('device_token')->nullable();
        });
    }

After that, move the device key to the user table.

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'device_token'
    ];

Then type to run migrate execute command.

php artisan migrate

Next week I will show you how to get the Firebase cloud messaging server key and Firebase web app’s configuration credentials.

By Ami

Tweet