DEV Community: Emma Ngo

Create a Tarot View App with the Gemini API in just 15 minutes?.

Emma Ngo — Mon, 03 Jun 2024 16:05:21 +0000

Discover "What applications can you make with GeminiAPI?" while engaging with Gemini, a comprehensive language model for Google AI. Here is a demonstration of how to build a Tarot reading app with the help of the Gemini API, including how to send a request through a prompt and get the results.

Author: bunhere.com

I am always looking for feedback on my writing, so please let me know what you think._ ❤️_

How to improve the RES of a web page?

Emma Ngo — Wed, 03 Apr 2024 05:14:36 +0000

It was a nice day when I went to my website and saw this picture.

RES

How do I improve RES now? To answer this question, we first need to figure out what RES is.

What’s RES?

RES (Real Experience Score) is an indicator of the actual user experience with your website. If a web page is considered good, the RES must be greater than or equal to 90.

How to evaluate RES

Depending on the browser, the RES scores are calculated differently, but the evaluation criteria will not be too different and the scales will be similar.

For example, for Google, there are Lighthouse which are evaluated on the basis of factors such as:

FCP (First Contentful Paint) measures the time from the start of the page to the display of the first DOM content
INP (Interaction to Next Paint)—measures page responsiveness using data from the Event Timing API, measuring the time a website takes to respond to user interactions after they perform actions such as clicking or typing
LCP (Largest Contentful Paint)—measures page loading speed, marking when the main content (largest content) of the page is loaded in the page load process
CLS (Cumulative Layout Shift)—Image Stability Measurement
TTFB (Time to First Byte)—measures the connection time and responsiveness of the server WEB

Google RES

And there are many other indicators, these are collectively known as Core Web Vitals. Core Web Vitals are defined by Google and Web Performance Working Group

Web Performance Working Group is part of the World Wide Web Consortium (W3C), which is tasked with providing methodologies to measure and improve the performance of web applications. They developed standards and protocols that allow developers and browsers to build and deliver websites more efficiently, improving the end-user experience.

After getting a good understanding of the RES indicators, how can we improve these indicators?

Improved RES — optimized website experience

Based on the above definitions, the objectives needed to improve these indicators are: reducing the first load time of the web page; reducing response time of tasks such as clicks or input; fast page loading; control of image quality and smooth display of the image; server responsiveness, etc.

FCP

Reduce the size of the site.

Delete unnecessary files like JavaScript, CSS, and images.
Use miniature versions of JavaScript and CSS files.
Image optimization (see below).

Image optimization.

Use smaller image formats, such as webp, JPEG 2000, or JPEG XR.
Compress images with tools like TinyPNG or Smush.
Cut and resize the image to fit the display size.

Use browser cache.

Enable browser cache for JavaScript, CSS and image files.
Use HTTP headers to control cache time.

Avoid unnecessary JavaScript.

Only load JavaScript when necessary.
Use compact JavaScript libraries.
Avoid using JavaScript to perform tasks that can be done in HTML or CSS.

INP

JavaScript time reduction:

Use miniature versions of JavaScript files.
Avoid using JavaScript to block output.
Using web workers to perform heavy JavaScript tasks.

Avoid using JavaScript to block rendering:

Set the JavaScript files at the bottom of the page.
Use async or defer attributes for JavaScript files.

Using web workers to perform heavy JavaScript tasks such as image or video processing.

Page size reduction:

Delete unnecessary files like JavaScript, CSS, and images.
Use miniature versions of JavaScript and CSS files.
Image optimization (watch FCP).

LCP

Image Optimization (watch FCP)
Use browser cache (watch FCP)
Avoid unnecessary JavaScript (watch FCP)

CLS

Use fixed image size:

Set the size of the images before loading.
Use width and height attributes for tags.

Avoid using JavaScript to change the layout—location or size of HTML elements.

Use CSS Flexbox or Grid to create a flexible site layout.

Track CLS with PageSpeed Insights to track CLS and get improvement suggestions.

TTFB

Website Compression: Compress HTML, CSS and JavaScript using gzip or Brotli.
Database Optimization: Reduce database size and optimize queries.
Use browser cache (watch FCP)

Use Tools

In addition, you can use the PageSpeed Insights tool to evaluate website performance and receive suggestions for improvement.
Monitor website performance with Google Analytics.

RES Updated

References

PageSpeed Insights: Document

I am always looking for feedback on my writing, so please let me know what you think. ❤️

Website: bunhere.com

Optimize Command Line Usage with Amazon CodeWhisperer

Emma Ngo — Wed, 13 Mar 2024 05:12:23 +0000

As a developer, the use of command-line commands to work from environment configuration to program execution is no longer unusual. For some people, remembering commands isn’t too hard, but using tools is also a way to support and increase performance.

I used to use Fig.

Fig

Fig helps users execute sentences faster with suggestions of sentences executed (and many other tasks). But I just got an e-mail from Fig about the shutdown, which is because the Fig team joined Amazon and created the Amazon CodeWhisperer for command line with core tasks from Fig and to use all the resources to concentrate on the CodeWisperer that’s one of the reasons why Fig stopped working.

Fig mail

And to see what the CodeWhisperer has to do with it, let’s find out about it below!

Learn and install CodeWhisperer.

Difference between Fig and CodeWhisperer

CodeWhisperer for command line provides the core features of Fig, including:

Complete IDE-style syntax for over 500+ command-line tools (CLI).
Translate natural language to Bash.

CodeWhisperer for command line is free for individual users and is designed to be faster, more reliable than Fig. They have many interesting features to be released in CodeWhisperer for command line in 2024, including:

Linux Support
Talk to Who
Inline AI completions
Autocomplete in SSH
Private autocomplete

Note: CodeWhisperer for command line does not include features similar to Fig Scripts, Dotfiles, Plugins or Servers, and they do not plan to support these features in the near future either.

What’s the CodeWhisperer?

With the Fig team’s profound awareness of the impact AI has on developers, creating CodeWhisperer to replace Fig is understandable.

Amazon CodeWhisperer for command line is a code-writing tool using artificial intelligence. (AI). This tool increases efficiency and productivity for programmers by:

Proposal Code/ Command Line
Supports multiple programming languages
Integrate with an integrated development environment (IDE)
Accelerate software development: helps programmers focus more on software logic and architecture, rather than technical details.
Improved code quality

Amazon CodeWhisperer for command line is a powerful and useful code-writing tool for command-line programmers. This tool helps you increase efficiency and productivity, minimize errors, and speed up software development.

You can find out more here

Setup

To install CodeWhisperer, follow the steps below:

Step 1. Download CodeWhisperer for command line here CodeWhisperer only supports MAC @@

Step 2. Authentication

For the CodeWhisperer individual user: Use the Builder ID to authenticate with CodeWisperer. You will receive the start URL of your AWS account.
For CodeWhisperer Professional users: Use the IAM Identity Center to authenticate with CodeWisperer. You will receive the start URL of your AWS account.

Step 3. Follow the instructions to install the shell integration and grant access to macOS.

Supported command line environments

CodeWhisperer for command line integrates with the following environments:

Operating systems: macOS
Shells: bash, zsh, fish
Terminal emulators: iTerm2, macOS terminal, Hyper, Alacritty, Kitty, wezTerm
IDEs: VS Code terminal, Jetbrains terminals (except Fleet)
CLIs: 500+ of the most popular CLIs such as git, aws, docker, npm, yarn

Verifying your download

After you download CodeWhisperer for command line, you can verify its code signature as follows:

codesign -v /Applications/CodeWhisperer.app

If there is no output, then the app’s code signature is valid, and it has not been tampered with since it was signed.

Now you can access the CodeWhisperer and integrate it into the IDEs you want to use.

Conclusion

The creation of tools makes us work faster, more productive. Personally, I don’t think it’s too embarrassing not to remember all the orders.

Welcome to your installation, and take advantage of the great features of Amazon CodeWhisperer for command line

If you like this post and my open source, don’t forget to give me support (clapp, upvote).

Author: bunhere.com

I am always looking for feedback on my writing, so please let me know what you think. ❤️

Learn about push notification types! And the effective Push Notification elements

Emma Ngo — Sun, 03 Mar 2024 12:04:46 +0000

In today’s digital age, push notifications have become an integral part of the experience of mobile users and users of web applications. From notifications of new news and updates on events to reminders of daily activities, push notifications are boosting the relationship between users and apps.

It’s also a powerful tool to attract users’ attention and keep them in your app. However, not all push notifications work.

This article will provide you with information about the most common types of push notifications and the important factors that contribute to generating effective push notifications.

Push Notification

1. What is Push Notification??

Push notification is a way for mobile applications or websites to send notifications to users without them opening the application.

1.1. Classify push notification usage

By Purpose

Transaction Notification: Updates on financial operations, payments, and transactions. For example, a notification from a bank, an e-wallet.
Event Notification: Notifications of upcoming events, promotions, and discounts. For example, notifications from shopping apps and social networks.
News Notification: Updates on the latest news and new articles. For example, notifications from news apps and blogs.
Reminder notifications: reminders of important schedules, events, and dates. For example, notifications from the calendar app, notes.
Interactive Notifications: Updates about other people’s activities, new messages. For example, notifications from social networking applications and chats

By Application Platform

Mobile App: Send to the user via the mobile app installed on the device.
Website: Send to users via a web browser. For example, an announcement from a news site.
Wearable device: sent to users via wearable devices like smartwatches.
Voice: Sends voice notifications. For example, a virtual assistant notification.

By priority level

Emergency: immediate display, sound, and vibration. For example, hazard warnings, natural disasters.
Normal: Displayed in the notification bar, there may be a sound or slight vibration. For example, new message notifications and app updates.
Silent: Show in the notification bar but no sound or vibration. For example, advertising announcements.

By display

Text Format: Displays notification content as simple text.
Image format: displays the message content accompanied by the image.
Video format: displays notification content accompanied by video.
Interaction type: Allows users to interact directly with notifications. For example, answering messages, ordering products.

1.2. Notes

Take into account the frequency, timing, content, and display of notifications to avoid annoying users.
Additionally, users can customize notification settings for each application, including enabling/disabling notifications, choosing the type of notification they want to receive, and selecting sounds and vibrations.

2. Types of push notifications

Here are some types of push notifications and their purposes:

Standard Push Notifications

Standard Push Notifications This is the simplest type of notification, containing only text and can include images.

This notification is usually used to notify about events, news, or new content in the app.

Rich Push Notifications

Rich Push Notifications contains more content than standard push notifications, including text, images, videos, and other interactive features.

This helps highlight the message and provides a better user experience.

Example: An e-commerce application can use rich push notifications to display the latest product with images and discounts.

Disadvantages: Requires large data capacity, may not be compatible with all devices and operating systems, more complex in creation and design.

Interactive Push Notifications

Interactive Push Notifications allows users to take action directly from the notification bar without opening the application.

Example: Users can answer messages, conduct short surveys, or quickly view new information from the notification bar.

Geotargeted Push Notifications

Geotargeted Push Notifications uses a user’s location data to send a notification when they get close to a specific location.

For example: A hotel booking app can send push notifications when users are near a multi-hotel area.

Segmented Notifications

Sends notifications to specific user groups based on criteria such as age, gender, preferences, previous behavior, and geographical location.

Example: A sports app can send notifications about an ongoing match only to users who have expressed interest in the sport.

Behavioral Notifications

Behavioral Notifications: Personalizes notifications based on previous user behavior in the application.

Example: An online menu application can send notifications about offers or new dishes based on a user’s order history.

Transactional Notifications

Transactional Notifications are notifications relating to specific transactions that users make in an application.

Example: Order confirmation, shipping status update, and successful payment notification.

Reminder Notifications

Reminder Notifications send notifications to remind users of events or tasks they need to perform.

Example: Reminders of upcoming meetings, exercise schedules, or deadlines.

Silent Notifications

Silent Notifications: Not displayed to users, but used to update data in the background or activate automated processes.

Example: Updates data from the server, updates geolocation without interrupting user experience.

Persistent Notifications

Persistent Notifications: The notification appears on the device’s notification bar and is not deleted until the user performs a specific action or accepts the notification.

Example: Notification of network connection status, notification of application or system status.

3. How do you SEND notifications effectively?

3.1. Survey

Survey

According to Helplama obtained the following result:

43% of users said receiving 2–5 push notifications a week would turn them off the push notification.
30% of users will stop using the app altogether if they receive 6–10 push notifications weekly.
64% of people will stop using the app altogether if they receive more than 5 push notifications per week.
61% of users will use the app more often or at the same rate if push notifications are personalized to their stated preferences.
Older users (30 years and older) do not like push notifications more than younger users (18–29 years old).

3.2. 15 criteria when pushing notifications

Based on the above data, you need to consider the content as well as the method of sending notifications to keep the user on track. I need to remind you. 15 criteria Below are all the criteria that are important when implementing push notifications:

[1] Priority user consent and preferences: Always ask for user consent for notifications and provide clear options for users to manage their preferences.
[2] Personalization and segmentation: Adjust notifications based on user behavior, preferences, and demographics. Segmenting your audience ensures that the message is relevant and attractive to each group of users.
[3] Create a clear and concise message: Make sure your message is simple, easy to understand, and delivers the core message quickly.
[4] Use multimedia wisely: combine images, videos, or sounds to enrich the notification, but do so in a reasonable way to avoid overwhelming the user.
[5] Reasonable notification time: Sends notifications at times when users are most likely to receive them. Consider time zones and user habits while avoiding annoying hours.
[6] Maintaining frequency balance: The user receiving too many notifications can cause annoyance and uninstall the application. Find a balance that keeps users up-to-date without overwhelming them.
[10] A/B testing deployment: regularly check different notification versions to see which version works best in terms of content, time, and frequency.
[11] Performance measurement and analysis: Use analytics to track your notification performance. This data is crucial if you want to optimize your strategy and improve the level of interaction.
[12] Relevance assurance: Notifications must always provide content that is valuable to the user, whether it is information, entertainment, or advertising.
[13] Assure multi-platform elements: Adjust your approach to match the best principles and practices of different platforms (iOS, Android, web, v.v.).
[14] Use notifications only for critical alerts: Pre-set push notifications for important or urgent messages to maintain effectiveness.
[15] Provides the option to allow rejection: Users can easily refuse to receive notifications, which respects their preferences and improves overall satisfaction.

End

Hopefully, this article provides enough insights and definitions of how to use push notifications , as well as helping you understand how to implement push notifications in a reasonable way to keep users on track with your app, avoiding push notification work.

See you in the next article on how to create push notifications with the PWA application.

Find me: bunhere.com

I am always looking for feedback on my writing, so please let me know what you think._ ❤️_

License Your code is right: A GitHub Must-Do

Emma Ngo — Mon, 22 Jan 2024 05:12:27 +0000

Introduction

When creating a repo on GitHub, you need to choose a license for your project. Have you ever wondered what each of these licenses means?

A license is a legal document that defines the rights of users to access the source code of a project. There are many different types of licenses, each with different rights and restrictions.

GitHub Licenses

Each type of license has its own terms and conditions, but they are generally divided into two main categories.

Copyleft licenses require that all copies of the source code be distributed under the same license. This means that software licensed under the GPL is always open-source and free.
Permissive licenses allow users to use and distribute the source code in any way they want, as long as they give credit to the author.

Follow this blog to research Github License

Read: Github License

Find me: bunhere.com

I am always looking for feedback on my writing, so please let me know what you think. ❤️

Create a portfolio website without coding. Why not??

Emma Ngo — Wed, 17 Jan 2024 16:36:34 +0000

figma to code

Introdution

With the rapid development of AI, developers have been facing the question of whether AI can replace developers. The answer to this question depends on the perspective of each individual.

In this article, I will focus on the fact that, thanks to a few AI tools, it is now possible for anyone to create a website, not just developers. You can be a designer, or simply have the skills to use Figma.

Using Figma, you only need to have good aesthetic sense and a good layout for the interface to create your own portfolio website.

Some Figma Plugins

Readmore here: Figma to Code

Conclusion

Here is a product created using DhiWise, with some manual source code edits.

Demo: figmatocode.bunhere.com

Source code demo: BunDemo — Figma to code

I am always looking for feedback on my writing, so please let me know what you think._ ❤️

Building a Pick-Me Game with Next.js and Google Sheets Integration API

Emma Ngo — Fri, 24 Nov 2023 17:32:16 +0000

Google Sheets Integration API

In this article, we will delve into the exciting world of web development by creating a pick-me game using Next.js. Not only will we build an engaging user interface, but we’ll also explore the integration of Google Sheets to store user data effortlessly.

Prerequisites

Next.js
Google Sheets API

pickme demo

Author: bunhere.com

I am always looking for feedback on my writing, so please let me know what you think. ❤️

Easy way to build your own SHORTEN URL WebApp with NextJS

Emma Ngo — Sat, 11 Nov 2023 08:07:13 +0000

shorten url webApp

Are you tired of sharing long and cumbersome URLs?

Do you want to create your own URL-shortening service?

While there are a lot of services available that help with this, they are not free.

I offer my work on creating an open source Shorten Url in order to save costs (sometimes I just need to pay for the domain name).

In this tutorial, I’ll walk you through the process of building your very own URL-shortening web application using Next.js, a popular React framework.

Author: bunhere.com

I am always looking for feedback on my writing, so please let me know what you think. ❤️

Turn your website into a mobile app with PWA

Emma Ngo — Mon, 30 Oct 2023 07:25:17 +0000

When I used Lighthouse to analyze my website, I found out that there was one criterion that my website could not meet, and that was PWA.

I’m starting to wonder what PWA is.

PWA (Progressive Web Apps) is a web app that uses progressive enhancement to provide users with a more reliable experience, uses new capabilities to provide a more integrated experience, and can be installed. And, because it’s a web app, it can reach anyone, anywhere, on any device, all with a single codebase.

Read my article about PWA here

Basic Overview of SEO for Fresher Web Developers

Emma Ngo — Mon, 16 Oct 2023 07:29:15 +0000

Overview

SEO stands for Search Engine Optimization, or search engine optimization. SEO is an important process in web development. A website that is SEO-optimized will be more likely to appear at the top of the search results, thereby attracting more visits.

But for a fresher developer, you're going to focus on how to create or develop a website to ensure that it's functional or that the interface is eye-catching.

In this article, I will only discuss the basic concepts and approaches to SEO in web development.
Read the artical

[Material Web 1.0] Material Design with a Web Platform

Emma Ngo — Sun, 01 Oct 2023 12:08:01 +0000

Introduce

Material Design is a design language developed by Google in 2014. It is based on the idea of creating interfaces that are intuitive, beautiful, and responsive. Material Design uses a variety of elements to achieve this, including:

Motion : Material Design uses motion to create a sense of depth and realism in interfaces. Buttons and other elements move in response to user input, and animations are used to guide users through tasks.
Depth : Material Design uses shadows and highlights to create a sense of depth in interfaces. This helps users understand the hierarchy of elements on a screen and identify what is interactive.
Light and shadow : Material Design uses light and shadow to simulate the way that light interacts with physical objects. This helps to create interfaces that are more realistic and engaging.
Color : Material Design uses a vibrant color palette to create interfaces that are both visually appealing and easy to read.

Material.io includes extensive UX guidance as well as UI component implementations for Android, Flutter, and the Web. In this blog, I’ll concentrate on Material with the web application.

Material 3, the most recent version, enables personal, adaptive, and expressive experiences ranging from dynamic color and improved accessibility to foundations for large screen layouts and design tokens.

Material 3

The benefits of using Material Design

It creates a consistent user experience across different platforms. Whether a user is using an Android app, a web app, or a desktop app, they can expect a similar look and feel. This makes it easier for users to learn how to use new products and to switch between different devices.
It is visually appealing. Material Design uses a vibrant color palette and realistic animations to create interfaces that are both beautiful and engaging.
It is responsive. Material Design interfaces are designed to be responsive to user input. This means that buttons and other elements move and change in response to user touch and gestures. This makes interfaces more intuitive and easier to use.

Material Web

If you’re a frontend developer, you must be familiar with the use of library components.

Material Web is Google’s component library for building applications that work in any web framework.

Material Web, also known as Material Web Components or MWC, is a library of web components that follows Google’s Material Design guidelines.

Material Web

Web components

Web components are custom HTML elements with encapsulated styles and behaviors. They work across many different frameworks (such as Lit, React, Vue, and Svelte) as well as web environments (such as Eleventy, Wordpress, and Ruby on Rails).

Design Token

Design tokens are the building blocks of all UI elements. In MWC, tokens are CSS custom properties that can be used to style components.

Tokens ensure the same style values are used across design files and code

Material 1.0

Material 1.0 (released in September 2023) Web components are a collection of web components built on the Material Design language. These web components provide web developers with an easy way to create beautiful, user-friendly, and responsive web interfaces.

The following are the features and components that are currently available on Material version 1:

Features
Color theming
Typography theming
Components
Button
FAB
Icon button
Checkbox
Chips
Dialog
Divider
Elevation
Focus ring
List
Menu
Progress indicators
Radio
Ripple
Select
Slider
Switch
Tabs
Text field

Quick start

Install Material web components.

npm install @material/web

Import element definitions from _@material/web/<component>/<component-variant>.js_.

// index.js
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/checkbox/checkbox.js';

Use the tag in HTML markup. Refer to the component docs for more guidance on using each component.

<script type="module" src="./index.js"></script>

<label>
  Material 3
  <md-checkbox checked></md-checkbox>
</label>

<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Next</md-filled-button>

End.

In this article, I’m just introducing you to the concept of material design and its applications in web application development.

Material Web 1.0 has just been released, so there will be many features and components that are not available at the moment.

See you in the next post!

Native PHP: How to Start?

Emma Ngo — Sat, 26 Aug 2023 05:31:05 +0000

I’m a web developer, and the main language that I use is PHP. As you know, actually, more than 70–80 percent of the current website you can see is PHP.

Before NativePHP, there was a lot of technical help needed to build PHP into an application (example: PHP Desktop). One of the most famous PHP frameworks currently is Laravel, and in Laracon 2023 day 2 the event of Laravel, Marcel Pociot introduced us to NativePHP with the topic "Writing Desktop Apps with PHP.”

Actually, I tried it, and it was really easy. You just need 3 commands, and you will have an application based on a standard Laravel project. It looks like a package for Laravel, so don’t worry if you are a PHP player.

How do I start?

If you have run the project with Laravel before, I believe you only need to run three commands before you can work with nativePHP

Installation

composer require nativephp/electron

You can run your current Laravel project or create a new one.

Run the installer

php artisan native:install

With the two commands above, nativePHP was successfully set up.

The last thing is to run it.

php artisan native:serve

Then, you will get an application like this:

What is special?

nativePHP has 5 highlight features; you can read more here.

Window management
Menu management
File management
Database support (SQLite)
Native notifications

But the thing that impresses me is “Menu Bar”

I really think that it gives me an application, not a web application anymore.

Menu bar label

Menu bar Context Menu

End.

This topic might be late because nativePHP was introduced in April 2023.

But I believe that not many people know about the interesting features of nativePHP.

As before, PHP has other technical support PHP to make an application like “PHP Desktop”.

There are a lot of opportunities for PHP developers like me to build our product from the ground up.

Let's try; I'm impressed by what you can do with your application!!

Have a nice day :))))

DEV Community: Emma Ngo

Create a Tarot View App with the Gemini API in just 15 minutes?.

How to improve the RES of a web page?

What’s RES?

How to evaluate RES

Improved RES — optimized website experience

FCP

INP

LCP

CLS

TTFB

Use Tools

References

Optimize Command Line Usage with Amazon CodeWhisperer

Learn and install CodeWhisperer.

Difference between Fig and CodeWhisperer

What’s the CodeWhisperer?

Setup

Supported command line environments

Verifying your download

Conclusion

Learn about push notification types! And the effective Push Notification elements

1. What is Push Notification??

1.1. Classify push notification usage

By Purpose

By Application Platform

By priority level

By display

1.2. Notes

2. Types of push notifications

Standard Push Notifications

Rich Push Notifications

Interactive Push Notifications

Geotargeted Push Notifications

Segmented Notifications

Behavioral Notifications

Transactional Notifications

Reminder Notifications

Silent Notifications

Persistent Notifications

3. How do you SEND notifications effectively?

3.1. Survey

3.2. 15 criteria when pushing notifications

End

License Your code is right: A GitHub Must-Do

Introduction

GitHub Licenses

Follow this blog to research Github License

Read: Github License

Create a portfolio website without coding. Why not??

Introdution

Some Figma Plugins

Conclusion

Building a Pick-Me Game with Next.js and Google Sheets Integration API

Prerequisites

Read More

Easy way to build your own SHORTEN URL WebApp with NextJS

Read More

Turn your website into a mobile app with PWA

Basic Overview of SEO for Fresher Web Developers

Overview

[Material Web 1.0] Material Design with a Web Platform

Introduce

The benefits of using Material Design

Material Web

Web components

Design Token

Material 1.0

Quick start

End.

Native PHP: How to Start?

How do I start?

Installation

Run the installer

What is special?

End.