Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to Remove Focus Around Buttons on Click?
When building web applications, you may notice that clicking on buttons often leaves an outline or "focus ring" around them. This can be helpful for accessibility, but sometimes it's not desirable for specific designs. In this article, we'll explore several ways to remove the focus ring from buttons when they are clicked, without sacrificing accessibility for keyboard users. Syntax /* CSS approach */ button:focus { outline: none; } /* Or using focus-visible for better accessibility */ button:focus-visible { outline: 2px solid color; } Method 1: Using ...
Read MoreCustom Multiplication in list of lists in Python
Multiplying elements in a list of lists (nested list) with corresponding elements from another list is a common operation in data analysis. Python provides several approaches to perform this custom multiplication efficiently. Using Nested Loops In this approach, we use two nested for loops. The outer loop iterates through each sublist, while the inner loop multiplies each element in the sublist with the corresponding multiplier ? nested_list = [[2, 11, 5], [3, 2, 8], [11, 9, 8]] multipliers = [5, 11, 0] # Original list print("The given list:", nested_list) print("Multiplier list:", multipliers) # Using ...
Read MoreHow to Make the Middle Item Stay Centered?
Centering the middle item in a layout while ensuring it stays centered even when other items are removed is a common design challenge. This article explores CSS techniques to center the middle item using methods that maintain its position regardless of adjacent elements. Method 1: Using Flexbox with Auto Margins Flexbox offers a straightforward way to center an item within a container. By setting the middle item's margin property to auto, it remains perfectly centered without depending on adjacent items. Example ...
Read MoreCustom length Matrix in Python
Sometimes when creating a matrix using Python, we may need to control how many times a given element is repeated in the resulting matrix. In this article, we will see how to create a matrix with a required number of elements when the elements are given as a list. Using zip() and List Comprehension We declare a list with elements to be used in the matrix. Then we declare another list which will hold the number of occurrences of the element in the matrix. Using the zip() function with list comprehension, we can create the resulting matrix ? ...
Read MoreCreating DataFrame from dict of narray-lists in Python
Pandas is a widely used Python library for data processing and analysis. In this article, we will see how to create pandas DataFrame from Python dictionaries containing lists as values. Creating DataFrame from Dictionary with Lists A dictionary with lists as values can be directly converted to a DataFrame using pd.DataFrame(). Each key becomes a column name, and the corresponding list becomes the column data. Example Let's create a DataFrame from a dictionary containing exam schedule information ? import pandas as pd # Dictionary for Exam Schedule exam_schedule = { ...
Read MoreHow to Make Flex Items Take the Content Width?
Flexbox is a powerful layout tool that allows us to align items within a container dynamically. However, sometimes you may want a flex item to take up only as much width as its content, rather than stretching to fill the available space within the container. In this article, we'll go over different techniques to make specific items within a flex container take up only the space needed for their content, without stretching to fill the available space. Syntax /* Method 1: Using align-self */ .item { align-self: flex-start; } /* Method 2: ...
Read MoreCreating a Pandas dataframe column based on a given condition in Python
Pandas DataFrames allow you to add new columns based on conditions applied to existing data. This is useful for categorizing, labeling, or transforming data based on specific criteria. Creating the Base DataFrame Let's start with a simple exam schedule DataFrame ? import pandas as pd # Lists for Exam subjects and Days days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] subjects = ['Chemistry', 'Physics', 'Maths', 'English', 'Biology'] # Dictionary for Exam Schedule exam_data = {'Exam Day': days, 'Exam Subject': subjects} # ...
Read MoreHow to Center a Background Image Inside a div?
When creating web pages, centering a background image in a div is a common design requirement. There are several CSS methods available, each suited for different scenarios. This article demonstrates various techniques to center background images inside divs regardless of screen size or container dimensions. Syntax /* Method 1: Background Position */ .container { background-image: url('image.jpg'); background-position: center; background-repeat: no-repeat; } /* Method 2: Flexbox */ .container { display: flex; justify-content: center; ...
Read MoreCreate a Pandas Dataframe from a dict of equal length lists in Python
A Pandas DataFrame can be created from a dictionary where values are lists of equal length. This approach is useful when you have related data stored in separate lists and want to combine them into a tabular structure. Using Separate Lists and Dictionary In this approach, we declare lists individually and then use each list as a value for the appropriate key inside a dictionary. Finally, we apply pd.DataFrame() to convert the dictionary into a DataFrame ? Example import pandas as pd # Lists for Exam schedule days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] ...
Read MoreHow to Relatively Position an Element without It Taking Space in the Document Flow?
In standard CSS positioning, relatively positioned elements occupy space within the normal document flow even after being offset by top, left, right, or bottom properties. This can create a gap in the layout where the element would have naturally sat, disrupting the alignment or layout of other elements around it. In this article, we will position an element so that it appears relatively within the document but does not affect the design of surrounding elements, effectively making it "overlay" without creating extra space. Syntax .parent { position: relative; width: ...
Read More