-
Like Button
Intro The like button is a feature of social networking service Facebook, where users can like content such as status updates, comments, photos links shared by friends and advertisements. Facebook Like button is a perfect thing in SEO. Facebook lets you create like button very easy. Let’s see what we need for the beginning. First…
-
Google Maps Markers
Intro Google Maps is a great product, which gives as many actions to do. In this chapter, we will talk about Google Maps Markers. Will know how to prepare, how to create, move, etc. As you know, if we want to use Google APIs, we have to connect a script in our html file. So…
-
Places Autocomplete
Intro The Place Autocomplete service is a web service that returns place predictions in response to an HTTP request. The request specifies a textual search string and optional geographic bounds. The service can be used to provide an autocomplete functionality for text-based geographic searches by returning places such as businesses, addresses and points of interest as a…
-
Google+ Share
Google+ Share buttons All of us know what Google is and how much we need it. Every Developer needs Google. As you see, Google+ is a very useful and beautiful thing. In many-many websites, there are Google+ share buttons, and these buttons can be very different. Let’s see what kind of Share/Post buttons Google has…
-
Shadow DOM and Events
The main aim of the shadow tree is encapsulating the component’s internal implementation details. The events occurring inside the shadow DOM take the host element as the target once caught out of the component. Here is an example: Once you click the button, the following messages will be shown: Event targeting is а very practical technique to have, as…
-
Shadow DOM Styling
Shadow DOM encompasses both <link rel=”stylesheet” href=”…”> and <style>. For the first case, the style sheets are HTTP-cached. Hence, they can’t be re-downloaded for multiple components that apply similar templates. The primary rule is that local styles can operate only within the shadow tree. But, the document styles work out of that tree. Of course, there can be exceptions…
-
Shadow DOM Slots, Composition
Different types of components like menus, tabs, image galleries, and more, need the content for rendering. The <custom-tabs> might wait for the actual tab content to be passed like the <select> expects the <option> items. The code implementing the <custom-menu> is as follows: Then the component above should render it adequately. But it’s essential to know how to perform it. It is possible…
-
Template Element
In this chapter, we cover a built-in template element, serving as a storage for HTML markup templates. Its contents are ignored by the browser. It only checks for syntax validity. However, it can be accessed and used in JavaScript for creating other elements. Now, let’s see what is so unique about the <template>. First and foremost, any valid…
-
JavaScript Shadow DOM
In this chapter, we are going to cover the main means of encapsulation: Shadow DOM. With it, a component can have its “shadow” DOM tree, which may be accidentally accessed from the core document, can obtain local style rules, and so on. Built-in Shadow DOM The browser applies DOM/CSS for creating complex browser controls. The DOM structure…
-
Custom Elements
Custom HTML elements can be created by a class with its properties and methods, events, and more. When a custom element is specified, it can be used in parallel with built-in HTML elements. Two kinds of custom elements can be distinguished: We will start at discovering the autonomous custom elements. For generating a custom element, it’s necessary to…