Site Web Next.js Multilingue Utilisant I18next

L'internationalisation est un facteur important si notre site Web cible un public mondial. Les gens aiment interagir avec un site Web dans leur propre langue locale. Ici, nous discuterons des étapes pour implémenter plusieurs langues dans un site Web Next.js en utilisant le i18next . Nous couvrirons également le support Right To Left / RTL.

Ce que nous apprendrons

Dans cet article, nous apprendrons à : -

• Pourquoi i18next ?
• Créer une application Next.js,
• Installez et configurez i18next dans l'application
• Ajouter les chaînes locales/langue
• Basculer entre les paramètres régionaux
• Mise en œuvre de RTL

Après avoir terminé l'article, nous apprendrons à créer une application Next.js avec le flux de travail indiqué ci-dessous.

Pourquoi i18next ?

Next.js dispose d'une prise en charge intégrée pour la mise en œuvre d'un site Web multilingue .

Mais ne gère aucune gestion du contenu de la traduction, ni la fonctionnalité de traduction proprement dite. Tout ce que fait Next.js est de synchroniser vos paramètres régionaux et vos URL.

Le package i18next gère la gestion du contenu de traduction et des composants/hooks pour traduire vos composants React - tout en prenant entièrement en charge SSG/SSR, plusieurs  espaces de noms , le fractionnement de code, etc.

Commençons donc à créer notre site Web multilingue Next.js avec prise en charge RTL à l'aide de i18Next .

Créer une application Next.js

Nous pouvons facilement  créer une application Next.js  à l'aide de l'outil NPX.

npx create-next-app nextjs-i18n-multi-language-demo

La commande ci-dessus créera une nouvelle application Next.js avec le nom  nextjs-i18n-multi-language-demo. Dirigez-vous maintenant vers le répertoire du projet et ouvrez-le avec Visual Studio Code .

cd nextjs-i18n-multi-language-demo
code .

Installez le paquet next-i18next

Nous utilisons le package next-i18next pour traduire notre application Next.js. Le package gérera les paramètres régionaux et modifiera les chaînes de langue sur nos pages.

La commande ci-dessous installera ce package dans notre application.

npm i next-i18next

Enveloppez l'intégralité de l'application Next.js avec le HOC appWithTranslation

Le package next-i18next nous fournit appWithTranslationun composant d'ordre supérieur (HOC).

Nous devons encapsuler l'ensemble de l'application avec ce composant d'ordre supérieur. Ouvrez le fichier _app.js dans le répertoire des pages et enveloppez-le appWithTranslationcomme ci-dessous.

/pages/_app.js

import "../styles/globals.css";
import { appWithTranslation } from "next-i18next";
import "bootstrap/dist/css/bootstrap.min.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

Remarque : - Ici, j'importe également le fichier CSS Bootstrap . Vous devez installer bootstrap pour ce faire. La commande ci-dessous installera Bootstrap dans notre application.

npm i bootstrap@5.2.0-beta1

Créer la configuration pour le next-i18next

Créez maintenant un fichier de configuration pour le next-i18next . Créez un fichier next-i18next.config.js à la racine du projet et ajoutez la configuration ci-dessous.

/next-i18next.config.js

const path = require("path");

module.exports = {
  i18n: {
    locales: ["default", "en", "ar"],
    defaultLocale: "default",
    localeDetection: false,
    localePath: path.resolve("./public/locales"),
  },
};

Voyons la configuration en détail.

locales : - Un tableau contenant les paramètres régionaux dont nous avons besoin sur notre site Web. Ici, j'ajoute l'anglais - "en" et l'arabe - "ar" . Outre les deux, j'ajoute également une valeur "default" . Reportez-vous à la solution de contournement pour en savoir plus sur l'ajout d'un paramètre régional "par défaut".

defaultLocale :- La locale par défaut à afficher.

localePath : - Nous stockons les paramètres régionaux dans le répertoire public/locales . Alors, ajoutez ce chemin ici, path.resolve("./public/locales"). Nous verrons cela dans les prochaines étapes.

Importez maintenant la configuration i18next que nous avons créée dans next.config.js qui est la configuration principale de notre application.

Pour que le next.config.js soit le même que ci-dessous.

/next.config.js

/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n,
};

module.exports = nextConfig;

Ajouter les paramètres régionaux

Commençons maintenant à ajouter les paramètres régionaux dans notre application. Ici, nous ajoutons des chaînes de langue anglaise et arabe.

Nous allons donc créer /public/locales/default/common.json , /public/locales/en/common.json et /public/locales/ar/common.json pour stocker les différentes chaînes de langue. Notez que /en/common.json et /default/common.json seront les mêmes dans notre cas.

La structure du fichier sera la même que ci-dessous.

.
└── public
    └── locales
        └── defualt
        |    └── common.json
        ├── en
        |   └── common.json
        └── ar
            └── common.json

Le fichier /public/locale/defeault/common.json contiendra les chaînes de paramètres régionaux à afficher par défaut. Ceci est donné ci-dessous.

/public/locale/default/common.json

{
  "home": {
    "Home title": "Home title",
    "Home description": "Home description"
  },
  "about": {
    "About title": "About title",
    "About description": "About description"
  },
  "header": {
    "Home": "Home",
    "About": "About"
  }
}

Notre fichier /public/locale/en/common.json contiendra les chaînes de paramètres régionaux à afficher lors de la sélection de la langue anglaise . Ceci est donné ci-dessous.

/public/locale/en/common.json

{
  "home": {
    "Home title": "Home title",
    "Home description": "Home description"
  },
  "about": {
    "About title": "About title",
    "About description": "About description"
  },
  "header": {
    "Home": "Home",
    "About": "About"
  }
}

Le fichier /public/locale/ar/common.json contiendra les chaînes de paramètres régionaux à afficher lors de la sélection de la langue arabe. Reportez-vous au code ci-dessous.

/public/locale/ar/common.json

{
  "home": {
    "Home title": "عنوان المنزل",
    "Home description": "وصف المنزل"
  },
  "about": {
    "About title": "حول العنوان",
    "About description": "حول الوصف"
  },
  "header": {
    "Home": "مسكن",
    "About": "حول"
  }
}

Composant de navigation et sélecteur de paramètres régionaux

Nous devons maintenant coder un composant de navigation où nous afficherons le nom de notre site Web, des liens vers les pages et un sélecteur de paramètres régionaux.

Le sélecteur de paramètres régionaux est utilisé pour basculer entre les langues. Nous pouvons coder le sélecteur de paramètres régionaux comme un autre composant.

Maintenant, codons d'abord le composant Navigation dans le fichier /components/navigation.js .

/composants/navigation.js

import LocaleSwitcher from "./locale-switcher";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { useEffect } from "react";

export default function Navigation() {
  const router = useRouter();

  const { t } = useTranslation("");

  return (
    <nav className="navbar navbar-expand-lg bg-light">
      <div className="container-fluid">
        <Link href="/">
          <a className="navbar-brand">Next.js Multi-Language</a>
        </Link>
        <div className="navbar-collapse" id="navbarText">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link href="/">
                <a
                  className={`nav-link ${
                    router?.pathname === "/" ? "active" : ""
                  }`}
                >
                  {t("header.Home")}
                </a>
              </Link>
            </li>
            <li className="nav-item">
              <Link href="/about">
                <a
                  className={`nav-link ${
                    router?.pathname === "/about" ? "active" : ""
                  }`}
                >
                  {t("header.About")}
                </a>
              </Link>
            </li>
          </ul>
          <LocaleSwitcher />
        </div>
      </div>
    </nav>
  );
}

Vous pouvez voir le contenu tel que {t("header.Home")}dans le fichier ci-dessus. Nous en discuterons plus tard.

Codez maintenant le composant de sélection de paramètres régionaux.

Composant de sélecteur de paramètres régionaux

Nous obtenons ici les paramètres régionaux que nous avons mentionnés dans le fichier de configuration i18next. Ensuite, cartographiez chaque élément de paramètres régionaux et cliquez sur chacun pour créer un lien comme ci-dessous.

 <Link href={{ pathname, query }} as={asPath} locale={locale}>

Le lien ci-dessus changera l'URL locale de notre application en la locale correspondante que nous avons sélectionnée.

Le code complet du composant LocaleSwitcher est donné ci-dessous.

/components/language-switcher.js

import Link from "next/link";
import { useRouter } from "next/router";

export default function LocaleSwitcher() {
  const router = useRouter();

  const { locales, locale: activeLocale } = router;

  const otherLocales = locales?.filter(
    (locale) => locale !== activeLocale && locale !== "default"
  );

  return (
    <span className="text-muted cursor-pointer">
      {otherLocales?.map((locale) => {
        const { pathname, query, asPath } = router;
        return (
          <span key={"locale-" + locale}>
            <Link href={{ pathname, query }} as={asPath} locale={locale}>
              <a>
                {locale === "en" ? "English" : locale === "ar" ? "عربى" : null}
              </a>
            </Link>
          </span>
        );
      })}
    </span>
  );
}

Page d'accueil et À propos avec traduction i18next

Nous avons donc configuré le i18next dans notre application Next.js. Créons maintenant une page d'accueil et une page à propos et ajoutons du contenu qui se traduit par un changement de paramètres régionaux.

Je pense que vous savez déjà comment créer des pages dans une application Next.js. Voyons maintenant la partie traduction.

Importez d'abord le useTranslationcrochet du paquet next-i18next.

import { useTranslation } from "next-i18next";

Nous pouvons maintenant utiliser une fonction t()pour obtenir les chaînes de langue que nous avons ajoutées dans le fichier de paramètres régionaux dans le répertoire locales .

Par exemple, le code ci-dessous récupérera la chaîne de la locale correspondante que nous sélectionnerons (en ou ar). home.Home title

  const { t } = useTranslation();

  return (
    <>
        <h1>{t("home.Home title")}</h1>
    </>
  );

Nous devons également importer serverSideTranslationsdepuis le next-i18next/serverSideTranslations.

import { serverSideTranslations } from "next-i18next/serverSideTranslations";

Passez ensuite le ...(await serverSideTranslations(locale, ["common"]))avec les accessoires à l'intérieur du getStaticPropsou getServerSideProps.

Dans notre application, nous utilisons le getStaticProps. Reportez-vous au code ci-dessous.

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
}

Le code pour l'ensemble de la page d'accueil est donné ci-dessous.

/pages/index.js

import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Navigation from "../components/navigation";

export default function Home() {
  const { t } = useTranslation();

  return (
    <>
      <Navigation />
      <div className="mt-5">
        <h1>{t("home.Home title")}</h1>
        <p>{t("home.Home description")}</p>
      </div>
    </>
  );
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
}

De la même manière, nous pouvons coder la page à propos. Le code de la page à propos est donné ci-dessous.

/pages/about.js

import { useTranslation } from "react-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Navigation from "../components/navigation";

export default function About() {
  const { t } = useTranslation("");

  return (
    <>
      <Navigation />
      <div className="mt-5">
        <h1>{t("about.About title")}</h1>
        <p>{t("about.About description")}</p>
      </div>
    </>
  );
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
}

Activation de la prise en charge RTL

Nous avons donc créé un site Web multilingue dans Next.js en utilisant i18next. Cela changera la langue du contenu en changeant les paramètres régionaux de la section Navigation.

Mais nous devons faire encore une chose. Des langues comme l'arabe ont besoin du support RTL . Le contenu doit être aligné de droite à gauche .

Implémentons donc le RTL dans notre application Next.js.

HTML a un support intégré pour RTL. Le code ci-dessous alignera le contenu de droite à gauche.

<html dir="rtl" lang="ar">
</html>

Nous pouvons implémenter la même logique dans notre application Next.js en créant un fichier _document.js dans le répertoire des pages et en ajoutant le code ci-dessous.

/pages/_document.js

import Document, { Html, Main, NextScript, Head } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, locale: ctx?.locale || "en" };
  }

  render() {
    return (
      <Html
        dir={this.props.locale === "ar" ? "rtl" : "ltr"}
        lang={this.props.locale}
      >
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Cela activera la fonctionnalité RTL dans notre application Next.js. Mais ce n'est qu'après avoir actualisé la page que nous pouvons voir la différence.

Pour surmonter ce problème, nous pouvons utiliser le useEffectcrochet. Le code ci-dessous injectera les attributs diret dans la balise avec un changement de paramètres régionaux.lang<html>

  useEffect(() => {
    let dir = router.locale == "ar" ? "rtl" : "ltr";
    let lang = router.locale == "ar" ? "ar" : "en";
    document.querySelector("html").setAttribute("dir", dir);
    document.querySelector("html").setAttribute("lang", lang);
  }, [router.locale]);

Le code document.querySelector("html").setAttribute("dir", "rtl")donnera dir="rtl"à la <html>balise.

Ainsi, lorsque les paramètres régionaux changent, le code ci-dessous donnera des attributs diret langà la <html>balise de notre application.

Nous devons ajouter ce code à notre composant de navigation . Pour que l'ensemble du composant de navigation devienne comme ci-dessous.

/composants/navigation.js

import LocaleSwitcher from "./locale-switcher";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { useEffect } from "react";

export default function Navigation() {
  const router = useRouter();

  const { t } = useTranslation("");

  useEffect(() => {
    let dir = router.locale == "ar" ? "rtl" : "ltr";
    let lang = router.locale == "ar" ? "ar" : "en";
    document.querySelector("html").setAttribute("dir", dir);
    document.querySelector("html").setAttribute("lang", lang);
  }, [router.locale]);

  return (
    <nav className="navbar navbar-expand-lg bg-light">
      <div className="container-fluid">
        <Link href="/">
          <a className="navbar-brand">Next.js Multi-Language</a>
        </Link>
        <div className="navbar-collapse" id="navbarText">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link href="/">
                <a
                  className={`nav-link ${
                    router?.pathname === "/" ? "active" : ""
                  }`}
                >
                  {t("header.Home")}
                </a>
              </Link>
            </li>
            <li className="nav-item">
              <Link href="/about">
                <a
                  className={`nav-link ${
                    router?.pathname === "/about" ? "active" : ""
                  }`}
                >
                  {t("header.About")}
                </a>
              </Link>
            </li>
          </ul>
          <LocaleSwitcher />
        </div>
      </div>
    </nav>
  );
}

Codesandbox

Reportez-vous au lien CodeSandbox pour afficher l'application en direct. Vous pouvez cloner ce projet sur votre compte CodeSandbox et modifier également le code.

https://codesandbox.io/s/gifted-wind-f74pko

GitHub

Vous pouvez toujours vous référer au référentiel GitHub pour cloner ce projet, vous référer au code et travailler dessus.

https://github.com/techomoro/nextjs-i18next-multi-language-demo

Sommaire

Dans cet article, nous avons discuté des étapes pour implémenter plusieurs langues dans un site Web Next.js en utilisant i18next.

 Source : https://www.techomoro.com/multi-language-next-js-website-using-i18next-rtl-support/

  #i18next #nextjs #website 

What is GEEK

Buddha Community

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

• Fast startup without relying on a custom version of Node.js.
• Small artifact (current size is around 1.2MB).
• First class macros.
• Support building small TUI apps using Reagent.
• Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

• destructuring using :syms
• property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

• c64core: retrocompute aesthetics twitter bot
• gallery.cljs: script to download walpapers from windowsonearth.org.
• nbb-action-example: example of a Github action built with nbb.

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

• babashka >= 0.4.0
• Clojure CLI >= 1.10.3.933
• Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

• Clone and cd into this repo
• bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Google analytics Setup with Next JS, React JS using Router Events - 14

In this video, we are going to implement Google Analytics to our Next JS application. Tracking page views of an application is very important.

Google analytics will allow us to track analytics information.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #js #react js #react #next #google analytics

Node JS Development Company| Node JS Web Developers-SISGAIN

Top organizations and start-ups hire Node.js developers from SISGAIN for their strategic software development projects in Illinois, USA. On the off chance that you are searching for a first rate innovation to assemble a constant Node.js web application development or a module, Node.js applications are the most appropriate alternative to pick. As Leading Node.js development company, we leverage our profound information on its segments and convey solutions that bring noteworthy business results. For more information email us at hello@sisgain.com

#node.js development services #hire node.js developers #node.js web application development #node.js development company #node js application

Evolution in Web Design: A Case Study of 25 Years - Prismetric

The term web design simply encompasses a design process related to the front-end design of website that includes writing mark-up. Creative web design has a considerable impact on your perceived business credibility and quality. It taps onto the broader scopes of web development services.

Web designing is identified as a critical factor for the success of websites and eCommerce. The internet has completely changed the way businesses and brands operate. Web design and web development go hand-in-hand and the need for a professional web design and development company, offering a blend of creative designs and user-centric elements at an affordable rate, is growing at a significant rate.

In this blog, we have focused on the different areas of designing a website that covers all the trends, tools, and techniques coming up with time.

Web design
In 2020 itself, the number of smartphone users across the globe stands at 6.95 billion, with experts suggesting a high rise of 17.75 billion by 2024. On the other hand, the percentage of Gen Z web and internet users worldwide is up to 98%. This is not just a huge market but a ginormous one to boost your business and grow your presence online.

Web Design History
At a huge particle physics laboratory, CERN in Switzerland, the son of computer scientist Barner Lee published the first-ever website on August 6, 1991. He is not only the first web designer but also the creator of HTML (HyperText Markup Language). The worldwide web persisted and after two years, the world’s first search engine was born. This was just the beginning.

Evolution of Web Design over the years
With the release of the Internet web browser and Windows 95 in 1995, most trading companies at that time saw innumerable possibilities of instant worldwide information and public sharing of websites to increase their sales. This led to the prospect of eCommerce and worldwide group communications.

The next few years saw a soaring launch of the now-so-famous websites such as Yahoo, Amazon, eBay, Google, and substantially more. In 2004, by the time Facebook was launched, there were more than 50 million websites online.

Then came the era of Google, the ruler of all search engines introducing us to search engine optimization (SEO) and businesses sought their ways to improve their ranks. The world turned more towards mobile web experiences and responsive mobile-friendly web designs became requisite.

Let’s take a deep look at the evolution of illustrious brands to have a profound understanding of web design.

Here is a retrospection of a few widely acclaimed brands over the years.

Netflix
From a simple idea of renting DVDs online to a multi-billion-dollar business, saying that Netflix has come a long way is an understatement. A company that has sent shockwaves across Hollywood in the form of content delivery. Abundantly, Netflix (NFLX) is responsible for the rise in streaming services across 190 countries and meaningful changes in the entertainment industry.

1997-2000

The idea of Netflix was born when Reed Hastings and Marc Randolph decided to rent DVDs by mail. With 925 titles and a pay-per-rental model, Netflix.com debuts the first DVD rental and sales site with all novel features. It offered unlimited rentals without due dates or monthly rental limitations with a personalized movie recommendation system.

Netflix 1997-2000

2001-2005

Announcing its initial public offering (IPO) under the NASDAQ ticker NFLX, Netflix reached over 1 million subscribers in the United States by introducing a profile feature in their influential website design along with a free trial allowing members to create lists and rate their favorite movies. The user experience was quite engaging with the categorization of content, recommendations based on history, search engine, and a queue of movies to watch.

Netflix 2001-2005 -2003

2006-2010

They then unleashed streaming and partnering with electronic brands such as blu-ray, Xbox, and set-top boxes so that users can watch series and films straight away. Later in 2010, they also launched their sophisticated website on mobile devices with its iconic red and black themed background.

Netflix 2006-2010 -2007

2011-2015

In 2013, an eye-tracking test revealed that the users didn’t focus on the details of the movie or show in the existing interface and were perplexed with the flow of information. Hence, the professional web designers simply shifted the text from the right side to the top of the screen. With Daredevil, an audio description feature was also launched for the visually impaired ones.

Netflix 2011-2015

2016-2020

These years, Netflix came with a plethora of new features for their modern website design such as AutoPay, snippets of trailers, recommendations categorized by genre, percentage based on user experience, upcoming shows, top 10 lists, etc. These web application features yielded better results in visual hierarchy and flow of information across the website.

Netflix 2016-2020

2021

With a sleek logo in their iconic red N, timeless black background with a ‘Watch anywhere, Cancel anytime’ the color, the combination, the statement, and the leading ott platform for top video streaming service Netflix has overgrown into a revolutionary lifestyle of Netflix and Chill.

Netflix 2021

Contunue to read: Evolution in Web Design: A Case Study of 25 Years

#web #web-design #web-design-development #web-design-case-study #web-design-history #web-development

Top Vue.js Developers in USA

We, at HireFullStackDeveloperIndia, implement the right strategic approach to offer a wide variety through customized Vue.js development services to suit your requirements at most competitive prices.

Vue.js is an open-source JavaScript framework that is incredibly progressive and adoptive and majorly used to build a breathtaking user interface. Vue.js is efficient to create advanced web page applications.

Vue.js gets its strength from the flexible JavaScript library to build an enthralling user interface. As the core of Vue.js is concentrated which provides a variety of interactive components for the web and gives real-time implementation. It gives freedom to developers by giving fluidity and eases the integration process with existing projects and other libraries that enables to structure of a highly customizable application.

Vue.js is a scalable framework with a robust in-build stack that can extend itself to operate apps of any proportion. Moreover, vue.js is the best framework to seamlessly create astonishing single-page applications.

Our Vue.js developers have gained tremendous expertise by delivering services to clients worldwide over multiple industries in the area of front-end development. Our adept developers are experts in Vue development and can provide the best value-added user interfaces and web apps.

We assure our clients to have a prime user interface that reaches end-users and target the audience with the exceptional user experience across a variety of devices and platforms. Our expert team of developers serves your business to move ahead on the path of success, where your enterprise can have an advantage over others.

Here are some key benefits that you can avail when you decide to hire vue.js developers in USA from HireFullStackDeveloperIndia:

• A team of Vue.js developers of your choice
• 100% guaranteed client satisfaction
• Integrity and Transparency
• Free no-obligation quote
• Portal development solutions
• Interactive Dashboards over a wide array of devices
• Vue.js music and video streaming apps
• Flexible engagement model
• A free project manager with your team
• 24*7 communication with your preferred means

If you are looking to hire React Native developers in USA, then choosing HireFullStackDeveloperIndia would be the best as we offer some of the best talents when it comes to Vue.js.

#javascript #vue-js #web-development #node-js #reactjs #mobile-apps #angular-js #blockchain #ios #react-native #laravel #jquery #web-service #html5 #go #sql-server #user-experience #facebook #ember-js #symfony #raspberry-pi