This microcontroller is crazy small, but has only 8 pins ( still enough to do a lot of crazy shit)

I saw this board while watching Mr. Robot S04E10: 410 Gone, and I wanted to try it. Yes, it can be used as a rubber ducky for HID attack testing, but I have no idea how to do it, so let’s start small with trying to blink the onboard LED

We will be using Arduino IDE for this. First, put this in “additional boards manager URLS”

For this, go to file-> Preferences and paste the following

http://digistump.com/package_digistump_index.json

Click ok, and then open Tools ->Board->Boards Manager and search for “digistump AVR Boards” and install it.

Then, from tools->Boards select digispark default

void setup() {
    pinMode(0, OUTPUT);
    pinMode(0, OUTPUT);
}
void loop() {
    digitalWrite(0, HIGH);
    digitalWrite(1, HIGH);
    delay(1000);
    digitalWrite(0, LOW);
    digitalWrite(1, LOW);
    delay(1000);
}

Make sure to unplug the board before clicking on upload. It will ask to plug it in when you click on upload

This will write the blink sketch in the attiny85, and the onboard LED Will start blinking.

CSS position property defines how the element is positioned wrt to the document flow

There are following types of positions available

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

Static is what all elements are positioned by default, statically positioned elements follow the normal document flow

Relative positioned elements also follow the document flow same as static but it enables properties like top,bottom,left,right which we rarely use

Absolute position elements are not considered part of the document flow and changing their placement does not affect the other elements in the page

Absolute also allows for properties top,bottom,right,left which define the spacing of the elements from parent with one imp thing that the parent of the absolutely positioned element should be relatively positioned, if not then it takes the upper parent that is relatively positioned or the whole page itself

Fixed positioned, as it describes makes the element fixed to the page, i.e the element does not go out of view even when scrolling. (eg. top nav bars of the site that stay visible even when scrolling or the annoying ad banner that stay in the place even when scrolling )

Only pain point here is that this takes the element out of the document flow, so say for eg we want to put something above our nav menu, making it Fixed will not work, that’s when the sticky position is used

Sticky position is combination of both relative and fixed, i.e sticky element will act like a relatively positioned one when in view but as we scroll down it will become fixed, when it becomes sticky can be handled by the top property, it also again becomes relative when its parent is not longer in view, awesome right?

Z index and stacking order

When we position elements such that they stack on top of each other

eg.

 <div class="one">
            1
        </div>
        <div class="two">
           2
        </div>
        <div class="three">
           3
        </div>

If we have not specified any z index they stack as they appear in the document one by one

We can use the z-index property to change this stacking order

eg.

This will make the box 2 stack on top of 1 and 3

.two{
    border: 1px solid ;
    background-color: cyan;
    height: 200px;
    width: 200px;
    position: relative;
    margin: -20px;
    left: 100px;
    z-index: 2;
}

Higher the value of z-index more on top the element will be, we can use this to stack the elements differently and create layouts and or components that look appealing

Stacking Context

stacking context determined how the elements layer on each other, eg, a div positioned as relative and z-index other than auto will create a stacking context for all the elements inside it so the elements will share the stacking context with their siblings but the parent div itself will be in its parents stacking context as single unit, i.e even if we increase z-index of the elements inside the div more than the parent of the div, they will still be layered below the sibling of parent if parent’s z index is lesser ( ahh so confusing )

eg, say we have 2 sibling divs

Now both of these are relative positioned, but as you can see, even if we increase the z-index of the children of context1 , they do not layer above the context2 since the stacking context restricts their layering to their own context

To bring the context1 up we have to increase z-index of the context1 to be greater than context2

All elements in the CSS are represented as box , box has following properties

1. The content
2. Padding around the content
3. Border
4. Margin

The height and width CSS properties take up only the content height and width but the computed height and width of the element will be including the padding and border

This behavior can be disabled by using box-sizing: border-box CSS rule, which will make the CSS height width properties take the padding and border also in the consideration by default.

Margin Collapsing:

Margin property is used to add spacing between two or more elements, it is outside the border and does not increase height/width of the element

When two elenents adjacnet to each other have margin, then their margin is collapsed and only the margin with bugger value is applied

eg. below the box1 has margin 70px , and box2 has100px, we’d think the space between them would be 170px but it is only 100px due to margin collapsing

Combinators are used to explain the relationship between the selectors ( they do not modify the specificity though )

Types of combinators

1. Descendant ( space )
2. Child ( > )
3. General sibling ( ~ )
4. Adjacent sibling ( + )

Descendant :

We can write styles for all descendant of the parent element using empty space as the combinator

eg.

<div id="container">
    <p>hello 1</p>
    <p> hello 2</p>
    <div>
        <p>Hello 3</p>
</div>

To target all p tags in the parent #container div we can use empty space combinator

#container p{
    color: yellow;
}

Above will apply the color yellow to all p tags

Child:

the child combinator ( > ) will select only the direct children

eg.

#container > p{
    color: yellow;
}

Above will only select the first 2 p tags which are direct children of the container div and not the 3rd p tag that is inside another div

Note: All children are descendants bit not all descendants are children

General Sibling:

General siblings are selected using ~ symbol, this will select all siblings of the selected element.

e.g

<body>
    <div id="container">
    <p>hello 1</p>
    <p> hello 2</p>
    <div>
        <p>Hello 3</p>
    </div>
    <p>hello 4</p>
    <p>hello 5</p>
</body>

In above example, paragraph 4 and 5 are siblings of the container since they have same parent : body, we can select those using ~

#container ~ p{
    color : green;
}

Adjacent Sibling :

Adjacent sibling is selected using + symbol , it select only the next sibling and not others.

eg.

#container + p{
    color : green;
}

Above will only select the paragraph 4 since it is adjacent sibling of container and not 5