DEV Community: Justice-hub

5 resources to create your next CSS background

Justice-hub — Sat, 18 Mar 2023 10:21:15 +0000

Whenever developing a new website or a new application we need to take into account which background we will use. Finding a property background for your design is quite hard. You need to take the existing color palette into account, the color composition between the elements in the section, and the type of design you want to accomplish.

With these resources, you would find it easier to create or find your next background for your next project!

getwaves.io

This resource is really simple and extremely good when you try to create a wave. The waves are commonly used when trying to make a transition between two sections on a website in a creative manner. This tool has a simple dashboard as you see in the image, and that is all you need. You can choose between lines, bars, or waves as the design. Select your color defined as a hex color and add some transparency if needed. The third option lets you choose how many waves should be added. When you drag the ball it will automatically update the wave and you will instantly see the number of waves applied. The last option is to ‘shake’ to design, and regenerate the waves so that they will fit right into your design.

svgbackgrounds.com

If you want to create a full-page background with a more creative pattern you can use the svgbackgrounds.com website. This site provides multiple options whether you like some multi-gradient colors to abstract line art. Here you also have the option to change the colors used on the background so you can easily make it fit into the current design of your website. You can also adjust the opacity and depending on the design, further adjust the design by changing the stroke, moving lines etc.

Finally, you have the option as seen on the left bar, to copy the CSS output directly and put it into your website. This website provides SVG backgrounds, so you don’t need to worry about the scaling of images, since the vector elements will take care of it.

coolbackgrounds.io

coolbackgrounds.com is also a simple website that provides some advanced patterns. You can choose between 5 options as seen on the left. You can choose your base color on the top navigation and hereby all 5 options will have generated some designs based on that color. If you choose the particles option, you will see all the particles moving like gifs. You can also adjust the designs by clicking the color palette on the right bottom as well as downloading the design. This website does not have the same flexibility and options as svg backgrounds but is still a nifty tool if the design generated is what you need on your site.

pixabay.com

Pixabay is another free image resource site just like unsplash.com where you can use the images without being concerned about copyright infringement. What I really like about Pixabay is you have the option to choose between illustrations, vector videos and music. You have multiple media combined into one single site, so if you eventually wanna change your landing page from a fancy background image to a video you can find it here. Pixabay has over 2.7 million royalty-free stock photos free to use and you have the option to filter by colors, size, orientation etc. so you can easily find the right photo for your site.

undraw.co

Undraw provides simple illustrations that has gained popularity in the last couple of years. You can find all different kinds of illustrations based on your need and can search for a particular theme like ‘sport’ or ‘finance’ and you will see some illustrations that might matter to you. What is so needed, is you can change the color of the illustrations in the right top corner and all the illustrations will have that color like illustrated in the image above. What is also perfect is that it is open-source and you can use them for free.

Thanks for reading

I hope you found this helpful ✨! If you did, please don't forget to hit the like ❤️ button and save 🔖 it for future reference.

Check out my Website and GitHub

Hey there! Want to stay up-to-date with the latest programming and web development tips and resources? Follow me on Twitter and Instagram! I'll be sharing all sorts of helpful insights and cool tools for you to check out. See you there! 👋🏼💻

And visit my DEV and Hashnode for more articles like this.

Top 20 React interview questions.

Justice-hub — Fri, 24 Feb 2023 08:00:00 +0000

As a React developer, it is important to have a solid understanding of the framework's key concepts and principles. With this in mind, I have put together a list of 20 important questions that every React developer should know, whether they are interviewing for a job or just looking to improve their skills.

Before diving into the questions and answers, I suggest trying to answer each question on your own before looking at the answers provided. This will help you gauge your current level of understanding and identify areas that may need further improvement.

Let's get started!

01. What is React and what are its benefits?

Ans: React is a JavaScript library for building user interfaces. It is used for building web applications because it allows developers to create reusable UI components and manage the state of the application in an efficient and organized way.

02. What is the virtual DOM and how does it work?

**Ans: **The Virtual DOM (Document Object Model) represents the actual DOM in the browser. It enables React to update only the specific parts of a web page that need to change, instead of rewriting the entire page, leading to increased performance.

When a component's state or props change, React will first create a new version of the Virtual DOM that reflects the updated state or props. It then compares this new version with the previous version to determine what has changed.

Once the changes have been identified, React will then update the actual DOM with the minimum number of operations necessary to bring it in line with the new version of the Virtual DOM. This process is known as "reconciliation".

The use of a Virtual DOM allows for more efficient updates because it reduces the amount of direct manipulation of the actual DOM, which can be a slow and resource-intensive process. By only updating the parts that have actually changed, React can improve the performance of an application, especially on slow devices or when dealing with large amounts of data.

03. How does React handle updates and rendering?

Ans: React handles updates and rendering through a virtual DOM and component-based architecture. When a component's state or props change, React creates a new version of the virtual DOM that reflects the updated state or props, then compares it with the previous version to determine what has changed. React updates the actual DOM with the minimum number of operations necessary to bring it in line with the new version of the virtual DOM, a process called "reconciliation". React also uses a component-based architecture where each component has its own state and render method. It re-renders only the components that have actually changed. It does this efficiently and quickly, which is why React is known for its performance.

04. Explain the concept of Components in React?

Ans: A React component is a JavaScript function or class that returns a React element, which describes the UI for a piece of the application. Components can accept inputs called "props", and manage their own state.

05. What is JSX and why is it used in React?

Ans: JSX is a syntax extension for JavaScript that allows embedding HTML-like syntax in JavaScript. It is used in React to describe the UI, and is transpiled to plain JavaScript by a build tool such as Babel.

06. What is the difference between state and props?

Ans: State and props are both used to store data in a React component, but they serve different purposes and have different characteristics.

Props (short for "properties") are a way to pass data from a parent component to a child component. They are read-only and cannot be modified by the child component.

State, on the other hand, is an object that holds the data of a component that can change over time. It can be updated using the setState() method and is used to control the behavior and rendering of a component.

07. What is the difference between controlled and uncontrolled components in React?

Ans: In React, controlled and uncontrolled components refer to the way that forms are handled. A controlled component is a component where the state of the form is controlled by React, and updates to the form's inputs are handled by event handlers. An uncontrolled component, on the other hand, relies on the default behavior of the browser to handle updates to the form's inputs.

A controlled component is a component where the value of input fields is set by state and changes are managed by React's event handlers, this allows for better control over the form's behavior and validation, and it makes it easy to handle form submission.

On the other hand, an uncontrolled component is a component where the value of the input fields is set by the default value attribute, and changes are managed by the browser's default behavior, this approach is less performant and it's harder to handle form submission and validation.

08. What is Redux and how does it work with React?

Ans: Redux is a predictable state management library for JavaScript applications, often used with React. It provides a centralized store for the application's state, and uses pure functions called reducers to update the state in response to actions.

In a React app, Redux is integrated with React via the react-redux library, which provides the connect function for connecting components to the Redux store and dispatching actions. The components can access the state from the store, and dispatch actions to update the state, via props provided by the connect function.

09. Can you explain the concept of Higher Order Components (HOC) in React?

Ans: A Higher Order Component (HOC) in React is a function that takes a component and returns a new component with additional props. HOCs are used to reuse logic across multiple components, such as adding a common behavior or styling.

HOCs are used by wrapping a component within the HOC, which returns a new component with the added props. The original component is passed as an argument to the HOC, and receives the additional props via destructuring. HOCs are pure functions, meaning they do not modify the original component, but return a new, enhanced component.

For example, an HOC could be used to add authentication behavior to a component, such as checking if a user is logged in before rendering the component. The HOC would handle the logic for checking if the user is logged in, and pass a prop indicating the login status to the wrapped component.

HOCs are a powerful pattern in React, allowing for code reuse and abstraction, while keeping the components modular and easy to maintain.

10. What is the difference between server-side rendering and client-side rendering in React?

Ans: Server-side rendering (SSR) and client-side rendering (CSR) are two different ways of rendering a React application.

In SSR, the initial HTML is generated on the server, and then sent to the client, where it is hydrated into a full React app. This results in a faster initial load time, as the HTML is already present on the page, and can be indexed by search engines.

In CSR, the initial HTML is a minimal, empty document, and the React app is built and rendered entirely on the client. The client makes API calls to fetch the data required to render the UI. This results in a slower initial load time, but a more responsive and dynamic experience, as all the rendering is done on the client.

11. What are React Hooks and how do they work?

Ans: React Hooks are a feature in React that allow functional components to have state and other lifecycle methods without using class components. They make it easier to reuse state and logic across multiple components, making code more concise and easier to read. Hooks include useState for adding state and useEffect for performing side effects in response to changes in state or props. They make it easier to write reusable, maintainable code.

12. How does React handle state management?

Ans: React handles state management through its state object and setState() method. The state object is a data structure that stores values that change within a component and can be updated using the setState() method. The state updates trigger a re-render of the component, allowing it to display updated values dynamically. React updates the state in an asynchronous and batched manner, ensuring that multiple setState() calls are merged into a single update for better performance.

13. How do work useEffect hook in React?

Ans: The useEffect hook in React allows developers to perform side effects such as data fetching, subscription, and setting up/cleaning up timers, in functional components. It runs after every render, including the first render, and after the render is committed to the screen. The useEffect hook takes two arguments - a function to run after every render and an array of dependencies that determines when the effect should be run. If the dependency array is empty or absent, the effect will run after every render.

14. Can you explain the concept of server-side rendering in React?

Ans: Server-side rendering (SSR) in React is the process of rendering components on the server and sending fully rendered HTML to the browser. SSR improves the initial loading performance and SEO of a React app by providing a fully rendered HTML to the browser, reducing the amount of JavaScript that needs to be parsed and executed on the client, and improving the indexing of a web page by search engines. In SSR, the React components are rendered on the server and sent to the client as a fully formed HTML string, improving the initial load time and providing a more SEO-friendly web page.

15. How does React handle events and what are some common event handlers?

**Ans: **React handles events through its event handling system, where event handlers are passed as props to the components. Event handlers are functions that are executed when a specific event occurs, such as a user clicking a button. Common event handlers in React include onClick, onChange, onSubmit, etc. The event handler receives an event object, which contains information about the event, such as the target element, the type of event, and any data associated with the event. React event handlers should be passed
as props to the components, and the event handlers should be defined within the component or in a separate helper function.

16. Can you explain the concept of React context?

Ans: React context is a way to share data between components without passing props down manually through every level of the component tree. The context is created with a provider and consumed by multiple components using the useContext hook.

17. How does React handle routing and what are some popular routing libraries for React?

Ans: React handles routing by using React Router library, which provides routing capabilities to React applications. Some popular routing libraries for React include React Router, Reach Router, and Next.js.

18. What are some best practices for performance optimization in React?

Ans: Best practices for performance optimization in React include using memoization, avoiding unnecessary re-renders, using lazy loading for components and images, and using the right data structures.

19. How does React handle testing and what are some popular testing frameworks for React?

Ans: React handles testing using testing frameworks such as Jest, Mocha, and Enzyme. Jest is a popular testing framework for React applications, while Mocha and Enzyme are also widely used.

20. How do you handle asynchronous data loading in React?

Ans: Asynchronous data loading in React can be handled using various methods such as the fetch API, Axios, or other network libraries. It can also be handled using the useState and useEffect hooks to trigger a state update when data is returned from the API call. It is important to handle loading and error states properly to provide a good user experience.

In conclusion, these are the top 20 major questions that a React developer should know in 2023. The questions cover a wide range of topics from the basics of React, its benefits and architecture, to more advanced concepts such as JSX, state and props, controlled and uncontrolled components, Redux, Higher Order Components, and more. By trying to answer each question yourself before looking at the answers, you can gain a deeper understanding of the React framework and become a better React developer.

Thanks for reading

Hope this is helpful ✨, Do Like ❤ & Save 🔖

Check out my Website and GitHub

Follow me on Twitter and Instagram, for more: Tips💡 + Resources ⚡ related to programming and Web Development 👨‍💻

And visit my DEV and Hashnode for more articles like this.

Cover photo by Lautaro Andreani on Unsplash

What is the Web?

Justice-hub — Sun, 22 Jan 2023 11:31:57 +0000

The web is also known as the World Wide Web or WWW. It was invented in the year 1989 by the British computer scientist Tim Berners-Lee. With the help of the internet, many peoples access the web through a web browser with their computer or other devices. A web page is a document that is written in a language called HTML. Here web browser understands the HTML and displays a web page. HTML supports graphics, audio, and video files. The HTTP protocol (Hypertext Transfer Protocol) is used to transfer data and share information on the web.

The web has three versions:

Web 1.0
Web 2.0
Web 3.0

What is the server?

A server is a software or hardware device that accepts and responds to requests made by another computer on a network. Another computer that requests and responds to the server is called the client. A Web Server consists of hardware and software that the web user requested WWW (World Wide Web) and HTTP (Hypertext Transfer Protocol) respond to the web server.

Some web server software:

Apache web server
Nginx
Boa Web Server
FoxServ Web Server
Lighttpd
Microsoft Web Server
Savant
Tomcat

Apache Web Server

Apache server also called the Apache HTTP server project or Apache, is a robust, commercial-grade, feature-rich, free, and open-source HTTP web server. It was launched in 1995. It is developed by the ASF (Apache Software Foundation)

Apache Live server

The live server is a little development server with live reload capability. It is used to run your HTML, CSS, and Javascript files into the local server, but not for deploying the final site.

Two reasons for using a live server:

After changes on the file, the page reloads automatically. It saves time in development.
With help of some Extention or commands live server is available on IDE.

live server extension on VS Code. It is developed by Ritwick Dey. It was launched in the year 2018.

What is HTML?

HTML is an acronym that stands for (Hyper Text Markup Language) which is used for creating web pages and web applications. It was developed by Tim Berners-Lee in the year 1993.

Hyper Text: It means "Text within Text". It helps to link two or more web pages with each other.
Markup Language: It tells the web browser how to display text, images, and other forms of multimedia on a webpage.

Note: The HTML file should be saved with a .html extension.

Most used HTML Tags:

HTML tags are used in every place of code. These tags tell the browser what type of data is displayed.

DOCTYPE

Before we start writing an HTML code we need to declare the document type at the beginning of the text file <!DOCTYPE html>. It should be written without any content inside it or breaking up. Anything that comes before the computer cannot recognize this declaration.

HTML Tag

It tells the browser that this is an HTML document. Inside this tag all other HTML tags except <!DOCTYPE>.

Head Tag

The <head> the tag contains metadata (data that describes data) contains which is machine readable like title, script, and style sheets.

Title Tag

The <title> tag is used to add a title to the HTML page which shows at the top of the web page title bar or a page's tab. Tags inside the title tag are ignored.

Body Tag

The <body> tag is used to represent content present inside an HTML page that is visible to us.

What if?

In HTML(v. 4.0.1) it is mandatory to include a <body> tag inside an HTML document but in HTML5 it is not necessary. But from a developer's perspective, it is good to include a <body> tag inside the document to structure it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Title</title>
</head>
<body>
     Example of an HTML file</body>
</html>

Heading Tag

It is used to represent the main heading of a webpage or a paragraph so that the user can understand what the paragraph is about. It contains six levels. <h1> is the highest level and <h6> its lowest level.

<h1> Highest level </h1>
<h2>...
<h3>...
<h4>...
<h5>...
<h6> Lowest level </h6>

Paragraph Tag

The <p> tag represents a paragraph. Paragraphs are block-level elements.

<p> I am paragraph tag </p>

Image Tag

An image tag is used to display an image on a web page. The image tag contains the source and attributes.

src: It contains the source or path of the image.
alt: It is an alternate text, if a browser can't display the image then it will show the text.

<img src="image URL" alt="I am src image"/>

Thanks for reading

Hope this is helpful ✨, Do Like ❤ & Save 🔖

Check out my Website and GitHub

Follow me on Twitter and Instagram, for more: Tips💡 + Resources ⚡ related to programming and Web Development 👨‍💻

And visit my DEV and Hashnode for more articles like this.

Photo by Maxwell Nelson on Unsplash

How to learn Javascript in 5 steps

Justice-hub — Tue, 08 Nov 2022 16:53:12 +0000

Learning a programming language can seem like a daunting task, but with a little discipline, Javascript can be learned in a relatively short amount of time. In this article, I will outline 5 steps to learning Javascript.

Although Javascript is a relatively simple language, it is still important to have a plan when learning it. Trying to learn Javascript without a plan is likely to lead to frustration and ultimately, abandonment of the language.

The first step is to find resources that are geared towards beginners. These resources should explain concepts in a way that is easy to understand. Additionally, they should provide examples that illustrate the concepts being taught.

The second step is to write code. A lot of code. It is important to get a feel for the syntax and to see how the different pieces of the language fit together. The best way to do this is to simply start writing code.

The third step is to find help when needed. When first starting out, it is inevitable that questions will come up. It is important to have resources that can be consulted when these questions arise. Additionally, it is helpful to find a community of people who are also learning Javascript. These people can offer support and advice.

Let's start!

1. Choose an online resource or tutorial to start with.

One way to start learning Javascript is to find an online resource or tutorial. This can be done by searching for "Javascript tutorial" in a search engine. Once you have found a resource that looks promising, take some time to read through it and see if it is a good fit for your learning style. If you find that the resource is too difficult, try another one. There are plenty of resources available, so there is no need to force yourself to learn from a resource that is not a good fit.
Coursera and Udemy, for example, are great for getting started!

2. Follow along with the tutorial, pausing to practice each new concept.

When you're first learning a new programming language, it can be helpful to find a tutorial or course to follow along with. That way, you can pause and practice each new concept as you go.

If you're trying to learn Javascript, there are plenty of great tutorials out there to choose from. Once you've found one you like, work your way through it, pausing to try out each new concept.

Before you know it, you'll be a Javascript pro!

3. Experiment with the code on your own to better understand how it works.

One of the best ways to learn something is to experiment with it on your own. When it comes to learning Javascript, this means playing around with the code to see how it works. This can be done by opening up a Javascript console in your browser and typing in various commands to see what they do.

You can also try changing the code in a script to see how it affects the output. For example, you could try changing the value of a variable to see what happens. Or, you could add a new line of code to see how it affects the existing code. By experimenting in this way, you'll get a much better understanding of how Javascript works.

4. Join a community of other Javascript learners to ask questions and get help.

One great way to learn Javascript is to join a community of other Javascript learners. This way, you can ask questions and get help from more experienced developers. There are many online forums and groups dedicated to helping people learn coding, so find one that fits your needs and start participating.

5. Find a project to work on to put your new skills to the test.

One of the best ways to learn a new programming language is to find a project to work on. By working on a project, you can immediately put your new skills to the test and see how they work in the real world.

If you're not sure what kind of project to work on, there are plenty of resources available online. For example, Code Academy has a list of projects for beginners to work on.

Once you've found a project you want to work on, it's important to set some goals. What do you want to achieve with this project? What do you hope to learn? By setting goals, you can keep track of your progress and ensure that you're actually learning the things you want to learn.

Finally, it's important to remember that learning a new programming language can be difficult, and it's okay to make mistakes. The more you practice, the better you'll become. So don't be discouraged if things don't go perfectly at first—keep learning, and eventually you'll be a Javascript expert!

By following these five steps, you can be well on your way to becoming a proficient JavaScript programmer. With JavaScript, you can create interactive websites, games, and applications. This guide has shown you how to get started with the basics of the language, how to practice and learn more, and how to find resources to continue your learning. Keep at it, and soon you'll be able to build anything you can imagine.

Thanks for reading

Check out my Personal Website and GitHub
Connect with me via Twitter

Photo by James Harrison on Unsplash

Why are there no 128-bit CPUs?

Justice-hub — Sat, 09 Jul 2022 14:31:19 +0000

Why does it seem like this evolution has stopped there? What do these bits represent? Will there be 128-bit processors in the future?

What are bits?

In the simplest terms, bits are the basic unit of information in computing. They can be either on or off, and they're what make up everything from individual letters to entire websites. Most digital devices these days use binary code, which is a series of ones and zeroes that represent those on and off states. So when you see a "1" or "0" online, that's a bit in action.

Computers use large amounts of these little guys to do all sorts of things - like store data, run programs, or communicate over the internet. And because there are so many different ways to string them together (or not), that means there can be an almost infinite number of combinations for creating new words, pictures and ideas. So the next time you're online and see something cool (or weird), remember that it was created one bit at a time!

Why are there no 128-bit processors on the market?

There are many reasons why CPUs do not come in 128-bit varieties. The most obvious reason is that the benefits of a wider bus width would be outweighed by the increased cost and complexity of manufacturing such a chip. Additionally, there is no real demand for such a product in the market; 64-bit processors offer more than enough performance for most users. Finally, even if there were demand for 128-bit CPUs, current software would not be able to take advantage of their capabilities.

In closing, i want to remind you that today there are solutions beyond 64 bits, but they are not classic CPUs, but specialized components to perform specific activities and which work on particular data sets. In addition, there are logical solutions that allow you to work on 128-bit or higher data simply by exploiting modern architectures to create multi-bit virtual systems. This confirms that physical chips with over 64 bits are not really needed to meet modern technological challenges.

5 Tips For Writing Cleaner Code

Justice-hub — Sun, 05 Jun 2022 14:36:35 +0000

When you're writing code, it's important to be mindful of your coding practices. This means taking the time to write clean, organized code that is easy for others to read and understand. Here are a five tips to help you get started:

1. Avoid Unnecessary Nesting

Nesting in code is something we do all the time, and although there's nothing inherently wrong with nesting, it can sometimes make code harder to read. One approach to help avoid this is to use the "Return Early" design pattern. It allows us to use the if statement as a guard clause to check for errors and return before executing any further code. It helps avoid the use of if/else and unnecessary nesting.

Like this:

Before

function deleteItem(item) {
  if (item != null) {
    console.log("Deleting item");
    item.delete();
  }
}

After

function deleteItem(item) {
  if (item == null) return;

  console.log("Deleting item");
  item.delete();
}

As you can see the second implementation is obviously cleaner, this approach can help make your code more linear, cleaner, and more readable. It's a simple technique that is easy to implement.

2. Object Destructuring For Function Parameters

Let's assume we have a function that takes an object as the parameter and performs some kind of operation on that object to return a new value. Without using object destructuring, we might get something like this:

// not so good
function getFullName(person) {
  const firstName = person.firstName;
  const lastName = person.lastName;
  return `${firstName} ${lastName}`;
}

This implementation works just fine, but a better way to implement this is to use object destructuring. We can destruct the person object to get both the first name and last name in one line:

// better
function getFullName(person) {
  const { firstName, lastName } = person;
  return `${firstname} ${lastName}`;
}

3. Using Pure Functions

Pure functions are a great way to write code that is easy to read and understand. By using pure functions, you can avoid creating complex and difficult-to-follow code. Pure functions always return the same result given the same input, which makes them predictable and reliable. Additionally, pure functions are easy to test and debug, making them ideal for use in software development projects.

// bad
let items = 5;
function changeNumber(number) {
  items = number + 3;
  return items;
}
changeNumber(5);

// good
function addThree(number) {
  return number + 3;
}

4. Keep Functions Simple

There is a lot of wisdom in keeping functions simple. When you keep your functions small and focused, it’s easier to understand what they do and how they work. This makes them less error-prone and more maintainable. Additionally, when you keep your code modular, it becomes easier to reuse individual functions in different contexts.

function signUpAndValidate() {
// Do a stuff here
}

It is best to keep functions responsible for one thing only. This is a better approach:

function signUp() {
}
function validate() {
}

In short, keeping your functions simple makes for better code that is easier to understand and maintain. So next time you are faced with the challenge of writing some code, remember to keep things simple!

5. Use Meaningful Variable Names

Use meaningful variable names. It makes your code more readable and easier to debug. For example, don't use x or y as variables; use something that describes what the variable is for, like currentWidth or inputValue.

// bad
let x = 0;
let y = 1;

// good
let currentWidth = 0;
let inputValue = 1;

Thanks for reading

Visit my site for know more about of me.

5 CSS properties you don't know

Justice-hub — Sun, 01 May 2022 21:29:55 +0000

CSS has a large number of properties and you can create amazing things from it.

We are all aware of the basic properties, but do you not know about some of its hidden gems , that'll surely blow your mind?!
In this article, we'll cover some amazing properties which are not commonly used.

Caret Color

The caret-color property specifies the color of the cursor(caret) in inputs, textareas, or any element that is editable.
The caret is typically a thin vertical line that flashes to help make it more noticeable.

input {
caret-color: red;
}

Backface visibility

The backface-visibility defines whether or not the back face of an element should be visible when facing the user.
The default for backface-visibility is visible. Instead of it being visible, you can even hide it.

.box {
backface-visibility: hidden;
}

Tab-size

The tab-size specifies the width of a tab character.
The default value for the tab-size property is 8 space characters, and it can accept any positive integer value.

pre {
tab-size: 16;
}

Isolation

The isolation property defines whether an element must create a new stacking content.
Stacking content refers to how elements on a webpage appear to sit on top of other elements.

#element {
isolation: isolate;
}

Resize

The resize property defines if and how an element is resizable by the user. You can simply resize the element by clicking and dragging the bottom right corner of the element.
This property does not apply to inline elements or to block elements where overflow is set to visible.

textarea {
resize: none; /* Disables resizability */
}

We can do pretty much everything with CSS.

My first post on Dev!

Justice-hub — Mon, 28 Mar 2022 05:34:53 +0000

Hey folks, I'm Justice.

I am a front-end developer, who has a great passion for programming and loves to create things for the web. I enjoy working on new projects and pushing the boundaries of what's possible with code. I am always looking to learn new skills and techniques, so feel free to reach out if you need help with anything.

In my spare time, I enjoy reading about new programming techniques 📖, experimenting with new technologies 👩‍💻, and playing video games 🎮.

I'm not an expert and I probably still have a lot to learn, but I have decided to share my experience with the Dev community. In my time as a developer, I've learned that collaboration is key. By sharing what I know and working together, we can all improve our skills and help each other grow. So don't hesitate if you need help!

Thanks for taking the time to read this.