ContainerGrid

containergrid

With grid we can do some pretty amazing things. We can easily place items in the center of containers. We can stack items without positioning. We can create complex layouts quickly and with ease. And, we can even animate to unknown heights which used to be near impossible without using Javascript. So, in this post, we’ll look at a few of my favorite grid-provided abilities. Alright, let’s get to it! CSS https://youtu.be/QIn-hPJNZK0?embedable=true Placing Grid Items in the Center Positioning items in the center of a container vertically used to be surprisingly difficult. With Flexbox it got a lot easier. And now with grid, we can do it in just two lines of code. Let’s look at an example. Let’s say we want to place a blue square in the center of a box with a border. Well, all we need to do is add to the outer container with the border. display:grid; div {
  ...
  display: grid;
} And then, we can just add place items, center. div {
  ...
  place-items: center;
} It’s just that easy. Stacking Multiple Items in the Center With CSS grid, we can even add another item, in the same cell and center it without any positioning. Here, we’ll add an after pseudo-element. We’ll make it a purple circle. And, we'll simply place each of these items in the first cell with and properties: grid-column grid-row div::before,
div::after {
  ...
  grid-column: 1;
  grid-row: 1;
} We’ll see that they are now stacked on top of each other in the center. This is a slick way to do this type of thing for sure. Here's the final working example: https://codepen.io/brianmtreese/pen/JjwLwwz?embedable=true CSS Layout Without Positioning or Negative Margins Along these lines, grid allows us to pretty easily pull of some layouts that used to require more complicated positioning or negative margins. For example, this style of layout is fairly common. But how do you get this purple bar in the background here with the content on top? With grid, this is easy. The first thing we need to do is set the container to . display:grid; .container {
  ...
  display: grid;
} Then, we need to set up our rows, so we add our property. We’ll make the first row , this will be the transparent area above the purple bar. We’ll make our second row . This is the row that our purple bar will go in. And the last row will just be auto sized to the remaining content. grid-template-rows 3em 12em This will be the transparent area underneath the purple bar. .container {
  ...
  grid-template-rows: 3em 12em auto;
} Now we need to place both of these items into a single grid column. We can do this with the property. We will start at the first column and end on the last column.When we use -1, this means the column will always extend to the end of the last column even if we were to add more columns. grid-column .container::before {
  ...
  grid-column: 1 / -1;
}

.content {
  ...
  grid-column: 1 / -1;
} Ok, so now both items will sit in the same grid column, let’s place the purple bar. Since the first row is reserved for the area above the bar, we will be placing it on grid-row two. .container::before {
  ...
  grid-row: 2;
} Ok, now our content is going to span all three rows. So we’ll start on grid-row 1, and in this case, since we have a specific number of rows defined, like our grid column, we can add a value of -1. However, it’s important to note that this would not work if we hadn’t explicitly defined our grid rows and we dealing with a dynamic number of rows. But for this example, with the explicit rows, this works out perfectly. .content {
  ...
  grid-row: 1 / -1;
} No positioning or negative margins are needed. Here's the final working example: https://codepen.io/brianmtreese/pen/WNLzLBE?embedable=true CSS Transition to an Unknown Height This final example is probably my favorite. You can now easily transition to an unknown height. Now, you could kind of, so of, almost pull this off by transitioning a before grid was available but it was always a little strange because you needed to specify a really large arbitrary value to animate to. Well, not anymore. Since the fractional unit is a transitional property, we can simply use it now. max-height So, here in this example, we'll have a button that toggles our content. It does this by toggling an expanded class on our container with JavaScript. To show and hide this content, we are switching between when it’s collapsed and the when the expanded class is added. 0fr 1fr Well, since is an animatable property, we can simply add a transition to ease our property when it changes. fr grid-template-rows .content {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-rows: min-content 0fr min-content;
  transition: grid-template-rows 0.5s;
}

.expanded {
  grid-template-rows: min-content 1fr min-content;
} And now, when we click the button we can see that it’s simply easing between an unknown height and a known height. Check out the working demo: https://codepen.io/brianmtreese/pen/GRPxzJj?embedable=true So hopefully these tips help to ease some of your day-to-day workflow working with CSS. If you found it helpful, or heck, even if you hated it, let me know with a comment below. Until next time, thanks for reading! Also published here.

Things You Didn’t Know CSS Grid Could Do

I've been playing around with container queries and so far, there is only one best practice that I would recommend. . Whenever you use container queries, make sure you wrap the element with a container element So your HTML should look like this: <div class="container"> 
  <div class="component"> … <div> 
<div> This container should not be the element that creates a grid in your layout. So don’t do this. <div class='grid container'> 
  <div class="component"> … <div> 
<div> Do this instead <div class="grid"> 
  <div class="container"> 
    <div class="component"> … </div>
  </div> 
</div> Now, all three code examples above assume you’re using an unnamed container, which is sufficient for most use cases. .container {
  container-type: inline-size;
} There’s a reason why we need to do this Most of the time, I would have preferred the second structure (where the is also the ) because I will be able to reduce the soup in the HTML. grid container <div> After all, who doesn’t love clean code? But beyond the obvious benefit (more semantic-looking HTML structure), there’s a reason why we have to use the third HTML structure which I recommend. 
<div class="grid">
  <div class="container">
    <div class="component">…</div>
  </div>
</div> If you use the second structure, you won’t be able to use container query units These units will likely be inaccurate. Consider this. If you use the second HTML structure, your will be the container. .grid Since your is the container, container query units will be based on the height and width .grid of the . This is probably not what you want, because it can produce unintended (huge) sizes like the one you see below. .grid In this example, I set the image to — which means 25% of the width of the container. 25cqi But because the is the container, draws from the width of the (which is almost the same as the browser viewport in this case). So produced an oversized image. .grid cqi .grid cqi These blunders can be prevented if we used the HTML structure I recommend — because container query units will draw its width from the grid item instead. Here’s the corrected version of what I was trying to create: That’s it! This is really straightforward and I hope this article helps you prevent making some of the blunders I made when testing out container queries 🙂 As to the real reason why I made this blunder… well I was simply trying to see if I could use to automatically make the parent element a container. :has And from there, I encountered this error! . Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂. By the way, this article is originally written on my blog

The Best Practice for Container Queries: Place Them in a Parent Element

Introduction is an open source JavaScript library for building user interfaces in WEB and mobile applications. Currently, React is at version 17 and Meta (formerly Facebook) is the main maintainer of the project. React is an easy to implement, adaptable authentication and authorization platform. Auth0 Prerequisites Before you start, you need to install and configure the tools: git Node.js and npm IDE (e.g. or ) Visual Studio Code WebStorm Getting started Create and configure the account on the Auth0 Let's create the account. Access the site and do steps 1 and 9 of the post to create and configure the account on the Auth0. 1. https://auth0.com/ Authentication using the Auth0 to an Angular application In step 7 of the post above, fill in the field with the URL , fill in the fields , with the URL and click on the button . 2. Allowed Callback URLs http://localhost:3000/react-auth0/profile Allowed Logout URLs Allowed Web Origins http://localhost:3000/react-auth0 Save Changes Create the React application Let's create the application with the React base structure using the tool. 1. create-react-app npx create-react-app react-auth0 --template typescript

Creating a new React app in /home/rodrigokamada/Development/React/react-auth0.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1369 packages in 26s

169 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 38 packages, and changed 1 package in 5s

169 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1407 packages in 2s

169 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created react-auth0 at /home/rodrigokamada/Development/React/react-auth0
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-auth0
  npm start

Happy hacking! Install and configure the Material UI CSS framework. Do step 2 of the post . 2. Adding the Material UI CSS framework to an React application Install the and libraries. 3. @auth0/auth0-react react-router-dom npm install @auth0/auth0-react react-router-dom Create the component. 4. SignIn touch src/SignIn.tsx Add the lines in the file as below. 5. src/SignIn.tsx import { useAuth0 } from '@auth0/auth0-react'
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';

function SignIn() {
  const { loginWithRedirect } = useAuth0();

  return (
    <main style={{ padding: '1rem 0' }}>
      <Grid container>
        <Grid container justifyContent="center">
          <Button variant="contained" onClick={loginWithRedirect}>Sign In</Button>
        </Grid>
      </Grid>
    </main>
  );
}

export default SignIn; Create the component. 6. Profile touch src/Profile.tsx Add the lines in the file as below. 7. src/Profile.tsx import { useAuth0 } from '@auth0/auth0-react'
import Avatar from '@mui/material/Avatar';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';

function Profile() {
  const { isAuthenticated, user } = useAuth0();

  return (
    <main style={{ padding: '1rem 0' }}>
      {isAuthenticated &&
      <Grid container>
        <Grid container justifyContent="center">
          <Grid sx={{ m: 1 }}>
            <Avatar alt={user?.email} src={user?.picture} sx={{ width: 75, height: 75 }} />
          </Grid>
          <Grid item xs={12} sx={{ m: 1 }}>
            <TextField id="email" label="Email" value={user?.email} variant="outlined" fullWidth />
          </Grid>
          <Grid item xs={12} sx={{ m: 1 }}>
            <TextField id="nickname" label="Nickname" value={user?.nickname} variant="outlined" fullWidth />
          </Grid>
        </Grid>
      </Grid>
      }
    </main>
  );
}

export default Profile; Change the file. Import the component and configure the parameter with the Auth0 domain and the parameter with the Auth0 Client ID as below. 8. src/index.tsx Auth0Provider domain clientId import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider } from '@auth0/auth0-react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain="dev-5tf99p7c.us.auth0.com"
      clientId="GBPB42qhMWCtvrwGmYxvm5cbHXU68nzG"
      redirectUri={window.location.origin + '/react-auth0/profile'}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById('root')
); Change the file. Add the menu and the routes in the file as below. 9. src/App.tsx src/Profile.tsx import React from 'react';
import { BrowserRouter, Link as RouterLink, Route, Routes } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Profile from './Profile';
import SignIn from './SignIn';
import './App.css';

function App() {
  const { isAuthenticated, logout } = useAuth0();

  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);

  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorElNav(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  return (
    <Container maxWidth="xl" sx={{ p: '0px !important' }}>
      <BrowserRouter basename="/react-auth0">
        <AppBar position="static">
          <Container maxWidth="xl">
            <Toolbar disableGutters>
              <Typography
                variant="h6"
                noWrap
                component="div"
                sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
              >
                React Auth0
              </Typography>
              <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
                <IconButton
                  size="large"
                  aria-label="account of current user"
                  aria-controls="menu-appbar"
                  aria-haspopup="true"
                  onClick={handleOpenNavMenu}
                  color="inherit"
                >
                  <MenuIcon />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={anchorElNav}
                  anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left',
                  }}
                  keepMounted
                  transformOrigin={{
                    vertical: 'top',
                    horizontal: 'left',
                  }}
                  open={Boolean(anchorElNav)}
                  onClose={handleCloseNavMenu}
                  sx={{
                    display: { xs: 'block', md: 'none' },
                  }}
                >
                  <MenuItem onClick={(e) => {
                      e.preventDefault();
                      window.location.href = 'https://rodrigokamada.github.io/angular-auth0/';
                    }}
                  >
                    <Typography textAlign="center">
                      <Button>Angular Application</Button>
                    </Typography>
                  </MenuItem>
                  {!isAuthenticated &&
                  <MenuItem onClick={handleCloseNavMenu}>
                    <Typography textAlign="center">
                      <Button component={RouterLink} to="/signIn">Sign In</Button>
                    </Typography>
                  </MenuItem>
                  }
                  {isAuthenticated &&
                  <MenuItem onClick={handleCloseNavMenu}>
                    <Typography textAlign="center">
                      <Button component={RouterLink} to="/profile">Profile</Button>
                    </Typography>
                  </MenuItem>
                  }
                  {isAuthenticated &&
                  <MenuItem onClick={() => {
                      handleCloseNavMenu();
                      logout({ returnTo: window.location.origin + '/react-auth0' });
                    }}
                  >
                    <Typography textAlign="center">
                      <Button >Sign Out</Button>
                    </Typography>
                  </MenuItem>
                  }
                </Menu>
              </Box>
              <Typography
                variant="h6"
                noWrap
                component="div"
                sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
              >
                React Auth0
              </Typography>
              <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                <Button
                  onClick={(e) => {
                    e.preventDefault();
                    window.location.href = 'https://rodrigokamada.github.io/angular-auth0/';
                  }}
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  Angular Application
                </Button>
                {!isAuthenticated &&
                <Button
                  component={RouterLink}
                  to="/signIn"
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  Sign In
                </Button>
                }
                {isAuthenticated &&
                <Button
                  component={RouterLink}
                  to="/profile"
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  Profile
                </Button>
                }
                {isAuthenticated &&
                <Button
                  onClick={() => {
                    logout({ returnTo: window.location.origin + '/react-auth0' });
                  }}
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  Sign Out
                </Button>
                }
              </Box>
            </Toolbar>
          </Container>
        </AppBar>
        <Routes>
          <Route path="/profile" element={<Profile />} />
          <Route path="/signIn" element={<SignIn />} />
          <Route path="*" element={<SignIn />} />
        </Routes>
      </BrowserRouter>
    </Container>
  );
}

export default App; Run the application with the command below. 10. npm start

Compiled successfully!

You can now view react-auth0 in the browser.

  http://localhost:3000/react-auth0

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/js/*.js 2.79 MiB
  asset static/js/bundle.js 2.79 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.93 KiB [emitted] 1 related asset
asset index.html 1.74 KiB [emitted]
asset asset-manifest.json 518 bytes [emitted]
cached modules 2.66 MiB (javascript) 32.5 KiB (runtime) [cached] 602 modules
webpack 5.69.1 compiled successfully in 1275 ms Ready! Access the URL and check if the application is working. See the application working on and . 11. http://localhost:300/react-auth0 GitHub Pages Stackblitz Testing the application sign in Let's test the application sign in. Access the URL and click on the button . 1. http://localhost:3000/react-auth0 Sign in Click on the button . 2. Sign up Fill in the fields , and click on the button . 3. Email Address Password Continue Click on the button . 4. Accept You will be redirected to the application. 5. Check the registered email. 6. Ready! We test the application sign in and profile view. Auth0 documentation is available at . 7. https://auth0.com/docs The application repository is available at . https://github.com/rodrigokamada/react-auth0 This tutorial was posted on my in portuguese. blog

Authentication Using the Auth0 to a React Application

Through time has been common to compare things that can do similar functions, for the sake of electing a champion, something that is better, be it reason "y" or reason "x", and specially to be on the "right" side. If you think that you haven't done something like that maybe these topics will remind you of something, "XBOX or PlayStation?", "Android or iOS?", "Java or .Net?" and the list can go on, sometimes making a fuss about which one is better is pointless. As I started to learn more and more about Web Developments i came across two wonderful properties and , these two are used to create awesome designs, when I first learned about them I instinctively felt more liking to Flexbox and to be honest for a short period of time i thought that was better that Grid, some other members of my team at liked more Grid, we were wrong trying to get one of the two as the best. Flexbox Grid Microverse Note: this article is for Junior web developers, there is not going to be a lot of explanation for the Flexbox or Grid properties used, for a more "tutorial" minded article I would recommend this one for Flexbox and this one for Grid Flexbox Flexbox is a one-dimensional layout system, content-based, it helps us to distribute the space between the elements even with setting how much an element will grow or shrink in comparison to the other elements in the same container, one of the best options to add responsiveness at your web page. Great source to learn more about Flexbox Grid Grid is a two-dimensional layout system, it is more complex than Flexbox in certain ways, it can be really helpful to create complex layouts, with Grid we need to define how much columns and rows will it have. Awesome guide to use Grid! What can they do? Both of them are layout systems, technically we can do the same with both of them, but, in some cases Grid or Flexbox will be easier to use Create a layout For the first comparison we will do the next layout with Grid and flexbox One bar with 100% height at left One bar at the top-right corner with 50% height and 75% width Two boxes at the bottom-right cornet with 50% height and 32.5% of width each one Flexbox With Flexbox is not impossible to create a layout, but, we need to take into account that we can only distribute the space for each element in one direction per container (column or row). Codepen example! HTML for Flexbox < = > div class "container" < = > div class "left-bar" </ > div < = > div class "main-content" < = > div class "main-content-top" </ > div < = > div class "main-content-bottom" < = > div class "main-content-bottom-left" </ > div < = > div class "main-content-bottom-right" </ > div </ > div </ > div </ > div Now we will apply the styling class container { : ; : ; : flex;
} .container width 100% height 300px display .- With this, we make every direct child a flex item, we will distribute the space between the and the classes display: flex "left-bar" "main-content" class left-bar { : ; : green;
} .left-bar flex 1 background-color .- With this we make the element receive the specified proportion of free space, it will be taken as 1/n, "n" is based in the total sum of all the specified proportions in al the child elements of the class flex: 1 class: main-content { : ; : flex; : column;
} .main-content flex 3 display flex-direction .- since we are already taking 1 portion with "left-bar" means that with this set proportion we will be receiving 3/4 of the free space. flex: 3 .- now we make every direct child of the container flex items, with this we will distribute the space between the bar at the top and the two elements at the bottom. display: flex .- the elements will be arranged vertically and the free space will be distributed in the same direction flex-direction: column class main-content-top { : ; : blue;
} .main-content-top flex 1 background-color .- We take 1 proportion of the container free space flex: 1 class main-content-bottom { : ; : flex;
} .main-content-bottom flex 1 display .- we take 1 proportion of the free space flex: 1 .- we make the child a flex element, to distribute the space between the two elements at bottom display: flex class main-content-bottom-left { : ; : red;
} .main-content-bottom-left flex 1 background-color .- We set proportion of free space that is going to take flex: 1 class main-content-bottom-right { : ; : orange;
} .main-content-bottom-right flex 1 background-color .- We set proportion of free space that is going to take flex: 1 Grid With grid is easier to create layouts, we can divide the container in cells and assign how much row and column cells will it take Codepen example! HTML for Grid < = > div class "container" < = > div class "left-bar" </ > div < = > div class "main-content-top" </ > div < = > div class "main-content-bottom-left" </ > div < = > div class "main-content-bottom-right" </ > div </ > div CSS with Grid class container .- We make the container a grid container display: grid .- with this we set how much columns is going to have the container, in this case, "repeat" creates 6 columns of 1 fraction of the width of the container grid-template-columns .- This property creates a number of rows in the container, in this case we create 4 rows of 1 fraction grid-template-rows class left-bar { : span ; : span ; : red;
} .left-bar grid-column 2 grid-row 4 background-color .- we make the container to span 2 spaces of the total columns grid-column: span 2 .- we make the container to span 4 spaces of the total rows gird-row: span 4 class main-content-top { : ; : span ; : span ; : green;
} .main-content-top grid-column-start 3 grid-column 4 grid-row 2 background-color .- we make the container to span 4 spaces of the total columns grid-column: span 4 .- we make the container to span 4 spaces of the total rows gird-row: span 2 class main-content-bottom-left { : ; : ; : span ; : span ; : blue;
} .main-content-bottom-left grid-column-start 3 grid-row-start 2 grid-column 2 grid-row 2 background-color .- we make the container to span 2 spaces of the total columns grid-column: span 2 .- we make the container to span 2 spaces of the total rows grid-row: span 2 "main-content-bottom-right" class { : ; : ; : span ; : span ; : orange;
} .main-content-bottom-right grid-column-start 5 grid-row-start 2 grid-column 2 grid-row 2 background-color .- we make the container to span 2 spaces of the total columns grid-column: span 2 .- we make the container to span 2 spaces of the total rows grid-row: span 2 With Grid we don't have to make as much groups of containers as we may have to make with Flexbox, also it makes easier to move around the containers in certain breakpoints allowing us to change height and width of any element while maintaining the distribution of space of all the other elements. in this type of scenarios personally i think that it's better grid. Align elements within a container One of the most tedious and common thing to do personaly, is aligning elements, and even more when the number of elements that is shown is based on Account permissions, For this test we will use the same HTML file Item 1 Item 2 Item 3 Something at middle Something at bottom element 1 element 2 elementelementelement 3 element 4 < = > div class "container" < = > div class "left-bar" < > ul < > li </ > li < > li </ > li < > li </ > li </ > ul < > p </ > p < > p </ > p </ > div < = > div class "main-content-top" < > p </ > p < > p </ > p < > p </ > p < > p </ > p </ > div < = > div class "main-content-bottom-left" </ > div < = > div class "main-content-bottom-right" </ > div </ > div We will use basically the same CSS for Flexbox and Grid, with some changes that will be added below { : ; : ; : grid; : (6, 1fr); : (4, 1fr);
} { : span ; : span ; : red; : space-between; : white;
} { : ; : span ; : span ; : green; : space-between; : center; : white;
} { : ; : ; : span ; : span ; : blue;
} { : ; : ; : span ; : span ; : orange;
} .container width 100% height 300px display grid-template-columns repeat grid-template-rows repeat .left-bar grid-column 2 grid-row 4 background-color justify-content color .main-content-top grid-column-start 3 grid-column 4 grid-row 2 background-color justify-content align-items color .main-content-bottom-left grid-column-start 3 grid-row-start 2 grid-column 2 grid-row 2 background-color .main-content-bottom-right grid-column-start 5 grid-row-start 2 grid-column 2 grid-row 2 background-color Flexbox Aligning elements within containers it's easy with flexbox but we have to keep in mind that we can only distribute the space in one direction at the time Codepen example! HTML In the HTML we will only add the class and to the p elements inside the container. "flex-1" "flex-2" "main-content-top" element 1 element 2 elementelementelement 3 element 4 < = > div class "main-content-top" < = > p class "flex-1" </ > p < = > p class "flex-1" </ > p < = > p class "flex-2" </ > p < = > p class "flex-1" </ > p </ > div CSS class left-bar { : span ; : span ; : red; : flex; : column; : space-between; : white;
} .left-bar grid-column 2 grid-row 4 background-color display flex-direction justify-content color .- we make the container a flex container display: flex .- the elements distribute the space so they can separate equally through all the container justify-content: space-between .- set the direction in which the elements will be aligned to vertical flex-direction: column class main-content-top { : ; : span ; : span ; : green; : flex; : wrap; : space-between; : center; : white;
} .main-content-top grid-column-start 3 grid-column 4 grid-row 2 background-color display flex-wrap justify-content align-items color .- Makes container a flex container display: flex .- If there is not enough space for the elements, those will be moved to a line below flex-wrap: wrap classes flex-"n" { : ;
} { : ;
} .flex-1 flex 1 .flex-2 flex 2 These two classes are created to be able to assign more space in case the element is too big, this is perfect when we need to handle dynamic added elements Grid We already saw how helpful it is to have the possibility of adding columns and rows of any given width or height we want, but, how will this works with aligning elements? Codepen example! HTML The HTML will remain as it was presented at top CSS class left-bar { : span ; : span ; : red; : grid; : (3, 1fr); : white;
} .left-bar grid-column 2 grid-row 4 background-color display grid-template-rows repeat color .- We start by making our container a greed container display: grid .- We set the columns as 1fr and not with auto so each element has the same height grid-template-rows: repeat(3, 1fr) class main-content-top { : span ; : span ; : green; : grid; : fr fr fr fr; : center;
} .main-content-top grid-column 6 grid-row 2 background-color display grid-template-columns 1 1 2 1 align-items .- Make container a grid container display: grid .- We cant create four columns of the same height because one of the elements is bigger than the other three. grid-template-columns: 1fr 1fr 2fr 1fr Which one is better? When it comes to designing layouts it's way easier to work with Grid, we just have to divide our container with as much columns and rows we want to and set the child elements how much columns and rows do we want them to take, with Flexbox it can be more time consuming and larger HTML files since we have to create multiple containers to distribute space in different axis, in this type of cases without doubt Grid is the winner. When we have to align elements inside a container it's way easier with Flexbox, with grid we have to set how much rows or columns will have the container, even if Grid has options as implicit rows, it doesn't give us the possibility of setting dynamically the space for each column, with Flexbox in the other hand the space will be distributed between all the elements, this helps a lot with dynamic content. We can accept that there is not a better or easier technology, it depends in what we want to build, Grid works for most of the cases when we need to create layouts and Flexbox for aligning elements. Using both in the right place can help us save a lot of time and maybe the tediousness of having to modify the HTML and CSS in the future if a new feature or element is required to be shown.

Grid vs. Flexbox: An Introduction to the Useless Battle

A lot of newbies to web development, don’t get it from the first time working with CSS grid. And that is the reason why I decided to write this article, besides that, I also want to give a brief intro to CSS grid and try to explain to people who are new to CSS, how to work with this amazing feature in the simplest way possible. So let’s start with the question of why the CSS grid exists in the first place and what it is actually? What really is CSS Grid? Usually, when it comes to developing web sites I actually used to draw mock-ups on papers. So here is a mock-up that I was trying to do in different system views ( I mean by system view: Desktop view, Tablet view, and mobile view ). As you can notice easily, that in each view type there are some changes in orders of the elements inside the web page. For example, we see that in the mobile view we have an image then maybe the title after that the meta content and finally, we have the content. But on the tablet view, we see that the title and the meta content come first before the image. Before the CSS grid, if we want to make this kind of layout we will definitely need to use some JavaScript, to reorder the DOM and create that order that we wanted for each view type. nowadays this is easily doable with CSS Grid and with the most cleaned HTML code ever. nowadays you don’t need to think about nesting div’s in order to float elements or displaying them in specific positions, you can easily create a grid system layout and then position your items in it as you wish wherever you want and whenever you want. Here is a definition of a CSS grid system: CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row). A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is layout-first while Flexbox’s approach is content-first. Enough of speaking about why and what is a Grid system. And let’s see how to work with the CSS grid System. How to work with CSS Grid? From my point of view, the best and easiest way to work with the CSS grid is to use the magical grid property but before jumping into that, we need to understand first how the CSS grid is structured and get familiar with some technical words. Grid systems usually have a grid container and grid items. A grid container is the HTML element that has a display property of grid “display: grid”. and a grid item is every element that a direct descendant of that element. “grid-template-areas”. Terminology: There are a few bits of terminology that are introduced by the Grid Layout specification. I’ve explained them here as they will make the examples easier to follow. Grid Line Grid Lines are the lines that make up the grid. These can be horizontal or vertical. We can refer to them by number, or by name. Grid Tracks A Grid Track is a space between two Grid Lines, either horizontal or vertical. Grid Cell A Grid Cell is a space between 4 Grid Lines. So it is the smallest unit on our grid that is available for us to place an item into. Conceptually it is just like a table cell. Grid Area A Grid Area is any area on the Grid bound by four grid lines. It may contain a number of Grid Cells. After these simple terminologies let’s see how we can work with this amazing layout. Here is how: let’s return back to our magical property that I have mentioned before. so to start with the CSS grid. we use “ ”, and we define our columns and rows, then after that, we use that magical property to draw our areas as shown in the code below : display: grid .container { : grid;
     gird-template-columns: repeat( , fr);
     grid-template-rows: repeat( , fr) px;
     grid-template-areas:
          “header header header header header header”
          “main main main . sidebar sidebar”
          “main main main . sidebar sidebar”
          “ . footer footer footer footer . “;
} display 6 1 3 1 100 With this property, we are drawing the grid areas by specifying for each grid cell what area it will take. “I know, I know I got you, some of these properties are new to you I will explain don’t worry “ so is a CSS grid function, that allows us to instead of repeating many values of columns and rows sizes. to just type in repeat n times that value. in other terms, it makes sure that we don’t repeat our self’s, so instead of typing “300px 300px 300px” we can type “repeat(3, 300px)”.There is a new unit of measure in CSS introduced with CSS grid called fraction ( fr ), this unit allows us to share space based on the extra space. Here is a YouTube video that explains it. repeat() Let’s continue, so in grid-template-areas we kind of have defined some areas that we will be used later by the grid items in order to align there self’s in them. Now let’s see how a grid item should look like. .header {
     gird-area: header;
}    
.main {
      grid-area: main;
}
... Now, what if I want to change the order in the mobile version I need only to add this media query with this code in it : @media only screen and (max-width: px) {
     .container {
          gird-template-columns: fr;
         grid-template-areas:
            “header”
            “sidebar”
            “main
            “footer“;
} 700 1 Summary That’s all friends. I hope you’ve enjoyed this article and learned from my experience. If you can like this post and share it, I will appreciate applause and sharing :-) You can contact or follow me: My Twitter Facebook LinkedIn Some valuable external resources : https://cssgrid.io/ https://css-tricks.com/snippets/css/complete-guide-grid/ https://gridbyexample.com/ https://cssgridgarden.com/

A Beginner's Guide to The CSS Grid System

Docker has become a cornerstone of modern application development. By containerizing applications, Docker streamlines deployment simplifies collaboration and promotes portability. This blog post delves into some fundamental Docker commands you’ll encounter frequently. Listing Docker Containers# sudo docker container ls -a --no-trunc List all containers (including exited ones) without truncating names# sudo docker container ls -a --no-trunc
sudo docker container ls -a List all containers (running and stopped)# sudo docker container ls -a
sudo docker container ls -a -q List only container IDs# sudo docker container ls -a -q
sudo docker container ls -l List containers with detailed information# sudo docker container ls -l
sudo docker container ls -a --filter "" List containers based on filters (example: –filter status=running)# sudo docker container ls -a --filter "" Running a Container# sudo docker container run centos:7 ping 127.0.0.1 -c 10 Run a single instance of centos:7 image and execute ping command# sudo docker container run centos:7 ping 127.0.0.1 -c 10 Viewing Container Information# sudo docker ps List all running containers# sudo docker ps
sudo docker ps -a List all containers (running and stopped) with ps# sudo docker ps -a Starting and Stopping Containers# sudo docker container run -d centos:7 ping 127.0.0.1 Run a container in detached mode (background)# sudo docker container run -d centos:7 ping 127.0.0.1
sudo docker ps Verify the container is running (after running in detached mode)# sudo docker ps Inspecting Container Logs# sudo docker container logs [containerid] View logs of a specific container (replace [containerid] with actual ID)# sudo docker container logs [containerid]
sudo docker container logs --tail [containerid] View only the most recent logs of a container (replace [containerid] with actual ID)# sudo docker container logs --tail [containerid]
sudo docker container logs --tail 10 [containerid]
sudo docker container logs -f [containerid] Follow container logs in real-time (replace [containerid] with actual ID)# sudo docker container logs -f [containerid] Additional Commands# sudo docker container start [containerid]: Starts a stopped container.
sudo docker container stop [containerid]: Stops a running container.
sudo docker container rm [containerid]: Removes a container. Conclusion# This blog post provides a brief overview of essential Docker commands. By mastering these commands, you’ll be well on your way to effectively managing containers and building robust applications with Docker. Note: Replace [containerid] with the actual ID of the container whenever applicable in the commands. Also published . here

Fundamental Docker Commands You Should Know

Docker has become a cornerstone in the modern software development landscape. It empowers developers to package and run applications in a consistent and portable manner, irrespective of the underlying infrastructure. This guide serves as a gentle introduction to Docker, delving into the essential commands that will kickstart your journey into the world of containers. 1. Verifying Docker Installation:# The first step is to verify that is installed on your system. Run the following command: Docker sudo docker --version This command displays the installed Docker version. 2. Running the “Hello World” Application:# To experience the magic of Docker firsthand, let’s run the “hello-world” application: sudo docker run hello-world This command fetches the “hello-world” image from Docker Hub and executes it, displaying a simple message on your console. 3. Listing Running Containers:# Docker allows you to manage multiple containers simultaneously. To view a list of all running containers, use the following command: sudo docker ps This command displays a table with information about each running container, including its ID, image name, status, and ports. 4. Launching an Interactive Container:# One of Docker’s key features is the ability to run applications in an isolated environment. To experience this, let’s launch an interactive container based on the Ubuntu image: sudo docker run -it ubuntu bash This command not only starts the container but also provides you with a terminal inside the container, allowing you to execute commands and interact with the system as if it were a regular machine. 5. Searching for Images:# Docker Hub, a public registry, hosts a vast collection of images. You can search for images by name, description, or other criteria using the following command: sudo docker search ubuntu This command searches for images containing the keyword “ubuntu” and displays a list of relevant results. 6. Running a Command Inside a Container:# Often, you may want to run specific commands within a container. To achieve this, you can combine the run command with the -it flag and specify the desired command: sudo docker run -it ubuntu bash
sudo apt-get update This example updates the package list inside the Ubuntu container. 7. Diving Deeper with docker info:# For a comprehensive overview of your Docker environment, use the info command: sudo docker info This command provides detailed information about the Docker daemon, including its configuration, network settings, and storage options. 8. Exploring All Containers:# By default, docker ps only lists running containers. To view all containers, including those that have stopped, use the -a flag: sudo docker ps
sudo docker ps -a The first command displays only running containers, while the second command shows both running and stopped containers. 9. Alternative Listing Formats:# Docker provides various options for customizing the output of the docker ps command. The -l flag allows you to specify the desired format, such as JSON or table: sudo docker container ls
sudo docker container ls -a The container ls command is an alias for docker ps. The first command lists all running containers in a table format, while the second command, with the -a flag, lists all containers (running and stopped) in a table format. 10. Mastering Container Management:# Now that you’ve gained familiarity with basic commands let’s delve into container management, covering operations such as starting, stopping, removing, and restarting containers. 11. Initiating a Container:# To start a container, use the run command with the -it flag for an interactive session: sudo docker run -it centos bash This command starts a container based on the CentOS image and provides you with a terminal inside the container. 12. Halting a Container:# To stop a running container, use the stop command: sudo docker stop <container_id> Replace <container_id> with the ID of the container you want to stop. 13. Removing a Container:# Once you’re done with a container, you can remove it using the rm command: sudo docker rm <container_id> This command removes the specified container from your system. 14. Restarting a Container:# To restart a stopped container, use the restart command: sudo docker restart <container_id> This command restarts. 15. Running a CentOS Container:# sudo docker container run -it centos:7 bash sudo: Grants root privileges for container operations. Docker container run: Creates a new Docker container. -it: Allocates a pseudo-terminal (interactive shell) for interacting with the container. centos:7: Specifies the Docker image to use (CentOS version 7). bash: Launches a Bash shell within the container. 16. System Update:# sudo yum -y update sudo: Again, for root privileges (package management often requires them). Yum: I am the package manager for RPM-based systems like CentOS. -y: Automatically confirms any prompts during the update process (use with caution in production environments). Update: Updates system packages to their latest versions. 17. Listing Directory Contents:# ls -l ls: Lists files and directories. -l: Provides detailed information in a long format (including permissions, owner, group, size, and timestamps). 18. Creating a File:# echo "we are here" > example.org echo: Prints text to the terminal or a file. “we are here”: The text to be written. : Redirects the output to a file (creates example.org in this case) 19. Verifying File Creation:# ls -l Lists the directory contents again, showing the newly created example.org. 20. Viewing File Contents:# cat example.org cat: Displays the contents of a file. example.org: The file to display. 21. Exiting the Container:# exit Terminates the interactive shell session within the container. 22. Listing Running Containers:# sudo docker ps sudo: For root privileges. docker ps: Lists currently running Docker containers. 23. Listing All Containers (Including Stopped Ones):# sudo docker ps -a -a: Shows all containers, regardless of their running state. 24. Running Another Container:# sudo docker container run -it centos:7 bash Re-runs the container creation command from step 1. 25. Exiting the Second Container:# exit Terminates the shell session within the second container 26. Listing All Containers Again:# sudo docker ps -a Verifies both containers are listed. 27. Starting a Stopped Container:# sudo docker container start [containerid] start: Attempts to start a stopped container. [containerid]: Replace this with the actual ID of the container you want to start (obtainable from docker ps -a). 28. Verifying the Started Container:# sudo docker ps Checks if the previously stopped container is now listed as running. 29. Inspecting Processes Within a Container:# sudo docker container exec [containerid] ps -ef exec: Executes a command within a running container. [containerid]: The ID of the container to access. ps -ef: Lists all processes running inside the container (similar to ps -aux on Linux). 30. Interactive Access to the Container:# sudo docker container exec -it [containerid] bash -it: Allocates a pseudo-terminal for interactive interaction. Provides access to the Bash shell within the specified container, allowing you to execute further commands. 31. Verifying File Creation (Inside the Container):# ls -l Lists directory contents, showing example.org 32. Viewing File Contents (Inside the Container):# cat example.org Displays the contents of example.org created earlier. 33. Remember:# Replace [containerid] with the actual container ID in steps 13, 15, and 16. Use docker ps -a to view all containers, including stopped ones. Also published here.

Docker Essentials: A Beginner's Guide to Containerization Commands

Unlock the power of Kali Linux on Docker networks by adding a GUI back to the container and level up information gathering with anonymized web scraping powered by Python, Selenium, and Tor Browser. As a DevOps Engineer, I have both shipped, and enabled other Engineers to ship, many hundreds of thousands of containers. I use Continuous Delivery and a variety of orchestration methods:  Kubernetes, Lambda Containers on AWS, Elastic Container Service (ECS) backed by both Elastic Compute Cloud(EC2) and Fargate. Containers are useful for custom build systems, automated deployments, vulnerability scanning, research purposes, data analytics, machine learning, legacy software archival, local development, and web scraping. In this guide I will go over the steps I went through to add a GUI to the official using Xvfb and a VNC server. The code I discuss here is published in the open source repository, and is continuously delivered to for general use. Finally, in Part 2 of this series, everything in the containers will be put to the test. I will use a custom Python script, Pytest, and Selenium to automate the Tor Browser instance and gather data from the web. Kali Linux container from DockerHub kalilinux-xvfb Docker Hub Container Networks Part of the motivation behind having Kali Linux in a container is to gain visibility into the private network space created by the host machine for containers. The default setup from Docker Desktop is to use a NAT network. Unless the port(s) are bound to the host machine, with , that service will not be accessible from the host. docker run -p The Software Here are added summary sections with links for each of the following software packages: Kali Linux Docker Desktop Tor Browser Tor Browser Launcher Xvfb Selenium Additional links for software I used: Xfce 4 Tight VNC Server OpenSSH Server and Python3 Pip3 Geckodriver Kali Linux Kali Linux is a Debian-based Linux distribution aimed at advanced Penetration Testing and Security Auditing. 1 I chose Kali Linux for the sheer amount of security focused tools that are available. The Kali Linux team provides a Docker image that is updated regularly. Much of the required software is available to the Kali Linux Docker image and I will be using the package manager to install them. Docker Desktop is a framework for running containers locally. Containers are a way of packaging operating system and application state in a reusable operating system image. Additional resources are available on the . Docker Desktop Docker website Containers and virtual machines have similar resource isolation and allocation benefits, but function differently because containers virtualize the operating system instead of hardware. 2 Since Docker containers are more lightweight than virtual machines, I favor them heavily in my development efforts. Long term, this state can be stored as a small text file and is a lot easier to track changes over time with git and similar tools. The ability to derive an image again from a text file is powerful. However, it is entirely possible for a Dockerfile to fall into disrepair over time and could fail to build at a later date. Much like any other Operating System, and Infrastructure as Code, it is important to keep everything up to date. An alternative to Docker would be to use a Virtual Machine, or a bare metal installation. However, I believe containers are the perfect testbed for running ephemeral web crawlers because they are easy to provision and cleanup. I can run many containers on a single machine,  in parallel, that can be started and stopped almost instantly. Then whenever I require additional isolation this whole setup can be run from inside a virtual machine as well. Tor Browser The Onion Router (Tor) is a global network of computers that route traffic through a series of encrypted hops. This allows for a user to browse the internet somewhat anonymously, and also allows for a user to access websites that are only available on the Tor Network. is a heavily configured version of Firefox with a focus on privacy and security. It can use the Tor Network out of the box. Tor Browser is included in many Linux operating systems and makes starting a web browser on the Tor Network extremely easily. torbrowser-launcher Selenium is a tool for automating web browsers. I went with Python in this example, but there are many languages and tools available. Selenium I will be using Selenium to automate this Tor Browser on the Tor Network. I am  attempting to take advantage of the security conscious browser's existing config to limit sharing of information to targets. I will be able to clean up the containers runtime states by stopping them. The resulting WebDriver session will have a random IP address vended through Tor, making it a very powerful tool for web scraping. Xvfb The XOrg component can be used to simulate a screen to the X window system. I will then use this screen to start an X server in the container. This emulation technique is not particularly fast, and graphics heavy applications will benefit from a GPU. Xvfb Overview of the Files The Dockerfiles should build on any Linux, macOS, or Windows distribution that can run Docker. I have tested this on Docker Desktop using an Intel processor. There is an ARM variant for the official Kalilinux base container. I would appreciate feedback from anyone that tries running this on ARM. Dockerfile TorBrowser.Dockerfile TorBrowser-root.Dockerfile startx-once.sh start-vnc-server-once.sh ssh-keys.sh torrc .github/workflows/main.yml Dockerfile This is the Dockerfile that I used to build the base image. I have added a few comments to explain what each line does. # From the official Kali Linux Docker image rolling release
FROM kalilinux/kali-rolling

# Leaving this here for now, but it's not needed
ARG DISPLAY_NUMBER=1
ENV DISPLAY=:$DISPLAY_NUMBER

# Install the packages we need
# Got lucky with this one, there was a ticket about this:
# https://github.com/dnschneid/crouton/issues/4461 `xfce4 dbus-launch not found` in this version of the image so installing dbus-x11
RUN apt-get update -y -q \
  && apt-get install -y -q xvfb xfce4 xfce4-goodies tightvncserver net-tools curl openssh-server dbus-x11

# This line copies the shell scripts from the local directory to the container, and makes them executable.
COPY *.sh /opt/
RUN chmod 755 /opt/*.sh

# This line runs the shell scripts that start the X server, and generate the SSH keys.
RUN /opt/startx-once.sh
RUN /opt/ssh-keys.sh

# This line sets the entrypoint to bash, so that we can run commands in the container.
ENTRYPOINT /bin/bash startx-once.sh Helps start the X server. I am using the Xvfb command to start the X server. If a PID is present, and when something is wrong with the X server, I can kill the process and start it again. I experimented  with blocking X sessions from network, while it may be unnecessary, i am still adding it anyway: -nolisten tcp discussion on super user #!/bin/bash
FILE=/opt/.x.pid
if [[ -f "$FILE" ]]; then
    echo "$FILE exist"
    echo "PID: " `cat $FILE`
else
    Xvfb -nolisten tcp $DISPLAY &
    echo $? > $FILE
fi ssh-keys.sh VNC Clients are less than ideal for copying and pasting text. This can be remedied by adding SSH keys to the container to help other hosts connect to it.  This opens up the possibility of using SSH tunnels to connect to the container. The following command was referenced from this ssh-keygen Stack Exchange Article #!/bin/bash

# Generate SSH keys
ssh-keygen -b 2048 -t rsa -f ~/.ssh/id_rsa -q -N ""
cat ~/.ssh/id_rsa >> ~/.ssh/authorized_keys If I am going to use these keys, I need the private key on my workstation. I am using the following commands to copy the private key to my host machine from docker, but there are a multitude of ways to do this. There was a good discussion around this on . Stack Overflow Finding the container ID with the : ps command docker ps Using the container ID to copy the with the : cp command # For root
docker cp <containerId>:/root/.ssh/id_rsa /target/path/on/host

# Otherwise for the user configured in the Dockerfile
docker cp <containerId>:/home/username/.ssh/id_rsa /target/path/on/host torrc This needs to be copied into the container, but is just uncommented sections from the boilerplate configuration the Tor Project provides . here # /etc/tor/torrc

## Tor opens a SOCKS proxy on port 9050 by default -- even if you don't
## configure one below. Set "SOCKSPort 0" if you plan to run Tor only
## as a relay, and not make any local application connections yourself.
SOCKSPort 9050 # Default: Bind to localhost:9050 for local connections.
#SOCKSPort 192.168.0.1:9100 # Bind to this address:port too.

## Uncomment this to start the process in the background... or use
## --runasdaemon 1 on the command line. This is ignored on Windows;
## see the FAQ entry if you want Tor to run as an NT service.
RunAsDaemon 1

## The port on which Tor will listen for local connections from Tor
## controller applications, as documented in control-spec.txt.
ControlPort 9051

## If you enable the controlport, be sure to enable one of these
## authentication methods, to prevent attackers from accessing it.
#HashedControlPassword 16:872860B76453A77D60CA2BB8C1A7042072093276A3D701AD684053EC4C
CookieAuthentication 1 TorBrowser.Dockerfile This Dockerfile builds on the previous Dockerfile, and adds Tor Browser and Python to the mix. I am using the package to install Tor Browser. torbrowser-launcher # From the base Dockerfile:
FROM excitingtheory/kalilinux-xvfb

ARG DISPLAY_NUMBER=1
ENV DISPLAY=:$DISPLAY_NUMBER

# More info about torbrowser-launcher:
# https://github.com/micahflee/torbrowser-launcher
RUN apt-get update -y -q \
  && apt-get install -y -q torbrowser-launcher python3 python3-pip

# Create a user and add them to the sudo group, sudo still TBD but leaving for now, will not be able to switch users in this container.
RUN useradd -s /bin/bash -m username \
  && usermod -aG sudo username

# Install python packages
RUN pip3 install selenium pytest
COPY torrc /etc/tor/torrc

# Set the user and home directory for the container
USER username
ENV USER=username
ENV HOME=/home/username

# Run the shell scripts that start the X server, and generate the SSH keys.
RUN /opt/startx-once.sh
RUN /opt/ssh-keys.sh

# This line sets the entrypoint to bash, so that we can run commands in the container.
ENTRYPOINT /bin/bash TorBrowser-root.Dockerfile Just like before but with less configuration. Will use the root user. # From the base Dockerfile:
FROM excitingtheory/kalilinux-xvfb

ARG DISPLAY_NUMBER=1
ENV DISPLAY=:$DISPLAY_NUMBER

# More info about torbrowser-launcher:
# https://github.com/micahflee/torbrowser-launcher
RUN apt-get update -y -q \
  && apt-get install -y -q torbrowser-launcher python3 python3-pip


# Install python packages
RUN pip3 install selenium pytest

# Copy the tor config file into the containera
COPY torrc /etc/tor/torrc

# Run the shell scripts that start the X server, and generate the SSH keys.
RUN /opt/startx-once.sh
RUN /opt/ssh-keys.sh

# This line sets the entrypoint to bash, so that we can run commands in the container.
ENTRYPOINT /bin/bash .github/workflows/main.yml The Github Actions workflow file builds the Docker image and pushes it to Docker Hub. This is the stock workflow from , with additional tags being pushed. I added a to trigger this Action once a day. Docker's documentation schedule name: docker build and push

on:
  push:
    branches:
      - "main"
  schedule:
      - cron:  '20 16 * * *'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      -
        name: Checkout
        uses: actions/checkout@v3
      -
        name: Login to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      -
        name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2
      -
        name: Build and push base image
        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./Dockerfile
          push: true
          tags: excitingtheory/kalilinux-xvfb:latest
      -
        name: Build and push torbrowser root image
        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./TorBrowser-root.Dockerfile
          push: true
          tags: excitingtheory/kalilinux-xvfb:torbrowser-root
      -
        name: Build and push torbrowser image
        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./TorBrowser.Dockerfile
          push: true
          tags: excitingtheory/kalilinux-xvfb:torbrowser Using the Containers Now I can test out the containers and see if they work. I am going to use the tag for this example. torbrowser Building the Containers (Optional) See the for more information about the command. To build containers locally I use the following commands, otherwise they can be pulled from Docker Hub on demand during the next steps. Docker CLI Build Documentation docker build docker build -t excitingtheory/kalilinux-xvfb .
docker build -t excitingtheory/kalilinux:torbrowser -f TorBrowser.Dockerfile .
docker build -t excitingtheory/kalilinux:torbrowser-root -f TorBrowser-root.Dockerfile . Running the Containers with a Volume I need to mount a volume to the container so I can access the files that I am working on. I am using the directory as a volume. ${HOME}/src Some brief notes on the flags that we are using are included below, otherwise see the for more information about the command. Docker CLI Run Documentation docker run is used to run the container in interactive mode. -it is used to remove the container layers when it exits. --rm is used to map the port from the container to the host machine. -p is used to mount a volume from the host machine to the container. -v # Run the base container
docker run -it --rm -p 5901:5901 -v "${HOME}/src":/src excitingtheory/kalilinux-xvfb

# Run the container with the default user
docker run -it --rm -p 5901:5901 -v "${HOME}/src":/src excitingtheory/kalilinux-xvfb:torbrowser

# Run the container with the root user
docker run -it --rm -p 5901:5901  -v "${HOME}/src":/src excitingtheory/kalilinux-xvfb:torbrowser-root Using Tor Browser from the Container Next I want to open the user container, login through VNC, and run the Tor Browser Launcher to verify that everything is working so far. Tor browser launcher won't work with the root user. Start the container with the default user: docker run -it --rm -p 5901:5901 -v "${HOME}/src":/src excitingtheory/kalilinux-xvfb:torbrowser Starting the VNC server in the container, the server will prompt for the main password, I am setting an additional view-only password. /opt/start-vnc-server-once.sh Below is an example of the output. Connect on macOS The connect to server dialog can be found from the finder menu: -> . Go Connect to Server Once the dialog is open, enter the address and click . I have saved this address as a favorite for easy access. vnc://localhost:5901 Connect Connect on Windows A vnc client like TightVNC can connect to this on . localhost:5901 Connected to Kali Linux Xfce4 Desktop Once connected, I can see the xfce4 desktop. Now I can start the Tor Browser Launcher from the terminal in the VNC session. torbrowser-launcher Once the browser is open, I can check to see if it is working by going to the Tor Project Connection Checker An example of a successful test: I opened the site on my host machine, that wasn’t connected, to compare: Progress so Far This is the Operating System setup I wanted to finish before I started working with Selenium and Python. To recap, I have done the following: Installed dependencies for Selenium, Python, and a simple xfce4 desktop environment. Built and pushed three interdependent Docker images with GitHub Actions. Successfully started a VNC Server in a Docker container. Connected to a running container's desktop environment with a VNC client. Tested out running Tor Browser Launcher from the container, and verified it is connecting to the Tor network. Now that there is a working container environment. Check out the next post in this series on covert Python web scraping.

Use Kali Linux Docker Containers to Support Covert Web Scraping

কভার ওয়েব স্ক্র্যাপিং সমর্থন করতে কালি লিনাক্স ডকার কন্টেইনার ব্যবহার করুন

Verwenden Sie Kali Linux Docker-Container, um verdecktes Web Scraping zu unterstützen

Utilice Kali Linux Docker Containers para admitir Web Scraping encubierto

Utiliser les conteneurs Kali Linux Docker pour prendre en charge le grattage Web caché

गुप्त वेब स्क्रैपिंग का समर्थन करने के लिए काली लिनक्स डॉकर कंटेनर का उपयोग करें

Kali Linux Docker コンテナを使用して秘密の Web スクレイピングをサポートする

Kali Linux Docker 컨테이너를 사용하여 은밀한 웹 스크래핑 지원

Use Kali Linux Docker Containers para oferecer suporte à raspagem secreta da Web

Gizli Web Scraping'i Desteklemek için Kali Linux Docker Konteynerlerini Kullanın

Sử dụng Bộ chứa Docker Kali Linux để hỗ trợ Quét web bí mật

使用 Kali Linux Docker 容器支持隐蔽的网页抓取

Docker has become an essential tool in modern software development, providing an efficient and portable way to package and distribute applications. Microsoft .NET developers can take advantage of Docker to simplify their development workflow and improve the consistency and reliability of their applications. This article will explore how to run a Microsoft .NET Docker image from code in C#. Prerequisites Before getting started, you will need to have the following software installed on your machine: Docker Desktop Visual Studio or .NET Core SDK You will also need a basic understanding of Docker concepts, such as images and containers. Getting Started We will create a new C# console application in Visual Studio. Open Visual Studio and select File > New > Project. Choose Console App (.NET Core) as the project type, and give it a name such as DockerCSharp. Next, open the Program.cs file and replace the existing code with the following: using Docker.DotNet;
using Docker.DotNet.Models;
using System;
using System.IO;
using System.Threading.Tasks;

namespace DockerCSharp
{
    class Program
    {
        static async Task Main(string[] args)
        {
            // Define Docker API client configuration
            var dockerConfig = new DockerClientConfiguration(new Uri("npipe://./pipe/docker_engine"));

            // Create Docker API client
            var dockerClient = dockerConfig.CreateClient();

            // Define container configuration
            var containerConfig = new Config()
            {
                Image = "mcr.microsoft.com/dotnet/sdk:5.0",
                Cmd = new[] { "dotnet", "new", "console", "-o", "/app", "--no-https" },
                HostConfig = new HostConfig()
                {
                    AutoRemove = true,
                    Binds = new[] { $"{Directory.GetCurrentDirectory()}/app:/app" }
                }
            };

            // Create container
            var containerCreateResponse = await dockerClient.Containers.CreateContainerAsync(containerConfig);
            var containerId = containerCreateResponse.ID;

            // Start container
            await dockerClient.Containers.StartContainerAsync(containerId, new ContainerStartParameters());

            // Wait for container to finish executing
            var containerWaitResponse = await dockerClient.Containers.WaitContainerAsync(containerId);

            // Inspect container logs
            var containerLogsStream = await dockerClient.Containers.GetContainerLogsAsync(containerId, new ContainerLogsParameters()
            {
                ShowStdout = true,
                ShowStderr = true,
                Follow = false
            });
            using (var containerLogsReader = new StreamReader(containerLogsStream))
            {
                Console.WriteLine(containerLogsReader.ReadToEnd());
            }

            // Remove container
            await dockerClient.Containers.RemoveContainerAsync(containerId, new ContainerRemoveParameters());
        }
    }
} This code defines a C# console application that uses Docker.DotNet NuGet package to interact with the Docker API. The application does the following: Illustrates the Docker API client configuration and creates a Docker API client instance. Defines the container configuration, which specifies the Microsoft .NET Docker image to use, the command to run inside the container (dotnet new console), the output directory, and a bind mount to the local app directory. Creates a container using the container configuration. Starts the container. Waits for the container to finish executing. Inspects the container logs and writes them to the console. Removes the container. Note that the code assumes that the Docker API is available at the default named pipe endpoint on Windows, npipe://./pipe/docker_engine. Now, let's run the container and see if everything is working as expected. We'll use the Docker SDK for .NET to interact with the Docker engine and create a container based on the image we just pulled. microsoft/dotnet Here's an example of how to do it: using Docker.DotNet;
using Docker.DotNet.Models;

public async Task RunContainer()
{
    var endpoint = "npipe://./pipe/docker_engine"; // This is the default endpoint for Docker on Windows
    
    var dockerClient = new DockerClientConfiguration(new Uri(endpoint)).CreateClient();
    
    var containerConfig = new Config()
    {
        Image = "microsoft/dotnet",
        Cmd = new List<string>() { "run", "ConsoleApp.dll" } // Replace with the name of your application's entry point
    };
    
    var containerHostConfig = new HostConfig()
    {
        PortBindings = new Dictionary<string, IList<PortBinding>>()
        {
            { "5000/tcp", new List<PortBinding>(){ new PortBinding { HostPort = "5000" } } }
        }
    };
    
    var container = await dockerClient.Containers.CreateContainerAsync(new CreateContainerParameters(containerConfig)
    {
        HostConfig = containerHostConfig,
        Name = "my-dotnet-app"
    });
    
    await dockerClient.Containers.StartContainerAsync(container.ID, new ContainerStartParameters());
} The code does the following: Creates a new instance of the DockerClient class, which represents a connection to the Docker engine. Defines the configuration for the container by specifying the image and the command to run our application. In this case, we're running. . microsoft/dotnet ConsoleApp.dll Specifies the host configuration, which includes port bindings. We're binding port 5000 in the container to port 5000 on the host machine. Creates the container using the configuration we just defined. Starts the container. You can navigate your web browser to see if everything is working. If everything is working correctly, you should see your application's output in the browser. Conclusion This article shows you how to run a Microsoft .NET Docker image from code using the Docker SDK for .NET. With this technique, you can easily package and deploy your .NET applications as Docker containers, making managing and deploying dependencies to different environments easier. Follow Me On , , , , , C# Publication LinkedIn Instagram Twitter Dev.to BuyMeACoffee Also published here

Stories, News & Mentions about CONTAINERGRID

Containergrid’s Stories on HackerNoon