Connecting to MongoDB via macOS terminal using atlas cli and mongosh

Smeet J Thakkar — Sun, 11 Dec 2022 13:54:39 +0000

As a beginner and newbie to coding, mongo happens to be the first database service I am exploring and the learning journey has been great by far. In order to learn any new tool, framework or service - it is crucial their documentation is clear enough so you can find your way through it. While mongo team does a great job at it, I had to comb through a few documents to find "how I can connect to the mongoDB cluster without leaving my terminal". To make this easier for anyone who is a lazy ass like myself, here are the steps I followed:

Pre-requisites:

Install/Update atlas-cli and mongosh. If you haven't already, please refer: https://www.mongodb.com/docs/atlas/cli/stable/install-atlas-cli/
You already have a mongoDB cluster created
Your ip is whitelisted to access the cluster

Step 1: Creating a profile

atlas config init

This initiates the profile creation process. All values are optional. If you do not enter the public/private keys or profile name - they keys are auto-generated and profile is set to default.
I would suggest add the profile name to a preferred short username. The reason being, it can be used as a flag for other cli commands.
Most importantly, store the details in a secure place especially the dbuser and dbpassword. You'll be frequently needing this information.
At any point, you can run a spotlight search for finding the config.toml file. This is where your profile related details are stored.

Step 2: Use atlas to authenticate your profile

atlas auth login

Once your profile is created, you can use the stored credentials to access your mongoDB cluster at any given point.
The general syntax is atlas <command> --profile --profileName
When you run this command, a browser window opens up to asking for a one-time activation code.
I know, I know. This is the only time you've to leave your terminal.
Paste the authentication code from your terminal into the browser and you're all set.

Step 3: Retrieve your SRV connection string

atlas clusters connectionStrings describe <clusterName>

this command returns a standard connection string which will look something like mongodb+srv://clusterName.mongodb.net
Copy this URL to the clipboard

Step 4 & the final one: Run mongosh

mongosh <connectionString> --username <dbUser>

To break it down: mongosh - this is for your mongoDB shell.
is the string you were able to fetch during Step 3
dbUser is the username you must have saved during step 1 and it needs to be added with the flag --username
Once you run it, the terminal prompts for a password. This is the database password from Step 1. Enter and TADA!

I am confident there are better and shorter ways to connect to your cluster. If I come across any such solution, I'll definitely share it with everyone. In case you know it already, I am all ears!

CSS Basics Layout Fundamentals: Block, Inline & Inline Block

Smeet J Thakkar — Thu, 07 May 2020 15:26:51 +0000

Each HTML element has a default display property, primarily: "block" or "inline" or "none". The catch is you can override the behaviour of these elements by interchanging their values or simply assigning it another value such as inline-block, flex, grid, block etc. Well, if you were to apply display: block; to an already existing block element, you'll notice no change obviously; just an additional line of code. Here, we are going to look at three of these values: block, inline and inline-block.

Attributes	block	inline	Inline-block (inline+block)
Width, Height, Margins	✔️	✘	✔️
Full-width, Line-Breaks	✔️	✘	✘
Padding	✔️	✔️	✔️
Example Elements:	Headings (h1-h6) sections forms footer ul/ol div	anchor span img Strong label	← can be any of these. Apply display: inline-block. Most general use-case can be site navigation.

TL:DR;

The above table describes, at any given point, which attributes you can apply to what elements. Trust me, knowing this is extremely important especially for setting the foundation for your future CSS exploration phase.

Let us walk through an example to dig deeper:

Block-level Element:

Let’s create a container using <div>. I've assigned it a class. If you're yet to explore this topic, think of classes as a nickname.
Add a few paragraphs inside the <div> container.
Lastly, let's give our container and paragraphs some border and background.

<div class="head">
  <p>
    I am a paragraph, a block element. I cover full-width of 
    the page just like my container, div. "See my borders".
  </p>
  <p>
    I am an <span class="span-1">inline span element</span> 
    inside a block element. They allow me to get some space on 
    the right/left but not top/bottom :(
  </p>
  <p>
    Here comes the best of both worlds, inline-block. 
    The <span class=span-2>inline-block</span> 
    to the rescue. 
  </p>
</div>

.head {
  background-color: #f1425d;
  color: #fff;
  height: 280px;
}

.head p {
  padding: 10px;
  border: 5px solid #39ff14;
}

Inline Elements:

Look at the second & third paragraph in the above code. Did you notice something?
Yes! An inline span element is embedded inside the <p> tags.
Let's add some styles to make them stand out.
Try giving span-1 some margin on the top, you'll notice nothing happens. If it were to happen, that'd be technically break the flow of the layout, no?

.span-1, .span-2 {
  background-color: #000;
  color: white;
  width: 100%; /* oh common, I am an inline element */
}

.span-1 {
  margin-top: 50px; /*nothing happens*/
  padding: 5px 30px;
}

Inline-Block Elements:

Did you see how they behaved? No line-breaks or respect for margins.
Let's change the display property for span-2 and try giving it some margins. Tada!

.span-2 {
  display: inline-block; /* check this out */
  margin-top: 10px;
  margin-bottom: 10px;
}

Additional: Same element but different display values:

Let's try giving different display properties to the same tag, in this case, headings and give them some background + borders to be able to see the difference.
You'll see h1 still occupies the full-width but h2?

<h1>I am another block-level element just stretching out.</h1>
<h2>Am a smaller heading yet a block element. 
But, you can override my behaviour by changing the display property.</h2>

h1 {
    border: 2px solid red;
    padding: 10px;
    margin-top: 10px;
}

h2 {
  border: 2px solid purple;
  padding: 10px;
  margin-top: 20px; /* Now, I can't make this happen. */
  display: inline; /* but you can fit another element (img?) next to me! */
  width: 100%: /* why? but why? told you won't work :p */
  height: 500px; /* okay, bye! */
}

I've posted the final code here.

Thank you for taking the time out to read this post, hopefully you find this helpful.

DEV Community: Smeet J Thakkar

Connecting to MongoDB via macOS terminal using atlas cli and mongosh

CSS Basics Layout Fundamentals: Block, Inline & Inline Block

Let us walk through an example to dig deeper: