DEV Community: Matteo Bianchi

When Developers Describe Their Code and Frameworks ⚡

Matteo Bianchi — Tue, 23 Jul 2024 10:17:19 +0000

Are you a developer and don't know how to describe your new amazing framework?

The top 10 adjectives developers use to describe their frameworks and code:

⚡️ Lightning-fast
🚀 Ultra-efficient
📈 Super scalable
🔧 Highly modular
🔄 Seamlessly integrated
🔥 Blazing speed
🛡 Bulletproof
🧼 Exceptionally clean
💪 Robust
🌟 Next-gen

YOU DON'T KNOW THESE HTML TAGS! 🫣

Matteo Bianchi — Fri, 12 Jul 2024 07:12:30 +0000

When working with HTML, most developers are familiar with the basic tags like <div>, <span>, and <a>.
However, HTML includes a variety of lesser-known tags that can be extremely useful in specific scenarios.

Here are some of the less commonly used HTML tags that you might find helpful:

`<abbr>`

The <abbr> tag is used to define an abbreviation or an acronym, providing explicit information about its meaning.

<abbr title="HyperText Markup Language">HTML</abbr>

In this example, hovering over "HTML" will show "HyperText Markup Language."

HTML

`<address>`

The <address> tag is used to define the contact information of the author of a document or article.

<address>
  Written by <a href="mailto:webmaster@example.com">John Doe</a>.<br>
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
</address>

This tag is useful for providing structured contact information.

`<bdo>`

The <bdo> tag stands for "bidirectional override" and is used to change the text direction.

<bdo dir="rtl">This text will be written from right to left</bdo>

This tag is particularly useful for languages that are read from right to left.

`<datalist>`

The <datalist> tag provides a list of predefined options for an input field.

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

`<details>`

The <details> tag is used to create a collapsible box that can contain additional interactive details.

<details>
  <summary>More information</summary>
  <p>Here is some additional information that you can see when you click the summary.</p>
</details>

This tag is useful for creating expandable sections on a webpage.

`<meter>`

The <meter> tag represents a scalar measurement within a known range, such as disk usage.

<meter value="2" min="0" max="10">2 out of 10</meter>

This is useful for displaying progress or levels within a set range.

How to center a div?

Matteo Bianchi — Wed, 10 Jul 2024 12:13:21 +0000

How to Center a Div in CSS

Centering a div is the most impossible thing

1. Centering with Flexbox

Flexbox is a modern way to center content both vertically and horizontally:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

2. Centering with Grid

CSS Grid can also center content:

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

3. Centering with Absolute Positioning

You can center a div using absolute positioning:

.container {
    position: relative;
    height: 100vh;
}
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

4. Centering with Margin Auto

For simple horizontal centering, use margin: auto:

.centered-div {
    width: 50%;
    margin: 0 auto;
}

<div class="centered-div">Centered Content</div>

5. Centering with inline-block display

For inline or inline-block elements:

.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="container">
    <div class="centered-div">Centered Content</div>
</div>

RENT! e-commerce, submission for Atlas Hackathon

Matteo Bianchi — Tue, 06 Dec 2022 20:03:35 +0000

What I built

I have created an e-commerce that allows people to rent articles related to technology. The user can choose the number of days for which to rent one or more items. Since I don't want to bore you too much, I made a video of about 6 minutes for a quick overview:

Category Submission:

Search No More

App Link

Not hosted yet

MB337 / RENT-Project-MongoDB-Atlas-Hackathon

RENT Project MongoDB Atlas Hackathon

The RENT project is an e-commerce where the user can rent products, previously uploaded by the website admin.
Youtube Video

Installation

You need to clone this repository on your machine:

git clone git@github.com:MB337/RENT-Project-MongoDB-Atlas-Hackathon.git

Add .env file to your project and set it like this:

COMPOSE_PROJECT_NAME=mongodb-hackathon
MONGODB_URI=<YOUR-MONGODB-PROJECT-URI&gt

Your MongoDB Database should look like this:
```
|ecommerce
---products
---stats
---report
```
If you have Docker:
```
docker-compose up
```
Else (note that you'll need to export env variables):
```
python3 app.py
```

Tools/Modules

Those are MongoDB services and modules or tool that I used:

Flask: micro web framework written in Python.
Atlas Search: Atlas Search provides options for several kinds of text analyzers, score-based results ranking, and a rich query language.
Pymongo: Python distribution containing tools for working with MongoDB.
Chart.js: an open source JavaScript library for creating interactive and animated charts on web pages.
Axios: Axios is a promise-based HTTP Client for…

View on GitHub

Screenshots

Description

You can install this project and run it with docker by following the instructions on my github.
The site contains an "Admin" section reachable at "/admin" which will contain data regarding the website: sales data that can be viewed on a graph, proposals for new products, section to add a new product, section to modify / delete a product. The website also offers the possibility to search for a product thanks to Atlas Search. Product data will be saved on MongoDB via pymongo as follows:

{
    _id: "id",
    category: "category",
    prodName: "name",
    desc: "description",
    price: "price",
    isHomepage: "Is it in Homepage?",
    isHomepageCarousel: "Is it in Homepage Carousel?",
    isCategoryCarousel: "Is it in Homepage?",
    image: "image-link",
    watch: "In progess..."
}

Modules or tool that I used:

Flask: micro web framework written in Python.
Atlas Search: Atlas Search provides options for several kinds of text analyzers, score-based results ranking, and a rich query language.
Pymongo: Python distribution containing tools for working with MongoDB.
Chart.js: an open source JavaScript library for creating interactive and animated charts on web pages.
Axios: Axios is a promise-based HTTP Client for node.js and the browser.
Bootstrap 5: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.

Link to Source Code

MB337 / RENT-Project-MongoDB-Atlas-Hackathon

RENT Project MongoDB Atlas Hackathon

The RENT project is an e-commerce where the user can rent products, previously uploaded by the website admin.
Youtube Video

Installation

You need to clone this repository on your machine:

git clone git@github.com:MB337/RENT-Project-MongoDB-Atlas-Hackathon.git

Add .env file to your project and set it like this:

COMPOSE_PROJECT_NAME=mongodb-hackathon
MONGODB_URI=<YOUR-MONGODB-PROJECT-URI&gt

Your MongoDB Database should look like this:
```
|ecommerce
---products
---stats
---report
```
If you have Docker:
```
docker-compose up
```
Else (note that you'll need to export env variables):
```
python3 app.py
```

Tools/Modules

Those are MongoDB services and modules or tool that I used:

Flask: micro web framework written in Python.
Atlas Search: Atlas Search provides options for several kinds of text analyzers, score-based results ranking, and a rich query language.
Pymongo: Python distribution containing tools for working with MongoDB.
Chart.js: an open source JavaScript library for creating interactive and animated charts on web pages.
Axios: Axios is a promise-based HTTP Client for…

View on GitHub

Permissive License

Background

I was interested in discovering the new features of MongoDB, I come from SQL-type databases so it was an experience that enriched me

How I built it

I learned a lot from this competition, especially about using nosql databases