1632196386
Accelerating Docker Desktop's New Features
In November 2019 Docker announced our re-focusing on the needs of developers. Specifically, we set out to simplify the complexity of modern application development to help developers get their ideas from code to cloud as quickly and securely as possible. We’ve made a lot of progress since delivering against our public roadmap, including shipping Docker Desktop support for Apple M1 silicon, providing image vulnerability scanning for individuals and teams, delivering more trusted content via Docker Verified Publisher partnerships with more than 100 ISVs, and a whole lot more.
What is GEEK
Buddha Community
1595249460
Docker Explained: Docker Architecture | Docker Registries
Following the second video about Docker basics, in this video, I explain Docker architecture and explain the different building blocks of the docker engine; docker client, API, Docker Daemon. I also explain what a docker registry is and I finish the video with a demo explaining and illustrating how to use Docker hub
In this video lesson you will learn:
- What is Docker Host
- What is Docker Engine
- Learn about Docker Architecture
- Learn about Docker client and Docker Daemon
- Docker Hub and Registries
- Simple demo to understand using images from registries
#docker #docker hub #docker host #docker engine #docker architecture #api
1623316050
Volume Management, Compose v2, Skipping Updates, and more in Docker Desktop 3.4
We are excited to announce the release of Docker Desktop 3.4.
This release includes several improvements to Docker Desktop, including our new Volume Management interface, the Compose v2 roll-out, and changes to how to Skip an update to Docker Desktop based on your feedback.
Volume Management
Have you wanted a way to more easily manage and explore your volumes?
In this release we’re introducing a new capability in Docker Desktop that helps you to create and delete volumes from Desktop’s Dashboard as well as to see which ones are In Use.
#products #docker #docker compose #docker desktop
1625984220
Docker Dev Environments and more in Desktop 3.5
Docker Desktop 3.5 is here and we can’t wait for you to try it!
We’ve introduced some exciting new features including improvements to the Volume Management interface, a tech preview of Docker Dev Environments, and enhancements to Compose V2.
Easily Manage Files in your Volumes
Volumes can quickly take up local disk storage and without an easy way to see which ones are being used or their contents, it can be hard to free up space. This is why in the release of Docker Desktop 3.5 we’ve made it even easier for Pro and Team users to explore the directories and files inside of a volume. We’ve added in the modified date, kind, and size of files so that you can quickly identify what is taking up all that space and decide if you can part with it.
Docker Dev Environments
In 3.5 we released a technical preview of Docker Dev Environments. Check out our blog to learn more about why we built this and how it works.
#docker desktop #docker dev environments #docker
1663559281
To-do List App with HTML, CSS and JavaScript
Learn how to create a to-do list app with local storage using HTML, CSS and JavaScript. Build a Todo list application with HTML, CSS and JavaScript. Learn the basics to JavaScript along with some more advanced features such as LocalStorage for saving data to the browser.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List With Local Storage</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="new-task">
<input type="text" placeholder="Enter The Task Here..." />
<button id="push">Add</button>
</div>
<div id="tasks"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #0b87ff;
}
.container {
width: 90%;
max-width: 34em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
#new-task {
position: relative;
background-color: #ffffff;
padding: 1.8em 1.25em;
border-radius: 0.3em;
box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1em;
}
#new-task input {
font-family: "Poppins", sans-serif;
font-size: 1em;
border: none;
border-bottom: 2px solid #d1d3d4;
padding: 0.8em 0.5em;
color: #111111;
font-weight: 500;
}
#new-task input:focus {
outline: none;
border-color: #0b87ff;
}
#new-task button {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 1em;
background-color: #0b87ff;
color: #ffffff;
outline: none;
border: none;
border-radius: 0.3em;
cursor: pointer;
}
#tasks {
background-color: #ffffff;
position: relative;
padding: 1.8em 1.25em;
margin-top: 3.8em;
width: 100%;
box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
border-radius: 0.6em;
}
.task {
background-color: #ffffff;
padding: 0.3em 0.6em;
margin-top: 0.6em;
display: flex;
align-items: center;
border-bottom: 2px solid #d1d3d4;
cursor: pointer;
}
.task span {
font-family: "Poppins", sans-serif;
font-size: 0.9em;
font-weight: 400;
}
.task button {
color: #ffffff;
padding: 0.8em 0;
width: 2.8em;
border-radius: 0.3em;
border: none;
outline: none;
cursor: pointer;
}
.delete {
background-color: #fb3b3b;
}
.edit {
background-color: #0b87ff;
margin-left: auto;
margin-right: 3em;
}
.completed {
text-decoration: line-through;
}Javascript:
//Initial References
const newTaskInput = document.querySelector("#new-task input");
const tasksDiv = document.querySelector("#tasks");
let deleteTasks, editTasks, tasks;
let updateNote = "";
let count;
//Function on window load
window.onload = () => {
updateNote = "";
count = Object.keys(localStorage).length;
displayTasks();
};
//Function to Display The Tasks
const displayTasks = () => {
if (Object.keys(localStorage).length > 0) {
tasksDiv.style.display = "inline-block";
} else {
tasksDiv.style.display = "none";
}
//Clear the tasks
tasksDiv.innerHTML = "";
//Fetch All The Keys in local storage
let tasks = Object.keys(localStorage);
tasks = tasks.sort();
for (let key of tasks) {
let classValue = "";
//Get all values
let value = localStorage.getItem(key);
let taskInnerDiv = document.createElement("div");
taskInnerDiv.classList.add("task");
taskInnerDiv.setAttribute("id", key);
taskInnerDiv.innerHTML = `<span id="taskname">${key.split("_")[1]}</span>`;
//localstorage would store boolean as string so we parse it to boolean back
let editButton = document.createElement("button");
editButton.classList.add("edit");
editButton.innerHTML = `<i class="fa-solid fa-pen-to-square"></i>`;
if (!JSON.parse(value)) {
editButton.style.visibility = "visible";
} else {
editButton.style.visibility = "hidden";
taskInnerDiv.classList.add("completed");
}
taskInnerDiv.appendChild(editButton);
taskInnerDiv.innerHTML += `<button class="delete"><i class="fa-solid fa-trash"></i></button>`;
tasksDiv.appendChild(taskInnerDiv);
}
//tasks completed
tasks = document.querySelectorAll(".task");
tasks.forEach((element, index) => {
element.onclick = () => {
//local storage update
if (element.classList.contains("completed")) {
updateStorage(element.id.split("_")[0], element.innerText, false);
} else {
updateStorage(element.id.split("_")[0], element.innerText, true);
}
};
});
//Edit Tasks
editTasks = document.getElementsByClassName("edit");
Array.from(editTasks).forEach((element, index) => {
element.addEventListener("click", (e) => {
//Stop propogation to outer elements (if removed when we click delete eventually rhw click will move to parent)
e.stopPropagation();
//disable other edit buttons when one task is being edited
disableButtons(true);
//update input value and remove div
let parent = element.parentElement;
newTaskInput.value = parent.querySelector("#taskname").innerText;
//set updateNote to the task that is being edited
updateNote = parent.id;
//remove task
parent.remove();
});
});
//Delete Tasks
deleteTasks = document.getElementsByClassName("delete");
Array.from(deleteTasks).forEach((element, index) => {
element.addEventListener("click", (e) => {
e.stopPropagation();
//Delete from local storage and remove div
let parent = element.parentElement;
removeTask(parent.id);
parent.remove();
count -= 1;
});
});
};
//Disable Edit Button
const disableButtons = (bool) => {
let editButtons = document.getElementsByClassName("edit");
Array.from(editButtons).forEach((element) => {
element.disabled = bool;
});
};
//Remove Task from local storage
const removeTask = (taskValue) => {
localStorage.removeItem(taskValue);
displayTasks();
};
//Add tasks to local storage
const updateStorage = (index, taskValue, completed) => {
localStorage.setItem(`${index}_${taskValue}`, completed);
displayTasks();
};
//Function To Add New Task
document.querySelector("#push").addEventListener("click", () => {
//Enable the edit button
disableButtons(false);
if (newTaskInput.value.length == 0) {
alert("Please Enter A Task");
} else {
//Store locally and display from local storage
if (updateNote == "") {
//new task
updateStorage(count, newTaskInput.value, false);
} else {
//update task
let existingCount = updateNote.split("_")[0];
removeTask(updateNote);
updateStorage(existingCount, newTaskInput.value, false);
updateNote = "";
}
count += 1;
newTaskInput.value = "";
}
});Related Videos
Build a Todo list app in HTML, CSS & JavaScript | JavaScript for Beginners tutorial
Build a Todo List App in HTML, CSS & JavaScript with LocalStorage | JavaScript for Beginners
To Do List using HTML CSS JavaScript | To Do List JavaScript
Create A Todo List App in HTML CSS & JavaScript | Todo App in JavaScript
#html #css #javascript
1619564940
Docker Architecture Overview & Docker Components [For Beginners]
If you have recently come across the world of containers, it’s probably not a bad idea to understand the underlying elements that work together to offer containerisation benefits. But before that, there’s a question that you may ask. What problem do containers solve?
After building an application in a typical development lifecycle, the developer sends it to the tester for testing purposes. However, since the development and testing environments are different, the code fails to work.
Now, predominantly, there are two solutions to this – either you use a Virtual Machine or a containerised environment such as Docker. In the good old times, organisations used to deploy VMs for running multiple applications.
So, why did they started adopting containerisation over VMs? In this article, we will provide detailed explanations of all such questions.
#docker containers #docker engine #docker #docker architecture