Mindblown: a blog about philosophy.
-
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: Autonomous: to this group are related the “all-new” elements that extend the HTMLElement class. Customized built-in elements: these are…
-
Web Components
In this section, we are going to discover the modern standards of web components. Some of the features are supported by the HTML/DOM standard, but most of them are still under development. The Architecture of the Component The idea of the component is widely applied in frameworks and elsewhere. The most famous rule for developing complex software…
-
JavaScript Animations
As you have already learned, CSS animations are used for making simple animations. All the things that CSS can’t handle, you can handle using the JavaScript animations. For example, you can use JavaScript animations when you want to move along a complex path, with a timing function not similar to the Bezier curve, either an animation on a canvas.…
-
CSS-animations
CSS animations allow doing simple animations without using JavaScript. In this case, JavaScript is used for controlling the animation and making it better with a little code. CSS Transitions Making CSS transitions is quite simple. You describe a property and the way its changes may be animated. Once the property is changed, the animation is painted by…
-
JavaScript IndexedDB
Now, let’s explore a much more powerful built-in database than localStorage: IndexedDB. It can have almost any value and multiple key types. Transactions are also supported for more reliability. Key range queries and indexes are supported by IndexedDB. Moreover, it can store a lot more data than the localStorage. As a rule, IndexedDB is used for offline…
-
JavaScript LocalStorage, SessionStorage
LocalStorage and sessionStorage are web storage objects, allowing developers to save key-value pairs in the browser. The most interesting thing about them is that the data survives a page refresh and a full restart of the browser. Both of the storage objects include the same properties and methods: setItem(key, value) – keep the key/value pair. getItem(key) –…
-
Cookies: document.cookie
In this chapter, we will cover one of the ways of storing data in the browser: cookies. Cookies are small data strings, stored directly in the browser. They are included in the HTTP protocol. As a rule, the web-server sets cookies with the help of a response Set-Cookie HTTP header. After that, the browser adds them to…
-
JavaScript URL Objects
This chapter examines URL objects in JavaScript. The JavaScript built-in URL class provides a flexible interface that allows both to create and parse URLs . No networking methods requiring a URL object exist now. Strings are rather convenient for that. So, technically, you needn’t always use URLs, but in some instances, they are handy. Let’s dive into some details. How to Generate a URLThe…
-
Canvas
Intro This tutorial describes how to use the canvas element to draw 2D graphics starting with the basics. The provided examples should give you some clear ideas about what you can do with canvas and will provide code snippets that may get you started in building your own content. Using the canvas element is not very difficult but you…
Got any book recommendations?