DEV Community: Chris Ebube Roland

IQ, EQ, and LQ: The Three Intelligences That Matter

Chris Ebube Roland — Mon, 30 Jun 2025 13:08:06 +0000

Chris Ebube Roland

Jun 30 '25

IQ, EQ, and LQ: The Three Intelligences That Matter

#jackma #ai #leadership #iqeqlq

Comments

2 min read

IQ, EQ, and LQ: The Three Intelligences That Matter

Chris Ebube Roland — Mon, 30 Jun 2025 12:53:44 +0000

In school, we’re taught that high scores equal high potential. But real life doesn’t always follow that script. Many people who thrive in work and relationships often do so not because they’re the smartest in the room, but because they bring more to the table.

Success today requires more than IQ. It requires emotional intelligence (EQ) and something deeper, which is your ability to lead with care and purpose, sometimes called LQ.

Jack Ma, founder of Alibaba, agrees:

Let’s break down these three forms of intelligence—and why all of them matter.

IQ: The Intelligence Quotient

IQ is the traditional measure of intelligence. It includes logic, reasoning, analytical thinking, and problem-solving. These are the skills that help you ace exams and crack puzzles.

But IQ is only one dimension of potential. You can be brilliant at math and still struggle to communicate or lead.

IQ may help you learn fast, but it doesn’t guarantee you’ll thrive in a complex, collaborative world.

EQ: The Emotional Quotient

EQ is your ability to manage emotions, both yours and others’. It's about empathy, self-awareness, communication, and resilience.

In teams, EQ helps you navigate conflict, give feedback, and lead with clarity. In life, it helps you stay grounded under pressure.

People with high EQ are the ones others trust and want to follow.

LQ: The Love Quotient

LQ is less commonly talked about, but just as important. It represents your capacity to care about people, purpose, and long-term impact.

In a world increasingly shaped by technology and automation, LQ is what makes us human. It's kindness in leadership, compassion in decisions, and meaning behind action.

Machines can replicate logic. But they can’t replicate love.

Why All Three Matter

You need a balance of IQ, EQ, and LQ to thrive, not just professionally, but personally.

IQ helps you learn and think.
EQ helps you connect and lead.
LQ helps you care and inspire.

The future belongs to those who integrate all three.

Final Thought

Whether you’re building a startup, teaching a class, or supporting a friend; how you think, how you feel, and how you care all matter.

The real intelligence of the future isn't just mental. It's emotional. It's human.

Where do you think you’re strongest: IQ, EQ, or LQ?

Copy to Clipboard in JavaScript with just ONE Line of Code!

Chris Ebube Roland — Mon, 16 Dec 2024 19:00:36 +0000

Hey devs! Have you ever needed to add a ‘Copy to Clipboard’ feature to your website but thought it might be complicated? Well, it's actually pretty easy and takes only ONE line of JavaScript!

Whether you’re building a portfolio site, blog, or an app with shareable links, this trick will save you time and improve the user experience.

I’ve also made a quick video to demonstrate how easy this is, you can check it out:

Step-by-Step Code

At the heart of this feature is the Clipboard API, which lets you copy text directly to the user’s clipboard. Here’s the one line you need:

navigator.clipboard.writeText("Hello, World!");

And here’s how you can attach it to a button in HTML:

<button onclick="navigator.clipboard.writeText('Hello, World!')">Copy Text</button>

Use Cases:

Add a "Copy Email" button to your portfolio.
Let users copy shareable links, crypto addresses, or discount codes with a single click.
Include this feature in blogs for copying code snippets.

Adding this small feature to your website improves usability and provides a smoother experience for your users. Plus, it’s quick, easy, and works natively in modern browsers!

If you found this useful, check out the full video above for a quick demo! Like and share this post if you think it could help someone else.
Let me know in the comments how you’re using this feature.

How to View Your Local Dev Server on Your Phone (VsCode Live Server, Next.js, React/Vite)

Chris Ebube Roland — Wed, 04 Dec 2024 10:02:38 +0000

Hey Dev Community! 👋
Have you ever wanted to test your local web projects directly on your phone, but weren’t sure how? Whether you’re working with VsCode's Live Server, Next.js, or React/Vite, I’ve got you covered! This quick tutorial will show you step-by-step how to access your dev server on your mobile device. No extra tools required—just your WiFi connection and a browser!

I recently created a short video breaking this down, which you can check out below:

What You’ll Learn

How to set up your Live Server for mobile access.
How to view your Next.js apps on your phone.
How to configure React/Vite projects for the same purpose.

Step-by-Step Recap:

Here’s a quick summary of the steps covered in the video:

For Live Server (HTML/JS Projects):

Start your Live Server in VS Code.
Find your PC's IP address using ipconfig (Windows) or ifconfig | grep 'inet' (macOS).
Connect your phone to the same WiFi network and enter PC_IP_ADDRESS:5500 in your browser.

For Next.js Apps:

Run npm run dev in your project directory.
Copy the local IP address and open it in your phone's browser.

For React/Vite Apps:

Add the --host flag: npm run dev -- --host.
Access your app using the provided local IP address.

Troubleshooting Tips:

Make your you have the "dev": "vite" script in your package.json file (React/Vite)
Make sure your firewall settings aren’t blocking connections.
Ensure your devices are on the same WiFi network.

If this guide helped you, be sure to like the video and subscribe for more quick and practical coding tips. And let me know in the comments if there’s anything you’d like me to cover next!

Happy coding, and I’ll see you in the next one! 🚀

The Use of Biometrics as a Cybersecurity Method

Chris Ebube Roland — Thu, 24 Aug 2023 11:25:10 +0000

Introduction to Biometrics

Biometrics measures and analyses an individual’s physical and behavioral characteristics. It is a technology used for proper identification and access control of people under surveillance. The theory of biometric authentication is that everybody can be accurately identified by intrinsic physical or behavioral traits. The word biometrics is derived from the Greek words bio, meaning life, and metric, meaning to measure.
Biometric identifiers are unique and measurable characteristics used to label and describe individuals. They are often classified as physiological characteristics related to the body’s shape. Examples include but are not limited to, fingerprints, palm veins, face recognition, DNA, and iris recognition. Behavioral characteristics involve a person’s behavior pattern, such as a mouse’s movement, typing rhythm, gait, signature, and credentials. Some researchers have coined the term behavior metrics to describe biometrics in behavioral patterns.

History of Biometrics

Automated biometric solutions were introduced a few decades ago due to huge advances in computer processing capabilities. However, many of these automated techniques are based on ideas conceived hundreds to thousands of years ago.
While the origin of biometrics dates back to the Babylonian empire, the first biometric identification system was not invented until the 1800s. Alphonse Bertillon, a French researcher, created a method of classifying and comparing criminals based on their body measurements. Though this method was imperfect, it served as a catalyst for physical characteristics to be used to authenticate identity.
Then in the 1880s, fingerprints were used gradually to identify criminals and sign contracts. It became common knowledge that everybody has a unique fingerprint, a symbol of one’s identity. Edward Henry developed the Henry Classification System fingerprint standard, the first system to be used for identification. Bertillon’s method was immediately discarded by Law enforcement agencies, and the Henry Classification System became the standard system for criminal identity authentication. And this started 100 years’ worth of research into other unique biological factors that could be used as a method of identification.

Types of Biometrics

There are two types of biometric methods:

Physiological biometrics
Behavioral biometrics

Behavioral Biometrics

It is the scientific study of how the bodies of human beings and animals function. This type of biometrics pays attention to the actions of an individual. It considers the high level of inner variants such as mood and health conditions because it is useful only in constant use. It includes

Signature Recognition
Voice Recognition
Keystroke

Physiological Biometrics

This particular biometrics involves a person’s physical characteristics like fingerprints, hand geometry, iris, face, and DNA. It is a type of biometrics related to the specific measurements, dimensions, and characteristics of an individual’s body. It is also called static biometrics because they are immutable and can easily be retained when registered in software and hardware systems. They include;

Ear authentication
Eye vein recognition
Facial recognition
Finger vein recognition
Fingerprint recognition
DNA matching
Footprint and foot dynamics,
Gait recognition

Biometrics in Cybersecurity

How Do They Work?

Biometric security is a type of security that verifies people’s behavioral and physical characteristics to identify them. It is the most accurate and strongest physical security technique for identity verification.
Most security systems use biometrics when physical security is crucial and theft is a concern.
Biometric security systems store and use physical characteristics that remain constant over time, such as hand patterns, facial recognition, retinal patterns, and fingerprints.
The system encrypts and stores these characteristics in a database to match and compare them during subsequent access attempts.
If, for instance, someone tries to access the biometric security system, it scans them, analyzes their characteristics, and compares them to previously saved records. The person is granted access to the facility or device, depending on whether a match is detected.
The components of biometric devices are:

A scanning device or reader to capture the biometric factor to be authenticated.
A database for storing and securely comparing biometric data.
A software application that converts scanned biometric data into a digital format and compares observed and recorded data match points. ## Use Cases
Home Security: Biometric security systems verify and identify people entering a home or building. They can also grant access to specific rooms, an entire house, and an office building. With this technology in place, keys are gradually becoming outdated, and access can be granted to buildings with just a fingerprint swipe.
Airport Security: Biometrics are also used for airport security. Many airports use iris recognition to verify the identity of an individual.
Mobile Devices: Biometric authentication has been fully integrated into Android and iOS smartphones over the past few years, and smartphone fingerprint scanning is now the norm. Presently device biometrics has now progressed beyond mere fingerprints. For instance, Intelligent Scan is a new feature developed by Samsung as a biometric security function. It provides biometric multi-factor authentication by combining facial recognition with an iris scan. Apple’s Face ID is another example, which projects over 30,000 infrared dots onto a user’s face, analyzes the pattern, and creates a “facial map.” Subsequently, login attempts are then authenticated using that map.
Banking and Finance: In the banking sector, many customers are tired of proving their identification at every interval. Still, it is inevitable as the risk of identity theft will continue to rise without it. Bank biometric security systems are currently in high demand. Many banks use biometrics such as fingerprint scanning, facial recognition, and voice verification in their mobile apps and sometimes a combination of these biometrics. This means a nearly impenetrable layer of protection is created when multi-factor authentication is combined with biometrics.

Advantages of Biometric Security System

Biometric authentication is important in security, healthcare, banking, digital applications, and modern-day tech. It has several enormous advantages:

Costs: Biometric security systems are mostly automated, which means less need for multiple security employees. Companies, businesses, and corporations can save a lot of money and reduce the costs of hiring security agencies and buying multiple security gadgets that are expensive to maintain.
Increased Efficiency: Using biometrics, users can authenticate in less than one second. This saves a lot of time, making authentication easy. For instance, placing a finger on a scanner and unlocking an account in seconds is faster than typing out a long password with multiple special characters. In addition, forgetting a password is a common mistake of most users, but the chances of forgetting biometrics are impossible.
Non-transferable: It is impossible to digitally transfer or share a physical biometric. A physical application is the only way to utilize most biometric authentication systems. And in many situations, a person’s biometrics must be present upon authorization.
Difficult to duplicate: Biometrics are generally the same throughout the lifetime of a user. Biometrics like face patterns, fingerprints, iris scanning, and others are impossible to replicate with the current technology. There is one in 64 billion chances that your fingerprint will exactly match someone else’s, making biometrics a unique form of authentication.

Biometrics Security Posture

Biometric Future Trends

Biometric authentication methods are becoming more common across consumer and enterprise systems, and new fraud prevention and advanced biometric approaches fill the gap for systems that call for higher levels of reliability and security.
While there are reliable forms of biometrics and biometric passwords presently, new technologies focus on drawing even more advanced biometric markers from the body, providing another hard-to-fake marker for secure authentication. These include odor recognition, heartbeat pattern recognition, hand geometry, and DNA signature reading.

One major advantage of biometric authentication is that the user must be physically present to provide biometric data. Even stronger measures, like live AI-driven video identity verification, include “liveness” testing in their processes to counter emerging forms of identity fraud.
The future of biometrics will be adding facial, voice, or other types of biometric authentication to security for accessing confidential documents, applying for a bank loan, or using any banking or financial apps. Also, biometrics technology will be used in banks to accelerate digital onboarding, which usually includes eKYC (electronic Know Your Customer) activities such as taking a photo of yourself and a government-issued ID. This will power digital onboarding and make it easier for users and financial services providers.

Soon, ATM cards might become obsolete as biometrics solutions allow users to access their cash using their physical characteristics. Also, vehicles with biometrics will be easier and more convenient for drivers to access without worrying about losing the keys or having them stolen. Once inside the car, biometric voice control technology will make hand-free operations more convenient, such as pulling up directions, making a call, or playing music.

Data Regulations Guiding Biometrics

As tools to collect biometric data become more advanced, laws like the Illinois Biometric Information Privacy Act (BIPA) are being introduced and considered to prevent private entities from collecting biometric information without the disclosure and consent of affected individuals.

In 2008, Illinois became the first state to enact a biometric data privacy law. The law requires entities that use and store biometric identifiers to comply with certain requirements and provide a private right of action for recovering statutory damages when they do not comply.
BIPA states that, for the purposes of the act, a “‘biometric identifier’” means a retina or iris scan, fingerprint, voiceprint, or scan of hand or face geometry.” BIPA also specifies that biometrics are unique to an individual, and when compromised, the individual has no remedy and is at heightened risk for identity theft and will most likely withdraw from biometric-facilitated transactions.

However, the General Data Protection Regulation (GDPR) for European Member States does address biometric data, representing a significant step for data protection and privacy with a real international impact.

Drawbacks in the Biometric Security System

Despite increased security, efficiency, and convenience, biometric authentication solutions also have disadvantages:

Costs: Significant investment is needed in biometrics for security
Data breaches: Biometric databases can still be hacked
Tracking and data: Biometric devices like facial recognition systems can limit privacy for users
Bias: Machine learning and algorithms must be advanced to minimize biometric demographic bias. ## Conclusion

Biometrics, if used appropriately, will be a valuable tool for cybersecurity. However, like the other methods for identification and authentication, it has drawbacks. No system is ever foolproof, and because of that, biometrics needs to be used in conjunction with at least one other method. This method is often referred to as two-factor authentication, requiring the user to either know something else or do something else to decrease the chances of errors. Also, if there is an issue with the biometric scanner, it would be easy to fall back on a password or a security card. The reason biometrics will never be used by itself is that it will never be secure enough without other forms. While biometrics can provide cybersecurity solutions, it is not a foolproof method. The need for an additional form of authentication provides another level of security that is still required.

References

[1] Joseph Lewis, University of Maryland, Bowie State University, “Biometrics for Secure Identity
Verification: Trends and Developments” January 2002. (journal style)
[2] Lia Ma, Yunhong Wang, Tieniu Tan, “Iris Recognition Based on Multichannel Gabor Filtering,” ACCV2002: The 5th Asian Conference on Computer Vision, 23–25 January 2002, Melbourne, Australia. (journal style)
[3] Muhammad Khurram Khan, Jiashu Zhang, and Shi-Jinn Horng, “An Effective Iris Recognition System for Identification of Humans,” IEEE 2004. (journal style)
[4] S. Prabhakar, S. Pankanti, A. K. Jain, “Biometric Recognition: Security and Privacy Concerns,” IEEE Security & Privacy, March/April 2003, pp. 33–42.
(journal style)
[5] K P Tripathi, International Journal of Computer Applications (0975 -8887) Volume 14-№5, January 2011. (journal style)
[6] D. Maio, D. Maltoni, R. Cappelli, J. L. Wayman, A. K. Jain, “FVC2002: Fingerprint verification
competition” in Proc. Int. Conf. Pattern Recognition (ICPR), Quebec City, QC, Canada, August 2002, pp. 744–747. (journal style)
Originally published at https://dzone.com.

CIA in cybersecurity

Chris Ebube Roland — Fri, 23 Dec 2022 16:40:25 +0000

Introduction to CIA triad model

Confidentiality, Integrity and Availability, also known as the CIA triad, is a model that has been developed to ensure that information security policies within an organization are in order. It can also be called the AIC triad to avoid being mistaken for the Central Intelligence Agency.
In this model, confidentiality has to do with restrictions put in place to ensure that data, information of a given company is accessible to only certain individuals, integrity is the guarantee that the information is trustworthy and accurate, that it cannot be altered in an unauthorised manner. Availability is the reliable access to the information by authorized individuals when needed. These principles have been called the three pillars of cybersecurity.

Background and history of CIA triad

Information Security or cybersecurity did not exist in the 1950s or even 1960s. Security then was all about physically guarding expensive machines and limiting access to them. Reliability of computers was the main issue. The CIA triad came to form over time as Confidentiality was traced back to the 1976 U.S. Air Force study.
As hardware and software development continued to progress in the 1970s, there was a shift in focus from computer security to information security.
During this period, ARPANET was still in its early years, the US Department of Defense commissioned a study that the Rand Corporation published as Security Controls for Computer Systems. It pointed out many potential threats and possible security measures that were needed at that time. This report came to be known as the Ware Report.
In the 1980s there was a switch from Confidentiality to commercial issues such as costs and business risks. Of which Integrity became a vital concept for both banks and businesses to avoid data being tampered with by unauthorized entities. In 1988, Morris Worm became the first DoS attack on the Internet. It was then, Availability became recognized as an essential aspect of information security.
By 1998, people saw the three concepts together as the CIA triad.

Elements in the CIA triad model

Confidentiality: It simply entails privacy. It is the ability to protect data from those not authorized to view it. It prevents illegitimate access to sensitive information. A good example of confidentiality is the personal information of an e-commerce store. Sensitive information like credit card details, contact information, shipping details, and other information relating to signed up users of the e-commerce store needs to be secured in order to prevent illegal access and exposure. Violation of confidentiality can happen in many ways through direct attacks, human faults and electronic eavesdropping.
Integrity: It has to do with the consistency, accuracy and trustworthiness of data over its entire lifecycle. Data should not be altered when it is still being processed, and steps have to be taken to ensure that not only unwanted changes to data are prevented but also reversed when it has been effected. For instance if an attacker alters sensitive medical data belonging to a patient that was able to undergo a test. There is every possible likelihood that the doctor will prescribe the wrong treatment that will have a negative effect on the health of the patient.
Availability: It is the ability to ensure that information is consistently and always accessible when needed by authorized parties. This involves proper maintenance of hardware and technical infrastructure of systems that store and output this information. Certain issues that may cause non-availability of information are power loss or outage, operating system or application problems, storage failures, natural disasters or even human errors. Denial of service attack. (DOS) is the most common of these attacks that threaten the availability of information.

Confidentiality, Integrity and Availability

Cases and instances where the CIA triad is used

Confidentiality: A good example of methods used to ensure confidentiality is requiring an account number or routing number when banking online. Data encryption is another common method of ensuring confidentiality. User IDs and passwords constitute a standard procedure; two-factor authentication (2FA) is becoming the norm. Other options include Biometric verification and security tokens, key fobs or soft tokens.
Integrity: These include file permissions and user access controls. Version control may be used to prevent erroneous changes or accidental deletion by authorized users from becoming a problem. Data might include checksums, even cryptographic checksums, for verification of integrity. Also, digital signatures can further be used to provide effective nonrepudiation measures to ensure certain actions an individual did like messages sent, electronic document viewing and sending cannot be denied.
Availability: Network, server, application, and service redundancy ensure availability of information. Hardware fault tolerance in servers and storage, DoS protection solutions, system upgrades, regular software patching, comprehensive disaster recovery plans, backups, etc. are all instances adhering to the availability principle of the CIA triad.

Importance of the CIA triad

The CIA triad is the guiding principle for the development of security systems in organizations. The CIA triad plays a very crucial role in keeping information safe and secure against cyberthreats. When information theft or security breach occurs, it often implies that an organization has been unsuccessful in implementing one or more of these principles in the CIA triad. As well as user data being compromised, all these are not good for an organisation when GDPR (General Data Protection Regulation) is violated.
However, depending on the organization’s security priorities or industry regulatory requirements or even the nature of the business the organisation is into, one of these principles may take priority over others.
For instance, in government agencies or financial institutions, integrity may take priority over confidentiality and availability. Availability of information is critical in e-commerce and healthcare sectors. However, there may be a trade-off in prioritizing one of the principles over others. But in all, organizations have to employ any of the aforementioned security controls to enhance their cybersecurity posture.

Challenges faced by the CIA triad

Internet of things security

This is a huge challenge as every year there is an increasing rate of growth in the number of internet enabled devices in the market. The Internet of Things (IoT) allows physical objects or “things” to collect and exchange information and it is prone to security risks. Sometimes, many of these devices have software that is easy to hack and very weak security passwords. While some of these devices do not transmit sensitive information, it is possible for a hacker to get enough information as IoT devices create new potential entry points for these hackers to get into a business or home network. If not protected, an IoT could be used as a separate attack vector or part of a thingbot.

Internet of things privacy

Almost any physical or logical entity or object that can be given a unique identifier and has the ability to communicate autonomously over the internet or a similar network are prone to attacks that can potentially access information you would want to keep as private. IoT devices are usually embedded with low power and low memory processors that limit the ability to process information at speed which mostly have a negative impact on efforts to maintain confidentiality and integrity in IoT systems. Digital signatures through public key infrastructure can help to mitigate these risks in IoT systems.

Big data

This poses a big problem to the CIA paradigm because of the ever increasing amount of data that needs to be protected. As technology advances, more devices are adding to the increasing volume of data in different formats. Also, because the main purpose of handling big data is often to collect and interpret the information, responsible data oversight is often lacking. This issue was brought to a public forum when Edward Snowden, a Whistleblower reported on the National Security Agency's collection of massive volumes of American citizens' personal data in the United States.

Best practices for implementing the CIA triad

CIA triad in cybersecurity

The main entrance for cyber risks and threats is their internet network. Inbound traffic can be riddled with potential malware and social engineering schemes, while outbound traffic that is not properly controlled can lead one to insecure websites and expose an organization to malicious attacks.
Protecting an organization's network and all related devices with advanced network security solutions is a necessary for achieving the CIA triad in an organization.

The built-in monitoring software paired with hardware firewalls can enable your individuals in an organisation to stay secure online no matter who or when they are communicating or interacting with, on the cloud. Ongoing monitoring, testing, and reporting in a single network protection solution is unavoidable nowadays to ensure the integrity of data, as well as your overall business security.

CIA triad in ISO 27001

ISO 27001 is a framework in information security that helps organisations keep information assets secure. The CIA triad is an integral principle of ISO 27001. Other security frameworks (like SOC 2 and PCI DSS) are also built around the CIA principles. ISO 27001 includes a risk assessment process, organisational structure, Access control mechanisms, Information security policies, procedures, monitoring and reporting guidelines.

During risk assessments and access control mechanisms, organizations measure the risks, threats and vulnerabilities that could compromise the confidentiality, integrity and availability of their systems and data. By implementing security controls to mitigate those risks, they satisfy one or more of the CIA triad’s principles.

Conclusion

Overview of lesson

When an organization maps out a security program, the CIA Triad can serve as a useful yardstick that justifies the need for the security controls that are considered. All security actions inevitably lead back to one or more of the three principles. The strategic management implications of using the CIA triad include developing appropriate mechanisms and processes that prioritize the security of customer information. The CIA triad’s application in businesses also requires regular monitoring and updating of relevant information systems in order to minimize security vulnerabilities, and to optimize the capabilities that support the CIA components.

Resources

Andress, J. (2014). The basics of information security: Understanding the fundamentals of InfoSec in theory and practice.[(https://www.researchgate.net/publication/285378332_The_Basics_of_Information_Security_Understanding_the_Fundamentals_of_InfoSec_in_Theory_and_Practice_Second_Edition)]
Syngress.Evans, D., Bond, P., & Bement, A. (2004). Standards for Security Categorization of Federal Information and Information Systems. National Institute of Standards and Technology, Computer Security Resource Center.[(https://csrc.nist.gov/csrc/media/publications/fips/199/final/documents/fips-pub-199-final.pdf)]
Shabtai, A., Elovici, Y., & Rokach, L. (2012). Introduction to Information Security. In A Survey of Data Leakage Detection and Prevention Solutions (pp. 1-4). Springer US.

Form Validation with HTML

Chris Ebube Roland — Fri, 23 Dec 2022 16:33:08 +0000

https://dev.to/asayerio_techblog/form-validation-with-html-p6d

Stilify vs Master UI/Styles: next-generation Tailwind-like CSS libraries

Chris Ebube Roland — Fri, 23 Dec 2022 16:20:08 +0000

https://dev.to/asayerio_techblog/stilify-vs-master-uistyles-next-generation-tailwind-like-css-libraries-37jn

Working With The DOM In JavaScript

Chris Ebube Roland — Fri, 23 Dec 2022 16:06:14 +0000

https://dev.to/asayerio_techblog/working-with-the-dom-in-javascript-2njd

HTML for Absolute Beginners

Chris Ebube Roland — Fri, 23 Dec 2022 15:59:40 +0000

Introduction.

HTML, or HyperText Markup Language, is the foundation of the modern web. It is a simple and intuitive language that allows developers to create and structure content for the internet. If you are new to web development, HTML is a great place to start as it is easy to learn and forms the basis for more advanced technologies like CSS and JavaScript.
One of the main benefits of HTML is its versatility. It can be used to create static websites or be paired with more advanced technologies to create dynamic and interactive web applications. HTML is also an essential part of the stack for many web developers, as it is used to structure and present content for the web.

History of HTML.

HTML has a rich history that dates back to the early days of the internet. It was created in 1990 by Tim Berners-Lee, a British computer scientist who is credited with inventing the World Wide Web. At the time, Berners-Lee was working at CERN, the European Organization for Nuclear Research, where he developed a system for sharing research documents and information electronically.
Initially, Berners-Lee used a system called SGML (Standard Generalized Markup Language) to mark up the documents, but he quickly realized that this was too complex for the average user. He then developed a simplified version of SGML called HTML, which made it easier for people to create and share documents on the internet. The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999.
Since its inception, HTML has undergone numerous updates and changes. The most recent version, HTML5, was released in 2014 and includes new features and improvements that make it easier to create modern, interactive web applications.

How to get started.

Getting started with HTML is easy and straightforward. All you need is a text editor and a web browser. There are many text editors available, such as Notepad, Sublime Text, and Atom. These text editors allow you to write and edit your HTML code.
If you want to get started with HTML, the first thing you will need is a text editor. There are many options available, including free and open-source options like Notepad++ and Sublime Text, as well as paid options like Adobe Dreamweaver. You can use any text editor that you are comfortable with, as long as it allows you to create and edit plain text files.
Once you have a text editor installed, you can begin writing HTML code. To create an HTML document, you will need to start with a basic skeleton that includes the necessary tags and structure. The skeleton should look something like this:

<!DOCTYPE html>
<html>
<head>
  <title>My HTML Document</title>
</head>
<body>
  <!-- Add your content here -->
</body>
</html>

The <!DOCTYPE html> declaration at the top tells the browser that the document is an HTML5 document. The element encloses the entire document, and the

element contains information about the document, such as the title and any linked stylesheets or scripts. The element contains the actual content of the document.

Tags and attributes.

HTML is made up of tags and attributes. Tags are used to mark the start and end of an HTML element, and attributes provide additional information about the element. Some common HTML tags include the <p> tag for paragraphs, the <h1> tag for headings, and the <div> tag for divisions. Some essential HTML attributes include the id attribute, which allows you to identify an element, and the class attribute, which allows you to apply styles to multiple elements at once.
HTML tags are used to mark the start and end of an HTML element. They are enclosed in angle brackets, and most tags come in pairs with a starting and closing tag. For example, the paragraph tag is written as <p> and </p>, with the content of the paragraph being placed in between the two tags.
HTML attributes provide additional information about an HTML element. They are added to the opening tag of an element and are used to modify the behavior or appearance of that element. For example, the href attribute is used to specify a link in the anchor tag, like this: <a href="https://www.example.com">Link</a>.

Meaning and listings of essential semantic tags and attributes.
There are many different HTML tags and attributes, but some of the most essential ones for beginners are:

The <html> tag, which defines the beginning and end of an HTML document.
The <head> and <body> tags, which divide the HTML document into the head (where metadata is placed) and the body (where the content of the webpage is placed).
The <title> tag, which specifies the title of the webpage.
The <h1> through
tags, which are used to create headings.
The <p> tag, which is used to create a paragraph. -The <div> tag, which is used to create a division or section of the webpage. -The <img> tag, which is used to insert an image into the webpage.
The <a> tag, which is used to create a link.
The <ul> and <li> tags, which are used to create an unordered list.
The <ol> and <li> tags, which are used to create an ordered list.
The <table> tag, which is used to create a table.
The <form> tag, which is used to create a form for user input.

Do’s and Don’ts.

When working with HTML, there are a few do's and don'ts to keep in mind. One important thing to remember is to always close your tags. This means that every opening tag should have a corresponding closing tag. It is also important to use semantic tags, which provide meaning and context to your content. For example, instead of using a

tag to create a heading, you should use an <h1> tag.

Here are a few things to keep in mind when creating an HTML webpage:

Make sure to use semantic tags whenever possible. Semantic tags are tags that have a specific meaning, such as the <p> tag for paragraphs or the <h1> tag for headings. Using these tags helps to make the HTML more readable and easier to understand.
Use lowercase for all HTML tags and attributes. HTML is case-insensitive, but using lowercase makes the code more consistent and easier to read.
Use quotation marks for attribute values. For example, the src attribute of the <img> tag should be written as src="image.jpg" rather than src=image.jpg.
Don't forget to close your tags. Every opening tag should have a corresponding closing tag, unless it's a self-closing tag like the <img> tag. -Don't use too many nested tags. While it's okay to nest tags occasionally, it's important to keep the HTML structure as simple and flat as possible to avoid making it difficult to read and maintain.

Creating your first Html.

Now that you know the basics, it's time to create your first HTML page. The skeleton of an HTML page consists of a few essential elements, including the <head> element, which contains metadata about the page, and the <body> element, which contains the content of the page.
To create your first HTML page, open your text editor and create a new file. Then, type the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to My First HTML Page</h1>
    <p>This is my first attempt at creating an HTML page. I hope you enjoy it!</p>
  </body>
</html>

Result;

Save the file as index.html and open it in your web browser. You should see the heading and paragraph that you created.
Let's break down the different parts of this HTML page:

The <!DOCTYPE html> declaration tells the web browser that this is an HTML page.
The <html> element is the root element of an HTML page. It contains all the other HTML elements.
The <head> element contains metadata about the page, such as the page title and any external resources (e.g. stylesheets or scripts).
The <title> element specifies the title of the page, which is displayed in the browser's title bar or tab. -The <body> element contains the content of the page, such as headings, paragraphs, and images. -The <h1> element is a heading element, and it represents the most important heading on the page. There are six heading levels in HTML, ranging from <h1> to <h6>. -The <p> element is a paragraph element, and it contains a block of text.

Project

To take your HTML skills to the next level, try creating a simple static website. This can be as simple as creating a few pages and linking them together using the <a> tag. You can also add images and formatting using HTML tags like <img> and <strong>.
Now that you have the basics of HTML down, let's create a more complete HTML project.
First, let's add a navigation menu to our page. We can do this using an unordered list (<ul>) with list items (<li>) for each menu item:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Next, let's add a section for our main content. We can use a <div> element to divide the page into sections:
Copy code

<div id="main">
  <h2>Welcome to my website</h2>
  <p>This is a simple website created with HTML.</p>
</div>

Finally, let's add a footer to our page. We can use a <footer> element to contain our footer content:

<footer>
  <p>Copyright 2021</p>
</footer>

Our complete HTML page should now look something like this:

<!DOCTYPE html> 
<html> 
  <head>
   <title>My Website</title>
  </head> 
<body> 
  <nav>
    <ul>
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
  </nav> 
<div id="main"> 
   <h2>Welcome to my website</h2>
  <p>This is a simple website created with HTML.</p>
</div> 
<footer> 
<p>Copyright 2021</p> 
</footer> 
</body>
 </html>

Result;

This is just a basic example of how you can use HTML to create a simple website. You can use other HTML elements and attributes to add more content and styling to your website.
Now that you know the skills to create an HTML project, try adding a few more elements to your page.
Here are some ideas:

Add an image using the <img> element.
Create a list using the <ul> and <li> elements.
Add a link using the <a> element.

FAQs
Here are some common questions about HTML:

What is an HTML tag? An HTML tag is a piece of code used to specify an element on an HTML page. It is written in the format <tagname>content</tagname>, with the opening tag, content, and closing tag.
What is the difference between HTML and CSS? HTML is used to structure and format content on the web, while CSS is used to style that content. CSS stands for Cascading Style Sheets and is used to apply formatting such as colors, fonts, and layout to web pages.

Conclusion.

In this article that is aimed at beginners, we introduced the you to HTML and gave pointers on how to start and illustrated how to create your first HTML skeleton with code examples. We also built a simple project to help you get familiar with the HTML environment.
HTML is a fundamental building block of the internet and an essential skill for any aspiring web developer. By learning HTML, you'll be able to create structured and well-formatted content for the web. With a little practice and some creativity, you can create your own websites and web applications using HTML and other web.

The Modern Guide to Vue Components

Chris Ebube Roland — Thu, 01 Dec 2022 22:38:03 +0000

This detailed guide will explore everything Vue devs – and all developers in general – need to know about components, including in-depth examples of class components, dynamic components, single file components, functional components, and table components.

To fully follow this article, the reader should have a fair understanding of the Vue framework.

Introduction

The .vue extension is commonly added to Vue components. They are unique elements made with JavaScript objects, a syntax like HTML, and occasionally, a style block to style the component. Data from other components, referred to as props, can be imported and used by other components.

Examples provided in this post require Vue3.

A typical example of a Vue component:

<!--HTML like template-->
<template> 
 <h1>Welcome!</h1>
</template>

<!--JS Object-->
<script>
 export default {
    name: 'Greet'
  };
</script>

<!--style-->
<style>
 h1{
 color: blue;
    }
</style>

Vue creates a compiler that processes the content in the tag and returns a render function, which in turn sends back a virtual DOM node, i.e Vue's DOM. This DOM chooses the UI that will be updated and rendered in the DOM of your browser.

You'll discover the various sorts of Vue components, how they function, and use cases for each one in this article.

Class Components

Using a built-in library called vue-class-component, Vue enables you to design a component with syntax similar to that of a class. A lot of developers use vue-property-decorator, which has special features called decorators. Decorators are a type of declaration attachable to a class, parameter, accessor property, or method, often in the form @expression. Class-like syntax encourages OOP (object-oriented programming) concepts like inheritance, which lets you use the extends keyword to inherit particular values, methods or properties from another object or class.

When you have a complex component like a modal or form, class components are a suitable choice. Your code will become more readable if you use class components to segregate its various methods and properties.

How It Functions

You’ll need to install Vue class component in order to use it:

$ npm install --save vue-class-component
Below is a standard sample code snippet for Vue class components.:

<template>
 <div>
  <h1> {{ msg }} </h1>
  <button @click="clearMessage">Greeting</button>
 </div>
</template>

<script>
 import { Component, Vue } from 'vue-class-component';

 //Define component using the class-like syntax
    @Component
 export default class Greet extends Vue {
 //component property
      msg = 'Welcome'

 //component methods
      clearMessage() {
 this.msg = ''
      }

      sayWelcome() {
 this.msg = 'Welcome'
      }
    }
</script>

The HTML-like syntax that corresponds to the DOM is specified by the template tag. By using the methods and properties instantiated in the script tag, its data can be controlled and set. Your class is turned into a Vue component by the @Component decorator, while the next line defines the name of your component: Greet. In order for other components to utilize the Vue properties and methods that this component inherits (e.g. the mounted() method), it exports them so that other components can also make use of them.

The Greet component is then imported and used:

import Greet from './Greet.vue'
<App>
 <Greet />
</App>

Single-file Components

A single-file component — simply referred to as SFC—is made up of 3 blocks:

<template>: Basically the HTML-like foundation of the UI.
<style>: Where all the styling in the UI is done.
<script>: Used to process the dynamic functionality and logic of the application.

They are in charge of its structure, style and logic.

A typical SFC is demonstrated below:

<template>
 <p class="greetings">{{ greet }}</p>
</template>

<script>
 export default {
    data() {
 return {
        greet: 'Welcome!'
      }
    }
  }
</script>

<style scoped> <!--the `scoped` attribute applies this style to only this component-->
.greetings {
  color: white;
  font-family: Arial;
}
</style>

A few merits of using SFC’s are:

It’s created using familiar HTML, CSS, and JavaScript syntax, and it contains all concerns (structure, style, and logic) of an element in one component.
It takes a scope attribute like <style scoped> in its styling tag to designate styles to a specific component.

Some use cases for SFCs are:

Creating applications with a single page.
Making static pages.

How It Functions

The <template> block lets you attach the rendered DOM to your designated Vue instance's data (commonly in the <script> block), which then gets added into the virtual DOM. The <style> block is added into the browser as an actual <style> tag during development to simplify hot updates.

The SFC is normally pre-compiled by a Vue library called @vue/compiler-sfc into JavaScript and CSS.

Dynamic Components

During run time, you can swap between components, thanks to dynamic components. You could use a dynamic component to render a component based on specific conditions rather than employing unique components separately. The dynamic component can serve as a replacement for conditional directives like v-else, v-else-if, and v-if with a v-bind:is directive, which is also written as :is, e.g.:

<component :is="comp" />
Code that uses dynamic components is substantially more reusable. It can also increase speed since it decreases the number of times your page loads by rendering components dynamically instead of routing to the individual components.

A few sample use cases for dynamic components are as follows:

Navigating between tabbed components without routing to a new page.
Displaying different content on the page based on a user's login status.
Rendering different types of pop-ups dynamically in one component element.

How It Functions

A dynamic component accepts a component by inserting its name as the parameter, or in some situations, as the component's options object. First, you’ll have to import the components that are to be used dynamically:

import Write from './Write.vue'
import Preview from './Preview.vue'
Next, make a variable to represent the present component, which will be rendered by default, and then dynamically later on, depending on the user’s actions.

This variable can be generated as shown below:

export default {
    components: {
        Write,
        Preview
    }
    data(){
 return {
            content: "Write" //default component to be rendered
        }
    }
}

Lastly, the components can be added to our template:

<template>
 <button @click='content = "Write"'> Write content here... </button> <!--set content to `Write` component--> 
 <button @click='content = "Preview"'> Preview content </button> <!--set content to `Preview` component-->
 <BlogPost :is='content'/> <!--dynamic component which will render based on what button is clicked-->
</template>

Table Components

As the name suggests, table components are components that let you render data in a tabular format. To render table components in Vue, the majority of developers utilize tools like Bootstrap.

Here is an example of a basic code snippet of a table component:

<template>
 <div>
 <table>
 <thead>
 <tr>
 <th v-for="(header, index)in headers" :key="index"> <!--loop through headers and render 'First Name', 'Last Name'-->
 {{ header }}
 </th>
 </tr>
 </thead>
 <tbody>
 <!--accept dataObject prop frm parent component with sample data like:
           dataObject=[
            { firstName: "Chris", lastName: "Roland" },
            { firstName: "Andrea", lastName: "Landry" },
            { firstName: "Somto", lastName: "Rose" },
          ]-->
 <tr v-for="(data, index) in dataObject" :key="index + 'x'">
 <td>{{ data.firstName }}</td>
 <td>{{ data.lastName }}</td>
 </tr>
 </tbody>
 </table>
 </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    dataObject: Array,
  },
  computed: {
    headers() {
 const prop = ['First Name', 'Last Name']
 return prop;
    },
  },
};
</script>

 <!--Add "scoped" attribute to limit CSS to this component only-->
 <style scoped>
 table{
 border-collapse: collapse;
    }
 tr, th {
 background: gray;
    }
 tr:nth-child(odd) {
 background: #fff;
   }
 </style>
</script>

Table components are helpful because they enable you to organize comparable or statistical facts in a comprehensible format.

How table components are used is demonstrated below:

<table-component
     :data="[
     { firstName: 'Wesley', birthday: '04/10/1940', score: 72 },
     { firstName: 'Ann', birthday: '18/06/1942', score: 70 },
     { firstName: 'Georgia', birthday: '25/02/1943', score: 22 },
     { firstName: 'Ralph', birthday: '07/07/1940', score: 2 },
     ]"
 sort-by="score"
 sort-order="asc"
     >
     <table-column show="firstName" label="First name"></table-column>
     <table-column show="score" label="Score" data-type="numeric"></table-column>
     <table-column show="birthday" label="Birthday" :filterable="false" data-type="date:DD/MM/YYYY"></table-column>
 </table-component>

This will produce a table that can be sorted and filtered. Above the table, a filter field will be visible. When filtering, if your data contains any HTML, it will be removed during the filter process. Clicking on the column headers will let you sort the table. By default, it will keep track of the filter and sorting that was used for 15 minutes.

How It Functions

Table components normally consist of a table body and a header. The header is indicated by the tag. The body contains the table rows and columns, which are indicated using the and tags. The table component can take in props and computed data in order to manipulate the data that it renders. It works well with state or can work the same way functional components do, and it basically renders nonreactive data in a tabular format.

Functional Components.

This keyword cannot be used with these components because functional components in Vue are simply components that are stateless, have no lifecycle methods, and no instances. Because they can’t sustain their own state, they are not reactive. They take in props and render a UI-based function on the received props, but they can't know when the data has changed. It's relevant to note that they’re not the same with a render function, but are capable of containing render functions in them.

An example of a functional component template is show below:

<template functionals> <!--note the functional keyword-->
 <h1> {{props.sample}}</h1> <!--accepts a prop called "sample"-->
</template>

<script>
 export default {
    props: {
      sample: String
    }
  }
</script>

In comparison to dynamic components, functional components are easier to write and debug since they have less complexity and are faster because they have no state and reactivity.

Some use cases for functional components are as follows:

To return multiple root nodes.
For solely presentational UIs that do not require state or reactivity.
For looping by using the v-for directive and rendering list items.

How It Works
The functional component works similarly to the single-file component, except that in this case, it is stateless and has no instance, and also includes a functional keyword in its tag, which informs Vue that it is a functional component.

Conclusion

In this article, we intricately discussed Vue components and how they work. We then broke down the listed components and explained them with in-depth examples and code demonstrations.

After reading this article, developers should have an appropriate and broader understanding of the Vue components, and have little to no difficulty utilizing them.

DEV Community: Chris Ebube Roland

IQ, EQ, and LQ: The Three Intelligences That Matter

IQ, EQ, and LQ: The Three Intelligences That Matter

IQ, EQ, and LQ: The Three Intelligences That Matter

IQ: The Intelligence Quotient

EQ: The Emotional Quotient

LQ: The Love Quotient

Why All Three Matter

Final Thought

Where do you think you’re strongest: IQ, EQ, or LQ?

Copy to Clipboard in JavaScript with just ONE Line of Code!

Step-by-Step Code

Use Cases:

How to View Your Local Dev Server on Your Phone (VsCode Live Server, Next.js, React/Vite)

What You’ll Learn

Step-by-Step Recap:

For Live Server (HTML/JS Projects):

For Next.js Apps:

For React/Vite Apps:

Troubleshooting Tips:

The Use of Biometrics as a Cybersecurity Method

Introduction to Biometrics

History of Biometrics

Types of Biometrics

Behavioral Biometrics

Physiological Biometrics

Biometrics in Cybersecurity

How Do They Work?

Advantages of Biometric Security System

Biometrics Security Posture

Biometric Future Trends

Data Regulations Guiding Biometrics

Drawbacks in the Biometric Security System

References

CIA in cybersecurity

Introduction to CIA triad model

Background and history of CIA triad

Elements in the CIA triad model

Confidentiality, Integrity and Availability

Importance of the CIA triad

Challenges faced by the CIA triad

Internet of things security

Internet of things privacy

Big data

Best practices for implementing the CIA triad

CIA triad in cybersecurity

CIA triad in ISO 27001

Conclusion

Overview of lesson

Resources

Form Validation with HTML

Stilify vs Master UI/Styles: next-generation Tailwind-like CSS libraries

Working With The DOM In JavaScript

HTML for Absolute Beginners

Introduction.

History of HTML.

How to get started.

Tags and attributes.

tags, which are used to create headings.

Do’s and Don’ts.

Creating your first Html.

Project

Conclusion.

The Modern Guide to Vue Components

Introduction

Class Components

How It Functions

Single-file Components

How It Functions

Dynamic Components

How It Functions

Table Components

How It Functions

Functional Components.

Conclusion