DEV Community: Emmanuel Daniel

Introduction to Cryptography for Beginners

Emmanuel Daniel — Wed, 04 Sep 2024 17:14:32 +0000

Part 1: A Beginner's Journey into the World of Secured Information

The Hidden Messages of the Ancient Mayans

Imagine you’re an archaeologist, standing in the dense jungles of Central America, gazing at the ruins of an ancient Mayan city. The stone walls are covered in hieroglyphs—complex symbols that hold the secrets of a civilization long gone. For centuries, these symbols were a mystery, a puzzle that only a select few could decode. The ancient Mayans were masters of secrecy, encoding their knowledge, history, and rituals into these intricate scripts to protect them from invaders and outsiders.

Just like the Mayans, humanity has always sought ways to protect information—whether it be the location of treasure, military strategies, or personal secrets. Over the centuries, the art and science of securing information evolved into what we now know as cryptography. From the enigmatic Mayan glyphs to the digital encryption methods that safeguard your online banking today, cryptography is all around us.

In this part, we will explore the fundamentals of cryptography, delve into its real-world applications, and even get our hands dirty with some JavaScript to see these principles in action. Whether you're a seasoned developer or just curious about the mysteries of code, this journey will illuminate the hidden world of secured communication.

1. The Art of Encryption: Locking Away Secrets

What is Encryption?

Encryption is like creating a secret language that only you and your trusted allies can understand. It involves transforming a readable message into a coded form that can only be deciphered by someone who has the key. Throughout history, encryption has played a crucial role in protecting sensitive information from prying eyes.

Historical Example: The Mayan Glyphs

The Mayans used a sophisticated system of hieroglyphs to record their knowledge. To the untrained eye, these symbols were incomprehensible, but to the Mayans, they were a powerful way to encode their understanding of the world. Deciphering these glyphs required not only knowledge of the symbols themselves but also an understanding of the cultural and historical context in which they were used.

JavaScript Example:

Let’s see a simple example of encryption using JavaScript. We’ll use the CryptoJS library, which allows us to encrypt a message with a key, much like locking it away with a secret code.

// Import CryptoJS
import * as CryptoJS from 'crypto-js';

// Encryption
const plaintext = "Hello World!";
const key = "secretkey123"; // Key for encryption

// Encrypt the plaintext
const ciphertext = CryptoJS.AES.encrypt(plaintext, key).toString();

console.log("Encrypted:", ciphertext);

In this example, CryptoJS.AES.encrypt takes a plaintext message and a secret key, transforming the message into an encrypted string that appears as a jumble of characters to anyone without the key.

2. Hashing: Creating Unique Identifiers

What is Hashing?

Hashing is the process of taking an input and transforming it into a fixed-size string of characters, typically a hash code. Unlike encryption, which can be reversed with the correct key, hashing is a one-way street. Once a piece of data is hashed, you cannot retrieve the original input. Hashing is commonly used to verify data integrity and secure passwords.

Historical Example: The Stone Calendars

The Mayans also created elaborate stone calendars to track time and important events. These calendars were so precise and unique that no two were exactly alike. In a way, these calendars were like early hash functions—each one representing a unique output that couldn’t be easily replicated.

JavaScript Example:

Here’s how you can generate a hash of a message using the crypto module in Node.js:

import * as crypto from 'crypto';

// Hashing
const hash = crypto.createHash('sha256').update('Hello World!').digest('hex');

console.log("Hash:", hash);

This creates a SHA-256 hash of the message "Hello World!", producing a unique, fixed-length string that represents the original input.

3. Encoding: Making Data Accessible

What is Encoding?

Encoding is a process used to transform data into a different format using specific rules. Unlike encryption, encoding isn’t meant to secure the data but to make it compatible with various systems. It’s like converting a Mayan glyph into a modern alphabet so that it can be easily read and understood by others.

Historical Example: The Rosetta Stone

The Rosetta Stone is a famous artifact that helped historians decode Egyptian hieroglyphs. The stone contained the same text written in three different scripts: Greek, Demotic, and Egyptian hieroglyphs. By comparing these scripts, scholars were able to crack the code of ancient Egyptian writing, making it accessible to the world.

4. Implementing Morse Code in JavaScript

To give you a practical example of encoding, let's implement Morse code in JavaScript. This simple encoding system was widely used in the 19th and early 20th centuries for telegraphy, allowing people to communicate over long distances.

Morse Code Basics

Morse code represents each letter of the alphabet and each numeral with a unique sequence of dots (.) and dashes (-). For example:

A is represented as .-
B is represented as -...
1 is represented as .----

JavaScript Implementation

Here’s a JavaScript implementation of Morse code for encoding and decoding messages:

// Morse Code Dictionary
const morseCodeDict = {
 'A': '.-', 
 'B': '-...', 
 'C': '-.-.', 
 'D': '-..',
 'E': '.',
 'F': '..-.',
 'G': '--.',
 'H': '....',
 'I': '..',
 'J': '.---',
 'K': '-.-',
 'L': '.-..',
 'M': '--',
 'N': '-.',
 'O': '---',
 'P': '.--.',
 'Q': '--.-',
 'R': '.-.',
 'S': '...',
 'T': '-',
 'U': '..-',
 'V': '...-',
 'W': '.--',
 'X': '-..-',
 'Y': '-.--',
 'Z': '--..',
 '1': '.----',
 '2': '..---',
 '3': '...--',
 '4': '....-',
 '5': '.....',
 '6': '-....',
 '7': '--...',
 '8': '---..',
 '9': '----.',
 '0': '-----',
 ' ': ' / ',
};

// Encoding Function
function encodeToMorse(text) {
    return text.toUpperCase().split('').map(char => morseCodeDict[char] || '').join(' ');
}

// Decoding Function
function decodeFromMorse(morseCode) {
    const reverseDict = Object.fromEntries(Object.entries(morseCodeDict).map(([key, value]) => [value, key]));
    return morseCode.split(' ').map(code => reverseDict[code] || '').join('');
}

// Example Usage
const message = "Hello World";
const encodedMessage = encodeToMorse(message);
console.log("Encoded Message:", encodedMessage);

const decodedMessage = decodeFromMorse(encodedMessage);
console.log("Decoded Message:", decodedMessage);

Simple steps:

Morse Code Dictionary: A mapping of characters to their Morse code equivalents.
Encoding Function: Converts a text string to Morse code.
Decoding Function: Converts Morse code back to the original text.

5. Real-World Use Cases of Morse Code

Emergency Communication: Morse code is still used in emergencies where voice communication might not be possible, such as sending distress signals in remote areas.
Amateur Radio: Morse code is popular among ham radio operators, who use it to communicate over long distances.
Historical Context: Understanding Morse code gives us insight into early telecommunication systems and the evolution of digital communication.

Conclusion: The Art and Science of Cryptography

Cryptography is a fascinating field that blends the precision of mathematics with the creativity of code-breaking. From ancient scripts like the Mayan glyphs to modern encryption techniques, the need to secure and decode information has been a constant throughout human history.

In the next part of our journey, we’ll take a closer look at practical encoding and decoding implementations in JavaScript. We’ll explore how these concepts are used in everyday applications, providing you with the tools and knowledge to implement these techniques in your own projects.

5 Essential HTML and CSS Tweaks for Devs

Emmanuel Daniel — Thu, 22 Aug 2024 08:55:19 +0000

Hey there! If you’re diving into web development, you probably know that HTML and CSS are the building blocks of any website. But did you know that these tools have some pretty cool tricks up their sleeves? You don’t need to be a coding wizard to make your site look amazing and work smoothly. With just a few simple tweaks, like adding smooth hover effects, customizing checkboxes, and making images fit perfectly on any device, you can really up your game.

In this article, we’ll explore five handy HTML and CSS tricks that can make your web projects shine. Whether you’re looking to make your buttons pop, improve your form elements, or ensure your images look great on all screens, these tricks are easy to use and super effective. By the end, you’ll have some new tools to make your websites not only look better but also feel more user-friendly.

Checkout the codepen for this article.

Let’s jump in and see how you can start using these tips right away!

5 Simple HTML + CSS Tricks Devs Should Know

1. Hover Effects with `transition`

Introduction

Hover effects are a fundamental part of creating interactive and engaging web designs. With CSS transition, you can smoothly change the properties of elements when a user hovers over them, enhancing user experience.

Example: Button Hover Effect

Let's create a simple button that changes color when a user hovers over it.

HTML:

<button class="hover-button">Hover Me</button>

CSS:

.hover-button {
  background-color: #4CAF50; /* Initial background color */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition */
}

.hover-button:hover {
  background-color: #45a049; /* New background color on hover */
}

How It Works

Transition: The transition property is applied to the background-color, specifying that any changes should take 0.3 seconds and should ease in and out. This creates a smooth color transition when the button is hovered.
Hover State: The :hover pseudo-class changes the button’s background color when the mouse pointer hovers over it.

Use Cases

Buttons: Use hover effects to give users visual feedback that a button is clickable.
Links: Highlight links on hover to improve navigation clarity.
Images: Subtle changes in opacity or scale on hover can make images more interactive.

Hover effects using transition are simple yet powerful tools to make your web pages more dynamic and engaging. They add polish to your designs and provide users with clear visual cues.

2. Custom Checkbox/Radio Button

Introduction

Default checkboxes and radio buttons can be visually unappealing and inconsistent across different browsers. By customizing these form elements with CSS, you can create a more consistent and visually appealing user interface.

Example: Custom Checkbox

Let’s create a custom checkbox using CSS.

HTML:

<label class="custom-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  Label Text
</label>

CSS:

.custom-checkbox {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  display: inline-block;
  user-select: none; /* Prevents text selection on double click */
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #ccc;
  border-radius: 4px;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

How It Works

Hidden Checkbox: The checkbox is hidden using opacity: 0, but remains functional.
Custom Appearance: The checkmark class is styled to appear as the checkbox box, with a custom color and rounded corners.
Checked State: When the checkbox is checked, a white checkmark appears inside the box using the :after pseudo-element.

Use Cases

Forms: Custom checkboxes and radio buttons are perfect for enhancing the visual appeal of forms, especially in modern or themed designs.
Interactive Elements: Use custom styles to make interactive elements stand out and match your website's overall aesthetic.

Custom checkboxes and radio buttons offer a way to enhance the visual consistency of your forms across all browsers, providing a better user experience.

3. Responsive Images with `object-fit`

Introduction

Responsive images are crucial for modern web design, ensuring that images look good on all screen sizes. The CSS object-fit property allows you to control how images resize and fit within their containers, making them an essential tool for responsive design.

Example: Responsive Image

Here’s how to make an image responsive using the object-fit property.

HTML:

<img src="image.jpg" alt="Responsive Image" class="responsive-image">

CSS:

.responsive-image {
  width: 100%;  /* Image scales with the width of the container */
  height: 300px;
  object-fit: cover; /* Ensures the image covers the container without distortion */
}

How It Works

Responsive Width: Setting the image’s width to 100% makes it scale according to its container's width, making it responsive.
Object-Fit: The object-fit property is set to cover, which ensures the image fills the container while maintaining its aspect ratio. If the image’s aspect ratio doesn’t match the container’s, parts of the image will be cropped.

Use Cases

Banners: Perfect for creating responsive banners or hero images that scale well on all devices.
Galleries: Use object-fit to ensure that gallery images look uniform, regardless of their original dimensions.
Profile Pictures: Maintain the integrity of profile pictures while fitting them into predefined containers.

The object-fit property is a powerful tool for creating responsive images that maintain their aspect ratio, ensuring a consistent and polished look across different screen sizes.

4. Using `datalist` for Autocomplete Input

Introduction

The datalist element in HTML5 provides an easy way to add autocomplete functionality to your input fields. It allows users to select from a predefined list of options, improving user experience and reducing errors.

Example: Autocomplete Input

Let’s create an input field with autocomplete using the datalist element.

HTML:

<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

How It Works

Input Field: The input field is linked to the datalist via the list attribute.
Datalist Options: The datalist element contains a list of option elements, which the user can select from as they type.

Use Cases

Forms: Use datalist to suggest options in forms, such as country names, cities, or frequently used terms.
Search Bars: Enhance search functionality by providing common search terms as suggestions.
Input Fields with Suggestions: Ideal for input fields where a predefined list of entries can assist the user in making a selection.

The datalist element is a simple and effective way to add autocomplete functionality to your web forms, improving usability and helping users make accurate selections.

5. Using the `details` and `summary` Elements for Collapsible Content

Introduction

The HTML5 details and summary elements offer a straightforward way to create collapsible content sections on a web page. These elements are perfect for FAQs, where users can expand or collapse sections to view more information.

Example: Collapsible Content

Here’s how to create collapsible content using details and summary.

HTML:

<details class="custom-details">
  <summary>More Information</summary>
  <p>This is additional content that can be expanded or collapsed by the user.</p>
</details>

CSS:

.custom-details {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 300px;
  background-color: #f9f9f9;
}

.custom-details summary {
  font-weight: bold;
  font-size: 1.1em;
  cursor: pointer;
  list-style: none;
}

.custom-details summary::-webkit-details-marker {
  display: none; /* Hide the default triangle marker */
}

.custom-details summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 10px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.custom-details[open] summary::before {
  transform: rotate(90deg); /* Rotate the arrow when open */
}

.custom-details p {
  margin: 10px 0 0;
  font-size: 0.9em;
  line-height: 1.5;
}

How It Works

Collapsible Section: The details element creates a collapsible section, with the summary element serving as the clickable header.
Styling: The CSS styles the collapsible content, including a custom arrow icon that rotates when the section is expanded.
Expanded State: When the details element is open, the arrow icon rotates, indicating that the content is expanded.

Use Cases

FAQs: Perfect for creating frequently asked questions sections where users can expand or collapse answers.

Checkout the codepen for this article.

Conclusion

So, there you have it—some easy HTML and CSS tricks to make your websites really pop. By adding smooth hover effects, customizing form elements, and ensuring your images look great on any device, you can give your site a fresh, polished look. These tricks aren't just about aesthetics; they also make your site more user-friendly and engaging. Give these ideas a go and see how they can enhance your projects. And if you have any other HTML or CSS tips up your sleeve, drop them in the comments! Happy coding, and have fun experimenting with these techniques!

QuickRead: Mastering Loaders in Dashboards: A Guide to Enhancing User Experience

Emmanuel Daniel — Tue, 06 Aug 2024 14:34:19 +0000

Dashboards are the command centres of modern applications, presenting critical information at a glance. However, loading times can significantly impact user experience. This article outlines essential rules for effective loader implementation in dashboards.

Importance of Loaders in dashboards

Loaders are visual indicators that inform users about ongoing processes. Well-designed loaders can:

Reduce perceived wait times
Improve user satisfaction
Enhance trust in the application

Core Principles for Effective Loaders

Speed: Loaders should appear swiftly to avoid perceived delays.
Relevance: The loader should accurately reflect the loading content.
Consistency: Maintain a uniform loader style throughout the dashboard.
User-friendliness: Loaders shouldn’t be intrusive or annoying.

My 10 Essential Loader Rules (Not rules of thumb 👍)

Limit Full-Screen Modals: Reserve full-screen modals for page reloads or critical operations.
- Full-screen modals can be disruptive if overused. Utilize them only for significant actions where the user needs to understand that a major process is happening, such as when the entire page is reloading or during critical operations that require the user’s full attention.
Embrace Content-Based Skeleton Loaders: These mimic the content's structure, providing clear visual feedback.
- Skeleton loaders give users a sense of what content is loading by showing a placeholder that resembles the final layout. This approach helps users anticipate what will appear and reduces the feeling of waiting, making the experience more seamless.
Prioritize Critical Elements: Focus loading indicators on essential components affecting user interaction.
- Identify which parts of the dashboard are most crucial for user interaction and ensure these elements display loaders first. This prioritization helps maintain the flow of user tasks and keeps the most important functions accessible as quickly as possible.
Utilize Progress Bars: For lengthy tasks, progress bars offer valuable time estimations.
- Progress bars are particularly effective for tasks that take longer to complete because they provide users with a visual indication of how much time remains. This transparency helps manage user expectations and reduces frustration during long waits.
Optimize Loader Performance: Ensure loaders are lightweight to prevent performance impacts.
- Loaders themselves should not add to the loading time. Use simple, lightweight animations or graphics to ensure they appear quickly and do not burden the system, maintaining overall performance and responsiveness.
Consider Screen Sizes: Verify loader visibility and appropriateness across different devices.
- Test loaders on various screen sizes to ensure they are effective and appropriately scaled for all devices. A loader that looks great on a desktop might not be as effective on a mobile device, so adaptability is key.
Provide Feedback for Failures: Inform users of failed loads and offer recovery options.
- When loading fails, it's crucial to notify users promptly and clearly. Provide error messages that explain what went wrong and, if possible, offer options to retry or navigate to other parts of the dashboard.
Keep Animations Simple: Subtle animations are generally more effective than complex ones.
- Simple animations are less likely to distract users and can load faster than complex ones. Overly intricate animations might seem impressive but can lead to performance issues and divert attention from the primary content.
Use Clear Loading Messages: Provide informative messages when applicable.
- Where appropriate, supplement loaders with brief messages that explain what is happening. This additional context can reassure users that the process is progressing as expected and help them understand any necessary wait times.
Test with Real Users: Gather feedback to refine loader effectiveness and user experience.
- Conduct user testing to gather insights on how loaders perform in real-world scenarios. Users can provide valuable feedback on whether loaders are effective, if they improve the experience, and where there might be room for improvement.

Additional Considerations

Accessibility: Ensure loaders are usable by users with disabilities.
Branding: Align loader styles with the overall dashboard design and branding.
Contextual Loading: Display loaders only when necessary to maintain a clean interface.

Summary: Implementing Effective Loaders

1. Choose the Right Loader Type:

Skeleton loaders are ideal for content-heavy sections.
Progress bars are suitable for long-running tasks.
Simple spinners can be used for general loading indicators.

2. Design Consistent Loaders:

Maintain a consistent style and colour scheme for loaders throughout the dashboard.
Consider using a design system or component library for efficiency.

3. Optimize Loader Performance:

Use lightweight images or SVGs for loader graphics.
Minimize unnecessary animations.
Test loader performance on different devices and network conditions.

4. Provide Clear Feedback:

Display loaders promptly after user interactions.
Use informative loading messages if appropriate.
Indicate loading status changes (e.g., from loading to complete).

5. Test Thoroughly:

Test loaders on different screen sizes and devices.
Gather user feedback to identify areas for improvement.

I hope you enjoyed this article. I tried not to be opinionated, but again, these are not rules of thumb. In the next part, we will look at the actual implementation in React Typescript.

DEV Community: Emmanuel Daniel

Introduction to Cryptography for Beginners

Part 1: A Beginner's Journey into the World of Secured Information

The Hidden Messages of the Ancient Mayans

1. The Art of Encryption: Locking Away Secrets

What is Encryption?

2. Hashing: Creating Unique Identifiers

What is Hashing?

3. Encoding: Making Data Accessible

What is Encoding?

4. Implementing Morse Code in JavaScript

JavaScript Implementation

5. Real-World Use Cases of Morse Code

Conclusion: The Art and Science of Cryptography

5 Essential HTML and CSS Tweaks for Devs

5 Simple HTML + CSS Tricks Devs Should Know

1. Hover Effects with transition

Introduction

Example: Button Hover Effect

How It Works

Use Cases

2. Custom Checkbox/Radio Button

Introduction

Example: Custom Checkbox

How It Works

Use Cases

3. Responsive Images with object-fit

Introduction

Example: Responsive Image

How It Works

Use Cases

4. Using datalist for Autocomplete Input

Introduction

Example: Autocomplete Input

How It Works

Use Cases

5. Using the details and summary Elements for Collapsible Content

Introduction

Example: Collapsible Content

How It Works

Use Cases

Conclusion

QuickRead: Mastering Loaders in Dashboards: A Guide to Enhancing User Experience

Importance of Loaders in dashboards

Core Principles for Effective Loaders

My 10 Essential Loader Rules (Not rules of thumb 👍)

Additional Considerations

Summary: Implementing Effective Loaders

1. Hover Effects with `transition`

3. Responsive Images with `object-fit`

4. Using `datalist` for Autocomplete Input

5. Using the `details` and `summary` Elements for Collapsible Content