Posts

Installing MS SQL Server along with Azure Data Studio on Arch Linux requires a combination of Microsoft packages and some extra tweaks since SQL Server isn’t natively available for Arch and Azure Data Studio is mainly targeted for Debian/Red Hat based distros. Step 1: Install Azure Data Studio Azure Data Studio is available via AUR. yay -S azure-data-studio-bin This installs the latest prebuilt version from Microsoft. Option 2: Manual (optional) If you want to manually install: ...

Database Database is a collection of interrelated data. A database is an organized collection of data that can be easily accessed, managed, and updated. It stores data in tables, rows, and columns, allowing efficient retrieval and manipulation. Examples include MySQL, PostgreSQL, and MongoDB. DBMS DBMS(Database Management System) is software used to create, manage, and organize databases. A DBMS is software that manages and controls database operations like storing, retrieving, and updating data. It ensures data consistency, security, and integrity while providing an interface for users to interact with the database. Examples include MySQL, Oracle, and Microsoft SQL Server. 🚀 What is RDBMS RDBMS (Relational Database Management System) - is a DBMS based on the concept of tables (also called relations). Data is organized into tables(also known as relations) with rows(records) and columns(attributes). E.g., MySQL, PostgreSQL, SQL Server etc. SQL SQL is Structured Query Language - used to store, manipulate and retrieve data from RDBMS. ...

Introduction to GSAP GSAP(Greensock Animation Platform) is a powerful JavaScript animation library that allows you to create high-performance animations for web applications. It is widely used for animating elements with precision and smoothness. 2. Installing GSAP You can use GSAP in multiple ways: CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> 3. Basic GSAP Syntax GSAP uses the .to(), .from(), and .fromTo() methods to animate elements. gsap.to() → Animates from the current state to a new state. gsap.to(".box", { x: 200, duration: 1 }); gsap.from() → Animates from a given state to the current state. gsap.from(".box", { opacity: 0, y: -50, duration: 1 }); gsap.fromTo() → Specifies both the start and end states explicitly. gsap.fromTo(".box", { x: 0 }, { x: 300, duration: 1 }); 4. Key Properties x, y → Move horizontally/vertically scale, scaleX, scaleY → Scale size rotation, rotate → Rotate element opacity → Change transparency skewX, skewY → Skew transformation stagger → Create a delay between multiple elements Example ...

DOM Manipulation in JavaScript DOM (Document Object Model) Manipulation in JavaScript refers to modifying HTML elements dynamically using JavaScript. This includes selecting, modifying, adding, or removing elements from the webpage. Selecting Elements in the DOM Before modifying elements, we need to select them. Here are the different ways: Method Description Example document.getElementById(id) Selects an element by its ID document.getElementById("myDiv") document.getElementsByClassName(className) Selects elements by class name (returns an HTMLCollection) document.getElementsByClassName("myClass") document.getElementsByTagName(tagName) Selects elements by tag name (returns an HTMLCollection) document.getElementsByTagName("p") document.querySelector(selector) Selects the first element that matches the CSS selector document.querySelector(".myClass") document.querySelectorAll(selector) Selects all elements that match the CSS selector (returns a NodeList) document.querySelectorAll("div") Examples of Selection Methods 1. Selecting an Element by ID let title = document.getElementById("main-title"); console.log(title.innerText); // Logs the text inside the element 2. Selecting Elements by Class Name let items = document.getElementsByClassName("item"); console.log(items[0].innerText); // Logs the first element's text 3. Selecting Elements by Tag Name let paragraphs = document.getElementsByTagName("p"); console.log(paragraphs.length); // Logs the number of <p> elements 4. Selecting an Element Using querySelector() Returns only the first matching element. ...

Arrays Objects allow you to store keyed collections of values. That’s fine. But quite often we find that we need an ordered collection, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc. It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use. ...

Synchronous vs Asynchronous JavaScript JavaScript is single-threaded, meaning it executes one operation at a time in a sequential manner. However, JavaScript provides mechanisms to handle tasks asynchronously, allowing it to perform operations without blocking the main execution thread. 1. Synchronous JavaScript In synchronous execution, tasks run one after another, meaning JavaScript waits for one operation to complete before moving to the next. This can cause delays if a task takes a long time (e.g., reading a large file or making a network request). ...

JavaScript was originally created to bring static web pages to life, enabling them to respond dynamically to user interactions. Its code, known as scripts, is directly embedded within HTML documents and executed by the browser as soon as the page loads. Because these scripts are delivered and interpreted as plain text, they bypass the need for a separate compilation process—this makes development swift and flexible. This interpretive nature is a key characteristic of JavaScript and distinguishes it from compiled languages like Java. Whereas Java requires a compile step to transform code into bytecode before execution, JavaScript’s immediate execution model facilitates rapid testing and iterative development. Over time, JavaScript has evolved from a simple tool for adding interactivity to a robust language capable of handling complex web applications, manipulating the Document Object Model (DOM), and even running on servers through environments like Node.js. ...

I recently uploaded a video showcasing my Arch Linux (btw) setup just for fun, and to my surprise, it went viral within the Linux community! Since then, I’ve received numerous messages asking about the installation process. Although I wanted to make a detailed video tutorial, my laptop’s older specs make it difficult to handle both recording and installation simultaneously. So, I’ve decided to write this article to guide you through the installation process using my dotfiles and the installation script from Ja.Kool.It. Below, you’ll find a step-by-step guide to get started. ...

Tailwind CSS is a utility-first CSS framework designed to allow developers to build custom designs quickly. Instead of writing custom styles, Tailwind provides a collection of utility classes that you can use to style elements directly in the HTML. 1. Installation and Setup How to install Tailwind using CDN For quick prototyping, you can include Tailwind directly in your project with a CDN. Add the following to your HTML <head> tag: ...

CSS (Cascadia Styling Sheet) is the style sheet language that’s use to specify how a document written in HTML or XML should be presented and styled. CSS Boilerplate *{ margin: 0; padding: 0; box-sizing: border-box; } html,body{ width: 100%; height: 100%; } How to Link CSS with HTML Add the line after tittle tag in your html file <link rel="stylesheet" href="style.css"> Tips: We use . dot to target class in CSS We use # hash to target id in CSS Also if you want to target tag we can simply target like h3{} Div: box means div and also when e have more than one element and also when there is rectangle shape, very high change there is div ;). Units in CSS px : It is use to define the measurement in pixels. 1px = 1/96th of inch % : It is used to define the measurement as a percentage that is relative to another value (maybe to their parent element). vh : It is relative to the height of the viewpoint(screen). 1vh = 1% or 1/100 of the height of the viewpoint vw : It is relative to the width of the viewpoint(screen). 1vm or 1/100 of the width of the width of viewpoint em : Relative to the font-size of the element 2em means 2 times the size of the current font rem : Relative to font-size of the root element like html tag. vmin : Relative to 1% of viewport’s* smaller dimension vmax : Relative to 1% of viewport’s* larger dimension Tip: There are mainly two type of fonts sans-serif and serif. The difference is the presence of decorative strokes, or serifs at the beginning and end of letters. ...