DEV Community: Fadi Nouh

"Hello, World!" in 20 Popular Programming Languages

Fadi Nouh — Thu, 11 Nov 2021 13:09:49 +0000

When I start learning any programming language, the first example I get from the tutorial is : let's print "Hello World!".
This exercise in every tutorial is considered to be one of the simplest programs possible in almost all languages.

In this article, you'll learn how to write the "Hello, World!" program in the top 20 most popular programming languages.

01. "Hello World" Program in JavaScript

Of course I would start from a language which I know already.

<script>
  console.log('Hello, World!');
</script>

02. "Hello World" Program in Python

Python is also one of the most popular programming languages. It's used for software development, system scripting, web development

print("Hello, World!")

03. "Hello World" Program in Java

Java is a high-level, class-based, and object-oriented programming language.

class HelloWorld {
 public static void main(String args[]) {
    System.out.println("Hello, World!");
 }
}

04. "Hello World" Program in Kotlin

Kotlin is primarily used for android development.

fun main(args: Array<String>) {
 println("Hello, World!")
}

05. "Hello World" Program in PHP

PHP is an a scripting language, It's used to develop websites and web apps.

<!DOCTYPE html>
  <html>
    <head>
      <title> </title>
    </head>
    <body>

      <?php
       echo "Hello, World!";
      ?>

    </body>
  </html>

06. "Hello World" Program in "C#"

C# is used to develop desktop applications, web applications, and web services. It's also used in game development.

namespace HelloWorld
{
 class Hello { 
    static void Main(string[] args) 
    {
       System.Console.WriteLine("Hello, World!");
    }
 }
}

07. "Hello World" Program in Swift

Swift was created by Apple in 2014. It's a general-purpose programming language for the Apple ecosystem.

print("Hello, World!")

08. "Hello World" Program in C++

C++ is a general-purpose object-oriented programming language created by Bjarne Stroustrup. It's widely used to develop operating systems, browsers, games, etc.

#include <iostream>
using namespace std;
int main()
{
 cout << "Hello, World!";
 return 0;
}

09. "Hello World" Program in C

C is used to develop software like operating systems, databases, compilers, etc.

#include <stdio.h>

int main()
{
 printf("Hello, World!");
 return 0;
}

10. "Hello World" Program in Matlab

MATLAB is a proprietary multi-paradigm programming language and numeric computing environment developed by MathWorks.

disp('Hello, World!');

11. "Hello World" Program in R

R is a programming language and free software environment for statistical computing and graphics supported by the R Core Team and the R Foundation for Statistical Computing.

cat('Hello, World!')

12. "Hello World" Program in Rub

Ruby is an interpreted, high-level, general-purpose programming language.

cat('Hello, World!')

13. "Hello World" Program in Rust

Rust is an open-source systems programming language that focuses on speed, memory safety and parallelism. Developers are using Rust to create a wide range of new software applications, such as game engines, operating systems, file systems, browser components and simulation engines for virtual reality.

fn main() {
 println!("Hello, World!");
}

14. "Hello World" Program in TypeScript

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

let message: string = 'Hello, World!';
console.log(message);

15. "Hello World" Program in Perl

Perl is a general-purpose coding language used for text manipulation, system administration, web development, network programming, GUI development, etc.

#!/usr/bin/perl
use strict;
use warnings;
print("Hello, World!");

16. "Hello World" Program in Scala

Scala is a high-level language that combines the features of object-oriented and functional programming in one language.

object Hello {
 def main(args: Array[String]) = {
 println("Hello, World!")
 }
}

17. "Hello World" Program in Dart

Dart is a general-purpose, object-oriented, class-based, garbage-collected language with C-style syntax. It was created by Google in 2011

void main() {
 print('Hello, World!');
}

18. "Hello World" Program in Solidity

Solidity is an object-oriented programming language for writing smart contracts. It is used for implementing smart contracts on various blockchain platforms, most notably, Ethereum.

pragma solidity ^0.4.22;
contract helloWorld {
 function renderHelloWorld () public pure returns (string) {
 return 'Hello, World!';
 }
}

19. "Hello World" Program in Go

Go is a statically typed, compiled programming language designed at Google by Robert Griesemer, Rob Pike, and Ken Thompson.

package main
import "fmt"

func main() {
 fmt.Println("Hello, World!")
}

20. "Hello World" Program in Julia

Julia is a high-performance, high-level, open-source, dynamically-typed programming language. Julia was created by combining the powerful features of other programming languages like C, Ruby, Lisp, Matlab, Python, R, and Perl.

println("Hello, World!")

How to Open GitHub Repository Without Cloning With VsCode!

Fadi Nouh — Tue, 09 Nov 2021 14:17:25 +0000

Learn how to Open GitHub Repository Without Cloning With VsCode! and edit the code directly

It's very simple!

lets have example:
I have this repository link:
https://github.com/bluebits-academy/mern-stack-ecommerce

I want to open it with VsCode Online to search in the file easily and even edit it and see the relation between the files and also check the file structure easier and faster better than the navigating in github.

It's simple: Just add vscode.dev behind the github URL aaaaand enjoy!!!

https://vscode.dev/github.com/bluebits-academy/mern-stack-ecommerce

Check this video to see it in practical:

Creating React Native Movies App Using Real API and React Native CLI

Fadi Nouh — Fri, 02 Jul 2021 13:02:38 +0000

I woke up one day morning, and I was thinking all night :D : what is better, React Native , Or Flutter for mobile apps developments?
Actually I wanted to to give a try to make exactly the same application in both frameworks
I did the one with React native and I am in progress to create the one with flutter,
the estimated spent time to build it with React Native was about 16 hours.
Now I am going with it in flutter I already spent 9 hours and I am almost done with it! ( I will share it as well )

After installation and setting up the environment based on React Native Documentation

Then we create a new project:

npx react-native init MoviesApp

I used as well the React Native Navigation , which is an external library for navigation between screens in the mobile app

the structure of the app looks like:

The entry point of the project is the APP.js , I was just calling another component for the navigation and add the page stacks

import React, {useEffect, useState} from 'react';
import {ActivityIndicator, SafeAreaView, StatusBar, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import MainNavigator from './src/Navigators/MainNavigator';
import {ThemeColors} from './src/Theme';
import Toast from 'react-native-toast-message';

// API
import {apiKey} from './src/utils';

const colors = ThemeColors.colors;

const App = () => {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    if (apiKey.api_key) {
      setReady(true);
    }
    return () => {
      setReady(false);
    };
  }, []);

  return (
    <View style={{flex: 1, backgroundColor: colors.background}}>
      <StatusBar hidden={true} />
      {ready ? (
        <NavigationContainer>
          <MainNavigator />
        </NavigationContainer>
      ) : (
        // Just to check to insert your own Api Key. This would not go to customer
        <View>
          <ActivityIndicator size={'large'} />
          <Text style={{fontSize: 18, color: colors.white}}>
            Make sure you inserted your own API Key
          </Text>
          <Text style={{fontSize: 18, color: colors.white}}>
            Located at src/utils/keys
          </Text>
        </View>
      )}
      <Toast ref={ref => Toast.setRef(ref)} />
    </View>
  );
};

export default App;

and the Main stack navigation component I call it with the screen compoennts :

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {Home, Detail, Search} from '../Screens';
import {Navbar} from '../Components';

// Theme
import {ThemeColors} from '../Theme';
const colors = ThemeColors.colors;

const Stack = createStackNavigator();

function MainStack() {
  return (
    <Stack.Navigator
      headerMode="screen"
      screenOptions={{
        headerStyle: {elevation: 0},
        cardStyle: {backgroundColor: colors.background},
      }}>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          // Add a custom Header to stack navigation
          header: ({navigation}) => <Navbar navigation={navigation} />,
          headerTransparent: true,
        }}
      />
      <Stack.Screen
        name="Detail"
        component={Detail}
        options={{
          header: ({navigation}) => (
            <Navbar main={false} navigation={navigation} />
          ),
          headerTransparent: true,
        }}
      />
      <Stack.Screen
        name="Search"
        component={Search}
        options={{
          header: ({navigation}) => (
            <Navbar main={false} navigation={navigation} />
          ),
          headerTransparent: true,
        }}
      />
    </Stack.Navigator>
  );
}

export default function MainNavigator() {
  return <MainStack />;
}

I have created the full explanation of the movies app creation after diving in many small details :

Setting up the environment correctly
Navigate between screens
Navigate to screens dynamically
Use of The Movie Database API
Add custom styles
Component base development
React Hooks
Functional Components
Get Movies by genre
Lists
Search Movie Method
Image Galleries
Video Player and its commands

Full Course and Explanation about Building React Native Movies App

Implementing Multiple Loading Spinners Made with Pure CSS and HTML

Fadi Nouh — Tue, 15 Jun 2021 09:36:55 +0000

Loading Spinners

implementing multiple Loading Spinners Made with CSS and HTML only

You can check an explanation video how this is built:
implementing multiple Loading Spinners Made with CSS and HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="spinner-1.css" />
    <link rel="stylesheet" href="spinner-2.css" />
    <link rel="stylesheet" href="spinner-3.css" />
    <link rel="stylesheet" href="spinner-4.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="spinner-1">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
      <div class="spinner-2">
        <div class="dot1"></div>
        <div class="dot2"></div>
      </div>

      <div class="spinner-3">
        <div class="cube1"></div>
        <div class="cube2"></div>
        <div class="cube3"></div>
        <div class="cube4"></div>
        <div class="cube5"></div>
        <div class="cube6"></div>
        <div class="cube7"></div>
        <div class="cube8"></div>
        <div class="cube9"></div>
      </div>

      <div class="spinner-4"></div>
    </div>
  </body>
</html>

Our Style.css will be:

body {
  background-color: #0dc5c1;
}
.container {
  display: flex;
}

.container > div {
  width: 100px;
  height: 100px;
}

First Spinner Style:

.spinner-1 {
  margin: 100px auto;
  width: 50px;
  height: 50px;
  text-align: center;
}

.spinner-1 > div {
  background-color: #fff;
  height: 60px;
  width: 6px;
  display: inline-block;
  animation: stretchrect 0.8s infinite ease-in-out;
}

.spinner-1 .rect1 {
  animation-delay: -1s;
}
.spinner-1 .rect2 {
  animation-delay: -0.9s;
}
.spinner-1 .rect3 {
  animation-delay: -0.8s;
}
.spinner-1 .rect4 {
  animation-delay: -0.7s;
}
.spinner-1 .rect5 {
  animation-delay: -0.6s;
}

@keyframes stretchrect {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.8);
  }
}

Second Spinner Style:


.spinner-2 {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;

  -webkit-animation: rotate 2s infinite linear;
  animation: rotate 2s infinite linear;
}

.dot1,
.dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100%;

  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

Third Spinner Style:

.spinner-3 {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.spinner-3 > div {
  width: 33%;
  height: 33%;
  background-color: #fff;
  float: left;
  -webkit-animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.spinner-3 .cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.spinner-3 .cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.spinner-3 .cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.spinner-3 .cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.spinner-3 .cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.spinner-3 .cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.spinner-3 .cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.spinner-3 .cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.spinner-3 .cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@keyframes cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

.spinner-4 {
  width: 40px;
  height: 40px;
  background-color: #fff;

  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(-180deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

Repository: https://github.com/bluebits-academy/loading-spinners
Reference from (for advance coders) : https://github.com/tobiasahlin/SpinKit

NodeJs: Build The Complete E-Commerce Web API

Fadi Nouh — Fri, 08 Jan 2021 14:00:13 +0000

New Free course: Build The Complete E-Commerce Web API

Join Here

You’ll learn to:

Confidently build RESTful services (APIs) using Node.js, Express.js, and MongoDB Atlas
Employ the best practices for Node.js
Avoid common mistakes

What we’ll cover:

Node module system
Node Package Manager (NPM)
Asynchronous JavaScript
Useful ES6+ features
Implementing CRUD operations
Storing complex data in MongoDB
Data Validation
Authentication and authorization
User Roles
Handling and logging errors the right way

Why Should learn Node?

Node is great for prototyping and agile development as well as building super fast and highly scalable apps; Companies like Uber and PayPal use Node in production to build applications because it requires fewer people and less code. Plus, Node has the largest ecosystem of open-source library, so you don’t have to build everything from scratch.

You learn in this course how to use mongoDb without any installing extra tools, MongoDB is now on cloud, so you will store your database in safe place!

This is not a reading documentation course. You have here a real-world project to learn from, and you will see the exact place of every feature of every technology used in this course.

6 new features in Microsoft Edge that motivates you to try it

Fadi Nouh — Wed, 08 Jul 2020 09:26:08 +0000

Microsoft announced a set of new services targeted at ordinary consumers, including: New features in its Edge browser that help you to do your work more efficiently, save time, and protect your data and identity online. So if you haven't tried the new Microsoft Edge browser yet, now is the time to try it out, and maybe move to it.

Here are the top 6 new features in Microsoft Edge:

Improving groups feature to organize searches:

Collections allows you to easily collect information from different websites, organize and export them to different files, or return to your search at a later time and start where you left off.

To access this feature, Simply click on the "Groups" button in the top right of the browser next to your account picture, and a menu will open to the right of the browser where you can easily drag and drop web pages, texts or images into the group, without having to open another page or application.

You can then either send your group to Word or Excel, or share it by copying and pasting in Outlook or any other email service.

The advantage of vertical tabs to work more efficiently:

Microsoft has announced a new feature called "Vertical Tabs", a feature that helps you to easily access and manage all open tabs in the browser simultaneously. You can display the tab strip on the left side instead of at the top of the browser, with a fixed width for each tab giving you plenty of room to highlight the page you want.

And if you open many tabs, you can scroll up and down through the menu. You can also click and drag tabs up or down, and even multiple selection to pull the entire groups and organize them as you like.

Microsoft Edge is the only browser so far that allows you to manage private tabs through a menu that opens in one direction with one click.

Smart Copy feature to save time:

Smart copy makes it easy to accurately select, copy and paste the content you want from the web while preserving the original HTML format.

You can use the pointer to select any region or any type of content, and when pasted it will retain the same format, including images or links.

Password Monitor:

Microsoft has added a new feature to the Edge browser called (Password Monitor) to help keep your online accounts safe. Once activated, it will inform you if the login data for the sites you have saved in Autofill have appeared in any data breaches in the dark web.

Immersive Reader mode to make reading more focus:

Microsoft added to its browser the Immersive Reader mode, which removes screen distraction, and creates a simple environment that helps you focus.

This mode also gives you access to a variety of tools that help customize the experience that suits you best, such as the ability to hear the article out loud or edit the text.

Create an application for your favorite sites using the Edge browser on Windows 10

One of the most great features in the new Edge. Many websites offer features or tools that we use so much in everyday life that they can even replace traditional desktop software. On the web, there are websites for everything from managing email and editing documents to playing videos and music. So, it would make sense if there was a faster way to reach those sites. True, we can put it in bookmarks to quickly visit it in a web browser, but Microsoft's new "Edge" browser provides a more convenient solution - by converting those sites into standalone applications that can be handled just like any other application in Windows 10.

All you need to do first is to launch Microsoft Edge browser either through the taskbar or the Start menu, then head to the home page of the website for which you want to create its own separate application - make sure the address bar is that the home page is now displayed in the browser, not a sub-page on site. After that, press the menu button (...), point your mouse pointer to the "Apps" option and click "Install (name of the site)" from the drop-down menu. When the confirmation window appears, to install that website as an application

And here you are! , you have web-based application already

you can also find it in the start menu for windows by searching for it

I hope you enjoyed this article , looking forward to read your opinion about this new features , I am on a new article about features on the new Edge for web developers.