DEV Community: Moncef

4 Pro CSS Tricks Will Blow Your Mind

Moncef — Wed, 10 Jul 2024 17:53:32 +0000

CSS (Cascading style sheets) is one of the most popular technologies in web design, allowing developers to create visual and responsive designs. As a web developer, mastering CSS is crucial for bringing your design vision to life and ensuring a good user experience across all devices. Here are some tips you might not know in CSS:

1. Neumorphsime:

Neumorphsime referred to soft UI design, is a popular design trend combining skeuomorphism and flat design. this style uses shadows and highlights to create a smooth look. here is how it works:

First, we create a subtle background: to start with Neumotphsime, choose a soft background color like light gray,

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

then we create an element with these styles

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

finally, we add a box-shadow to the element when hovering

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

so we get this nice look

and you can make this too

just add an inset to the box shadow like this

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() and clamp():

these tools are making websites and apps more dynamic and responsive. you can use these functions to control element sizing and resizing. and creating flexible typography here how:

the min() function lets you set the smallest value from a list here how

before

.container {
  width:800px;
  max-width:90%;
}

after

.container{
  width: min(800px,90%);
}

the max() function works the same as the min() function but takes the bigger value from a list here is how:

.container{
  width: max(800px,90%);
}

sometimes you you set the width and min and max-width in one container there is another function named clamp() here is how it works

before

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

After

.container {
  width: clamp(400px,50vw,800px);
}

3. The :Has() and :Not() selector:

the :not() selector represents elements that do not match a list of selectors

.container:not(:first-child) {
  background-color: blue;
}

the :has() selector represents an element if any of the relative selectors that are passed to as an argument match

.container:has(svg) {
  padding: 20px;
}

4. Text gradient:

for this trick, we can't add a gradient to the text color directly like this

.text{
  color: linear-gradient(to right, red,blue);
}

what we do instead

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

and voila we get this awesome effect

Conclusion:

By mastering one of these CSS techniques, you are going to elevate your web design skills to new heights. with only small adjustments with those techniques, you can lead to visually stunning results, and make your design more beautiful and user-friendly.

you can check more in: https://designobit.com/

Axios Vs Fetch: Which Should You Use For Your HTTP Requests?

Moncef — Tue, 09 Jul 2024 11:34:35 +0000

For most developers, fetching data is essential for modern applications to interact with APIs coming from the backend. and to achieve that we have several options the most popular ones are AXIOS and FETCH. while both have the same basic functions, at the same time they offer different features and developer experience. This article will dive deeper into the difference between both technologies, helping you decide which best suits your needs.

Why do we need HTTP request tools?

HTTP request tools are important for handling complex responses, especially handling errors and parsing responses, tools like Axios and Fetch simplify these tasks by providing some features such as:

Error Handling
Cross-browser Compatibility
Handling Asynchronous Operations
Simplifying Network Requests
Developer-Experience

Fetch API: The fetch API is a built-in browser and javascript method for making HTTP requests. It is a more powerful and flexible replacement for XMLHttpRequest.

Fetch API Usage

fetch(URL)
  .then(response=>{
      //Handle response
  })
  .catch(error=>{
      //Handle error
  })

Axios: Axios is a popular third-party library for making HTTP requests. It makes managing and manipulating requests easier.

Axios installation

$ npm install axios

Axios usage

import axios from 'axios';

axios.get('https://api.example.com/data') 
  .then(response => { console.log(response.data) }) 
  .catch(error => { console.error('Error:', error) });

Key differences

Handling JSON

Fetch: Requires manual conversion of response data to JSON

fetch('https://api.example.com/data')
  .then(response => response.json()) // Manual conversion
  .then(data => console.log(data));

Axios: Automaticlly parses JSON responses

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data)); // Automatic conversion

Handling error

Fetch: Reject only a network error promise, not an HTTP error (e.g., 404 or 500 status codes).

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .catch(error => console.error('Fetch error:', error));

Axios: Rejects a promise for both network errors and HTTP errors.

axios.get('https://api.example.com/data')
  .catch(error => console.error('Axios error:', error));

Request Configuration

Fetch: Requires manual configuration of options like headers and method

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

Axios: Provides a more concise and readable syntax for configuration.

axios.post('https://api.example.com/data', { key: 'value' }, {
  headers: {
    'Content-Type': 'application/json'
  }
});

Conclusion

both Axios and Fetch are excellent for fetching data in Javascript, they offer lots of features, ease of use, and reliable performance, but you need to consider these 3 things before using one of them:

Use Fetch when:

you prefer using a built-in API without additional dependencies
your project needs to stay lightweight
you are comfortable handling JSON transformation and error checking manually

Use Axios when:

It would be best to go with a cleaner syntax and more readable code.
You want built-in support for request and response interceptors, timeout, and cancellation.
You prefer automatic JSON transformation and simpler error handling.

by knowing these factors, you are ready to make a decision that fits your project’s requirements and your developer experience