DEV Community: Ayotomide

Day 5 of #100daysofMiva Coding Challenge: Values and Variables in JS

Ayotomide — Fri, 30 Aug 2024 12:53:09 +0000

Hi guys. I've been so busy lately I haven't even had the time to document how my journey has been🤧. Regardless, I'll continue so stay tuned❤️.

For my day 5 documentation, I just did something very simple and short.

So as you can see from the above, it's a very simple task to do once you understand values and variables.

So what are values and variables?

Values in JavaScript

Think of values as the actual data or information you work with in JavaScript. These are like the ingredients in a recipe. Some examples of values are:

Numbers: Like 10, 3.14, or -5
Text (called strings): Like "Hello", "JavaScript is fun!", or "123"
Boolean: Which are just true or false
Others: There are also other types of values, like null (which means "nothing") or undefined (which means "not yet defined").

Variables in Javascript

Now, imagine you have a box with a label on it. You can put one of these values into that box and label it with a name. This labeled box is called a variable.

For example:

You might have a variable called age, and inside that box, you store the number 13.
You could have another variable called greeting, and in that box, you store the text "Hello, World!".

Here’s what it looks like in code:

let age = 13;  // Here, 'age' is the variable, and '13' is the value stored in it.
let greeting = "Hello, World!";  // 'greeting' is the variable, and the text is the value.

Why Use Variables?

Variables are helpful because they let you store data and then use or change it later. Instead of writing "Hello, World!" over and over, you can just write greeting wherever you need that message. If you need to change the message, you only need to update it in one place.
So, when you code in JavaScript, you're creating variables to store values, which you can then use to build your program!

Now that we're done with what values and variables are, let's unveil my assignment.

I started by first linking my second JS file which I'll be using called "assignment.js".
NB: We can link more than one JS file to a HTML file

Secondly, I went to my browser to open my console.

NB: To open your console, right click on your mouse, click on inspect and navigate to console

As we can see from the above console, only the output of my 1st JS file is showing.

I then went ahead to input my variables and values which will later run on the console as will be seen below.

And that’s a wrap for Day 5!🎉 I told you it was simple—just like enjoying a slice of cake 🍰 (minus the calories, of course). Thanks for sticking around and being awesome! More fun (and of course, a few more lines of code) are coming your way, so don’t forget to stay tuned. Until next time, happy coding! ✨

Day 3&4 of the #100daysofMiva Coding Challenge: Linking JavaScript to HTML

Ayotomide — Sat, 24 Aug 2024 17:14:07 +0000

Hi guys. Sorry for posting this late. I had some issues while writing and publishing this article but it's all resolved now. Anyways, let's forget that and focus on the article of the day - Linking Javascript to an HTML document,

Brief overview of HTML and JavaScript

HTML (Hypertext Markup Language) is the language used to structure content on the web. It organizes elements like text, images, and links into a cohesive layout, forming the foundation of any webpage. However, HTML is static—it displays content but doesn’t add interactivity.

JavaScript is a dynamic programming language that allows you to add interactivity and behavior to your webpage. With JavaScript, you can create animations, validate forms, handle events, and update content without reloading the page, making your website more engaging and responsive.

Importance of Linking JavaScript to HTML

Linking JavaScript to HTML is essential because it enables you to combine the structure provided by HTML with the dynamic features of JavaScript:

Enhances User Experience: JavaScript allows your webpage to respond to user actions, creating a more interactive and engaging experience.
Adds Dynamic Functionality: You can use JavaScript to create features like dynamic forms, interactive maps, and real-time updates, turning a static webpage into a powerful web application.
Keeps Code Organized: By linking an external JavaScript file, you separate content (HTML) from behavior (JavaScript), making your code cleaner and easier to manage.
Improves Performance: External JavaScript files can be cached by the browser, reducing load times on subsequent visits and improving overall site performance.

II. Basic Methods of Linking JavaScript

When working with JavaScript, there are three main ways to incorporate it into your HTML: Inline, Internal, and External JavaScript. Here’s a quick overview of each method, with a primary focus on External JavaScript.

1. Inline JavaScript

Inline JavaScript is written directly within an HTML element’s tag using the onclick, onmouseover, or other event attributes. For example:

`<button onclick="alert('Hello, World!')">Click Me</button>`

While convenient for small tasks, inline JavaScript is generally discouraged because it mixes HTML and JavaScript, leading to code that is harder to read and maintain.

2. Internal JavaScript

Internal JavaScript is placed within a <script> tag inside the HTML document’s <head> or <body> section. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal JavaScript Example</title>
<script>
function showMessage() {
alert('Hello, World!');
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>

Internal JavaScript is useful for small projects or single-page applications but can quickly become cluttered as your codebase grows.

III. External JavaScript: The Preferred Method

External JavaScript is the most recommended method for linking JavaScript to HTML. It involves writing your JavaScript code in a separate .js file and linking it to your HTML document using the <script> tag.

Create an External JavaScript File:

// script.js
function showMessage() {
alert('Hello, World!');
}

Link the JavaScript File to Your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External JavaScript Example</title>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
<script src="script.js"></script>
</body>
</html>

While Inline and Internal JavaScript are suitable for simple or small-scale projects, External JavaScript is the preferred method for most web development. It promotes cleaner code, better organization, and improved performance, making it a best practice for linking JavaScript to HTML.

IV. Best Practices for Linking JavaScript

When linking JavaScript to HTML, it's important to follow best practices to optimize performance and ensure your code runs efficiently. Here’s a look at some key practices, including using the defer and async attributes and other performance considerations.

1. Using the `defer` Attribute

The defer attribute ensures that your JavaScript file is loaded in the order it appears but only executed after the HTML document has fully loaded. This is particularly useful when your script depends on the HTML structure being fully rendered.

<script src="script.js" defer></script>

2. Using the `async` Attribute

The async attribute allows the browser to download the JavaScript file asynchronously while continuing to parse the HTML document. Once the script is downloaded, it’s executed immediately, which may occur before or after the HTML has been fully loaded.

<script src="script.js" async></script>

3. Considerations for Performance Optimization

Place Scripts at the Bottom: If you’re not using defer or async, place your <script> tags just before the closing </body> tag. This ensures the HTML is fully loaded before the JavaScript executes, preventing any delays in rendering.

<body>
<!-- Content here -->
<script src="script.js"></script>
</body>

Minify JavaScript Files: Minifying your JavaScript files reduces their size by removing unnecessary whitespace, comments, and other non-essential elements. This results in faster downloads and improved performance.
Use a Content Delivery Network (CDN): Hosting your JavaScript files on a CDN can reduce latency and improve load times by delivering the files from a server closer to the user.

V. Troubleshooting Common Issues

inking JavaScript to HTML is usually straightforward, but a few common issues can arise. Here’s how to troubleshoot and resolve them effectively.

1. Incorrect File Paths

One of the most common problems is using an incorrect file path in the src attribute of the <script> tag. If the path is wrong, the browser won’t be able to locate the JavaScript file, and your code won’t run.

Solution:

Double-check the path to your JavaScript file. Ensure that the path is relative to the HTML file's location.
For example, if your script.js file is in the same directory as your HTML file, use:

<script src="script.js"></script>

If it’s in a subfolder called js, the correct path would be:

<script src="js/script.js"></script>

2. Script Loading Order

JavaScript files can sometimes execute before the HTML content is fully loaded, causing errors if your script tries to manipulate elements that haven’t been rendered yet.

Solution:

Use the defer attribute: This ensures your script runs only after the entire HTML document has been parsed.

<script src="script.js" defer></script>

Place the <script> tag just before the closing </body> tag: This ensures that the HTML content loads before the script runs.

<body>
    <!-- Content here -->
    <script src="script.js"></script>
</body>

3. Browser Console for Debugging

When something goes wrong, the browser’s console is your best friend. It shows errors, warnings, and messages that can help you diagnose and fix issues.

Solution:

Open the browser’s developer tools (usually by pressing F12 or Ctrl+Shift+I) and navigate to the "Console" tab.
Look for error messages, which typically include a description of the problem and the line number where it occurred.
Use console.log() in your JavaScript code to print values and track your script’s behavior for debugging purposes.

Example:

console.log("Script loaded successfully.");

VI. Advanced Techniques

Once you’re comfortable with the basics of linking JavaScript to HTML, you can explore more advanced techniques that enhance your web development projects. Here are two key areas to dive into:

1. Dynamic Script Loading

Dynamic script loading allows you to load JavaScript files on the fly, based on certain conditions or events. This technique is useful for optimizing page load times by loading scripts only when they’re needed.

Example:

function loadScript(url) {
const script = document.createElement('script');
script.src = url;
document.head.appendChild(script);
}

// Load an additional script when needed
loadScript('additionalScript.js');

Use Cases:

Loading large libraries or plugins only when specific features are activated.
Loading different scripts based on user actions or device type.

2. Module System (ES6 Modules)

With the introduction of ES6 modules, JavaScript now supports the modularization of code natively. ES6 modules allow you to split your code into reusable, maintainable files and import only what you need.

Example:

Exporting Functions or Variables:

// math.js
export function add(a, b) {
return a + b;
}

Importing Functions or Variables:

// main.js
import { add } from './math.js';

console.log(add(2, 3)); // Outputs: 5

Benefits:

Code Organization: Break down large codebases into smaller, focused modules.
Reusability: Easily reuse code across different parts of your project or across projects.
Avoid Global Namespace Pollution: Modules automatically create a local scope, preventing naming conflicts.

Note: To use ES6 modules, add the type="module" attribute to the <script> tag:

<script src="main.js" type="module"></script>

VIII. Conclusion

Linking JavaScript to HTML is a foundational skill in web development, opening the door to creating dynamic, interactive, and fully functional websites. Starting with the basics, you learned how to integrate JavaScript using inline, internal, and external methods, with a strong focus on the external approach for better code organization and performance.

We explored essential best practices like using the defer and async attributes to optimize script loading, along with troubleshooting tips to help you navigate common issues. Delving into advanced techniques, such as dynamic script loading and ES6 modules, gave you the tools to write more modular, efficient, and maintainable code.

Remember, JavaScript is the key to transforming your static HTML pages into interactive experiences. As you continue to experiment and grow your skills, you’ll discover just how powerful and versatile JavaScript can be. Keep coding, keep exploring, and most importantly, keep having fun while building amazing things on the web!

Anticipate my next post👋🏾❤️

Day 2 of #100daysofMiva Coding Challenge

Ayotomide — Thu, 22 Aug 2024 08:58:10 +0000

Hi guys. So for day 2 of this challenge, I decided to leave GitHub and focus on what I really wanted to learn: Javascript.

What's Javascript

Imagine you’re a wizard in the world of web development. You’ve got your trusty HTML to build the structure of your website, like the bones of a magical creature. Then, you have CSS to give it some style—like choosing the perfect robe or outfit. But something’s missing. Your creation is still, lifeless. That’s where JavaScript (JS) comes in—it’s the magic wand that brings your creation to life! JavaScript is a programming language primarily used to create interactive and dynamic content on websites. It enables developers to implement features like animations, form validations, and real-time updates without needing to reload the page. JavaScript can be used on both the front end (what users see and interact with) and the back end (server-side operations) of web applications.

JavaScript is everywhere. It’s the language that makes the web what it is today—interactive, fun, and endlessly engaging. Whether you’re looking to create a cool website, an addictive mobile app, or even a game, learning JavaScript is like learning the most powerful spell in the book.

Uses of Javascript

JavaScript (JS) is a versatile programming language widely used in web development. Here are some key uses of JavaScript:

1. Web Development (Frontend)
Interactive Web Pages: JavaScript makes websites interactive. From dropdown menus to image sliders, it powers the dynamic elements you see on a website.
Form Validation: It checks if the user has filled out a form correctly before submitting it.
Animations: JavaScript can create animations and effects, such as fading elements or moving objects on the screen.
2. Web Development (Backend)
Server-Side Programming: With Node.js, JavaScript can run on the server to handle requests, manage databases, and serve content.
Real-time Applications: JavaScript is used for real-time applications like chat apps, online gaming, and live data streaming.
3. Mobile App Development
Cross-Platform Mobile Apps: Frameworks like React Native and Ionic use JavaScript to build mobile apps that work on both iOS and Android.
4. Game Development
Browser Games: JavaScript, along with HTML5 and Canvas, is used to create interactive games that run directly in the browser.
5. Automation and Scripting
Task Automation: JavaScript can automate repetitive tasks in web development, such as minifying files or testing code.
Browser Extensions: JavaScript powers many browser extensions that enhance the functionality of browsers like Chrome and Firefox.
6. Data Visualization
Charts and Graphs: Libraries like D3.js and Chart.js allow developers to create complex data visualizations and interactive charts.
7. Artificial Intelligence and Machine Learning
AI and ML Models: JavaScript, with libraries like TensorFlow.js, can be used to build and run AI models directly in the browser.
8. Internet of Things (IoT)
IoT Devices: JavaScript can be used to program IoT devices, enabling communication between devices and the web.
9. Progressive Web Apps (PWAs)
PWAs: JavaScript enables the development of web apps that work offline and feel like native mobile apps.
10. API Integration
Fetching Data: JavaScript is used to interact with APIs, fetching data from servers and displaying it on web pages dynamically.

These are just a few of the many uses of JavaScript, which continues to be a key language in the tech industry due to its flexibility and wide range of applications.

What I did today on Javascript

So basically, I didn't go head on and start codes I didn't understand😂. I took it step by step. I first learnt how to code on the chrome development tool and I'll like to show you how I did that.

HOW TO OPEN THE CHROME DEVELOPMENT TOOLS
There are 3 ways to open the chrome development tools:
-Command+Alt+J on Mac
Control + Alt+ J on Windows
-Right clicking the mouse and then choosing inspect will also open the devlopment tool on Chrome. Although it will bring up the element tab and we can then go to console which is where we are going to carry out some codes.
-The last step is to go to the chrome menu and then go to view, click on developer. Under the developer click on Javascript console and the console tab will pop up.
The one that worked for me is the second one where I just right clicked on my mouse and clicked on inspect and then navigated to console tab.
NB: I used the guest browser and not my normal browser.

I can increase the font by clicking on command plus and then vice versa by clicking on command - in mac but in chrome it’s control + and control -.

An image where I clicked on control +

An image where I clicked on control -

The console allows us to write and test Javascript code so it’s very useful during development e.g fixing errors however we can’t write real applications using this console.

alert("Hello World")

let js = "amazing"
if (js === 'amazing') alert("Javascript is fun")

50+60-10

39+54-24

So from the above images we can see a pop-up and even some mathematical calculations carried out using JS.

Challenges I faced

The only challenge I can say I faced was not knowing why the codes where working that way and with time I believe I'll understand and be very good at it.

Conclusion

I'm very happy that I took this journey and that I'm already learning a lot. I personally know that I'll soon overcome the challenges I faced and before you know it I'll be a guru🤭. Anyways thanks a lot fam❤️. Anticipate my day 3 article👋🏾.

Day 1: #100daysofMiva Coding Challenge. Understanding Git and GitHub

Ayotomide — Tue, 20 Aug 2024 20:20:46 +0000

Hey everyone, it's me again! Today marks Day 1 of the #100DaysOfMiva challenge. Get comfortable because we’re about to dive into how the day went. I’m sure you’ll pick up a thing or two along the way 😉. Remember yesterday when I almost broke down over the challenges I was facing with GitHub? Well, I’m thrilled to say that’s no longer the case 🤭🎉. Turns out, I found exactly what I needed on w3schools.com—pretty ironic since I was there learning HTML and didn’t even realize I could learn Git too! 😂😭. Now, let's have a summary of my learning today.

Understanding Git and GitHub: A Developer's Best Friends

In the world of software development, two names often come up together: Git and GitHub. If you’ve ever found yourself scratching your head, wondering what all the buzz is about, don’t worry—you’re not alone. In this post, we’re going to unravel the mystery behind Git and GitHub, who created them, and why they’ve become essential to every developer’s toolkit. So, grab a cup of coffee (or tea)🍵, get cozy, and let’s dive into the magic of these game-changing technologies!

What is Git?

Git is like a supercharged time machine for your code. Imagine working on a project, and suddenly, something breaks. You wish you could go back in time to when everything worked perfectly. With Git, you can! It’s a version control system that tracks every change you make to your code, letting you rewind to any point in your project's history.

But Git isn’t just about time travel; it’s also about teamwork. Whether you’re coding solo or with a group of developers, Git ensures everyone’s work stays organized and conflict-free.

Who Developed Git?

Git was created by Linus Torvalds in 2005. If that name rings a bell, it’s because he’s also the genius behind the Linux operating system. Linus developed Git out of necessity. At the time, the Linux kernel (a huge, collaborative project) needed a version control system that was fast, reliable, and capable of handling a large number of contributors. When existing solutions didn’t cut it, Linus took matters into his own hands—and Git was born.

What is GitHub?

Now, let’s talk about GitHub. If Git is your time machine, GitHub is the cloud where you store your time machine’s data. GitHub is an online platform that hosts Git repositories, making them accessible from anywhere. Think of it as a social network for developers, where you can share code, collaborate on projects, and even contribute to open-source initiatives.

But GitHub isn’t just about storing code. It’s packed with features that make collaboration easy and effective. You can track issues, review code, and discuss changes—all within the platform.

Who Developed GitHub?

GitHub was founded in 2008 by Tom Preston-Werner, Chris Wanstrath, PJ Hyett, and Scott Chacon. The goal was simple: to make Git accessible and easy to use for developers worldwide. And they succeeded. Today, GitHub is a hub for millions of developers, from hobbyists to professionals, all building the software that powers our world.

How to Use Git and GitHub: A Quick Guide

Getting started with Git and GitHub might seem intimidating, but it’s simpler than you think. Here’s a quick overview:

Install Git: Before you can start using Git, you’ll need to install it on your computer. You can download it from git-scm.com.

Set Up Your Local Project: Once Git is installed, navigate to your project folder in the terminal and initialize a Git repository with git init. This command starts tracking changes in your project.

Make and Save Changes: As you work on your project, Git will track every change. When you reach a milestone or want to save your work, you "commit" those changes with git commit -m "Description of what you did". Each commit is like a snapshot of your project at that moment.

git commit -m Day 1 of my coding challenge

Some of the commands available in git and GitHub.

Push to GitHub: After committing your changes, you can push them to GitHub with git push. But first, you need to connect your local repository to a GitHub repository. This is where all your commits will be stored online.

Collaborate and Share: On GitHub, you can collaborate with other developers, contribute to open-source projects, or even fork someone else’s repository to create your own version of it.

Why Git and GitHub Matter

Git and GitHub are more than just tools—they’re a way of thinking about software development. They encourage experimentation, collaboration, and sharing, which are all key to building better software. Whether you’re working on a solo project or contributing to a global open-source initiative, Git and GitHub provide the foundation you need to succeed.

So, the next time you see a developer talking about “pushing to GitHub” or “making a pull request,” you’ll know they’re using some of the most powerful tools in the tech world, created by some of the brightest minds in the industry.

Amazing isn't it? I hope you've learned a lot today and I also hope I've inspired you to learn more about this these two developer tools. Anticipate more from this journey on my day 2 article. See you soon👋🏾.

Day 0 of the #100daysofMiva Challenge.

Ayotomide — Mon, 19 Aug 2024 19:49:43 +0000

The journey of a thousand miles begins with a single step - Chinese proverb

As I dive into the thrilling adventure of #100DaysOfMiva, I’m excited to share my experiences and progress with you. In this post, I’ll guide you through the process of setting up my learning and project environment, laying a solid foundation for the challenges that lie ahead🎉.

Setting up my GitHub repository

So basically, the first thing I did was to create a GitHub repository which I created directly on GitHub. The repository will serve as a place where I can store, share and track my projects. It will also allow for collaborations.

However, I am pretty much new to GitHub and its environment and believe me when I say I practically got lost! It was frustrating at first to be really honest but with the help of friends and colleagues I was able to navigate through... just a little🤧🫠. Honestly, I'm still confused and I have lots of questions on Github and how to use it but with time, I believe I'll scale through😮‍💨.

Learning activities that I did today

So technically after all the GitHub stress, I decided to take a break and head on to HTML which I decided to learn on the W3schools website.

Learning HTML on the website was smooth and easy to understand. I look forward to learning more about HTML and many other programming languages in the next 100 days...

Stay tuned for my daily posts and reports on the 100dayofMiva challenge. Goodbye for now😄.

PS: If you have any idea of how I can easily navigate GitHub and it's environment be it a video or website or even a youtube tutorial, I'll really appreciate it.

DEV Community: Ayotomide

Day 5 of #100daysofMiva Coding Challenge: Values and Variables in JS

Values in JavaScript

Variables in Javascript

Why Use Variables?

Day 3&4 of the #100daysofMiva Coding Challenge: Linking JavaScript to HTML

Brief overview of HTML and JavaScript

Importance of Linking JavaScript to HTML

II. Basic Methods of Linking JavaScript

1. Inline JavaScript

2. Internal JavaScript

III. External JavaScript: The Preferred Method

IV. Best Practices for Linking JavaScript

1. Using the defer Attribute

2. Using the async Attribute

3. Considerations for Performance Optimization

V. Troubleshooting Common Issues

1. Incorrect File Paths

2. Script Loading Order

3. Browser Console for Debugging

VI. Advanced Techniques

1. Dynamic Script Loading

2. Module System (ES6 Modules)

VIII. Conclusion

Day 2 of #100daysofMiva Coding Challenge

What's Javascript

Uses of Javascript

What I did today on Javascript

Challenges I faced

Conclusion

Day 1: #100daysofMiva Coding Challenge. Understanding Git and GitHub

Understanding Git and GitHub: A Developer's Best Friends

What is Git?

Who Developed Git?

What is GitHub?

Who Developed GitHub?

How to Use Git and GitHub: A Quick Guide

Why Git and GitHub Matter

Day 0 of the #100daysofMiva Challenge.

Setting up my GitHub repository

Learning activities that I did today

1. Using the `defer` Attribute

2. Using the `async` Attribute