Alpine, Slim, Stretch, Buster, Jessie, Bullseye — What are the Differences in Docker Images

 https://medium.com/swlh/alpine-slim-stretch-buster-jessie-bullseye-bookworm-what-are-the-differences-in-docker-62171ed4531d

stretch/buster/jessie

Images tagged with stretch, buster, or jessie are codenames for different Debian releases. At the time of this writing, the stable Debian release is 10.4, and its codename is “Buster.” “Stretch” was the codename for all version 9 variations, and “Jessie” was the codename for all version 8 variations.

Future versions in development, but not yet stable, are “Bullseye” and “Bookworm.” You may start seeing these tags in the list of image versions on DockerHub.

Choose one of these images if your code is compatible with a specific version of the Debian operating system. You rarely will need to use older versions of Debian when starting a new project.

-slim

The slim image is a paired down version of the full image. This image generally only installs the minimal packages needed to run your particular tool. In the case of python, that’s the minimum packages to run python and the same for node.js.

By leaving out lesser-used tools, the image is smaller. Use this image if you have space constraints and do not need the full version.

But be sure to test thoroughly when using this image! If you run into unexplained errors, try switching to the full image and see if that resolves it.

-alpine

Alpine images are based on the Alpine Linux Project, which is an operating system that was built specifically for use inside of containers. For a long time, these were the most popular image variations due to their tiny size.

However, some teams are moving away from alpine because these images can cause compatibility issues that are hard to debug. Specifically, if using python images, some wheels are built to be compatible with Debian and will need to be recompiled to work with an Apline-based image.

The main reason to use an Alpine image is to make your resulting image as small as possible. The base image will be smaller than 5MB. The python base image (adding python to the base alpine image) is currently 78.9MB. That’s still very small.

using multiple dockerfile for docker compose yml

 https://www.baeldung.com/ops/multiple-dockerfiles

* please note for DockerFile one folder up will not work,

for example COPY ../app /app, for that case better to put one dockerFile outside inside of in a folder like below 

docker-compose.yml
docker
├── frontend
│   └── Dockerfile
└── backend
    └── Dockerfile

While the most basic usage of the docker-compose file usually means using images from a repository, we can also provide directory paths for build:

version: '3'
services:
  frontend:
    build: ./docker/frontend
    ports:
     - "8081:8081"
  backend:
    build: ./docker/backend
    ports:
      - "8080:8080"

update openssl in docker container

 1) better to create a spearate dockerFile (https://www.baeldung.com/ops/multiple-dockerfiles)

and do the following  in the dockerfile:

From httpd:latest

# current httpd image uses debain bullseye, adding https to the source list cause http connection is blocked

RUN printf "deb https://deb.debian.org/debian bullseye main \n deb https://deb.debian.org/debian bullseye-updates main" > /etc/apt/sources.list

# update openSSL to latest version

RUN apt-get update && apt-get -y install openssl

docker container unable to do apt-get , deb.debian.org connection time out

 This might be due to the fact the particular VM/server does not allow http connection,

https://stackoverflow.com/questions/66342539/unable-to-build-docker-image-due-to-connection-timeout-error

1) find out current debian release name in the system (“Buster.” “Stretch”)

https://medium.com/swlh/alpine-slim-stretch-buster-jessie-bullseye-bookworm-what-are-the-differences-in-docker-62171ed4531d

2) add https debian release end point to apt source list

its better to create a new dockerFile to do so 

RUN printf "deb https://deb.debian.org/debian bullseye main \n deb https://deb.debian.org/debian bullseye-updates main" > /etc/apt/sources.list

debian desitrbution source list example :

https://linuxize.com/post/how-to-upgrade-debian-10-to-debian-11/

AG-Grid master detail dynamically set master panel height based on detail sizes, and detail grid auto height to fit entire panel

 Detial Grid set autoHeight to fit entire panel :

https://www.ag-grid.com/javascript-data-grid/master-detail-height/

detail grid Option:

        gridOptions.rowHeight = this.ROW_HEIGHT;

        gridOptions.gridAutoHeight = true;

Master grid dynamic detail grid panel height

https://www.ag-grid.com/angular-data-grid/row-height/

master grid Option:

        gridOptions.getRowHeight = (params) => {

            if (params.node && params.node.detail) {

                // calculated in detail grid

                return 0;

            }

            return 73;

        };

detail grid 

    agInit(params01: any): void {

        this.masterParams = params01;

        this.masterRowIndex = params01.rowIndex;

        this.rowData = params01.data.sns;

    }

            

this.gridDataRendered.subscribe((next: boolean) => {

              // Update parent's row height

                setTimeout(() => {

                    this.masterParams.node.setRowHeight(

                        this.calculateParentRowHeight()

                    );

                    this.masterParams.api.onRowHeightChanged();

                }, 0);

                // Listen on the filterChanged event

                this.params.api.addEventListener(

                    "filterChanged",

                    ($event: FilterChangedEvent) => {

                        // Update parent's row height

                        setTimeout(() => {

                            this.masterParams.node.setRowHeight(

                                this.calculateParentRowHeight()

                            );

                            this.masterParams.api.onRowHeightChanged();

                        }, 0);

                    }

                );

..............................

}

    private calculateParentRowHeight(): number {

        // NOTE: must have this to display properly

        const offset =

            this.masterParams.api.getSizesForCurrentTheme().headerHeight;

        const rowHeight = this.ROW_HEIGHT;

        let numRows = this.params.api.getDisplayedRowCount();

        return rowHeight * numRows + offset;

    }

Javascript shift right by 2 and left by 2

 https://stackoverflow.com/questions/16097271/shift-array-to-right-in-javascript

Using .concat() you're building a new Array, and replacing the old one. The problem with that is that if you have other references to the Array, they won't be updated, so they'll still hold the unshifted version.

To do a right shift, and actually mutate the existing Array, you can do this:

arr1.unshift.apply(arr1, arr1.splice(3,2));

---

The unshift() method is variadic, and .apply lets you pass multiple arguments stored in an Array-like collection.

So the .splice() mutates the Array by removing the last two, and returning them, and .unshift() mutates the Array by adding the ones returned by .splice() to the beginning.

---

The left shift would be rewritten similar to the right shift, since .push() is also variadic:

arr1.push.apply(arr1, arr1.splice(0,2));

slider with css and javascript example

 https://wildpotrocode.com/Blog/slider-with-arrows/slidertutorial.html

HTML

In our section container we’ll have 2 arrows and the slider.
Inside slider we have the boxes we want to display.
The last box has the class dummy, this box is acting as a right padding, since (for some mysterious reason) you can’t add padding-right in a scrollable div. But we can always fix it with an invisible element 😉

            
<section class="container" >
    <span id="left-arrow" class="arrow">‹</span>
    <span id="right-arrow" class="arrow">›</span>
        <div class="slider" id="slider">
            <div class="box"></div>
            <div class="box center"></div>
            <div class="box"></div>
            <div class="box dummy"><div>
            </div>
        </section>
<script src = "script.js"></script>
            
             

CSS

Styling our container: we will be messing around with margins and paddings so we'll need border box. And don't forget to set the main container's position to relative

         
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container{
    width: 100%;
    height: auto;
    position: relative;
         
       

Styling the arrows: Use z-index to set the arrows above the slider. And with position absolute you can set them to the sides and position them in the middle with right, left and bottom properties. Don’t forget transition if you want smooth opacity animation.
I also used text-align, line-height and font-size to scale an position the html codes I used for the arrows

         
.arrow{
    width: 30px;
    height: 30px;
    padding: 2px;
    position: absolute;
    bottom: calc(50% - 10px);
    z-index: 3;
    cursor: pointer;
    border-radius: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 30px;
    background-color: rgba(255, 255, 255, 0.58);
    transition: opacity 0.5s ease;
}
#left-arrow{
    left: calc(50% - 120px);
}
#right-arrow{
    right: calc(50% - 120px);
}       
         
       

Styling the slider:
Set left padding to 40% to have the boxes centered in the middel of your slider.
You need a padding-right too, but because that’s not possible, we use a “dummy” container to act as right padding. Set the dummy width to 70% and remember to remove scroll-snap-align property. We want to ignore this element, it's just a padding!
Use scroll-snap-type proximity. This property makes the slide sort of “grab” on to the next element if the scroll is getting close to it
Hide the scrollbar, we will use arrows ✨

         
.slider{
    width: 100%;
    height: auto
    padding-left: 40%;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden ;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}
.slider::-webkit-scrollbar{
        display: none;
}
.dummy{
    min-width: 70%;
    scroll-snap-align: none;
    visibility: hidden;
}
         
       

Styling the boxes:

• It is very important to use scroll-snap-align since it will keep out boxes centered.
• Min-width can be set to whatever you want, but set it!
• Transition and opacity to have boxes highlighted when showing in the middle
• #center id because the box in the middel should have opacity 1 to begin with

         
.box{
    /* scroll-snap-align is very important
    , it will help us figure out where is the center of every box*/
    scroll-snap-align: center;
    width: 250px;
    /* Important!! min-width tells my slider it can not
        resize my elements to fit, it has to do scroll*/
    min-width: 250px;
    height: 300px;
    margin: 15px;
    position: relative;
    z-index: 1;
    border-radius:  8px;
    box-shadow: 2px 4px 8px rgb(89 73 100);
    background-color: white;
    transition: opacity 0.3s ease-in;
    opacity: 0.5;
}
#center{
    opacity: 1;
}


         
       

JavaScript

Now let’s get on to the good stuff. This is what we are doing:

1. Move slider left and right when arrow click.
2. Hide left arrow when showing first element and hide right arrow when showing last element.
3. Find out which element is showing every time we scroll.
4. Make sure it work’s when window is resized.

Remember:

• PosicionInicial is the scroll position we get by default, where the first element in our silde is centered. We get this position because we used scroll-snap-aling: center back in our CSS. This will help us figure out where is the center located in the other items in our slide. And it will keep our elements centered and pretty

         
window.addEventListener("resize", function(){
    scrolling();
});

var slider = document.getElementById("slider");
var box = document.getElementsByClassName("box");

// Size is gonna be width + box margin
var size = box[1].clientWidth + 30;



//This is the scroll position where the first element in our silde is centered
var posicionInicial = slider.scrollLeft;

class BoxElement {
    constructor(size, element){
        this.size = size;
        this.element = element;
    }
    isCenter() {
        this.element.style.opacity = "1"
    }
    isNotCenter(){
        this.element.style.opacity = "0.5";
    }
}
var box_middle = new BoxElement(posicionInicial + size, box[1]);
var box_left = new BoxElement(posicionInicial, box[0]);
var box_right = new BoxElement(box_middle.size+ size, box[2]);


function hide(arrow){
    arrow.style.opacity = "0";
}
function show(arrow){
    arrow.style.opacity = "1";
}
var arrow_left = document.getElementById("left-arrow");
var arrow_right = document.getElementById("right-arrow");


//I want the middel box to be shown in the middle by default
slider.scrollLeft = size;

//movement with arrows
arrow_left.addEventListener("click", function(){
    slider.scrollLeft -= size

});

arrow_right.addEventListener("click", function(){
    slider.scrollLeft += size;
});


/* I listen to scroll event in the slide and detect when each box is center
*/
slider.addEventListener("scroll", scrolling);
function scrolling(){
let position = slider.scrollLeft;
console.log(position);
    if(position < box_middle.size - 30) //I use 30 as a movement umbral
    {
        hide(arrow_left);
        show(arrow_right);
        box_left.isCenter();
        box_middle.isNotCenter();
        box_right.isNotCenter();
    }
    else if(position > box_middle.size + 30 ){

        hide(arrow_right);
        show(arrow_left);
        box_right.isCenter();
        box_middle.isNotCenter();
        box_left.isNotCenter();
    }
    else{
        show(arrow_right);
        show(arrow_left);
        box_middle.isCenter();
        box_right.isNotCenter();
        box_left.isNotCenter();
    }

}
         
       

If you have more than 3 boxes in your slide, I guess you can have a condition where you detect when is the first and the last element showing and other cases should all show arrows left and right :D