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

The elements inherit CSS properties from their parent elements that’s all it is.

eg, sa we have an HTML like below

<div>
    <p>Hello world!</p>
</div>

We can just apply a text color to the div tag and it will be applied to the p tag as well since it inherits from the div tag

div{
color: blue;
}

Note: Browsers also have some default styles set for elements, e,g buttons,anchor tags have some default styles from browsers in that case the inheriting will not work and we will have to add the specific styles to the respective tags

CSS is parsed from top to bottom, i.e style that is written at the top will be overridden by the one being written below it if they have same specificity

Specifity decides which styles to apply, more specific the selectors are more priority the styles get and the one with the most specigicity is only applied while overiding the lower ones

1. Element Selector
2. Class selector
3. Id selector
4. !important keyword
5. Inline styles

above selector are listed from least specific to most specific, they can be combined together to create rules that are more specific

e.g

#text-id {
color: pink;
}

.text{
color: black;
}

In above even though .text rule is after #text-id one, the #text-id one will be applied since it has more specificity

note : do not use !important since it is hard to override them

note: Inline styles can not be overridden by CSS

Doodles I drew during meetings/calls

My code quality has improved a lot, one thing I learned since last 3 months of training at rtCamp is

If something works, we might believe that that is the way, only way to do it, but it is just only single way that worked at that time.

it may or may not work in future, even it may not be the right way to do things, we should always find multiple ways to do something and then choose one of them.

Always question can it be done better?

It is an Open Source E-commerce Plugin that we can use to create a full fledged online store and customize it to our liking.

It can also integrate with payment gateways, promotions emails, tax calculations and many things.

You have to give it a try, install on local to fully know its potential, it also has REST API support so we can use it as back-end and integrate with any other front-end of our choice

Why?

Why write tests, well its a silly question to ask. We test the code we write to make sure that it works or not, if our code doesn’t work of what use it will be. Is that the only aspect of testing? to make sure it works.

Writing Tests gives us confidence in our code, we can refactor the code as much as we want and if we do something wrong tests are there to know.

How?

We can test by multiple ways, one of the most sane idea is to run the code manually and check the output if it is what we expected or not, but what if the checklist is too long, we will not be able to do it manually.

We can use tools, that test our code, we have to write the test obviously but the tools automate all the other things, like running the test, generating report, check how much code is covered by tests etc.

Unit Testing

Unit of a software is like a smallest part that can be tested, for example a function that takes some input and gives some output, it is a unit.

We run the tests against this units individually, in isolation to catch any errors early.

PHP Unit is a framework for testing PHP code, basically it allows us to write code that tests our code!

To install it we can get the PHAR (PHP Archive) and make it executable

pratik@Pratiks-MacBook-Air ~ % wget -O phpunit https://phar.phpunit.de/phpunit-10.phar

chmod +x phpunit

We can also install it per project using composer

final class EmailTest extends TestCase
{
    public function testCanBeCreatedFromValidEmail(): void
    {
        $string = 'user@example.com';

        $email = Email::fromString($string);

        $this->assertSame($string, $email->asString());
    }

    public function testCannotBeCreatedFromInvalidEmail(): void
    {
        $this->expectException(InvalidArgumentException::class);

        Email::fromString('invalid');
    }
}