DEV Community: Noman Gul

Hello, World!

Noman Gul — Thu, 08 Oct 2020 07:20:52 +0000

Hello DEV, this is my ninth post

Hello, World!

Noman Gul — Mon, 05 Oct 2020 17:35:59 +0000

Hello DEV, this is my third post

Hello, World!

Noman Gul — Mon, 31 Aug 2020 06:27:38 +0000

Hello DEV, this is my fifth post

Teenage Software developer Journey (short version)

Noman Gul — Sun, 05 Jul 2020 11:34:53 +0000

2017 => now()

16-year old => 19 yo

Matriculation => Leaving college

Going college in my father rickshaw/auto => Working remotely

printing 'Hello world' in android phone => Using ThinkPad for day to day coding (still not comparable to MacBook but much better than smartphone :p)

'a shy person' => Attending Hackathons, local events, expanding my network and learning new technologies

Turned down on for "not enough experience" => Receiving job offers via LinkedIn and GitHub

Learning from my couch => Working from my own Home office

Knew nothing => Know something

Just write stupid small apps.

With lots of practice, you will eventually become a great developer. Although, you may never consider yourself that as you should always be seeking out learning more and more.

In the end, the thing matter most is your 'curiosity'. It's your curiosity about 'How things work' which will lead you somewhere...

Good Luck!

TIL (feat VSCode)

Noman Gul — Sat, 16 May 2020 21:27:28 +0000

You can now move your custom containers around with all of the containing views in one movement in VSCode. The short video below shows dragging a Terminal into the Activity Bar.

More than Git and GitHub workflow (Hindi/Urdu)

Noman Gul — Sun, 05 Jan 2020 11:19:05 +0000

As-salaam-alaikum/Hello folks 👋,

Here's me explaining more than just Git and Github work-flow (in Urdu/Hindi):

Branching 🏷️
PRs process ⚙️
Tasks management and stuff like that 🙂

Let us know:

How are YOU doing work remotely or in a software house with big teams?
which workflow is working best for you?
or maybe you did some team-work when creating uni FYP... How did you manage tasks?

doc link => https://www.notion.so/nomangul/Git-GitHub-workflow-28adfc05947a4473b02719ea98f951fe

P.S: I made a lot of mistakes in this video so, please ignore

10 minutes me kitni % Todo App bna sakte ho? (Urdu/Hindi)

Noman Gul — Sun, 29 Dec 2019 12:09:48 +0000

"Todo App bnana koi halwa🥣 nhi"

10 minutes me kitni % Todo App bna sakte ho?

UNCUT/non-edited video

Source code >>>here<<<

Why do you need to add a meta viewport tag inside element? (with example)

Noman Gul — Sun, 24 Nov 2019 13:46:37 +0000

Have you ever wondered why you need to add:

<meta name="viewport" content="width=device-width, initial-scale=1">

inside <head> tag and why it is useful?

You're in the right place!

Example

First of all, open this web page in a new tab: http://www.pakistan.gov.pk/

Open developer tools and enable device mode in your browser. This mode simulates the behavior of the web app on a mobile device. Notice that the page is zoomed out to fit the fixed-width content on the screen. This is not a good experience because the content will likely be too small for most users, forcing them to zoom and pan.

Set the visual viewport

1- Edit head element:

2- Add viewport:

Then add viewport meta tag and check the page in device mode. Notice the page is no longer zoomed out and the scale of the content matches the scale on a desktop device. If the content behaves unexpectedly in the device emulator, toggle in and out of device mode to reset it.

<meta name="viewport" content="width=device-width, initial-scale=1">

Explanation

A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling. The width property controls the size of the viewport. It can be set to a specific number of pixels (for example, width=500) or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which can be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. Setting the initial scale improves the experience, but the content still overflows past the edge of the screen.

So then you need to use CSS flex or grid and other properties to make it responsive. But this is the part of another blog story 😜

Thanks, Awesome DEVs!

Noman GulFollow

Muhammad ﷺ follower Web/App Dev• Freelancer• ❤ React / React-Native• Be Strong and Code On!

How I Use VSCode

Noman Gul — Mon, 21 Oct 2019 00:27:22 +0000

I recently updated and shared my Visual Studio Code settings on How I VSCode.

Check them out and share yours as well!

When you joined GitHub? WE KNOW! 😄 Octocat Day - Your Open-Source Birthday

Noman Gul — Sat, 05 Oct 2019 09:50:13 +0000

Octocat Day 😺

Believe me, It'll give you your open-source birthday date 😁

Check out the project live at OctocatDay.com and source code HERE

Built With ⚙️

ReactJS - The SPA library used 🔧
Ant Design - UI library 🌈
GitHub API - 😺

Please don't hesitate to open an issue or pull request. You can also send me a message on Twitter. Contributions of any kind welcome!

If you have any feedback, please feel welcome to leave a comment below.

GitHub join date with ReactJS hooks

Noman Gul — Mon, 23 Sep 2019 15:00:57 +0000

Sum of 3 or 5 Multiples - Problem => Solution

Noman Gul — Sun, 15 Sep 2019 04:00:55 +0000

Problem

Find the sum of all the multiples of 3 or 5 below 1000. e.g. If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.

Solutions

We implement two solutions but first I want to mention common function in both solutions...

const isMultiple = (num, mode) => (num % mode ? false : true);

// Checks the given number is multiple or not with the help of modulus

// e.g. isMultiple(6, 3) returns true because 6 % 3 remainder is 0.
// This mean 6 is multiple of 3.

// At the other hand isMultiple(26, 5) returns false

With => Array Methods

// initial array range/length

const numRange = 1000;

// Empty Array with 1000 undefined items

const array1000 = [...Array(numRange)];

// array where we push 3 or 5 multiples

const threeOrFiveMultiples = [];

// common util function for checking multiples

const isMultiple = (num, mode) => (num % mode ? false : true);

// mapping over an undefined items array and pushing
// 3 or 5 multiples indexes to threeOrFiveMultiples array

array1000.map((_, index) => {
  if (isMultiple(index, 3) || isMultiple(index, 5))
    threeOrFiveMultiples.push(index);
});

// reducing the array to a single value

const sum = threeOrFiveMultiples.reduce((acc, curr) => {
  return acc + curr;
}, 0);

// logs the sum of all the multiples of
// 3 or 5 below 1000 => 233168

console.log(sum);

// complete solution with array methods

// initial array range/length
const numRange = 1000;

// Empty Array with 1000 undefined items
const array1000 = [...Array(numRange)];

// array where we push 3 or 5 multiples
const threeOrFiveMultiples = [];

// common util function for checking multiples
const isMultiple = (num, mode) => (num % mode ? false : true);

// mapping over an undefined items array and pushing
// 3 or 5 multiples indexes to "threeOrFiveMultiples" array
array1000.map((_, index) => {
  if (isMultiple(index, 3) || isMultiple(index, 5))
    threeOrFiveMultiples.push(index);
});

// reducing the array to a single value
const sum = threeOrFiveMultiples.reduce((acc, curr) => {
  return acc + curr;
}, 0);

// logs the sum of all the multiples of
// 3 or 5 below 1000 => 233168
console.log(sum);

With => For Loop

let sum = 0;

// loop max range

const numRange = 1000;

// common util function for checking multiples

const isMultiple = (num, mode) => (num % mode ? false : true);

// looping over an numbers below 1000 and adding 3 or 5
// multiples to sum

for (let i = 0; i < numRange; i++) {
  if (isMultiple(i, 3) || isMultiple(i, 5)) sum += i;
}

// logs the sum of all the multiples of
// 3 or 5 below 1000 => 233168

console.log(sum);

// complete solution with For Loop

let sum = 0;

// loop max range
const numRange = 1000;

// common util function for checking multiples
const isMultiple = (num, mode) => (num % mode ? false : true);

// looping over an numbers below 1000 and adding 3 or 5
// multiples to sum
for (let i = 0; i < numRange; i++) {
  if (isMultiple(i, 3) || isMultiple(i, 5)) sum += i;
}

// logs the sum of all the multiples of
// 3 or 5 below 1000 => 233168
console.log(sum);

Let me know which solution you like more and why? (BTW my favorite one is with "For Loop" because it's so easy and less code)

And, for more cool stuff, follow me on Twitter @NomanGulKhan and GitHub @NomanGul

More from Noman 🦄

🧔 Full-Stack Dev explained in 2 minutes

Noman Gul ・ Sep 13 '19 ・ 1 min read

#explainlikeimfive #javascript #react

margin-right: -50%;

Noman Gul ・ Sep 11 '19 ・ 1 min read

#jokes #css #watercooler