Showing posts with label Google. Show all posts
Showing posts with label Google. Show all posts

Thursday, June 18, 2015

Google Polymer – How It’ll Change the Way Web Apps are Built

Along with Google Photos, Google has also rebuilt Polymer from scratch, addressing performance improvement and efficiency. Think of Polymer as an SDK (Software Development Kit) for the Web, one which makes web application development so much faster using a new standard called Web Components.


Web Components allow us to create custom elements and tags for our websites. In this post we will look at how the custom elements in Google Polymer can help aid web app development. Plus, we will also look at a few demos on how these custom elements can be put to work.


About Web Components


The best way to understand how Web Components works is by looking at the current standard elements like <audio>. When we add <audio> along with the URL sources of the audio, web browsers will render this element as an audio player with the play and pause button, the time rail as well as the volume slider. Ever wonder how the player controls are built and styled?


The UI control player is hidden beneath as Shadow Roots, also known as Shadow DOM. To view Shadow DOM, launch the Chrome DevTools > click on the Cog icon > select the Show user agent shadow DOM option.


In the following screenshot, you can find a stack of <div> and <input> elements that build the UI player controls in secret.


Shadow DOM view in Chrome

Today, with Web Components, we can name our own elements as well. We can build an element like, <twitter> to embed a Twitter feed or (maybe) <chart> to embed a chart.


Furthermore, these custom elements may also have a couple of accepted custom attributes. In regard to the <twitter> element, you set an attribute called username which will be used to specify the Twitter username.



<twitter username="hongkiat"></twitter>

Custom Elements in Polymer


Polymer comes with a bunch of elements that account for (almost) every web application need. Google divides these elements into groups: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements, and Molecules.


1. Iron Elements


Iron Elements is a collection of basic elements. These basic elements are what we normally use to build a web page such as an input, form and image. The difference is Polymer adds some extra powers to these elements.


All elements in this group are iron- prefixed, for example <iron-image>, which is used to display an image. The <iron-image> element has been equipped with some extra attributes that we cannot apply in the regular <img> element. We can, for example, add preload, fade, and placeholder attributes:



<iron-image preload fade placeholder="http://lorempixel.com/600/400" src="http://www.hongkiat.com/img/awesome-image.jpg"></iron-image>

The above example will first show the image placeholder and then fade into the actual image in the src as it is fully loaded, performing a smooth image loading effect.


2. Paper Elements


The Paper Elements is a group of Material Design elements. Material Design is Google design language to makes user interface and experience across Google platforms both the Web and Android apps more visually consistent. Some elements that are unique to Material Design are Paper and Floating Action Button (FAB).


Paper


Paper is Google’s metaphor for the medium that underlies the content. To add a paper with Polymer, we use the <paper-material> element. This element takes 2 attributes:


  • elevation to lift the Paper, hence adding a shadow to reinforce the elevation

  • animated will apply animation as the Paper elevation change.

Floating Action Button (FAB)


The Floating Action Button (FAB) is a circular button with an icon, floating on the screen, usually with a stand-out color. Google suggests that this button carries a frequently-accessed function. Here’s an example:


The following code snippet adds a Paper Material with an image and an FAB.



<paper-material elevation="1" class="paper">
<iron-image sizing="cover" src="img/berries.jpg" class="image"></iron-image>
<paper-fab icon="favorite" title="heart" tabindex="0" class="button"></paper-fab>
</paper-material>

We will have the following result:


We have a photo with a “heart” button floating on top of it. Click it to Like the photo, adn the button gives off a ripple effect to acknowledge the click.


3. Google Web Components


The Google Web Components are special elements that cope with Google APIs and services such as Google Maps, Youtube, as well as Google Feed, to name a few. Elements in this group make interacting with Google services just a few lines away.


The following is an example to show a Google Map using the <google-map> element.



<google-map latitude="37.422" longitude="-122.084058" zoom="19">
<google-map-marker latitude="37.422" longitude="-122.084058" draggable="true">This is Googleplex</google-map-marker>
</google-map>

As you can above, the <google-map> element takes the latitude and longitude to specify the location on the map. We can also nest <google-map-marker> to show a map marker of that location along with a text which will appear upon clicking on the marker.


Want to show a Youtube video? you can use the <google-youtube> element.



<google-youtube video-id="VgmyVHYV1mE" height="360px" width="640px"></google-youtube>

Similarly we customize the output through attributes.


4. Gold Elements


The Gold Elements are the elements designed specifically for e-commerce apps. Here you will find element to show credit card, email, phone and ZIP input which all have been equipped with format validation to ensure correct data input and security. Here is one example to add Visa credit card input.



<gold-cc-cvc-input card-type="visa"></gold-cc-cvc-input>

5. Other Elements


The remaining elements include Neon elements for animation and special effects, Platinum elements for offline and push notifications and lastly Molecules, wrappers for third-party libraries.


Editor’s Note: At the time of this writing, Neon Elements, Platinum Elements and Molecules are still not available.


Integrating Polymer


Want to use Polymer in your web development? Here’s how to install and integrate it into your web pages. As most Polymer elements rely on one another, the best way to install Polymer is through Bower.


Bower is a project dependencies manager that makes it easier to install scripts or styles required to run the project. Check out our earlier post on how to install, update &remove web libraries easily with Bower.


To integrate Polymer, launch Terminal then navigate to your project directory, assuming you have created one. Then run bower init command to initiate bower.json file into your project that will be used to record the project dependencies. Open bower.json and add the following lines.



"dependencies":
"polymer": "Polymer/polymer#^1.0.0",
"google-web-components": "GoogleWebComponents/google-web-components#^1.0.0",
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.0",
"gold-elements": "PolymerElements/gold-elements#^1.0.0"


This setup assumes that we are going to use all the elements from each group. You may remove what you do not need from the dependency list. As the dependencies are set, run the bower install command to install the dependencies on the list.


This process may take a while as it involves grabbing a huge amount of files from the repositories. Once done, you should find them saved in the bower_components folder.


Open the HTML file you want to use the Polymer components in. Within the document head, link the WebComponents.js which is the polyfill for browsers that do not support WebComponents yet, and import the component files using HTML Import.


Here is an example:



<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/iron-image/iron-image.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/google-map/google-map.html">
</head>

This setup will enable us to use the <iron-image>, <paper-fab>, <google-youtube> elements.


Showcases


Here are some of the web apps that are already using Google Polymer.


Google


Google used Google Polymer in the Google IO 2015 web page; Google Fi, the Google wireless service for carriers and vendors in partnership; and Google Music.


Custom Elements


CustomElements is a hub where you can find custom elements built with Web Components. It makes use of the Paper element to contain and build the list. It also provides a convenient route to install these elements through Bower and NPM.


Chrome Dev Editor


A Chrome application for code editing that works surprisingly well. This app uses the FAB button, Paper menu, and Paper dialog elements in the user interface.


Polymer Designer


A tool to build web application with Polymer elements using a drag-and-drop interface.


Daily Stock Forecast


A stock exchange report and forecast built entirely with Polymer elements.


Ele


Ele is a code editor to create and share Polymer and custom elements built with Polymer API.


Polymer Mail


An email client app for Gmail. It looks nice and fluid, although sadly, it is not fully functioning.


Final Thoughts


Polymer has an enormous scope and it might take you a while to get used to all the custom elements as well as its API. Nonetheless, Web Components and Polymer will certainly influence the way we build web applications. Stay ahead of the crowd by reading more about Web Components – references are found below.


Useful References



Google Polymer – How It’ll Change the Way Web Apps are Built

Wednesday, June 17, 2015

Google Polymer – How It’ll Change the Way Web Apps are Built

Along with Google Photos, Google has also rebuilt Polymer from scratch, addressing performance improvement and efficiency. Think of Polymer as an SDK (Software Development Kit) for the Web, one which makes web application development so much faster using a new standard called Web Components.


Web Components allow us to create custom elements and tags for our websites. In this post we will look at how the custom elements in Google Polymer can help aid web app development. Plus, we will also look at a few demos on how these custom elements can be put to work.


About Web Components


The best way to understand how Web Components works is by looking at the current standard elements like <audio>. When we add <audio> along with the URL sources of the audio, web browsers will render this element as an audio player with the play and pause button, the time rail as well as the volume slider. Ever wonder how the player controls are built and styled?


The UI control player is hidden beneath as Shadow Roots, also known as Shadow DOM. To view Shadow DOM, launch the Chrome DevTools > click on the Cog icon > select the Show user agent shadow DOM option.


In the following screenshot, you can find a stack of <div> and <input> elements that build the UI player controls in secret.


Shadow DOM view in Chrome

Today, with Web Components, we can name our own elements as well. We can build an element like, <twitter> to embed a Twitter feed or (maybe) <chart> to embed a chart.


Furthermore, these custom elements may also have a couple of accepted custom attributes. In regard to the <twitter> element, you set an attribute called username which will be used to specify the Twitter username.


 <twitter username="hongkiat"></twitter> 

Custom Elements in Polymer


Polymer comes with a bunch of elements that account for (almost) every web application need. Google divides these elements into groups: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements, and Molecules.


1. Iron Elements


Iron Elements is a collection of basic elements. These basic elements are what we normally use to build a web page such as an input, form and image. The difference is Polymer adds some extra powers to these elements.


All elements in this group are iron- prefixed, for example <iron-image>, which is used to display an image. The <iron-image> element has been equipped with some extra attributes that we cannot apply in the regular <img> element. We can, for example, add preload, fade, and placeholder attributes:


 <iron-image preload fade placeholder="http://lorempixel.com/600/400" src="http://www.hongkiat.com/img/awesome-image.jpg"></iron-image> 

The above example will first show the image placeholder and then fade into the actual image in the src as it is fully loaded, performing a smooth image loading effect.


2. Paper Elements


The Paper Elements is a group of Material Design elements. Material Design is Google design language to makes user interface and experience across Google platforms both the Web and Android apps more visually consistent. Some elements that are unique to Material Design are Paper and Floating Action Button (FAB).


Paper


Paper is Google’s metaphor for the medium that underlies the content. To add a paper with Polymer, we use the <paper-material> element. This element takes 2 attributes:


  • elevation to lift the Paper, hence adding a shadow to reinforce the elevation

  • animated will apply animation as the Paper elevation change.

Floating Action Button (FAB)


The Floating Action Button (FAB) is a circular button with an icon, floating on the screen, usually with a stand-out color. Google suggests that this button carries a frequently-accessed function. Here’s an example:


The following code snippet adds a Paper Material with an image and an FAB.


 <paper-material elevation="1" class="paper"> <iron-image sizing="cover" src="img/berries.jpg" class="image"></iron-image> <paper-fab icon="favorite" title="heart" tabindex="0" class="button"></paper-fab> </paper-material> 

We will have the following result:


We have a photo with a “heart” button floating on top of it. Click it to Like the photo, adn the button gives off a ripple effect to acknowledge the click.


3. Google Web Components


The Google Web Components are special elements that cope with Google APIs and services such as Google Maps, Youtube, as well as Google Feed, to name a few. Elements in this group make interacting with Google services just a few lines away.


The following is an example to show a Google Map using the <google-map> element.


 <google-map latitude="37.422" longitude="-122.084058" zoom="19"> <google-map-marker latitude="37.422" longitude="-122.084058" draggable="true">This is Googleplex</google-map-marker> </google-map> 

As you can above, the <google-map> element takes the latitude and longitude to specify the location on the map. We can also nest <google-map-marker> to show a map marker of that location along with a text which will appear upon clicking on the marker.


Want to show a Youtube video? you can use the <google-youtube> element.


 <google-youtube video-id="VgmyVHYV1mE" height="360px" width="640px"></google-youtube> 

Similarly we customize the output through attributes.


4. Gold Elements


The Gold Elements are the elements designed specifically for e-commerce apps. Here you will find element to show credit card, email, phone and ZIP input which all have been equipped with format validation to ensure correct data input and security. Here is one example to add Visa credit card input.


 <gold-cc-cvc-input card-type="visa"></gold-cc-cvc-input> 

5. Other Elements


The remaining elements include Neon elements for animation and special effects, Platinum elements for offline and push notifications and lastly Molecules, wrappers for third-party libraries.


Editor’s Note: At the time of this writing, Neon Elements, Platinum Elements and Molecules are still not available.


Integrating Polymer


Want to use Polymer in your web development? Here’s how to install and integrate it into your web pages. As most Polymer elements rely on one another, the best way to install Polymer is through Bower.


Bower is a project dependencies manager that makes it easier to install scripts or styles required to run the project. Check out our earlier post on how to install, update &remove web libraries easily with Bower.


To integrate Polymer, launch Terminal then navigate to your project directory, assuming you have created one. Then run bower init command to initiate bower.json file into your project that will be used to record the project dependencies. Open bower.json and add the following lines.


 "dependencies": "polymer": "Polymer/polymer#^1.0.0", "google-web-components": "GoogleWebComponents/google-web-components#^1.0.0", "iron-elements": "PolymerElements/iron-elements#^1.0.0", "paper-elements": "PolymerElements/paper-elements#^1.0.0", "gold-elements": "PolymerElements/gold-elements#^1.0.0" 

This setup assumes that we are going to use all the elements from each group. You may remove what you do not need from the dependency list. As the dependencies are set, run the bower install command to install the dependencies on the list.


This process may take a while as it involves grabbing a huge amount of files from the repositories. Once done, you should find them saved in the bower_components folder.


Open the HTML file you want to use the Polymer components in. Within the document head, link the WebComponents.js which is the polyfill for browsers that do not support WebComponents yet, and import the component files using HTML Import.


Here is an example:


 <head> <script src="bower_components/webcomponentsjs/webcomponents.js"></script> <link rel="import" href="bower_components/iron-image/iron-image.html"> <link rel="import" href="bower_components/paper-fab/paper-fab.html"> <link rel="import" href="bower_components/google-map/google-map.html"> </head> 

This setup will enable us to use the <iron-image>, <paper-fab>, <google-youtube> elements.


Showcases


Here are some of the web apps that are already using Google Polymer.


Google


Google used Google Polymer in the Google IO 2015 web page; Google Fi, the Google wireless service for carriers and vendors in partnership; and Google Music.


Custom Elements


CustomElements is a hub where you can find custom elements built with Web Components. It makes use of the Paper element to contain and build the list. It also provides a convenient route to install these elements through Bower and NPM.


Chrome Dev Editor


A Chrome application for code editing that works surprisingly well. This app uses the FAB button, Paper menu, and Paper dialog elements in the user interface.


Polymer Designer


A tool to build web application with Polymer elements using a drag-and-drop interface.


Daily Stock Forecast


A stock exchange report and forecast built entirely with Polymer elements.


Ele


Ele is a code editor to create and share Polymer and custom elements built with Polymer API.


Polymer Mail


An email client app for Gmail. It looks nice and fluid, although sadly, it is not fully functioning.


Final Thoughts


Polymer has an enormous scope and it might take you a while to get used to all the custom elements as well as its API. Nonetheless, Web Components and Polymer will certainly influence the way we build web applications. Stay ahead of the crowd by reading more about Web Components – references are found below.


Useful References










Google Polymer – How It’ll Change the Way Web Apps are Built

Thursday, June 4, 2015

9 Google Photos Features You Need to Know

Google Photos was probably one of the most raving of the many announcements in Google I/O 2015. Google Photos is a free photo management system and offers unlimited storage for high-resolution images (16MP max) and videos (1080p max). Google Photos is available as an iOS, Android, and desktop app allowing you to sync images and videos from your Mobile devices, PC, camera, or SD cards.


I have been using Google Photos for a couple of days now, and I’m quite impressed with what it can do. Herein I would like to share what I have found along the way.


Note: The iOS app is only compatible with iOS 8.1.


Easy Photos and Videos Uploads


With Google Photos, it is easy to upload images and videos. Aside from auto-syncing through the desktop and mobile apps, you can also upload photos through a "drag-and-drop" interface. So long as the browser tab is viewing photos.google.com URL, you can drop numerous images and videos, or a folder of images or videos into the tab. The drop initiated an upload of all the files simultaneously, saving you time.


Now once we have the images uploaded, we can do a few things to them such as manipulate the images, post them to Facebook and Twitter, share a link pointing to the images, create an Album, or tell Stories with them.


No More Duplicates


On top of that, I also noticed that Google Photo will merge two or more duplicates of photos leaving only just the one photo, thereby springcleaning your storage space for you automatically.


High-Quality setting


Before uploading your photos, ensure that the Google Photos setting is set to the "High Quality (free unlimited storage)" option. The other setting, "Original" wil see your images saved into Google Drive (where you have limited storage) instead.


As you login through the mobile app, Google will show this setting as you use the app for the first time. If you are login to the Web though, the setting is hidden beneath the “…” > Settings menu.


Photo Search


Google also incorporates smarter search in Google Photos. We can search through our photos with a keyword much like what we do while searching for images in Google search. In Google Photos, the keyword “food” , for example, will return the image of foods, “Surabaya” will return images which has been geo-tagged with that location, while searching for “cat” (you gueseds it!) results in cat images.


Surprisingly, Google also allows you to search with a color keyword like “red”, “green”, or “black” and it will come up with images with the respective shade or have the appointed color.


However, accuracy is still a problem. Sean Buckley of Gizmodo gave some examples in his post where searches for “Sega” returned Nintendo, “evil” returned Disneyland images, and “food” returned book images instead.


During my experiments, most of my searches come up empty (which may or may not be because of the small number of images in my library). Nonetheless, I’m sure it will improved over time as search has always been Google’s strength.


Ease of Selecting Photos


Selecting your images in Google Photos and videos is intuitive and equally effortless. In the mobile app, hold your finger on an image and then move your finger all the way to the last photo you want to select, and that is your selected batch of photos.


On the Web, hold the Shift key to select multiple images in a batch, or use the Ctrl / Cmd key to select individual images.


Gallery View


Furthermore, Google Photos also incorporate swipe and pinch gestures in almost every corner in the mobile application. If you are on mobile, Google Photos will arrange all your photos in a grid, in medium-sized thumbnails, by default.


Pinch outward and it will set the view to a “Comfortable View”, with larger image views. Pinch inwards to set the view to “Compact” with smaller-sized thumbnail so you can see more images in the screen.


Assistant


Assistant is another feature in Google Photos that is worth mentioning. This feature will go through your images for similarities through various aspects and find relationships among your photos. It then compiles them together, prompting you to choose whether to save the compilation in the Library or not.


On top of that, it also prompts you if your local storage (your phone storage) is running out space, and to help you free up some space, it will offer to remove photos.


IMAGE: smithers85/Reddit

Image Editing


Google Photos is also equipped with a decent photo editor. To start editing, click on an image. Find and click the edit button represented with a “Pencil” icon at the top right. If you are using the mobile application, the edit icon resides below the image.


The edit button will bring a new toolbar which lets you do some basic image editing such as cropping the image, adjusting the shade, lights, and colors. In addition, you can also apply pre-defined effects ala Instagram. Once you are pleased with the output, Save it.


Image Compression


Lastly, another feature that I think is less noticeable on the surface is the image compression. As we are uploading photos to Google Photos, the image size is compressed. Once it has been uploaded, download the photos and you will find the image sizes much smaller.


A photo initially 11.2MB will become only 2.4MB, that is an almost 80% compression rate. For comparison, JPEGMini compressions only could bring the same photo down to 3.2Mb. Aside from storing photos, it is a great tool for web developers to optimize their photos on their website for speed.


Final Thoughts


Google Photos is a great app. You can upload as many as photos and videos from old hard drive, old computer disk, camera, and mobile phone without having to worry of running out of storage.


It will organize the photos with its intelligent Assistant, and you can search, edit, and share it to other mediums, right from the app itself. Google Photos would probably make similar services like Dropbox, iCloud, Amazon, Flickr a little worried.










9 Google Photos Features You Need to Know

9 Google Photos Features You Need to Know

Google Photos was probably one of the most raving of the many announcements in Google I/O 2015. Google Photos is a free photo management system and offers unlimited storage for high-resolution images (16MP max) and videos (1080p max). Google Photos is available as an iOS, Android, and desktop app allowing you to sync images and videos from your Mobile devices, PC, camera, or SD cards.


I have been using Google Photos for a couple of days now, and I’m quite impressed with what it can do. Herein I would like to share what I have found along the way.


Note: The iOS app is only compatible with iOS 8.1.


Easy Photos and Videos Uploads


With Google Photos, it is easy to upload images and videos. Aside from auto-syncing through the desktop and mobile apps, you can also upload photos through a "drag-and-drop" interface. So long as the browser tab is viewing photos.google.com URL, you can drop numerous images and videos, or a folder of images or videos into the tab. The drop initiated an upload of all the files simultaneously, saving you time.


Now once we have the images uploaded, we can do a few things to them such as manipulate the images, post them to Facebook and Twitter, share a link pointing to the images, create an Album, or tell Stories with them.


No More Duplicates


On top of that, I also noticed that Google Photo will merge two or more duplicates of photos leaving only just the one photo, thereby springcleaning your storage space for you automatically.


High-Quality setting


Before uploading your photos, ensure that the Google Photos setting is set to the "High Quality (free unlimited storage)" option. The other setting, "Original" wil see your images saved into Google Drive (where you have limited storage) instead.


As you login through the mobile app, Google will show this setting as you use the app for the first time. If you are login to the Web though, the setting is hidden beneath the “…” > Settings menu.


Photo Search


Google also incorporates smarter search in Google Photos. We can search through our photos with a keyword much like what we do while searching for images in Google search. In Google Photos, the keyword “food” , for example, will return the image of foods, “Surabaya” will return images which has been geo-tagged with that location, while searching for “cat” (you gueseds it!) results in cat images.


Surprisingly, Google also allows you to search with a color keyword like “red”, “green”, or “black” and it will come up with images with the respective shade or have the appointed color.


However, accuracy is still a problem. Sean Buckley of Gizmodo gave some examples in his post where searches for “Sega” returned Nintendo, “evil” returned Disneyland images, and “food” returned book images instead.


During my experiments, most of my searches come up empty (which may or may not be because of the small number of images in my library). Nonetheless, I’m sure it will improved over time as search has always been Google’s strength.


Ease of Selecting Photos


Selecting your images in Google Photos and videos is intuitive and equally effortless. In the mobile app, hold your finger on an image and then move your finger all the way to the last photo you want to select, and that is your selected batch of photos.


On the Web, hold the Shift key to select multiple images in a batch, or use the Ctrl / Cmd key to select individual images.


Gallery View


Furthermore, Google Photos also incorporate swipe and pinch gestures in almost every corner in the mobile application. If you are on mobile, Google Photos will arrange all your photos in a grid, in medium-sized thumbnails, by default.


Pinch outward and it will set the view to a “Comfortable View”, with larger image views. Pinch inwards to set the view to “Compact” with smaller-sized thumbnail so you can see more images in the screen.


Assistant


Assistant is another feature in Google Photos that is worth mentioning. This feature will go through your images for similarities through various aspects and find relationships among your photos. It then compiles them together, prompting you to choose whether to save the compilation in the Library or not.


On top of that, it also prompts you if your local storage (your phone storage) is running out space, and to help you free up some space, it will offer to remove photos.


IMAGE: smithers85/Reddit

Image Editing


Google Photos is also equipped with a decent photo editor. To start editing, click on an image. Find and click the edit button represented with a “Pencil” icon at the top right. If you are using the mobile application, the edit icon resides below the image.


The edit button will bring a new toolbar which lets you do some basic image editing such as cropping the image, adjusting the shade, lights, and colors. In addition, you can also apply pre-defined effects ala Instagram. Once you are pleased with the output, Save it.


Image Compression


Lastly, another feature that I think is less noticeable on the surface is the image compression. As we are uploading photos to Google Photos, the image size is compressed. Once it has been uploaded, download the photos and you will find the image sizes much smaller.


A photo initially 11.2MB will become only 2.4MB, that is an almost 80% compression rate. For comparison, JPEGMini compressions only could bring the same photo down to 3.2Mb. Aside from storing photos, it is a great tool for web developers to optimize their photos on their website for speed.


Final Thoughts


Google Photos is a great app. You can upload as many as photos and videos from old hard drive, old computer disk, camera, and mobile phone without having to worry of running out of storage.


It will organize the photos with its intelligent Assistant, and you can search, edit, and share it to other mediums, right from the app itself. Google Photos would probably make similar services like Dropbox, iCloud, Amazon, Flickr a little worried.


9 Google Photos Features You Need to Know