teleren/devto huggingface dataset:
Quick guide to CSS Grid
Tags: css, grid
Published: 2023-12-27 18:29:12

---
title: Quick guide to CSS Grid
published: true
description: Learn the basics of CSS Grid in 5 minutes or less
tags: CSS, Grid
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-12-27 18:22 +0000
---

## Grid Container
First, you designate an element as a grid container. This element will hold the grid items (your content). You can do this by setting the element's display property to `grid` or `inline-grid`.

```css
.container {
  display: grid;
}
```

```css
/* Or for an inline grid */
.inline-container {
  display: inline-grid;
}
```

## Defining Rows and Columns
You define the rows and columns in the grid container using `grid-template-rows` and `grid-template-columns`.

```css
.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px 100px;
}
```

## Grid Gap
Grid gap is the space between each row and column. Use `grid-gap`, `grid-row-gap`, and `grid-column-gap`.

```css
.container {
  display: grid;
  grid-gap: 10px; /* Space between rows and columns */
}
```

## Placing Items
You can place grid items in specific locations using `grid-column-start`, `grid-column-end`, `grid-row-start`, and `grid-row-end`.

```css
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
```

## Shorthand Properties
There are shorthand properties for quicker definitions.

```css
.item {
  grid-column: 1 / 3; /* Start at line 1 and end at line 3 */
  grid-row: 2 / 4;
}
```

## Fractional Units (fr)
The fr unit allows you to distribute available space in fractions.

```css
.container {
  grid-template-columns: 1fr 2fr 1fr; /* 2nd column is twice as wide as the others */
}
```

## Repeat Function
To avoid repetition, use `repeat()`.

```css
.container {
  grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
}
```

## auto-fill and auto-fit
`auto-fill` and `auto-fit` are used with repeat() to automatically place as many items as possible.

```
.container {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
```

## Grid Areas
Define areas in your grid and assign items to these areas.

```css
.container {
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}
```

## Responsive Design
You can create responsive designs by combining CSS Grid with media queries.

```css
.container {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}
```

## Practice
The best way to learn CSS Grid is through practice. Try creating a basic layout with a header, sidebar, main content area, and footer. Experiment with different configurations and see how the elements rearrange themselves.
Use IntelliJ In Presentation Mode To Increase Focus While Code
Published: 2023-12-27 18:22:29

Hello, good people! In this article, we will explore how IntelliJ’s Presentation mode can assist us in writing code with less distraction and achieving better focus.

Let’s begin by examining the default view of IntelliJ that we typically use.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvjdc6mlwhncnxmrsemy.png)
Fig-1. Default InteliJ IDE View


In Fig. 1, we can observe various tabs or components besides the code. These elements are sometimes not even relevant when focusing on code.

Tabs or menu that are rarely used -

1. Title of the project.

2. Toolbar.

3. Project breadcrumb.

4. Project Right bar.

5. Project Left Bar.

6. Footer of InteliJ.

Now lets look cleaner view with InteliJ Presentation Mode-
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3u8p1i5te1t1rmmvwh1.png)

While this may appear to be just a portion of the screen, it actually represents the entire code visible when utilizing presentation mode.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hy8ex9d24201ast4uf1x.png)

Now one can questions like -
What? Now from where to run app?
where is my project directory?
how to toggle tabs? how to see open tabs?
how to see branch name i am working in?

So its very simple lets quickly see how can we do that?

Q. Now from where to run app?
_
Mac : control + r_

where is my project directory?

_Mac : commad + 1
_
how to toggle tabs/see open tabs??

_Mac: control + Tab_

how to see branch name i am working in?

_Mac : command + ‘(‘_

Embracing these shortcuts will not only boost your coding speed but also contribute to a more immersive and efficient workflow. Let’s minimize distractions and maximize coding prowess by harnessing the power of IntelliJ IDEA shortcuts.
Ship integrations with Hubspot, Pipedrive, and Zoho in minutes instead of hours using this API
Tags: data, dataengineering, opensource, tutorial
Published: 2023-12-27 18:06:13

Using Panora, an open-source product, all you'll need is one API to interact with dozens of SaaS providers.

Find the full tutorial [here](https://panora.dev/build-an-oauth-integration-with-hubspot-pipedrive-zoho-in-30-minutes/) 

And try Panora for free: 
{% embed https://github.com/panoratech/panora %}
Terraform - Using GitHub Copilot Chat with Terraform
Tags: terraform, githubcopilot, iac, github
Published: 2023-12-27 18:01:14

---
title: Terraform - Using GitHub Copilot Chat with Terraform
published: true
description: DevOps - Terraform - GitHub Copilot Chat with Terraform
tags: 'terraform, Copilot, iac, Github'
cover_image: 'https://raw.githubusercontent.com/Pwd9000-ML/blog-devto/main/posts/2023/DevOps-Terraform-Copilot-Chat/assets/main-tf-tips.png'
canonical_url: null
id: 1709858
series: Terraform Pro Tips
date: '2023-12-27T18:01:14Z'
---

## Overview

In this session we will look at GitHub Copilot Chat integrated into VSCode and how we can write Infrastructure as Code (IaC) using terraform along with the help of Copilot Chat to write terraform code.

### Live Recording

See the following youtube video for a live demo recording.

{% youtube 6YoBamfz80Y %}

### _Author_

Like, share, follow me on: :octopus: [GitHub](https://github.com/Pwd9000-ML) | :penguin: [Twitter](https://twitter.com/pwd9000) | :space_invader: [LinkedIn](https://www.linkedin.com/in/marcel-l-61b0a96b/)

{% user pwd9000 %}

<a href="https://www.buymeacoffee.com/pwd9000"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=pwd9000&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>
SKAFFOLD
Tags: skaffoldsimplified, devopswithskaffol, effortlessdeployment, k8smadeeasy
Published: 2023-12-27 17:55:40

a. Programming language used to create that tool : Golang
b. Parent company of the Skaffold: Google
c. Tool overview : purpose and funtionality of the skaffold :
purpose: Skaf fold is a tool that handles the workflow for building, pushing and deploying your application.
funtionality: End-to-end pipelines: skaffold run - to build & deploy once. skaffold dev - to trigger the watch loop build & deploy workflow with cleanup on exit.
d.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yer7wzlgus11d15a345a.png)


e. whether it is open source or paid one:  It's an open-source project initiated and maintained by Google's engineering team.
The "Boom" 💥 of Artificial Intelligence
Tags: ai, webdev, beginners, productivity
Published: 2023-12-27 17:40:22

It's amazing how much it can do, from helping robots learn to serving up personalized recommendations on social media. But what exactly is AI? Simply put, machines can learn and perform tasks that normally require human intelligence, like recognizing speech or making predictions based on data.

AI is being used in so many different ways these days. For example, it's used in healthcare to help diagnose diseases and develop new treatments. It's being used in finance to detect fraud and make more accurate predictions about the stock market. It's even being used in art to create new and interesting pieces.

**My Experiences with Artificial Intelligence**

_Chatbot_

![An example of the ChatBot speech text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v1q5od3foqlkcbyvpcz.png)

It was captivating to witness how these chatbots evolved and became more sophisticated over time, adapting to different users and providing meaningful and engaging conversations. The process of developing chatbots allowed me to explore the fascinating intersections between natural language processing, machine learning, and user experience design. I constantly sought ways to improve their intelligence and make them more user-friendly, ensuring that they effectively catered to the needs and expectations of users.

_Image Recognition Project_

I recently embarked on an exciting image recognition project, diving into the world of artificial intelligence. My goal was to train neural networks to identify objects and accurately classify them. Witnessing computers comprehend visual information left me in awe. I also took help from various YouTube videos, which left me thinking about what can be done with the help of artificial intelligence. It was fascinating to see how these algorithms could recognize a wide range of objects, from everyday items to more complex patterns, with impressive accuracy. 

**Benefits of AI**

_Improved Accuracy_

AI technology has greatly improved the accuracy of different tasks. With the use of AI-powered algorithms, complex calculations and predictions can be made swiftly and with greater precision.

_Virtual Assistants_

AI has introduced virtual assistants that can help with day-to-day tasks. These assistants, like Siri or Alexa, can answer questions, provide reminders, and even perform basic functions such as setting alarms or making calls.

_Automated Customer Service_

AI has revolutionized customer service by introducing chatbots and virtual agents. These AI-powered systems can handle a large volume of customer inquiries and provide immediate responses, improving customer satisfaction and reducing waiting times.

_Enhanced Security_

AI algorithms can be used to detect patterns and anomalies in data, helping to enhance security measures. From fraud detection in banking to identifying potential threats in cybersecurity, AI has greatly advanced the field of security.

![Some of the Benefits of using AI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76loz2dr3n3ws9s4d5vr.png)
TWC is not a revolution but…
Tags: react, tailwindcss, javascript, opensource
Published: 2023-12-27 17:37:49

I'm a true fan of [shadcn/ui](https://ui.shadcn.com/docs) as it offers out-of-the-box components that are highly customizable. By blending [TailwindCSS](https://tailwindcss.com/) for styling and theming, along with [Radix](https://www.radix-ui.com/) for accessibility, it provides a smart kick-start for product development.

However, at some point, you will have to create your own React-TypeScript components, which can become complicated, even for coding a simple styled `div`:

```tsx 
import { cn } from "@/lib/utils"
 
const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-xl border bg-card text-card-foreground shadow",
      className
    )}
    {...props}
  />
))
```

Enter [TWC](https://react-twc.vercel.app/), that dramatically simplifies this with a straightforward syntax:

```tsx
import { twc } from "react-twc";

const Card = twc.div`rounded-xl border bg-card text-card-foreground shadow`;
```

Among other features TWC offers some useful helpers like handling [conditional classes](https://react-twc.vercel.app/docs/guides/adapting-based-on-props),  [cva support](https://react-twc.vercel.app/docs/guides/adapting-based-on-props#use-with-cva) and [conditional props](https://react-twc.vercel.app/docs/guides/additional-props).

```tsx
import { twc, TwcComponentProps } from "react-twc";

type ButtonProps = TwcComponentProps<"button"> & { $primary?: boolean };

// Conditional ClassNames
const Button = twc.button<ButtonProps>((props) => [
  "font-semibold border border-blue-500 rounded",
  props.$primary ? "bg-blue-500 text-white" : "bg-white text-gray-800",
]);
```

```tsx
import { twc, TwcComponentProps } from "react-twc";

// Adds `target` and `rel` attributes on external links
const Anchor = twc.a.attrs<AnchorProps>((props) =>
  props.$external ? { target: "_blank", rel: "noopener noreferrer" } : {},
)`appearance-none size-4 border-2 border-blue-500 rounded-sm bg-white`;
```

## Integration with Other Libraries
TWC [can be used to](https://react-twc.vercel.app/docs/guides/styling-any-component) add TailwindCSS classes on several design systems components including [Radix](https://www.radix-ui.com/) or [React Aria](https://react-spectrum.adobe.com/react-aria).

## Takeaway
TWC is not a revolution, but it's a lib crafted by an experienced developer ([gregberge](https://twitter.com/gregberge_)), that  addresses the frustrations of building React components in modern stacks. For me, it's a ❤️ tool that enhances development experience, and my productivity.
🚀 Exciting Update: 'Mastering Algorithms with Understanding Breadth First Search (BFS)!' 🎥
Tags: algorithms, programming, coding, tutorial
Published: 2023-12-27 17:26:21

Hello, tech enthusiasts! I'm thrilled to share my latest video where I delve into the intricacies of the Breadth First Search (BFS) algorithm. Join me as we explore the fundamental concepts, applications, and implementation of BFS in solving various problems.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4q68c9u1cvc6d8579fp.png)

🎥 Watch the video here: https://youtu.be/0-CXPKyLyj4?si=qOHbWtGaeNEL2L5O
🔗 Access the code on GitHub: https://github.com/Vinay352/Leetcode_Complete_Solution/blob/main/CreateBinaryTree_DFS_BFS.java

Your thoughts and comments are highly appreciated, so feel free to share your insights below. Let's continue our shared journey of learning and coding! 💡👨‍💻

Stay connected:
🎥 YouTube: https://www.youtube.com/@VinayJainDev3097
📚 Medium: https://medium.com/@vinay.j3097
📝 Dev.to: https://dev.to/vinay_jain_dev
🔗 GitHub: https://github.com/Vinay352
🐦 Twitter: https://twitter.com/vinayj3097
📸 Instagram: https://www.instagram.com/vinay_jain_dev/
📘 Facebook: https://www.facebook.com/vinayj3097/
🛠️ Jenkins Tool Overview
Published: 2023-12-27 17:15:36

🖥️ **Programming Language**: Java

🏢 **Parent Company**: Jenkins is an open-source tool maintained by the Jenkins community.

🔍 **Tool Overview**: Jenkins is a leading open-source automation server primarily written in Java. It serves as a robust CI/CD tool, empowering developers by automating various stages of software development. Its primary purpose is to streamline the integration and delivery of software projects. Jenkins allows teams to automate the building, testing, and deployment of applications, ensuring continuous integration, continuous delivery, and continuous deployment processes. It provides a user-friendly interface and extensive plugin support, enabling customization and integration with various tools and technologies.

🔧 **Functionality**: Jenkins facilitates continuous integration, automating the build and testing process whenever developers commit new code changes. It supports distributed builds, scalability, and provides extensive integration capabilities, making it a preferred choice for development teams worldwide.

🌐 **Open Source or Paid**: Jenkins is an open-source tool, freely available to users worldwide. Its open-source nature allows for community-driven development, contributions, and customization by developers globally.

🖼️ **Logo**: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfsbslsidn1v67po1z2e.png)
My experience with the AWS Community 'New Voices' Program
Tags: aws, speaking, community
Published: 2023-12-27 17:09:44

Hi folks!

The New Year is just around the corner and that means that the applications for the [AWS Community Builder Program](https://aws.amazon.com/developer/community/community-builders/) are soon going to open up!

As a Community Builder this year, I'd like to take you through some of my best experiences - becoming a part of the AWS New Voices Cohort.

## About AWS New Voices

The New Voices Program is a very new, building idea of gathering potential speakers from the pool of AWS Community Builders and honing their speaking skills under the guidance of experienced speakers from the community who chip in as coaches.

## The Overall Setup

Set up in July 2023, we had a total of 4 sessions (once in a week) in which we had to prepare a small talk of 3-4 minutes where we described how we solved a problem using technology (not necessarily related to AWS)


![A snippet from one of the learning sessions where I was speaking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj99k9uazl8tw4t1n8l3.JPG)

Every new session, a different twist was added to the same topic of discussion to bring in the quality of range to our speaking skills.

Barring the last session, there were no slides. It was all about talking to your audience for a certain period of time, describing how you solved a problem

At the end of the talk, the host along with the Coaches give you actionable feedback that you can work on before you join the next session.

## The Power of Acknowledgement

![A picture of me talking on the stage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykrlu80vfsi6mhuapnro.png)

As someone who comes with a history of sheer social anxiety and nervousness on the stage, to be able to stand in front of a crowd and speak today is a blessing.

But it's also still very scary. And definitely not easy for everyone. What helps is the acknowledgement of people listening to you, people telling you that you did a good job and they liked your talk.

This is exactly what I got from this program. At the end of the talk, the host appreciates your effort, talks about the stand-out points in your talk. All the speakers appreciate your work and mention the key highlights where you did well. Everybody *jazz hands* at you *(refer to the cover image)* acknowledging the solid work that you did.

---

I'm not sure about the future of the program, how it's going to be structured in 2024, but I'm exited and super happy to be an AWS New Voices **Graduate**. Looking forward to more Community Builders joining in Q1 becoming a part of this program as well :)

Thanks for reading, Happy Holidays!
Inspec Tool Overview
Published: 2023-12-27 17:01:35

**Programming Language:** Ruby

**Parent Company:** Chef Software, Inc.

**Tool Overview:** 

**Purpose and Functionality:**

- 
InSpec is a powerful open-source testing and auditing framework created using Ruby. 

- 
Developed by Chef Software, Inc., InSpec enables users to express security and compliance rules in an easily understandable language. 

- 
It facilitates automated testing of systems against these compliance rules, providing a robust solution for continuous integration and continuous delivery (CI/CD) pipelines.

- 
With its human-readable and machine-executable syntax, InSpec ensures that your infrastructure adheres to security and compliance standards, promoting a secure and reliable environment.

**Logo:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwyuquwlzn4tv93fs4nh.jpg)

**Open Source or Paid:** InSpec is an open-source tool
Overlayed: Elevating Your Discord Experience Beyond Gaming
Tags: discord, typescript, tauri, opensource
Published: 2023-12-27 17:00:00

In the dynamic world of online communication, the Discord platform has become a cornerstone for communities to connect and collaborate. For those seeking an enhanced experience, [Overlayed](https://overlayed.dev) emerges as a third-party, multi-platform, and opensource Discord overlay designed to revolutionize the way users engage with voice chats.

### Key Features
Let's walk through some of the most notable features Overlayed has to offer.

#### User List

Overlayed provides a clear and concise user list, allowing users to easily identify who is actively participating in the voice chat.

![Overlayed User List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk58ttp1iu6so27xb5mv.png)

#### Functionality Beyond Gaming

Unlike the native Discord overlay being [confined to Windows and gaming environments](https://support.discord.com/hc/en-us/articles/217659737-Game-Overlay-101), Overlayed breaks free from these limitations. Whether you're collaborating on projects, hosting virtual meetings, or simply hanging out with friends, Overlayed is able to render the voice chat.

![Overlayed overtop of a terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asjxjujlabef3rbazxit.png)

#### Always on Top Convenience

One of Overlayed's standout features is its "Always on Top" functionality. This ensures that the overlay remains visible and accessible at all times, allowing users to multitask efficiently without sacrificing the ability to monitor and interact with the voice chat.

#### Transparent & Clickthrough Design

The transparent window design of Overlayed provides a visually unobtrusive overlay. Additionally, its clickthrough capability enables users to interact with applications beneath the overlay without hindrance, creating a smooth and uninterrupted user experience.

#### Blazingly Fast™ Technology

Overlayed is built on the [Tauri framework](https://tauri.app), leveraging the efficiency of Rust programming. This not only ensures a responsive and speedy performance but also highlights Overlayed's commitment to providing users with a cutting-edge and reliable overlay solution.

#### Conclusion
Overlayed is still in active development but if there is something you'd like to see added please raise an issue.

Website: https://overlayed.dev
Repo: https://github.com/Hacksore/overlayed
Twitter: https://twitter.com/OverlayedDev
Discord: https://discord.com/invite/trashdev