HTML and CSS related issues

positioning

Positioning is a constant headache for me. After a certain amount of study and practice, I have gained more understanding of the following three parts: block-level elements, box model and position. Block-level elements fill the container automatically, and I often use display:block with margin:auto or text-align:center to achieve the center effect. Display: Inline-block is commonly used to place multiple buttons on the same line (margins of two elements do not overlap, by the way). Position includes Absoluta, Relative and FlexD. I used absolute in the last migration task to solve some of the problems I thought I had at the time, because it allows elements to float out of the document flow — nothing can cover it. Flxed locates relative to your window.

CSS selectors

Id =”..” Or class = “..” To match elements with CSS, id takes precedence over class, and in SCSS files id is #id and class is.class. In addition, we can modify the style of the same element at a particular location directly by using the element’s label.

Locating the Modified Object

When we want to achieve something we can get the answer directly through search. But if I’m in an awkward situation — I can’t really put the words in the way I want them to look. Here are a few things you can try: Select the element you want to change in developer mode, watch how it changes when you change the style in it, so you might know which selector properties you want to change to achieve this, and then search the search engine for more information about how to use it. For example:.toasts-container, a CSS selector for Toast in the Ionic, I can’t find it in the official documentation. It is worth noting in ionic that toast and alert CSS that need to be defined in JS call, unlabeled UI should be defined in global CSS, definition in page CSS is not valid.








JS related questions

And then the subscribe

In this development, I noticed then and Subscribe. Then and Promise came from Es6, and SUBSCRIBE and Observable came from Rxjs. Promises and Observables have the following features:

promise observable
Only one request is sent at execution time Multiple requests are sent during execution
Sent requests cannot (or are cumbersome) be cancelled The sent request can be cancelled
Very few methods Provides a number of array-related methods, such as maps

It’s easy to see how much more flexible an Observable is, as in Angular8 HttpClient uses an Observable. However, in this project, I only need to simply send two requests and prefer simple and straightforward promises, so I use toPromise to encapsulate Observable into a Promise object. But as I learned more, I realized there wasn’t much to appeal. In fact, I am still confused after reading a lot of articles about the deeper difference between the two, so I will write a blog to compare the two in detail.

Get/POST pull fetch object processing

During the development of the project I tried to get the properties I wanted from the objects returned by the server, but when I got my target properties via.msg the compiler told me that there was something wrong with the use of.msg, even though it did get my target properties. The compiler says Object does not have MSG. What’s the problem? The default type of the passed parameter is Object, but the Object class does not have the MSG attribute, so we just need to define the type of the parameter as any to remove the error.








other

HTTP cannot be used on Android8 or above

This is a vexing and common problem. Background: ionic5.4.4.

Here’s a post on this issue from two years ago
The answer(Probably by a wall). Ionic updates and other reasons didn’t solve my problem. Those who are interested can learn about the methods that have been possible



Writing in front of possible solutions, the following solutions may also be outdated, but the only way to stay safe and timeless is to use Https, if possible



The url

  1. Change the config. XML
  2. Add the following code to the front of the config.xml file

    < Access Origin ="*" />// This may exist due to the ionic version. <allow-navigation href="*" />// allow access to subsitesCopy the code

    Add in <application />
    Android: networkSecurityConfig = "@ XML/network_security_config" / / may exist, call this configuration file

  3. Add/modify “resources/android/XML/network_security_config XML”
  4. <? The XML version = "1.0" encoding = "utf-8"? > <network-security-config> <base-config cleartextTrafficPermitted="true"> <trust-anchors> <certificates src="system" />  </trust-anchors> </base-config> <domain-config cleartextTrafficPermitted="true"> <domain IncludeSubdomains ="true">localhost</domain> <domain includeSubdomains="true">YOUR domain HERE/IP</domain>// </domain-config> </network-security-config>Copy the code

Common mistakes

Probably not his first offense. I typed the wrong CMD command when I packed the APP. As I could not fully interpret the error message, I spent a whole morning to find out the reason. There is no shortage of careless eggs like me. I realized the problem only when I saw the question posed by another careless egg. Try checking the command if you encounter any of the above

feeling

In fact, I’m not good at writing at all. My writing is very rigid in every way. Well it’s not just the text, it’s pretty stiff in a lot of places. This is my first blog post, a summary of a small project. I hope I can do a better job of recording what I’ve learned and what I want to record. If it helps someone else, that’s the best.

The blog didn’t last a day before I reinvented it and realized how bad the grammar was for a technical blog after a friend pointed it out to me. What’s worse is that by the time I started working on it it was already 14 views. Well at least no one will ever see the original. In fact, the top piece is the preface to the original blog, to keep a little more of the original look