As a full-stack javascript developer, all the frameworks available to us can sometimes feel overwhelming, and you might wonder what do I need to use and when? Well in this post today I will try breakdown my process for choosing the right tool for the job.

First let me start off by saying that you should not try and learn every new framework that comes along, it can be overwhelming especially for beginners.

Also this is just my opinion and what I prefer, some of these frameworks and tools can be replaced by something similar.


## Non content driven static websites:
 
For this type of website I always stick with basic html and css and maybe some JS if really needed. Why? Because SEO is easier, speed is important and hosting is super simple. No need to use anything else.


## Content Driven Websites

All we doing here is simple fetching and displaying of data. For this type of website usually some sort of CMS or Database is required, SEO is very important and speed as well, for this I would go with NextJS, NuxtJS, Astro or anything that has good SSR or SSG.


## Content and Logic Driven (WEB APP)

Web apps usually require an API and a Front End with some sleek UX and a SPA feel to it. For this I usually go with [AdonisJS](https://dev.to/britzdylan/adonisjs-the-full-stack-typescript-framework-32ef) since its a batteries included framework similar to Laravel or Django which is all you need. and VueJS or ReactJS via [InertiaJS](https://inertiajs.com/).


## Content and Logic Driven native apps. 

Here the Front end and Backend will always be decoupled. I usually go with NuxtJS + CapacitorJS , Capacitor Makes cross platform app development super simple. The API will be built in AdonisJS.

---

I hope this article helps and if you are enjoying my content please support me by Liking this article, Thank you.




As a full-stack javascript developer, all the frameworks available to us can sometimes feel...

Spoilt for choice, Javascript and all its options?

Dylan Britz

A few months back I was working on a Full-stack project using NodeJS with express and MongoDB, this used to be my go to framework for building full-stack applications, usually coupled with vue or react. 

As much as I enjoy working with this stack I usually get frustrated at the amount of boilerplate I need to write first and the lack of project structure which really slowed down my development speed. So I decided I need more of a structured framework and set out to scour the internet for a NodeJS framework similar to Laravel, Django or Rails.

Low and behold after hours of searching and almost giving up I stumbled upon [AdonisJS](https://adonisjs.com/adonisjs-at-a-glance) after going through their documentation I was hooked! 

Here I will go over all the features AdonisJS offers, if you are familiar with Laravel, Django or Rails and you have a strong interest in typescript you should enjoy working with AdonisJS.

## What is AdonisJS

> AdonisJS is a backend framework. It helps you create data-driven dynamic web applications. Using AdonisJS, you can handle the HTTP requests, query the database, authenticate users, upload files, send emails, and do a lot more.

- [AdonisJS at a glance](https://adonisjs.com/adonisjs-at-a-glance)

## Creating Routes is super simple


```
import Route from '@ioc:Adonis/Core/Route'

Route.get('/', () => {
  return 'Hello! This is the homepage of my new app'
})
```

This how you would query the database within a route using dynamic params.
```
import Route from '@ioc:Adonis/Core/Route'
import Database from '@ioc:Adonis/Lucid/Database'

Route.get('posts/:id', ({ params }) => {
  return Database
    .from('posts')
    .select('*')
    .where('id', params.id)
    .first()
})
```
## Controllers are your best friend for HTTP requests

Where is my laravel devs?

01 Create a controller
```
node ace make:controller Posts
```

02 Implement the required methods
```
import Database from '@ioc:Adonis/Lucid/Database'

  export default class PostsController {
    public async show({ params }) {
      return Database
        .from('posts')
        .select('*')
        .where('id', params.id)
        .first()
    }
  }
```

03 Register it with the route

```
Route.get('posts/:id', 'PostsController.show')
```


## Query database using the ORM

Interacting with databases is super simple using an offical package called Lucid (epic name btw), Lucid has a rich API to perform schema migrations, seed databases with dummy data, and construct SQL queries.

01 Create a new model

```
  node ace make:model Post
```

02 Configure columns

```
import { column, BaseModel } from '@ioc:Adonis/Lucid/Orm'

  export default class Post extends BaseModel {
    @column({ isPrimary: true })
    public id: number

    @column()
    public title: string

    @column()
    public description: string
  }
```

03 Import and use it inside the controller

```
import Post from 'App/Models/Post'

  export default class PostsController {
    public async show({ params }) {
      const post = await Post.find(1)
      return post
    }
  }
```
## Render HTML using templates

AdonisJS also ships with a homegrown template engine - "Edge". Edge is really easy to use especially if you are used to React or Vue, using your Frontend JS Framework skills can come in handy here.

01 Create a view template

```
  node ace make:view posts/index
```

02 Write the markup

```
 <div class="article">
    <h1> {{ post.title }} </h1>
    <p> {{ post.description }} </p>
  </div>
```

03 Render it inside the controller

```
import Post from 'App/Models/Post'

  export default class PostsController {
    public async show({ params, view }) {
      const post = await Post.find(1)
      return view.render('posts/index', { post })
    }
  }
```

If you prefer to stick to React or VueJS no problem, AdonisJS supports both via [InertiaJS](https://inertiajs.com/)

## Authenticate users using the auth package

Auth has never been easier than this in my entire life. It's too easy!!

01 Install and configure the auth package

```
 npm i @adonisjs/auth
```

```
node ace configure @adonisjs/auth
```

02 Login users using sessions
  

```
export default class AuthController {
    public async login({ request, auth, response }) {
      const email = request.input('email')
      const password = request.input('password')

      await auth
        .use('web') // 👈 using sessions guard
        .attempt(email, password)

      response.redirect().toRoute('dashboard')
    }
  }
```

03 Generate an API token instead

```
 export default class AuthController {
    public async login({ request, auth }) {
      const email = request.input('email')
      const password = request.input('password')

      const token = await auth
        .use('api') // 👈 using API guard
        .attempt(email, password)

      return token
    }
  }
```

## Validate input using the validator

Server Side Validation is just as easy, and Adonis provides a bunch of common rules to help along with the ability to create custom rules and error messages.

01 Create a validator
```
 node ace make:validator CreatePost
```

02 Define the validation schema
```
import { schema, rules } from '@ioc:Adonis/Core/Validator'
  import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'

  export default class CreatePostValidator {
    constructor (protected ctx: HttpContextContract) {
    }

    public schema = schema.create({
      title: schema.string(),
      description: schema.string({}, [
        rules.escape()
      ]),
    })
  }
```

03 Validate the request

```
  import CreatePost from 'App/Validators/CreatePostValidator'

  export default class PostsController {
    public async store({ request }) {
      const post = await request.validate(CreatePost)
      console.log(post.title)
      console.log(post.description)
    }
  }
```

## Compile assets using webpack encore

At some point in time, you may reach for a CSS framework and might want to sprinkle some JavaScript to make your web apps interactive.

As per the standards today, the CSS and the frontend JavaScript need to be transpiled and minified before serving it to the browser. This bundling process is not that simple, and hence you must use a bundler for it.

AdonisJS pre-configures Webpack (an industry-standard bundler) with sane defaults so that you don't have to waste time adjusting its knobs.


## Still not convinced I got you!


### Do you need Social Authentication ? No problem.

AdonisJS support social auth with their package called ally. It supports multiple providers. Google, Twitter, LinkedIn, Facebook, Discord, Spotify, and GitHub and has an extensible API to add custom social providers.

### But what about TDD ? hmmmm.....
E2E, Unit tests and HTTP tests Adonis got you covered heres what they have to say: 

> AdonisJS has out of the box support for testing, and there is no need to install any third-party packages for the same. Just run the node ace test and the magic will happen. AdonisJS uses Japa (A homegrown testing framework) for writing and executing tests.

### I18n ????

```
npm i @adonisjs/i18n
```
Helpers to perform language-sensitive formatting for dates, currencies, names, and so on.
Support for storing translations in ICU messages format.
Add your custom messages formatter and translations loader.

### But my SAAS needs to send emails!

AdonisJS comes with a mailer packaged called mail. It is built on top of nodemailer and it has support for multiple drivers. SparkPost, SES, Mailgun and Smtp, plus you can use their edge templates to create markup for your emails.

### Massive file uploads with Drive.

AdonisJS Drive is an abstraction on top of cloud storage services, such as: Amazon S3, DigitalOcean Spaces, and Google Cloud Storage.

---

If you like to get Started head over to [AdonisJS](https://docs.adonisjs.com/guides/introduction)

---

Here is a full list of additional features for you to ponder over:

- Full typescript support

- Web security

- CORS Config

- Encryption

- Signed URls

- Hashing

- REPL

- Logger

- Events

- Helpers Utilities

- Redis 

- Rate Limiting

- VS Code Extension

- Community Packages








A few months back I was working on a Full-stack project using NodeJS with express and MongoDB, this...

AdonisJS - The full stack Typescript framework

Today I got some **free tailwind CSS landing page templates** for the community. All templates come included with the assets and in 2 versions: a HTML version and a React(Nextjs) version.

Have a look and let me know which is your favourite.


- Basic App Landing Page

{% embed https://britzdylan.gumroad.com/l/Tailwind-CSS-Basic-App-Landing-Page-Template %}

- Online Education Landing Page

{% embed https://britzdylan.gumroad.com/l/Tailwind-CSS-Online-Education-Landing-Page-Template %}

- Digital Design Studio Landing Page

{% embed https://britzdylan.gumroad.com/l/DesignStudioLandingPage %}

- Fintech Start-up Landing Page

{% embed https://britzdylan.gumroad.com/l/Tailwind-CSS-Fintech-Landing-Page-Template %}

- AI Start-up Landing Page

{% embed https://britzdylan.gumroad.com/l/Tailwind-CSS-AI-Writing-Tool-Landing-Page-Template %}



Today I got some free tailwind CSS landing page templates for the community. All templates come...

5 Free tailwindcss landing page templates.

## What is HTTP

In my [previous post](https://dylanbritz.dev/what-is-the-internet-and-how-does-it-work), we talked about the internet and how it works. In all the complexity of the internet as a web developer there is something very important you need to know and that is HTTP.

## So what is HTTP

The Hypertext Transfer Protocol or **HTTP** is a [protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol). It is the foundation we use to fetch data over the internet (fancy explanation for communication between two devices). So servers and clients exchange messages between each other instead of a single open stream of data like some people might believe. Client messages are known as requests and Server messages are known as response.

## How does HTTP work

1. A client (a browser) sends an **HTTP request** to the web
2. A web server receives the request
3. The server runs an application to process the request
4. The server returns an **HTTP response** (output) to the browser
5. The client (the browser) receives the response

As you can see above this process happens every single time your client(browser) request anything from the server. All files and data are fetched one at a time, one after the other and not asynchronously.

A typical HTTP request / response circle might look like this:

1. The browser requests an HTML page. The server returns an HTML file.
2. The browser requests a style sheet. The server returns a CSS file.
3. The browser requests an JPG image. The server returns a JPG file.
4. The browser requests JavaScript code. The server returns a JS file
5. The browser requests data. The server returns data (in XML or JSON).

Each HTTP request made across the Internet carries with it a series of encoded data that carries different types of information. A typical HTTP request contains:

1. HTTP version type
2. a URL
3. an HTTP method
4. HTTP request headers
5. Optional HTTP body.

### What’s an HTTP method?

An HTTP method, also known as an HTTP verb, specifies the action that the HTTP request wants the requested server to take. The HTTP methods 'GET' and 'POST' are two of the most frequent; a 'GET' request expects information back in return (generally in the form of a website), whereas a 'POST' request normally implies that the client is providing information to the web server (such as form information, e.g. a submitted username and password).

### What are HTTP request headers?

Every HTTP request includes HTTP headers, which comprise text information saved in key-value pairs. These headers convey important information, such as the client's browser and the material being requested.

### What’s in an HTTP request body?

An HTTP response is the response that a web client receives from an Internet server in response to an HTTP request. These responses convey useful information based on what was requested in the HTTP request. A typical HTTP response contains:

1. an HTTP status code
2. HTTP response headers
3. optional HTTP body

### What’s an HTTP status code?

HTTP status codes are 3-digit codes most often used to indicate whether an HTTP request has been successfully completed. Status codes are broken into the following 5 blocks:

1. 1xx Informational
2. 2xx Success
3. 3xx Redirection
4. 4xx Client Error
5. 5xx Server Error

### What are HTTP response headers?

An HTTP response, like an HTTP request, includes headers that convey important information such as the language and format of the data in the response body.

What’s in an HTTP response body?

Successful HTTP responses to 'GET' requests typically include a body containing the requested data. This is HTML data in most web requests, which a web browser will translate into a web page.


What is HTTP   In my previous post, we talked about the internet and how it works. In all...

What is HTTP & How Does It Work?

Contrary to popular belief the internet is not some magical wireless connection in the clouds. No its actually a bit more backwards. The entire internet that we use everyday is just a bunch of cables that run under the ocean and connects every continent together. [Check this out!](https://www.submarinecablemap.com/)

Well the above is just what we call the infrastructure. We still can’t do anything with those cables ourselves. Instead there are specialized companies that are responsible for taking those cables that enter at the coastlines and spread them throughout the country. Those new smaller cables end up at a different type of company we call an ISP or Internet Service Provider. 

This ISP then either through fixed connection or wireless gives the public access to the internet. So they do their magic and everyone can now connect the their network. This is like one big LAN party (remember those?) 

Now that you are connected you probably want to visit some sort of webpage. Well to visit a specific webpage you need to now its address (IP to be specific). An IP address is a unique number that identifies your spot on the internet, every single computer that connects needs an IP address. The IP address also serves as a return address, because you don’t actually visit a site you just request what data you want from that site and then that site sends the requested data back to your IP address and your browser then shows you what you requested. 

This is the basics of how the internet works. Its like and instant mail service basically. It gets way more complex, when we bring servers, security, protocols and DNS into the picture but we will discuss some of those topics in more detail in following articles.

## Clients vs Servers

One thing we need to distinguish in this article is the difference between clients and servers. Above we mentioned that everyone that connects to the internet needs an IP address and that if you want to connect to a website you need its IP address as well. Well this might lead to the confusion that if I got your personal IP address I can just connect to your computer from anywhere in the world as long as it is connected to the internet. Well NO you can’t.

This is where servers and clients come in.

### Clients:

A client can be a device or a machine. A client program runs on the local machine, requesting service from the server. A client program is a finite program means that the service is started by the user and terminates when the service is completed. For instance, a web browser. A client device is a machine that the end-user uses to access the web. Examples of clients are smartphones, desktops, laptops, etc. Clients are categorized into thin client, fat client, and hybrid client. **Thin client**
 is lightweight and relies on the resources of the host computer. **A fat client** (or thick client) lightly relies on the server and provides rich functionality. **A hybrid client** is the combination of the characteristics of a thin client and a thick client.

Source: [https://www.javatpoint.com/client-vs-server](https://www.javatpoint.com/client-vs-server)

### Servers

A server is like a computer program, which is used to provide functionality to other programs. It can be any computerized process called by a client to distribute the work and share the resources.

It receives and responds to requests made over a network. Server receives the request from the client for a web document, and it sends the requested information to the client's computer.

A device can be both a client and a server at the same time, as an individual system has the ability to provide resources and use them from another system in one go. In a single machine, there can be multiple servers.

Server has high efficiency and performance. Simultaneous multiple-user login and request processing are supported in servers. Some of the complex tasks like fulfilling client requests, storing and processing large datasets, data analysis are common for servers.

There can be various types of servers: web server, application server, database server, cloud server, file server, proxy server, mail server, and many more.

The basic difference between the client and server is that client relies on the services of the server, whereas the server authorizes the client's requests and facilitates them with the requested services. Servers can store and analyse the large data sets, whereas clients are not suited for such tasks.

Most of the servers are never turned off; they are always on. Switching off servers may be disastrous for client systems that continuously request the services. Whereas the client systems can be switch off without any fear.

Source: [https://www.javatpoint.com/client-vs-server](https://www.javatpoint.com/client-vs-server)

Contrary to popular belief the internet is not some magical wireless connection in the clouds. No its...

What is the internet & how does it work?

The best way to enhance your skills or land a great job is to build awesome projects, now some projects do hold more power over others and will definitely teach you more than some others will. So my advice is to skip the boring to-do app and build these 4 listed projects to help take your developer skills to the next level.

## Full Stack CRUD app with AUTH

This first projects covers almost all the scenarios you will run into most often in your developer career. Here is what you will build: This project will need a backend and front-end , if you are a JavaScript developer I recommend NodeJS and the EJS templating engine. This app should use all common [CRUD](https://developer.mozilla.org/en-US/docs/Glossary/CRUD) operations throughout the application, for a Database stick with [MongoDB](https://www.mongodb.com/). 

The app will be a basic blogging platform, where users can signup with google and manage their account details (info, display picture etc) Each user that signs up gets a blog. They should be able to create, update and delete their OWN articles. View any other article created by any other user. The app should feature a home page that displays the most recent articles, who the author is and link to that article. Add the ability to delete your account completely as well. The design of the UI is not important here so feel free to use any template you want.

Real world example:

[Medium - Where good ideas find you.](https://medium.com)

## SPA using a public API & AUTH with Firebase.

Here we will build a [Single Page Application](https://developer.mozilla.org/en-US/docs/Glossary/SPA) with any front-end framework of your choice, React, VueJS, Angular. it doesn't matter. What’s important here is design and SPA fundamentals. Try and take the time to design the UI yourself and build it with a CSS framework such as [Tailwind CSS](https://tailwindcss.com/). 

What you will build is a movie database lookup. The app will feature a real time search for any movie, give all the information about the movie and the ability to add the movie to your favourites. The authentication should be kept as simple as possible.  The one rule is you are not allowed to store any movie information besides the movies ID’s on [Firebase](https://firebase.google.com/).

Real World Example: 

[The Movie Database (TMDB)](https://www.themoviedb.org/)

## Serverless blog with a headless CMS.

[Serverless applications](https://www.redhat.com/en/topics/cloud-native-apps/what-is-serverless#:~:text=Serverless%20apps%20are%20deployed%20in,components%20to%20run%20your%20apps.) are becoming more and more popular, and its important that you understand how they work. I highly recommend you do this with either NextJS or NuxtJS. 

What you will build is a simple blog for a single user that pulls all the articles from an external CMS such as Strapi, Contentful or Butter CMS. Its import that the blog must be SSR and be rendered statically to the client. Try and get a [lighthouse](https://developers.google.com/web/tools/lighthouse) score of at least 90!

Real World Example:

[Dylan Britz](https://dylanbritz.dev/)

# Live service chat application with web sockets.

[Web sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) are very powerful and can be if used properly. This application is probably the hardest but the most fun. Just build a simple chat server where people can sign up, join or create new chat rooms to send secure messages to each other. Not much more to say about this.

Real world Example:

[Discord | Your Place to Talk and Hang Out](https://discord.com/)

The best way to enhance your skills or land a great job is to build awesome projects, now some...

4 Projects every self taught web developer needs to build.

In my journey to become a self-taught web developer, I have always wondered what I missed out on by not doing a CS degree? After some conversations with my fellow co-workers and other CS students, I realised what it was I missed out on. Language Agnostic programming fundamentals, what that means is to learn and understand the fundamentals of Computer Science(programming languages) out of the context of a specific language like JavaScript, C#, C++, Python etc.

Why learn like this? mistakes a lot of self-taught developers make is to learn a very specific set of skills, like HTML, CSS and JavaScript to solve a very specific set of problems like web development. While there is nothing wrong with this, it does pose some problems in the future. What if you need to switch your language? Will you be able to adapt quickly despite never having studied the new programming language? So to solve this it is very important to understand and learn these fundamentals.

So I am going to try my best to come up with a simple and quick overview of the programming fundamentals that you can refer to anytime.

## What is programming

The technical definition of programming is **a few instructions used to illustrate the basic output rules of a programming language**. A programming language is a set of keywords, symbols, identifiers, and rules by which programmers can communicate instructions to the computer. They follow a set of rules called syntax. Each programming language follows specific syntax rules, although some share the same rules.

## How do we write programs

So to give a computer a set of instructions we need to write it down somewhere, We can’t just use plain alphanumeric words either. So what we need is something called an IDE [(Integrated Development Environment](https://en.wikipedia.org/wiki/Integrated_development_environment)), an IDE gives us tools to write, debug, and convert code into machine code so the computer can understand it. Now each language has its own rules or syntax and if these rules are broken it will result in an error, similar to learning a spoken language like French or English, we need to follow the rules of the language for other people to understand us. There are some IDE’s that are built for specific languages, there are some that can be used with any language and offer built-in support or extensions to help you write code.

## Variables

Variables are the building blocks of programs since every single program ever will use variables it is important to understand how they work. A simple explanation is to think of variables as a box, this box can hold anything you want it to hold, but it can’t mix different things each box must hold only one unique thing. But what if I have 20 boxes how will I know what is inside each box? What we can do is give each box a unique identifier (name) so we can refer back to that box.

So how does this look practically?

Well, let's go ahead and create a new variable.

```cpp
myName = 'Dylan'
```

So how does this look practically? Well, let's go ahead and create a new variable. myName = 'Dylan' So as you can see we now have a new variable. The value of This variable is ‘Dylan’ but we can’t refer to this box i.e. variable by its value, so we gave it a name i.e. a unique identifier. So if someone says they want the value that's inside the ‘myName’ box I can quickly find this box open it and see the value is ‘Dylan’.

So how does a computer do this? Well a computer has memory and this memory has spaces to store information, each space has a unique number predefined when the hardware was built. So when you declare a new variable the computer assigns this variable to a specific point in memory now it’s not efficient for us to memorise our computers memory locations so we assign it a name that we (humans) can refer to and the computer can use to know where to look for the value.

## What type of information can variables store?

The first types we will learn about is primitive types, note that each programming language has its own unique primitive data types and some language share similar ones, here are common ones found in most languages:

- String
    - In any computer programming language, a string is a sequence of [characters](https://developer.mozilla.org/en-US/docs/Glossary/Character)
     used to represent text.
    - Example: “This is a String”
- Number/Integers
    - **Number** is a numeric data type that represents a non-decimal number like 1 or 432 or 9584939
- Floating-point-numbers
    - A **positive or negative whole number with a decimal point**
    . For example, 5.5, 0.25, and -103.342 are all floating point numbers
- Booleans
    - a **Boolean** is a logical data type that can have only the values `true` or `false`
- undefined
    - Undefined are automatically assigned to a variable if you declare a variable without assigning it a value.

## Conditional Statements

Let’s say you want to write a program to do something only if a certain condition is met, how would you do that?

Well with conditional statements of course.

```cpp
if myName equals 'Dylan' then doSomething()
```

The above example is a conditional statement, we want to doSomething but for that to happen variable myName must equal ‘Dylan’.

## So what are the types on conditional statements and how do we use them ?

Conditional statements are useful to create the control flow in your application through the use of conditionals. Conditional statements can get quite complex so here I created a visual representation for you to get an idea about how and why I might use it.

![programming work flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p0uz96xdsjnpe4rrz1e.png)

In the above example, we created a function that checks if Variable A equals a certain colour and then handle it depending on whether it passes our checks. We can pass almost anything into the conditional weathers is a statement, a function or a comparison as long as it equates to true or false.

- If then Statements
    - The if statements common across many programming languages. Although the syntax varies from language to language, the basic structure (in [pseudocode](https://en.wikipedia.org/wiki/Pseudocode) form) looks like this:
    - If the value passes it will execute the code inside the statement.
    - If it fails it will skip over the code and continue on with the rest of the program
    
    ```bash
    If stock=0 Then
        message= order new stock
    End If
    ```
    
- Else If
    - Else if are similar to if statements with the exception that it has two way execution. Meaning they handle the false exception when testing a condition.
    
    ```bash
    If stock=0 Then
        message= order new stock
    Else
    		message= stock is available
    End If
    ```
    
- Case and Switch
    - ◦ Let's say we have a list of cases we want to check and each case has its own statement to execute, now writing a long nested If-Else-If statement will work it's not efficient and it's not maintainable. This is why we would use Case and Switch statements.
    - Switch statements take action according to a list of constant matches, if it doesn't match it has a fall-back or default action to take instead in some cases the default action can be omitted.
    - As you can see we pass a variable to the case statement if it matches a, b or c then it will execute the corresponding code, if it doesn't match at all it will revert to the default action.
    
    ```bash
    case someVariable 
    	'a' : handleA()
    	'b' : handleB()
    	'c' : handleC()
    	default handleDefault()
    ```
    

## Arrays

Think of arrays as a big rack to stack boxes, remember the box analogy for variables? An array can hold multiple or no boxes at a time and each box can contain a variable, but there are some rules to this rack.

1. Each box can’t have a have a unique identifier.
2. The rack has to be filled from top to bottom
3. there are unlimited space on this rack (or as much as your computer’s memory allows it to have)

If each box has no name or identifier, how can we know what each box has or refer to a specific box? Well, it uses a number index so remember the rule you have to fill each array from top to bottom, that is because each space in this array has an index number to identify the spot of the box. So, for example, I can say get me box 25 and all we do is go straight to box twenty-five to retrieve its value.

Here is the catch, arrays start from an index of 0 not 1, so position 1 has an index of 0 and position 2 has an index of 1 and so forth. This is called ***[zero-based indexing](https://en.wikipedia.org/wiki/Zero-based_numbering)***

Examples: 

So here we have an array of numbers from 1 to 8. How do we find number 5? we have to go to box 4.

```jsx
myArray = [1,2,3,4,5,6,7,8];
```

How do we do that? we use Zero Based indexing.

```jsx
//get number 5
myArray[4]
```

Using this method we use brackets and pass a number to get the index of passed *n* value.

## Types of arrays

- One-Dimension Arrays
    - A one-dimensional array (or single dimension array) is a type of linear array.
    
    ```jsx
    myArray = [1,2,3,4,5,6,7,8];
    ```
    
- Multidimensional arrays
    - Think of these as non-linear or nested arrays, arrays within arrays.
    - There is no limit to how deep arrays can be nested
    
    ```jsx
    myArray = [[1,2,3],[4,5,6]];
    
    //similary we access these arrays exaclty to how we access linear arrays
    myArray[1][0] 
    // equals 4
    ```
    

### **Element identifier and addressing formulas**

So in the above example, we access arrays using the ***[zero-based indexing](https://en.wikipedia.org/wiki/Zero-based_numbering)***
 although that is not the only way to access arrays:

- **0 (*[zero-based indexing](https://en.wikipedia.org/wiki/Zero-based_numbering)*)**The first element of the array is indexed by subscript of 0. ****
- **(*one-based indexing*)**The first element of the array is indexed by subscript of 1.
- **(*n-based indexing*)**The base index of an array can be freely chosen. Usually programming languages allowing *n-based indexing* also allow negative index values and other [scalar](https://en.wikipedia.org/wiki/Scalar_(computing)) data types like [enumerations](https://en.wikipedia.org/wiki/Enumerated_type), or [characters](https://en.wikipedia.org/wiki/Character_(computing)) may be used as an array index.

Using zero based indexing is the design choice of many influential programming languages, including [C](https://en.wikipedia.org/wiki/C_(programming_language)), [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) and [Lisp](https://en.wikipedia.org/wiki/Lisp_(programming_language)). This leads to simpler implementation where the subscript refers to an offset from the starting position of an array, so the first element has an offset of zero.

## Loops

Loops are what the name implies, a task that gets repeated several times or until a condition is met.

For example:

Say I want to print the number 1 to 1000, now writing 1000 lines of code is inefficient, so we use a loop instead to save time.

## Type of loops

- For Loop
    - Is a loop that runs a fixed amount of times.
    - Here is a basic [pseudocode](https://en.wikipedia.org/wiki/Pseudocode) for loop
    
    ```jsx
    from 1 to 20 
    	print('hello world')
    end
    ```
    
- While Loop
    - Is repeated as long as the passed condition is true
    - Here is a basic [pseudocode](https://en.wikipedia.org/wiki/Pseudocode) for a while loop, so if myName changes the loop will stop executing
    
    ```jsx
    while myName= 'Dylan'
    	Print('Dylan is his name');
    end
    ```
    
- do while loop
    - is repeated until a passed condition is false
    - Here is a basic [pseudocode](https://en.wikipedia.org/wiki/Pseudocode) for a do while loop, note even if myName is never equal to ‘Dylan’ it will run at least once.
    
    ```jsx
    do
    	Print('Dylan is his name')
    while myName= 'Dylan'
    
    ```
    

Loops can serve many functions, besides just repeating tasks, loops are the main function we use to manipulate, create or do something with arrays

For Example:

Say I have a array of numbers like so:

```jsx
myArray = [1,2,3]
```

Now I want to add 2 to each number, ok we can do this.

```jsx
myArray[0] = myArray[0] + 2
myArray[1] = myArray[1] + 2
```

Now see the problem here? what if we have an array with the length of 10 000? Well this is where loops come in.

```jsx
//lets loop over each item in the array and add 2 in pseudocode
myArray.foreach(item) 
	item = item + 2
end
	
```

In the above example, we use a for each loop to go over each item in the array and change that item to its current value + 2. Note the above example is very basic and each programming language will have its own method of handling loops with arrays.

## Errors

So errors are a part of any programmers life and you can expect a lot of them once you start writing code. Now there is no need to be scared of errors and don’t worry the chance of you breaking stuff is very unlikely.

## Types of errors

- Syntax Errors
    - This is when there are parts of the program where you fail to follow the rules of the written language.
    - This one is the easiest to solve because our IDE’s usually point these out to us.
- Runtime Errors
    - These errors only happen once you run the code
    - This is caused by a part of your code not being able to be computed
    - A most common Runtime error beginners run into is infinite loops
- Logic Errors
    - Logic errors happen when our program runs smoothly but the expected result is not what we wanted.
    - These are often the hardest errors to try and solve and something beginners can really get stuck with.
    - Strategy to overcome these is incremental programming, this means to often test your program and not once all the code is written to ensure we debug as we go, not once we done this will help you identify logical errors early on.

## Functions

Functions are organized blocks of code that we can reuse in our program without having to rewrite the same thing over and over again. This is called modularity. Depending on the programming language, a function may be called a subroutine, a procedure, a routine, a method, or a subprogram. Using functions can allow you to be able to keep your code clean and organized, making it easy to read, and allowing the debugging process to be easier.

A function can manipulate an existing variable or value or create a new value and return that value.

Look at an example, Say we want to get the number of characters in someone's name..

We can do something like this:

```jsx
myName = 'dylan'

newArray = myName.split() //we assume split is a built in function to split a strings characters into and array.
//newArray = ['d','y','l','a','n]

//get the length of the array
charLength = newArray.length() //we assume .length() is a built in function to get the length of an array
//result = 5
```

Ok so this works but now image if I have to retype the above code 29 times, that's inefficient and can cause debugging headaches. Instead let’s create a function.

```jsx
function getStringLength(value)
	array = value.split()
	return array.length()
end

charLength = getStringLength('Dylan')
//result = 5
```

o in the above example, we create a reusable block of code using the function keyword, passed it a value, used that value to create an array to get the desired result. Then used the return keyword to give us back the length of the array. Now we can call this function whenever we feel like and wherever we feel like without having to rewrite the logic.

*Side note: each programming language has its own rules for writing functions the above code is just an example and not language-specific.*

## Objects/Dictionaries

Objects or **[Object-oriented programming** (**OOP**)](https://en.wikipedia.org/wiki/Object-oriented_programming) is probably the most powerful tool programmers have. Beginners can sometimes struggle to get their head around OOP concepts but once it clicks it can make you a very powerful programmer.

Objects can contain data and code, data in the form of key and value properties and code in the form of functions that sit within the object known as methods.

We won’t dive too deep into object methods but let’s get a good look at how the key and value properties work of objects.

Example:

```jsx
myObject: {
	name: 'Dylan',
	surname: 'Britz',
	favourite_foods: ['meat','fish','vegetables']
}
```

So above we have a simple object, there are a few things I want you to note, the key properties: name, surname and favourite_foods and the corresponding values. So think of this object similar to the array rack analogy, except this rack has no shelves only a frame, to add something to this rack we need to add a shelf(key) with a unique name so we can refer to it later on and add a value that sits on the shelf. Now, these values can be any primitive data type, even a function(refer to as a method).

## Conclusion

Thanks for taking the time to read, I hope this broad overview helped you getting a fundamental understanding of the building blocks of programming, and if you want to receive more articles like this make sure to subscribe.

In my journey to become a self-taught web developer, I have always wondered what I missed out on by...

Intro to programming fundamentals

When it comes to comparing Javascript variables it is very easy, a simple statement like this will do the job:

```jsx
if(a === b) { doSomething() }
```

What if you want to compare to objects? Why not just do this:

```jsx
if (myObject === yourObject) { doSomething() }
```

Well, that will not work because the if statement will always return false even if the objects are exactly the same! Why is this?

## Here is why: Primitive Types vs Reference Types.

In Javascript, we have two types of memory allocation. I won't go into details you can read more about it [here](https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/). I will stick to the simple answer:

**The primitive types**, keeping it simple, are number, string, boolean, undefined and null. A full list can be found [here](https://developer.mozilla.org/en-US/docs/Glossary/Primitive). When you create a primitive type, the value and the reference is stored in the memory. So whenever you compare two primitive types the actual value gets compared.

**Reference types**, to keep it simple, are Objects, Functions and Arrays. Collectively known as objects. More information can be found [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).  When you create a reference type, the value and the reference is stored in the memory. However, when you compare two reference types the actual value **does not** get compared, only the reference to the memory location.

So back to our question: how do you compare the values of two JavaScript objects?

So now if you do the following:

```jsx
const myObject = { name : 'Dylan' }
const yourObject = { name: 'Dylan' }

if(myObject === yourObject) { doSomethig() }
//always returns false
```

This happens because the variables are only pointing to the memory location, and they are stored in two different locations. **Meaning they are not the same!**

How do we work around this?

The answer might surprise you!

```jsx
const myObject = { name : 'Dylan' }
const yourObject = { name: 'Dylan' }

if(JSON.stringify(myObject) === JSON.stringify(yourObject)) { doSomethig() }
//always returns true

//OR

const myObject = { name : 'Dylan' }
const yourObject = { name: 'Mike' }

if(JSON.stringify(myObject) === JSON.stringify(yourObject)) { doSomethig() }
//always returns false
```

See what we did there? We simply turned both objects into strings, meaning primitive types, so now the equality operator will work as intended.

Viola!

## Side Note:

```jsx
const myObject = { name : 'Dylan' }
const yourObject = myObject;
yourobject.name = "Mike";

if(myObject === yourObject) { doSomethig() }
//always returns true
```

The above piece of code will always return true when comparing the two objects, because directly assigning two object to one another will point both of them to the same memory location! Thus myObject name value will also change.

When it comes to comparing Javascript variables it is very easy, a simple statement like this will do...

How to compare the values of two JavaScript objects?

Every business needs some sort of business plan, often for investors or just for your team. But sometimes your idea is just that an idea, to create a 40-page document just from an idea is well not very fun. Instead, we opt for something simpler. A lean canvas.

# What is a lean canvas?

Lean Canvas is a 1-page business plan template created by Ash Maurya that helps you deconstruct your idea into its key assumptions. It is adapted from Alex Osterwalder's Business Model Canvas and optimized for Lean Startups. It replaces elaborate business plans with a single page business model.

# How do you create a lean canvas?

There are many templates you can find online to create one by just googling it, instead, I went ahead and created a template on [Notion](https://notion.io/). You can get it [here](https://mailchi.mp/f91fe4033a06/lean-canvas). The template will have all the details you need to get your next great idea down!

[Download the template here](https://mailchi.mp/f91fe4033a06/lean-canvas)

# Netflix Lean Canvas Example:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inriky9jm1j5mqqdh0yu.png)

Every business needs some sort of business plan, often for investors or just for your team. But somet...

How to create a Lean Canvas for your next startup Idea

# 4 Free javascript eBooks you need!

Check out these four free javascript eBooks you need to level up your JS game. They are all free and go super in-depth. They are great for beginners as well as more advanced developers.

## 1. Javascript.info

From the basics to advanced topics with simple, but detailed explanations. A complete tutorial on everything javascript. This eBook is split into three parts, the first one covers the core language and everything that comes with it. The second part dives into the Browser and interacting with interfaces using JS. The last part is a List of extra topics that assume you've covered the first two parts of the tutorial.

[javascript.info](https://javascript.info/)

## 2. You Don't know javascript

This is is probably my favourite and the most fun to read, the author did a great job at creating this eBook. YDKJS is a series of books diving deep into the core mechanisms of the JavaScript language. This is a must for every developer! It reads easy and makes JS easier to learn and understand! Highly recommend.

[YDKJS](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed)

## 3. Javascript questions

From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview! This covers some questions you can expect in a javascript interview, it is available in 19 different languages. And there are over 100 different questions with answers 🤯

[javascript-questions](https://github.com/lydiahallie/javascript-questions)

## 4.The definitive Node.js handbook

This handbook is a getting started guide to Node.js, the server-side JavaScript runtime environment. It covers everything vanilla in node.js as well as popular libraries used today. If you're looking to get into the backend with javascript I highly recommend keeping a shortcut to this handbook. it's very handy.

[The definitive Node.js handbook](https://www.freecodecamp.org/news/the-definitive-node-js-handbook-6912378afc6e/)

Thanks for checking this out if you find any of the above resources helpful please consider supporting the original authors.

4 Free javascript eBooks you need!   Check out these four free javascript eBooks you need to...