CSS positions: Relative , Sticky, Absolute , Fixed , Static

Hey Guys, 

I spent  little more time to learn  CSS positions and below is an example you can try to understand. 

Try below one : 

    <div class="parent"> 

<p  style = "position:relative;left:10%;border:2px black solid;"> I am relative </p>

<!-- Occupy the position after above image and align towards left by 10 % .  --> 

<p  style = "position:static;left:10%;border:2px yellow solid;">  I am Static </p>

  <!-- Does not affect any change in left property . its static and align to its normal position --> . 

<p  style = "position:fixed; left:10%;bottom:0%;border:2px blue solid;">  I am fixed </p> 

 <!-- It takes document as its parent and align item based on document level.  Does not change even when u scroll --> . 

<p  style = "position:absolute; left:30%; top : 50%;border:2px red solid;">  I am absolute </p> 

 <!-- Takes the container as its parent. Nearest ancestor and act like fixed. --> . 

<p  style = "position:sticky; left:10%; top:0%; border:2px green solid;">  I am sticky </p> 

 <!-- A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). --> . 

 <p> FILL IN HERE WITH SOME EXTRA DATA TO SEE STICKY effect . Sticky Effect works if you have scrollable data. </p>

    </div>

PHP + LARAVEL + Xdebug + VSCODE + DEBUGGER + mac OS

 Hey there, 

i have recently tried running the debugger in VSCODE for my LARAVEL project.

Step 1: PHP 

•  I have installed PHP via home brew. 

                 brew install php@7.4 

• If you want you to unlink your existing PHP and link new the version we have installed then run this. ex: You have had 7.3 with your system and we have installed 7.4 . So, to use 7.4

                     brew unlink php@7.3

            brew link php@7.4

• Now, if u run php -v on terminal . you will see php 7.4 version.   

Step  2: XDEBUG

• Ensure we have xdebug installed if not then kindly install it from xdebug for mac OS
• once installation is successful then u can see xdebug on php -v command output
• 
  
  
  
  

Step 3: Install  PHP debug in VSCODE from here PHP DEBUG

Step 4: Enabling XDEBUG debug mode and step debugging. 

• Go to your php ini file and add below config. You can find the ini file at below path in mac.  
• nano /usr/local/etc/php/7.4/php.ini     

• Paste below in ini file.                                                          [Xdebug]

  zend_extension="xdebug.so"

  xdebug.mode=debug

  xdebug.client_port=9001

  xdebug.log="/tmp/xdebug.log"

  xdebug.client_host="127.0.0.1"

  xdebug.start_with_request=yes    

Step 5: Run & Debug in VSCODE

•        Go to VSCODE and left side select run & debug option. select PHP configuration and paste below in .vscode/launch.json 

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"name": "Listen for XDebug",

"type": "php",

"request": "launch",

"port": 9001,

"pathMappings": {"<path to your Laravel codebase>": "${workspaceFolder}"},

"ignore": [

"**/vendor/**/*.php"

]

},

{

"name": "Launch currently open script",

"type": "php",

"request": "launch",

"program": "${file}",

"cwd": "${fileDirname}",

"port": 8000

}

]

}

Step 6: Run your laravel project  which runs on port 8000 or your desired port

          php artisan serve 

Step 7:  Things to keep in mind

• we have kept the port no 9001 for xdebug configuration . Both in VSCODE launch.json and php.ini file. 
• we have our laravel server running at port no: 8000
• So xdebug listens on port 9001 and laravel on 8000. whenever u hit localhost:8000 ---> xdebug will listen and start step debugging.

Angular Testing Observables (making async tests to sync )

RxJS marble testing

 getTestScheduler().flush(); // flush the observables

fakeAsync()

The fakeAsync() function enables a linear coding style by running the test body in a special fakeAsync test zone. The test body appears to be synchronous. There is no nested syntax (like a Promise.then()) to disrupt the flow of control.

     We use tick() to advance the virtual clock of the setTimeout and other observables values and there by making it sync instead of waiting for given time out and waiting on service call to give observable. 

waitForAsync() 

It hides some asynchronous boilerplate by arranging for the tester's code to run in a special async test zone

But the test's asynchronous nature is revealed by the call to fixture.whenStable(), which breaks the linear flow of control.

In short to make the async tests to sync and advance the async queue 

Rxjs marble testing --> getTestScheduler().flush();

fakeAsync() --> tick()

waitForAsync()  -->  fixture.whenStable()

Reference:

https://angular.io/guide/testing-components-scenarios