DEV Community: oreoyona

Let's finally build our app

oreoyona — Sun, 05 Mar 2023 14:55:53 +0000

Our job today will be to set up the layout of the ultimate clinical app we decided to build some days ago. We will write the helper functions and some CSS rules.

Last week, we wrote a lot of angular files and the time has come for us to focus on the UI.

At the end of this article, we should have an app looking like the image below

Today's article will be very technical. Just grab your computer and code. You can find the entire code on GitHub.

Open your home.component.html

The screen of our application needs to take up all the available space and be divided into two parts:

a part showing principally the operations(for example the numbers, the current mode selected by the user).
another part where to place our buttons.

Let's then write our grid layouts.

We will use the first as the container, representing our app's screen.

The two others will serve respectively as the container of the operation's screen and the container of the buttons' screen.

<GridLayout rows="300, *" columns="*" class="container" height 
="100%" backgroundColor="#303030"> 

    <GridLayout  row="0" col="0" backgroundColor="#303030" columns="20,*" rows="40, *,*,*,*"> 
    </GridLayout>


 <GridLayout row="1" col="0" backgroundColor="#303030" columns="*,10,*,10,*,10,*" rows="*,*,*,*,*">

    </GridLayout>

</GridLayout>

Time to add the buttons and the screens.

<GridLayout columns="*" rows="300, *" height="100%" *ngIf="currentMode != modes.fg && currentMode != modes.apgar">

    <GridLayout row="0" col="0" backgroundColor={{colors.gray}} columns="20,*" rows="40, *,*,*,*"
        *ngIf="currentMode == modes.pam">
        <TextView editable="false" col="1" row="1" class="uxText" color="aquamarine">
            __{{currentMode}}__
        </TextView>
        <FlexBoxLayout col="1" , row="2">
            <TextView editable="false" col="0" row="1" *ngIf="pamArray[0]" class="uxText">
                PAS: {{pamArray[0]}}
            </TextView>
            <TextView editable="false" col="0" row="2" *ngIf="pamArray[1]" class="uxText">
                PAD: {{pamArray[1]}}
            </TextView>

            <TextView editable="false" col="0" row="2" *ngIf="!pamArray[0] && !reponse" class="uxText">
                Valeur systole
            </TextView>
            <TextView editable="false" col="0" row="2" *ngIf="pamArray[0] && !pamArray[1]" class="uxText">
                Valeur diastole
            </TextView>
        </FlexBoxLayout>


        <TextView editable="false" col="1" row="3" class="operation" fontSize="32rem">
            {{screen}}
        </TextView>

        <TextView editable="false" col="1" row="4" class="operation">
            {{reponse}}
        </TextView>

    </GridLayout>
<GridLayout row="0" col="0" backgroundColor={{colors.gray}} columns="20,*" rows="40, *,*,*,*"
        *ngIf="currentMode == modes.imc">

        <TextView editable="false" col="1" row="1" class="uxText" color="aquamarine">
            __{{currentMode}}__
        </TextView>

        <TextView editable="false" col="1" row="3" class="operation">
            {{screen}}
        </TextView>


        <FlexBoxLayout col="1" , row="2">
            <TextView editable="false" col="0" row="1" class="active" *ngIf="imcArray[0]">
                Taille: {{imcArray[0]}}
            </TextView>
            <TextView editable="false" col="0" row="2" class="active" *ngIf="imcArray[1]">
                Poids: {{imcArray[1]}}
            </TextView>

            <TextView editable="false" col="0" row="2" *ngIf="!imcArray[0] && !reponse" class="uxText">
                Valeur taille(cm)
            </TextView>
            <TextView editable="false" col="0" row="2" *ngIf="imcArray[0] && !imcArray[1]" class="uxText">
                Valeur poids(kg)
            </TextView>
        </FlexBoxLayout>


        <TextView editable="false" col="1" row="4" class="operation ">
            {{reponse}}
        </TextView>

    </GridLayout>




    <GridLayout row="1" col="0" backgroundColor="#303030" columns="*,10,*,10,*,10,*" rows="*,*,*,*,*" paddingBottom="25"
        borderTopLeftRadius="20" borderTopRightRadius="20">
        <Button row="0" col="0" text={{currentMode}}  #ac fontSize="16px" disabled></Button>
        <Button row="0" col="2" text="AC" fontSize="20" #back (tap)="bck()"></Button>
        <Button row="0" col="4" text=">" class="nextBtn" #pour (tap)="next()" backgroundColor="#001A11" color="aquamarine"
            fontSize="32"></Button>
        <Button row="0" col="6" text={{modes.pam}} class="op" #div (tap)="changeMode(div)"></Button>

        <Button row="1" col="0" text="7" class="btn" #sept (tap)="getAnim(sept)"></Button>
        <Button row="1" col="2" text="8" class="btn" #huit (tap)="getAnim(huit)"></Button>
        <Button row="1" col="4" text="9" class="btn" #neuf (tap)="getAnim(neuf)"></Button>
        <Button row="1" col="6" text="{{modes.apgar}}" class="op" #fois [nsRouterLink]="['/apgar']"></Button>


        <Button row="2" col="0" text="4" class="btn" #quatre (tap)="getAnim(quatre)"></Button>
        <Button row="2" col="2" text="5" class="btn" #cinq (tap)="getAnim(cinq)"></Button>
        <Button row="2" col="4" text="6" class="btn" #six (tap)="getAnim(six)"></Button>
        <Button row="2" col="6" text={{modes.imc}} class="op" #mois (tap)="changeMode(mois)"></Button>


        <Button row="3" col="0" text="1" class="btn" #un (tap)="getAnim(un)"></Button>
        <Button row="3" col="2" text="2" class="btn" #deux (tap)="getAnim(deux)"></Button>
        <Button row="3" col="4" text="3" class="btn" #trois (tap)="getAnim(trois)"></Button>


        <Button row="4" col="0" text="C" class="btn" #ext (tap)="reset()"></Button>
        <Button row="4" col="2" text="0" class="btn" #zero (tap)="getAnim(zero)"></Button>
        <Button row="4" col="4" text="." class="btn" #point (tap)="getAnim(point)" value="."></Button>
        <Button row="4" col="6" text="=" class="opBtm" #egal (tap)="next()"></Button>
    </GridLayout>
</GridLayout>

We need to update our component

import { Component, OnInit } from '@angular/core'
import { Button, Color } from '@nativescript/core';
import { Page } from '@nativescript/core/ui/page';
import { checkState, clear, compute, back, scaleAnim} from '../common/functions'
@Component({
  selector: 'Home',
  templateUrl: './home.component.html',
  styleUrls: ["./home.component.css"],
})
export class HomeComponent implements OnInit {
  //members of the class
  screen = "";
  reponse = "";
  pam = true;
  apgar = false;
  fg = false;
  imc = false;

  modes = {
    imc: "IMC",
    fg: "FG",
    apgar: "AP",
    pam: "PAM"
  }
  currentMode = this.modes.pam;
  images = {
    back: "~/assets/back.svg"
  }

  pamArray = [];
  imcArray = [];
  colors = {
    gray: new Color("#383838")
  }

  //end Members of the class definition

  /************************************* Methods ******************************************/


  /**
   * getAnim - saves the buttons typed to the screen
   * @param btn : Button clicked by the user
   */
  getAnim = (btn: Button) => {
    scaleAnim(btn);
    if(checkState(this.reponse)){
      this.reponse = clear(this.reponse);
      this.pamArray = [];
      this.imcArray = [];
    }
    this.screen += btn.text;
  }
  /**
   * reset - resets the screen and all the variables
   */

  reset = ()=>{
    this.reponse = clear(this.reponse);
    this.pamArray = [];
    this.imcArray = [];
    this.screen = clear(this.screen);
  }

  /**
   * changeMode - changes the mode of the calculator
   * and updates the screen accordingly
   * @param btn : Button clicked by the user
   */
  changeMode(btn: Button) {
    const mode = btn.text;
    if (mode != this.currentMode) {
      this.screen = clear(this.screen);
      this.reponse = clear(this.reponse);
      this.imcArray = [];
      this.pamArray = [];
    };
    this.currentMode = mode;

  }

  /**
   * bck - invokes the back function
   * to delete the latest entered char in the screen
   */
  bck(){
    this.screen = back(this.screen);
  }

  /**
   * next - saves variables and do the computations
   * according to the selected mode
   */
  next() {
    //checks that the current mode is indeed "PAM"
    if (this.currentMode == this.modes.pam) {
      //computations for the "PAM" mode.
      if (!this.screen && !this.pamArray[0]){}
      if (this.pamArray[0] && this.pamArray[1]) {
        this.reponse = String(compute("PAM", this.pamArray));
        this.pamArray = [];
        this.screen = clear(this.screen);
      }
      this.pamArray.push(Number(this.screen));
      this.screen = clear(this.screen);
    }
else if(this.currentMode == this.modes.imc){
      //computationa for the "IMC" mode.
      if (!this.screen && !this.imcArray[0]){}
      if (this.imcArray[0] && this.imcArray[1]) {
        this.reponse = String(compute("IMC", this.imcArray));
        this.imcArray = [];
        this.screen = clear(this.screen);
      }
      this.imcArray.push(Number(this.screen));
      this.screen = clear(this.screen);
    }

  }

  constructor(private page: Page) {
    this.page.actionBarHidden = true;

  }

  ngOnInit(): void {


  }
}

Let's create the helper functions

Our calculator needs to compute a lot of stuff. Let's create a folder named common and a file, that we will name functions in which we will place every single helper function necessary to our app.

I commented the code so, it should be easy to understand it.

export function back(screen: string){
import { ElementRef, ViewChild } from "@angular/core";
import { Button } from "@nativescript/core";
export const formulas = {
    pam: "[(PAS + (2 x PAD) )/3]",
    imc: "[Poids(Kg)/Taille^2(m)]"
}
/**
 * clear - functions to clear the screen
 * @param screen : the screen to be cleared
 */
export function clear(screen: string){
    screen = "";
    return screen;
}
/**
 * 
 * @param mode the mode chosen by the user
 * @param dest the place of the screen where 
 * the mode should be displayed
 */
export function changeMode(mode: string, dest: string){
    dest = mode;
}

/**
 * 
 * @param pas systolic arterial pressure
 * @param pad diastolic arterial pressure
 * @returns mean arterial pressure
 */
export function pam(pas: number, pad: number){
    return (2*(pad) + pas)/3
}


/**
 * imc - computes the IMC
 * @param taille: length in cm
 * @param poids: weight in Kg
 * @returns the IMC
 */
export function imc(taille: number, poids: number){
    taille = converter(taille);
    const tailleCarre = Math.pow(taille, 2);
    return poids/tailleCarre;

}
/**
 * compute - finds the right formula and computes according to
 * the mode
 * @param mode the mode chosen by the user
 * @param store the array where are stored variables
 * @returns the desired computation
 */
export function compute(mode: string, store: string[]){
    switch (mode) {
        case "PAM":
            return pam(Number(store[0]), Number(store[1]))
        case "IMC":
            return imc(Number(store[0]), Number(store[1]))
    }
}
/**
 * pusher - stores the first param in an array
 * @param screen the screen containing the first param
 * @param store the array where to store thr first param
 */
export function pusher(screen: string, store: Array<string>){
    store.push(screen);
    clear(screen);
}
/**
 * scaleAnim - animates the btn to scale 0.5 times
 * from its original state
 * @param btn : the button to be animated
 */
export function scaleAnim(btn: Button){
    btn.animate({
        scale:{x:1.5, y:1.5},
        duration: 1,
        curve: "easeOut",
        iterations: 1,
    }).then(()=>{
        btn.animate({
            scale: {x:1, y:1}
        })
    })
}
/**
 * checkState - checks the state of the screen
 * @param screen : the screen to be checked
 * @returns true if the screen is not empty
 * false otherwise
 */
export function checkState(screen: string){
    return screen?true:false;
}

/**
 * getFormula - returns the formula of the selected mode 
 * @param mode : the formula to be ruturned
 */
export function getFormula(mode: string){
    switch (mode) {
        case "PAM" || "pam":
            return formulas.pam;
        default:
            break;
    }
}
/**
 * back - delete the latest entered value in the screen
 * @param screen the screen to be sliced
 * @returns a new string
 */
export function back(screen: string){
    if (screen){
        const len = screen.length - 1;
        return screen.slice(0, len);
}
    else{
        return screen;
}
}
/**
 * converter - converts the length from cm to m
 * @params len: the length in cm
 * @returns len in m
 */
export function converter(len: number){
    return len/100;
}

/**
 * choose - helps make a choice on 3 radio btns 
 * @param vcActive : the active viewChild
 * @param vc1 : an ElementRef to reset
 * @param vc2 : an ElementRef to reset
 * @param btn : the button used to toggle the change
 */
export async function choose(vcActive: ElementRef, vc1: ElementRef, vc2: ElementRef, btn?: Button){
    vcActive.nativeElement.toggle();
    vc1.nativeElement.checked = false;
    vc2.nativeElement.checked = false;
}

Let's add some style to our app

Open the home.component.css file and write those rules

.op{
    color: aquamarine;
    background-color: transparent;
    font-size: 16em;
    margin-top: 8px;
    margin-bottom: 8px;
    z-index: 0;
  }
  .opBtm{
    border-radius:50%;
    background-color: gray;
    font-size: 25px;
    margin-bottom: 30px;
    z-index: 0;

  }
  .opBtm{
    box-shadow:  0 0 30px gray;
  }


  .uxText{
    color: white;
    font-style: italic;  
}
  .btn{
    color: #ccc;
    background-color: transparent;
    font-size: 35em;
    margin-top: 8px;
    margin-bottom: 8px;
    z-index: 0;

  }

Add the icon fonts

I love Angular material so I'll use Google material icons.

In the source of your app, create a folder and name it fonts

Download the fonts here and place them in the fonts folder.

In your CSS file, write these rules

.m-icon-outlined{
     font-family: "MaterialIcons-Outlined";
     font-weight: 400;
}

Keep in mind that the font family name must match the name of the font in your fonts folder. Click here to find the code of an icon. We will use that code just like it is recommended here, by the NativeScript Docs

Test your app, run:

ns run android

Please refer to my GitHub if you have some problems running your app.

Ps: We will release our app next time so stay tuned...

Let's build the ultimate clinical calculator Android App with NativeScript

oreoyona — Sun, 26 Feb 2023 19:25:43 +0000

Part 1. Introduction

Introducing the ultimate clinical parameter calculator app designed to make the lives of medics and paramedics easier!

This cutting-edge app has been meticulously crafted with the latest and safest technologies on the market to provide fast and reliable calculations for mean arterial pressure, Apgar score, and BMI.

With its intuitive interface and sleek design, the app allows you to effortlessly calculate critical clinical parameters in mere seconds. The results are presented clearly and concisely, enabling you to make informed decisions quickly and confidently.

But this app isn't just about functionality - it's also about style. The designers have gone above and beyond to create an interface that is not only aesthetically pleasing but also easy to navigate. The app's color scheme and typography have been carefully selected to create a sense of calm and professionalism, reflecting the high standards of the medical profession.

Whether you're a seasoned healthcare professional or a student just starting, this app is an invaluable tool that will help you deliver the best possible care to your patients.

Prerequisites: you have to know Angular.

The long list of our app features

Since we want our clinical calculator, to be that good and complete, here is the list of features it needs to support

The basic modes

BMI mode to calculate the body mass index
Apgar mode to calculate the Apgar score in New Borns
PAM mode to calculate the mean arterial pressure

The advanced modes

NIHSS mode for quantifying stroke severity
Glasgow score to evaluate conscientiousness
Glomerular filtration rate for assessing the patient's kidneys

Considering the complexities of our app, we must design it to make the navigation easily understandable

The temporary mockups

Our app should, for basic modes, should look like this:

Apgar mode

BMI(IMC in french)

Mean arterial pressure, abbreviated PAM in french

The first steps

Make sure you have installed everything that is required to run a NativeScript app by reading this introductory article.

In your terminal, start a new NativeScript project by running:
ns create calculator --angular

Let's choose a blank template, we will be building our app from scratch.

In src > app, our app.module.ts should look like this:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptModule } from '@nativescript/angular'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component';

@NgModule({
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, AppRoutingModule],
  declarations: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA],

})
export class AppModule {}

Let's create a home module

Create a new folder and call it home. In it, let's create the files below:

_
-home-routing.module.ts
-home.component.css
-home.component.html
-home.component.ts
-home.module.ts
_

Let's write the home.module.ts file

This file will define our home page as a feature module.

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptCommonModule } from '@nativescript/angular'

import { HomeRoutingModule } from './home-routing.module'
import { HomeComponent } from './home.component'


@NgModule({
  imports: [NativeScriptCommonModule, HomeRoutingModule],
  declarations: [HomeComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class HomeModule {}

Let's write the home.component.ts file

This file will create a component from which we will create the logic supporting the layout that we will soon write in the home.component.html file.

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'Home',
  templateUrl: './home.component.html',
  styleUrls: ["./home.component.css"],
})
export class HomeComponent implements OnInit {
constructor() {
  }

  ngOnInit(): void {

  }
}

Let's write the home-routing.module.ts

This file will manage the routes to our home component.

import { NgModule } from '@angular/core'
import { Routes } from '@angular/router'
import { NativeScriptRouterModule } from '@nativescript/angular'

import { HomeComponent } from './home.component'
const routes: Routes = [
  { path: '', component: HomeComponent }
]

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule],
})
export class HomeRoutingModule {}

Let's now update the app-routing.module.ts file

import { NgModule } from '@angular/core'
import { Routes } from '@angular/router'
import { NativeScriptRouterModule} from '@nativescript/angular';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule),
  }

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule],
})
export class AppRoutingModule {}

Time to build the layout of our Home page.

I do not know if that's the case for you but, the first thing I write in a template file is normally a section. I do so to give it a class and then write some CSS. This is how I build virtually every layout in HTML.

I had this in mind when I started with NativeScript. I tried some layouts components proposed by NativeScript but nothing could equal, for my needs at least, the flexibility and the power of the GridLayout.

Understanding nativescript's GridLayout

A GridLayout is organized in columns(vertical) and rows(horizontal).

In our home.component.html file, we write:

<GridLayout></GridLayout>

This code however is not sufficient and does pretty much nothing we need to specify the kind of grid we want. But before doing that let's first visualize

In the image above, we have 5 columns starting from column 0(far left) to column 4(far right).

We also have 5 rows starting from row 0(top) to row 4(deepest down).

It's important to keep this model in mind: columns and rows are index based. So the first row and column should be referenced by 0.

Let's say we have 5 buttons, how could we place them on our grid?

In our template, we will pass some parameters to our GridLayout element.

<GridLayout columns="*, *, *, *, *" rows="*, *, *, *, *"></GridLayout>

This code gives our grid, 5 columns, and rows.

The * means that the column or the row needs to take up all the available space. So with 5 *, we only tell Nativescipt to divide the entire available space of the screen, both horizontally(for rows) and vertically(for columns) in 5 equal parts.

Let's now add our 5 buttons

<GridLayout columns="*, *, *, *, *" rows="*, *, *, *, *"> 
    <Button text="button 1"></Button> 
    <Button text="button 2"></Button>
    <Button text="button 3"></Button>
   <Button text="button 4"></Button>
    <Button text="button 5"></Button>

</GridLayout>

To specify where these 5 buttons need to be placed in our grid, we will give them a col(column)and a row(without the a) to occupy.

<GridLayout columns="*, *, *, *, *" rows="*, *, *, *, *"> 
    <Button text="button 1"col="0" row="0"></Button> 
    <Button text="button 2"col="1" row="1"></Button>
    <Button text="button 3"col="2" row="2" ></Button>
   <Button text="button 4"col="3" row="3"></Button>
    <Button text="button 5"col="4" row="4" ></Button>

</GridLayout>

Can you guess how this code will translate on our screen?
Well don't guess, see it by yourself:

ns run android

Now that we know how a GridLayout works, we will design our app according to the model of our mockup and it'll be fun.

See you next time...

Ps: let me know if you face some problems or have some corrections to make. We all are learners.

Rive animation is coming to NativeScript

oreoyona — Fri, 24 Feb 2023 21:38:27 +0000

How do you build rapidly animated icons for your navigation bar? In NativeScript, we can achieve this with CSS and JavaScript through the animate function but the quality of the icon might not be that great for multiple reasons.

This is why we had to have Lotties.

According to Lottie's official documentation, a Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets(like an image) They are small files that work on any device and can scale up or down without pixelation(they are like SVGs. They don't lose quality when the width and/or the height of the screen changes.

The beating heart gif above is a Lottie animation.

But this format although extremely useful has some drawbacks.

Rive is playing in Lotties'playground and offers some serious advantages like a smaller size among others.

You can learn more about the differences between Lottie and Rive here

Sidharth Khurana also wrote an eloquent comparative of these 2 animation formats

Rive in NativeScript

NativeScript will be joining other popular frameworks like Flutter and React Native to fully support Rive animation and we can only be grateful for that.

Without a doubt, UI and UX tooling in NativeScript will be enhanced which will make the development process much more enjoyable and the migration of those who were already using Rive with other frameworks, easier.

I can't wait to test it... Stay tuned for upcoming articles.

PS: we will be building a clinic calculator this Sunday.

Introduction to NativeScript

oreoyona — Sun, 19 Feb 2023 16:14:34 +0000

I have never quite been interested in building native apps but my recent realization of the web's limits changed my mind.

I tried firstly Ionic, a great framework for building hybrid applications. I had a great time playing with ionic components, they are awesome. (you can learn more about the Ionic framework by visiting the official documentation)

Don't get me wrong, you can build great hybrid apps with ionic but the problem is that Ionic uses some sort of a bridge between the native experience and your application.
In fact, apps built with this framework, although fantastic, are run in a web view because they're still web apps.

And what I wanted was a native app, something that could give me the flexibility of Ionic and the performance of a native app, built with Java/Kotlin and this is how I encountered NativeScript.

It's giving the possibility of using JS(Angular in my case) without compromising too much on the real experience of a native application.

You can learn more about the differences between Ionic, Flutter, Reactive Native, and NativeScript here.

Echo also wrote a deep dive into the main differences between Flutter and NativeScript, 2 popular frameworks for cross-platform application development, performance-wise.

If you are using Angular and don't want to learn Dart or React, NativeScript is almost the default choice, for, its support for angular is outstanding.

Installing the NativeScript CLI and setting environment variables.

The official documentation of NativeScript offers a great tutorial for installing and setting environment variables on UNIX OS and Windows. You can check it out here.

Please, take the time to read the official documentation before proceeding further with this article.

I had, however, the hardest time setting the JAVA_HOME environment variable. I recommend you install the required packages(⚠️JDK 11 by Adoptium) with Choco if you are on Windows.

Create your first native app with NativeScript

The NativeScript CLI already installed on your computer, run the following command in your terminal
ns create myFirstApp --angular

myFirstApp is the name of your application, you can use a name that is most convenient for you.

This command will create an angular-supported project for your app. You will probably be asked to choose a template, to begin with.

Templates are like Angular Material Schematics.

If you installed correctly everything that is mentioned in the official documentation provided by the NativeScript, you should be able to test your application on Android using an Emulator or a physical device.

I tested my app on my android device by enabling debugging mode in the developer's options. (the mentioned options can be found in your phone parameters after clicking 7 times on the build number on the "About the phone" page).

The link to the official documentation also offers how you can run your NativeScript application on your mobile device.

As a medical student, I believe in the importance of technology in changing and shaping the health of our communities, we will be building next time a clinic calculator using solely Angular and NativeScript.

It should be able to calculate:

The mean arterial pressure
The Apgar score
The BMI
The glomerular filtration score.

And of course, the design needs to be on point. We will be testing NativeScript capabilities in this particular area and I know it'll be fun so, see you next time.

PS: In the meantime, please take some time to learn about layouts in NativeScript utilizing the resources below:

The Official Documentation

These wonderful videos by Codedamn, from video 10 to video 13

The DOM

oreoyona — Fri, 11 Jun 2021 19:03:43 +0000

The Document Model Object(DOM) is an inevitable notion in Web programming.

This concept as important as it is, remained too abstract for me until I apprehend it in a certain way.

The definition which is given to us by the documentation may be at first a little intimidating (and that's an euphemism ).

Here is the definition of the DOM by MDN Docs:

« The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content. »

Well, you maybe have understand this definition but do you really have a clear idea of what exactly the DOM is ? Cause I don't.

So here is how I now understand it:

We have the html code below:

What if we want to add some conditions or 'reactions' to our form ? for example show a message notifying the user that his or her form has been sent ?

How can we do it with JavaScript ? We'll code it of course but the code we will write need to actually access the element we want to modify on the web page right ?

When we visit a website via Chrome or Safari or whatever you want, the browser loads the page (an HTML document) in memory and create a model of it to interpret and render to us.

The set of rules which specifies how the browser must model the web page is the DOM.

These rules are independents of HTML or JavaScript.

To be clear, the DOM is an interface that gives us the possibility to modify a web page with our scripts.

The browser structures the web page using a certain logic provided by the DOM, The DOM tree.

This structure organizes the webpage in parents elements and children that we call nodes just like a tree.

These elements are objects and have properties. I mean that they have some qualities that will give us the possibility to modify/manipulate them with our scripts.
Here is again, the definition provided by MDN Docs:

«The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.»

Does it now seem clear to you? I hope so!

Please feel free to tell me that I'm wrong. I am here to learn

100 days to learn JavaScript

oreoyona — Wed, 09 Jun 2021 18:19:03 +0000

The best way to learn something is the hard one... They say.

I'm a medical student, my schedule is just not easy and all my future projets need code(Machine Learning, Website etc)

I want to know how to create from scratch a full fonctionnal Facebook-like website, how do I get there ? Already have the books, the courses and the platform (Pluralsight)

It's been 6 months that I started. First with Python and Django, HTML, CSS after and now JavaScript. I already know some basics but I still don't know how to really code in JavaScript.

From this day, i will be posting my long 100 days journey to learn, master and understand at least the most basic JavaScript...