DEV Community: Abodunrin AbdulSalam

The Power of Command Line: Why Developers Should Embrace It

Abodunrin AbdulSalam — Mon, 01 May 2023 10:27:08 +0000

Introduction:

The graphical user interface (GUI) has made computing easier for many people, but the command line interface still holds immense power, especially for developers. In this article, we will explore why developers should embrace the command line and some basic commands to get started.

The Versatility and Speed of Command Line:
The command line is one of the most versatile ways of interacting with the operating system. With direct communication with the computer, there is no friction, making it a fast way to communicate with the computer and get it to do something. Additionally, it is consistent, with low overhead, making it an efficient way to execute repetitive tasks.

Basic Commands:

To get started with the command line, there are some basic commands that every developer should know.

The cp command is used to copy content from one file to another
The cd command is used to change directories
The cat command reads each File parameter in sequence and writes it to standard output.
The ls command lists the contents of the current directory.
The mkdir command is used to create a new directory.
The rm command is used to delete files and directories.
The mv command is used to move or rename files and directories.
The echo command prints text to the terminal.

These commands are simple yet powerful, and they form the building blocks of more complex tasks.

VIM: A Powerful Text Editor:

VIM is a powerful text editor that allows developers to edit files without going through lots of hurdles. It has three modes: insert, normal, and command modes. To open VIM, use the vi command. Once in VIM, you can edit and insert text inside the file. To save and quit VIM, use the :wq command, and to quit without saving, use q!. VIM is a tool every developer should master to be efficient in their work.

Understanding Shell:

The shell is the application running inside the terminal, and there are two popular shells that we know: bash and zsh. Zsh is a newer version of Bash mostly found on the latest macOS operating system, and it is a more extensible version of Bash. To check which shell your system is using, use the echo $0 or echo $shell command.

Conclusion:

In conclusion, while the graphical user interface has made computing more accessible to many people, developers should embrace the power of the command line. The command line is fast, consistent, and efficient, making it a valuable tool for executing repetitive tasks. Additionally, VIM and shell knowledge can help developers increase their productivity and be more efficient in their work.

Introduction to React Native: A beginner's guide.

Abodunrin AbdulSalam — Tue, 14 Jun 2022 07:13:49 +0000

React Native: a tool for mobile development

In 2015, React Native was launched by Facebook as the JavaScript framework to build mobile apps for both iOS and Android. It uses the same concepts and ideas from React. React Native allows you to create mobile apps for both iOS and Android with a single code base. This is known as the Hybrid Mobile development.

In previous years before React Native was launched, developers had to build and maintain two separate applications for both iOS and Android. Objective C/Swift is used to build iOS applications while Java/Kotlin is used for Android development. This was an issue for some companies and startups as they have to hire two different teams of mobile developers, one for iOS and one for Andriod. But now, with React Native, you can write once and run everywhere.

In addition to this, React Native is written in JavaScript, a popular language used for web development. The JavaScript code is then rendered with Native code on the devices. This implies that with a suitable architecture, developers can now write JavaScript/React code that can run on different platforms. Also, with the power of JavaScript behind React Native, the code runs fast, compiles seamlessly, and gives developers the ability to write code at a lightning speed.

Another tool that is being used for hybrid mobile development like React Native is Flutter, an open-source framework by Google built with Dart programming language.

Prerequisites for learning React Native

A basic understanding of JavaScript fundamentals is required to learn React Native. These javaScript fundamentals include concepts of variables, functions, objects, data types, loops, conditional statements, and so on. To brush up on JavaScript, check out this MDN tutorial guide.

Even though the knowledge of React, Android, or Swift development is not compulsory, having basic knowledge about these will be of great help while learning React Native. Most especially, React, understanding JSX, creating components, passing props, hooks, state management, and so on are good to know before delving into React Native. Brush up on React here.

Some React Native built-in Core Components

React Native comes with a quite number of ready-made built-in components which serve as the building block for building complex components and features. Below are some of the important and most used components. To see the full list, check here.

Text

The Text component is like the <p> tag in HTML. It wraps every string or text to be displayed in our app. Unlike on the web where text can be displayed without necessarily putting it in a <p> of a similar tag, the <Text> component must always be used to wrap text in React Native, otherwise, the code would throw an error.

View

The View component is similar to the <div> tag in HTML. It wraps around other elements and components. It can be used to group a single component to form a more complex component. It is the most fundamental component for building a UI, it can be nested in other View components and can have 0 to many children nested in it.

Image

To display an image in React Native, you need to import the Image component and pass in the source of the image. More detail on how to use the Image page can be found here

import { Image, View} from 'react-native';

const DemoApp = () => {
  return (
    <View>
      {/* This is an Image */}
      <Image
        source={{
          uri: 'link_to_the_image',
        }}
      />
    </View>
  );
};

ScrollView and FlatList

ScrollView allows you to display scrollable content. When you need to fit a long text into a specified height, then ScrollView is the go-to component to use. It renders all the content at once and thereby not suitable for a large amount of data because this affects the app performance.

On the other hand, FlatList also allows us to render scrollable content in a more performant way. It is best used in rendering a list of items in an efficient way. It supports pull to refresh, scroll loading, scroll to index features, and other nice features. Check out the full documentation here

TextInput

This is the equivalent component for both input and textarea tags in HTML. It is a way to input text into the app using the keyboard. It is one of the foundational components used in mobile development. The component is configurable, several features can be configured easily. For example, the keyboard type to show, be it numeric, alphanumeric, or alphabets can be specified using the type prop available on the component. Also, there are several events available on the component to define how it behaves. Check out the full documentation here.

Button

The button component has two properties that are required. The onPress and the title properties. The onPress prop takes in a function that defines what happened when the button is pressed/clicked. The title prop is the text that shows up as the button. There are some other inbuilt button-like components. One of them is TouchableOpacity which when pressed down, the opacity of the wrapped view is decreased, dimming it.

Styling in React Native

Styling in React Native has a syntax similar to the CSS used on the web. The styling rules are defined as objects which are passed to the style prop of React Native components. The most recommended way of creating styles in React Native is using the StyleSheet component. An example of how the styling is defined is shown in the snippet below.

import { Text, StyleSheet } from 'react-native';

const StyledText = () => {
  return <Text style={styles.text}> Hello World </Text>;
};
const styles = StyleSheet.create({
  text: {
    color: 'red',
    fontSize: 24,
  },
});

React Native Navigation

As many mobile apps won't be made up of a single screen, managing multiple screens and transitioning between them is, therefore, an integral part of mobile development. The navigation solution in React native is provided by the React Native community. The navigation mechanism is not in-built as many would have expected. The recommended third-party library is the react-navigation library. It is an easy-to-use, cross-platform compatible, and easily customizable library that provides routing in both expo and React Native applications.

There are three different types of navigation patterns in React Navigation. These three can then be combined or nested in different ways to build complex navigations. They are:

1. Stack Navigation

This provides a way to transition between screens and manage the navigation history in form of layers stacked on top of each other. When you navigate to a new route, the new screen is stacked on the previous screen, and when you go back, the screen is popped off the stack. By default, the navigation comes with native animation and gestures suitable for both android and iOS. Detailed documentation on how this is done using React Navigation is found here. Below is an example of stack Navigation:

2. Tab Navigation

Tab navigation is the most commonly used navigation in most mobile applications. The bottom tabs usually have icons with the text or only the icons most time. The tab navigation can also come in form of top tabs. Animation and gestures are not added to this form of navigation by default. Continue here for more details.

3. Drawer Navigation.

If you had used Twitter before, you'd notice that there is a drawer on the side that contains a list of other links like the profile, bookmarks, etc. The drawer can be either from the left or the right. This also has an in-built animation and gestures. For more details on how to implement this with React Navigation, check here

Example of Tab and Drawer navigation:

React Native Animation.

Mobile apps are not great enough without sleek animations and gestures. Animation takes anything from one state to another in the smoothest way possible. The basics of animation React Navigation is powered by Animated components, a built-in component in React Native. With this component, you can build small to complex animations in your application.

A popular library also used for animation in React Native is the Reanimated library. It branded the native Animated component with more features and added performance advantages.

Conclusion.

In this article, we gave an overview of what Mobile development using React Native looks like, the basic components, navigation, animation, and styling. To further your learning or kickstart your journey to building amazing mobile apps with React Native, you can find these free resources useful. Try and code along and challenge yourself to add more features beyond the scope of the tutorial.

If you find this useful consider leaving a 👍🏻 and share. You can also connect with me on Twitter @alhakamee_.

Thanks for reading!

Understanding HTML, CSS and JavaScript.

Abodunrin AbdulSalam — Wed, 13 Jan 2021 01:03:42 +0000

In my previous post , I covered the introduction to web development. I explained the three categories of web development and the technologies that are required to be mastered to build a successful career in each of them.

If you are new to web development, I strongly advice to read the previous post before continuing with this.

HTML, CSS and JavaScript are the three technologies powering the web. They are the underlying tools behind every webpage on the internet. We can create beautiful and interactive website or web application with the combination of these tools.
In this post, we are going to take a look at what each of these three stands for and how they all work together with a demo project that you can experiment with

Let get started!

1. HTML

HTML stands for Hypertext Markup Language. It is a markup language describes the structure of the web page. It is the most basic building block of the web and can be referred to as the skeleton of the web.

The word "Hypertext" refers to links that connect the webpages. And this is one of the features offered by HTML. It provide a way to link pages together when the files are uploaded to the internet.

It is a markup language and not a programming language. And markup language according to Wikipedia is:

Is a system for annotating a document in a way that is syntactically distinguishable from the text, meaning when the document is processed for display, the markup language is not shown, and is only used to format the text.

HTML markups includes special character and tags. These characters are used in defining how content should be displayed or what the content stand for and represent. They comprises of opening and closing tags. The content to be displayed will then be wrapped inside the opening and closing tags

For example:

<h1> Learning HTML </h1>

With this code, the text is displayed as a heading which is bold and has a bigger font size by default.

Other examples of HTML tags are:

<p> <button> <input> <article> <form> <ul> <li> <ol>

and many others.

2. CSS

CSS stands for** Cascading Style Sheets**. It is used for styling and laying out the content written in HTML. With CSS, properties like the text color, font type, background color, margin, padding can be added to a web page. It comprises of two major parts;

a selector: to select the specific element or part to style.
a declaration: set of rules to define the styling to be added.

For example:

Some stylings can be added to the HTML code above <h1> Learning HTML </h1>

h1  {
       color: red;
       font-size: large;
}

With this piece of code, the text enclosed in the h1 will have a color of red and a large font size. CSS makes the web page more presentable and more beautiful.
Another cool feature of CSS is that it can be used to make responsive web pages that looks great on every screen sizes including desktop, medium screen size and smartphones with the use of media queries. This feature is known as Responsive Web Design and it has become extremely important in modern day web development.

A list of other properties that can be defined with CSS can be found here

3. JavaScript

JavaScript is a programming language that adds interactivity to your website. It is referred to as the programming language of the web. It allows developers to add dynamic and interactive effects to a web page. With JavaScript, we can

Load data to the website or web app from an external server
Manipulate or change the content in the webpage.
build fully functioning web applications.

For example: Let create a button that display a greeting when clicked. A perfect demo of how the three technologies play their roles.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    /* CSS is used defining how the button should be styled */
    <style>
        button {
            border: none;
            background-color: #ddd;
            color: #333333;
            border-radius: 4px;
            padding: 1rem 2rem;
            cursor: pointer;
            font-size: 20px;
            transition: background-color .3s;
            outline-width: 0;
        }

        button:hover {
            background-color: #cccccc;
        }
    </style>
</head>

<body>
    <!-- // HTML is used to create the button element using the button opening and closing tags. -->
    <button onclick="sayHello()">
        Click
    </button>

    <!-- The action to be performed defined with JavasScript -->
    <script>
        function sayHello() {
            alert("Hello, Welcome to the World of JavaScript.")
        }
    </script>

</body>

</html>

P.S: Don't be overwhelmed with the number of code you don't understand here, but focus on where some comments have been added. We are going to be diving deeper into all these in future posts.

If the above code is run in the browser (chrome for example), we have the following as the result

Conclusion

To better interact with the code above, I create a pen on codepen.
Codepen is an online code editor that makes it easier and faster to share code and show off projects without a need to setup the development environment on your own.

Feel free to make a copy from it, change the code, use different values, notice the changes and explore more.

In subsequent posts, we will take a deep dive into these technologies, learn the basics and also provide the available online resources to learn them.

If you find this useful, kindly share, like and comments and if you have any question, you reach out to me on twitter

For Further Learning

Thanks for reading.

How I motivates myself to code more.

Abodunrin AbdulSalam — Sun, 05 Jul 2020 07:24:36 +0000

When coding, staying motivated is sometime a big thing. It might be challenging. I do get tired sometimes when I'm coding. I feel like quitting and finding other things to do.

Then I took a bold step of analysing what the problem is. I wrote a post about it. It's one of the best decision I made. It was my first post.

I discovered I have been forcing myself to code stuff I don't really love doing. It was actually as a result of having a wrong mindset. I was feeling my learning or what I code is a competition I'm having with others. Which is wrong.

After publishing the post, I was able to filter out what I love doing. I started doing it and everything changed. Each morning, I look forward to sit in front of the screen and code the entire day. I enjoy writing more JavaScript.

I do get stuck, it's a little bit frustrating but also interesting. The feeling when I got stuck is one thing I love. I found myself thinking about the problem and how to solve it which in turn increase my problem solving skills.

Discover what you love doing and take your time to learn and grow in your own way.

Thanks for reading!

My current situation

Abodunrin AbdulSalam — Mon, 29 Jun 2020 06:24:39 +0000

So I have been learning for a while now. I am having the feeling that I don't have a clear path. I feel I'm just learning stuffs randomly. It sounds disturbing. Analysing what I've learnt for the past few weeks, I remember I learnt about Github and user workflow, learnt bootstrap to some reasonable extent. I also learn how to make some nice scrolling effect on a page using scrollreveal.js library. I'm feeling it's not enough. I really want to learn more JavaScript. It's all I want to be doing now. I'm feeling some imposter syndrome. Everyone seems better than me. Everyone around is doing something and showcasing it. And here I am, just coding stuffs for 'coding purpose'. I don't know what to do. I want to learn JavaScript! And I don't know what to do. This is why I'm writing this. I want to discover and solve my problem.

Additionally,I have an udemy course I'm also taking. Just watching the videos and coding along. It's helping I'm learning.

So I wish I finish it too. So my problems now are:

I want to learn JavaScript.
I want to finish the udemy course on advanced CSS.
Additionally,I love to stay in the internship. Hng internship.
I want to learn about blade templating.

So how do I go about all these?

Let's keep that for the other time. At Least, my head is clear now!

Happy coding 🤗🤗