DEV Community: BrendahKiragu

MySQL WorkBench: Create, alter & Drop

BrendahKiragu — Sat, 08 Mar 2025 19:10:46 +0000

Introduction
Prerequisites
Task 1: Connect to the MySQL Workspace
Task 2: Create a Database and a Table
- Step 1: Check Available Databases
- Step 2: Create a New Database
- Step 3: Create a Table
- Step 4: Verify Table Creation
Task 3: Modify a Table
Task 4: Delete a Table and Database
- Step 1: Drop a Table
- Step 2: Verify Table Deletion
- Step 3: Drop the Database
Conclusion

Introduction

Managing relational databases effectively requires an understanding of fundamental operations such as creating, viewing, altering, and deleting databases and tables. This guide walks you through these essential operations using MySQL Workspace.

By the end of this guide, you will be able to:

Create databases and tables using the CREATE statement.
View available databases and tables using the SHOW statement.
Alter the structure of tables using the ALTER statement.
Delete databases and tables using the DROP statement.

Prerequisites

Before you begin, ensure that:

You have MySQL installed on your system.
MySQL Workbench is installed for database management.
You have the necessary user privileges to create and modify databases.

Task 1: Connect to the MySQL Workspace

Open MySQL Workbench.
Click on Database in the menu bar and select Manage Connections.
Click New and enter the following details:
- Connection Name: World_Workspace
- Hostname: localhost (or your server address)
- Username: root

Click Test Connection to verify the setup.
Once the connection is successful, click OK and then Connect.

Task 2: Create a Database and a Table

Step 1: Check Available Databases

Run the following query to display all available databases:

SHOW DATABASES;

Step 2: Create a New Database

To create a database named company, execute:

CREATE DATABASE company;

Verify the creation by running:

SHOW DATABASES;

Step 3: Create a Table

To store employee data, create a table named employees with the following structure:

CREATE TABLE company.employees (
  `EmployeeID` INT AUTO_INCREMENT PRIMARY KEY,
  `FirstName` VARCHAR(50) NOT NULL,
  `LastName` VARCHAR(50) NOT NULL,
  `Department` VARCHAR(50) NOT NULL,
  `Salary` DECIMAL(10,2) NOT NULL,
  `HireDate` DATE NOT NULL
);

Step 4: Verify Table Creation

To verify that the employees table was created, specify the database and check its tables:

USE company;
SHOW TABLES;

To list all columns in the employees table, run:

SHOW COLUMNS FROM company.employees;

Task 3: Modify a Table

If you need to add a new column for email addresses, use the ALTER TABLE statement:

ALTER TABLE company.employees ADD COLUMN Email VARCHAR(100) NOT NULL;

Verify the change:

SHOW COLUMNS FROM company.employees;

Task 4: Delete a Table and Database

Step 1: Drop a Table

To delete the employees table:

DROP TABLE company.employees;

Step 2: Verify Table Deletion

SHOW TABLES FROM company;

Step 3: Drop the Database

To delete the company database:

DROP DATABASE company;

Verify database deletion:

SHOW DATABASES;

Conclusion

Congratulations! You have successfully performed key database table operations:

Created databases and tables.
Viewed databases and tables using SHOW commands.
Altered a table column using ALTER TABLE.
Deleted tables and databases using DROP.

Python Built-In functions simplified

BrendahKiragu — Mon, 03 Mar 2025 09:44:06 +0000

This year, I'm diving into cloud computing. As a starting point, I enrolled in the AWS re/Start Cloud Foundational Course. I'm currently in week 6 of 12 and tackling the Python module. I created this blog as a quick reference for Python built-in functions with examples. Hope it helps someone else.

Type Conversion Functions
Mathematical Functions
Iterables and Sequences
Input and Output
Object and Type Checking
Memory and Object Management
Functional Programming
Other Useful Functions

1. Type Conversion Functions

These functions convert data from one type to another.

num_str = "100"
num_int = int(num_str)  # Converts string to integer
num_float = float(num_str)  # Converts string to float
bool_val = bool(1)  # Converts integer to boolean (True)
list_val = list("hello")  # Converts string to list of characters
tuple_val = tuple([1, 2, 3])  # Converts list to tuple
set_val = set([1, 2, 2, 3])  # Converts list to set (removes duplicates)
dict_val = dict([(1, 'one'), (2, 'two')])  # Converts list of tuples to dictionary

int(x): Converts x to an integer.
float(x): Converts x to a floating-point number.
str(x): Converts x to a string.
bool(x): Converts x to a boolean (True or False).
list(iterable): Converts an iterable to a list.
tuple(iterable): Converts an iterable to a tuple.
set(iterable): Converts an iterable to a set.
dict(iterable): Converts an iterable to a dictionary.

2. Mathematical Functions

Python offers built-in math functions to perform calculations.

print(abs(-10))  # Output: 10
print(pow(2, 3))  # Output: 8 (2^3)
print(round(3.14159, 2))  # Output: 3.14
print(max(1, 2, 3))  # Output: 3
print(min(1, 2, 3))  # Output: 1
print(sum([1, 2, 3]))  # Output: 6
print(divmod(10, 3))  # Output: (3, 1) (quotient and remainder)

abs(x): Returns the absolute value of x.
pow(x, y): Computes x raised to the power y.
round(x, n): Rounds x to n decimal places.
max(iterable): Returns the largest item in an iterable.
min(iterable): Returns the smallest item in an iterable.
sum(iterable): Returns the sum of all items in an iterable.
divmod(x, y): Returns a tuple of quotient and remainder.

3. Iterables and Sequences

Functions that help manipulate sequences like lists and tuples.

numbers = [1, 2, 3, 4]
print(len(numbers))  # Output: 4
print(sorted(numbers, reverse=True))  # Output: [4, 3, 2, 1]
print(list(reversed(numbers)))  # Output: [4, 3, 2, 1]
print(list(enumerate(numbers)))  # Output: [(0, 1), (1, 2), (2, 3), (3, 4)]
print(list(zip([1, 2], ['a', 'b'])))  # Output: [(1, 'a'), (2, 'b')]

len(s): Returns the length of s.
sorted(iterable, key=None, reverse=False): Returns a sorted list.
reversed(iterable): Returns a reversed iterator.
enumerate(iterable, start=0): Returns index-value pairs.
zip(*iterables): Combines multiple iterables into tuples.

4. Input and Output

Handling user input and displaying output.

name = input("Enter your name: ")
print(f"Hello, {name}!")
with open("file.txt", "w") as file:
    file.write("Hello, World!")
with open("file.txt", "r") as file:
    print(file.read())  # Output: Hello, World!

print(*objects): Prints objects to output.
input(prompt): Gets user input as a string.
open(file, mode): Opens a file for reading or writing.

5. Object and Type Checking

Verify types and attributes of objects.

print(isinstance(100, int))  # Output: True
print(type("hello"))  # Output: <class 'str'>
print(issubclass(int, object))  # Output: True
print(callable(len))  # Output: True

type(object): Returns the type of an object.
isinstance(object, classinfo): Checks if an object is an instance of a class.
issubclass(class, classinfo): Checks if a class is a subclass of another.
callable(object): Checks if an object is callable (e.g., a function).

6. Memory and Object Management

Functions for handling object attributes and memory.

class Car:
    def __init__(self, brand):
        self.brand = brand

car = Car("Toyota")
print(getattr(car, "brand"))  # Output: Toyota
setattr(car, "brand", "Honda")
print(hasattr(car, "brand"))  # Output: True
delattr(car, "brand")
print(hasattr(car, "brand"))  # Output: False

getattr(obj, name): Gets an attribute value.
setattr(obj, name, value): Sets an attribute.
hasattr(obj, name): Checks if an attribute exists.
delattr(obj, name): Deletes an attribute.

7. Functional Programming

Useful functions for functional-style programming.

nums = [0, 1, 2, 3]
print(all(nums))  # Output: False
print(any(nums))  # Output: True
print(list(filter(lambda x: x > 1, nums)))  # Output: [2, 3]
print(list(map(lambda x: x * 2, nums)))  # Output: [0, 2, 4, 6]

all(iterable): Returns True if all elements are True.
any(iterable): Returns True if any element is True.
filter(function, iterable): Filters elements based on a function.
map(function, iterable): Applies a function to all elements.

8. Other Useful Functions

Miscellaneous functions for various tasks.

print(bin(10))  # Output: '0b101'
print(hex(255))  # Output: '0xff'
print(ord('A'))  # Output: 65
print(chr(65))  # Output: 'A'

Conclusion

Happy coding! 🚀

Mastering File Retrieval in Linux: wget vs. curl

BrendahKiragu — Mon, 10 Feb 2025 14:37:04 +0000

Introduction

When it comes to retrieving files and interacting with the web from the command line, wget and curl are two of the most powerful tools in Linux. Both allow users to download files, fetch web pages, and interact with APIs, but they serve different purposes.

In this blog, we’ll break down how to use wget and curl, their differences, and real-world use cases to help you choose the right tool for your needs.

What is wget?
Using wget
- Basic File Download
- Resume Interrupted Downloads
- Download an Entire Website
What is curl?
Using curl
- Basic File Download
- Saving Files with Custom Names
- Making API Requests
Comparison: wget vs. curl
Bonus: Installing AWS CLI with curl
Conclusion

What is `wget`?

wget is a command-line utility used to download files from the web. It supports HTTP, HTTPS, and FTP protocols and is best for downloading files in the background or recursively retrieving entire directories.

Using `wget`

Basic File Download with `wget`

To download a file from a URL:

wget https://example.com/file.zip

Resuming Interrupted Downloads

If your download was interrupted, you can resume it with:

wget -c https://example.com/large-file.zip

Downloading an Entire Website

To mirror a website for offline access:

wget -r --no-parent https://example.com/

What is `curl`?

curl is a versatile tool used for transferring data using a wide range of protocols (HTTP, HTTPS, FTP, SCP, and more). Unlike wget, it is commonly used for API interactions and sending requests beyond just downloading files.

Using `curl`

Basic File Download with `curl`

To download a file from a URL:

curl -O https://example.com/file.zip

Saving Files with Custom Names

curl -o custom_name.zip https://example.com/file.zip

Making API Requests

GET Request

curl https://api.example.com/data

POST Request with JSON Data

curl -X POST -H "Content-Type: application/json" -d '{"name":"Brenda"}' https://api.example.com/users

Comparison: wget vs. curl

Feature	`wget`	`curl`
Download files	✅	✅
Resume downloads	✅	❌
Recursive downloads	✅	❌
API requests (POST, PUT)	❌	✅
Supports multiple protocols	✅	✅
Works in the background	✅	❌

Bonus: Installing AWS CLI with curl

Let try a real life example of curl We will install the AWS Command Line Interface (CLI) on a Linux system. Here’s how you can do it:

# Step 1: Download the AWS CLI installation file
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

# Step 2: Unzip the installation file
unzip awscliv2.zip

# Step 3: Run the installation program
sudo ./aws/install

Steps Explained:

Download the AWS CLI installation file using curl. The -o option specifies the file name that the downloaded package is written to (in this case, awscliv2.zip).
Unzip the installation file. When the file is unzipped, a directory named aws is created under the current directory.
Run the installation program. The installation command uses a file named install in the newly unzipped aws directory.

Verifying Installation

After installation, confirm that the AWS CLI is installed correctly by running:

aws --version

This should return the installed AWS CLI version, ensuring that everything is set up properly.

Conclusion

Both wget and curl are essential tools for Linux users. If you need to download files, especially recursively, wget is the way to go. However, if you're working with APIs and need to send HTTP requests, curl is the better choice.

By mastering both tools, you’ll enhance your ability to interact with the web from the command line efficiently. Happy coding! 🚀

Top 10 Chrome Extensions Every Developer Should Have in 2025

BrendahKiragu — Mon, 27 Jan 2025 13:37:03 +0000

As a developer, having the right tools can make your workflow faster, more efficient, and less frustrating. Chrome extensions are a great way to enhance your browsing and coding experience. Here’s a list of must-have Chrome extensions for developers in 2025, complete with easy-to-understand explanations, visuals, and step-by-step instructions.

1. React Developer Tools

If you’re working with React, this extension is a lifesaver. It allows you to inspect the React component hierarchy, view props and state, and debug your React applications directly in the Chrome DevTools.

Why you need it: Simplifies debugging and improves your understanding of React component structures.

➡ Install React Developer Tools

How to use it:

Install the extension and open Chrome DevTools (F12 or right-click > Inspect).
Navigate to the Components tab to view the React component tree.
Inspect props, state, and hooks for each component.
Use the Profiler tab to analyze performance and identify bottlenecks.

2. Wappalyzer

Wappalyzer helps you identify the technologies used on any website. From JavaScript frameworks to CMS platforms, it gives you insights into the tech stack behind the scenes.

Why you need it: Great for competitive analysis or learning what tools other developers are using.

➡ Install Wappalyzer

How to use it:

Install the extension and visit any website.
Click the Wappalyzer icon in the Chrome toolbar.
View the list of technologies used on the site, such as frameworks, analytics tools, and hosting providers.
Use this information for competitive analysis or to learn about new tools.

3. Octotree - GitHub Code Tree

Navigating GitHub repositories can be a pain, especially for large projects. Octotree adds a sidebar to GitHub that displays the repository’s file structure, making it easier to browse code.

Why you need it: Saves time when exploring or reviewing code on GitHub.

➡ Install Octotree

How to use it:

Install the extension and go to any GitHub repository.
A file tree sidebar will appear on the left side of the page.
Click on files or folders to navigate through the repository without refreshing the page.
Use the search bar to quickly find specific files.

4. Responsive Viewer

Testing your website’s responsiveness across multiple devices is crucial. Responsive Viewer lets you view your site in multiple screen sizes simultaneously.

Why you need it: Simplifies responsive design testing and ensures your site looks great on all devices.

➡ Install Responsive Viewer

How to use it:

Install the extension and open the website you want to test.
Click the Responsive Viewer icon in the Chrome toolbar.
Select multiple device presets or create custom screen sizes.
View your site in different resolutions side by side.

5. ColorZilla

ColorZilla is a must-have tool for designers and developers who work with colors. It allows you to pick colors from any webpage, analyze them, and copy their HEX, RGB, or HSL values instantly. It also includes a gradient generator and a color history feature.

Why you need it: Simplifies color selection and ensures consistency in your designs.

➡ Install ColorZilla

How to use it:

Install the extension and click the ColorZilla icon in the Chrome toolbar.
Use the Eyedropper tool to pick a color from any webpage.
Copy the color code (HEX, RGB, or HSL) and use it in your project.
Explore the Gradient Generator to create and copy CSS gradients.
Use the Color History feature to revisit recently used colors.

6. JSON Viewer Pro

Working with JSON data? This extension formats JSON responses into a readable tree structure, making it easier to analyze and debug.

Why you need it: Makes JSON data human-readable and easier to work with.

➡ Install JSON Viewer Pro

How to use it:

Install the extension and open a webpage that returns JSON data.
Click the JSON Viewer Pro icon in the Chrome toolbar.
View the JSON data in a collapsible tree structure.
Use the search feature to quickly find specific keys or values.

7. Web Developer

This extension adds a toolbar with various web development tools, including options to disable CSS, view image information, and resize the browser window.

Why you need it: A Swiss Army knife for web developers, packed with useful tools for debugging and testing.

➡ Install Web Developer

How to use it:

Install the extension and click the Web Developer icon in the Chrome toolbar.
Use the toolbar to disable CSS, view image dimensions, or resize the browser window.
Explore other tools like form validation, outline elements, and more.

8. Daily.dev - Developer News Feed

Daily.dev is a developer news aggregator that brings the best articles, blogs, and resources from across the web into one place. It opens every time you open a new tab, ensuring you never miss out on the latest updates in the tech world.

Why you need it: Perfect for staying informed about the latest trends, tools, and best practices in software development.

➡ Install Daily.dev

How to use it:

Install the extension and open a new tab in Chrome.
Customize your feed by selecting your interests (e.g., JavaScript, Python, DevOps).
Browse articles, blogs, and resources curated for developers.
Save articles to read later or share them with your team.

9. Hackertab.dev - Developer News

Hackertab.dev is a personalized news feed for developers. It aggregates content from GitHub, Dev.to, Medium, Hashnode, and more, based on your interests and preferences.

Why you need it: Stay updated with the latest developer news, tools, and trends without leaving your browser.

➡ Install Hackertab.dev

How to use it:

Install the extension and click the Hackertab.dev icon in the Chrome toolbar.
Customize your feed by selecting your preferred topics (e.g., React, AI, DevOps).
Browse the latest articles, GitHub repositories, and news tailored to your interests.
Save or share content directly from the extension.

10. Ghostery

Ghostery is a powerful privacy and ad-blocking extension that helps you browse the web faster and more securely. It blocks trackers, ads, and pop-ups, while also providing insights into the trackers operating on any website.

Why you need it: Protects your privacy, speeds up page loading, and improves your browsing experience by blocking intrusive elements.

➡ Install Ghostery

How to use it:

Install the extension and click the Ghostery icon in the Chrome toolbar.
Toggle the Block Trackers switch to enable or disable tracker blocking.
Use the Smart Blocking feature to allow non-intrusive trackers for specific sites.
Click See All Trackers to view a detailed list of trackers operating on the current webpage.
Customize your blocking preferences in the Settings menu for a personalized experience.

Key Features:

Blocks ads, trackers, and pop-ups.
Provides detailed insights into website trackers.
Improves page load speed and reduces data usage.
Protects your privacy by preventing data collection.

Conclusion

These Chrome extensions can significantly improve your productivity as a developer. Whether you’re debugging React apps, analyzing tech stacks, testing responsiveness, or staying updated with the latest developer news, there’s something here for everyone. Give them a try and see how they can streamline your workflow! Happy coding!

Types of Web Testing: A Beginner's Guide

BrendahKiragu — Fri, 17 Jan 2025 15:24:54 +0000

Picture this: It’s 7:20 in the morning. You have a meeting at 8 a.m., but when you go to start your car, it won’t start. You quickly open your Uber app, only to find that the website keeps hanging with every scroll.

Frustrated and desperate, you turn to the next Uber website, hoping it will work, only for it to decline your booking. You’re already running late, and now you’re stuck—frustrating, right?

This is exactly why web testing is crucial. Websites must perform flawlessly under pressure to ensure users don’t encounter problems like these when time is critical.

Web developers ensure a great user experience by conducting extensive testing. This is critical not only when launching a new website or adding major features, but also when making smaller changes—like tweaking the behavior of a single button.

Let's explore the different types of web testing that help catch issues early and deliver a seamless user experience.

1. Acceptance Tests

These tests verify that the entire website works as intended for its users. Acceptance testing typically happens at the end of the development process, just before a website goes live. It ensures that all parts of the website—both client and server—function together seamlessly.

Example: Imagine a travel website where users book flights. An acceptance test would check if a user can successfully search for flights, select dates, choose a seat, and complete a purchase—all processes working smoothly from start to finish.

2. Integration Tests

Integration testing focuses on how different components of the website interact with each other. The goal is to ensure that these parts function together as expected.

Example: If you're shopping online, integration tests would check whether the payment gateway connects properly with the shopping cart, ensuring that when you make a payment, the order goes through correctly.

3. Unit Tests

Unit testing involves examining the smallest testable part of a website, such as a specific feature or function. This ensures that every component is working properly, and each individual piece is checked before putting it all together.

Example: A developer might run unit tests on a contact form’s drop-down menu to ensure it opens correctly, closes without issues, and displays accurate information like options for users to select from.

4. Functional Tests

Functional testing simulates real-world usage to verify that a website performs as expected based on the initial design or requirements. It looks into how the site behaves when real users engage with it.

Example: For a recipe-sharing website, functional tests would check if a user can successfully search for recipes, bookmark their favorites, and submit a new recipe without any errors.

5. Performance Tests

Performance testing checks how well a website performs under varying levels of stress. One specific test here is load testing, which examines how much traffic a website can handle before it starts to slow down or fail.

Example: If you launch an online store during Black Friday sales, performance tests measure how many customers the website can support at once without crashing when thousands of people try to make purchases at the same time.

6. Regression Tests

When new features are added to a website, regression tests ensure that they don't break or interfere with the existing functionality. If a new feature creates an issue with something that was previously working, that’s called a regression bug.

Example: If an online bank adds a new "check balance" feature, regression tests would ensure that the balance can be checked without affecting users' ability to log in, transfer money, or view their transaction history.

7. Stress Tests

Similar to performance testing, stress tests put extreme loads on the website to see how much it can handle before breaking down. These tests simulate much higher than normal traffic to evaluate the website’s breaking point.

Example: Imagine a viral video goes viral on a streaming platform. Stress testing would determine how many users can stream the video at once before the website stops responding or crashes.

8. Usability Tests

Usability testing evaluates how easy and intuitive it is for real users to navigate a website and complete a task. Testers give users a set of activities to perform and observe how easily and efficiently they can accomplish them.

Example: On a food delivery website, usability tests may check how easy it is for users to browse the menu, select items, enter a delivery address, and pay for their order. The goal is to see if customers can complete the process without confusion or frustration.

Each type of testing plays an important role in ensuring that a website is stable, functional, user-friendly, and able to handle a high amount of traffic. These tests help developers catch bugs, improve performance, and deliver a website that meets user needs.

Stay curious, squash those bugs before your users do. Happy coding!

HTML vs HTML5—the tale of two titans of web development.

BrendahKiragu — Wed, 15 Jan 2025 20:28:58 +0000

Understanding the Difference Between HTML and HTML5

Introduction

Once upon a time in the late 1980s, Tim Berners-Lee had a groundbreaking idea: what if people could share and link information seamlessly across different computers? To bring this vision to life, he devised a simple yet revolutionary system of communication—a markup language called HTML (HyperText Markup Language). It laid the foundation for the World Wide Web, transforming the way we access information.

As years went by, developers noticed HTML’s growing limitations. It was overly dependent on plugins like Flash for multimedia and lacked flexibility for modern web development needs. This sparked a transformation.

A group of visionaries, including Ian Hickson and the Web Hypertext Application Technology Working Group (WHATWG), envisioned a future for HTML. After years of innovation and collaboration, HTML5 emerged.

You’ve likely encountered HTML while adding skills to your CV and wondered why it didn't quite land the dream job. Could it be that the employer was looking for the elusive HTML5? Let’s unravel the mystery and demystify HTML versus HTML5 once and for all.

Differences Between HTML and HTML5

1. Structural Enhancements

HTML: Earlier versions relied heavily on non-semantic tags like <div> for structuring content, which often made it less intuitive.
HTML5: Introduced semantic elements like <header>, <footer>, <section>, <article>, and <aside>. These tags improve document readability and accessibility, especially for assistive technologies.

2. Multimedia Support

HTML: Audio and video content required external plugins like Adobe Flash or third-party players.
HTML5: Native support for multimedia through the <audio> and <video> tags eliminates the need for plugins, offering better performance and cross-device compatibility.

3. Forms and Input Types

HTML: Limited input types and functionality, such as simple text fields, checkboxes, and radio buttons.
HTML5: Enhanced form controls with new input types like email, tel, url, date, and range. It also introduced attributes like placeholder, required, pattern, and autofocus to simplify form validation and improve user experience.

4. Graphics and Animation

HTML: Depended on external libraries and plugins for animations and graphic elements.
HTML5: Introduced the <canvas> tag for 2D drawing and integrated support for <svg> for scalable vector graphics, allowing developers to create complex visuals directly within the browser.

5. APIs and Modern Functionality

HTML: Lacked APIs for advanced features and relied on basic browser capabilities.
HTML5: Offers numerous APIs such as:
- Geolocation API: For location-based services.
- Web Storage API: Provides localStorage and sessionStorage for secure client-side storage.
- Web Workers: Enable background scripts to improve performance.
- Drag-and-Drop API: Enhances user interactivity.

6. Mobile-Friendliness

HTML: Did not natively support responsive design, relying on workarounds and external CSS frameworks.
HTML5: Facilitates responsive web design through features like the viewport meta tag and compatibility with CSS3 media queries.

7. Deprecated Elements

HTML: Included elements like <font>, <center>, and <big>, which are now considered outdated.
HTML5: Removed such elements and emphasized using CSS for styling, promoting cleaner and more modular code.

Similarities Between HTML and HTML5

1. Core Functionality
Both HTML and HTML5 serve as the backbone of web structure, allowing developers to create documents that are rendered by browsers. Tags like <html>, <head>, <body>, <p>, <div>, and <span> are common to both versions.

2. Syntax and Basic Structure
The foundational syntax of HTML5 remains consistent with HTML. Developers transitioning from HTML to HTML5 can leverage their existing knowledge with minimal learning curve.

3. Cross-Browser Compatibility
HTML and HTML5 aim to work across different web browsers, ensuring consistent rendering of web pages. While HTML5 provides more advanced capabilities, both versions align with browser standards.

4. HTML Doctype
Though simplified in HTML5, the concept of a doctype exists in both, ensuring that browsers interpret the document correctly. For example:

HTML5 Doctype: <!DOCTYPE html>
HTML Doctype: More verbose, e.g., <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Conclusion

While HTML5 offers significant advancements, it doesn't entirely replace HTML. Core concepts like the <html>, <head>, <body>, and basic tags remain consistent. The transition is smooth for developers familiar with the original HTML.

I hope you learned something new, just as I did. Happy coding! And remember, always “close your tags, or risk leaving your browser hanging! 😉

How to clean up Unused Packages in your JavaScript/TypeScript project

BrendahKiragu — Fri, 10 Jan 2025 22:31:10 +0000

What if there is some magic in the developer's world?

Sometimes we get immersed in a project, installing package after package, only to realize along the way: "That’s not the package I needed." So you go ahead and install another package — problem solved, right? But over time, your project accumulates unused packages. I used to sort them unused packages by visiting the package.json.

Until I came across JavaScript's magic sweepbroom, on my adventure of seeing what is interesting on the internet. depcheck It cleaned up my projects in seconds, and I thought I’d share this little trick with someone.

What Is depcheck?

Depcheck is a powerful command-line tool designed to analyze JavaScript and TypeScript projects, by identifying unused packages/dependencies and missing dependencies. It saves you from manually combing through package.json or the node_modules jungle.

With Depcheck, you can:

Automatically list unused dependencies in your project.
Identify missing dependencies that are being used but not declared in package.json.
Customize the analysis to suit your project’s structure and tools.

Why Do You Need Depcheck?

Modern development involves relying on numerous libraries and frameworks. It’s easy for unnecessary dependencies to accumulate over time, making your project:

Bloated — Unused packages increase the size of your node_modules, adding clutter.

Slower - The more packages you have, the slower installation and build processes become.

Harder to Maintain — Keeping track of essential vs. redundant packages becomes overwhelming.

Depcheck tackles these problems head-on by pinpointing exactly which packages you can safely remove.

How to Use Depcheck

Let’s walk through how to integrate Depcheck into your workflow.

1. Install Depcheck

Depcheck can be installed globally or as a dev dependency in your project:

npm install -g depcheck

npm install --save-dev depcheck

2. Run Depcheck

Navigate to your project’s root directory and run:

depcheck

Depcheck will analyze your project and output two key lists:

Unused Dependencies — Installed but not used in your code.
Missing Dependencies — Used in your code but not listed in package.json.

3. Example Output

Here’s what a typical output might look like:

Unused dependencies
* moment
* lodash

Unused devDependencies
* jest
* eslint

Missing dependencies
* chalk

From this, you can confidently remove the unused dependencies and add any missing ones.

Advanced Options

Depcheck supports several options to enhance its analysis:

Ignore Specific Dependencies

If there are certain packages you always want to keep, you can ignore them by adding an option:

depcheck --ignores=chalk,jest

Custom Parsers and Detectors

If your project uses unconventional module patterns, you can specify custom parsers or detectors to help Depcheck accurately analyze your code.

Integrate with CI/CD

For automated dependency management, integrate Depcheck into your CI/CD pipeline to ensure your project stays lean throughout development.

Cleaning Up with Confidence

Once Depcheck identifies unused dependencies, you can remove them with:

npm uninstall package-name

For missing dependencies, you can add them to your project:

npm install missing-package

This ensures your project’s package.json remains optimized, with no dead weight slowing you down.

Conclusion

By using Depcheck, I managed to declutter my projects and streamline my workflow effortlessly. It’s the tool you didn’t know you needed but can’t imagine working without once you’ve tried it.

If you’re tired of manually sifting through your dependencies or dealing with bloated node_modules, give Depcheck a spin. You’ll be surprised how satisfying a clean, well-structured project can feel.

Have you tried Depcheck, or do you have other tricks for keeping your projects lean? Share your thoughts below—I’d love to hear them! Happy Coding.

How to Compress Videos Using HandBrake: A Step-by-Step Guide

BrendahKiragu — Thu, 09 Jan 2025 21:20:20 +0000

My Experience: Why I Needed HandBrake

I was applying for a remote job recently, and as part of the evaluation process, I needed to upload a video file of no more than a minute. After a couple of attempts (don’t worry if you don’t nail it on the first try – it happens to the best of us!), I finally recorded my video: 53 seconds long. 🎉

"Seven seconds less than the limit," I thought, "perfecto!" The video was concise and to the point.

Then came the moment of truth: uploading it to the application form. That’s where I hit a roadblock. Despite following all the guidelines, the upload wouldn’t go through. Frustrated, I reached out to the organization for help.

Their response? “Check your file size.”

Wait, what? File size?! This vital detail was conveniently omitted from the instructions. I felt stuck. Should I re-record my video? Maybe practice speaking even faster to shave more seconds off? 😅 But then I remembered something: I’m a developer, and "dev-life" revolves around solving problems (thanks, internet!).

That’s when I came across HandBrake, and with a little AI guidance, I found the solution and submitted my application just in time. In the spirit of paying it forward, I’ve written this guide to help anyone facing a similar challenge. Let’s dive in!

Step 1: Download and Install HandBrake

Visit the official HandBrake website: https://handbrake.fr.
Download and install HandBrake for your operating system (Windows, macOS, or Linux).

Step 2: Import Your Video

Launch HandBrake.
Drag and drop your video file into the main window, or click File to browse and select your video.

Step 3: Choose a Compression Preset

HandBrake offers pre-configured settings to balance quality and file size.

On the right side, pick a preset:
Very Fast 720p30 for medium compression.
Very Fast 480p30 or Fast 480p30 for more aggressive compression.
Need a tiny file? Go for Super Fast 480p30.

Step 4: Adjust Basic Output Settings

Format: Ensure it’s set to MP4 in the Summary tab (the most compatible format).
Video Codec: Choose H.264 (x264) for efficient compression.

Step 5: Fine-Tune Video Compression

In the Video tab:

Encoder Preset:
Set it to Slower or Very Slow (better compression but slower processing).

Constant Quality:
Increase the value (e.g., 28–30) for higher compression.

Step 6: Optimize Resolution

Go to the Dimensions tab.
Reduce the resolution (e.g., width of 640 pixels) while keeping the aspect ratio locked.

Step 7: Adjust Audio Settings

In the Audio tab:
Reduce the Bitrate to 96 kbps or lower.
Keep only one audio track if your video has multiples.
Step 8: Trim Unnecessary Sections
(Optional) To remove unwanted parts:

In the Summary tab, find the Range section.
Set custom start and end times to trim the video.

Step 9: Save and Compress

Choose a destination folder and name for the compressed file by clicking Browse.
Click the Start Encode button.

Step 10: Verify and Test

Check the compressed file size in the destination folder.
Upload it to your application or desired platform.
If the File Size is Still Too Large
Increase the Constant Quality value (e.g., 31 or more).
Further, reduce the resolution in the Dimensions tab.

Wrapping Up

HandBrake made compressing my video a breeze, saving me from re-recording or editing under pressure. Thanks to its powerful tools and some quick research, I was able to meet the size requirements and submit my job application on time. 🙌

If you’re struggling with video compression, don’t give up! HandBrake is a lifesaver, and now you have the steps to compress your videos with ease. Happy compressing! 🎥✨

Dictionary Unpacking in Python!

BrendahKiragu — Tue, 07 Jan 2025 19:50:31 +0000

Hey there, Python enthusiasts! 💻

Let's talk about the coolest and most underrated tricks in Python that I discovered today: dictionary unpacking (a.k.a. dictionary merging). Whether you’re a beginner or a seasoned coder, this technique can simplify your life when working with dictionaries. Let's dive in!

What Is Dictionary Unpacking?

Imagine you have two dictionaries:

Dictionary 1
first = {"name": "Tim Bradford", "age": 35}
Dictionary 2
second = {"city": "New York", "job": "Hollywood Actor"}

Now, what if you want to combine these dictionaries into one?

Enter dictionary unpacking! Using the ** operator, you can easily merge these:

combined = {**first, **second}
print(combined)

Output:

{'name': 'Tim Bradford', 'age': 35, 'city': 'New York', 'job': 'Hollywood Actor'}

Cool, right? You just created a shiny new dictionary that combines the keys and values of both first and second.

Why Is This Useful?

Merging Dictionaries:
Before Python 3.9, merging dictionaries involved using methods like .update() or creating a custom loop. Dictionary unpacking makes it simple and clean.

Default Values:
Combine your main dictionary with another dictionary containing default values:

defaults = {"theme": "dark", "language": "English"}
user_settings = {"language": "French"}

final_settings = {**defaults, **user_settings}
print(final_settings)

Output:

{'theme': 'dark', 'language': 'French'}

The user’s preference for language takes precedence, thanks to the unpacking order.

Readable Code:
Your colleagues (and future you!) will thank you for this clean and Pythonic approach.

Handling Key Collisions

What happens if both dictionaries have the same key? Let’s see:

a = {"key": "value1"}
b = {"key": "value2"}

result = {**a, **b}
print(result)

Output:

{'key': 'value2'}

The value from the dictionary on the right (b) overrides the one on the left (a). So, order matters when unpacking!

Python 3.9+ Bonus: The | Operator

Starting from Python 3.9, merging dictionaries became even simpler with the | operator:

merged = a | b
print(merged)

This achieves the same result as unpacking but looks even cleaner. For an in-place merge, use |=:

a |= b
print(a)

This updates "a" with the merged dictionary.

A Fun Fact to Wrap Up

Dictionary unpacking isn’t just for merging—it’s also helpful when passing dynamic arguments to functions! If you have:

def greet(name, age, topic, time):
    print(f"Hello, {name}! You are {age} years old. You are here to learn about {topic} at {time}.")

info = {"name": "Marko", "age": 30}
subject = {"topic": "Python", "time": "10:00 AM"}
greet(**info, **subject)

Output:

Hello, Marko! You are 30 years old. You are here to learn about Python at 10:00 AM.

With **info and **subject, you’re unpacking the dictionary to match the function’s parameters. Handy, innit?

Final Thoughts

Dictionary unpacking is a delightful feature that makes Python so elegant and intuitive. It’s clean, readable, and oh-so-powerful.

Got some cool dictionary tricks of your own? Share them in the comments below! And if you’re new to Python, try practicing with this feature—you’ll be amazed at how much smoother your code becomes. Until next time, happy coding! 🚀

DEV Community: BrendahKiragu

MySQL WorkBench: Create, alter & Drop

Table of Contents

Introduction

Prerequisites

Task 1: Connect to the MySQL Workspace

Task 2: Create a Database and a Table

Step 1: Check Available Databases

Step 2: Create a New Database

Step 3: Create a Table

Step 4: Verify Table Creation

Task 3: Modify a Table

Task 4: Delete a Table and Database

Step 1: Drop a Table

Step 2: Verify Table Deletion

Step 3: Drop the Database

Conclusion

Python Built-In functions simplified

Table of Contents

1. Type Conversion Functions

2. Mathematical Functions

3. Iterables and Sequences

4. Input and Output

5. Object and Type Checking

6. Memory and Object Management

7. Functional Programming

8. Other Useful Functions

Conclusion

Mastering File Retrieval in Linux: wget vs. curl

Introduction

Table of Contents

What is wget?

Using wget

Basic File Download with wget

Resuming Interrupted Downloads

Downloading an Entire Website

What is curl?

Using curl

Basic File Download with curl

Saving Files with Custom Names

Making API Requests

GET Request

POST Request with JSON Data

Comparison: wget vs. curl

Bonus: Installing AWS CLI with curl

Steps Explained:

Verifying Installation

Conclusion

Top 10 Chrome Extensions Every Developer Should Have in 2025

1. React Developer Tools

2. Wappalyzer

3. Octotree - GitHub Code Tree

4. Responsive Viewer

5. ColorZilla

6. JSON Viewer Pro

7. Web Developer

8. Daily.dev - Developer News Feed

9. Hackertab.dev - Developer News

10. Ghostery

Conclusion

Types of Web Testing: A Beginner's Guide

1. Acceptance Tests

2. Integration Tests

3. Unit Tests

4. Functional Tests

5. Performance Tests

6. Regression Tests

7. Stress Tests

8. Usability Tests

HTML vs HTML5—the tale of two titans of web development.

Understanding the Difference Between HTML and HTML5

Introduction

Differences Between HTML and HTML5

Similarities Between HTML and HTML5

Conclusion

How to clean up Unused Packages in your JavaScript/TypeScript project

What if there is some magic in the developer's world?

What Is depcheck?

1. Install Depcheck

2. Run Depcheck

What is `wget`?

Using `wget`

Basic File Download with `wget`

What is `curl`?

Using `curl`

Basic File Download with `curl`