DEV Community: ncutixavier

How to Set Up Git on Windows or macOS (Easy Guide)

ncutixavier — Mon, 24 Nov 2025 09:31:17 +0000

Git helps you save versions of your projects and collaborate with others.
This quick guide shows you how to install and configure Git on Windows or macOS in the simplest way.

1. Install Git on Windows

Step 1: Download Git

Visit: https://git-scm.com
Click Download for Windows.

Step 2: Install

Open the downloaded file and follow the steps.
You can keep the default settings — they work for most people.

Step 3: Verify

Open Command Prompt or PowerShell and run:

git --version

If you see a version number, Git is ready.

2. Install Git on macOS

Option A: Use Terminal (Most Common)

Open Terminal and type:

git --version

If Git isn’t installed, macOS will ask you to install Command Line Tools.
Click Install.

Option B: Using Homebrew

If you prefer Homebrew, run:

brew install git

3. Configure Git (Windows & macOS)

Set your name and email so your commits are labeled correctly:

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

Check your settings with:

git config --list

4. Test Git

Try cloning a test project:

git clone https://github.com/username/repository.git

If it downloads, everything is working.

5. Basic Git Commands to Start Using

Action	Command
Create a new Git project	`git init`
Check changes	`git status`
Add files	`git add .`
Save changes	`git commit -m "message"`
Connect to online repo	`git remote add origin <url>`
Upload your code	`git push -u origin main`
Download updates	`git pull`

🎉 Done!

How to Restore a Deleted Local Git Branch or Commit (That Wasn't Pushed)

ncutixavier — Tue, 20 May 2025 12:33:54 +0000

Accidentally deleted a local Git branch before pushing it? 😱 Don’t panic — if the commits haven’t been garbage collected, you can still bring it back using Git’s powerful internal logs.

Here’s how to recover your branch step by step:

🔍 Step 1: Check the Git Reflog

Git keeps a history of everything you’ve done even deleted branches in something called the reflog.

Open your terminal and run:

git reflog

This will show a list of recent Git actions, including checkouts and commits. It might look like this:

a1b2c3d HEAD@{0}: checkout: moving from feature-x to main
d4e5f6g HEAD@{1}: commit: Add new login functionality
...

👉 Look for the last commit hash (e.g., d4e5f6g) from the deleted branch.

🌱 Step 2: Recreate the Deleted Branch

Once you’ve identified the right commit, you can bring the branch back with:

git checkout -b your-branch-name <commit-hash>

Example:

git checkout -b feature-x d4e5f6g

Boom 💥 — your branch is back!

🧹 Bonus Tip: Don't Wait Too Long

Git eventually garbage collects old commits, so try to restore the branch as soon as possible to avoid permanent loss.

✅ Summary

Action	Command
View Git reflog	`git reflog`
Restore branch	`git checkout -b branch-name <commit-hash>`

By keeping this trick in your Git toolbox, you’ll never fear accidental branch deletions again. Happy coding! 🧑‍💻✨

🧑‍💻 How to Build a Simple Blog in React (Step-by-Step for Beginners)

ncutixavier — Mon, 19 May 2025 16:44:33 +0000

If you're new to React and want to create your very first project, this guide is for you! In this article, we'll build a simple blog website using:

✅ React (via Create React App)
✅ JavaScript (no TypeScript, no back-end)
✅ CSS for styling
✅ React Router for navigation
✅ Clean file and folder structure

Let’s dive in! 🚀

📦 Step 1: Create the Project

Open your terminal and run the following commands:

npx create-react-app react-blog
cd react-blog
npm install react-router-dom

create-react-app sets up a complete React project for you.
react-router-dom lets us add page navigation (called “routing”) to our app.

📁 Step 2: Set Up Folder Structure

Inside the src/ folder, organize it like this:

src/
├── assets/            # (Optional) Images, icons
├── components/        # Reusable UI components (e.g., Header)
├── data/              # Static blog post data
├── pages/             # Main pages (Home, PostDetail, NotFound)
├── App.js             # Main component
├── App.css            # Global styles
└── index.js           # Entry point

Why? Because clean structure = easy maintenance, especially as your project grows.

🧭 Step 3: Set Up Routing in `App.js`

Create 3 simple pages:

Home page (list of blog posts)
Post detail page (single blog post)
404 page (when page not found)

`src/App.js`

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import PostDetail from "./pages/PostDetail";
import NotFound from "./pages/NotFound";
import "./App.css";

function App() {
  return (
    <Router>
      <Header />
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/post/:id" element={<PostDetail />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Routes contains all available pages.
path="/" is the home page.
:id is a dynamic part (e.g., /post/1) used for individual posts.

🔗 Step 4: Create the Header

`src/components/Header.js`

import { Link } from "react-router-dom";
import "./Header.css";

const Header = () => (
  <header className="header">
    <h1><Link to="/">My Blog</Link></h1>
  </header>
);

export default Header;

`src/components/Header.css`

.header {
  background-color: #333;
  color: white;
  padding: 20px;
}

.header a {
  color: white;
  text-decoration: none;
}

This gives your app a simple but clean top navigation bar.

📰 Step 5: Add Blog Post Data

Create some fake blog posts to display.

`src/data/posts.js`

const posts = [
  {
    id: 1,
    title: "First Blog Post",
    excerpt: "This is a short intro to the first blog post.",
    content: "This is the full content of the first blog post. Welcome!"
  },
  {
    id: 2,
    title: "Second Blog Post",
    excerpt: "A quick teaser of the second post...",
    content: "Full content of the second blog post goes here."
  }
];

export default posts;

🏠 Step 6: Home Page – List Blog Posts

`src/pages/Home.js`

import { Link } from "react-router-dom";
import posts from "../data/posts";

const Home = () => {
  return (
    <div>
      <h2>Latest Posts</h2>
      {posts.map((post) => (
        <div key={post.id} className="post-preview">
          <h3><Link to={`/post/${post.id}`}>{post.title}</Link></h3>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </div>
  );
};

export default Home;

We loop through the posts array and show the title and excerpt.
Each title is clickable, leading to the full blog post.

📄 Step 7: Post Detail Page

`src/pages/PostDetail.js`

import { useParams } from "react-router-dom";
import posts from "../data/posts";

const PostDetail = () => {
  const { id } = useParams();
  const post = posts.find((p) => p.id === parseInt(id));

  if (!post) {
    return <h2>Post not found.</h2>;
  }

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
};

export default PostDetail;

useParams() grabs the :id from the URL.
We find the matching post by ID and show its full content.

❌ Step 8: NotFound Page

`src/pages/NotFound.js`

const NotFound = () => {
  return <h2>404 - Page Not Found</h2>;
};

export default NotFound;

This page appears when the route doesn’t match any existing route.

🎨 Step 9: Add Some CSS

`src/App.css`

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
}

.container {
  padding: 20px;
  max-width: 800px;
  margin: auto;
  background: white;
}

.post-preview {
  margin-bottom: 20px;
}

a {
  color: #007bff;
  text-decoration: none;
}

Just some basic styles to make your app more pleasant.

🚀 Next Steps (Optional)

Want to make it even better?

Add forms to create new posts
Use localStorage to save posts
Connect to a real back-end using Firebase or Node.js
Add categories or tags

✅ Add Joi Validation Middleware

ncutixavier — Thu, 15 May 2025 08:01:34 +0000

Let's add validation using Joi to our existing Node.js + Express blog API, specifically for creating articles.

📦 Step 1: Install Joi

npm install joi

📁 Step 2: Create a Middleware File

Create a file: middlewares/validateArticle.js

const Joi = require('joi');

// Define the schema
const articleSchema = Joi.object({
  title: Joi.string().min(3).max(100).required(),
  content: Joi.string().min(10).required(),
  author: Joi.string().min(3).required()
});

// Middleware to validate request body
function validateArticle(req, res, next) {
  const { error } = articleSchema.validate(req.body);
  if (error) {
    return res.status(400).json({ error: error.details[0].message });
  }
  next();
}

module.exports = validateArticle;

🧠 What this does:

It checks that:
- title is a string between 3–100 chars
- content is at least 10 chars
- author is required and at least 3 chars
If validation fails, it sends a 400 response with a message like:

  "title" is not allowed to be empty

🧪 Step 3: Use the Middleware in the POST Route

In your route file (or server.js, depending on your structure):

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const Article = require('./models/article');
const validateArticle = require('./middlewares/validateArticle');

const app = express();
app.use(express.json());
app.use(cors());

// POST with validation middleware
app.post('/api/articles', validateArticle, async (req, res) => {
  try {
    const newArticle = new Article(req.body);
    const savedArticle = await newArticle.save();
    res.status(201).json(savedArticle);
  } catch (err) {
    res.status(500).json({ error: 'Server error while creating article' });
  }
});

✅ Example of a Valid Request

{
  "title": "How to Use Joi",
  "content": "Joi is a powerful schema description and validation tool...",
  "author": "Xavier"
}

❌ Example of Invalid Request

{
  "title": "",
  "content": "short",
  "author": ""
}

Response:

{
  "error": "\"title\" is not allowed to be empty"
}

📝 CRUD Operation with Node.js, Express & MongoDB

ncutixavier — Sun, 11 May 2025 23:09:36 +0000

This guide teaches how to build a simple Blog Article CRUD API using:

Node.js – runtime to run JavaScript on the server
Express – web framework for building APIs
MongoDB – NoSQL database
Mongoose – MongoDB ODM (object-document mapper)

🛠️ Step 1: Setup the Project

1. Create a folder and initialize npm:

mkdir blog-crud && cd blog-crud
npm init -y

2. Install required packages:

npm install express mongoose body-parser

express: Web framework
mongoose: Connect and interact with MongoDB
body-parser: Parse incoming JSON request bodies

📁 Step 2: Project Structure

Organize your project files like this:

blog-crud/
├── models/
│   └── Article.js        # Mongoose schema
├── routes/
│   └── articles.js       # Route handlers
├── server.js             # Main app entry
├── package.json

🚀 Step 3: Create the Express Server (`server.js`)

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const articleRoutes = require('./routes/articles');

const app = express();

// Middleware to parse JSON
app.use(bodyParser.json());

// Route prefix: All article routes will start with /api/articles
app.use('/api/articles', articleRoutes);

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/blog_crud', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => console.log('✅ MongoDB Connected'))
  .catch(err => console.error('❌ DB Connection Error:', err));

// Start the server
app.listen(3000, () => console.log('🚀 Server running at http://localhost:3000'));

Explanation:

This is your main app file.
It sets up Express, connects to MongoDB, and loads article routes.

📦 Step 4: Create the Article Schema (`models/Article.js`)

const mongoose = require('mongoose');

const articleSchema = new mongoose.Schema({
  title: String,
  content: String,
  author: String,
  createdAt: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('Article', articleSchema);

Explanation:

Defines the structure of each Blog Article in the database.
Includes fields like title, content, author, and createdAt.

🔁 Step 5: Create CRUD Routes (`routes/articles.js`)

const express = require('express');
const router = express.Router();
const Article = require('../models/Article');

🔹 1. Create a new Article (POST `/api/articles`)

router.post('/', async (req, res) => {
  try {
    const article = await Article.create(req.body);
    res.status(201).json(article);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

Accepts JSON { title, content, author } and stores it in the database.

🔹 2. Read All Articles (GET `/api/articles`)

router.get('/', async (req, res) => {
  try {
    const articles = await Article.find();
    res.json(articles);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

Returns all articles stored in the database.

🔹 3. Read a Single Article by ID (GET `/api/articles/:id`)

router.get('/:id', async (req, res) => {
  try {
    const article = await Article.findById(req.params.id);
    if (!article) return res.status(404).json({ message: 'Not found' });
    res.json(article);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

Fetches a specific article using its ID.

🔹 4. Update an Article (PUT `/api/articles/:id`)

router.put('/:id', async (req, res) => {
  try {
    const updated = await Article.findByIdAndUpdate(
      req.params.id,
      req.body,
      { new: true } // return the updated document
    );
    if (!updated) return res.status(404).json({ message: 'Not found' });
    res.json(updated);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

Edits article details like title or content.

🔹 5. Delete an Article (DELETE `/api/articles/:id`)

router.delete('/:id', async (req, res) => {
  try {
    const deleted = await Article.findByIdAndDelete(req.params.id);
    if (!deleted) return res.status(404).json({ message: 'Not found' });
    res.json({ message: '✅ Article deleted' });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

Deletes the selected article from the database.

Finally routes/articles.js

const express = require('express');
const router = express.Router();
const Article = require('../models/Article');

// ✅ Create an article
router.post('/', async (req, res) => {
  try {
    const article = await Article.create(req.body);
    res.status(201).json(article);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

// 📖 Get all articles
router.get('/', async (req, res) => {
  try {
    const articles = await Article.find();
    res.json(articles);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// 📄 Get a single article by ID
router.get('/:id', async (req, res) => {
  try {
    const article = await Article.findById(req.params.id);
    if (!article) return res.status(404).json({ message: 'Not found' });
    res.json(article);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// ✏️ Update an article
router.put('/:id', async (req, res) => {
  try {
    const updated = await Article.findByIdAndUpdate(req.params.id, req.body, { new: true });
    if (!updated) return res.status(404).json({ message: 'Not found' });
    res.json(updated);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

// ❌ Delete an article
router.delete('/:id', async (req, res) => {
  try {
    const deleted = await Article.findByIdAndDelete(req.params.id);
    if (!deleted) return res.status(404).json({ message: 'Not found' });
    res.json({ message: 'Article deleted' });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

🧪 Step 6: Testing the API

Use tools like Postman, Insomnia, or curl:

Create:

  curl -X POST http://localhost:3000/api/articles \
    -H "Content-Type: application/json" \
    -d '{"title": "My First Blog", "content": "Hello world!", "author": "Xavier"}'

Read All:

  curl http://localhost:3000/api/articles

Read One:

  curl http://localhost:3000/api/articles/<article_id>

Update:

  curl -X PUT http://localhost:3000/api/articles/<article_id> \
    -H "Content-Type: application/json" \
    -d '{"title": "Updated Title"}'

Delete:

  curl -X DELETE http://localhost:3000/api/articles/<article_id>

✅ Final Notes

Make sure MongoDB is running locally (mongodb://localhost:27017)
Keep practicing with different data
You can later connect this API to a front-end using React or Vue
Keep exploring how to implement validation. https://dev.to/ncutixavier/add-joi-validation-middleware-cda

Steps to Generate APK with Expo - React Native

ncutixavier — Thu, 05 Sep 2024 19:00:33 +0000

Ensure Your App is Ready for Build:

Ensure your app is configured correctly and works as expected in development.
Ensure that all assets and code are correctly set up.

Install Expo CLI (if not already installed):

If you don’t have the Expo CLI installed yet, run the following command:

npm install -g expo-cli

Login to Expo

If you don't have an account on expo, sign up here https://expo.dev/signup, and ensure you're logged in to Expo.

Then, You can log in using:

expo login

Install EAS CLI (Expo Application Services):

Run the following command to install EAS CLI globally:

npm install -g eas-cli

Verify the installation by running the following:

eas --version

Once installed, you can proceed with the APK build command:

eas build --platform android

Let me know in the comments how it goes.
Happy Coding!

Let's get started with React Native + Expo

ncutixavier — Sat, 20 Jul 2024 14:45:33 +0000

Step 1: Install Node.js 20

Make sure you have at least Node.js version 20 installed. If not, use nvm to get it. Run:

nvm install 20

To use it, run:

nvm use 20

Step 2: Install Expo CLI

If you don't have expo-cli yet, install it globally with:

npm i -g expo-cli

Step 3: Create Your Project

For JavaScript:

Run:

npx create-expo-app my-project --template blank

Replace "my-project" with your project name.

For TypeScript:

Run:

npx create-expo-app my-project --template blank-typescript

Replace "my-project" with your project name.

Additional Setup for TypeScript:

a. Install TypeScript and necessary types:

npm install --save-dev typescript @types/react @types/react-native

b. To run on the web, install these packages:

npm install react-native-web@~0.19.10 react-dom@18.2.0 @expo/metro-runtime@~3.2.1

Conclusion 🎉

Now you're all set to create an awesome React native with Expo project, whether you prefer JavaScript or TypeScript. Follow the next article where we continue to set up Redux Toolkit and Axios. Happy coding! 🚀

Installing node using Rosetta 2 (Only for Macbook Users)

ncutixavier — Mon, 15 Jul 2024 08:46:10 +0000

Let's suppose that you want to install node@14.

For instance, if you need node version 14.21.3, install it using Rosetta 2, which allows running Intel-based applications on Apple Silicon Macs. Here's how:

Install Rosetta 2 if not already done: Search online
Open Terminal in Rosetta mode:

Right-click Terminal app -> Get Info
Check the "Open using Rosetta" checkbox
Restart Terminal
In the Rosetta Terminal, try installing again: nvm install 14.21.3

Implementing Masonry Grid with HTML, CSS, and JS

ncutixavier — Sun, 28 Apr 2024 22:04:44 +0000

Keeping your website's design adaptable and visually appealing can be a challenge. This article explores Masonry.js, a powerful JavaScript library that helps developers create beautiful and responsive grid layouts. By utilizing Masonry.js, you can ensure your website's content automatically adjusts and rearranges itself for optimal viewing on any device, from desktops to tablets and smartphones.

Requirements

You can install a masonry package through https://www.npmjs.com/package/masonry-layout

You can use CDN

HTML

<div class="iam-news-avvisi-listing__container--content container-default">
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="picture">
      <img src="https://images.unsplash.com/photo-1713781317896-75f337b2db2a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="news" width="384" height="201">
    </div>
    <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">1 News</p>
        <p>14/11/2023</p>
      </div>
      <h2 class="content-card__title">Sciopero del settore igiene ambientale del 17/11/2023</h2>
      <p class="content-card__description news">
        Nell’intera giornata di venerdì 17 novembre, in occasione dello sciopero indetto dalle segreterie nazionali di alcune organizzazioni sindacali dei lavoratori del comparto di igiene ambientale, i servizi legati alla raccolta rifiuti e ai Centri di Raccolta potrebbero subire sospensioni o riduzioni . Nelle ore di sciopero saranno comunque garantiti i servizi essenziali e saranno assicurate le prestazioni indispensabili a tutela della sicurezza, nel rispetto degli accordi applicativi della Legge 146/90, così come modificata dalla Legge n. 83/2000 e successive deliberazioni della Commissione di Garanzia che regolamentano l’esercizio del diritto di sciopero. Le attività riprenderanno regolarmente al termine della giornata di sciopero con l’adozione di tutte le misure organizzative necessarie a ripristinare la regolarità dei servizi. Il recupero dei mancati passaggi della raccolta porta a porta avverrà in occasione del successivo passaggio previsto dai calendari. 
      </p>
      <div class="content-card__bottom">
        <a href="/content/iam/comune/news-e-avvisi/dettaglio.html?id=47&amp;comune=BERCETO" class="">LEGGI TUTTO</a>
      </div>
    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">2 Avvisi</p>
        <p>05/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Con la presente comunichiamo che l'Ecosportello di Strada Santa Margherita di Parma sarà chiuso nella giornata del 13.01.2024 per festività Patronale. Il team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente
      </p>
    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">3 Avvisi</p>
        <p>05/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Con la presente comunichiamo che l'Ecosportello di Strada Santa Margherita di Parma sarà chiuso nella giornata del 13.01.2024 per festività Patronale. Il team Iren Ambiente 
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">4 Avvisi</p>
        <p>05/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Con la presente comunichiamo che l'Ecosportello di Strada Santa Margherita di Parma sarà chiuso nella giornata del 13.01.2024 per festività Patronale. Il team Iren Ambiente 
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="picture">
      <img src="https://images.unsplash.com/photo-1713781317896-75f337b2db2a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="news" width="384" height="201">
    </div>
    <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">5 News</p>
        <p>14/11/2023</p>
      </div>
      <h2 class="content-card__title">Sciopero del settore igiene ambientale del 17/11/2023</h2>
      <p class="content-card__description news">
        Nell’intera giornata di venerdì 17 novembre, in occasione dello sciopero indetto dalle segreterie nazionali di alcune organizzazioni sindacali dei lavoratori del comparto di igiene ambientale, i servizi legati alla raccolta rifiuti e ai Centri di Raccolta potrebbero subire sospensioni o riduzioni . Nelle ore di sciopero saranno comunque garantiti i servizi essenziali e saranno assicurate le prestazioni indispensabili a tutela della sicurezza, nel rispetto degli accordi applicativi della Legge 146/90, così come modificata dalla Legge n. 83/2000 e successive deliberazioni della Commissione di Garanzia che regolamentano l’esercizio del diritto di sciopero. Le attività riprenderanno regolarmente al termine della giornata di sciopero con l’adozione di tutte le misure organizzative necessarie a ripristinare la regolarità dei servizi. Il recupero dei mancati passaggi della raccolta porta a porta avverrà in occasione del successivo passaggio previsto dai calendari. 
      </p>
      <div class="content-card__bottom">
        <a href="/content/iam/comune/news-e-avvisi/dettaglio.html?id=47&amp;comune=BERCETO" class="">LEGGI TUTTO</a>
      </div>
    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="picture">
      <img src="https://images.unsplash.com/photo-1713781317896-75f337b2db2a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="news" width="384" height="201">
    </div>
    <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">6 News</p>
        <p>14/11/2023</p>
      </div>
      <h2 class="content-card__title">Sciopero del settore igiene ambientale del 17/11/2023</h2>
      <p class="content-card__description news">
        Nell’intera giornata di venerdì 17 novembre, in occasione dello sciopero indetto dalle segreterie nazionali di alcune organizzazioni sindacali dei lavoratori del comparto di igiene ambientale, i servizi legati alla raccolta rifiuti e ai Centri di Raccolta potrebbero subire sospensioni o riduzioni . Nelle ore di sciopero saranno comunque garantiti i servizi essenziali e saranno assicurate le prestazioni indispensabili a tutela della sicurezza, nel rispetto degli accordi applicativi della Legge 146/90, così come modificata dalla Legge n. 83/2000 e successive deliberazioni della Commissione di Garanzia che regolamentano l’esercizio del diritto di sciopero. Le attività riprenderanno regolarmente al termine della giornata di sciopero con l’adozione di tutte le misure organizzative necessarie a ripristinare la regolarità dei servizi. Il recupero dei mancati passaggi della raccolta porta a porta avverrà in occasione del successivo passaggio previsto dai calendari. 
      </p>
      <div class="content-card__bottom">
        <a href="/content/iam/comune/news-e-avvisi/dettaglio.html?id=47&amp;comune=BERCETO" class="">LEGGI TUTTO</a>
      </div>
    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">7 Avvisi</p>
        <p>05/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Con la presente comunichiamo che l'Ecosportello di Strada Santa Margherita di Parma sarà chiuso nella giornata del 13.01.2024 per festività Patronale. Il team Iren Ambiente 
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">8 Avvisi</p>
        <p>24/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">9 Avvisi</p>
        <p>24/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente 
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
   <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">10 Avvisi</p>
        <p>24/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente
      </p>

    </div>
   </div>
  </div>

            </div>

CSS

body {
    color: #374046;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.15em;
}

.content-card {
  background-color: silver;
  border-radius: 24px;
  box-shadow: 0px 8px 18px -6px #0033A01A;
  width: 390px;
  margin-bottom: 24px;
}

@media (max-width: 786px) {
  .content-card {
    width: 330px;
  }
}

.card {
  padding: 24px;
}

img {
  width: 100%;
}

.container-default {
  margin: 0 auto;
}

.news {
      overflow: hidden;
    display: -webkit-box !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

var grid = document.querySelector('.container-default');
var msnry = new Masonry(grid, {
  itemSelector: '.content-card',
  horizontalOrder: true,
  gutter: 20,
  fitWidth: true
});

Notes

If you plan to use Masonry.js in a project that fetches data, make sure to run the Masonry code after your data has been successfully retrieved.

References

Session in PHP with an example

ncutixavier — Sun, 28 Apr 2024 21:43:25 +0000

Sessions in PHP are a mechanism to store user-specific information across multiple web pages. This is useful when you need to track a user's state within your application, such as keeping items in a shopping cart or remembering their login status.

Here's how sessions work in PHP:

Starting a Session: You initiate a session using the session_start() function. This function either retrieves an existing session associated with the user (identified by a session ID) or creates a new session if one doesn't exist.
Storing Session Data: You can store data related to the user in the session using the associative array $_SESSION. This array acts like a container where you can assign key-value pairs. For example, $_SESSION["username"] = "johnDoe"; stores the username "johnDoe" under the key "username".
Accessing Session Data: On subsequent pages within the same session, you can access the stored data using the $_SESSION array. The values can be used for various purposes, like personalizing content or remembering user preferences.
Destroying Sessions: Sessions can expire automatically when the user closes the browser or after a specific period of inactivity. You can also explicitly destroy a session using the session_destroy() function.

Here's an example to illustrate these concepts:

login.php:

<?php
session_start();

if (isset($_POST['username']) && isset($_POST['password'])) {
  // Simulate successful login (replace with actual authentication logic)
  $_SESSION['username'] = $_POST['username'];
  header('Location: profile.php');
  exit;
}
?>

<!DOCTYPE html>
<html>
<body>
<form method="post">
  Username: <input type="text" name="username" required><br>
  Password: <input type="password" name="password" required><br>
  <button type="submit">Login</button>
</form>
</body>
</html>

profile.php:

<?php
session_start();

if (!isset($_SESSION['username'])) {
  header('Location: login.php');
  exit;
}

$username = $_SESSION['username'];
?>

<!DOCTYPE html>
<html>
<body>
  Welcome, <?php echo $username; ?>! This is your profile page.
</body>
</html>

In this example:

login.php checks for submitted login credentials. If valid (replace with actual authentication), it stores the username in the session ($_SESSION['username']) and redirects to profile.php.
profile.php starts the session and checks if a username is present in the session. If not, it redirects back to the login page. If a username exists, it welcomes the user by name using the retrieved session data.

This is a basic example of using sessions in PHP. You can extend this concept to store various user-specific information and manage user state across your web application. Remember to always implement proper security measures when handling user data in sessions.

How to squash commit using #git reset --soft

ncutixavier — Mon, 22 May 2023 18:50:49 +0000

To squash commits using git reset --soft, you need to follow a few steps. Please note that squashing commits can rewrite the commit history, so be cautious and ensure you have a backup of your repository before proceeding.

Here's the process:

Identify the number of commits you want to squash. Suppose you have three commits with the following commit messages: Commit A, Commit B, and Commit C.
Open your terminal or command prompt and navigate to the repository's directory.
Execute the following command, replacing <commit> with the commit hash of the commit preceding the commits you want to squash (in this example, it's Commit A):

   git reset --soft <commit>

For example:

   git reset --soft abcdef12345

This command moves the branch pointer to the specified commit while keeping your changes staged.

Now, run the command:

   git commit

This will open your default text editor to edit the commit message. By default, Git provides a message that includes the commit messages of all the squashed commits. You can modify this message to represent the squashed changes. Remove the lines corresponding to the commits you want to squash, save, and exit the editor.

Git will create a new commit with the updated message, combining the changes from the squashed commits.
Optionally, you can push the changes to the remote repository using:

   git push origin <branch-name>

Replace <branch-name> with the name of your branch.

That's it! You have successfully squashed the desired commits using git reset --soft. Remember to be cautious while modifying commit history, especially if you are collaborating with others on the repository.

How to access global variable value using scope in JavaScript

ncutixavier — Thu, 29 Jul 2021 11:40:11 +0000

Here, I found a good way to access value of global variable in js.

//Let's declare global variable, you must use 'var'
{
 var a = 10
}

function printNumber(){
 return a
}

console.log(printNumber()) //Ans: 10