DEV Community: Okanu Gracious

Responsive Image Made Simple with srcset

Okanu Gracious — Thu, 29 Dec 2022 18:45:31 +0000

The srcset attribute is used in HTML to specify a list of images and their sizes. It allows the browser to choose the most appropriate image based on the device's screen size and resolution. This can be useful for optimizing the loading time of a webpage, as well as improving the user experience by displaying the best possible image quality.
Here's an example of how you might use the srcset attribute in an img element:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="A description of the image">

In this example, the src attribute specifies the default image to display (small.jpg). The srcset attribute specifies two additional images (medium.jpg and large.jpg), along with their sizes in pixels (1000w and 2000w, respectively). The browser will use the src attribute as a fallback if it is unable to use the srcset attribute for some reason.

The srcset attribute can be used in conjunction with the sizes attribute to specify the size of the image in relation to the viewport:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 50vw, 25vw" alt="A description of the image">```



In this example, the sizes attribute specifies that the image should be displayed at 50% of the viewport's width when the viewport is 600px or smaller, and 25% of the viewport's width when the viewport is larger than 600px.

React or Angular: Choosing the Right Technology for Your Project

Okanu Gracious — Sun, 25 Dec 2022 02:45:34 +0000

React and Angular are two popular JavaScript libraries for building web applications. Both libraries are used for building user interfaces, but they have some key differences that set them apart.

React is a library for building user interfaces, developed and maintained by Facebook. It is focused on the declarative approach to building UI, which means that you describe what you want the UI to look like, and React takes care of the rest. This makes it easier to reason about your UI and to debug it when things go wrong.

One of the key features of React is its virtual DOM (Document Object Model), which allows it to optimize updates to the UI. When the state of a React component changes, the virtual DOM calculates the minimum number of updates required to reflect the new state, and then updates the actual DOM accordingly. This makes React apps fast and efficient, especially when dealing with large data sets.

Angular, on the other hand, is a full-featured framework for building web applications. It was developed and is maintained by Google, and it provides a wide range of features out of the box, including a powerful templating system, dependency injection, and a router. Angular uses a two-way data binding system, which means that changes to the UI are automatically reflected in the underlying data model, and vice versa.

One of the key differences between React and Angular is their approach to state management. In React, state is typically managed at the component level, which means that each component is responsible for managing its own state. In Angular, on the other hand, state is typically managed at the application level, using a centralized store like Redux or NgRx.

Another difference is that React is just a library, while Angular is a full-featured framework. This means that React is more flexible and can be used with a variety of different tools and libraries, while Angular provides a more opinionated approach to building web applications.

In summary, React and Angular are both popular tools for building web applications, but they have some key differences. React is a library that is focused on the declarative approach to building UI and uses a virtual DOM for efficient updates, while Angular is a full-featured framework that provides a wide range of features out of the box and uses a two-way data binding system.

As a beginner, it can be overwhelming to choose between React and Angular, as both are popular and powerful tools for building web applications. Here are a few factors to consider when deciding which one is right for you:

Ease of learning: React is generally considered easier to learn than Angular, especially for beginners. This is because React is a library, rather than a full-featured framework, so it is more focused and has a smaller learning curve. Angular, on the other hand, is a full-featured framework that provides a wide range of features out of the box, which can be overwhelming for beginners.

Community support: Both React and Angular have large and active communities, so you can find plenty of resources and support online. However, React may have a slightly larger and more active community, as it is more widely used than Angular.

Job market: Both React and Angular are widely used in the job market, so either one would be a good choice for a beginner looking to enter the field. However, React may be slightly more in demand, as it is used by a wider range of companies and is generally considered more flexible and adaptable than Angular.

Ultimately, the best choice for a beginner will depend on your personal preferences and learning style. If you prefer a more flexible and lightweight approach, React may be a better choice. If you prefer a more opinionated and feature-rich framework, Angular may be a better.

The Most Common JavaScript Pitfalls for New Programmers and How to Face them.

Okanu Gracious — Sun, 25 Dec 2022 02:27:47 +0000

There are many problems that JavaScript beginners might face, including:

Understanding the syntax: JavaScript has a particular way of writing code, and it can be confusing for beginners to understand how to correctly write and structure their code.

Working with variables: Beginners may struggle with understanding how to declare and use variables in JavaScript, as well as understanding the different types of variables and when to use them.

**Using functions: **Functions are an important concept in JavaScript, and beginners may have difficulty understanding how to define and call functions, as well as how to pass arguments to and return values from functions.

Debugging code: All programmers, including beginners, will encounter errors in their code from time to time. It can be challenging for beginners to understand how to identify and fix errors in their code.

Working with objects and arrays: JavaScript has complex data structures such as objects and arrays, and it can be difficult for beginners to understand how to work with these data types and how to access and manipulate the data they contain.

Understanding asynchronous code: JavaScript is an asynchronous language, which means that certain operations may not happen in the order they are written in the code. This can be confusing for beginners to understand and can lead to unexpected behavior in their code.

Working with the Document Object Model (DOM): The DOM is a programming interface for HTML and XML documents, and it is commonly used in JavaScript to manipulate the content and structure of web pages. Understanding how to work with the DOM can be challenging for beginners.

5 Steps to Becoming a Successful Open Source Contributor as a Beginner

Okanu Gracious — Fri, 23 Dec 2022 05:32:29 +0000

How to Contribute to Open Source

As a beginner, contributing to open source can seem intimidating. However, with a little guidance and some practice, you can become a valuable contributor to the open source community. They are many ways and steps oneself has to take and they include...

Find a project to contribute to: There are countless open source projects out there, ranging from small to large, simple to complex. To find a project that is a good fit for you, consider your interests and skills. You can search for projects on websites like GitHub, where you can find a wide variety of projects in different languages and domains.

Learn about the project and its guidelines: Before you start contributing, it’s important to familiarize yourself with the project and its guidelines. This will help you understand how the project is structured, how contributions are accepted, and what is expected of you as a contributor. You should also make sure you understand the project’s license, which outlines the terms under which the project is distributed and used.

Make your first contribution: Once you’ve found a project and learned about it, it’s time to make your first contribution. This might involve fixing a bug, adding a new feature, or improving the documentation. If you’re not sure where to start, you can look for issues labeled “good first issue” or “beginner-friendly.” These are typically smaller tasks that are well-suited for new contributors.

Follow the contribution process: Most open source projects have a specific process for accepting contributions. This typically involves creating a pull request (PR) with your changes and waiting for the project maintainers to review and merge your contribution. Make sure you follow the project’s contribution guidelines and provide a clear and concise description of your changes in the PR.

Stay engaged with the community: Contributing to open source isn’t just about writing code – it’s also about being part of a community. Make sure you stay engaged with the community by asking questions, participating in discussions, and attending events like meetups and conferences. This will help you learn from other contributors and build relationships within the community.

In summary, contributing to open source as a beginner involves finding a project that matches your interests and skills, learning about the project and its guidelines, making your first contribution, following the contribution process, and staying engaged with the community. With a little patience and persistence, you can become a valuable contributor to the open source community.

What Are JavaScript Data Types?

Okanu Gracious — Wed, 17 Aug 2022 15:09:00 +0000

Data Types specify the kind of data stored and manipulated in a program.

Data Types can be categorized into six parts which isn’t divided into three main categories.....

1. Primitive:
<>Number
<>String
<>Boolean

2. Compound:
<>Array
<>Object
<>Function

3. Undefined:
<>Undefined

The two most common categories are know to be different from each other because primitive data Types can only contain one value simultaneously while the compound data Types can contain more values.
Let’s explain them accordingly...

<>String Data Type<>:
This data type deals with textual values and characters which are created with the double or single quotation mark on the keyboard. Example...

var a = “hi there”;
var b = “hello there”;

<>Number Data Type<>:
This data type deals with positive and negative numbers without or with decimal numbers and places written using exponential quotations.

Example....

var c = 24;
var d = 23.7;

Note: When writing codes for Number Data Types, strings are not supported in other To bring a desired outcome.

<>Boolean Data Type<>:
The Boolean Data Type can only contain two values: TRUE or FALSE.
It is usually used to show values like Yes(true) or No(false). For example....

var Show = true;
var IsShow = false;

<>Undefined Data Type<>:
This data type is can be used to assign a single value: The Undefined Special Value.
This data type is effective when you declare a variable without a value.
For example....

var d;
var e = “Okanu Gracious”;

alert(d) // Output: Undefined
alert(e) // Output: Okanu Gracious

<>Object Data Type<>:
The object Data type is a very complex data type in JavaScript which has one sole aim. The aim of the object data type is to store large collections of data.
An example of Object Data Type are....

var WebDev = {
Frontend : “HTML and CSS”
Backend : “MySQL and Python”
}

<>Array Data Type<>:
An array data type is a type of data type where a programmer inputs different data values in a single variable. An example of Array data type includes....

var Frontend = [“HTML”, “CSS”, “JavaScript”, “ReactJS”, “Vue”]

alert(Frontend[0]); // Output: HTMl

<>Function Data Type<>:
This is data type which executes a block of codes. Functions can be used anywhere, it can be stored in an array, objects, variables, anywhere.
An example of Function Data Type are...

function Myfunction(){
console.log(“hello”)
}

Thank you for reading!
Do follow me on Twitter @okanugracious

Statements in Programming

Okanu Gracious — Sat, 30 Jul 2022 18:42:22 +0000

What are Statements?
A statement is the smallest unit in an imperative programming language. It is formed by a sequence of one or more statement. A statement will have internal components called expression.

A definition is different from a statement in that a statement contains executable code while definitions declare an identifier.

Types of Statements
1. Simple Statements
•assignment: A:= A+1
•call: CLEARSCREEN()
•return: return 1;
•goto: goto 2
•assertion: assert(ptr != NULL);

2. Compound Statements
•block
•if-statement
•switch-statement
•while-loop
•do-loop
•for-loop

3. Assignments Statements
An assignment statement sets the value or changes the value stored in the storage locations denoted by a variable name.

Thank you for reading this article.

Programming and Properties of Programming Languages

Okanu Gracious — Sat, 30 Jul 2022 18:31:26 +0000

What is Programming?
This is the process of writing, testing, debugging and maintenance of the source code of computer programs. It’s purpose is to create a program which will set instructions which that the computer uses to perform specific functions to to exhibit desired behaviors.

Properties of Programming Languages

1. Reliability
A Programming Language in order to be classified as a Programming Language has to be reliable. A fundamental calculation must be give the sameness answer all the time.

2. Robustness
A Programming Language must be robust, it must be able to execute instructions without collapsing.

3. Usability
A Programming Language must be usable. Programmers must Ben able to use it for whatever purpose it is meant for without being overly difficult to use.

4. Portability
Portability is another great Properties of a Programming Language. A Programming Language must have an engine which does not take up all the resources of the computer only to execute few instructions.

5. Maintainability
The Programming Language must be designed in such a way that is maintainable. It should be relatively easy to debug.

Thank you for reading this article!

Impacts of Programming in our Daily Life

Okanu Gracious — Thu, 28 Jul 2022 19:20:21 +0000

Share to the Public and us on how Programming Impacted your life.
Share via comment section

How to Make Money Programming

Okanu Gracious — Mon, 25 Jul 2022 16:55:59 +0000

They’re many ways to make money in this programming world and this is the easiest way.....

Sell Softwares
Freelancing
Sell Courses
Sell Ebooks
Blogging
Youtube
Getting a Programming Job
Web/App Development
*Game Development *

12 Basic Reasons to Learn JavaScript Programming Language

Okanu Gracious — Sat, 23 Jul 2022 08:07:46 +0000

Mobile Apps
Cloud Dev
Web Apps
High Demand
Easy to Learn
Beginner Friendly
Visual Effects
Frameworks
BlockChain
Huge Community
Front-end
Back-end

Freelancing

Okanu Gracious — Fri, 15 Jul 2022 04:17:04 +0000

Can I get a freelancing job or work or internship with a 3 months experience in Web Development?

Freelancing

Okanu Gracious — Fri, 15 Jul 2022 03:19:01 +0000

Do you think I can get a freelancing opportunity as a web developer with three months experience?