问:
How can i use @OneToMany with a connector table in JPA
I want to create a JPA database connector for my prestashop that automatically loads my products into my shop.
I found the tables that are significant for that:

the table for generic product information.

```<code>ps_product
===================
id_product
...
</code>```

the table for the features (properties for the products)

```<code>ps_feature
===================
id_feature
...
</code>```

a table for the values

```<code>ps_feature_value
===========
id_feature_value
id_feature
...
</code>```

and the table that connects that

```<code>ps_feature_products
===================
id_feature
id_product
id_feature_value
</code>```

i tried to get a the list into my model with @OneToMany and @JoinTable

my product model:

@Entity
@Table(name = "ps_product")
public class PSProduct {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id_product")
    private long id;

    @OneToMany
    ????????
    private List<PSFeatureValue> features;
    ...
}
```
<p>my value model:</p>
<pre class="lang-java prettyprint-override"><code>@Entity
@Table(name = "ps_feature_value")
public class PSFeatureValue {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id_feature_value")
    private long id;
    ...
}
</code>```

How can i connect that?
How can i put the id_feature in the table ps_feature_product?

答:
In my opinion... your tables are linked this way:

```<code>    +ps_product ------+
 ,->| id_product <pk> |
 |  | ...             |
 |  +-----------------+
 |
 |  +ps_feature ------+                +ps_feature_value ------+
 |  | id_feature <pk> |<----.          | id_feature_value <pk> |<---.
 |  | ...             |     `-+--------| id_feature <fk>       |    |
 |  +-----------------+       |        | ...                   |    |
 |            ,---------------'        +-----------------------+    |
 |            |                                                     |
 |            |  +ps_feature_product-----+                          |
 |            `--| id_feature <fk>       |                          |
 `---------------| id_product <fk>       |                          |
                 | id_feature_value <fk> |--------------------------'
                 +-----------------------+
</code>```

where <pk> means primary key and <fk> means foreign key. IMHO you name fields a bit bad, as foreign keys being called the same as primary keys (I'm focusing on the id_ prefix) tend to confound the reader, that doesn't know what is a primary key, and what is a foreing key)

IMHO you have a redundant pointer in the ps_feature_product.id_feature foreign key, as the ps_feature can be obtained by navigating the id_feature_value foreign key, and then the id_feature. This is done automatically by the ORM, and saves some data in the database.  Further, this can lead to inconsistences in the database if you make the mistake of updating one and not the other link.

Anyway, you have four entities, and you only show 2.  In my opinion, your structure should be the following:

```<code>@Entity
@Table(name = "ps_product")
public class PSProduct {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id_product")
    private long id;

    @OneToMany(mappedBy = "id_product") /* I should have used just product */
    private List<PSFeatureProduct> featuresProducts;

    ... /* getters/setters and other stuff */
}

@Entity
@Table(name = "ps_feature")
public class PSFeature {

    @Id
    // you don't say anything on this, so I'll not use @GeneratedValue here.
    @Column(name = "id_feature")
    private long id;

    /* to obtain the values of a feature, we use the inverse mapping as
     * the relationship is OneToMany */
    @OneToMany(mappedBy = "id_feature")
    /* no column required in the database for this property */
    private List<PSFeatureValue> values;

    /* the inverse relation of which products have this feature */
    @OneToMany(mappedBy = "id_feature")
    /* no column required in the database for this property */
    private List<PSFeatureProduct> products;

    ... /* getters/setters and other stuff */
}

@Entity
@Table("ps_feature_value")
public class PSFeatureValue {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id_feature_value")
    private long id;

    @ManyToOne
    @Column(name = "id_feature")
    private PSFeature feature;

    /* the list of feature/product pairs that have this value */
    @OneToMany(mappedBy = "id_feature_value")
    private List<PSFeatureProduct> featureProducts;

    ... /* getters/setters and other stuff */
}

@Entity
@Table(name = "ps_feature_product")
public class PSFeatureProduct {

    @Id
    @Column(name = "id_feature_product") /* to be consistent */
    privatre long id;

    /* this field shouldn't be necessary, as the value can be obtained
     * through the featureValue field below */
    @ManyToOne
    @Column(name = "id_feature")
    private PSFeature feature;

    @ManyToOne
    @Column(name = "id_product")
    private PSProduct product;

    @ManyToOne
    @Column(name = "id_feature_value")
    private PSFeatureValue featureValue;

    ... /* getters/setters and other stuff */
}
</code>```

Once you have the complete set of relations, you can eliminate the ones you are not going to use, with the following restrictions:

The relations @OneToMany don't own the relationship (just reference the inverse @ManyToOne that is the owner of it) so the referenced @ManyToOne relationship cannot be eliminated without also eliminating this one.

Body:
I want to create a JPA database connector for my prestashop that automatically loads my products into my shop.
I found the tables that are significant for that:

the table for generic product information.

ps_product
===================
id_product
...

the table for the features (properties for the products)

ps_feature
===================
id_feature
...

a table for the values

ps_feature_value
===========
id_feature_value
id_feature
...

and the table that connects that

ps_feature_products
===================
id_feature
id_product
id_feature_value

i tried to get a the list into my model with @OneToMany and @JoinTable

my product model:

@Entity
@Table(name = "ps_product")
public class PSProduct {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id_product")
    private long id;

    @OneToMany
    ????????
    private List<PSFeatureValue> features;
    ...
}

my value model:

@Entity
@Table(name = "ps_feature_value")
public class PSFeatureValue {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id_feature_value")
    private long id;
    ...
}

How can i connect that?
How can i put the id_feature in the table ps_feature_product?

Body:
In my opinion... your tables are linked this way:

    +ps_product ------+
 ,->| id_product <pk> |
 |  | ...             |
 |  +-----------------+
 |
 |  +ps_feature ------+                +ps_feature_value ------+
 |  | id_feature <pk> |<----.          | id_feature_value <pk> |<---.
 |  | ...             |     `-+--------| id_feature <fk>       |    |
 |  +-----------------+       |        | ...                   |    |
 |            ,---------------'        +-----------------------+    |
 |            |                                                     |
 |            |  +ps_feature_product-----+                          |
 |            `--| id_feature <fk>       |                          |
 `---------------| id_product <fk>       |                          |
                 | id_feature_value <fk> |--------------------------'
                 +-----------------------+

where <pk> means primary key and <fk> means foreign key. IMHO you name fields a bit bad, as foreign keys being called the same as primary keys (I'm focusing on the id_ prefix) tend to confound the reader, that doesn't know what is a primary key, and what is a foreing key)

IMHO you have a redundant pointer in the ps_feature_product.id_feature foreign key, as the ps_feature can be obtained by navigating the id_feature_value foreign key, and then the id_feature. This is done automatically by the ORM, and saves some data in the database.  Further, this can lead to inconsistences in the database if you make the mistake of updating one and not the other link.

Anyway, you have four entities, and you only show 2.  In my opinion, your structure should be the following:

@Entity
@Table(name = "ps_product")
public class PSProduct {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id_product")
    private long id;

    @OneToMany(mappedBy = "id_product") /* I should have used just product */
    private List<PSFeatureProduct> featuresProducts;

    ... /* getters/setters and other stuff */
}

@Entity
@Table(name = "ps_feature")
public class PSFeature {

    @Id
    // you don't say anything on this, so I'll not use @GeneratedValue here.
    @Column(name = "id_feature")
    private long id;

    /* to obtain the values of a feature, we use the inverse mapping as
     * the relationship is OneToMany */
    @OneToMany(mappedBy = "id_feature")
    /* no column required in the database for this property */
    private List<PSFeatureValue> values;

    /* the inverse relation of which products have this feature */
    @OneToMany(mappedBy = "id_feature")
    /* no column required in the database for this property */
    private List<PSFeatureProduct> products;

    ... /* getters/setters and other stuff */
}

@Entity
@Table("ps_feature_value")
public class PSFeatureValue {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id_feature_value")
    private long id;

    @ManyToOne
    @Column(name = "id_feature")
    private PSFeature feature;

    /* the list of feature/product pairs that have this value */
    @OneToMany(mappedBy = "id_feature_value")
    private List<PSFeatureProduct> featureProducts;

    ... /* getters/setters and other stuff */
}

@Entity
@Table(name = "ps_feature_product")
public class PSFeatureProduct {

    @Id
    @Column(name = "id_feature_product") /* to be consistent */
    privatre long id;

    /* this field shouldn't be necessary, as the value can be obtained
     * through the featureValue field below */
    @ManyToOne
    @Column(name = "id_feature")
    private PSFeature feature;

    @ManyToOne
    @Column(name = "id_product")
    private PSProduct product;

    @ManyToOne
    @Column(name = "id_feature_value")
    private PSFeatureValue featureValue;

    ... /* getters/setters and other stuff */
}

Once you have the complete set of relations, you can eliminate the ones you are not going to use, with the following restrictions:

The relations @OneToMany don't own the relationship (just reference the inverse @ManyToOne that is the owner of it) so the referenced @ManyToOne relationship cannot be eliminated without also eliminating this one.


来源: stackexchange

问:
styled component multiple override css no effect?
I have a React component styled using styled-components, but can it be apply style again? My button is a react component

```<code>import Button from "./Button";
</code>```

Then somewhere else I add margin-top, it don't apply the style.

```<code>//margin-top has no effect?
const ButtonStyled = styled(Button)`
  margin-top: 100px;
`;

export default function App() {
  return <ButtonStyled>My button</ButtonStyled>;
}
</code>```

Demo here
https://codesandbox.io/s/goofy-montalcini-l47kp?file=/src/App.js:144-150

答:
I have seen two options to override the css.

Wrapper the component

Through props

```<code>import styled, { css } from "styled-components";

const ButtonStyled = styled.button`
  ${(props) => {
    return css`
      margin-top: 10px;
      width: 200px;
      padding: 16px 0;
      border: 1px solid;
      color: black;
      font-size: 16px;
      font-weight: 900;
      border-radius: 5px;
      ${props.newStyled}
    `;
  }}
`;

const Button = ({ children, ...props }) => {
  return <ButtonStyled {...props}>{children}</ButtonStyled>;
};

// OPTION 1: WRAPPER THE COMPONENT
function Question7_option1() {
  const DivStyled = styled.div`
    button {
      margin-top: 100px;
    }
`;
  return (<DivStyled>
    <Button>Button</Button>
  </DivStyled>);
}

// OPTION 2: NEW STYLES THROUGH PROPS
function Question7_option2() {
  const newStyled = css`
    margin-top: 100px;
`;
  return (<Button newStyled={newStyled}>Button</Button>);
}

export default Question7_option2;
</code>```

I hope I've helped you

ContentLicense: CC BY-SA 4.0

Body:
I have a React component styled using styled-components, but can it be apply style again? My button is a react component

import Button from "./Button";

Then somewhere else I add margin-top, it don't apply the style.

//margin-top has no effect?
const ButtonStyled = styled(Button)`
  margin-top: 100px;
`;

export default function App() {
  return <ButtonStyled>My button</ButtonStyled>;
}

Demo here
https://codesandbox.io/s/goofy-montalcini-l47kp?file=/src/App.js:144-150

Body:
I have seen two options to override the css.

Wrapper the component

Through props

import styled, { css } from "styled-components";

const ButtonStyled = styled.button`
  ${(props) => {
    return css`
      margin-top: 10px;
      width: 200px;
      padding: 16px 0;
      border: 1px solid;
      color: black;
      font-size: 16px;
      font-weight: 900;
      border-radius: 5px;
      ${props.newStyled}
    `;
  }}
`;

const Button = ({ children, ...props }) => {
  return <ButtonStyled {...props}>{children}</ButtonStyled>;
};

// OPTION 1: WRAPPER THE COMPONENT
function Question7_option1() {
  const DivStyled = styled.div`
    button {
      margin-top: 100px;
    }
`;
  return (<DivStyled>
    <Button>Button</Button>
  </DivStyled>);
}

// OPTION 2: NEW STYLES THROUGH PROPS
function Question7_option2() {
  const newStyled = css`
    margin-top: 100px;
`;
  return (<Button newStyled={newStyled}>Button</Button>);
}

export default Question7_option2;

I hope I've helped you


问:
How to correctly place an image outside the container, and make them adaptive, HTML/CSS?
Maket link: https://www.figma.com/file/hYoPHDHOzzgzEPo4crMmy1/UH15U7CD4WZkbhcW?node-id=2%3A334

Project link: https://plupiks.github.io/Real-Estate-LandingPage/

I have a layout, it has an image of a building. This image is outside of the container. I was able to take the image out of the container, but I can’t adapt it anymore. If I give the image width: 100%; height: auto; , its dimensions no longer correspond to those specified in the layout.

The question is, how to move images outside the container so that they can then be adapted without changing the original image dimensions?

Worked with preprocessor SCSS.

```<code><div class="hero">
        <div class="container">
          <div class="hero--wrapper">
            <div class="hero--blok-left">
              <div class="hero--descr">Welcome to Besnik Agency</div>
              <h1 class="hero--title">Discover a place you’ll love to live.</h1>
              <p class="hero--subtitle">
                Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
              </p>
              <button class="button hero--button">More About Us</button>
            </div>
            <div class="hero--block-right">
              <div class="hero--img">
                <svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
                  <path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
                  <path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
                  <path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
                  <path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
                  <path
                    d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
                    fill="#0E173D"
                  />
                  <path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
                  <path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
                  <path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
                  <path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
                  <path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
                  <path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
                  <path
                    d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
                    fill="#CFDEF3"
                  />
                  <path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
                  <rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
                  <rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
                  <rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
                  <path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
                  <path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
                  <path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
                  <path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
                  <rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
                  <path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
                  <path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
                  <path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
                  <path
                    d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
                    fill="#1F326B"
                  />
                  <path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
                  <path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
                  <rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
                  <rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
                  <rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
                  <path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
                  <rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
                  <rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
                  <rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <path
                    d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
                    stroke="#A3BDFF"
                    stroke-width="4"
                  />
                  <rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
                  <path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
                  <path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
                  <path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
                  <rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
                  <path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
                  <path
                    d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
                    fill="#0D0808"
                  />
                  <path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
                  <path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
                  <path
                    d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
                    stroke="black"
                    stroke-width="4"
                  />
                  <path
                    d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
                    stroke="black"
                    stroke-width="3"
                  />
                  <circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
                  <circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
                  <circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
                  <circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
                  <path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
                  <path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
                  <path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
                  <path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
                  <path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
                  <path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
</code>```
```<code>.hero {
  position: relative;
  background-color: $blueElis;
  font-size: 16px;
}

.hero--wrapper {
  display: flex;
  column-gap: 4.1875em;
  padding-top: 7.125em;
}

.hero--blok-left {
  flex: 0 0 50.37%;
  margin-top: 5.6875em;
}

.hero--descr {
  margin-bottom: 0.444em;
  @include SWCL(1.125em, 500, $pigeonBlue, 1.6875);
}

.hero--title {
  margin-bottom: 0.46875em;
  @include SWCL(4em, 700, $darkBlue, 1.1875);
}

.hero--subtitle {
  @include SWCL(1.125em, 400, $marengo, 2);
  margin-bottom: 2.222em;
}
.hero--button {
}

.hero--block-right {
  display: flex;
  align-items: flex-end;
}
.hero--img {
  width: 36.5em;
  height: auto;
  & svg {
    max-width: 100%;
    height: auto;
  }
}

// Adaptive

@media only screen and (max-width: 1024px) {
  .header {
    font-size: 14px;
  }
}

</code>```

答:
.hero {
  position: relative;
  background-color: $blueElis;
  font-size: 16px;
}

.hero--wrapper {
  display: flex;
  column-gap: 4.1875em;
  padding-top: 7.125em;
}

.hero--blok-left {
  flex: 0 0 50.37%;
  margin-top: 5.6875em;
}

.hero--descr {
  margin-bottom: 0.444em;
  @include SWCL(1.125em, 500, $pigeonBlue, 1.6875);
}

.hero--title {
  margin-bottom: 0.46875em;
  @include SWCL(4em, 700, $darkBlue, 1.1875);
}

.hero--subtitle {
  @include SWCL(1.125em, 400, $marengo, 2);
  margin-bottom: 2.222em;
}

.hero--button {}

.hero--block-right {
  display: flex;
  align-items: flex-end;
}

svg {
  width: 100%;
  height: 100%;
  max-width:584px;
  max-height:620px;
}

// Adaptive
@media only screen and (max-width: 1024px) {
  .header {
    font-size: 14px;
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="hero">
  <div class="container">
    <div class="hero--wrapper">
      <div class="hero--blok-left">
        <div class="hero--descr">Welcome to Besnik Agency</div>
        <h1 class="hero--title">Discover a place you’ll love to live.</h1>
        <p class="hero--subtitle">
          Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
        </p>
        <button class="button hero--button">More About Us</button>
      </div>
      <div class="hero--block-right">
        <div class="heroimg">
          <svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
                  <path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
                  <path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
                  <path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
                  <path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
                  <path
                    d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
                    fill="#0E173D"
                  />
                  <path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
                  <path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
                  <path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
                  <path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
                  <path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
                  <path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
                  <path
                    d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
                    fill="#CFDEF3"
                  />
                  <path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
                  <rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
                  <rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
                  <rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
                  <path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
                  <path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
                  <path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
                  <path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
                  <rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
                  <path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
                  <path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
                  <path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
                  <path
                    d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
                    fill="#1F326B"
                  />
                  <path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
                  <path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
                  <rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
                  <rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
                  <rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
                  <path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
                  <rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
                  <rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
                  <rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <path
                    d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
                    stroke="#A3BDFF"
                    stroke-width="4"
                  />
                  <rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
                  <path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
                  <path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
                  <path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
                  <rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
                  <path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
                  <path
                    d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
                    fill="#0D0808"
                  />
                  <path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
                  <path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
                  <path
                    d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
                    stroke="black"
                    stroke-width="4"
                  />
                  <path
                    d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
                    stroke="black"
                    stroke-width="3"
                  />
                  <circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
                  <circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
                  <circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
                  <circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
                  <path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
                  <path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
                  <path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
                  <path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
                  <path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
                  <path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
                </svg>
        </div>
      </div>
    </div>
  </div>
</div></code>```

Like the above?(run snippet)

Idea:

Use percentage (100%) as width,height of svg

Body:
Maket link: https://www.figma.com/file/hYoPHDHOzzgzEPo4crMmy1/UH15U7CD4WZkbhcW?node-id=2%3A334

Project link: https://plupiks.github.io/Real-Estate-LandingPage/

I have a layout, it has an image of a building. This image is outside of the container. I was able to take the image out of the container, but I can’t adapt it anymore. If I give the image width: 100%; height: auto; , its dimensions no longer correspond to those specified in the layout.

The question is, how to move images outside the container so that they can then be adapted without changing the original image dimensions?

Worked with preprocessor SCSS.

Welcome to Besnik Agency

Discover a place you’ll love to live.

                Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search

              <button class="button hero--button">More About Us</button>

                <svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
                  <path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
                  <path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
                  <path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
                  <path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
                  <path
                    d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
                    fill="#0E173D"
                  />
                  <path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
                  <path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
                  <path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
                  <path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
                  <path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
                  <path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
                  <path
                    d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
                    fill="#CFDEF3"
                  />
                  <path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
                  <rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
                  <rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
                  <rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
                  <path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
                  <path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
                  <path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
                  <path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
                  <rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
                  <path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
                  <path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
                  <path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
                  <path
                    d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
                    fill="#1F326B"
                  />
                  <path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
                  <path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
                  <rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
                  <rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
                  <rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
                  <path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
                  <rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
                  <rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
                  <rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <path
                    d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
                    stroke="#A3BDFF"
                    stroke-width="4"
                  />
                  <rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
                  <path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
                  <path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
                  <path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
                  <rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
                  <path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
                  <path
                    d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
                    fill="#0D0808"
                  />
                  <path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
                  <path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
                  <path
                    d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
                    stroke="black"
                    stroke-width="4"
                  />
                  <path
                    d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
                    stroke="black"
                    stroke-width="3"
                  />
                  <circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
                  <circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
                  <circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
                  <circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
                  <path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
                  <path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
                  <path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
                  <path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
                  <path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
                  <path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
                </svg>

.hero {
  position: relative;
  background-color: $blueElis;
  font-size: 16px;
}

.hero--wrapper {
  display: flex;
  column-gap: 4.1875em;
  padding-top: 7.125em;
}

.hero--blok-left {
  flex: 0 0 50.37%;
  margin-top: 5.6875em;
}

.hero--descr {
  margin-bottom: 0.444em;
  @include SWCL(1.125em, 500, $pigeonBlue, 1.6875);
}

.hero--title {
  margin-bottom: 0.46875em;
  @include SWCL(4em, 700, $darkBlue, 1.1875);
}

.hero--subtitle {
  @include SWCL(1.125em, 400, $marengo, 2);
  margin-bottom: 2.222em;
}
.hero--button {
}

.hero--block-right {
  display: flex;
  align-items: flex-end;
}
.hero--img {
  width: 36.5em;
  height: auto;
  & svg {
    max-width: 100%;
    height: auto;
  }
}

// Adaptive

@media only screen and (max-width: 1024px) {
  .header {
    font-size: 14px;
  }
}

Body:
.hero {
  position: relative;
  background-color: $blueElis;
  font-size: 16px;
}

.hero--wrapper {
  display: flex;
  column-gap: 4.1875em;
  padding-top: 7.125em;
}

.hero--blok-left {
  flex: 0 0 50.37%;
  margin-top: 5.6875em;
}

.hero--descr {
  margin-bottom: 0.444em;
  @include SWCL(1.125em, 500, $pigeonBlue, 1.6875);
}

.hero--title {
  margin-bottom: 0.46875em;
  @include SWCL(4em, 700, $darkBlue, 1.1875);
}

.hero--subtitle {
  @include SWCL(1.125em, 400, $marengo, 2);
  margin-bottom: 2.222em;
}

.hero--button {}

.hero--block-right {
  display: flex;
  align-items: flex-end;
}

svg {
  width: 100%;
  height: 100%;
  max-width:584px;
  max-height:620px;
}

// Adaptive
@media only screen and (max-width: 1024px) {
  .header {
    font-size: 14px;
  }
}

<div class="hero">
  <div class="container">
    <div class="hero--wrapper">
      <div class="hero--blok-left">
        <div class="hero--descr">Welcome to&nbsp;Besnik Agency</div>
        <h1 class="hero--title">Discover a&nbsp;place you&rsquo;ll love to&nbsp;live.</h1>
        <p class="hero--subtitle">
          Get the best real estate deals first, before they hit the mass market! hot foreclosure deals with one simple search
        </p>
        <button class="button hero--button">More About&nbsp;Us</button>
      </div>
      <div class="hero--block-right">
        <div class="heroimg">
          <svg width="584" height="620" viewBox="0 0 584 620" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M241.032 610.998L231.713 201.367L58.0327 201.367L60.5743 610.998H241.032Z" fill="#F1F6FF" />
                  <path d="M302.879 608.881V337.77L512.566 343.89V608.881H302.879Z" fill="#FEFCED" />
                  <path d="M58.033 201.367L60.5747 610.998H159.276L154.616 201.367H58.033Z" fill="#7398F7" />
                  <path d="M182.997 159.855H110.983V201.369H182.997V159.855Z" fill="#1F1D42" />
                  <path d="M110.983 159.855V201.369H159.698C136.315 196.285 129.057 171.575 128.351 159.855H110.983Z" fill="#1F1717" />
                  <path
                    d="M152.498 89.1111L144.026 88.2639C141.908 87.4167 141.484 77.6737 149.533 79.7917C155.971 81.4861 154.192 86.7107 152.498 89.1111Z"
                    fill="#0E173D"
                  />
                  <path d="M152.498 89.112L144.026 88.2648V100.549L152.498 101.397V89.112Z" fill="#0E173D" />
                  <path d="M144.025 100.548L152.497 101.396L183.845 123.847H110.56L144.025 100.548Z" fill="#1F1D42" />
                  <path d="M323.636 403.007H316.859V451.298H313.893V456.381H326.602V449.604H323.636V403.007Z" fill="#1B2A63" />
                  <path d="M512.566 612.269H302.879V473.325L512.566 476.385V612.269Z" fill="#A3BDFF" />
                  <path d="M448.177 242.458L221.546 235.257L302.879 337.77L520.614 344.124L448.177 242.458Z" fill="#063183" />
                  <path d="M302.879 337.77L520.614 344.124L316.011 238.258L221.546 235.257L302.879 337.77Z" fill="#7087FB" />
                  <path
                    d="M221.546 235.257L302.879 337.77V605.915L152.921 613.117V476.291V337.77L193.164 284.819H184.268L221.546 235.257Z"
                    fill="#CFDEF3"
                  />
                  <path d="M250.776 297.527H206.297V350.902H250.776V297.527Z" fill="#0C183F" />
                  <rect x="211.38" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
                  <rect x="232.56" y="303.033" width="15.2499" height="18.6388" fill="#1F326B" />
                  <rect x="232.56" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
                  <path d="M110.562 123.846H183.846H188.929V125.964H104.631V123.846H110.562Z" stroke="black" />
                  <path d="M150.804 378.012H303.727H512.99" stroke="black" stroke-width="4" />
                  <path d="M151.652 486.457H301.186H511.297" stroke="black" stroke-width="5" />
                  <path d="M151.652 486.457H301.186" stroke="#5267FA" stroke-width="6" />
                  <rect x="211.38" y="328.451" width="15.2499" height="18.6388" fill="#1F326B" />
                  <path d="M113.525 289.901H91.0741V350.901H115.22L113.525 289.901Z" fill="#0E173D" />
                  <path d="M113.525 395.381H91.0741V456.381H115.22L113.525 395.381Z" fill="#0C193F" />
                  <path d="M114.797 267.027H91.9224V220.43C97.3446 205.18 106.325 214.076 110.138 220.43L114.797 267.027Z" fill="#1F1D42" />
                  <path
                    d="M352.019 247.118H327.873L306.693 240.763V201.368V199.25L327.873 198.677L353.714 197.979L353.597 201.368L352.019 247.118Z"
                    fill="#1F326B"
                  />
                  <path d="M352.019 247.118H327.874V201.368V198.677L353.714 197.979L353.597 201.368L352.019 247.118Z" fill="#FEFDE8" />
                  <path d="M306.693 199.25L327.873 198.677L353.714 197.979L353.597 201.368H327.873H306.693V199.25Z" fill="#112F7F" />
                  <rect x="180.881" y="125.966" width="1.69444" height="33.8888" fill="#0C1942" />
                  <rect x="241.032" y="166.632" width="1.69444" height="189.777" transform="rotate(90 241.032 166.632)" fill="#0C1942" />
                  <rect x="241.032" y="199.673" width="1.69444" height="189.777" transform="rotate(90 241.032 199.673)" fill="#0C1942" />
                  <path d="M58.0009 231.867H155.855H232.501" stroke="#18265D" stroke-width="4" />
                  <rect x="241.032" y="186.118" width="1.69444" height="189.777" transform="rotate(90 241.032 186.118)" fill="#081334" />
                  <rect x="110.56" y="125.966" width="1.69444" height="33.8888" fill="#132355" />
                  <rect x="128.352" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <rect x="131.741" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <rect x="136.824" y="131.895" width="1.69444" height="27.9582" fill="#132355" />
                  <path
                    d="M221.546 235.257L227.259 244.153M302.879 337.77L296.72 330.145M227.259 244.153L453.308 249.66M227.259 244.153L237.524 256.861M237.524 256.861L462.061 261.944M237.524 256.861L248.816 270.84M248.816 270.84L470.813 274.229M248.816 270.84L257.976 282.18M257.976 282.18L479.566 286.514M257.976 282.18L269.004 295.833M269.004 295.833L488.42 298.939M269.004 295.833L278.243 307.27M278.243 307.27L497.739 312.019M278.243 307.27L290.561 322.52M290.561 322.52H505.221M290.561 322.52L296.72 330.145M296.72 330.145L512.918 333.322"
                    stroke="#A3BDFF"
                    stroke-width="4"
                  />
                  <rect x="83.4506" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="51.2557" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="239.338" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <path d="M377.436 511.026H363.88V579.651H377.436V511.026Z" fill="#0C183F" />
                  <path d="M363.88 579.651H377.436V545.339H363.88V579.651Z" fill="#17275F" />
                  <path d="M489.691 548.304H467.24V580.499H489.691V548.304Z" fill="#17275F" />
                  <path d="M148.687 79.7914L146.992 1" stroke="black" stroke-width="3" />
                  <rect x="210.534" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="151.227" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="77.5193" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="204.602" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="145.298" y="168.327" width="1.69444" height="31.3471" fill="#121B3A" />
                  <rect x="158.853" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <rect x="162.241" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <rect x="152.921" y="131.895" width="1.69444" height="27.9582" fill="#121B3A" />
                  <path d="M467.24 580.499H489.691V564.402H467.24V580.499Z" fill="#0F1C49" />
                  <path d="M503.67 556.353H495.198V574.145L503.67 573.721V556.353Z" fill="#FAF2E2" />
                  <path
                    d="M200.365 511.449V548.727H204.601V604.643H211.803V546.185H207.143V517.803H248.657V546.185H241.879V604.643H246.115V548.727H254.164V511.449H200.365Z"
                    fill="#0D0808"
                  />
                  <path d="M241.881 546.186V604.644H211.805V546.186H207.145V517.804H248.659V546.186H241.881Z" fill="#17275F" />
                  <path d="M584 611.421H0V620H584V611.421Z" fill="#091D39" />
                  <path
                    d="M571.873 611.422V576.686M510.026 576.686V611.422M446.485 576.686V611.422M385.909 576.686V611.422M323.214 576.686V611.422M259.249 576.686V611.422M201.638 576.686V611.422M136.826 576.686V611.422M74.132 576.686V611.422M14.4031 576.686V611.422"
                    stroke="black"
                    stroke-width="4"
                  />
                  <path
                    d="M571.873 582C558.6 593.579 527.648 609.789 510.026 582C495.623 590.755 462.751 602.78 446.485 581.769C433.776 590.241 403.869 603.288 385.908 587.699C373.341 593.489 343.209 601.594 323.214 587.699C305.705 591.371 268.399 596.511 259.249 587.699C247.388 591.371 219.26 596.511 201.638 587.699C184.553 591.371 147.67 596.511 136.826 587.699C118.752 593.912 89.8057 602.102 74.1318 587.699C57.0807 591.371 23.3695 597.311 13.5004 588.5"
                    stroke="black"
                    stroke-width="3"
                  />
                  <circle cx="571.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="510.026" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="446.484" cy="575.416" r="2.96527" fill="#06162A" />
                  <circle cx="385.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="322.965" cy="574.965" r="2.96527" fill="#06162A" />
                  <circle cx="259.249" cy="575.416" r="2.96527" fill="#06162A" />
                  <circle cx="201.638" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="136.965" cy="574.568" r="2.96527" fill="#06162A" />
                  <circle cx="73.9653" cy="576.262" r="2.96527" fill="#06162A" />
                  <circle cx="13.9653" cy="577.965" r="2.96527" fill="#06162A" />
                  <path d="M56.7639 45.479L69.4722 56.4928L82.1805 45.479" stroke="black" stroke-width="4" />
                  <path d="M8.47162 38.7016L21.1799 49.7154L33.8882 38.7016" stroke="black" stroke-width="4" />
                  <path d="M63.5413 16.675L76.2496 27.6889L88.9579 16.675" stroke="black" stroke-width="4" />
                  <path d="M133.014 20.9098L145.722 31.9236L158.431 20.9098" stroke="black" stroke-width="4" />
                  <path d="M255.86 390.298H210.11L211.805 458.076H255.86V390.298Z" fill="#0F1F4C" />
                  <path d="M244.847 401.736H221.125V446.638H244.847V401.736Z" fill="#142553" />
                </svg>
        </div>
      </div>
    </div>
  </div>
</div>

Like the above?(run snippet)

Idea:

Use percentage (100%) as width,height of svg


问:
Postgres row locking
I am new to Postgres(even to SQL). I am building a key DB which has a table named Key. My question is how can I perform the following on pg.

If one connection is reading the first record and simultaneously the second connection comes in, it should read 2nd record rather than 1st. Its the same thing for the 3rd 4th and so on.

答:
You can do it using select for update. FOR UPDATE causes the rows retrieved by the SELECT statement to be locked as though for update. This prevents them from being locked, modified or deleted by other transactions until the current transaction ends.

ATTENTION:

SELECT FOR UPDATE will wait for a concurrent transaction that has run
any of those commands on the same row, and will then lock and return
the updated row (or no row, if the row was deleted)

Now I will write for you query samples and explain how to do it:
Suppose we have one such table:

```<code>Table name: key_table

key     is_used
00001   true
00002   true
00003   false
00004   false
00005   false
</code>```

```<code>select key from key_table
where
    is_used = false
order by key desc
limit 1 for update
into v_key;

update key_table
set
    is_used = true
where key = v_key;
</code>```

After the select command selected row will be locked. And this row cannot be selected by user in any other session until be updated. All users will be waiting for this update when selecting this row. After update command users can be shown next row which is_used = false

Title: Postgres row locking

Body:
You can do it using select for update. FOR UPDATE causes the rows retrieved by the SELECT statement to be locked as though for update. This prevents them from being locked, modified or deleted by other transactions until the current transaction ends.

ATTENTION:

SELECT FOR UPDATE will wait for a concurrent transaction that has run
any of those commands on the same row, and will then lock and return
the updated row (or no row, if the row was deleted)

Now I will write for you query samples and explain how to do it:
Suppose we have one such table:

Table name: key_table

key     is_used
00001   true
00002   true
00003   false
00004   false
00005   false

select key from key_table
where
    is_used = false
order by key desc
limit 1 for update
into v_key;

update key_table
set
    is_used = true
where key = v_key;

After the select command selected row will be locked. And this row cannot be selected by user in any other session until be updated. All users will be waiting for this update when selecting this row. After update command users can be shown next row which is_used = false


问:
VBA partial match
I've been making what started out as a basic asset tracker, but as its progressed more and more has been added.
before this I've never done anything with excel, meaning most of what i have done has been through searching, copying, and making slight changes to code found online.

Im now trying to search for a client name held on a "Database" sheet and display all assets assigned to that client on a "Reports" sheet

I have "Userform5" with a command box auto populating the name of the client as you begin typing

Client name is often referred to differently, so the official client name is loaded into the command box, however on the spreadsheet it may have been inputted as a shortened version of the name. Eg, Tarmac Trading Limited is the official name loaded into the command box, on the Database this may be input as just Tarmac or another slight variation.

i have a code that works fine, but only for exact matches, and will even disregard if a space has been entered at the end of the client name on "database"

is there a way to change the below code to search for partial matches?

```<code>Sub ClientSearch_Click()

Application.ScreenUpdating = False

Dim Client As String
Dim finalrow As Integer
Dim i As Integer

Sheets("Reports").Range("A2:aj10000").ClearContents
Client = Trim(Cmbclient.Text)
Sheets("Database").Activate

finalrow = Sheets("Database").Range("A10000").End(xlUp).Row

For i = 2 To finalrow
'Function equalsIgnoreCase(str1 As String, str2 As String) As Boolean
 '   equalsIgnoreCase = LCase(str1) = LCase(str2)
'End Function

If LCase(Sheets("Database").Cells(i, 4)) = LCase(Client) Then

Range(Cells(i, 1), Cells(i, 50)).Copy
Sheets("Reports").Range("A100").End(xlUp).Offset(1, 0).PasteSpecial xlPasteValues
End If

Next i

Sheets("Reports").Activate

Range("A:AZ").EntireColumn.Hidden = True
Range("B:B,D:D,E:E,F:F,G:G,H:H,I:I,J:J,K:K,L:L,M:M,N:N,Q:Q,AB:AB,AF:AF,AG:AG,AH:AH,AI:AI,AJ:AJ").EntireColumn.Hidden = False

Application.ScreenUpdating = True

Unload UserForm5

End Sub
</code>```

答:
Replace

If LCase(Sheets("Database").Cells(i, 4)) = LCase(Client) Then

with

If LCase(Sheets("Database").Cells(i, 4)) = LCase(Client) Or InStr(LCase(Client), LCase(Sheets("DataBase"), Cells(i, 4))) > 0 Then

Title: VBA partial match

Body:
I've been making what started out as a basic asset tracker, but as its progressed more and more has been added.
before this I've never done anything with excel, meaning most of what i have done has been through searching, copying, and making slight changes to code found online.

Im now trying to search for a client name held on a "Database" sheet and display all assets assigned to that client on a "Reports" sheet

I have "Userform5" with a command box auto populating the name of the client as you begin typing

Client name is often referred to differently, so the official client name is loaded into the command box, however on the spreadsheet it may have been inputted as a shortened version of the name. Eg, Tarmac Trading Limited is the official name loaded into the command box, on the Database this may be input as just Tarmac or another slight variation.

i have a code that works fine, but only for exact matches, and will even disregard if a space has been entered at the end of the client name on "database"

is there a way to change the below code to search for partial matches?

Sub ClientSearch_Click()

Application.ScreenUpdating = False

Dim Client As String
Dim finalrow As Integer
Dim i As Integer

Sheets("Reports").Range("A2:aj10000").ClearContents
Client = Trim(Cmbclient.Text)
Sheets("Database").Activate

finalrow = Sheets("Database").Range("A10000").End(xlUp).Row

For i = 2 To finalrow
'Function equalsIgnoreCase(str1 As String, str2 As String) As Boolean
 '   equalsIgnoreCase = LCase(str1) = LCase(str2)
'End Function

If LCase(Sheets("Database").Cells(i, 4)) = LCase(Client) Then

Range(Cells(i, 1), Cells(i, 50)).Copy
Sheets("Reports").Range("A100").End(xlUp).Offset(1, 0).PasteSpecial xlPasteValues
End If

Next i

Sheets("Reports").Activate

Range("A:AZ").EntireColumn.Hidden = True
Range("B:B,D:D,E:E,F:F,G:G,H:H,I:I,J:J,K:K,L:L,M:M,N:N,Q:Q,AB:AB,AF:AF,AG:AG,AH:AH,AI:AI,AJ:AJ").EntireColumn.Hidden = False

Application.ScreenUpdating = True

Unload UserForm5

End Sub


问:
Bloomberg C# API - How to Call BDP with different options/Fields
I am trying to migrate from Excel add-in to Bloomberg C# Desktop API. For simple calls like BDP("AB IB Equity","best_analyst_rating") I am able to do without issues using something like this:

```<code>    private void sendRefDataRequest(Session session)
    {
        Service refDataService = session.GetService("//blp/refdata");
        Request request = refDataService.CreateRequest("ReferenceDataRequest");

        // Add securities to request
        Element securities = request.GetElement("securities");
        securities.AppendValue("AB IB Equity");
        Element fields = request.GetElement("fields");
        fields.AppendValue("best_analyst_rating");
        System.Console.WriteLine("Sending Request: " + request);
        session.SendRequest(request, null);
    }
</code>```

But for more complex calls involving additional options to BDP like
BDP("AB IB Equity","bs_tot_asset","EQY_Consolidated","Y","EQY_FUND_Relative_Period","-0FY") I have no clue how to translate it to C# calls. Appreciate any help on this.

答:
You need to set the overrides. For any given field you can find these using FLDS in the Bloomberg terminal.

```<code>Element overrides = request.GetElement("overrides");
</code>```

Then loop through the necessary overrides, setting the fieldId to the Mnemonic from FLDS and the value to your specific request:

```<code>Element override = overrides.AppendElement();
override.SetElement("fieldId","EQY_CONSOLIDATED");
override.SetElement("value","Y");
</code>```

ContentLicense: CC BY-SA 3.0

Body:
I am trying to migrate from Excel add-in to Bloomberg C# Desktop API. For simple calls like BDP("AB IB Equity","best_analyst_rating") I am able to do without issues using something like this:

    private void sendRefDataRequest(Session session)
    {
        Service refDataService = session.GetService("//blp/refdata");
        Request request = refDataService.CreateRequest("ReferenceDataRequest");

        // Add securities to request
        Element securities = request.GetElement("securities");
        securities.AppendValue("AB IB Equity");
        Element fields = request.GetElement("fields");
        fields.AppendValue("best_analyst_rating");
        System.Console.WriteLine("Sending Request: " + request);
        session.SendRequest(request, null);
    }

But for more complex calls involving additional options to BDP like
BDP("AB IB Equity","bs_tot_asset","EQY_Consolidated","Y","EQY_FUND_Relative_Period","-0FY") I have no clue how to translate it to C# calls. Appreciate any help on this.

Body:
You need to set the overrides. For any given field you can find these using FLDS in the Bloomberg terminal.

Element overrides = request.GetElement("overrides");

Then loop through the necessary overrides, setting the fieldId to the Mnemonic from FLDS and the value to your specific request:

Element override = overrides.AppendElement();
override.SetElement("fieldId","EQY_CONSOLIDATED");
override.SetElement("value","Y");


问:
How to use regex to extract a string with multiple curly braces?
I have this sample string

```<code>`{1:}{2:}{3:}{4:\r\n-}{5:}`
</code>```

and I want to extract out only {4:\r\n-}

This is my code but it is not working.

```<code>var str = "{1:}{2:}{3:}{4:\r\n-}{5:}";
var regex = new Regex(@"{4:*.*-}");
var match = regex.Match(str);
</code>```

答:
You just need to escape your \r and \n characters in your regular expression. You can use the Regex.Escape() method to escape characters in your regex string which returns a string of characters that are converted to their escaped form.

Working example: https://dotnetfiddle.net/6GLZrl

```<code>using System;
using System.Text.RegularExpressions;

public class Program
{
    public static void Main()
    {
        string str = @"{1:}{2:}{3:}{4:\r\n-}{5:}";
        string regex = @"{4:\r\n-}";  //Original regex
        Match m = Regex.Match(str, Regex.Escape(regex));
        if (m.Success)
        {
            Console.WriteLine("Found '{0}' at position {1}.", m.Value, m.Index);
        }
        else
        {
            Console.WriteLine("No match found");
        }
    }
}
</code>```

Body:
I have this sample string

`{1:}{2:}{3:}{4:\r\n-}{5:}`

and I want to extract out only {4:\r\n-}

This is my code but it is not working.

var str = "{1:}{2:}{3:}{4:\r\n-}{5:}";
var regex = new Regex(@"{4:*.*-}");
var match = regex.Match(str);

Body:
You just need to escape your \r and \n characters in your regular expression. You can use the Regex.Escape() method to escape characters in your regex string which returns a string of characters that are converted to their escaped form.

Working example: https://dotnetfiddle.net/6GLZrl

using System;
using System.Text.RegularExpressions;

public class Program
{
    public static void Main()
    {
        string str = @"{1:}{2:}{3:}{4:\r\n-}{5:}";
        string regex = @"{4:\r\n-}";  //Original regex
        Match m = Regex.Match(str, Regex.Escape(regex));
        if (m.Success)
        {
            Console.WriteLine("Found '{0}' at position {1}.", m.Value, m.Index);
        }
        else
        {
            Console.WriteLine("No match found");
        }
    }
}


问:
How to set username in Firebase auth
Hello how can I set username on Signup for Firebase User. I use firebase Authentication API. I thought about try / catch block and setting User properties like

```<code>const user = auth.currentUser;
user.name = 'John123'
</code>```

Is it possible?

```<code>const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        createUserWithEmailAndPassword(auth, email, password)

    }
</code>```

答:
It is full solution</p>
```<code> const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        const createUser = async ( ) => {
            await createUserWithEmailAndPassword(auth, email, password)
            updateProfile(auth.currentUser!, {
            displayName: "John123" // it can be a value of an input
          })
        }
        createUser()
    }
</code>```

Title: How to set username in Firebase auth

Body:
Hello how can I set username on Signup for Firebase User. I use firebase Authentication API. I thought about try / catch block and setting User properties like

const user = auth.currentUser;
user.name = 'John123'

Is it possible?

const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        createUserWithEmailAndPassword(auth, email, password)

    }

Body:
It is full solution

 const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        const createUser = async ( ) => {
            await createUserWithEmailAndPassword(auth, email, password)
            updateProfile(auth.currentUser!, {
            displayName: "John123" // it can be a value of an input
          })
        }
        createUser()
    }


问:
Converting Jenkins working directory to remote directory
I previously had a jenkins node running windows with a working directory outside of jenkins folder.
We now migrated the jenkins to Linux. All i want to ask is can i use the old windows working directory as a new remote directory for the linux  and connect it to the linux as slave node?</p>

答: Yes, you can add a mount point on linux to connect shared folder of old windows working directory ans use it as a new remote directory for the linux</p>


问:
git clone and remote dependency
I have my own python project (local to my laptop and no git init)
and  I want to use some module of capirca (https://github.com/google/capirca.git) so what i did was:

Activate my venv in my own project

Clone the repository: git clone https://github.com/google/capirca.git from isnide my own project

Folder "capirca" is now inside my project

I want now to create some function inside folder Capirca/ but as soon i modify anything the modified file appear in my source-control section ready to be committed (visual-studio)

```<code>(vend) ➜  capirca git:(master) git remote -v
origin  https://github.com/google/capirca.git (fetch)
origin  https://github.com/google/capirca.git (push)
</code>```

I tried to delete the git origin

```<code>(venv) ➜  capirca git:(master) git remote rm origin
(venv) ➜  capirca git:(master) git remote -v

</code>```

but still, the file that i create appear in my source control (visual studio code) as ready to be committed.
This is valid for anything inside folder capirca.

What am i missing here?

答:
It is the expected behavior that any changes you make in a git repository, it will be picked up by git.

If you don't want this to happen, simply delete the .git folder inside the newly cloned repository. This will imply that you won't be able to pull any latest changes in your dependency, hence not a recommended approach.

Else if you want your folder to be tracked by git and the new project be ignored, you need to create a .gitignore file in the root of your project and add the folder you want to ignore.

The most ideal approach is to use a submodule.

```<code>$ git submodule add https://github.com/org/repo
</code>```

Any further changes in the dependency / submodule should be made in a separate branch, ideally, you can fork the dependency in your GitHub, essentially allowing you to commit your changes in your dependency as well as allowing you to pull-in any additional bug-fix or features in the mainline.

Detailed explanation for submodule here: https://git-scm.com/book/en/v2/Git-Tools-Submodules

Title: git clone and remote dependency

Body:
I have my own python project (local to my laptop and no git init)
and  I want to use some module of capirca (https://github.com/google/capirca.git) so what i did was:

Activate my venv in my own project

Clone the repository: git clone https://github.com/google/capirca.git from isnide my own project

Folder "capirca" is now inside my project

I want now to create some function inside folder Capirca/ but as soon i modify anything the modified file appear in my source-control section ready to be committed (visual-studio)

(vend) ➜  capirca git:(master) git remote -v
origin  https://github.com/google/capirca.git (fetch)
origin  https://github.com/google/capirca.git (push)

I tried to delete the git origin

(venv) ➜  capirca git:(master) git remote rm origin
(venv) ➜  capirca git:(master) git remote -v

but still, the file that i create appear in my source control (visual studio code) as ready to be committed.
This is valid for anything inside folder capirca.

What am i missing here?

Body:
It is the expected behavior that any changes you make in a git repository, it will be picked up by git.

If you don't want this to happen, simply delete the .git folder inside the newly cloned repository. This will imply that you won't be able to pull any latest changes in your dependency, hence not a recommended approach.

Else if you want your folder to be tracked by git and the new project be ignored, you need to create a .gitignore file in the root of your project and add the folder you want to ignore.

The most ideal approach is to use a submodule.

$ git submodule add https://github.com/org/repo

Any further changes in the dependency / submodule should be made in a separate branch, ideally, you can fork the dependency in your GitHub, essentially allowing you to commit your changes in your dependency as well as allowing you to pull-in any additional bug-fix or features in the mainline.

Detailed explanation for submodule here: https://git-scm.com/book/en/v2/Git-Tools-Submodules


问:
Is there a LINQ operator to do this?
I would like to know if there's a LINQ operator to do this:

```<code>var one = new[] { "A", "B", "C" };
var two = new[] { "A", "B", "C", "D" };
var combined = new [] { one, two };

var result = Operator(combined);

Console.WriteLine(result.Should().BeEquivalentTo(new [] { "A", "A", "B", "B", "C", "C", null, "D" }));
</code>```

If short, it should act like if every sequence was a row in a matrix. And after that, it should:

Transpose the matrix (rotate it)

It should push every "cell" in the matrix, returning the corresponding item, or default if the cell is empty.

I mean, graphically:

```<code>A, B, C
A, B, C, D

<Transpose>

A, A
B, B
C, C
D

result => A, A, B, B, C, C, D, null
</code>```

NOTICE

Operator should work on IEnumerable<IEnumerable<T>>

As you can see, the Operator I'm interested in, uses combined, so it accepts should IEnumerable<IEnumerable<T>> (like SelectMany).

答:
To make the result independent of the number of arrays the function should loop trough all arrays and keep returning until all enumerations are exhausted:

public static IEnumerable<IEnumerable<T>> Transpose<T>(this IEnumerable<IEnumerable<T>> source)
{
    var enumerators = source.Select(e => e.GetEnumerator()).ToArray();
    try
    {
        var next = false;
        do
        {
            var results = enumerators.Select(enr =>
            {
                if (enr.MoveNext())
                {
                    return enr.Current;
                }
                return default;
            }).ToList();
            next = results.Any(e => !Equals(default, e));
            if (next)
            {
                yield return results;
            }
        }
        while (next);
    }
    finally
    {
        Array.ForEach(enumerators, e => e.Dispose());
    }
}
```
<p>Now you can use any number of arrays:</p>
<pre class="lang-cs prettyprint-override"><code>var one = new[] { "A", "B", "C" };
var two = new[] { "A", "B", "C", "D" };
var three = new[] { "U", "V","W", "X", "Y", "Z" };
var combined = new[] { one, three, two };
var result = combined.Transpose().SelectMany(e => e).ToList();
</code>```

This will result in

```<code>"A","U","A","B","V","B","C","W","C",null,"X","D",null,"Y",null,null,"Z",null
</code>```

Filtering the null values is trivial.

(Courtesy this answer for the basic idea, but only working for arrays of equal length).

Title: Is there a LINQ operator to do this?

Body:
I would like to know if there's a LINQ operator to do this:

var one = new[] { "A", "B", "C" };
var two = new[] { "A", "B", "C", "D" };
var combined = new [] { one, two };

var result = Operator(combined);

Console.WriteLine(result.Should().BeEquivalentTo(new [] { "A", "A", "B", "B", "C", "C", null, "D" }));

If short, it should act like if every sequence was a row in a matrix. And after that, it should:

Transpose the matrix (rotate it)

It should push every "cell" in the matrix, returning the corresponding item, or default if the cell is empty.

I mean, graphically:

A, B, C
A, B, C, D

<Transpose>

A, A
B, B
C, C
D

result => A, A, B, B, C, C, D, null

NOTICE

Operator should work on IEnumerable<IEnumerable<T>>

As you can see, the Operator I'm interested in, uses combined, so it accepts should IEnumerable<IEnumerable<T>> (like SelectMany).

Body:
To make the result independent of the number of arrays the function should loop trough all arrays and keep returning until all enumerations are exhausted:

public static IEnumerable<IEnumerable<T>> Transpose<T>(this IEnumerable<IEnumerable<T>> source)
{
    var enumerators = source.Select(e => e.GetEnumerator()).ToArray();
    try
    {
        var next = false;
        do
        {
            var results = enumerators.Select(enr =>
            {
                if (enr.MoveNext())
                {
                    return enr.Current;
                }
                return default;
            }).ToList();
            next = results.Any(e => !Equals(default, e));
            if (next)
            {
                yield return results;
            }
        }
        while (next);
    }
    finally
    {
        Array.ForEach(enumerators, e => e.Dispose());
    }
}

Now you can use any number of arrays:

var one = new[] { "A", "B", "C" };
var two = new[] { "A", "B", "C", "D" };
var three = new[] { "U", "V","W", "X", "Y", "Z" };
var combined = new[] { one, three, two };
var result = combined.Transpose().SelectMany(e => e).ToList();

This will result in

"A","U","A","B","V","B","C","W","C",null,"X","D",null,"Y",null,null,"Z",null

Filtering the null values is trivial.

(Courtesy this answer for the basic idea, but only working for arrays of equal length).


问:
How I can transfer Jinja2 template on diffrent container using ansible
I configured nginx on diffrent docker using ansible. Now I want to change different index.html using Jinja2.

I configured nginx using localhost. But now how can I use template Jinja2 and transfer it on container using ansible.

---
- hosts: localhost
  vars:
    server_name: "server"
  connection: local
  become: yes
  tasks:
  - package:
      name: docker
      state: present
  - service:
      name: docker
      state: restarted
  - command: docker run -it --name ngixserver21 -d -p 8090:80 nginx

#how I can transfer html_template.j2 on container - ngixserver21

  - name: Run a simple command (command)
    community.docker.docker_container_exec:
        container: ngixserver21
    template:
          src: "html_template.j2"
          desc: "/usr/share/nginx/html/index.html"
          notify: Restart Nginx
```

答:
Important preliminary note: I urge you to read the comments from DavidMaze and β.εηοιτ.βε above regarding good practice to understand why you don't want to go through ansible in your specific case and you should not modify a running container.

Meanwhile, since there are other use cases (like testing ansible roles inside a docker container), I'll still answer the overall question hopping that all the above warnings were enough for you to use that information very wisely.

To start with, if you want to deploy and run your image with ansible, it should be done using the relevant docker_container module rather than calling shell.

Once this is done, ansible has a docker connection plugin that will let you interact with containers on your host 1. The idea is to have an entry in your inventory for the relevant container using the correctly configured connection. You can then use a normal play host loop with usual ansible tasks to reach your remote target container 2.

In my example below, I deploy an image and add it to the in-memory inventory in the same playbook using the add_host module. Those two actions can be done totally independently and there are several options to add your containers to an inventory among which the docker_containers dynamic inventory plugin.

I used the following test.j2 template for this test

Dummy template
Node name: {{ ansible_nodename }}
Environment:
{{ ansible_env | to_nice_yaml }}
```
<p>This the demo <code>playbook.yml</code>:</p>
<pre class="lang-yaml prettyprint-override"><code>---
- name: spin-up container and add to inventory
  hosts: localhost
  gather_facts: false

  vars:
    container_name: my_test_container

  tasks:
    - name: Deploy a dummy container
      docker_container:
        name: "{{ container_name }}"
        image: python:latest
        command: tail -f /dev/null
        state: started

    - name: store container name as a fact on localhost for later use in last play
      set_fact:
        container_name: "{{ container_name }}"

    - name: Add the created container to inventory
      add_host:
        name: "{{ container_name }}"
        groups:
          - docker_test
        ansible_connection: docker

- name: do some stuff on container
  hosts: docker_test

  tasks:
    - name: show a gathered info from the container
      debug:
        var: ansible_os_family

    - name: test our template is deployable
      template:
        src: test.j2
        dest: /test.txt

    - name: get result back to check
      slurp:
        path: /test.txt
      register: deploy_template

    - name: show result
      debug:
        msg: "{{ (deploy_template.content | b64decode).split('\n') }}"

    # Put here anything else that should target your container(s)

- name: do some cleanup
  hosts: localhost
  gather_facts: false

  tasks:
    - name: destroy test container
      docker_container:
        name: "{{ container_name }}"
        state: absent
</code>```

Which gives:

$ ansible-playbook playbook.yml

PLAY [spin-up container and add to inventory] *******************************

TASK [Deploy a dummy container] *********************************************
changed: [localhost]

TASK [store container name as a fact on localhost for later use in last play] *
ok: [localhost]

TASK [Add the created container to inventory] *******************************
changed: [localhost]

PLAY [do some stuff on container] *******************************************

TASK [Gathering Facts] ******************************************************
ok: [my_test_container]

TASK [show a gathered info from the container] ******************************
ok: [my_test_container] => {
    "ansible_os_family": "Debian"
}

TASK [test our template is deployable] **************************************
changed: [my_test_container]

TASK [get result back to check] *********************************************
ok: [my_test_container]

TASK [show result] **********************************************************
ok: [my_test_container] => {
    "msg": [
        "Dummy template",
        "Node name: 1608185a4e43",
        "Environment:",
        "GPG_KEY: A035C8C19219BA821ECEA86B64E628F8D684696D",
        "HOME: /root",
        "HOSTNAME: 1608185a4e43",
        "LANG: C.UTF-8",
        "PATH: /usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
        "PWD: /",
        "PYTHON_GET_PIP_SHA256: c518250e91a70d7b20cceb15272209a4ded2a0c263ae5776f129e0d9b5674309",
        "PYTHON_GET_PIP_URL: https://github.com/pypa/get-pip/raw/3cb8888cc2869620f57d5d2da64da38f516078c7/public/get-pip.py",
        "PYTHON_PIP_VERSION: 21.2.4",
        "PYTHON_SETUPTOOLS_VERSION: 57.5.0",
        "PYTHON_VERSION: 3.10.2",
        ""
    ]
}

PLAY [do some cleanup] ******************************************************

TASK [destroy test container] ***********************************************
changed: [localhost]

PLAY RECAP ******************************************************************
localhost:         ok=4    changed=3    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0
my_test_container: ok=5    changed=1    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0
```

1 docker plugin uses the docker cli to run commands. If you prefer to use the api directly, you can do the same thing with the docker-api plugin

2 Note that your target container will need to satisfy to ansible managed nodes requirements and have python installed

Body:
Important preliminary note: I urge you to read the comments from DavidMaze and β.εηοιτ.βε above regarding good practice to understand why you don't want to go through ansible in your specific case and you should not modify a running container.

Meanwhile, since there are other use cases (like testing ansible roles inside a docker container), I'll still answer the overall question hopping that all the above warnings were enough for you to use that information very wisely.

To start with, if you want to deploy and run your image with ansible, it should be done using the relevant docker_container module rather than calling shell.

Once this is done, ansible has a docker connection plugin that will let you interact with containers on your host 1. The idea is to have an entry in your inventory for the relevant container using the correctly configured connection. You can then use a normal play host loop with usual ansible tasks to reach your remote target container 2.

In my example below, I deploy an image and add it to the in-memory inventory in the same playbook using the add_host module. Those two actions can be done totally independently and there are several options to add your containers to an inventory among which the docker_containers dynamic inventory plugin.

I used the following test.j2 template for this test

Dummy template
Node name: {{ ansible_nodename }}
Environment:
{{ ansible_env | to_nice_yaml }}

This the demo playbook.yml:

---
- name: spin-up container and add to inventory
  hosts: localhost
  gather_facts: false

  vars:
    container_name: my_test_container

  tasks:
    - name: Deploy a dummy container
      docker_container:
        name: "{{ container_name }}"
        image: python:latest
        command: tail -f /dev/null
        state: started

    - name: store container name as a fact on localhost for later use in last play
      set_fact:
        container_name: "{{ container_name }}"

    - name: Add the created container to inventory
      add_host:
        name: "{{ container_name }}"
        groups:
          - docker_test
        ansible_connection: docker

- name: do some stuff on container
  hosts: docker_test

  tasks:
    - name: show a gathered info from the container
      debug:
        var: ansible_os_family

    - name: test our template is deployable
      template:
        src: test.j2
        dest: /test.txt

    - name: get result back to check
      slurp:
        path: /test.txt
      register: deploy_template

    - name: show result
      debug:
        msg: "{{ (deploy_template.content | b64decode).split('\n') }}"

    # Put here anything else that should target your container(s)

- name: do some cleanup
  hosts: localhost
  gather_facts: false

  tasks:
    - name: destroy test container
      docker_container:
        name: "{{ container_name }}"
        state: absent

Which gives:

$ ansible-playbook playbook.yml

PLAY [spin-up container and add to inventory] *******************************

TASK [Deploy a dummy container] *********************************************
changed: [localhost]

TASK [store container name as a fact on localhost for later use in last play] *
ok: [localhost]

TASK [Add the created container to inventory] *******************************
changed: [localhost]

PLAY [do some stuff on container] *******************************************

TASK [Gathering Facts] ******************************************************
ok: [my_test_container]

TASK [show a gathered info from the container] ******************************
ok: [my_test_container] => {
    "ansible_os_family": "Debian"
}

TASK [test our template is deployable] **************************************
changed: [my_test_container]

TASK [get result back to check] *********************************************
ok: [my_test_container]

TASK [show result] **********************************************************
ok: [my_test_container] => {
    "msg": [
        "Dummy template",
        "Node name: 1608185a4e43",
        "Environment:",
        "GPG_KEY: A035C8C19219BA821ECEA86B64E628F8D684696D",
        "HOME: /root",
        "HOSTNAME: 1608185a4e43",
        "LANG: C.UTF-8",
        "PATH: /usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
        "PWD: /",
        "PYTHON_GET_PIP_SHA256: c518250e91a70d7b20cceb15272209a4ded2a0c263ae5776f129e0d9b5674309",
        "PYTHON_GET_PIP_URL: https://github.com/pypa/get-pip/raw/3cb8888cc2869620f57d5d2da64da38f516078c7/public/get-pip.py",
        "PYTHON_PIP_VERSION: 21.2.4",
        "PYTHON_SETUPTOOLS_VERSION: 57.5.0",
        "PYTHON_VERSION: 3.10.2",
        ""
    ]
}

PLAY [do some cleanup] ******************************************************

TASK [destroy test container] ***********************************************
changed: [localhost]

PLAY RECAP ******************************************************************
localhost:         ok=4    changed=3    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0
my_test_container: ok=5    changed=1    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0

1 docker plugin uses the docker cli to run commands. If you prefer to use the api directly, you can do the same thing with the docker-api plugin

2 Note that your target container will need to satisfy to ansible managed nodes requirements and have python installed


问:
LINQ to SQL eager loading with conditions
I'm trying to learn LINQ to SQL and i've found out about the LoadWith function. All the examples i've found will load all records from the table you specify in the LoadWith function e.g.

```<code>var dlo = new DataLoadOptions();
dlo.LoadWith<Blog>(b => b.Posts);
this.LoadOptions = dlo;
</code>```

What I would like to know is if it's possible to load in this example only the last blog post?

I've tried

```<code>dlo.LoadWith<Blog>(b => b.Posts.Max());
</code>```

But it doesn't like that syntax.

答: If you only want the last post then I suspect that simply querying for that post specifically will be more efficient using lazy loading than forcing an 'eager' load this way.</p>

OwnerDisplayName: Alex

ContentLicense: CC BY-SA 2.5

Body:
I'm trying to learn LINQ to SQL and i've found out about the LoadWith function. All the examples i've found will load all records from the table you specify in the LoadWith function e.g.

var dlo = new DataLoadOptions();
dlo.LoadWith<Blog>(b => b.Posts);
this.LoadOptions = dlo;

What I would like to know is if it's possible to load in this example only the last blog post?

I've tried

dlo.LoadWith<Blog>(b => b.Posts.Max());

But it doesn't like that syntax.

OwnerDisplayName: Lazarus


问:
Discord.js DiscordAPIError: Two factor is require for this operation
I've been using this sudo command in my test server and it works well but when I tried to use it in another server, I keep getting the DiscordAPIError: Two factors are required for this operation error.

Any way on how to fix this?

```<code>const Discord = require('discord.js');
const { MessageEmbed } = require('discord.js');

module.exports = {
  name: 'sudo',
  description: 'sudo webhook',
  userpermissions: ['MANAGE_WEBHOOKS'],

  async run(client, message, args) {
    if (!args[1])
      return message.reply(
        'Please provide a message to send \n ```\n usages: sudo [mention] [text]```'
      );
    const member = message.mentions.members.first();
    if (!member) return message.reply('Please tag a user');
    message.channel
      .createWebhook(member.user.username, {
        avatar: member.user.displayAvatarURL({ dynamic: true }),
      })
      .then((webhook) => {
        webhook.send(args.slice(1).join(' '));
        setTimeout(() => {
          webhook.delete();
        }, 3000);
      });
  },
};
</code>```

答:
You need to enable two factor authentication on your own account for this action to work. Go into your user settings -> my account and click "Enable Two-Factor Auth". After following the steps you're prompted with everything should work fine.

https://support.discord.com/hc/en-us/articles/219576828-Setting-up-Two-Factor-Authentication

Body:
I've been using this sudo command in my test server and it works well but when I tried to use it in another server, I keep getting the DiscordAPIError: Two factors are required for this operation error.

Any way on how to fix this?

const Discord = require('discord.js');
const { MessageEmbed } = require('discord.js');

module.exports = {
  name: 'sudo',
  description: 'sudo webhook',
  userpermissions: ['MANAGE_WEBHOOKS'],

  async run(client, message, args) {
    if (!args[1])
      return message.reply(
        'Please provide a message to send \n ```\n usages: sudo [mention] [text]```'
      );
    const member = message.mentions.members.first();
    if (!member) return message.reply('Please tag a user');
    message.channel
      .createWebhook(member.user.username, {
        avatar: member.user.displayAvatarURL({ dynamic: true }),
      })
      .then((webhook) => {
        webhook.send(args.slice(1).join(' '));
        setTimeout(() => {
          webhook.delete();
        }, 3000);
      });
  },
};