DEV Community: Muhammad

How to Build a Startup Landing Page in Velo

Muhammad — Mon, 08 Mar 2021 00:34:47 +0000

Velo is a rebranding product of Wix.com which is a famous one-stop no-code solution for web development. I have seen people using Wix.com for anything from simple landing pages to e-commerce stores and have read and heard a wide variety of success stories.

Coming from a technological background and being able to go through the process of the software development cycle, in a lot of cases, I did recommend people to go towards Wix. In this article, I will be discussing these cases for which I highly recommend Velo and in cases, where I find it difficult that Velo would be a good solution. To do so, I will try to replicate my current landing page in velo.

Let's start by making our own Velo site

You need to go to the following URL:
https://www.wix.com/velo?ref=hackernoon.com

Let's click start project. On the next screen, it does give us the option of going through a tutorial but to have it hands-on, I wanted to experience how something can naturally come to me which allows me to understand the level of working of the project.

Therefore, I clicked start now.

This is like a wizard that is gathering information for me so that it can customize a set of presets that best fits my use case. I want to create a site for myself. It should be a business site and I have built sites professionally. Whenever you click on the blue links it will give you a set of options to select from.

Now, this is where the interesting part comes to play. I was given a set of templates that are like starting points for me to start with. Now as you move your mouse over them, you can have a glimpse of them and there is a categorical selection on top of it too.

Although the limited set of templates are really good to work on, I did find that the collection was small in size, maybe Wix needs to add more categories that are not general but specific to it. As my startup landing page is under IoT (Internet of Things), I was unable to find anything specific to that industry.

Now as I was browsing by, I went with a Go On template.

I liked how the full-width video background with a mobile frame with a mobile application preview was shown. When I selected it, this was the first screen or perhaps the main screen where what we call the "editor" comes up.

Editing Your Template

On the right side, there is a toolbox with basic tools like duplicate, delete etc. and on the left side, you will have from what I understood a list of extensions, modules, and additives that allow you to add or remove or browse components like sections and images.

Now I tried exploring the aspect, and my first intent was to see even when developing websites, is the header, the navigation menu because if you are able to produce the navigation menu before even the project starts, you are literally done with more than half of the project because now you know what exactly the whole project will encompass.

To my amazement, I clicked the header and then the settings icon, now I would say this is a really neat way of going no-code.

This is how bootstrap allows us to either make our navigation stick to the top or change size as we scroll down or disappear as we move down.

These presets are pretty slick, as there are some mechanics to the code of it, therefore being friendly to people not having a coding background.

I really like this solution.

Once I adjusted my way of liking with the header, the second thing I wanted to change was the logo.

I clicked the left panel, the third item which said add, and the menu popped up with all the possible elements that I could want.

I find that this is the most core component of wix editor where you can add a list of items.

Adding Your Logo to your Velo Site

For updating the logo, I needed an image and then from where my image uploads.

Remember to click the arrow next to it, sometimes, the click doesn't work on My Image Uploads.

I came up with this nice uploading panel that was soft in color and love the professional blue bar on top of it.

I simply took my logo and dragged and dropped into it. Then, I selected the preview and clicked on the blue button on the lower right hand which says Add to Page.

Now I had the logo with the actual size, and these beziers points surrounded the logo.

This is very neat, for I can freely drag and resize the logo.

As I dragged the logo to its place on the upper left corner, I noticed that the editor took note of all the grid and transpositions that were needed for it to be auto adjustable to all available screens.

Now the logo was in place, but I felt that it was too fat in the height, so I re-uploaded the logo without the dandelion and then resized the header using the mouse. That process was very smooth.

Now if we look at the page, it seems very sleek. I like it alot.

Changing the Background on Your Landing Page

Next, I wanted to play with the background, so I clicked on it, and I had an option to change it.

It was really amazing to find that I had the option of either using a static image or a video. As far as I remember, it still is sometimes a pain handling that in the code.

I selected a mountainous background to enumerate fresh air, although the available backgrounds are nice, but I would still say the collection is limited.

To view more backgrounds, if you click on videos, you will be brought upon a dialog box that allows you to search as well.

Next, I uploaded a couple of images, specifically my device image and a screen from my mobile application.

This was far simpler to resize and place from the same beziers.

As you scroll down, you are able to double-click on the demo text that is available, and that makes it editable.

Adding Text to the Site

I changed the content as much as I could. But next, I wanted some callout type of aspect into it.

This is where I clicked the add button on the left and then went into the strip tag, where I found this colorful strip placement very attractive.

Now, this was a bit fidgety because as soon as I placed the strip bar, it went right at the end of the template and one has to be just a bit precise because moving the complete strip bar can sometimes go on action for resizing the bar and in some cases, it makes the items in the strip bar editable.

I find that using the title that appears as the type of component, for instance in this case is a strip bar, is much more adequate than selecting the whole component.

Site Icons on Velo

Next replacing the icons was pretty simple, I found that the library of vectors available with wix is well sufficient. You could simply double-click it and search for media.

Now usually what I have done with my current website, I wanted to add a slider of mobile application images. I went back into the add button on the left of the page, and clicked on galleries, where I was able to select a layout.

It was a bit confusing at the start but once you add one or two components, you will get a hang of it.

Adding images was simple, you could select more than one image in the same media panel and associate it with the slider. Just as the header had settings, all components have settings that allow you to change arrow sizes and placement or the number of components.

Now, there were times I just went out of scope and that is where the to undo button on the top came into place.

There is an undo button, so you don't have to worry about messing it up, you can always undo it.

This was what came to my alert, at this point the site became a bit heavy on the browser, so the page did go unresponsive.

I find that this editor is memory-consuming and pushing it to its limits is very easy with adding more and more components.

I had to refresh twice to get back to it and it was automatically saved so no progress was lost.

Adding a Contact Form on Velo

We are nearing our finalization and the last thing was the contact form. There were very interesting options with and specifically the true power of such a script like wix is not to worry about handling form data.

Now you can easily set up email notifications over here.

The real apple was being able to do a couple of things after one submits a form, so perhaps as a startup taking preorders, this is really perfect for a no-code solution.

Now by default, the form submissions would go to your email address and that is my email address in this case.

Adjusting the Menus on Your Site

Now coming back to the top of the page to the menu bar.

This was a bit tricky, I wanted all the menus to scroll to their specific section and that was something I had to figure out.

Go to the Add menu, and go to the Menu Section, there you will find Anchors.

In the Anchors, section click and drag the blue boxed white anchor where you want the menu to scroll.

It will be a horizon line like this and then you can give it a unique name. Once you have given it a unique name, if you go back up to the navigation menu and click on manage items, you will be presented with the list of menu items.

Once you click on the item you can select anchors and your anchor will be available in the list.

I found that the transition was very smooth with a smooth scroll available.

So this is where I always say, the development on the frontend aspect can get a bit tricky.

Mobile Optimisation

Now I clicked on the mobile icon on the upper left hand of the screen. The behavior that I noticed was that it didn't seem mobile-optimized, but in reality, it was.

I find that it might be either a bug in my browser or in the editor. I just had to refresh the page and the mobile-optimized view loaded up.

Please refresh if you find that you are unable to see a mobile-optimized view.

The sweet spot, I would say is visually, I just had to readjust the height of the sections and it took those heights in regards to only mobile view.

There was also an option to hide a specific section for mobile view only. This is a very powerful feature and I find by using this you can really munch up your startup page.

Once you're happy with what you want and with all the change, just click on the publish button on the upper right side of the screen and you're all good to do.

My sample Velo site is available at the following URL:
https://bilalfromlahore.wixsite.com/breatheio

Please feel free to explore it.

The result is:

I would highly recommend Velo in the following conditions:

*You need to validate your idea
*You are a Startup getting ready for an MVP
*You have a preorder system and it just requires a form to preorder
*A simple 1-10 Ecommerce Website

Cases that I find going full development might be better:

*You have your own eco-environment for your product
*You need complete integration with all systems around it
*You have scaled up substantially
*You need to customize over personalize

Doers Vs No Doers: An Analytical Approach

Muhammad — Sat, 02 May 2020 10:48:56 +0000

To start with, this is a tricky topic, where I might find people in conflict with my perception but after all when isn’t conflict a promising act. Conflict by its meaning is a disagreement where one holds an entirely opposite perspective and surely does one defend it as if it was their very own life at stake. I think that is a beauty of it, perhaps lasting for a long time that is unexpected or usual. I would put it as my experience to suggest that I have seen people get excited and enthusiastic about doing something. It can be an idea or a project or anything that they either want to achieve in life or a common goal to which one puts an effort. The phenomenon that can be instantly noticed is that the excitement or the enthusiasm does not last very long, it is as if a bubble started gulping with air and before it reached its potential where it should have held, it just bursts into nothingness. The pattern repeats very often and has been repeating for much longer than I really thought it would. This is what triggered me to write for it in the hope that maybe someone other than myself is experiencing a similar act of time.

The current COVID-19 pandemic is a great setback, as we go through it, seeing and feeling what a pandemic is. I think, unknowingly our society had another pandemic embedded into it, which to this day, hasn’t been much noticed and no cure developed for it.  I would call that pandemic, the society’s algorithm for literally categorizing everything possible. This attempt of categorization is backed by the idea of understanding, the happening but I would like to add that such attempts of categorization have crept into our skin by fueling concepts such as racism, radicalism, and hierarchies. There is a category, I myself would specifically want to talk about, it is the category of the doers and the thinkers where one does and the other does not. In my opinion, the word the thinkers are totally out of context to the word doers, therefore, I would like to replace the word with doers and the no doers because thinking is a requirement for enabling one to do something, imagine doing something without thinking, it would simply not fit but somehow the comparison has been accepted by the majority that those that think simply are unequipped to do anything.

Let’s talk about the no doers a little. The question at pace would be, how does one do something to become a no doer? A no doer would seem like someone moving through a river but ending nowhere. Someone who seems to pass by something but still remains there. In a more general perspective, an illusion of movement yet it remains there. Now with reference to such a definition, there is a lot around me and perhaps you, people, places, ideas, abilities, and life that would seem fitting to it. Yes, it is fitting, like those people might have met 3 years back, and they were at a position in a company, and today they still are there but when you ask, they just seem to complain that they are unable to do something about it or perhaps they are doing but the result cannot be seen. It is as if they are stuck in an endless loop of time that just repeats and repeats. The repetition is what can be termed as a pattern. A process that leads to the same result no matter what changes. I think some might term that insanity, trying to do the same thing again and again and expecting a different result. 
Let’s try defining, what a doer is. A doer should be the opposite of a no doer. The opposite would say that a doer would seem like someone not moving through the river and yet ending somewhere. Now to me this river really makes context, it is the river where people want you to just go with the flow, not oppose it whereas my question is if you want to be a doer, you shouldn’t be in a river where everything is about to go with the flow. From a general perspective, a doer would have no illusion of movement, therefore it doesn’t remain at a single point. A doer is someone constantly in motion, either at one point or another but not the same point where it as reached does it reach again. A doer is like what we say about lightning, that which does not strike the same place twice. Therefore, doers are unpredictable, and this unpredictability in anything is what I call power. There is no pattern to it, the doership of one’s struggle. 
I have a little dilemma that I have observed, it is the idea of predestination. I would say it is a theory, that all one does and will is fixed and no matter what he or she does, it cannot change. Think of an industrialist, a businessman of the dark ages. One who is smart, cunning like a fox, and a great observant. One who is dramatic and has touch of dictatorship to him. One who is power-hungry and has discovered how much man is inclined to find answers in the abyss of the unknown element of life. Now, these characteristics boiled together will make one wary of competition and because of this fear of competition one needs to stay on top of the food chain. He will surely use the idea of predestination to socially restrict his peers and society because that is the only way, he can ensure that the power struggle stays within his lineage. The idea of predestination fixates one in what one cannot be and what one should be i.e defined by systems and people around him. Once fixated, he or she repeats becoming a pattern, and patterns produce the same result over and over again while the human nature in this pattern expects something different. To find a different place in life, one that is better than what you think you currently have, one needs to break the pattern, and to break the pattern, one needs to adapt to doership and leave behind the idealogy of no doers that prisons people to restrictions. Earlier, I did mention that the word thinkers was out of context, you are not born or predestined to fixation, you can always think out of it, and change the current result. Man’s ability to learn out of situations is what makes him truly unpredictable, unpredictable as lightning does not strike the same place twice. So by violating, the law of predestination set by some fanatic person from the dark ages, you become the embodiment of free will, a  will that is powerful beyond measure, to give you whatever you desire.

Reference
https://www.dictionary.com/
https://unsplash.com/
https://www.pexels.com/

How I started my IoT Company?

Muhammad — Thu, 19 Mar 2020 08:14:43 +0000

A biological marvel, the human itself known as homo sapiens. In the Latin language, it stands for a wise man. A wise man that survived about 200,000 years of evolution and extinction. There are many perspectives towards its survival and today I would like to share my perspective, slightly vague but different. There is a concept of what drives you that has become popular within the last decade. Certain presumptions about the driving force are based upon raw emotional aspects such as passion and rage. I find to myself that these aspects are reactions to our stubbornness to keep on going on but the negative aspect is that these reactions are short-lived and eventually man settles with peace. I would like to share a certain experience in a short period of my life that has produced results beyond my expectations. It is a small story of how I created my IoT Device converted into a product and made a company out of it.

It all starts with what I had observed about me, it’s called self-recognition. It is a subjective evaluation of my image that encompassed my beliefs. In a world connected by the internet that has enabled us to communicate faster, our horizon for success has far broadened more than we can actually digest. From stories of small startups evolving into big enterprises and basic ideas which we ignore on daily basis that have become world-changing solutions, the urge seeps in us, an urge to be part of this transformation, an urge to be not left behind. It is this urge that pushes us to buy the latest versions of the things that we use daily, like smartphones, laptops, computers, and cars. This urge is a trigger that satisfies our egos. It ensures titles for example, “I am loved”, “I am worthy”, “I am unloved”, “I know stuff”. These titles are emotional states like pride, despair or shame. A set of evaluations of ourselves in a positive or negative manner, as in how we feel about ourselves.

Let’s talk about ego, my ego. Ego would mean a heightened extent to which we think of ourselves. Everybody loves to think great about themselves and to my findings, it is that struggle to find ways to think highly of ourselves that pushes and makes us to all these vague things that become our innovation. I would like to mention Sigmund Freud who was an Austrian neurologist and the founder of psychoanalysis, a clinical method for treating psychopathology through dialogue between a patient and psychoanalysis. Freud's perception of ego is simply the regulation of sexual and aggressive impulses that navigate in between our impulses, our demands and the values of the society that surrounds us. I find this as a metaphor for a self-consciousness. Our self-consciousness is a major portion of being which reflects on our thoughts, feelings, and actions. These thoughts, feelings, and actions become the identity that we legitimize. The constant need for us to belong by contribution is perhaps a reflection of our superego which is damped down by the society we live in for their constant need to control our us by eliminating our urges using concepts such as humility through faith. So here I was aiming to achieve self-worth and my journey started.

The second part of my journey began, I call it the big research. At that moment in time, the most initial issue that clogged the news was air quality which greatly influenced me to find possible solutions. The question arises how do you find a solution to a problem. It’s simple, just find what others have done to solve the problem. What you find is what will you be competing with. This is called finding similar products. These are always well-made products designed to certain perspectives perfection. They are all good verses in my opinion but to my ego, I state them as prototypes because these products always have reviews and comments that are more interesting than the product itself. Now what you have are their users opinions telling what they expected and what they found. The expected part of the opinion is the shortfalls and to my amazement, some bigger products have a user base that is actually hacking sometimes the software and the hardware to better suit it for their own personal requirements. These hacks and fixes are what they expect it to be. Your ingredients are complete, you have the perfect formula for your own creation. You take the product, change it by the users opinions and apply the hacks and fixes to it and what you have in your own product. I like to repeat the process around 3-5 times before I can start documenting my findings. Now, this collection of findings is your formula for which you have to arrange all the raw materials needed for it.

Next, I started my approach towards the hardware and you can easily lose your way through it. This stage does carry a bit of weight in your pocket but in the end, it pays off. To start with the hardware, you start by finding a devkit. A devkit is a complete prototype board that has all the basic components for the system on chip to function. Its literally plug and play. All devkit come with their native framework but I would like to say Arduino is your best friend. Arduino is an open-source software and an integrated development environment that has a simple and accessible user experience. It is based on C programming language which can be easily expanded by using their libraries in C++. Now Arduino is compatible with multiple devkits and it will save you a lot of pain. There are a lot of tutorials on YouTube and Google which can easily help you absorb the language, so plus one for acquiring this new skill. You have the devkit and the language, now get the sensors and make them work one at a time with the devkits. If you're using multiple sensors, each time you make one work, save your work as per individual sensor. Once you get all sensors working now it’s time to merge all the sensors together. I like to refer to this process as a divide and conquer by breaking a bigger problem into smaller problems and just focusing on one smaller problem at a time. It just solves so fast.

Once you have all the sensors and the hardware code working, I say compile them up on a breadboard and make it work so it works in harmony with each other. At this stage, you should have your hardware prototype up and running.

Once upon a time, there was a server and an IT guy who used to manage the server. The server had a fixed IP and was either running Windows Server or a Linux Version. The IT guy was 24 hours online with no sleep always looking at his computer screen into a terminal with all the fascinating green text scrolling up. Every now and then an evil hacker came and put his sleepless nights to waste by putting the server out of use. The IT guy got frustrated to a point at which he committed suicide by quitting the IT. Eventually, the number of IT guys started fading away until one day a cloud came. It was a big white glooming cloud that showered gave shade and showered rain to the IT guys. The IT guys stopped committing suicide and started sleeping more. They were at ease and rarely a hacker could render their server offline. They flourished and multiplied in numbers and lived happily ever after.

So what is the cloud? The cloud is an on-demand delivery network of IT resources over the internet. It follows the model of pay as you go. Instead of purchasing and maintaining a physical server, you access server services such as computing, storage, and database as on needed basis, everything else is handled by the cloud and the leading cloud provider today is Amazon Web Services. Now if you want consistency and persistence in your service, you have to be on the cloud. Keeping IoT (Internet of Things) in context, AWS (Amazon Web Services) has a beautiful service known as AWS IoT core. It works upon MQTT(Message Query Telemetry Transport). MQTT is a very lightweight protocol that transports messages from devices to the internet. It is designed for connections with remote locations where a very lightweight data packet is preferable when bandwidth is limited. Now you have your prototype board communicating with the internet on the cloud using MQTT. The data that you are being sent can now be stored in a database that is existing in the cloud. Once my prototype board was working on a breadboard and the data being sent to the cloud, I started working on the software end of things like handling the data, doing analytics and making the data into useful information. This included small microsystems like user registration and notifications through email. The initial process was using a framework like Angular to build a dashboard that enables me to monitor my hardware on the internet. So here we have another new word and that is Angular. Angular is a JavaScript framework that works by helping you create reusable code as components. It helps you better organize the way you develop things. The great thing about Angular is that there is another framework developed on top of this framework and it's known as Ionic framework. Ionic framework helps you develop a mobile application in HTML, CSS, and JavaScript which is then ported into an Android and IOS application. Now, you have the best of both worlds. By this time, you should have a bigger and clearer picture of where you are going and let me tell you, it is way satisfying when reaching this stage.

Lets get back to the hardware, so now you have your software and cloud figured out, what to do next. Take your breadboard circuit and use a piece of software known as Autodesk Eagle. Autodesk Eagle is an electronics schematic and board design software. You create your circuit logic as a schematic in Eagle and then convert it into a board. Now you have a board and you export it using Eagle as Gerber files. A Gerber file is used for printing a printed circuit board. It is a standard used by the PCB manufacturing industry. Now you have the Gerber files so open up google and search for PCB manufacturers in your area. I got my PCBs from china and a very famous one that is always putting google ads is allpcb.com. They are cheap and have a really nice online system to place your order and keep track of your PCB manufacturing process. You should at this stage place an order of your PCBs and in the time, it reaches you, lets work on designing the enclosure of your IoT device. Autodesk software is fully connected using the cloud; therefore, you can export your board to Autodesk Fusion 360 within Autodesk Eagle. Autodesk Eagle is a 3D modeling product design software and its neat. Once you have your boards with exact measurements to scale in Autodesk Fusion, your all good to design the enclosure around it. I think at this point, I highly recommend purchasing a 3D printer like Ender 3 Pro because it will help you reduce your prototype for enclosure costs substantially. Get your design finalized in Autodesk Fusion and give it to a 3D printing service or your 3D printed to print it. Now put those PCBs into the enclosure and give it a run. There you have it a complete prototype of your IoT product. I always pay special notice and attention to detail on how the product looks before finalizing my enclosure design.

Once your enclosure design is finalized, you need to find a company that provides injection molding for your enclosure. Injection molding is a process of producing parts by injecting material in a mold. It is very cost-effective and puts your product into a production line. Almost all of these companies have a mold maker. This mold maker will take your design and create a mold for you.

Your all ready for launch now. Make some great packaging and branding for your IoT device, polish your hardware and software, create a perfect landing page and get into the growing market of IoT devices by bringing in your innovation to technology.

At the end of this article, I would like to say, it was a fabulous journey for me and by the end of the road lay the fruits of my labor that surely satisfied and boosted my ego to proudly call myself from a league of entrepreneurs struggling their way to the top.

References
https://en.wikipedia.org/wiki/Self-esteem
https://www.psychologytoday.com/intl/blog/theory-knowledge/201306/the-elements-ego-functioning
https://aws.amazon.com/what-is-cloud-computing/
https://en.wikipedia.org/wiki/MQTT
https://en.wikipedia.org/wiki/Angular_(web_framework)
https://en.wikipedia.org/wiki/Gerber_format
https://en.wikipedia.org/wiki/Injection_moulding

What I have been doing and What would you like to learn from it?

Muhammad — Fri, 13 Mar 2020 20:45:37 +0000

Hello Readers,

Long time, Been busy with a personal project becoming a company. In short, I am making an Air Quality Monitor and Purifier connected to the Cloud.

The Following Skills I have worked and achieved;

ESP32 Using Arduino and ESP-IDF
PCB Design Using Eagle
Autodesk Fusion 360 Enclosure Design
Arduino to AWS Cloud
Docker Containerization Using AWS ECS for Stateless Service
Angular Dashboarding
Ionic Framework Mobile App Android and IOS
AWS Elastic Beanstalk NodeJS
MariaDB DB and Redis Memory Storage

was wondering what would you guys be interested in, thinking about sharing what I have done and how.

Handling Node.JS as an Asynchronous Application with Error Handling

Muhammad — Fri, 31 Jan 2020 10:40:55 +0000

This article is about implementing asynchronous calls in JavaScript and Node.JS.

In this article, you will learn how to implement the following coding practices

differentiate between a Synchronous and Asynchronous Call
execute functions in Concurrency
execute Promises in an Asynchronous Call
wait for a function to execute before continuing
prevent a Node.JS Application from Breaking
handle errors of consecutive running functions

Asynchronous calls are the knife and butter for a JavaScript developer. JavaScript, as a language, is a single-threaded engine which means that one thing can happen at one time. This is called single threading. This does bring in simplicity but holds one back from performing time-consuming operations. The time for an operation in a web application is termed as its operation cost, and for Javascript developers, pushing an application to be performative, means that we reduce this operation cost to as low as possible. This process of reducing the cost is called optimization of an application. Therefore, to run such concurrency in a Javascript code, we use asynchronous calls.

What is a synchronous call?

A synchronous call the code that is being executed i.e the program itself, will wait for each line to run before moving on wards to the end of the program. It can be further illustrated by stating that each operation will complete before starting the next operation. The time needed to execute the operation is known as the latency or lag the user perceives. The order of the code matters in synchronous calls. Most of the code that you have written in Javascript is running as synchronous.

Sample Code of a Synchronous Call

const printToConsole = (msg) => {
  console.log(msg);
}

const myFunctionOne = () => {
  printToConsole('Hello From Soshace, I am Number One');
}

const myFunctionTwo = () => {
  printToConsole('Hello From Soshace, I am Number Two');
}

const displayMessages = () => {
  myFunctionOne();
  myFunctionTwo();
  printToConsole('Dude, I am from the Third');
}

displayMessages();

Output of the Code

To better understand the output of the code, Javascript creates an environment which calls the main() function. The main() function is the single-core thread of Javascript itself. This environment is like a stack on top of which the displayMessage() function is added.

The displayMessage() function holds a set of functions. The first one that is executed is myFunctionOne() therefore it is added on the top of the execution stack. myFunctionTwo() functions follows and the last one to get executed is printToConsole() function. At this point, no function is executed — only queued, until no function is left in the program.

Once there are no functions left, the queue starts emptying up one by one starting from the bottom which, in this case, first executes the main() thread and then the displayMessages() function. The first output in the console will be of myFunctionOne(), which is “Hello from Soshace, I am Number One”, then the second console output will be from myFunctionTwo(), which is “Hello from Soshace, I am Number Two”. After the last function, which is printToConsole() is out, it will finally output to the console “Dude, I am from the Third”. This environment created by Javascript is known as an Execution Context and the queuing process is known as the Call Stack.

What is an Execution Context?

JavaScript creates an environment where it examines the code and performs basic execution tests for any possible errors and then executes the code. This is done as a global context so, if a new function gets executed, it will repeat the process. This environment is called the execution context.

What is a Call Stack?

JavaScript creates a stack, where it keeps a record of the functions that are being run as code. This stack is a Last-In-First-Out (LIFO). When JavaScript runs the code, it adds the function into this stack and starts carrying it out. Any function further more down the line is pushed to it and carried out in order.

The diagram illustrates the creation of the execution context, which is the main(), and as it starts pouring in the function until it runs out of function to run.

The Asynchronous Call

In the following code, we are creating a delay function. The delay function promises us a value after it is executed in the console. A promise with respect to the delay function is an object that will return us a value somewhere in the future. Next we have written an async function that will execute the promises and at the end should print us a message.

const myDelay = (ms) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Delayed');
            resolve();
        }, ms);        
    })
}

const myFunction = async () => {
    myDelay(2000);
    myDelay(2000);
    console.log('End of the Line');
}

myFunction();

Output

As you can see, the code was executed in concurrency where it did not wait for the delay function to execute and moved to the end of the code to complete its call stack. This can be troublesome in use cases, where you want to wait for a value from a network call before proceeding on with the code. To fix such an issue we use the ‘await’ keyword in javascript.

const myDelay = (ms) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Delayed');
            resolve();
        }, ms);        
    })
}

const myFunction = async () => {
    <strong>await</strong> myDelay(2000);
    <strong>await</strong> myDelay(2000);
    console.log('End of the Line');
}

myFunction();

Output

Now, our JavaScript will wait for the function to complete and keep its promise before rushing into completing the script. This is highly effective in doing network calls and waiting for data to form from the network. Once you receive the data then you can process the data received from the network call and proceed with your application. It also ensures that nothing is missed or skipped during the execution of the code.

Handling Errors

We are now creating a function that will help us simulate an error.

const simulateError = async () => {
    throw new Error('Failure!')
}

simulateError();

Output

This has literally broken our application, now, if this was a production-level application, one would lose all contact to the backend API and lose the server from serving people currently using the application which nobody wants.

const simulateError = async () => {
    throw new Error('Failure!')
}

simulateError()
.catch(
  (error) => {
    console.log(error)
});

The catch clause will ensure that our application is not broken from serving our clients. Let’s look at the output.

As you can see, it has warned us of the same danger but has kept our application alive. This is helpful when working with production level apps that should not break out of the process and require manual restarting.

Error Handling in a Chain of Promise Events

A typical case would be of running multiple await statements and having a couple of them produce an error. The code can become really messy to handle it but there is a better way of doing it with a much cleaner code organization.

const simulateError = async () => {
    throw new Error('Failure!')
}
const produceMultipleErrors = async _ => {
  const one = await simulateError()
  const two = await simulateError()
  const three = await simulateError()
}

produceMultipleErrors()
    .catch(
        (error) => {
            console.log(error)
        });

The above code will allow us to compile errors into a single stack and produce it as all the calls are asynchronously executed. This is a great error handling technique that comes in handy when writing bigger applications. Error handling is an important part of any application which a lot of developers overlook.

Recently, I did come up with various situations when building up my own social media, but this allowed me to solve the hiccups in my code in a much cleaner and more precise way. I think the use of asynchronous functions in your code helps you in making your application mode dynamic and robust, therefore promising that your application would eventually survive the hardened road bumps of the development stage into the production stage.

Suggestions: Starting Live Coding Sessions: Weekly

Muhammad — Mon, 11 Nov 2019 13:31:32 +0000

I am thinking on setting up the following;

Twitch Stream of Weekly Live Coding Sessions with Questions and Answers
Dev.to Post and Discord Channel for Instant Communication for Future Topics

Topics for Session: November

Introduction
- Our Goals
- What we are expecting in these sessions
- Your Introduction
- Possible Outcomes
Setting Up Operating System Environments
- Windows Pros and Cons
- MAC Pros and Cons
- Linux Pros and Cons
My First index.html Page

Further suggestions are always welcomed.

Google Form: Register Here

Noob Exercises

Muhammad — Sat, 09 Nov 2019 14:48:38 +0000

Just started with a place, where I am trying to give some of people, I have been teaching some assignment, thought if there are more people interested in it, would be a good share.

We are starting with Vanilla JS, CSS and HTML

I will be personally looking at all submission and will do my best to comment on the submissions to my full knowledge.

th3n00bc0d3r / Noob-Exercises

A repository for Exercises given to better your programming skills

Noob-Exercises

A repository for Exercises given to better your programming skills

Assignment 1 Language: HTML, CSS, Vanilla JS

Create a Form with two inputs. An input for username and another for a password. Check if username and password are both equal to the following;

Username: noob Password: noob

If the above username and password is correct, It should print that user has successfully logged in.

If the above case is not true, it should print that the credentials are incorrect.

Assignment 2 Extending Assignment 1

Send a HTTP Call to https://www.mocky.io/ and get a JSON Response that should be printed in the html document in an element for Authentication

How to Submit

Fork Master Branch
Clone Repo to your Computer
```
git clone your_repo_address
```
Create a New Branch
```
git checkout -b new_branch_bame
```
Create a New Folder by the assignment_XX where XX is number
Push Branch to your Forked Repo
```
git add
```
…

View on GitHub

CSS Noob Basics

Muhammad — Fri, 08 Nov 2019 00:42:50 +0000

Cascading style sheets ordinarily known as CSS is a language that illustrates how the elements of the HTML are to be presented on any media.CSS was proposed by Hakon Wium Lie on October 10, 1994. Several other style sheet languages were proposed at about the same time for the web. But the first one to be introduced was CSS1 and it was introduced in 1996.

CSS SYNTAX

A CSS-rule set consists of a selector and a declaration box. The_ selector_ points towards the element of HTML which you want to style. The declaration box consists of one or more declarations which are separated by semicolons “;”. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by flower brackets.

Just as the screenshot shows, the syntax is as simple as that. Firstly, you have to write the name of your selector like H1 then the opening curly brackets and then you have to write the property and then a colon sign and then the value you wish to give to the property followed by a semi-colon then again the closing flower braces.

CSS SELECTORS

If you want to “find” or select the HTML elements you want to style then you will have to use the CSS selectors. We can divide the CSS selectors into five categories:

Simple selectors.
Combinator selectors
Pseudo class selectors
Pseudo elements selectors
Attribute selectors

Combinator selector: It explains the relationship between the selectors. A CSS selector can contain more than one simple selectors. Between the simple selector, we can include a combinator.

Simple selectors: It selects elements on the basis of name id and class.

Pseudo-class selectors: It is used to define a special state of an element, for example, the hover effect.

Pseudo-elements selectors: It is used to style specified parts of an element for example style the first letter or line of an element.

**Attribute selectors: **style HTML elements with specific attributes.

CSS COLORS

Colors are one of the very important features whenever we talk about the formatting and giving some attractive looks to our web page. We can write colors in four different ways.

Passing the HEXAdecimal code. (also known as (HEX-CODE)
Short HEXAdecimal code. (also known as short HEX-CODE)
RGB absolute.
Keywords.

HEX-CODE: In this, we will start with the hash and then followed by a six-digit code for example:-

#000000 - Black
#FF0000 - red
#00FF00 - green
#0000FF - blue

**Short HEX-CODE: **To write the color in short hex-code the rule is almost the same as the HEX-CODE but is shorter for instance:-

#000 - black
#F00 - red
#0F0 - green
#00F - blue

RGB Absolute: **There **are three basic colors in the world all the other colors are the mixture of these three colors. So RGB red green blue, the format is as under

RGB(0,0,0) - black
RGB(255,0,0) - red
RGB(0,255,0) - green
RGB(0,0,255) - blue

CSS BACKGROUND

These background properties are used to define the background properties of web elements. In this article, we will describe two properties of CSS background.

Background color
Background image

BACKGROUND-COLOR

The background-color property allows setting the background color of an HTML element. We can set this property to a predefined color name, color value or transparent. Color name includes the name of the color and color value includes the color code like hex code etc. In the following example, we are going to give a green background color to the heading.

BACKGROUND-IMAGE

The background image property specifies an image to use as the background of an element. In CSS by default, the image is repeated so that it can cover the background. So what it means is that if you want to apply your own picture in the background of your web element then you just have to save that image in your folder and then give that address in the code as shown in the following screenshot.

CSS BORDER

This property of the CSS allows you to write your text or picture in a border and what’s more is that you can specify the style, height, and width of your border. There are different styles of borders as such as dotted, dashed, solid, double, groove, ridge, inset, outset, and hidden. The example is shown in the form of the following screenshot.

CSS Margins

The elements which are outside any defined borders are given space around them using the CSS margin property. If you want to have an equal space around your test from all the four sides then it the best property for you. You can see for yourself in the following screenshot.

CSS PADDING

The elements which are inside any defined borders are given space around them using the CSS padding property. The syntax is the same as the syntax of the CSS margin property. You give padding to all sides of your element. there are properties for all the sides of the elements which are:

Padding-top

Padding-right

Padding-left

Padding-bottom

Individual padding:

The following screenshot shows padding from right, left, top and bottom.

CSS HEIGHT/WIDTH

As the name suggests this property is used to set to height and width of an element. It does not include margin or padding it the height and width of the elements inside margin, padding, and borders. It has the following five values:

Auto: the browser calculates the height and width
Length: it defines the property in pixels or centimeters.
%: it defines the property in percentage.
Initial: sets the default value of the height or width.
Inherit: height or width will be inherited from parents.

CSS LISTS

While developing a web page we mostly have to apply bullets to our text or list of items that we have to display on the web page. For this, CSS lists are used. Now, in lists we have two types of lists one is the ordered list and the other is the unordered list. An ordered list is used when we have to apply simple bullets to our list items and an unordered list means that we have to apply numbers to our list. Both of these properties come in handy whenever we are using list items on our web page.

CSS DISPLAY

The display property defines how do you want to display your element and if you even want to apply any effect to your element or not. You can display your element inside an already displayed element, it is known as an inline display.

CSS POSITION

The position property is used to specify the positioning method for an element. There are five methods for positioning elements which are given below:

Static: an element is not positioned in a special way it is positioned according to the flow of the page.

Relative: it positions an element away from its actual position. Which can be left, right, top, or bottom relative.
Fixed: an element with the fixed position will always stay fixed to its position even if the page is scrolled down.

Sticky: In this position, the element is positioned relative at first, and when the page is scrolled it becomes fixed to its position.

Absolute: in this, the element is positioned relative to the nearest ancestor.

CSS OVERFLOW

Some times we have to write a very long text on our web page which does not fit in its container. The overflow property is used to control the content which is too big or long to fit in an area. The overflow adds a scroll bar to the container so the reader can scroll down to read the whole text. It is very simple. You just have to write overflow: scroll; This property has the following values.

Visible: the overflow is visible, which means that the property is not clipped and the text will render outside the container.

Hidden: the overflow is cut off. The rest of the content is hidden.

Scroll: a scroll bar is added both horizontally and vertically.

Auto: it is similar to scroll but a scroll is only added when needed.

CSS FLOAT

It is basically to position the whole of the element. The element and all of its contents float to the right or left.

CSS IN-LINE BLOCK

The main difference in the in-line and in-line block is that it allows setting the height and width of the element and it does not allow a line break after the element so that the elements can sit together.

[Dream] Blood Billions: A social media for Blood Donors

Muhammad — Mon, 28 Oct 2019 16:50:11 +0000

Its been 5 years, I have been attempting to create it, but failed in doing so. There have been many times, I quit but somehow it never died in me, no matter what. Recently, I was put down for this once more but something in me doesnt want to give up.

What gives me hope for this project now?
Its knowing the Amazon Cloud

Why do I think it failed?
A typical server setup, where it was not scalable.

What is blood billions?
A social media for blood donors.

Vanilla JS to Jquery: The Noobs Guide

Muhammad — Wed, 16 Oct 2019 01:14:53 +0000

I have been haunted and daunted by Javascript for almost a decade i.e. 10+ Years. These years do make a history for me in programming. Today while teaching one of my newly made friends on a quick course to programming, I stumbled upon some things that I should share and that is Javascript. Let us try to understand it with some examples.

Introduction and History

The web has been inclined towards Javascript which made its cover in 1996. A company by the name of Netscape which was famous for its speedy browsers in the mid 90s submmited it to the ECMA International to produce a standardized language which other browsers could implement. I still remember the awe at Netscape Navigator in the 90s. Today we know an entity by the name of Mozilla, a portmanteau of Mosaic and Godzilla. The first version was Mosiac Netscape 0.9, released in 1994.

Implementation of Javascript in Browser Code

Lets create a folder on your desktop by the name of noobJS and make an index.html file in it. For HTML boilerplate code, I will be using http://htmlshell.com/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Noob JS</title>
    </head>

    <body>
        <h3>Hello Noobs!</h3>
    </body>
</html>

Now if you double click the file, it will run in the browser.

Button Click Through Vanila JS

<body>
    <h3>Hello Noobs!</h3>
    <button id="myFirstButton">Click</button>

    <script>
        document.getElementById('myFirstButton').onclick = function(e) {
            console.log("Yo Noobs!");
        }
    </script>
</body>

To start Javascript, we open a "script" tag and then close it with the same tag name. Everything in between is Javascript.

"document " is a reference to the current screen which is in view. Now using the getElementById function for document means that Javascript is going to search all elements that have an ID of myFirstButton. An element can be anything from a button or a H3 or any HTML Tag which can be given an ID just by specifying id in it.

Now if you right click the browser and click inspect, we will have a console where we can print information using the console.log() function.

Now refresh on the browser and click the button.

What is JQuery?

JQuery is javascript just making it easier to write and more easier to use. It is like re-arranging the same language so that I can make it shorter, more abbreviated hence faster to implement. I would like to metaphorize it as typing Laugh Out Loud again and again but I would prefer using Lol and expect the reader to understand it.

Lets write the same click function in JQuery. We will first import JQuery using a CDN (Content Delivery Network). Head over to https://code.jquery.com/ and click on minified jQuery Core 3.4.1

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Noob JS</title>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    </head>

Add it to the Head of the index.html file

<body>
    ...
    <button id="mySecondBUtton">JQuery: Click</button>
    ...
</body>
<script>
document.getElementById('myFirstButton').onclick = function(e) {
    console.log("Yo Noobs!");
}

$('#mySecondBUtton').click((e) => {
    console.log("Not a Noob Anymore!! Heh!!");
});
</script>

Now JQuery once imported initializes with the tag of "$" and then comes the brackets which in quotes becomes a selector from the document. If with context to javascript this is getElementBy, it can either be a class with a dot or a id with a Hash. Therefore, if you compare it is way shorted just like LOLs.

Making a GET Call using Vanila JS

Lets try to fetch some data through a Get Call, so that we are now communicating in the Javascript. First we need some Mock API and we have a tool for it. Head over to https://www.mocky.io/ and scroll down to the body. We will write a simple response in JSON (Javascript Object Notation).

Now click on Generate and it will give you an endpoint for the Get Call.

Next create a new button and call it in the script tab

<body>
...
<button id="myFirstCall">Javascript: Get Data</button>
...
</body>
<script>
...
document.getElementById('myFirstCall').onclick = function(e) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };
    xhttp.open("GET", "http://www.mocky.io/v2/5da666b83400001528633045", true);
    xhttp.send();                
}
...
</script>

Javascript has an class that handles all the API in the form of an object. This object allows transfer of data between a web browser and a web sever. We have created an object as var xhttp. Next we are listening if there is a change of state which detects whether the call has been run or not. this.readyState is 4 when everything is OK, which puts in a nice check so that during the call we dont break the code and response of 200 means all is good that the webserver responded successfully with some data. this.responseText contains the required data that we want to attain.

Next we open the connection and then we send the request. Lets refresh the page and click the button.

As you can see we now have the response with all the wiggly brackets. Let convert the response into an object by parsing the JSON.

if (this.readyState == 4 && this.status == 200) {
    console.log(JSON.parse(this.responseText));            
}

As you can see by just using JSON.parse() we are able to convert the response from wiggly to usable object. To get the message you can use the following code now;

JSON.parse(this.responseText).msg

Making a Get Call using JQuery

Lets do the same thing with JQuery

<body>
...
<button id="mySecondCall">JQuery: Get Data</button>
...
</body>
<script>
...
$('#mySecondCall').click((e) => {
    $.ajax({
        type: 'GET',
        dateType: 'JSON',
        url: 'http://www.mocky.io/v2/5da66a18340000a99963304c',

        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(data);
        }
    });
});
...
</script>

Jquery has a ajax function for making communication with a web server. Ajax stands for Advanced Java and XML. You provide it with the type of call, type of response and the url and it handles the states in simple readable language.

As you can see the same code has been made minimal with the same type of response.

Conclusion

Going through Vanilla JS really makes up concept to the what is happening first hand. I do recommend everyone to attleast go through it so that a better level of understanding can be made but do acknowledge on the other hand the importance of saving time and hassle. Re-inventing the wheel does not bring much change and innovation but in todays time utilizing libraries to speed up work and save time is what one should prefer.

Complete Code ~ index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Noob JS</title>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    </head>

    <body>
        <h3>Hello Noobs!</h3>
        <button id="myFirstButton">Javascript: Click</button>
        <button id="mySecondBUtton">JQuery: Click</button>
        <hr>
        <button id="myFirstCall">Javascript: Get Data</button>
        <button id="mySecondCall">JQuery: Get Data</button>

        <script>
            document.getElementById('myFirstCall').onclick = function(e) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        console.log(JSON.parse(this.responseText));            
                    }
                };
                xhttp.open("GET", "http://www.mocky.io/v2/5da66a18340000a99963304c", true);
                xhttp.send();                
            }

            document.getElementById('myFirstButton').onclick = function(e) {
                console.log("Yo Noobs!");
            }

            $('#mySecondBUtton').click((e) => {
                console.log("Not a Noob Anymore!! Heh!!");
            });

            $('#mySecondCall').click((e) => {
                $.ajax({
                    type: 'GET',
                    dateType: 'JSON',
                    url: 'http://www.mocky.io/v2/5da66a18340000a99963304c',

                    success: function (data) {
                        console.log(data);
                    },
                    error: function (error) {
                        console.log(data);
                    }
                });
            });
        </script>
    </body>
</html>

th3n00bc0d3r / vanilajsvsjquery

A comparison of Vanilla JS to Jquery to develop and understanding

Vanila JS to Jquery: The Noobs Guide

Introduction and History

The web has been inclined towards Javascript which made its cover in 1996. A company by the name of Netscape which was famous for its speedy browsers in the mid 90s summited it to the ECMA International to produce a standardized language which other browsers could implement. I still remember the awe at Netscape Navigator in the 90s. Today we know an entity by the name of Mozilla, a portmanteau of Mosaic and Godzilla. The first version was…

View on GitHub

References

https://en.wikipedia.org/wiki/JavaScript

https://www.webdesignmuseum.org/web-design-history/mosaic-netscape-0-9-1994

https://en.wikipedia.org/wiki/XMLHttpRequest

The Noob CMS: Summary of Installation

Muhammad — Tue, 15 Oct 2019 13:11:43 +0000

This is a summary of Installation for all to continue where we left.

How to Install

Download http://www.wampserver.com/en/ or any other supported PHP 7+ and Install
Go to http://localhost/phpmyadmin/index.php and Login with default credentials
- Username: root
- Password: Blank
Once logged in, Click on Database and then Create a New Database by the name of noob_db
Now goto Import and click on Choose File and Select ./repo/db/noob_cms.sql.gz and Scroll down and click on Go
You should successfully have imported the DB
Take your Favorite Editor and open ./repo/config/config.php and make sure the configuration matches

th3n00bc0d3r / noobcms

A CMS for Beginners to Start with

Noob CMS

Features

Requirements

Apache
MySQL
PHP 7+

How to Install

Download http://www.wampserver.com/en/ or any other supported PHP 7+ and Install
Go to http://localhost/phpmyadmin/index.php and Login with default credentials
- Username: root
- Password: Blank
Once logged in, Click on Database and then Create a New Database by the name of noob_db
Now goto Import and click on Choose File and Select ./repo/db/noob_cms.sql.gz and Scroll down and click on Go
You should successfully have imported the DB
Take your Favorite Editor and open ./repo/config/config.php and make sure the configuration matches

You are all Good to go

View on GitHub

Noob Index

[Open Source]: Noob Docs - The Simple Docs

Muhammad — Sun, 13 Oct 2019 15:19:58 +0000

What is Noob Docs?

Noob Docs is a complete Git Powered Documentation System meaning it is a place where all documentations that have ever seemed make no sense become a documentation that makes sense. It is a repository for simplifying documentations and guides.

How does it work?

All tutorials and guides are hosted on a github repo. The website itself is hosted on github pages. Noob Docs uses Markdown as the standard for writing and publishing articles. The articles follow a simple folder based hierarchy, just like in the back of the old times where all were organized in folders. Anyone can can fork the repo and add changes to it which can later be merged into the repo. As soon as the changes are merged, Noob Docs automatically fetches them and makes them avaialble for the web. These tutorials are also available to read by just browsing the repo itself too.

The Directory Structure?

You can find the repo at: https://github.com/th3n00bc0d3r/noobdocs

Guides/ ## Directory for Uploading and Structuing the Guides
Test/ ## This is just a test Directory
docs/ ## The Compiled Script for the Website
.gitignore ## Ignores Folders/Files you do not want to upload
CNAME ## Used for redirecting to Domain Web Address
README.md ## This is the Home Page

Now If you look at: noobdocs/Guides/Databases/MySQL/Understanding Databases (Relational)/

noobdocs/Guides/Databases/MySQL/Understanding Databases (Relational)/

1. Guides is the Main Folder
2. Databases is a Category Folder
3. MySQL is a Sub-Category Folder
4. Understanding Databases (Relational) is the Article Folder

The Article Directory

links.md - This is the table of contents of your article
readme.md - This is the article itself

links.md

[Introduction](#introduction)
[Features](#features)
[Primary Key](#primarykey) - 1
[Not Null](#notnull)
[Auto Increment](#autoincrement)
[CRUD](#crud)
[Excercise 1](#excercise1)

When making links.md, please be sure the #link in this case 1 is all lowercase and without any spaces or the side table of contents will not work on the website

readme.md

#### Primary Key
It is a feature of a relational database, that sets to a column making sure that whatever value it contains is always unique. If no value is ever tried to insert into it, it will not allow the entry to be made.

#### Not Null
Simple, it has to have a value or do not allow any entry to enter into it. i. e. NN, Not Null, or Null

As you can see it is very simple to link headings with the table of contents of your article.

Summary of Contribution

Fork it
Create Folder in noobdocs/Guides/Category/SubCategory/ArticleName
Create your Article branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

Noob Docs Source

The frontend that is the website is made using Angular 8. Please follow the following guide to set it up locally.

git clone https://github.com/th3n00bc0d3r/noobdocs.git
cd source
npm i
ng serve

You need to have the following for it to run;

NodeJS and NPM https://nodejs.org/en/download/
Angular 2 + and Angular CLI https://angular.io/guide/setup-local

I highly recommend Visual Studio Code, you can use any editor of your choice.

The Source Structure

source/src/app

The whole application because of Angular is a module based application.

layout ## The Layout Module, think of it as a wrapper
-- frame ## This is where the content is loaded
-- header ## The Navigation of the Website
pages 
 -- article ## The Component for where your article is rendered
 -- categories ## Listing for Folders from Github
 -- home ## This is the Homepage where Readme.md is rendered
 -- wip ## Just a 404 Page not Found
services ## API List for communication

DEV Community: Muhammad

How to Build a Startup Landing Page in Velo

Let's start by making our own Velo site

Editing Your Template

Adding Your Logo to your Velo Site

Changing the Background on Your Landing Page

Adding Text to the Site

Site Icons on Velo

Adjusting the Menus on Your Site

Mobile Optimisation

Doers Vs No Doers: An Analytical Approach

How I started my IoT Company?

What I have been doing and What would you like to learn from it?

Handling Node.JS as an Asynchronous Application with Error Handling

What is a synchronous call?

What is an Execution Context?

What is a Call Stack?

Suggestions: Starting Live Coding Sessions: Weekly

Noob Exercises

th3n00bc0d3r / Noob-Exercises

A repository for Exercises given to better your programming skills

Noob-Exercises

CSS Noob Basics

[Dream] Blood Billions: A social media for Blood Donors

Vanilla JS to Jquery: The Noobs Guide

Introduction and History

Implementation of Javascript in Browser Code

Button Click Through Vanila JS

What is JQuery?

Making a GET Call using Vanila JS

Making a Get Call using JQuery

Conclusion

Complete Code ~ index.html

th3n00bc0d3r / vanilajsvsjquery

A comparison of Vanilla JS to Jquery to develop and understanding

Vanila JS to Jquery: The Noobs Guide

Introduction and History

The Noob CMS: Summary of Installation

How to Install

th3n00bc0d3r / noobcms

A CMS for Beginners to Start with

Noob CMS

Features

Requirements

How to Install

You are all Good to go

[Open Source]: Noob Docs - The Simple Docs

What is Noob Docs?

How does it work?

The Directory Structure?

The Article Directory

links.md

readme.md

Summary of Contribution

Noob Docs Source

The Source Structure

th3n00bc0d3r / noobdocs

A project to create an online doc system from github

What is Noob Docs?

How does it work?