DEV Community: Tajeddine Alaoui

Functional programming.js

Tajeddine Alaoui — Thu, 11 Feb 2021 11:28:43 +0000

Functional programming it's not a language, It's a paradigm (style of programming).

So what are the perks of functional programming ?

Immutability (const variable instead of var/let)
Higher-order functions (functions passed around as variables)
Recursion (when a function calls itself)

And many more...

When is functional programming usually used

Data processing
Serverless
High-Criticality systems

The best part that i like about it is that it's really consice (short code) and robost compared to oop for instance.

Her's an example of functional programming code

function getOdds2(arr){
   return arr.filter(num => num % 2 !== 0)
}
console.log(getOdds2(arr))
// logs [ 1, 3, 5, 7, 9 ]
// this can be even shorter
const getOdds3 = arr => arr.filter(num => num % 2 !== 0)
console.log(getOdds3(arr))
// logs [ 1, 3, 5, 7, 9 ]

Vue vs React

Tajeddine Alaoui — Sun, 07 Feb 2021 09:02:40 +0000

Vue.js gain a lot of popularity in the recent years, But is it convincing enough for developers to jump from react to vue ?
Let's discuss on what are the differences between these giants.

Nuxt.js seo ready

Tajeddine Alaoui — Tue, 19 Jan 2021 17:34:45 +0000

Seo is a major pillar in web development and every production project have to be optimized for seo.

We'll need to install 1 package that will assist us on seo, Will make our site stand out while sharing the link on social networks, Her's a preview.

You can add: image, title, descreption and theme color.

Let's start with installing nuxt-social-meta

npm i nuxt-social-meta
or
yarn add nuxt-social-meta

Let's add meta tags on nuxt-config.js

head: {
    htmlAttrs: {
      // Add the default language of the website
      lang: 'en',
    },
    title: 'My website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      // Add a descreption for the website
      {
        hid: 'description',
        name: 'description',
        content: 'Descreption...',
      },
    ],
    link: [
      // Add the author
      {
        name: 'author',
        content: 'John Doe',
      },
      // Keywords related to the website
      {
        name: 'keywords',
        content: 'the best website ever',
      },
      // Favicon
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
    ],
  },

Now let's add the module responsible for social networks url sharing.

modules: [
    [
      'nuxt-social-meta',
      {
        title: 'website-title',
        description: 'website-descreption',
        url: 'https://website.com',
        img: '/bg.png',
        locale: 'en',
        themeColor: '#000',
      },
    ],
],

If you want to add custom meta tags for a page then do the following

<script>
export default {
  head() {
    return {
      title: 'my website',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'a website descreption',
        },
      ],
    }
  },
}
</script>

You're nuxt app is seo ready !

Transform your existing Nuxt.js app to PWA

Tajeddine Alaoui — Thu, 14 Jan 2021 11:41:11 +0000

Let's go the terminal and type:

yarn add --dev @nuxtjs/pwa

npm i --save-dev @nuxtjs/pwa

Once finished installing, go to nuxt-config.js and add the following

modules: ["@nuxtjs/pwa"],

Now you're app have pwa technology, We only need to override default values.

 // nuxt-config.js
  manifest: {
    icon: {
      // Add path to the app icon
      iconSrc: '',
    },
    // Short name of your app
    short_name: '',
    // Name of your app
    name: 'Chocoreto',
    // Add descreption
    descreption: '',
    start_url: '/',
    theme_color: '#fff',
    background_color: '#000',
  },

And voila !

HTTP Status codes

Tajeddine Alaoui — Mon, 21 Dec 2020 11:15:20 +0000

HTTP Stands for Hyper Text Transfer Protocol and it’s a way of communicating between web browsers and web servers.

One of the ways that http is used to communicate between web browsers & web servers is http status code, It provides a number that represent the current state of the operation in the webpage.

Here are some examples:

Informational responses (100–199)
Successful responses (200–299)
Redirects (300–399)
Client errors (400–499)
Server errors (500–599)

If you want to read more, These links will do the work:

http
http-status-code

Cheers.